feat(label): add small variant (#2121)

mondaycom · May 19, 2024 · 2ca6562 · 2ca6562
1 parent a7a51ad
commit 2ca6562
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 32 deletions.
diff --git 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
@@ -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<HTMLSpanElement, MouseEvent>) => void;
   celebrationAnimation?: boolean;
+  size?: Sizes;
 }
 
 const Label: VibeComponent<LabelProps> & {
@@ -48,7 +50,8 @@ const Label: VibeComponent<LabelProps> & {
       id,
       "data-testid": dataTestId,
       onClick,
-      celebrationAnimation
+      celebrationAnimation,
+      size = "medium"
     },
     ref
   ) => {
@@ -69,11 +72,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 +115,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 +142,8 @@ const Label: VibeComponent<LabelProps> & {
       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
@@ -0,0 +1,9 @@
+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
+};
diff --git 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.
 
 <Canvas of={LabelStories.Kinds} />
 
+### Size
+
+Label can appear in 2 sizes: small and medium.
+
+<Canvas of={LabelStories.Sizes} />
+
 ### Colors
 
 <Canvas of={LabelStories.Colors} />

diff --git 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<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 = {
@@ -29,6 +47,11 @@ export const Overview = {
   parameters: {
     chromatic: {
       pauseAnimationAtEnd: true
+    },
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
     }
   }
 };
@@ -46,7 +69,6 @@ export const Kinds = {
       </div>
     </>
   ),
-
   name: "Kinds",
 
   parameters: {
@@ -56,28 +78,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 +121,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: {