diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index deec1e89d0..cd45ddefba 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -26,7 +26,7 @@ $transition-timing-function: ease-in-out; &__text { @include mixins.text-body-1(); - display: flex; + display: inline-flex; align-items: baseline; margin: 0 var(--_--margin-inline); width: 100%; @@ -64,12 +64,13 @@ $transition-timing-function: ease-in-out; } &__addon { - display: flex; + display: inline-flex; align-items: center; justify-content: center; width: var(--_--height); - height: var(--_--height); + height: 100%; border-radius: var(--_--border-radius); + box-sizing: border-box; &_side_start, &_side_end { @@ -115,6 +116,11 @@ $transition-timing-function: ease-in-out; --_--margin-addon-end: 22px; } + &_xs.g-label_multiline { + --_--addon-padding-on-multiline: 4px; + --_--label-padding-on-multiline: 1px; + } + &_s { --_--height: 24px; --_--border-radius: var(--g-border-radius-s); @@ -123,6 +129,11 @@ $transition-timing-function: ease-in-out; --_--margin-addon-end: 26px; } + &_s.g-label_multiline { + --_--addon-padding-on-multiline: 5px; + --_--label-padding-on-multiline: 3px; + } + &_m { --_--height: 28px; --_--border-radius: var(--g-border-radius-m); @@ -130,6 +141,11 @@ $transition-timing-function: ease-in-out; --_--margin-addon-start: 32px; --_--margin-addon-end: 32px; } + + &_m.g-label_multiline { + --_--addon-padding-on-multiline: 6px; + --_--label-padding-on-multiline: 5px; + } } &_disabled { @@ -212,4 +228,31 @@ $transition-timing-function: ease-in-out; &__addon_type_button:focus-visible { outline: 2px solid var(--g-color-line-focus); } + + &_multiline { + height: min-content; + padding-block: var(--_--label-padding-on-multiline); + + #{$block}__text { + white-space: normal; + overflow: inherit; + text-align: start; + line-height: 18px; + } + + #{$block}__addon_side_end, + #{$block}__addon_side_start { + padding: var(--_--addon-padding-on-multiline); + width: auto; + align-items: start; + } + + #{$block}__addon_side_start { + inset-inline-start: 2px; + } + + #{$block}__addon_side_end { + inset-inline-end: 0; + } + } } diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index f217390805..8b9f95d4ae 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -56,6 +56,8 @@ export interface LabelProps extends QAProps { size?: 'xs' | 's' | 'm'; /** Browser title for Label */ title?: string; + /** Multiline available */ + multiline?: boolean; } export const Label = React.forwardRef(function Label( @@ -80,6 +82,7 @@ export const Label = React.forwardRef(function Label( onCopy, onClick, qa, + multiline, } = props; const hasContent = Boolean(children !== '' && React.Children.count(children) > 0); @@ -92,7 +95,12 @@ export const Label = React.forwardRef(function Label( const {copyIconSize, closeIconSize} = sizeMap[size]; const startIcon = icon && ( -
+
{icon}
); @@ -152,6 +160,7 @@ export const Label = React.forwardRef(function Label( size, interactive: isInteractive, disabled, + multiline, }, className, )} diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png new file mode 100644 index 0000000000..69845eb12b Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png new file mode 100644 index 0000000000..8492c3385e Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png new file mode 100644 index 0000000000..12c6fad34c Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png differ diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png new file mode 100644 index 0000000000..1fd7ea80c0 Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png differ diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx index aac0960180..056de726cd 100644 --- a/src/components/Label/__stories__/Label.stories.tsx +++ b/src/components/Label/__stories__/Label.stories.tsx @@ -155,7 +155,24 @@ export const LinkWrapper: Story = { }, }; +export const Multiline: Story = { + render: (args) => ( +
+
+ ), + args: { + children: 'Multiline label', + multiline: true, + }, +}; + export const ShowcaseStory: Story = { render: () => , name: 'Showcase', }; + +export const MultilineShowcaseStory: Story = { + render: () => , + name: 'Showcase (multiline)', +}; diff --git a/src/components/Label/__stories__/LabelShowcase.scss b/src/components/Label/__stories__/LabelShowcase.scss index 506ce99bf0..adca29cf9e 100644 --- a/src/components/Label/__stories__/LabelShowcase.scss +++ b/src/components/Label/__stories__/LabelShowcase.scss @@ -4,6 +4,7 @@ .grid { display: grid; gap: 30px; + width: min-content; } .header { @@ -14,9 +15,5 @@ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; - & > * { - width: min-content; - margin-inline-start: unset; - } } } diff --git a/src/components/Label/__stories__/LabelShowcase.tsx b/src/components/Label/__stories__/LabelShowcase.tsx index 838ac5a8ca..71d91b7f69 100644 --- a/src/components/Label/__stories__/LabelShowcase.tsx +++ b/src/components/Label/__stories__/LabelShowcase.tsx @@ -22,17 +22,21 @@ const icons = (id: 'TickIcon' | 'GearIcon' | '-', size: 'xs' | 's' | 'm' = 'xs') }[id]; }; -export function LabelShowcase(args: LabelProps) { - const themes = [ - 'normal', - 'info', - 'success', - 'warning', - 'danger', - 'utility', - 'unknown', - 'clear', - ] as const; +type LabelShowcaseProps = LabelProps & {multiline?: boolean}; + +export function LabelShowcase({multiline, ...args}: LabelShowcaseProps) { + const themes = multiline + ? (['normal'] as const) + : ([ + 'normal', + 'info', + 'success', + 'warning', + 'danger', + 'utility', + 'unknown', + 'clear', + ] as const); const sizes = ['xs', 's', 'm'] as const; const getLabel = ({...props}: WithKey) =>