diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss index 330fb959e2..51f9d76dee 100644 --- a/packages/core/src/components/Label/Label.module.scss +++ b/packages/core/src/components/Label/Label.module.scss @@ -19,6 +19,11 @@ border-radius: var(--border-radius-small); padding: 2px var(--spacing-small); position: relative; + + &.small { + padding: 0 var(--spacing-xs); + border-radius: 2px; + } } .withLeg { @@ -147,6 +152,10 @@ background-color: var(--positive-color-selected); } } + + .smallText { + line-height: 14px; + } } @include keyframe(label-spin-in-emphasized) { diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx index 23b099fd26..605a2a3d2f 100644 --- a/packages/core/src/components/Label/Label.tsx +++ b/packages/core/src/components/Label/Label.tsx @@ -12,6 +12,7 @@ import useClickableProps from "../../hooks/useClickableProps/useClickableProps"; import useMergeRef from "../../hooks/useMergeRef"; import styles from "./Label.module.scss"; import LabelCelebrationAnimation from "./LabelCelebrationAnimation"; +import { mapSizesToTextSize, Sizes } from "./Label.types"; export interface LabelProps extends VibeComponentProps { /** @@ -29,6 +30,7 @@ export interface LabelProps extends VibeComponentProps { isLegIncluded?: boolean; onClick?: (event: React.MouseEvent) => void; celebrationAnimation?: boolean; + size?: Sizes; } const Label: VibeComponent & { @@ -48,7 +50,8 @@ const Label: VibeComponent & { id, "data-testid": dataTestId, onClick, - celebrationAnimation + celebrationAnimation, + size = "medium" }, ref ) => { @@ -69,11 +72,12 @@ const Label: VibeComponent & { // When celebrationAnimation is active it wins over the default animation [styles.withAnimation]: !isAnimationDisabled && !isCelebrationAnimation, [styles.withLeg]: isLegIncluded, - [styles.clickable]: isClickable + [styles.clickable]: isClickable, + [styles.small]: size === "small" }, labelClassName ), - [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, isCelebrationAnimation, isClickable] + [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, isCelebrationAnimation, isClickable, size] ); const onClickCallback = useCallback( @@ -111,12 +115,17 @@ const Label: VibeComponent & { > - + {text} {isLegIncluded ? : null} @@ -133,7 +142,8 @@ const Label: VibeComponent & { classNames, isCelebrationAnimation, text, - isLegIncluded + isLegIncluded, + size ]); // Celebration animation is applied only for line kind diff --git a/packages/core/src/components/Label/Label.types.ts b/packages/core/src/components/Label/Label.types.ts new file mode 100644 index 0000000000..a99e80ea20 --- /dev/null +++ b/packages/core/src/components/Label/Label.types.ts @@ -0,0 +1,9 @@ +import { TextType } from "../Text/TextConstants"; +import Text from "../Text/Text"; + +export type Sizes = "small" | "medium"; + +export const mapSizesToTextSize: Record = { + small: Text.types.TEXT3, + medium: Text.types.TEXT2 +}; diff --git a/packages/core/src/components/Label/__stories__/label.mdx b/packages/core/src/components/Label/__stories__/label.mdx index ccf41421bd..1759587bcf 100644 --- a/packages/core/src/components/Label/__stories__/label.mdx +++ b/packages/core/src/components/Label/__stories__/label.mdx @@ -1,4 +1,4 @@ -import { Canvas, Meta } from "@storybook/blocks"; +import { Meta } from "@storybook/blocks"; import { Link } from "vibe-storybook-components"; import Label from "../Label"; import { CHIP, COUNTER, TOOLTIP } from "../../../storybook/components/related-components/component-description-map"; @@ -46,6 +46,12 @@ A label indicates the status of an item. +### Size + +Label can appear in 2 sizes: small and medium. + + + ### Colors diff --git a/packages/core/src/components/Label/__stories__/label.stories.tsx b/packages/core/src/components/Label/__stories__/label.stories.tsx index 66dd05f0fc..4344cb3429 100644 --- a/packages/core/src/components/Label/__stories__/label.stories.tsx +++ b/packages/core/src/components/Label/__stories__/label.stories.tsx @@ -5,6 +5,9 @@ import { NOOP } from "../../../utils/function-utils"; import { createComponentTemplate, MultipleStoryElementsWrapper } from "vibe-storybook-components"; import "./label.stories.scss"; import { useEffect, useState } from "react"; +import { Decorator, StoryObj } from "@storybook/react"; + +type Story = StoryObj; const metaSettings = createStoryMetaSettingsDecorator({ component: Label, @@ -18,6 +21,21 @@ export default { decorators: metaSettings.decorators }; +const withGrid: Decorator = Story => ( +
+ +
+); + const labelTemplate = createComponentTemplate(Label); export const Overview = { @@ -29,6 +47,11 @@ export const Overview = { parameters: { chromatic: { pauseAnimationAtEnd: true + }, + docs: { + liveEdit: { + isEnabled: false + } } } }; @@ -46,7 +69,6 @@ export const Kinds = { ), - name: "Kinds", parameters: { @@ -56,28 +78,37 @@ export const Kinds = { } }; -export const Colors = { +export const Sizes: Story = { render: () => ( <> -
-
-
-
-
-
-
-
+