From 737cb1369d419de020a9e7f4ae8a240fa9423649 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Wed, 15 May 2024 11:44:15 +0300 Subject: [PATCH 1/8] feat(label): add small variant --- packages/core/src/components/Label/Label.tsx | 19 +++++++++++++---- .../components/Label/__stories__/label.mdx | 6 ++++++ .../Label/__stories__/label.stories.tsx | 21 +++++++++++++++++++ 3 files changed, 42 insertions(+), 4 deletions(-) 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: () => ( <> From 3754709067770dc3a348bdb191d98951848c5a40 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Thu, 16 May 2024 09:23:16 +0300 Subject: [PATCH 2/8] Fix small label style --- packages/core/src/components/Label/Label.module.scss | 5 +++++ packages/core/src/components/Label/Label.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss index 330fb959e2..79fa0b6f93 100644 --- a/packages/core/src/components/Label/Label.module.scss +++ b/packages/core/src/components/Label/Label.module.scss @@ -21,6 +21,11 @@ position: relative; } +.small { + padding: 0 var(--spacing-xs); + border-radius: 2px; +} + .withLeg { border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-small) 0; } diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx index f60483af60..382a201413 100644 --- a/packages/core/src/components/Label/Label.tsx +++ b/packages/core/src/components/Label/Label.tsx @@ -79,11 +79,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( From b4edb942998d6128b4d7a5e4ab5f145bcb0c5798 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Thu, 16 May 2024 09:41:36 +0300 Subject: [PATCH 3/8] move label types to new file --- packages/core/src/components/Label/Label.tsx | 30 ++---------------- .../core/src/components/Label/Label.types.ts | 31 +++++++++++++++++++ 2 files changed, 33 insertions(+), 28 deletions(-) create mode 100644 packages/core/src/components/Label/Label.types.ts diff --git a/packages/core/src/components/Label/Label.tsx b/packages/core/src/components/Label/Label.tsx index 382a201413..c4ee8ded95 100644 --- a/packages/core/src/components/Label/Label.tsx +++ b/packages/core/src/components/Label/Label.tsx @@ -7,38 +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"; -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 { - /** - * @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) => void; - celebrationAnimation?: boolean; - size?: Sizes; -} +import { mapSizesToTextSize, LabelProps } from "./Label.types"; const Label: VibeComponent & { colors?: typeof LabelColor; 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..eb5af3d3e7 --- /dev/null +++ b/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 = { + 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) => void; + celebrationAnimation?: boolean; + size?: Sizes; +} From cb93e233168af74d34f3ff1835ad0f668401ba7f Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Thu, 16 May 2024 11:22:29 +0300 Subject: [PATCH 4/8] change storybook to use decorators & live editor --- .../src/components/Label/Label.module.scss | 16 +++-- .../components/Label/__stories__/label.mdx | 2 +- .../Label/__stories__/label.stories.tsx | 66 +++++++++---------- 3 files changed, 45 insertions(+), 39 deletions(-) diff --git a/packages/core/src/components/Label/Label.module.scss b/packages/core/src/components/Label/Label.module.scss index 79fa0b6f93..b07efd3dc4 100644 --- a/packages/core/src/components/Label/Label.module.scss +++ b/packages/core/src/components/Label/Label.module.scss @@ -21,11 +21,6 @@ position: relative; } -.small { - padding: 0 var(--spacing-xs); - border-radius: 2px; -} - .withLeg { border-radius: var(--border-radius-small) var(--border-radius-small) var(--border-radius-small) 0; } @@ -154,6 +149,17 @@ } } +.small { + padding: 0 var(--spacing-xs); + border-radius: 2px; + + &.kindLine { + span { + line-height: 14px; + } + } +} + @include keyframe(label-spin-in-emphasized) { @include spin-in-emphasized(); } diff --git a/packages/core/src/components/Label/__stories__/label.mdx b/packages/core/src/components/Label/__stories__/label.mdx index ac28c93824..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"; diff --git a/packages/core/src/components/Label/__stories__/label.stories.tsx b/packages/core/src/components/Label/__stories__/label.stories.tsx index cb7c2581c1..5041b5a9a2 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,20 @@ export default { decorators: metaSettings.decorators }; +const withGrid: Decorator = Story => ( +
+ +
+); + const labelTemplate = createComponentTemplate(Label); export const Overview = { @@ -46,7 +63,6 @@ export const Kinds = { ), - name: "Kinds", parameters: { @@ -56,18 +72,14 @@ export const Kinds = { } }; -export const Sizes = { +export const Sizes: Story = { render: () => ( <> -
-
-
-
+