chore: Hides disabled split button in property filter editor (#2659)

cloudscape-design · Sep 6, 2024 · 78993c6 · 78993c6
1 parent 4f63835
commit 78993c6
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/src/button-dropdown/__tests__/button-dropdown.test.tsx b/src/button-dropdown/__tests__/button-dropdown.test.tsx
@@ -6,6 +6,7 @@ import { act, fireEvent, render, screen } from '@testing-library/react';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import ButtonDropdown, { ButtonDropdownProps } from '../../../lib/components/button-dropdown';
+import InternalButtonDropdown from '../../../lib/components/button-dropdown/internal';
 import { KeyCode } from '../../../lib/components/internal/keycode';
 import createWrapper, { ButtonWrapper, IconWrapper } from '../../../lib/components/test-utils/dom';
 
@@ -232,6 +233,20 @@ describe('with main action', () => {
     expect(wrapper.findItems()).toHaveLength(1);
   });
 
+  test('renders main action only', () => {
+    const onClick = jest.fn();
+    const renderResult = render(
+      <InternalButtonDropdown items={[]} mainAction={{ text: 'Main action', onClick }} showMainActionOnly={true} />
+    );
+    const wrapper = createWrapper(renderResult.container).findButtonDropdown()!;
+
+    expect(wrapper.findTriggerButton()).toBe(null);
+    expect(wrapper.findMainAction()).not.toBe(null);
+
+    wrapper.findMainAction()!.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
   test('main action onClick is triggered', () => {
     const onClick = jest.fn();
     const onFollow = jest.fn();

diff --git a/src/button-dropdown/interfaces.ts b/src/button-dropdown/interfaces.ts
@@ -283,6 +283,12 @@ export interface InternalButtonDropdownProps
    */
   description?: string;
 
+  /**
+   * Only show main action button as a regular, non-split button.
+   * That is needed so that button dropdown test utils wrapper can still be used.
+   */
+  showMainActionOnly?: boolean;
+
   /**
    * Determines that the dropdown should preferably be aligned to the center of the trigger
    * instead of dropping left or right.

diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx
@@ -48,6 +48,7 @@ const InternalButtonDropdown = React.forwardRef(
       description,
       preferCenter,
       mainAction,
+      showMainActionOnly,
       __internalRootRef,
       analyticsMetadataTransformer,
       ...props
@@ -211,7 +212,26 @@ const InternalButtonDropdown = React.forwardRef(
         ? `${mainAction.ariaLabel ?? mainAction.text} ${mainAction.externalIconAriaLabel}`
         : mainAction.ariaLabel;
       const hasNoText = !text;
-      trigger = (
+      const mainActionButton = (
+        <InternalButton
+          ref={mainActionRef}
+          {...mainActionProps}
+          {...mainActionIconProps}
+          className={clsx(
+            styles['trigger-button'],
+            hasNoText && styles['has-no-text'],
+            isVisualRefresh && styles['visual-refresh']
+          )}
+          variant={variant}
+          ariaLabel={mainActionAriaLabel}
+          formAction="none"
+        >
+          {text}
+        </InternalButton>
+      );
+      trigger = showMainActionOnly ? (
+        <div className={styles['split-trigger']}>{mainActionButton}</div>
+      ) : (
         <div role="group" aria-label={ariaLabel} className={styles['split-trigger-wrapper']}>
           <div
             className={clsx(
@@ -233,21 +253,7 @@ const InternalButtonDropdown = React.forwardRef(
               },
             })}
           >
-            <InternalButton
-              ref={mainActionRef}
-              {...mainActionProps}
-              {...mainActionIconProps}
-              className={clsx(
-                styles['trigger-button'],
-                hasNoText && styles['has-no-text'],
-                isVisualRefresh && styles['visual-refresh']
-              )}
-              variant={variant}
-              ariaLabel={mainActionAriaLabel}
-              formAction="none"
-            >
-              {text}
-            </InternalButton>
+            {mainActionButton}
           </div>
           <div
             className={clsx(

diff --git a/src/property-filter/__tests__/property-filter-token-editor.test.tsx b/src/property-filter/__tests__/property-filter-token-editor.test.tsx
@@ -361,8 +361,7 @@ describe.each([false, true] as const)('token editor labels, isMobile = %s', isMo
         );
         expect(removeActions.actionsMenu.findNativeButton().getElement()).toBeDisabled();
 
-        expect(editor.addActions.findNativeButton().getElement()).toHaveAccessibleName('Add filter actions');
-        expect(editor.addActions.findNativeButton().getElement()).toBeDisabled();
+        expect(editor.addActions.findTriggerButton()).toBe(null);
         expect(editor.addActions.findMainAction()!.getElement()).toHaveTextContent('Add new filter');
       } else {
         expect(editor.removeActions().actionsMenu).toBe(null);

diff --git a/src/property-filter/token-editor.tsx b/src/property-filter/token-editor.tsx
@@ -186,6 +186,7 @@ export function TokenEditor({
               }
             }}
             disabled={tokensToCapture.length === 0}
+            showMainActionOnly={tokensToCapture.length === 0}
             mainAction={{
               text: i18nStrings.tokenEditorAddNewTokenLabel ?? '',
               onClick: () => {