From e2c16c48958d5b2c403e1fe6251278c66c99656a Mon Sep 17 00:00:00 2001 From: Vadim Kudriavtsev Date: Thu, 31 Oct 2024 13:38:48 +0300 Subject: [PATCH] feat: add Badge & Tabs truncate props --- .../plasma-b2c Tabs -- truncate.snap.png | Bin 0 -> 7161 bytes .../plasma-web Badge -- _view.snap.png | Bin 25161 -> 28638 bytes ...plasma-web Tabs -- item autoFocus.snap.png | Bin 6146 -> 6137 bytes .../plasma-web Tabs -- truncate.snap.png | Bin 0 -> 7190 bytes .../plasma-core Tabs -- _disabled.snap.png | Bin 4848 -> 4845 bytes .../plasma-core Tabs -- _stretch.snap.png | Bin 4513 -> 4513 bytes .../plasma-core Tabs -- autoscroll.snap.png | Bin 3082 -> 3058 bytes .../plasma-core Tabs -- controller.snap.png | Bin 5202 -> 5193 bytes .../plasma-core Tabs -- simple.snap.png | Bin 5202 -> 5193 bytes .../plasma-core Tabs -- with icon.snap.png | Bin 5795 -> 5785 bytes packages/plasma-b2c/api/plasma-b2c.api.md | 3 + .../components/Tabs/Tabs.component-test.tsx | 47 ++++++++++ .../src/components/Tabs/Tabs.stories.tsx | 83 +++++++++++++----- .../src/components/Badge/Badge.styles.ts | 30 ++++--- .../src/components/Badge/Badge.tokens.ts | 1 + .../src/components/Badge/Badge.tsx | 9 +- .../src/components/Badge/Badge.types.ts | 7 +- .../src/components/Tabs/TabItem.types.ts | 7 +- .../src/components/Tabs/tokens.ts | 1 + .../HorizontalTabItem.styles.ts | 81 ++++++++++------- .../HorizontalTabItem/HorizontalTabItem.tsx | 9 +- .../VerticalTabItem/VerticalTabItem.styles.ts | 83 ++++++++++-------- .../VerticalTabItem/VerticalTabItem.tsx | 8 +- .../components/Badge/Badge.config.ts | 3 + .../components/Badge/Badge.stories.tsx | 6 +- .../components/Tabs/Tabs.stories.tsx | 70 +++++++++++---- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + .../components/Tabs/Tabs.stories.tsx | 70 +++++++++++---- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + packages/plasma-web/api/plasma-web.api.md | 3 + .../components/Badge/Badge.component-test.tsx | 4 + .../components/Tabs/Tabs.component-test.tsx | 47 ++++++++++ .../src/components/Tabs/Tabs.stories.tsx | 79 ++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + packages/sdds-cs/api/sdds-cs.api.md | 3 + .../src/components/Tabs/Tabs.stories.tsx | 59 +++++++++---- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + packages/sdds-dfa/api/sdds-dfa.api.md | 3 + .../src/components/Tabs/Tabs.stories.tsx | 79 ++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + .../sdds-finportal/api/sdds-finportal.api.md | 3 + .../src/components/Tabs/Tabs.stories.tsx | 79 ++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + packages/sdds-insol/api/sdds-insol.api.md | 3 + .../src/components/Tabs/Tabs.stories.tsx | 79 ++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + packages/sdds-serv/api/sdds-serv.api.md | 3 + .../src/components/Tabs/Tabs.stories.tsx | 79 ++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + 57 files changed, 829 insertions(+), 260 deletions(-) create mode 100644 cypress/snapshots/b2c/components/Tabs/Tabs.component-test.tsx/plasma-b2c Tabs -- truncate.snap.png create mode 100644 cypress/snapshots/web/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- truncate.snap.png diff --git a/cypress/snapshots/b2c/components/Tabs/Tabs.component-test.tsx/plasma-b2c Tabs -- truncate.snap.png b/cypress/snapshots/b2c/components/Tabs/Tabs.component-test.tsx/plasma-b2c Tabs -- truncate.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..0924b4febbc754798b11b92ea00fb828cd683d47 GIT binary patch literal 7161 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Badge/Badge.component-test.tsx/plasma-web Badge -- _view.snap.png b/cypress/snapshots/web/components/Badge/Badge.component-test.tsx/plasma-web Badge -- _view.snap.png index 795e9e573b4baf18e221034470987ed1dff270c8..98ee0dd1fec5fafbffc7de0dcc38cc680c193943 100644 GIT binary patch literal 28638 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 diff --git a/cypress/snapshots/web/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- item autoFocus.snap.png b/cypress/snapshots/web/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- item autoFocus.snap.png index 738adf597224639e2d4ce32dd5e9ebac593e0508..eb2173a93b195a7888e8b313027f356073185ffb 100644 GIT binary patch literal 6137 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 literal 6146 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 GU;h&@)0V6N diff --git a/cypress/snapshots/web/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- truncate.snap.png b/cypress/snapshots/web/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- truncate.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c733b98f1b04c08ab313f4bda338e949012adbd6 GIT binary patch literal 7190 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 literal 0 HcmV?d00001 diff --git a/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _disabled.snap.png b/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _disabled.snap.png index 5dd01ab6a1fce4c2a94bf5a7e5cc416a8de68ca9..7a05ea3569c0509db12c8d64bb5cf915038b9a87 100644 GIT binary patch literal 4845 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 delta 84 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 HexT$}g0KmI diff --git a/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- controller.snap.png b/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- controller.snap.png index 9fc8a55152d6c04f2e810255bf9c230556db85f8..d0064db06d0fcaf587eb9cc4213ca1f4b52d654e 100644 GIT binary patch literal 5193 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 literal 5202 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%0A~x9!+&?) zC`ix@_fN$|L6)-)<&q`zT1j^BQiNt>yZk%l+>=JGoR4Gfeb*4XXbr5=>qhM2oY=Ne z;kLls1q>7F2a#}Nl>Cjp) iYhSqbAGtQqtU0KMxBclk4g6P#aNh5}uk@#rSN;u?^018n diff --git a/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- simple.snap.png b/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- simple.snap.png index 9fc8a55152d6c04f2e810255bf9c230556db85f8..d0064db06d0fcaf587eb9cc4213ca1f4b52d654e 100644 GIT binary patch literal 5193 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 literal 5202 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%0A~x9!+&?) zC`ix@_fN$|L6)-)<&q`zT1j^BQiNt>yZk%l+>=JGoR4Gfeb*4XXbr5=>qhM2oY=Ne z;kLls1q>7F2a#}Nl>Cjp) iYhSqbAGtQqtU0KMxBclk4g6P#aNh5}uk@#rSN;u?^018n diff --git a/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- with icon.snap.png b/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- with icon.snap.png index e92030255003bfcb41810ea859806e0726e5d5ca..0143d54fa97a6cc82357b4f5d389a17ee847f1dc 100644 GIT binary patch literal 5785 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 diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index d08b5b633a..e061235140 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -738,6 +738,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -750,6 +751,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -762,6 +764,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx b/packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx index 6efdd39724..6d2e76f6f1 100644 --- a/packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx +++ b/packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx @@ -184,4 +184,51 @@ describe('plasma-b2c: Tabs', () => { cy.get('button').contains('Sber').should('be.visible'); cy.get('button').contains('Joy').should('not.be.visible'); }); + + it('truncate', () => { + mount( + + + {items.map((item, i) => ( + + {item.label} + + ))} + + + + {items.map((item, i) => ( + + {item.label} + + ))} + + + + {items.map((item, i) => ( + + {item.label} + + ))} + + , + ); + + cy.matchImageSnapshot(); + }); }); diff --git a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx index 3ed8776181..4b7ae6c43e 100644 --- a/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-b2c/src/components/Tabs/Tabs.stories.tsx @@ -28,6 +28,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -81,6 +82,19 @@ const meta: Meta = { 'outsideScroll', 'index', ]), + contentRight: { + options: contentRightOptions, + control: { + type: 'select', + }, + if: { arg: 'helperText', eq: '' }, + }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -609,12 +645,12 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => ( { tabIndex={!disabled ? 0 : -1} disabled={disabled} value={helperText} - size={size} + size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -634,7 +671,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/plasma-new-hope/src/components/Badge/Badge.styles.ts b/packages/plasma-new-hope/src/components/Badge/Badge.styles.ts index dbe2096ad3..6804012de8 100644 --- a/packages/plasma-new-hope/src/components/Badge/Badge.styles.ts +++ b/packages/plasma-new-hope/src/components/Badge/Badge.styles.ts @@ -1,16 +1,7 @@ import { styled } from '@linaria/react'; import { css } from '@linaria/core'; -import { tokens } from './Badge.tokens'; - -export const base = css` - display: inline-flex; - align-items: center; - box-sizing: border-box; - justify-content: center; - - width: max-content; -`; +import { classes, tokens } from './Badge.tokens'; export const StyledContentLeft = styled.div` display: flex; @@ -25,3 +16,22 @@ export const StyledContentRight = styled.div` margin-left: var(${tokens.rightContentMarginLeft}); margin-right: var(${tokens.rightContentMarginRight}); `; + +export const base = css` + display: inline-flex; + align-items: center; + box-sizing: border-box; + justify-content: center; + + width: max-content; + + &.${classes.badgeTruncate} { + max-width: 100%; + + ${StyledContentMain} { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +`; diff --git a/packages/plasma-new-hope/src/components/Badge/Badge.tokens.ts b/packages/plasma-new-hope/src/components/Badge/Badge.tokens.ts index 7c1c2d7d7f..a966ff50c4 100644 --- a/packages/plasma-new-hope/src/components/Badge/Badge.tokens.ts +++ b/packages/plasma-new-hope/src/components/Badge/Badge.tokens.ts @@ -2,6 +2,7 @@ export const classes = { badgePilled: 'badge-pilled', badgeTransparent: 'badge-transparent', badgeClear: 'badge-clear', + badgeTruncate: 'badge-truncate', }; export const tokens = { diff --git a/packages/plasma-new-hope/src/components/Badge/Badge.tsx b/packages/plasma-new-hope/src/components/Badge/Badge.tsx index 6c8ceb5684..ccc2b36893 100644 --- a/packages/plasma-new-hope/src/components/Badge/Badge.tsx +++ b/packages/plasma-new-hope/src/components/Badge/Badge.tsx @@ -25,24 +25,31 @@ export const badgeRoot = (Root: RootProps) => pilled = false, transparent = false, clear = false, + maxWidth = 'auto', ...rest } = props; const pilledClass = pilled ? classes.badgePilled : undefined; const transparentClass = transparent ? classes.badgeTransparent : undefined; const clearClass = clear ? classes.badgeClear : undefined; + const truncateClass = maxWidth !== 'auto' ? classes.badgeTruncate : undefined; + const txt = !text && typeof children === 'string' ? children : text; return ( {contentLeft && {contentLeft}} {txt ? {txt} : children} diff --git a/packages/plasma-new-hope/src/components/Badge/Badge.types.ts b/packages/plasma-new-hope/src/components/Badge/Badge.types.ts index a73c9474d2..cf30b79652 100644 --- a/packages/plasma-new-hope/src/components/Badge/Badge.types.ts +++ b/packages/plasma-new-hope/src/components/Badge/Badge.types.ts @@ -1,4 +1,4 @@ -import type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; +import type { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'; type ClearViewProps = | { @@ -63,6 +63,11 @@ type CustomBadgeProps = { * Слот для контента справа, например `Icon` */ contentRight?: ReactNode; + /** + * Обрезает контент по максимальной ширине и добавляет ... + * @default 'auto' + */ + maxWidth?: CSSProperties['width']; /** * Размер Badge * @default diff --git a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts index 4c33a9cd44..d65a933483 100644 --- a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts +++ b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts @@ -1,4 +1,4 @@ -import type { ButtonHTMLAttributes, ReactNode } from 'react'; +import type { ButtonHTMLAttributes, CSSProperties, ReactNode } from 'react'; import type { AsProps } from '../../types'; @@ -47,6 +47,11 @@ export interface BaseTabItemProps extends ButtonHTMLAttributes <> {contentLeft && {contentLeft}} diff --git a/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.ts b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.ts index 7fa8433f0a..0f71bacaac 100644 --- a/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.ts +++ b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.styles.ts @@ -2,7 +2,44 @@ import { css } from '@linaria/core'; import { styled } from '@linaria/react'; import { addFocus } from '../../../../../mixins'; -import { tokens } from '../../../tokens'; +import { classes, tokens } from '../../../tokens'; + +export const StyledContent = styled.div` + display: inline-block; + width: fit-content; + + padding: 0 var(${tokens.itemContentPaddingClear}, var(${tokens.itemContentPadding})); +`; + +export const TabItemValue = styled.span` + white-space: nowrap; + color: var(${tokens.itemValueColor}); + + font-family: var(${tokens.valueFontFamily}, var(${tokens.fontFamily})); + font-size: var(${tokens.valueFontSize}, var(${tokens.fontSize})); + font-style: var(${tokens.valueFontStyle}, var(${tokens.fontStyle})); + font-weight: var(${tokens.valueFontWeight}, var(${tokens.fontWeight})); + letter-spacing: var(${tokens.valueLetterSpacing}, var(${tokens.letterSpacing})); + line-height: var(${tokens.valueLineHeight}, var(${tokens.lineHeight})); +`; + +export const RightContent = styled.div` + display: flex; + color: inherit; + + &:hover { + color: inherit; + } +`; + +export const LeftContent = styled.div` + display: flex; + color: inherit; + + &:hover { + color: inherit; + } +`; export const base = css` position: relative; @@ -10,7 +47,7 @@ export const base = css` align-items: center; justify-content: flex-start; box-sizing: border-box; - align-items: center; + white-space: nowrap; gap: var(${tokens.itemContentGap}); padding: var(${tokens.itemPaddingOrientationVertical}); @@ -37,40 +74,16 @@ export const base = css` } `, })}; -`; - -export const StyledContent = styled.div` - display: inline-block; - width: fit-content; - - padding: 0 var(${tokens.itemContentPaddingClear}, var(${tokens.itemContentPadding})); -`; -export const TabItemValue = styled.span` - color: var(${tokens.itemValueColor}); + &.${classes.tabsTruncate} { + ${StyledContent} { + overflow: hidden; + text-overflow: ellipsis; + } - font-family: var(${tokens.valueFontFamily}, var(${tokens.fontFamily})); - font-size: var(${tokens.valueFontSize}, var(${tokens.fontSize})); - font-style: var(${tokens.valueFontStyle}, var(${tokens.fontStyle})); - font-weight: var(${tokens.valueFontWeight}, var(${tokens.fontWeight})); - letter-spacing: var(${tokens.valueLetterSpacing}, var(${tokens.letterSpacing})); - line-height: var(${tokens.valueLineHeight}, var(${tokens.lineHeight})); -`; - -export const RightContent = styled.div` - display: flex; - color: inherit; - - &:hover { - color: inherit; - } -`; - -export const LeftContent = styled.div` - display: flex; - color: inherit; - - &:hover { - color: inherit; + ${TabItemValue} { + overflow: hidden; + text-overflow: ellipsis; + } } `; diff --git a/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx index cb2ff66ff7..826de768aa 100644 --- a/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx +++ b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.tsx @@ -28,6 +28,7 @@ export const verticalTabItemRoot = (Root: RootProps <> {contentLeft && {contentLeft}} diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.config.ts index 0728f98e5e..71e6c61938 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.config.ts @@ -162,5 +162,8 @@ export const config = { clear: { true: css``, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.stories.tsx index 9a707140b6..39d20417eb 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Badge/Badge.stories.tsx @@ -31,6 +31,9 @@ const meta: Meta = { control: { type: 'boolean' }, if: { arg: 'clear', truthy: false }, }, + maxWidth: { + control: { type: 'text' }, + }, ...disableProps(['contentLeft', 'contentRight']), }, }; @@ -64,7 +67,7 @@ export const Default: Story = { }, }, args: { - text: 'Hello', + text: 'Hello Kitty', view: 'default', size: 'm', enableContentLeft: false, @@ -72,6 +75,7 @@ export const Default: Story = { clear: false, pilled: false, transparent: false, + maxWidth: '', }, render: ({ enableContentLeft, enableContentRight, size, ...rest }: StoryProps) => { const iconSize = size === 'l' ? '1rem' : '0.75rem'; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx index 730ee2d912..1b0814feb4 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx @@ -29,6 +29,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: string) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -76,6 +77,12 @@ const meta: Meta = { }, if: { arg: 'helperText', eq: '' }, }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -90,13 +97,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -110,8 +118,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -127,8 +136,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -147,6 +157,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -166,8 +177,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -183,8 +195,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -202,6 +215,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -234,8 +248,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -251,8 +266,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -269,6 +285,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -285,9 +302,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -343,6 +361,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -363,8 +382,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -381,8 +401,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -401,6 +422,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -428,8 +450,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -446,8 +469,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -465,6 +489,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -498,8 +523,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -516,8 +542,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -534,6 +561,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -548,10 +576,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -604,7 +633,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -620,6 +649,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > {`Label${i + 1}`} @@ -629,7 +659,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -645,8 +675,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -658,8 +689,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.ts index 6224fd89e4..4854fed049 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -267,5 +267,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.ts index 44a119ae6a..8b2e86f317 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Tabs/vertical/VerticalTabItem.config.ts @@ -116,5 +116,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/Tabs.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/Tabs.stories.tsx index c001590f81..3c2989b433 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/Tabs.stories.tsx @@ -29,6 +29,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: string) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -76,6 +77,12 @@ const meta: Meta = { }, if: { arg: 'helperText', eq: '' }, }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -90,13 +97,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -110,8 +118,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -127,8 +136,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -147,6 +157,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -166,8 +177,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -183,8 +195,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -202,6 +215,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -234,8 +248,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -251,8 +266,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -269,6 +285,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -285,9 +302,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -343,6 +361,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -363,8 +382,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -381,8 +401,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -401,6 +422,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -428,8 +450,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -446,8 +469,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -465,6 +489,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -498,8 +523,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -516,8 +542,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -534,6 +561,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -548,10 +576,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -604,7 +633,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -620,6 +649,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > {`Label${i + 1}`} @@ -629,7 +659,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -645,8 +675,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -658,8 +689,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.ts index 6224fd89e4..4854fed049 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -267,5 +267,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.ts index 44a119ae6a..8b2e86f317 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Tabs/vertical/VerticalTabItem.config.ts @@ -116,5 +116,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index b474c56e63..1c259424ca 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -739,6 +739,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -751,6 +752,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -763,6 +765,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/plasma-web/src/components/Badge/Badge.component-test.tsx b/packages/plasma-web/src/components/Badge/Badge.component-test.tsx index 3f2c1b8bc3..f4f9799003 100644 --- a/packages/plasma-web/src/components/Badge/Badge.component-test.tsx +++ b/packages/plasma-web/src/components/Badge/Badge.component-test.tsx @@ -51,6 +51,10 @@ describe('plasma-web: Badge', () => { } /> + } maxWidth="8rem" /> + + + , ); cy.matchImageSnapshot(); diff --git a/packages/plasma-web/src/components/Tabs/Tabs.component-test.tsx b/packages/plasma-web/src/components/Tabs/Tabs.component-test.tsx index 5f0e8936cb..a559445972 100644 --- a/packages/plasma-web/src/components/Tabs/Tabs.component-test.tsx +++ b/packages/plasma-web/src/components/Tabs/Tabs.component-test.tsx @@ -109,4 +109,51 @@ describe('plasma-web: Tabs', () => { cy.get('button').contains('Sber').should('be.visible'); cy.get('button').contains('Joy').should('not.be.visible'); }); + + it('truncate', () => { + mount( + + + {items.map((item, i) => ( + + {item.label} + + ))} + + + + {items.map((item, i) => ( + + {item.label} + + ))} + + + + {items.map((item, i) => ( + + {item.label} + + ))} + + , + ); + + cy.matchImageSnapshot(); + }); }); diff --git a/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx b/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx index 359d9b9b08..4b7ae6c43e 100644 --- a/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx +++ b/packages/plasma-web/src/components/Tabs/Tabs.stories.tsx @@ -28,6 +28,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -81,6 +82,19 @@ const meta: Meta = { 'outsideScroll', 'index', ]), + contentRight: { + options: contentRightOptions, + control: { + type: 'select', + }, + if: { arg: 'helperText', eq: '' }, + }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -609,7 +645,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -625,8 +661,9 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -634,7 +671,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 1250d49454..0c092e3a2a 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -265,5 +265,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts index 97c7fbbf6d..ff5619391e 100644 --- a/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -114,5 +114,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-cs/api/sdds-cs.api.md b/packages/sdds-cs/api/sdds-cs.api.md index d340ae2741..0dddedb3c3 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -551,6 +551,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -563,6 +564,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -575,6 +577,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/sdds-cs/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-cs/src/components/Tabs/Tabs.stories.tsx index 1d2949aa59..90e5ae405c 100644 --- a/packages/sdds-cs/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-cs/src/components/Tabs/Tabs.stories.tsx @@ -26,6 +26,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = 's'; @@ -80,6 +81,12 @@ const meta: Meta = { 'index', 'size', ]), + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -94,13 +101,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -114,8 +122,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -131,8 +140,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size, disabled)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -151,6 +161,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -170,8 +181,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -187,8 +199,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -206,6 +219,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -238,8 +252,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -255,8 +270,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -273,6 +289,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -289,9 +306,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -347,6 +365,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -367,8 +386,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -385,8 +405,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -405,6 +426,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -432,8 +454,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -450,8 +473,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -469,6 +493,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -502,8 +527,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -520,8 +546,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -538,6 +565,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -552,10 +580,11 @@ export const VerticalTabs: StoryObj = { size: 's', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { diff --git a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index bda02ed7f7..dfaa6fb5f8 100644 --- a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -154,5 +154,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts index 1cbcd6d45d..58a0834f7c 100644 --- a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -75,5 +75,8 @@ export const config = { ${tabsTokens.itemSelectedDividerColorHover}: none; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-dfa/api/sdds-dfa.api.md b/packages/sdds-dfa/api/sdds-dfa.api.md index c34313b05a..a47b4ee7a3 100644 --- a/packages/sdds-dfa/api/sdds-dfa.api.md +++ b/packages/sdds-dfa/api/sdds-dfa.api.md @@ -538,6 +538,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -550,6 +551,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -562,6 +564,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx index 359d9b9b08..4b7ae6c43e 100644 --- a/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-dfa/src/components/Tabs/Tabs.stories.tsx @@ -28,6 +28,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -81,6 +82,19 @@ const meta: Meta = { 'outsideScroll', 'index', ]), + contentRight: { + options: contentRightOptions, + control: { + type: 'select', + }, + if: { arg: 'helperText', eq: '' }, + }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -609,7 +645,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -625,8 +661,9 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -634,7 +671,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 22d76b4034..a92aa6ab0c 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -265,5 +265,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts index 97c7fbbf6d..ff5619391e 100644 --- a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -114,5 +114,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-finportal/api/sdds-finportal.api.md b/packages/sdds-finportal/api/sdds-finportal.api.md index 5de4f794d7..764bcbe609 100644 --- a/packages/sdds-finportal/api/sdds-finportal.api.md +++ b/packages/sdds-finportal/api/sdds-finportal.api.md @@ -579,6 +579,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -591,6 +592,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -603,6 +605,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/sdds-finportal/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-finportal/src/components/Tabs/Tabs.stories.tsx index 359d9b9b08..4b7ae6c43e 100644 --- a/packages/sdds-finportal/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-finportal/src/components/Tabs/Tabs.stories.tsx @@ -28,6 +28,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -81,6 +82,19 @@ const meta: Meta = { 'outsideScroll', 'index', ]), + contentRight: { + options: contentRightOptions, + control: { + type: 'select', + }, + if: { arg: 'helperText', eq: '' }, + }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -609,7 +645,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -625,8 +661,9 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -634,7 +671,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/sdds-finportal/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-finportal/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 22d76b4034..a92aa6ab0c 100644 --- a/packages/sdds-finportal/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-finportal/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -265,5 +265,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-finportal/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-finportal/src/components/Tabs/vertical/VerticalTabItem.config.ts index 97c7fbbf6d..ff5619391e 100644 --- a/packages/sdds-finportal/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-finportal/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -114,5 +114,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-insol/api/sdds-insol.api.md b/packages/sdds-insol/api/sdds-insol.api.md index 3187a894a9..d98e5cd733 100644 --- a/packages/sdds-insol/api/sdds-insol.api.md +++ b/packages/sdds-insol/api/sdds-insol.api.md @@ -579,6 +579,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -591,6 +592,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -603,6 +605,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx index 359d9b9b08..4b7ae6c43e 100644 --- a/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-insol/src/components/Tabs/Tabs.stories.tsx @@ -28,6 +28,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -81,6 +82,19 @@ const meta: Meta = { 'outsideScroll', 'index', ]), + contentRight: { + options: contentRightOptions, + control: { + type: 'select', + }, + if: { arg: 'helperText', eq: '' }, + }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -609,7 +645,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -625,8 +661,9 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -634,7 +671,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 22d76b4034..a92aa6ab0c 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -265,5 +265,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts index 97c7fbbf6d..ff5619391e 100644 --- a/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -114,5 +114,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index b212b2b90a..866fb48b48 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -579,6 +579,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -591,6 +592,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -603,6 +605,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: Property.Width | undefined; size?: string | undefined; view?: string | undefined; } & { diff --git a/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx b/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx index 359d9b9b08..4b7ae6c43e 100644 --- a/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx +++ b/packages/sdds-serv/src/components/Tabs/Tabs.stories.tsx @@ -28,6 +28,7 @@ type CustomStoryTabsProps = { const contentLeftOptions = ['none', 'icon']; const contentRightOptions = ['none', 'counter', 'icon']; +const labels = ['Label', 'Middle label', 'Very long label']; const getContentLeft = (contentLeftOption: string, size: Size) => { const iconSize = size === 'xs' ? 'xs' : 's'; @@ -81,6 +82,19 @@ const meta: Meta = { 'outsideScroll', 'index', ]), + contentRight: { + options: contentRightOptions, + control: { + type: 'select', + }, + if: { arg: 'helperText', eq: '' }, + }, + maxItemWidth: { + control: { + type: 'text', + }, + if: { arg: 'stretch', truthy: false }, + }, }, }; @@ -95,13 +109,14 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, stretch, + maxItemWidth, helperText, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); return ( - + {items.map((_, i) => { if (helperText !== '') { return ( @@ -115,8 +130,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -132,8 +148,9 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -152,6 +169,7 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { hasDivider, helperText, width, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -171,8 +189,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -188,8 +207,9 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -207,6 +227,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -239,8 +260,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -256,8 +278,9 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj = { disabled: false, hasDivider: true, helperText: '', - itemQuantity: 8, + itemQuantity: 6, stretch: false, width: '15rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -348,6 +373,7 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -368,8 +394,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -386,8 +413,9 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -406,6 +434,7 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { hasDivider, helperText, height, + maxItemWidth, } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -433,8 +462,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -451,8 +481,9 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -470,6 +501,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentRight: contentRightOption, hasDivider, helperText, + maxItemWidth, } = props; const maxItemQuantity = 3; const items = Array(itemQuantity).fill(0); @@ -503,8 +535,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { value={helperText} contentLeft={getContentLeft(contentLeftOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); } @@ -521,8 +554,9 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { contentLeft={getContentLeft(contentLeftOption, size as Size)} contentRight={getContentRight(contentRightOption, size as Size)} size={size as Size} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ); })} @@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => { tabIndex={!disabled ? 0 : -1} disabled={disabled} size={size as Size} + maxItemWidth="auto" > ShowAll @@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj = { size: 'xs', disabled: false, hasDivider: true, - itemQuantity: 8, + itemQuantity: 6, orientation: 'vertical', helperText: '', height: '10rem', + maxItemWidth: '', }, argTypes: { contentLeft: { @@ -609,7 +645,7 @@ export const VerticalTabs: StoryObj = { }; const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText } = props; + const { disabled, itemQuantity, size, helperText, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -625,8 +661,9 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -634,7 +671,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => { }; const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { - const { disabled, itemQuantity, size, helperText, width } = props; + const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props; const items = Array(itemQuantity).fill(0); const [index, setIndex] = useState(0); @@ -650,8 +687,9 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => { disabled={disabled} value={helperText} size={size as HeaderSize} + maxItemWidth={maxItemWidth} > - {`Label${i + 1}`} + {`${labels[i % labels.length]} ${i + 1}`} ))} @@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj = { size: 'h5', disabled: false, helperText: '', - itemQuantity: 6, + itemQuantity: 4, width: '12rem', + maxItemWidth: '', }, argTypes: { clip: { diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 22d76b4034..a92aa6ab0c 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -265,5 +265,8 @@ export const config = { ${tabsTokens.itemPilledBorderRadius}: 1.5rem; `, }, + truncate: { + true: css``, + }, }, }; diff --git a/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts index 97c7fbbf6d..ff5619391e 100644 --- a/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -114,5 +114,8 @@ export const config = { ${tabsTokens.disabledOpacity}: 0.4; `, }, + truncate: { + true: css``, + }, }, };