feat: Support icon only main action in button dropdown (#2648)

cloudscape-design · Sep 4, 2024 · 1807c92 · 1807c92
1 parent d4baed1
commit 1807c92
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/pages/button-dropdown/permutations-main-action.page.tsx b/pages/button-dropdown/permutations-main-action.page.tsx
@@ -32,6 +32,7 @@ const permutations = createPermutations<ButtonDropdownProps>([
       { ...launchInstanceItem },
       { ...launchInstanceItem, disabled: true },
       { ...launchInstanceItem, loading: true, loadingText: 'Loading' },
+      { iconName: 'add-plus', ariaLabel: 'Add resource' },
     ],
     items: [
       [

diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -3737,7 +3737,7 @@ The main action also supports the following properties of the [button](/componen
           },
           Object {
             "name": "text",
-            "optional": false,
+            "optional": true,
             "type": "string",
           },
         ],

diff --git a/src/button-dropdown/interfaces.ts b/src/button-dropdown/interfaces.ts
@@ -121,7 +121,7 @@ export namespace ButtonDropdownProps {
   export type ItemType = 'action' | 'group';
 
   export interface MainAction {
-    text: string;
+    text?: string;
     ariaLabel?: string;
     onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;
     onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;

diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx
@@ -210,7 +210,7 @@ const InternalButtonDropdown = React.forwardRef(
       const mainActionAriaLabel = externalIconAriaLabel
         ? `${mainAction.ariaLabel ?? mainAction.text} ${mainAction.externalIconAriaLabel}`
         : mainAction.ariaLabel;
-
+      const hasNoText = !text;
       trigger = (
         <div role="group" aria-label={ariaLabel} className={styles['split-trigger-wrapper']}>
           <div
@@ -237,7 +237,11 @@ const InternalButtonDropdown = React.forwardRef(
               ref={mainActionRef}
               {...mainActionProps}
               {...mainActionIconProps}
-              className={clsx(styles['trigger-button'])}
+              className={clsx(
+                styles['trigger-button'],
+                hasNoText && styles['has-no-text'],
+                isVisualRefresh && styles['visual-refresh']
+              )}
               variant={variant}
               ariaLabel={mainActionAriaLabel}
               formAction="none"

diff --git a/src/button-dropdown/styles.scss b/src/button-dropdown/styles.scss
@@ -70,6 +70,14 @@ $dropdown-trigger-icon-offset: 2px;
       border-end-end-radius: 0;
       padding-inline-end: awsui.$space-m;
       margin-inline-end: awsui.$space-xxxs;
+
+      &.has-no-text {
+        padding-inline: awsui.$space-button-icon-only-horizontal;
+
+        &.visual-refresh {
+          padding-inline-start: calc(#{awsui.$space-s} - #{$dropdown-trigger-icon-offset});
+        }
+      }
     }
   }