@lumx/react 3.7.0 → 3.7.1

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.0",
-        "@lumx/icons": "^3.7.0",
+        "@lumx/core": "^3.7.1",
+        "@lumx/icons": "^3.7.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.0"
+    "version": "3.7.1"
 }

package/src/components/flag/Flag.stories.tsx

@@ -4,6 +4,8 @@ import { colorArgType } from '@lumx/react/stories/controls/color';
 import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
+import { withResizableBox } from '@lumx/react/stories/decorators/withResizableBox';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
 
 export default {
     title: 'LumX components/flag/Flag',
@@ -36,3 +38,11 @@ export const AllColors = {
         }),
     ],
 };
+
+/**
+ * Truncate text option
+ */
+export const Truncate = {
+    args: { label: loremIpsum('tiny'), truncate: true },
+    decorators: [withResizableBox()],
+};

package/src/components/flag/Flag.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
-import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
+import { ColorPalette, Icon, Size, Theme, Text } from '@lumx/react';
 import { Comp, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 
@@ -11,7 +11,9 @@ export interface FlagProps extends GenericProps, HasTheme {
     /** Icon to use before the label. */
     icon?: string;
     /** Text label of the flag. */
-    label: string;
+    label: React.ReactNode;
+    /** Enable text truncate on overflow */
+    truncate?: boolean;
 }
 
 const COMPONENT_NAME = 'Flag';
@@ -28,17 +30,20 @@ const DEFAULT_PROPS: Partial<FlagProps> = {
  * @return React element.
  */
 export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {
-    const { label, icon, color, className, theme, ...forwardedProps } = props;
+    const { label, icon, color, className, theme, truncate, ...forwardedProps } = props;
     const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
+    const isTruncated = !!truncate;
 
     return (
         <div
             {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
+            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor, isTruncated }))}
             ref={ref}
         >
             {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
-            <span className={`${CLASSNAME}__label`}>{label}</span>
+            <Text as="span" truncate={isTruncated} typography="overline" className={`${CLASSNAME}__label`}>
+                {label}
+            </Text>
         </div>
     );
 });

package/src/components/inline-list/InlineList.stories.tsx

@@ -54,3 +54,25 @@ export const MixedNoWrapAndTruncate = {
     },
     decorators: [withResizableBox({ width: 400 })],
 };
+
+/**
+ * Line wrap on overflow
+ */
+export const Wrap = {
+    args: {
+        wrap: true,
+        children: [
+            <Text key="1" as="span">
+                Very very very very very long text
+            </Text>,
+            <Text key="2" as="span">
+                <Icon icon={mdiEarth} />
+                Some text
+            </Text>,
+            <Text key="3" as="span">
+                Very very very very very long text
+            </Text>,
+        ],
+    },
+    decorators: [withResizableBox({ width: 400 })],
+};

package/src/components/inline-list/InlineList.tsx

@@ -22,6 +22,10 @@ export interface InlineListProps extends GenericProps {
      * Typography variant.
      */
     typography?: Typography;
+    /**
+     * Activate line wrap on overflow.
+     */
+    wrap?: boolean;
 }
 
 /**
@@ -47,7 +51,7 @@ const DEFAULT_PROPS = {} as const;
  * @return React element.
  */
 export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
-    const { className, color, colorVariant, typography, children, ...forwardedProps } = props;
+    const { className, color, colorVariant, typography, children, wrap, ...forwardedProps } = props;
     const fontColorClassName = color && getFontColorClassName(color, colorVariant);
     const typographyClassName = typography && getTypographyClassName(typography);
     return (
@@ -55,7 +59,13 @@ export const InlineList: Comp<InlineListProps> = forwardRef((props, ref) => {
         <ul
             {...forwardedProps}
             ref={ref as any}
-            className={classNames(className, CLASSNAME, fontColorClassName, typographyClassName)}
+            className={classNames(
+                className,
+                CLASSNAME,
+                wrap && `${CLASSNAME}--wrap`,
+                fontColorClassName,
+                typographyClassName,
+            )}
             // Lists with removed bullet style can lose their a11y list role on some browsers
             role="list"
         >

package/src/components/navigation/NavigationItem.tsx

@@ -1,10 +1,11 @@
-import React, { ElementType, ReactNode, useState, useContext } from 'react';
+import React, { ElementType, ReactNode, useContext } from 'react';
 import { Icon, Placement, Size, Tooltip, Text } from '@lumx/react';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
 import { ComponentRef, HasClassName, HasPolymorphicAs, HasTheme } from '@lumx/react/utils/type';
 import classNames from 'classnames';
 import { forwardRefPolymorphic } from '@lumx/react/utils/forwardRefPolymorphic';
 import { ThemeContext } from '@lumx/react/utils/ThemeContext';
+import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
 
 type BaseNavigationItemProps = {
     /** Icon (SVG path). */
@@ -41,11 +42,7 @@ export const NavigationItem = Object.assign(
     forwardRefPolymorphic(<E extends ElementType = 'a'>(props: NavigationItemProps<E>, ref: ComponentRef<E>) => {
         const { className, icon, label, isCurrentPage, as: Element = 'a', ...forwardedProps } = props;
         const theme = useContext(ThemeContext);
-        const [labelElement, setLabelElement] = useState<HTMLSpanElement | null>(null);
-        const tooltipLabel =
-            typeof label === 'string' && labelElement && labelElement.offsetWidth < labelElement.scrollWidth
-                ? label
-                : null;
+        const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
 
         const buttonProps = Element === 'button' ? { type: 'button' } : {};
 
@@ -74,7 +71,7 @@ export const NavigationItem = Object.assign(
                             <Icon className={`${CLASSNAME}__icon`} icon={icon} size={Size.xs} theme={theme} />
                         ) : null}
 
-                        <Text as="span" truncate className={`${CLASSNAME}__label`} ref={setLabelElement}>
+                        <Text as="span" truncate className={`${CLASSNAME}__label`} ref={labelRef}>
                             {label}
                         </Text>
                     </Element>

package/src/components/text/Text.tsx

@@ -9,6 +9,8 @@ import {
     getTypographyClassName,
 } from '@lumx/react/utils/className';
 import classNames from 'classnames';
+import { useOverflowTooltipLabel } from '@lumx/react/hooks/useOverflowTooltipLabel';
+import { useMergeRefs } from '@lumx/react/utils/mergeRefs';
 
 /**
  * Defines the props of the component.
@@ -104,9 +106,11 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
         !(isTruncated && !isTruncatedMultiline) &&
         whiteSpace && { '--lumx-text-white-space': whiteSpace };
 
+    const { tooltipLabel, labelRef } = useOverflowTooltipLabel();
+
     return (
         <Component
-            ref={ref as React.Ref<any>}
+            ref={useMergeRefs(ref as React.Ref<any>, labelRef)}
             className={classNames(
                 className,
                 handleBasicClasses({
@@ -118,6 +122,7 @@ export const Text: Comp<TextProps> = forwardRef((props, ref) => {
                 colorClass,
                 noWrap && `${CLASSNAME}--no-wrap`,
             )}
+            title={tooltipLabel}
             style={{ ...truncateLinesStyle, ...whiteSpaceStyle, ...style }}
             {...forwardedProps}
         >

package/src/components/thumbnail/Thumbnail.stories.tsx

@@ -1,7 +1,18 @@
 import React from 'react';
 
 import { mdiAbTesting } from '@lumx/icons';
-import { Alignment, AspectRatio, Badge, FlexBox, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
+import {
+    Alignment,
+    AspectRatio,
+    Badge,
+    FlexBox,
+    GridColumn,
+    Icon,
+    Size,
+    Thumbnail,
+    ThumbnailObjectFit,
+    ThumbnailVariant,
+} from '@lumx/react';
 import { CustomLink } from '@lumx/react/stories/utils/CustomLink';
 import { IMAGE_SIZES, imageArgType, IMAGES } from '@lumx/react/stories/controls/image';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
@@ -375,3 +386,28 @@ export const Square = () => (
         </FlexBox>
     </>
 );
+
+export const ObjectFit = {
+    args: { size: Size.xl },
+    decorators: [
+        withCombinations({
+            cellStyle: { border: '1px solid lightgray' },
+            combinations: {
+                cols: {
+                    'Default (cover)': {},
+                    contain: { objectFit: ThumbnailObjectFit.contain },
+                },
+                rows: {
+                    'Ratio square': { aspectRatio: AspectRatio.square },
+                    'Ratio wide': { aspectRatio: AspectRatio.wide },
+                    'Ratio vertical': { aspectRatio: AspectRatio.vertical },
+                },
+                sections: {
+                    'Portrait image': { image: IMAGES.portrait1 },
+                    'Landscape image': { image: IMAGES.landscape1 },
+                },
+            },
+        }),
+        withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
+    ],
+};

package/src/components/thumbnail/Thumbnail.tsx

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { AspectRatio, HorizontalAlignment, Icon, Size, Theme } from '@lumx/react';
+import { AspectRatio, HorizontalAlignment, Icon, Size, Theme, ThumbnailObjectFit } from '@lumx/react';
 
 import { Comp, Falsy, GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
@@ -52,6 +52,8 @@ export interface ThumbnailProps extends GenericProps, HasTheme {
     imgRef?: Ref<HTMLImageElement>;
     /** Set to true to force the display of the loading skeleton. */
     isLoading?: boolean;
+    /** Set how the image should fit when its aspect ratio is constrained */
+    objectFit?: ThumbnailObjectFit;
     /** Size variant of the component. */
     size?: ThumbnailSize;
     /** Image loading mode. */
@@ -111,6 +113,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
         imgProps,
         imgRef: propImgRef,
         isLoading: isLoadingProp,
+        objectFit,
         loading,
         size,
         theme,
@@ -175,6 +178,7 @@ export const Thumbnail: Comp<ThumbnailProps> = forwardRef((props, ref) => {
                     hasIconErrorFallback,
                     hasCustomErrorFallback,
                     isLoading,
+                    objectFit,
                     hasBadge: !!badge,
                 }),
                 fillHeight && `${CLASSNAME}--fill-height`,

package/src/components/thumbnail/types.ts

@@ -37,3 +37,12 @@ export const ThumbnailVariant = {
     rounded: 'rounded',
 } as const;
 export type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+
+/**
+ * Thumbnail object fit.
+ */
+export const ThumbnailObjectFit = {
+    cover: 'cover',
+    contain: 'contain',
+} as const;
+export type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;

package/src/components/tooltip/Tooltip.tsx

@@ -12,6 +12,7 @@ import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/classNam
 import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 import { Placement } from '@lumx/react/components/popover';
 
+import { TooltipContextProvider } from '@lumx/react/components/tooltip/context';
 import { useInjectTooltipRef } from './useInjectTooltipRef';
 import { useTooltipOpen } from './useTooltipOpen';
 
@@ -91,7 +92,7 @@ export const Tooltip: Comp<TooltipProps, HTMLDivElement> = forwardRef((props, re
 
     return (
         <>
-            {wrappedChildren}
+            <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>
             {isOpen &&
                 createPortal(
                     <div

package/src/components/tooltip/context.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+/** Empty object */
+type TooltipContextValue = NonNullable<unknown>;
+
+const DEFAULT_VALUE = {};
+
+/**
+ * Tooltip react context simply used as a marker to know when parent react node have a tooltip
+ */
+const TooltipContext = React.createContext<TooltipContextValue | undefined>(undefined);
+
+export const TooltipContextProvider: React.FC = ({ children }) => (
+    <TooltipContext.Provider value={DEFAULT_VALUE}>{children}</TooltipContext.Provider>
+);
+
+export const useTooltipContext = () => React.useContext(TooltipContext);

package/src/hooks/useOverflowTooltipLabel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useTooltipContext } from '@lumx/react/components/tooltip/context';
+
+/**
+ * Compute a tooltip label based on a label element `innerText` if the text overflows.
+ *
+ * Warning: only works on first render, does not update on label element resize.
+ */
+export const useOverflowTooltipLabel = () => {
+    const parentTooltip = useTooltipContext();
+    const [tooltipLabel, setTooltipLabel] = React.useState<string | undefined>(undefined);
+    const labelRef = React.useCallback(
+        (labelElement: HTMLElement | null) => {
+            if (!labelElement || !!parentTooltip) {
+                // Skip if label element is unknown
+                // Skip if the parent has a tooltip
+                return;
+            }
+
+            // Label overflowing
+            if (labelElement.offsetWidth < labelElement.scrollWidth) {
+                setTooltipLabel(labelElement.innerText);
+            }
+        },
+        [parentTooltip],
+    );
+
+    return { labelRef, tooltipLabel };
+};