feat(tabs): add tab label truncate on constrained width

Author: gcornut

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+-   `Tabs`: add tab label truncate on constrained width.
+
 ## [3.9.6][] - 2024-12-04
 
 ### Added

packages/lumx-core/src/scss/components/tabs/_index.scss

@@ -52,6 +52,8 @@
    ========================================================================== */
 
 .#{$lumx-base-prefix}-tabs--layout-fixed {
+    flex-grow: 1;
+
     .#{$lumx-base-prefix}-tabs__link {
         @include lumx-tabs-link-layout("fixed");
     }

packages/lumx-react/src/components/tabs/Tab.tsx

@@ -1,10 +1,12 @@
-import { Icon, IconProps, Size } from '@lumx/react';
+import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon, IconProps, Size, Text } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { Comp, GenericProps } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/react/utils/className';
 
-import classNames from 'classnames';
-import React, { FocusEventHandler, forwardRef, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 import { useTabProviderContext } from './state';
 
 /**
@@ -114,7 +116,11 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
             aria-controls={state?.tabPanelId}
         >
             {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}
-            {label && <span>{label}</span>}
+            {label && (
+                <Text as="span" truncate>
+                    {label}
+                </Text>
+            )}
         </button>
     );
 });

packages/lumx-react/src/components/tabs/Tabs.stories.tsx

@@ -52,34 +52,6 @@ export const Controlled = ({ theme }: any) => {
     );
 };
 
-/* Control active tab internally (with activate tab on focus). */
-export const NotControlled = ({ theme }: any) => {
-    return (
-        <TabProvider shouldActivateOnFocus onChange={console.log}>
-            <TabList theme={theme} aria-label="Tab list">
-                <Tab label="Tab a" />
-                <Tab label="Tab b" />
-            </TabList>
-            <TabPanel className="lumx-spacing-padding-huge">Tab a content</TabPanel>
-            <TabPanel className="lumx-spacing-padding-huge">Tab b content</TabPanel>
-        </TabProvider>
-    );
-};
-
-/* Display tabs far from their tab panels. */
-export const DisabledTab = ({ theme }: any) => (
-    <TabProvider shouldActivateOnFocus>
-        <TabList theme={theme} aria-label="Tab list">
-            <Tab label="Tab 1" />
-            <Tab label="Tab 2" isDisabled />
-            <Tab label="Tab 3" />
-        </TabList>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 1 content</TabPanel>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 2 content</TabPanel>
-        <TabPanel className="lumx-spacing-padding-huge">Tab 3 content</TabPanel>
-    </TabProvider>
-);
-
 /* Display tabs far from their tab panels. */
 export const SplitTabListAndTabPanels = ({ theme }: any) => {
     const [isOpen, setOpen] = useState(true);