feat: add Badge & Tabs truncate props

salute-developers · Nov 8, 2024 · e2c16c4 · e2c16c4
1 parent a1e987f
commit e2c16c4
Show file tree

Hide file tree

Showing 57 changed files with 829 additions and 260 deletions.
diff --git a/...2c/components/Tabs/Tabs.component-test.tsx/plasma-b2c Tabs -- truncate.snap.png b/...2c/components/Tabs/Tabs.component-test.tsx/plasma-b2c Tabs -- truncate.snap.png
diff --git a/...eb/components/Badge/Badge.component-test.tsx/plasma-web Badge -- _view.snap.png b/...eb/components/Badge/Badge.component-test.tsx/plasma-web Badge -- _view.snap.png
diff --git a/...ponents/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- item autoFocus.snap.png b/...ponents/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- item autoFocus.snap.png
diff --git a/...eb/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- truncate.snap.png b/...eb/components/Tabs/Tabs.component-test.tsx/plasma-web Tabs -- truncate.snap.png
diff --git a/...ponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _disabled.snap.png b/...ponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _disabled.snap.png
diff --git a/...mponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _stretch.snap.png b/...mponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- _stretch.snap.png
diff --git a/...onents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png b/...onents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png
diff --git a/...onents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- controller.snap.png b/...onents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- controller.snap.png
diff --git a/...components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- simple.snap.png b/...components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- simple.snap.png
diff --git a/...ponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- with icon.snap.png b/...ponents/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- with icon.snap.png
diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md
@@ -738,6 +738,7 @@ true: PolymorphicClassName;
 text?: string | undefined;
 contentLeft?: ReactNode;
 contentRight?: ReactNode;
+maxWidth?: Property.Width<string | number> | undefined;
 size?: string | undefined;
 view?: string | undefined;
 } & {
@@ -750,6 +751,7 @@ transparent?: false | undefined;
 text?: string | undefined;
 contentLeft?: ReactNode;
 contentRight?: ReactNode;
+maxWidth?: Property.Width<string | number> | undefined;
 size?: string | undefined;
 view?: string | undefined;
 } & {
@@ -762,6 +764,7 @@ clear?: false | undefined;
 text?: string | undefined;
 contentLeft?: ReactNode;
 contentRight?: ReactNode;
+maxWidth?: Property.Width<string | number> | undefined;
 size?: string | undefined;
 view?: string | undefined;
 } & {

diff --git a/packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx b/packages/plasma-b2c/src/components/Tabs/Tabs.component-test.tsx
@@ -184,4 +184,51 @@ describe('plasma-b2c: Tabs', () => {
         cy.get('button').contains('Sber').should('be.visible');
         cy.get('button').contains('Joy').should('not.be.visible');
     });
+
+    it('truncate', () => {
+        mount(
+            <CypressTestDecorator>
+                <Tabs size="l" view="divider" forwardedAs="ul">
+                    {items.map((item, i) => (
+                        <TabItem
+                            size="l"
+                            view="divider"
+                            key={i}
+                            selected={i === 1}
+                            forwardedAs="li"
+                            maxItemWidth="2rem"
+                        >
+                            {item.label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+                <PadMe />
+                <Tabs size="l" view="divider" forwardedAs="ul" orientation="vertical">
+                    {items.map((item, i) => (
+                        <TabItem
+                            size="l"
+                            view="divider"
+                            orientation="vertical"
+                            key={i}
+                            selected={i === 1}
+                            forwardedAs="li"
+                            maxItemWidth="5rem"
+                        >
+                            {item.label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+                <PadMe />
+                <Tabs size="h5" view="clear" forwardedAs="ul">
+                    {items.map((item, i) => (
+                        <TabItem size="h5" view="clear" key={i} selected={i === 1} forwardedAs="li" maxItemWidth="2rem">
+                            {item.label}
+                        </TabItem>
+                    ))}
+                </Tabs>
+            </CypressTestDecorator>,
+        );
+
+        cy.matchImageSnapshot();
+    });
 });
diff --git 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<StoryTabsProps> = {
             '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 (
-        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs clip="none" view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {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}`}
                         </TabItem>
                     );
                 }
@@ -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}`}
                     </TabItem>
                 );
             })}
@@ -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}`}
                         </TabItem>
                     );
                 }
@@ -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}`}
                     </TabItem>
                 );
             })}
@@ -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}`}
                         </TabItem>
                     );
                 }
@@ -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}`}
                     </TabItem>
                 );
             })}
@@ -274,6 +297,7 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
                             size={size as Size}
+                            maxItemWidth="auto"
                         >
                             ShowAll
                         </TabItem>
@@ -290,9 +314,10 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
         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}`}
                         </TabItem>
                     );
                 }
@@ -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}`}
                     </TabItem>
                 );
             })}
@@ -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}`}
                         </TabItem>
                     );
                 }
@@ -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}`}
                     </TabItem>
                 );
             })}
@@ -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}`}
                         </TabItem>
                     );
                 }
@@ -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}`}
                     </TabItem>
                 );
             })}
@@ -539,6 +573,7 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         disabled={disabled}
                         size={size as Size}
+                        maxItemWidth="auto"
                     >
                         ShowAll
                     </TabItem>
@@ -553,10 +588,11 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         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<VerticalStoryTabsProps> = {
 };
 
 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 (
-        <Tabs view="clear" disabled={disabled} size={size}>
+        <Tabs view="clear" disabled={disabled} size={size as HeaderSize}>
             {items.map((_, i) => (
                 <TabItem
                     key={`item:${i}`}
@@ -624,17 +660,18 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
                     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}`}
                 </TabItem>
             ))}
         </Tabs>
     );
 };
 
 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}`}
                 </TabItem>
             ))}
         </Tabs>
@@ -663,8 +701,9 @@ export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
         size: 'h5',
         disabled: false,
         helperText: '',
-        itemQuantity: 6,
+        itemQuantity: 4,
         width: '12rem',
+        maxItemWidth: '',
     },
     argTypes: {
         clip: {