fix(Item): fixed item min width to 0 [#343] (#344)

Co-authored-by: Vladimir Kubantsev <[email protected]>

Author: vladimir-kuba

src/components/AsideHeader/__stories__/AsideHeader.stories.tsx

@@ -9,7 +9,7 @@ import {PageLayout} from '../components/PageLayout/PageLayout';
 import {PageLayoutAside} from '../components/PageLayout/PageLayoutAside';
 
 import {AsideHeaderShowcase} from './AsideHeaderShowcase';
-import {menuItemsShowcase} from './moc';
+import {menuItemsClamped, menuItemsShowcase} from './moc';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
 
@@ -181,3 +181,18 @@ const FallbackTemplate: StoryFn<typeof fallbackArgs> = ({
 
 export const Fallback = FallbackTemplate.bind({});
 Fallback.args = fallbackArgs;
+
+/** @type {StoryFn} */
+export function LineClamp() {
+    const [compact, setCompact] = React.useState(false);
+    return (
+        <PageLayout compact={compact}>
+            <PageLayoutAside
+                logo={{icon: logoIcon, text: 'Line clamp', 'aria-label': 'Line clamp'}}
+                menuItems={menuItemsClamped}
+                onChangeCompact={setCompact}
+                headerDecoration
+            />
+        </PageLayout>
+    );
+}

src/components/AsideHeader/__stories__/moc.tsx

@@ -112,3 +112,44 @@ When in the woods you saw the young man, sole,
 And met the look of his extinguished eyes,
 Then did you sigh?
 `;
+
+const MENU_ITEMS_CLAMPED_TITLE = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
+
+const MENU_ITEMS_CLAMPED: MenuItem[] = [
+    {
+        id: 'text',
+        title: MENU_ITEMS_CLAMPED_TITLE,
+        icon: Gear,
+    },
+    {
+        id: 'text-action',
+        title: MENU_ITEMS_CLAMPED_TITLE,
+        icon: Gear,
+        type: 'action',
+    },
+    {
+        id: 'text-link',
+        title: MENU_ITEMS_CLAMPED_TITLE,
+        icon: Gear,
+        link: 'about:blank',
+    },
+    {
+        id: 'text-link-action',
+        title: MENU_ITEMS_CLAMPED_TITLE,
+        icon: Gear,
+        link: 'about:blank',
+        type: 'action',
+    },
+];
+
+export const menuItemsClamped = MENU_ITEMS_CLAMPED.concat({
+    id: 'divider',
+    title: undefined,
+    type: 'divider',
+}).concat(
+    MENU_ITEMS_CLAMPED.map((item) => ({
+        ...item,
+        id: item.id.concat('-new'),
+        rightAdornment: renderTag('new'),
+    })),
+);

src/components/CompositeBar/Item/Item.scss

@@ -20,6 +20,7 @@ $block: '.#{variables.$ns}composite-bar-item';
     --_--item-selected-background-color-active: var(--g-color-base-selection);
 
     display: flex;
+    min-width: 0;
     width: 100%;
     height: 100%;
     align-items: center;