@salutejs/plasma-new-hope 0.182.0-canary.1500.11610401138.0 → 0.182.0-canary.1506.11620814697.0

package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx

@@ -50,6 +50,7 @@ interface StoryDefaultProps {
     showLeftIcon: boolean;
     layout: NotificationLayout;
     size: 'xs' | 'xxs';
+    closeIconType?: 'default' | 'thin';
     iconPlacement: NotificationIconPlacement;
     placement?: NotificationPlacement;
 }
@@ -90,6 +91,12 @@ export const Default: StoryObj<StoryDefaultProps> = {
                 type: 'select',
             },
         },
+        closeIconType: {
+            options: ['default', 'thin'],
+            control: {
+                type: 'select',
+            },
+        },
         layout: {
             options: ['vertical', 'horizontal'],
             control: {
@@ -104,6 +111,7 @@ export const Default: StoryObj<StoryDefaultProps> = {
         showLeftIcon: true,
         iconPlacement: 'top',
         layout: 'vertical',
+        closeIconType: 'default',
         size: 'xs',
     },
     render: (args) => <StoryDefault {...args} />,

package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx

@@ -29,7 +29,6 @@ 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';
@@ -77,12 +76,6 @@ const meta: Meta<StoryTabsProps> = {
             },
             if: { arg: 'helperText', eq: '' },
         },
-        maxItemWidth: {
-            control: {
-                type: 'text',
-            },
-            if: { arg: 'stretch', truthy: false },
-        },
     },
 };
 
@@ -97,14 +90,13 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         stretch,
-        maxItemWidth,
         helperText,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
     return (
-        <Tabs clip="none" view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
+        <Tabs view="divider" hasDivider={hasDivider} stretch={stretch} disabled={disabled} size={size}>
             {items.map((_, i) => {
                 if (helperText !== '') {
                     return (
@@ -118,9 +110,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -136,9 +127,8 @@ const StoryHorizontalDefault = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -157,7 +147,6 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
         hasDivider,
         helperText,
         width,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -177,9 +166,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -195,9 +183,8 @@ const StoryHorizontalScroll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -215,7 +202,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxItemWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -248,9 +234,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -266,9 +251,8 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -285,7 +269,6 @@ const StoryHorizontalShowAll = (props: HorizontalStoryTabsProps) => {
                             tabIndex={!disabled ? 0 : -1}
                             disabled={disabled}
                             size={size as Size}
-                            maxItemWidth="auto"
                         >
                             ShowAll
                         </TabItem>
@@ -302,10 +285,9 @@ export const HorizontalTabs: StoryObj<HorizontalStoryTabsProps> = {
         disabled: false,
         hasDivider: true,
         helperText: '',
-        itemQuantity: 6,
+        itemQuantity: 8,
         stretch: false,
         width: '15rem',
-        maxItemWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -361,7 +343,6 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -382,9 +363,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -401,9 +381,8 @@ const StoryVerticalDefault = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -422,7 +401,6 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
         hasDivider,
         helperText,
         height,
-        maxItemWidth,
     } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
@@ -450,9 +428,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -469,9 +446,8 @@ const StoryVerticalScroll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -489,7 +465,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
         contentRight: contentRightOption,
         hasDivider,
         helperText,
-        maxItemWidth,
     } = props;
     const maxItemQuantity = 3;
     const items = Array(itemQuantity).fill(0);
@@ -523,9 +498,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                             value={helperText}
                             contentLeft={getContentLeft(contentLeftOption, size as Size)}
                             size={size as Size}
-                            maxItemWidth={maxItemWidth}
                         >
-                            {`${labels[i % labels.length]} ${i + 1}`}
+                            {`Label${i + 1}`}
                         </TabItem>
                     );
                 }
@@ -542,9 +516,8 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         contentLeft={getContentLeft(contentLeftOption, size as Size)}
                         contentRight={getContentRight(contentRightOption, size as Size)}
                         size={size as Size}
-                        maxItemWidth={maxItemWidth}
                     >
-                        {`${labels[i % labels.length]} ${i + 1}`}
+                        {`Label${i + 1}`}
                     </TabItem>
                 );
             })}
@@ -561,7 +534,6 @@ const StoryVerticalShowAll = (props: VerticalStoryTabsProps) => {
                         tabIndex={!disabled ? 0 : -1}
                         disabled={disabled}
                         size={size as Size}
-                        maxItemWidth="auto"
                     >
                         ShowAll
                     </TabItem>
@@ -576,11 +548,10 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
         size: 'xs',
         disabled: false,
         hasDivider: true,
-        itemQuantity: 6,
+        itemQuantity: 8,
         orientation: 'vertical',
         helperText: '',
         height: '10rem',
-        maxItemWidth: '',
     },
     argTypes: {
         contentLeft: {
@@ -633,7 +604,7 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
 };
 
 const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText, maxItemWidth } = props;
+    const { disabled, itemQuantity, size, helperText } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
@@ -649,7 +620,6 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
                     disabled={disabled}
                     value={helperText}
                     size={size as HeaderSize}
-                    maxItemWidth={maxItemWidth}
                 >
                     {`Label${i + 1}`}
                 </TabItem>
@@ -659,7 +629,7 @@ const StoryHeaderDefault = (props: HorizontalStoryTabsProps) => {
 };
 
 const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
-    const { disabled, itemQuantity, size, helperText, width, maxItemWidth } = props;
+    const { disabled, itemQuantity, size, helperText, width } = props;
     const items = Array(itemQuantity).fill(0);
     const [index, setIndex] = useState(0);
 
@@ -675,9 +645,8 @@ const StoryHeaderScroll = (props: HorizontalStoryTabsProps) => {
                     disabled={disabled}
                     value={helperText}
                     size={size as HeaderSize}
-                    maxItemWidth={maxItemWidth}
                 >
-                    {`${labels[i % labels.length]} ${i + 1}`}
+                    {`Label${i + 1}`}
                 </TabItem>
             ))}
         </Tabs>
@@ -689,9 +658,8 @@ export const HeaderTabs: StoryObj<HorizontalStoryTabsProps> = {
         size: 'h5',
         disabled: false,
         helperText: '',
-        itemQuantity: 4,
+        itemQuantity: 6,
         width: '12rem',
-        maxItemWidth: '',
     },
     argTypes: {
         clip: {