@lumx/react 3.3.2-alpha.1 → 3.5.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.3.2-alpha.1",
-        "@lumx/icons": "^3.3.2-alpha.1",
+        "@lumx/core": "^3.5.0",
+        "@lumx/icons": "^3.5.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -117,5 +117,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.3.2-alpha.1"
+    "version": "3.5.0"
 }

package/src/components/tabs/Tab.test.tsx

@@ -38,6 +38,11 @@ describe(`<${Tab.displayName}>`, () => {
         expect(icon).toBeInTheDocument();
     });
 
+    it('should render icon with props', () => {
+        const { icon } = setup({ icon: mdiPlay, iconProps: { color: 'green', colorVariant: 'L2', hasShape: true } });
+        expect(icon).toHaveClass('lumx-icon--color-green', 'lumx-icon--color-variant-L2');
+    });
+
     commonTestsSuiteRTL(setup, {
         baseClassName: CLASSNAME,
         forwardClassName: 'tab',

package/src/components/tabs/Tab.tsx

@@ -15,6 +15,8 @@ export interface TabProps extends GenericProps {
     children?: never;
     /** Icon (SVG path). */
     icon?: IconProps['icon'];
+    /** Icon component properties. */
+    iconProps?: Omit<IconProps, 'icon'>;
     /** Native id property. */
     id?: string;
     /** Whether the tab is active or not. */
@@ -54,6 +56,7 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
         className,
         disabled,
         icon,
+        iconProps = {},
         id,
         isActive: propIsActive,
         isDisabled = disabled,
@@ -110,7 +113,7 @@ export const Tab: Comp<TabProps, HTMLButtonElement> = forwardRef((props, ref) =>
             aria-selected={isActive}
             aria-controls={state?.tabPanelId}
         >
-            {icon && <Icon icon={icon} size={Size.xs} />}
+            {icon && <Icon icon={icon} size={Size.xs} {...iconProps} />}
             {label && <span>{label}</span>}
         </button>
     );

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

@@ -126,6 +126,18 @@ export const FillHeightAndRatio = {
     ],
 };
 
+/**
+ * Simple thumbnail with svg image
+ * */
+export const WithSvgImages = {
+    args: {
+        image: IMAGES.defaultSvg,
+        size: Size.xxl,
+        fillHeight: true,
+        'focusPoint.x': 1,
+    },
+};
+
 export const Original = () => (
     <>
         <h1>Ratio: Original</h1>

package/src/components/thumbnail/useFocusPointStyle.tsx

@@ -74,8 +74,8 @@ export const useFocusPointStyle = (
             setStyle({ visibility: 'hidden' });
             return;
         }
-        if (!containerSize) {
-            // Missing container size abort focus point compute.
+        if (!containerSize || !imageSize.height || !imageSize.width) {
+            // Missing container or image size abort focus point compute.
             setStyle({});
             return;
         }

package/src/components/thumbnail/useImageLoad.ts

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';
 
 function getState(img: HTMLImageElement | null | undefined, event?: Event) {
-    // Error event occurred or image loaded empty.
-    if (event?.type === 'error' || (img?.complete && (img?.naturalWidth === 0 || img?.naturalHeight === 0))) {
+    // Error event occurred.
+    if (event?.type === 'error') {
         return 'hasError';
     }
     // Image is undefined or incomplete.

package/src/stories/controls/image.ts

@@ -14,12 +14,14 @@ const portrait2 = '/demo-assets/portrait2.jpg';
 const portrait3 = '/demo-assets/portrait3.jpg';
 const square1 = '/demo-assets/square1.jpg';
 const square2 = '/demo-assets/square2.jpg';
+const defaultSvg = '/demo-assets/defaultSvg.svg';
 
 export const AVATAR_IMAGES = { avatar1, avatar2, avatar3, avatar4 };
 export const SQUARE_IMAGES = { square1, square2 };
+export const SVG_IMAGES = { defaultSvg };
 export const LANDSCAPE_IMAGES = { landscape1, landscape1s200, landscape2, landscape3 };
 export const PORTRAIT_IMAGES = { portrait1, portrait1s200, portrait2, portrait3 };
-export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES };
+export const IMAGES = { ...LANDSCAPE_IMAGES, ...PORTRAIT_IMAGES, ...SQUARE_IMAGES, ...AVATAR_IMAGES, ...SVG_IMAGES };
 
 export const avatarImageArgType = getSelectArgType(AVATAR_IMAGES);
 export const squareImageArgType = getSelectArgType(SQUARE_IMAGES);
@@ -51,9 +53,13 @@ export const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size> =
     portrait2: { width: 350, height: 500 },
     portrait3: { width: 300, height: 500 },
 };
+export const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size> = {
+    defaultSvg: { width: 0, height: 0 },
+};
 export const IMAGE_SIZES: Record<keyof typeof IMAGES, Size> = {
     ...LANDSCAPE_IMAGE_SIZES,
     ...PORTRAIT_IMAGE_SIZES,
     ...SQUARE_IMAGE_SIZES,
     ...AVATAR_IMAGE_SIZES,
+    ...SVG_IMAGE_SIZES,
 };