feat(label): add small variant

packages/core/src/components/Label/Label.module.scss

@@ -147,6 +147,15 @@
       background-color: var(--positive-color-selected);
     }
   }
+
+  .smallText {
+    line-height: 14px;
+  }
+}
+
+.small {
+  padding: 0 var(--spacing-xs);
+  border-radius: 2px;
 }
 
 @include keyframe(label-spin-in-emphasized) {

packages/core/src/components/Label/Label.tsx

@@ -7,29 +7,12 @@ import { backwardCompatibilityForProperties } from "../../helpers/backwardCompat
 import Text from "../Text/Text";
 import Leg from "./Leg";
 import { LabelColor, LabelKind } from "./LabelConstants";
-import { VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
+import { VibeComponent, withStaticProps } from "../../types";
 import useClickableProps from "../../hooks/useClickableProps/useClickableProps";
 import useMergeRef from "../../hooks/useMergeRef";
 import styles from "./Label.module.scss";
 import LabelCelebrationAnimation from "./LabelCelebrationAnimation";
-
-export interface LabelProps extends VibeComponentProps {
-  /**
-   * @deprecated - use className instead
-   */
-  wrapperClassName?: string;
-  /**
-   * Class name for an inner text wrapper
-   */
-  labelClassName?: string;
-  kind?: LabelKind;
-  color?: LabelColor;
-  text?: string;
-  isAnimationDisabled?: boolean;
-  isLegIncluded?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-  celebrationAnimation?: boolean;
-}
+import { mapSizesToTextSize, LabelProps } from "./Label.types";
 
 const Label: VibeComponent<LabelProps> & {
   colors?: typeof LabelColor;
@@ -48,7 +31,8 @@ const Label: VibeComponent<LabelProps> & {
       id,
       "data-testid": dataTestId,
       onClick,
-      celebrationAnimation
+      celebrationAnimation,
+      size = "medium"
     },
     ref
   ) => {
@@ -69,11 +53,12 @@ const Label: VibeComponent<LabelProps> & {
             // 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 +96,17 @@ const Label: VibeComponent<LabelProps> & {
         >
           <Text
             element="span"
-            type={Text.types.TEXT2}
+            type={mapSizesToTextSize[size]}
             className={classNames}
             color={Text.colors.ON_INVERTED}
             data-celebration-text={isCelebrationAnimation}
           >
-            <Text element="span" type={Text.types.TEXT2} color={Text.colors.INHERIT}>
+            <Text
+              element="span"
+              type={mapSizesToTextSize[size]}
+              color={Text.colors.INHERIT}
+              className={cx({ [styles.smallText]: size === "small" })}
+            >
               {text}
             </Text>
             <span className={cx(styles.legWrapper)}>{isLegIncluded ? <Leg /> : null}</span>
@@ -133,7 +123,8 @@ const Label: VibeComponent<LabelProps> & {
       classNames,
       isCelebrationAnimation,
       text,
-      isLegIncluded
+      isLegIncluded,
+      size
     ]);
 
     // Celebration animation is applied only for line kind

packages/core/src/components/Label/Label.types.ts

@@ -0,0 +1,31 @@
+import { VibeComponentProps } from "../../types";
+import { LabelColor, LabelKind } from "./LabelConstants";
+import React from "react";
+import { TextType } from "../Text/TextConstants";
+import Text from "../Text/Text";
+
+export type Sizes = "small" | "medium";
+
+export const mapSizesToTextSize: Record<Sizes, TextType> = {
+  small: Text.types.TEXT3,
+  medium: Text.types.TEXT2
+};
+
+export interface LabelProps extends VibeComponentProps {
+  /**
+   * @deprecated - use className instead
+   */
+  wrapperClassName?: string;
+  /**
+   * Class name for an inner text wrapper
+   */
+  labelClassName?: string;
+  kind?: LabelKind;
+  color?: LabelColor;
+  text?: string;
+  isAnimationDisabled?: boolean;
+  isLegIncluded?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+  celebrationAnimation?: boolean;
+  size?: Sizes;
+}

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.
 
 <Canvas of={LabelStories.Kinds} />
 
+### Size
+
+Label can appear in 2 sizes: small and medium.
+
+<Canvas of={LabelStories.Sizes} />
+
 ### Colors
 
 <Canvas of={LabelStories.Colors} />

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<typeof Label>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Label,
@@ -18,6 +21,21 @@ export default {
   decorators: metaSettings.decorators
 };
 
+const withGrid: Decorator = Story => (
+  <div
+    style={{
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 180px)",
+      marginInlineStart: "30px",
+      marginTop: "10px",
+      gap: "50px",
+      width: "100%"
+    }}
+  >
+    <Story />
+  </div>
+);
+
 const labelTemplate = createComponentTemplate(Label);
 
 export const Overview = {
@@ -46,7 +64,6 @@ export const Kinds = {
       </div>
     </>
   ),
-
   name: "Kinds",
 
   parameters: {
@@ -56,28 +73,37 @@ export const Kinds = {
   }
 };
 
-export const Colors = {
+export const Sizes: Story = {
   render: () => (
     <>
-      <div className="monday-storybook-label_group">
-        <Label text="New" />
-        <Label text="New" kind={Label.kinds.LINE} />
-      </div>
-      <div className="monday-storybook-label_group">
-        <Label text="New" color={Label.colors.NEGATIVE} />
-        <Label text="New" color={Label.colors.NEGATIVE} kind={Label.kinds.LINE} />
-      </div>
-      <div className="monday-storybook-label_group">
-        <Label text="New" color={Label.colors.POSITIVE} />
-        <Label text="New" color={Label.colors.POSITIVE} kind={Label.kinds.LINE} />
-      </div>
-      <div className="monday-storybook-label_group">
-        <Label text="New" color={Label.colors.DARK} />
-        <Label text="New" color={Label.colors.DARK} kind={Label.kinds.LINE} />
-      </div>
+      <Label text="New" />
+      <Label text="New" size="small" />
     </>
   ),
+  decorators: [withGrid],
+  name: "Sizes",
 
+  parameters: {
+    chromatic: {
+      pauseAnimationAtEnd: true
+    }
+  }
+};
+
+export const Colors = {
+  render: () => (
+    <>
+      <Label text="New" />
+      <Label text="New" color={Label.colors.NEGATIVE} />
+      <Label text="New" color={Label.colors.POSITIVE} />
+      <Label text="New" color={Label.colors.DARK} />
+      <Label text="New" kind={Label.kinds.LINE} />
+      <Label text="New" color={Label.colors.NEGATIVE} kind={Label.kinds.LINE} />
+      <Label text="New" color={Label.colors.POSITIVE} kind={Label.kinds.LINE} />
+      <Label text="New" color={Label.colors.DARK} kind={Label.kinds.LINE} />
+    </>
+  ),
+  decorators: [withGrid],
   name: "Colors",
 
   parameters: {
@@ -90,15 +116,11 @@ export const Colors = {
 export const Clickable = {
   render: () => (
     <>
-      <div className="monday-storybook-label_group monday-storybook-label_states-gap">
-        <Label text="New" onClick={NOOP} />
-      </div>
-      <div className="monday-storybook-label_group monday-storybook-label_states-gap">
-        <Label text="New" kind={Label.kinds.LINE} onClick={NOOP} />
-      </div>
+      <Label text="New" onClick={NOOP} />
+      <Label text="New" kind={Label.kinds.LINE} onClick={NOOP} />
     </>
   ),
-
+  decorators: [withGrid],
   name: "Clickable",
 
   parameters: {