From 5da622b0173b485426dad2c57237a9f6664941b8 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-web Tabs -- item autoFocus.snap.png | Bin 6146 -> 6137 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 | 7 +- .../src/components/Tabs/Tabs.stories.tsx | 83 +++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + .../src/components/Badge/Badge.tokens.ts | 1 + .../src/components/Badge/Badge.tsx | 17 +++- .../src/components/Badge/Badge.types.ts | 5 ++ .../Badge/variations/_truncate/base.ts | 16 ++++ .../Badge/variations/_truncate/tokens.json | 1 + .../src/components/Tabs/TabItem.types.ts | 5 ++ .../src/components/Tabs/tokens.ts | 1 + .../HorizontalTabItem.styles.ts | 1 + .../HorizontalTabItem/HorizontalTabItem.tsx | 18 +++- .../variations/_truncate/base.ts | 18 ++++ .../variations/_truncate/tokens.json | 1 + .../VerticalTabItem/VerticalTabItem.styles.ts | 3 +- .../VerticalTabItem/VerticalTabItem.tsx | 15 +++- .../variations/_truncate/base.ts | 18 ++++ .../variations/_truncate/tokens.json | 1 + .../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 | 7 +- .../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 | 7 +- .../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 | 7 +- .../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 | 7 +- .../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 | 7 +- .../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 | 7 +- .../src/components/Tabs/Tabs.stories.tsx | 79 ++++++++++++----- .../horizontal/HorizontalTabItem.config.ts | 3 + .../Tabs/vertical/VerticalTabItem.config.ts | 3 + 58 files changed, 713 insertions(+), 197 deletions(-) create mode 100644 packages/plasma-new-hope/src/components/Badge/variations/_truncate/base.ts create mode 100644 packages/plasma-new-hope/src/components/Badge/variations/_truncate/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.ts create mode 100644 packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json create mode 100644 packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.ts create mode 100644 packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json 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/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 zcmeHLXH=8t9*^Y;5UZVk-ggLrSn?6R{;?cfVRr~`AP{Q}o%j9dd2z|a^O%zLUy*GGgyde*o%_Bn zcPr=c7ALDrMryVuWd^4CywaJ`|9bVV4SDOGlX`!BwZ3ADX^y)sK|lYHrfaC~(zge` z{`1b#DvP!5`$t|M{pYr077^#J>AMf+iYYDL?i)C^3te7j{cTjsqbGvw`z|y|>C?%T)UM=> z_7UO?FT9kOw`73I`^ehY=}(OfYgElqBxq(!k|8?cVOPz$0QD$Sy|r=SHA*H*_rUXV zG2Yc7-d1%Zzf-2KA~_nffPjG74@Jc?4w^4QX=EsL%-lFDRmzC5@_7=*ot_Ry*x7AU z(zH!3Zld``2gNDa{u1A*XfNz+p@(=V5ye|rxY#grlPIF*Jo0&hpAys?8X2(*+;U_I zN|8CPrSAOL(r3@nj!If^X{}kz{3Q2$r!OsIyBEI5ezL|?(;L!Lxs@d4aR(ESjI^}0 z67LE#R3L@ofG|GMF1I$?xRGo5r0YJluRkJC$qol>tR&X(3cSu*N2lZ1seOJH%HFc3oj7wkPLbKvt7EH(6imoLkCrc`r zs*tdn!FY$+KM#{_Ug)4W z<~T(QCu^6fUReEX$BF3C`-+Yy4H+n^f?c~f`BW~LZ?L7RI;nYAPk~8vm!EdwVHd}Z zFLa$!sOKA*2`14Ni3TX%JtHD(*H~v6|K9d8mUX&7mia^k0N~ssFk^Rj`bPOyhjib9 z@8uFM+nbP=(e7?BPrGn4!I;A#{BBltMoqtnvyB<93iI( zJNG!GuV&YLf0X~+L@$jjmx#wJ_`IzTa&I|%;8c-eb)y9i)6cZvNUgvB{&s%yo^9aw zF2pA!XoXwQ8MJq5)go#3y_Xcg!lM%y^nhfHSqe^l5sr3osu73OEHqV66f$G7D6P9P z=x|4gcY0xUSbz4q?MDOOBpG7XXIlDXuJB)YVepx!XUZ-3yye;&bioDU2M*-?D-Q7a@7QaPXv!Kk=6GvvBQAxf`^9Bu0(@g2Ka zWRg|G!jS9nn($Kvb%XInHj)uL*9{4;QBP?Y%XIVu)k?(@J5N_Wdj!ypY(klS{#lnY zF&jPlO3#Di)ga4&B&?l&p+joj`amSfA@WLnpUR57>bL2c#D09I1cPALN*Os<#pP@( zwk~zyC7hV8kU|p7Bu9xti7`IOIQ4?^Tl3uTpTOhF0^78))0bIN$ElW{s$h~rOp}iJ zYog!0c@v?U?IeH!&?~`UD3c^6`>HNBYl}-}VB2Y$Z>C3_EFIHz;J|@$Fj`|0XBR!Z z?_86Z5i{A6BUDOUb9P(m>06!10%E~;mip3n0&e0&zv;O*Uo-H_a^CJ$$`Pvig{Pa6 zH^LFeeQIaofzoOIab)03bZ2M-^9}R$4gfT|eN>p4rBC&asp!t9)}uCMWVZ(3V)(_m z3GcedATwjIb%h+Kk*`{_2HyteoW-ZA<=xexJ`z3?d1>!{@#)Ib?93hB<(t_w6yH-v ze@An$pFBH6*x;z=juGEpwQ5yhVBqF-D7CwH@0J{U{GB%Yof9%IxU7CRb;f|2HZwCr z8Fle*WdaYC#7@QdLwH!JQLN#On70Zklj&qa-kjnf`?;gcpNZz#nL@RCLKFIJqW1}* zsNDnSsNI{Ng3Z=OQg%Xm-b?quVxR{CZO9H813lBv0!xNA1!cOz{=#_k<0g|FI+}nl z8cxAs^)5^a@(TSlpE?OeP@_QQhcE$P8MW?F)d%d9NNKG0|%`gQTa_s zssr4y4(7wd{0NO|p75ftmPCR;88j~Jx2hSq;&}uLb#QPH%uaGL+a~yEY0c0LigFmq z-x$@GMpZUZInZ=ntZFyoKD|q^wzJDBOvXsEjL$s3vWz|rlVpCfzjj^_1GU9U?SC3Y zD1r((*$b?oXxrz#LXQWkH#IdiG%?{N+625wGJaTO9mHoic2@;^m9k{5tW?LCxxgaR zWV`RQHvpl5EHS$Y%=wKGky9PoTTb9Jl5XBS-3G2B)@*@sfJE|j=-Alkf;|(J?d4(p zbr4UN%pEPfJbQV8ZT;4=wOU$Q+eXUAB36c-YX;u%)Z(SZUpdBI7f?)uG)L1P?r)kw-gx zMBEjS!i9!l0F8`w%(g%B@b1u_+ffbjJnzagzbx0*Mh_A-b40E1htNk^WO+G2oRun6 zO-5m4&8Fxeacc%0L&5_c$v(DwNdIM;+zj+i+BqR?!~uXYZ<)##rl=>lj2n>Rn5pHc zoPLR!d8LPbzgO4s_6kVkq1TCW;Ampt{Lb3*LMk;*vnZ4%p?S@~qUeQ;xKE>f(PNMP z@?~c*5(U*JYO>D(Y@FOb=0~Hk%c!a`NcxvAU(zdy!iJ=j6zze7hsoEWM|mEJkB_$w zdVOOZgbF~BS!fb7{y3z!+OjNmA{ZUiQyHWf#;J#aPiz4Qdsm%30%#bqGj>Ri*$lW$ zx&zZ)4`zUtFNteI{{SqCz1p@f73KplSHKpxNtT=kV@kURII~|67zoTFnB>J?WxNmX ziz}jMKa}{@?~&$3`AInRbkGl6Z2%d8GC${bAvCt}zFM@d!}JepDuX*qS)QQ3w0MFg zEwNkc#!mz#N4crJz>N*yoUET0>^NR&0YBb@dd=A#+S;fdYm@*O_{Dy+MS%E9C)lAl z**4qZ8ay8`qR;*nc?KuKe_T@yT8;#)`*Q&S5(4}bgGSa0^ZLmf)5gCUW8N+BCQ9ZQG;R>(Xxdm0xD~1&DdTMH6@@-#R%EC7*Yfb-i%+t z_khBPAd}Hx&swWjtrEdV_%u5vf4f)r^vuv}dieO`Cj5)4PQRRV_dQ$r4surr6KnPn zkxT6~B;=;uG_u7{^i*L~AKNR!2VcPE)37+n2K7(|j24CJSYe)<+DmM7gi&^7nT~8E zKLyXuv@9$_7@sYW?q3g*(Ko6;pgq2Und$!PcBNSYAFQ>vl&KcK2l`?gyvly=!})6rHF29 zFKvGI?1wdxaO=hXsEBv6J3aAto1&azY!L_WL- z6Cbb<16rW`SL1W9zEM=*7AyKFaxQEOacVh}5FWl0MtB8q57t^xjKdh9F@y+M7@z8p z7O+FvWnIc9Ab5@brM=u|M5MqGOPKoxv;Iv}lU$6VVjzW%micW&4BV$PuAYQFVWPTM z1{|CqY=|YlG!lFbZsmYmpu~WB>0u2bn&4%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 b4130f24b9..e8085292f4 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -728,6 +728,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -740,6 +741,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -752,6 +754,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3597,7 +3600,7 @@ view?: string | undefined; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ target?: "button-like" | undefined; -view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3635,7 +3638,7 @@ view?: string | undefined; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ target?: "button-like" | undefined; -view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; 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-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index d6b351b5a1..4ea4e4e67e 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-b2c/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-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts index 97c7fbbf6d..ff5619391e 100644 --- a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-b2c/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/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..c8b8f8a624 100644 --- a/packages/plasma-new-hope/src/components/Badge/Badge.tsx +++ b/packages/plasma-new-hope/src/components/Badge/Badge.tsx @@ -8,11 +8,12 @@ import { base as sizeCSS } from './variations/_size/base'; import { base as pilledCSS } from './variations/_pilled/base'; import { base as transparentCSS } from './variations/_transparent/base'; import { base as clearCSS } from './variations/_clear/base'; +import { base as truncateCSS } from './variations/_truncate/base'; import type { BadgeProps, BadgeRootProps } from './Badge.types'; import { StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Badge.styles'; import { classes } from './Badge.tokens'; -export const badgeRoot = (Root: RootProps) => +export const badgeRoot = (Root: RootProps) => forwardRef((props, ref) => { const { children, @@ -25,6 +26,7 @@ export const badgeRoot = (Root: RootProps) => pilled = false, transparent = false, clear = false, + maxWidth = 'auto', ...rest } = props; @@ -33,16 +35,23 @@ export const badgeRoot = (Root: RootProps) => const clearClass = clear ? classes.badgeClear : undefined; const txt = !text && typeof children === 'string' ? children : text; + const truncate = maxWidth !== 'auto'; + return ( {contentLeft && {contentLeft}} {txt ? {txt} : children} @@ -75,6 +84,10 @@ export const badgeConfig = { css: clearCSS, attrs: true, }, + truncate: { + css: truncateCSS, + attrs: true, + }, }, defaults: { view: 'primary', 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..a7a8c715d1 100644 --- a/packages/plasma-new-hope/src/components/Badge/Badge.types.ts +++ b/packages/plasma-new-hope/src/components/Badge/Badge.types.ts @@ -63,6 +63,11 @@ type CustomBadgeProps = { * Слот для контента справа, например `Icon` */ contentRight?: ReactNode; + /** + * Обрезает контент по максимальной ширине и добавляет ... + * @default 'auto' + */ + maxWidth?: string; /** * Размер Badge * @default diff --git a/packages/plasma-new-hope/src/components/Badge/variations/_truncate/base.ts b/packages/plasma-new-hope/src/components/Badge/variations/_truncate/base.ts new file mode 100644 index 0000000000..67de7d6297 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Badge/variations/_truncate/base.ts @@ -0,0 +1,16 @@ +import { css } from '@linaria/core'; + +import { classes } from '../../Badge.tokens'; +import { StyledContentMain } from '../../Badge.styles'; + +export const base = css` + &.${classes.badgeTruncate} { + max-width: 100%; + + ${StyledContentMain} { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +`; diff --git a/packages/plasma-new-hope/src/components/Badge/variations/_truncate/tokens.json b/packages/plasma-new-hope/src/components/Badge/variations/_truncate/tokens.json new file mode 100644 index 0000000000..fe51488c70 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Badge/variations/_truncate/tokens.json @@ -0,0 +1 @@ +[] 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..7482a7b211 100644 --- a/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts +++ b/packages/plasma-new-hope/src/components/Tabs/TabItem.types.ts @@ -47,6 +47,11 @@ export interface BaseTabItemProps extends ButtonHTMLAttributes) => +export const horizontalTabItemRoot = ( + Root: RootProps, +) => forwardRef((props, outerRef) => { const { size, @@ -32,6 +35,7 @@ export const horizontalTabItemRoot = (Root: RootProps <> {contentLeft && {contentLeft}} @@ -146,6 +157,9 @@ export const horizontalTabItemConfig = { pilled: { css: pilledCSS, }, + truncate: { + css: truncateCSS, + }, }, defaults: { view: 'default', diff --git a/packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.ts b/packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.ts new file mode 100644 index 0000000000..5d38866b97 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/base.ts @@ -0,0 +1,18 @@ +import { css } from '@linaria/core'; + +import { classes } from '../../../../../tokens'; +import { StyledContent, TabItemValue } from '../../HorizontalTabItem.styles'; + +export const base = css` + &.${classes.tabsTruncate} { + ${StyledContent} { + overflow: hidden; + text-overflow: ellipsis; + } + + ${TabItemValue} { + overflow: hidden; + text-overflow: ellipsis; + } + } +`; diff --git a/packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json b/packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json new file mode 100644 index 0000000000..fe51488c70 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Tabs/ui/horizontal/HorizontalTabItem/variations/_truncate/tokens.json @@ -0,0 +1 @@ +[] 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 36fae153ce..1b9dab2fe4 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 @@ -10,7 +10,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}); @@ -47,6 +47,7 @@ export const StyledContent = styled.div` `; export const TabItemValue = styled.span` + white-space: nowrap; color: var(${tokens.itemValueColor}); `; 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..d993ae6e92 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 @@ -11,8 +11,9 @@ import { base, LeftContent, RightContent, StyledContent, TabItemValue } from './ import { base as viewCSS } from './variations/_view/base'; import { base as sizeCSS } from './variations/_size/base'; import { base as disabledCSS } from './variations/_disabled/base'; +import { base as truncateCSS } from './variations/_truncate/base'; -export const verticalTabItemRoot = (Root: RootProps) => +export const verticalTabItemRoot = (Root: RootProps) => forwardRef((props, outerRef) => { const { size, @@ -28,6 +29,7 @@ export const verticalTabItemRoot = (Root: RootProps <> {contentLeft && {contentLeft}} @@ -134,6 +142,9 @@ export const verticalTabItemConfig = { css: disabledCSS, attrs: true, }, + truncate: { + css: truncateCSS, + }, }, defaults: { view: 'divider', diff --git a/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.ts b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.ts new file mode 100644 index 0000000000..1ba6622db6 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/base.ts @@ -0,0 +1,18 @@ +import { css } from '@linaria/core'; + +import { classes } from '../../../../../tokens'; +import { StyledContent, TabItemValue } from '../../VerticalTabItem.styles'; + +export const base = css` + &.${classes.tabsTruncate} { + ${StyledContent} { + overflow: hidden; + text-overflow: ellipsis; + } + + ${TabItemValue} { + overflow: hidden; + text-overflow: ellipsis; + } + } +`; diff --git a/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json new file mode 100644 index 0000000000..fe51488c70 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Tabs/ui/vertical/VerticalTabItem/variations/_truncate/tokens.json @@ -0,0 +1 @@ +[] 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 3a23ad4a84..555bae136a 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -729,6 +729,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -741,6 +742,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -753,6 +755,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3599,7 +3602,7 @@ view?: string | undefined; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ target?: "button-like" | undefined; -view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3637,7 +3640,7 @@ view?: string | undefined; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | ({ target?: "button-like" | undefined; -view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; 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 5bf5a18c40..89e4a24203 100644 --- a/packages/sdds-cs/api/sdds-cs.api.md +++ b/packages/sdds-cs/api/sdds-cs.api.md @@ -540,6 +540,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -552,6 +553,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -564,6 +566,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3104,7 +3107,7 @@ true: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "clear" | "negative" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "negative" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3142,7 +3145,7 @@ true: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "clear" | "negative" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "negative" | "secondary" | "positive" | "warning" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: 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 8c6b1f52ca..79ceadaa4c 100644 --- a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -147,5 +147,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 36ff67acdc..e744fcf999 100644 --- a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -68,5 +68,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 d56296c345..470d222733 100644 --- a/packages/sdds-dfa/api/sdds-dfa.api.md +++ b/packages/sdds-dfa/api/sdds-dfa.api.md @@ -528,6 +528,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -540,6 +541,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -552,6 +554,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3247,7 +3250,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3285,7 +3288,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: 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 2740bca359..190e5ff543 100644 --- a/packages/sdds-finportal/api/sdds-finportal.api.md +++ b/packages/sdds-finportal/api/sdds-finportal.api.md @@ -569,6 +569,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -581,6 +582,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -593,6 +595,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3343,7 +3346,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3381,7 +3384,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: 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 53705c918b..fc90f8bec3 100644 --- a/packages/sdds-insol/api/sdds-insol.api.md +++ b/packages/sdds-insol/api/sdds-insol.api.md @@ -569,6 +569,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -581,6 +582,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -593,6 +595,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3343,7 +3346,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3381,7 +3384,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: 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 72fe9de7b5..d7e0844cce 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -569,6 +569,7 @@ true: PolymorphicClassName; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -581,6 +582,7 @@ transparent?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -593,6 +595,7 @@ clear?: false | undefined; text?: string | undefined; contentLeft?: ReactNode; contentRight?: ReactNode; +maxWidth?: string | undefined; size?: string | undefined; view?: string | undefined; } & { @@ -3343,7 +3346,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: undefined; @@ -3381,7 +3384,7 @@ accent: PolymorphicClassName; chipView?: string | undefined; } & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & React_2.RefAttributes) | ({ target?: "button-like" | undefined; - view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "clear" | "dark" | "black" | "white" | undefined; + view?: "default" | "clear" | "accent" | "secondary" | "positive" | "warning" | "negative" | "dark" | "black" | "white" | undefined; contentLeft?: undefined; labelPlacement?: undefined; placeholder?: 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``, + }, }, };