@lumx/react 3.11.1-alpha.3 → 3.11.1-alpha.5

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.11.1-alpha.3",
-        "@lumx/icons": "^3.11.1-alpha.3",
+        "@lumx/core": "^3.11.1-alpha.5",
+        "@lumx/icons": "^3.11.1-alpha.5",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -110,5 +110,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.11.1-alpha.3"
+    "version": "3.11.1-alpha.5"
 }

package/src/components/button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
@@ -21,14 +21,14 @@ export const ButtonEmphasis = Emphasis;
  * Defines the props of the component.
  */
 export interface ButtonProps extends BaseButtonProps {
-    /** Button content. */
-    children?: ReactNode;
     /** Left icon (SVG path). */
     leftIcon?: string;
     /** Right icon (SVG path). */
     rightIcon?: string;
     /** When `true`, the button gets as large as possible. */
     fullWidth?: boolean;
+    /** Children */
+    children?: React.ReactNode;
 }
 
 /**

package/src/components/button/ButtonRoot.tsx

@@ -44,8 +44,6 @@ export interface BaseButtonProps
     type?: HTMLButtonProps['type'];
     /** Custom react component for the link (can be used to inject react router Link). */
     linkAs?: 'a' | any;
-    /** Children */
-    children?: React.ReactNode;
 }
 
 export interface ButtonRootProps extends BaseButtonProps {

package/src/components/popover/Popover.stories.tsx

@@ -16,7 +16,6 @@ import {
     Elevation,
     Message,
     FlexBox,
-    FlexBoxProps,
     IconButtonProps,
 } from '@lumx/react';
 import range from 'lodash/range';
@@ -165,28 +164,25 @@ export const TestUpdatingChildrenAndMovingAnchor = {
 
         const [text, setText] = useState('Initial large span of text');
         const [anchorSize, setAnchorSize] = useState<IconButtonProps['size']>('m');
-        const [anchorPosition, setAnchorPosition] = useState<FlexBoxProps['vAlign']>('center');
         useEffect(() => {
             if (isOpen) {
                 const timers = [
+                    // Update popover size
                     setTimeout(() => setText('Text'), 1000),
-                    setTimeout(() => setAnchorSize('s'), 1500),
-                    setTimeout(() => setAnchorPosition('left'), 2000),
+                    // Update anchor size
+                    setTimeout(() => setAnchorSize('s'), 1000),
                 ];
                 return () => timers.forEach(clearTimeout);
             }
             setText('Initial large span of text');
             setAnchorSize('m');
-            setAnchorPosition('center');
             return undefined;
         }, [isOpen]);
 
         return (
             <FlexBox orientation="vertical" gap="huge">
-                <Message kind="info">
-                    Test popover text resize (after 1sec), anchor resize (after 1.5sec) and anchor move (after 2sec)
-                </Message>
-                <FlexBox orientation="horizontal" vAlign={anchorPosition}>
+                <Message kind="info">Test popover text resize (after 1sec) and anchor resize (after 1.5sec)</Message>
+                <FlexBox orientation="horizontal" vAlign="center">
                     <IconButton
                         label="Notifications"
                         className="lumx-spacing-margin-right-huge"

package/src/components/popover/usePopoverStyle.tsx

@@ -141,19 +141,10 @@ export function usePopoverStyle({
         if (!update || !popperElement || !anchorElement || !WINDOW?.ResizeObserver) {
             return undefined;
         }
-
-        // Only update once per frame
-        let frame: number | undefined;
-        function limitedUpdate() {
-            if (frame) return;
-            frame = requestAnimationFrame(() => {
-                update?.();
-                frame = undefined;
-            });
-        }
+        update();
 
         // On anchor or popover resize
-        const resizeObserver = new ResizeObserver(limitedUpdate);
+        const resizeObserver = new ResizeObserver(update);
         resizeObserver.observe(anchorElement);
         resizeObserver.observe(popperElement);
         return () => {

package/src/components/tooltip/Tooltip.tsx

@@ -135,7 +135,6 @@ export const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) =>
                         {...forwardedProps}
                         id={id}
                         role="tooltip"
-                        aria-label={label || ''}
                         className={classNames(
                             className,
                             handleBasicClasses({