diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx index 23b099fd26..f60483af60 100644 --- a/packages/core/src/components/Label/Label.tsx +++ b/packages/core/src/components/Label/Label.tsx @@ -12,6 +12,14 @@ import useClickableProps from "../../hooks/useClickableProps/useClickableProps"; import useMergeRef from "../../hooks/useMergeRef"; import styles from "./Label.module.scss"; import LabelCelebrationAnimation from "./LabelCelebrationAnimation"; +import { TextType } from "../Text/TextConstants"; + +type Sizes = "small" | "medium"; + +const mapSizesToTextSize: Record = { + small: Text.types.TEXT3, + medium: Text.types.TEXT2 +}; export interface LabelProps extends VibeComponentProps { /** @@ -29,6 +37,7 @@ export interface LabelProps extends VibeComponentProps { isLegIncluded?: boolean; onClick?: (event: React.MouseEvent) => void; celebrationAnimation?: boolean; + size?: Sizes; } const Label: VibeComponent & { @@ -48,7 +57,8 @@ const Label: VibeComponent & { id, "data-testid": dataTestId, onClick, - celebrationAnimation + celebrationAnimation, + size = "medium" }, ref ) => { @@ -111,12 +121,12 @@ const Label: VibeComponent & { > - + {text} {isLegIncluded ? : null} @@ -133,7 +143,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/__stories__/label.mdx b/packages/core/src/components/Label/__stories__/label.mdx index ccf41421bd..ac28c93824 100644 --- a/packages/core/src/components/Label/__stories__/label.mdx +++ b/packages/core/src/components/Label/__stories__/label.mdx @@ -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..cb7c2581c1 100644 --- a/packages/core/src/components/Label/__stories__/label.stories.tsx +++ b/packages/core/src/components/Label/__stories__/label.stories.tsx @@ -56,6 +56,27 @@ export const Kinds = { } }; +export const Sizes = { + render: () => ( + <> +
+
+
+
+ + ), + + name: "Sizes", + + parameters: { + chromatic: { + pauseAnimationAtEnd: true + } + } +}; + export const Colors = { render: () => ( <>