refactor(actions): improve actions code

fix #191
morewings · Jun 14, 2024 · 4723c23 · 4723c23
1 parent df9fe92
commit 4723c23
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 75 deletions.
diff --git a/src/internal/Actions/ActionButton.module.css b/src/internal/Actions/ActionButton.module.css
@@ -1,3 +1,5 @@
+@import url("@/lib/Layout/customMedia.css");
+
 .row {
     display: flex;
     flex-direction: column;

diff --git a/src/internal/Actions/Actions.module.css b/src/internal/Actions/Actions.module.css
@@ -6,11 +6,15 @@
     max-width: 240px;
 
     & .action-row {
-        &:first-of-type {
-            & .primary-action,
-            & .inverted-action {
+        & .primary-action,
+        & .inverted-action {
+            &:first-of-type {
                 border-top: none;
             }
+
+            &:not(:only-child, :last-child) {
+                border-right: var(--fg-border-width-100) solid var(--fg-background-100);
+            }
         }
     }
 }

diff --git a/src/internal/Actions/mockActions.ts b/src/internal/Actions/mockActions.ts
@@ -2,7 +2,8 @@
 import {fn} from '@storybook/test';
 
 import {CloudUpload, IconFile} from '@/internal/Icons';
-import type {Props as ActionProps} from '@/internal/Actions/ActionButton.tsx';
+
+import type {Props as ActionProps} from './ActionButton.tsx';
 
 export const actionsMockMultiple = [
     {title: 'Default Action', onClick: fn()},

diff --git a/src/lib/Card/Card.tsx b/src/lib/Card/Card.tsx
@@ -7,7 +7,8 @@ import type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';
 import {useInternalId} from '@/internal/hooks/useInternalId.ts';
 import {useLinkRefs} from '@/internal/hooks/useLinkRefs.ts';
 import {Picture} from '@/lib';
-import {ActionButton} from '@/internal/Actions';
+import type {ActionButton} from '@/internal/Actions';
+import {ActionsTree} from '@/internal/Actions';
 
 import classes from './Card.module.css';
 
@@ -72,26 +73,11 @@ export const Card = forwardRef<HTMLDivElement, Props>(
                 {headerImageUrl && <Picture className={classes.headerImage} src={headerImageUrl} />}
                 <div className={classes.body}>{children}</div>
                 <footer className={classes.actions}>
-                    {actions.map((actionSlot, i) => {
-                        if (Array.isArray(actionSlot)) {
-                            const [left, right] = actionSlot;
-                            return (
-                                <div key={`${id}-${i}`} className={classes.row}>
-                                    <ActionButton {...left} className={classes.actionButton} />
-                                    <ActionButton {...right} className={classes.actionButton} />
-                                </div>
-                            );
-                        } else {
-                            return (
-                                <div key={`${id}-${i}`} className={classes.row}>
-                                    <ActionButton
-                                        {...actionSlot}
-                                        className={classes.actionButton}
-                                    />
-                                </div>
-                            );
-                        }
-                    })}
+                    <ActionsTree
+                        actions={actions}
+                        classNameAction={classes.actionButton}
+                        classNameRow={classes.row}
+                    />
                 </footer>
             </LocalRoot>
         );

diff --git a/src/lib/Dialog/Dialog.module.css b/src/lib/Dialog/Dialog.module.css
@@ -61,8 +61,4 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-
-    @media (--viewport-md) {
-        flex-direction: row;
-    }
 }
diff --git a/src/lib/Dialog/Dialog.tsx b/src/lib/Dialog/Dialog.tsx
@@ -7,7 +7,7 @@ import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
 import {IconClose} from '@/internal/Icons';
 import {H3} from '@/lib';
 import {useFocusTrap} from '@/internal/hooks/useFocusTrap.ts';
-import {ActionButton} from '@/internal/Actions';
+import {ActionButton, ActionsTree} from '@/internal/Actions';
 
 import {TransitionDialog} from './TransitionDialog.tsx';
 import {useDialogState} from './useDialogState.tsx';
@@ -115,23 +115,7 @@ export const Dialog = forwardRef<HTMLDialogElement, Props>(
                         )}
                         <div className={classNames(classes.body, className)}>{children}</div>
                         <footer className={classes.actions}>
-                            {actions.map((actionSlot, i) => {
-                                if (Array.isArray(actionSlot)) {
-                                    const [left, right] = actionSlot;
-                                    return (
-                                        <div key={`${id}-${i}`} className={classes.row}>
-                                            <ActionButton {...left} />
-                                            <ActionButton {...right} />
-                                        </div>
-                                    );
-                                } else {
-                                    return (
-                                        <div key={`${id}-${i}`} className={classes.row}>
-                                            <ActionButton {...actionSlot} />
-                                        </div>
-                                    );
-                                }
-                            })}
+                            <ActionsTree actions={actions} />
                             {showCloseButton && (
                                 <div key={`${id}-close`} className={classes.row}>
                                     <ActionButton

diff --git a/src/lib/Toast/Toast.module.css b/src/lib/Toast/Toast.module.css
@@ -114,7 +114,7 @@
     width: 100%;
 }
 
-.toast .action-button {
+.action-button {
     --icon-size: calc(var(--fg-size-unit) * 3);
 
     font-size: var(--fg-font-size-small);

diff --git a/src/lib/Toast/Toast.tsx b/src/lib/Toast/Toast.tsx
@@ -11,7 +11,7 @@ import {useInterval} from '@/internal/hooks/useInterval.ts';
 import {useInternalRef} from '@/internal/hooks/useInternalRef.ts';
 import {TransitionSlideBottom} from '@/internal/Transitions';
 import type {ActionProps} from '@/internal/Actions';
-import {ActionButton} from '@/internal/Actions';
+import {ActionsTree, ActionButton} from '@/internal/Actions';
 
 import {useToastState} from './useToastState.tsx';
 import classes from './Toast.module.css';
@@ -110,32 +110,10 @@ export const Toast = forwardRef<HTMLDivElement, Props>(
                                 </div>
                             </div>
                             <footer className={classes.actions}>
-                                {actions.map((actionSlot, i) => {
-                                    if (Array.isArray(actionSlot)) {
-                                        const [left, right] = actionSlot;
-                                        return (
-                                            <div key={`${id}-${i}`} className={classes.row}>
-                                                <ActionButton
-                                                    {...left}
-                                                    className={classes.actionButton}
-                                                />
-                                                <ActionButton
-                                                    {...right}
-                                                    className={classes.actionButton}
-                                                />
-                                            </div>
-                                        );
-                                    } else {
-                                        return (
-                                            <div key={`${id}-${i}`} className={classes.row}>
-                                                <ActionButton
-                                                    {...actionSlot}
-                                                    className={classes.actionButton}
-                                                />
-                                            </div>
-                                        );
-                                    }
-                                })}
+                                <ActionsTree
+                                    actions={actions}
+                                    classNameAction={classes.actionButton}
+                                />
                                 <div key={`${id}-close`} className={classes.row}>
                                     <ActionButton
                                         className={classes.actionButton}