refactor: Update customTriggerBuilder internal API (cloudscape-design…

…#1452)
yossyX · Aug 17, 2023 · 2619e4b · 2619e4b
1 parent 476eac6
commit 2619e4b
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 33 deletions.
diff --git a/src/breadcrumb-group/internal.tsx b/src/breadcrumb-group/internal.tsx
@@ -5,9 +5,8 @@ import styles from './styles.css.js';
 import clsx from 'clsx';
 import InternalIcon from '../icon/internal';
 import InternalButtonDropdown from '../button-dropdown/internal';
-import { LinkItem } from '../button-dropdown/interfaces';
+import { CustomTriggerProps, LinkItem } from '../button-dropdown/interfaces';
 import { InternalButton } from '../button/internal';
-import { ButtonProps } from '../button/interfaces';
 import { BreadcrumbItem } from './item/item';
 import { BreadcrumbGroupProps, EllipsisDropdownProps } from './interfaces';
 import { fireCancelableEvent } from '../internal/events';
@@ -22,22 +21,24 @@ import { useInternalI18n } from '../i18n/context';
  */
 const DEFAULT_EXPAND_ARIA_LABEL = 'Show path';
 
-const DropdownTrigger = (
-  clickHandler: () => void,
-  ref: React.Ref<ButtonProps.Ref>,
-  isDisabled: boolean,
-  isExpanded: boolean,
-  ariaLabel?: string
-) => {
+const getDropdownTrigger = ({
+  ariaLabel,
+  triggerRef,
+  disabled,
+  testUtilsClass,
+  isOpen,
+  onClick,
+}: CustomTriggerProps) => {
   return (
     <InternalButton
-      disabled={isDisabled}
+      ref={triggerRef}
+      className={testUtilsClass}
+      disabled={disabled}
       onClick={event => {
         event.preventDefault();
-        clickHandler();
+        onClick();
       }}
-      ref={ref}
-      ariaExpanded={isExpanded}
+      ariaExpanded={isOpen}
       aria-haspopup={true}
       ariaLabel={ariaLabel}
       variant="breadcrumb-group"
@@ -63,7 +64,7 @@ const EllipsisDropdown = ({
         items={dropdownItems}
         onItemClick={onDropdownItemClick}
         onItemFollow={onDropdownItemFollow}
-        customTriggerBuilder={DropdownTrigger}
+        customTriggerBuilder={getDropdownTrigger}
       />
       <span className={styles.icon}>
         <InternalIcon name="angle-right" />

diff --git a/src/button-dropdown/interfaces.ts b/src/button-dropdown/interfaces.ts
@@ -217,13 +217,7 @@ export interface ItemProps {
 }
 
 export interface InternalButtonDropdownProps extends Omit<ButtonDropdownProps, 'variant'>, InternalBaseComponentProps {
-  customTriggerBuilder?: (
-    clickHandler: () => void,
-    ref: React.Ref<any>,
-    isDisabled: boolean,
-    isExpanded: boolean,
-    ariaLabel?: string
-  ) => React.ReactNode;
+  customTriggerBuilder?: (props: CustomTriggerProps) => React.ReactNode;
   variant?: ButtonDropdownProps['variant'] | 'navigation';
 
   /**
@@ -242,3 +236,12 @@ export interface InternalButtonDropdownProps extends Omit<ButtonDropdownProps, '
    */
   preferCenter?: boolean;
 }
+
+export interface CustomTriggerProps {
+  triggerRef: React.Ref<HTMLElement>;
+  testUtilsClass: string;
+  ariaLabel: string | undefined;
+  disabled: boolean;
+  isOpen: boolean;
+  onClick: () => void;
+}
diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx
@@ -119,7 +119,7 @@ const InternalButtonDropdown = React.forwardRef(
           };
 
     const baseTriggerProps: InternalButtonProps = {
-      className: styles['trigger-button'],
+      className: clsx(styles['trigger-button'], styles['test-utils-button-trigger']),
       ...iconProps,
       variant: triggerVariant,
       loading,
@@ -141,7 +141,14 @@ const InternalButtonDropdown = React.forwardRef(
     if (customTriggerBuilder) {
       trigger = (
         <div className={styles['dropdown-trigger']}>
-          {customTriggerBuilder(clickHandler, triggerRef, disabled, isOpen, ariaLabel)}
+          {customTriggerBuilder({
+            testUtilsClass: styles['test-utils-button-trigger'],
+            onClick: clickHandler,
+            triggerRef,
+            ariaLabel,
+            disabled,
+            isOpen,
+          })}
         </div>
       );
     } else if (isMainAction) {

diff --git a/src/button-dropdown/styles.scss b/src/button-dropdown/styles.scss
@@ -89,3 +89,7 @@ $dropdown-trigger-icon-offset: 2px;
 .dropdown-trigger {
   display: contents;
 }
+
+.test-utils-button-trigger {
+  /* used in test-utils */
+}
diff --git a/src/internal/components/menu-dropdown/index.tsx b/src/internal/components/menu-dropdown/index.tsx
@@ -10,12 +10,14 @@ import InternalButtonDropdown from '../../../button-dropdown/internal';
 import InternalIcon from '../../../icon/internal';
 import buttonDropdownStyles from '../../../button-dropdown/styles.css.js';
 import styles from './styles.css.js';
+import { CustomTriggerProps } from '../../../button-dropdown/interfaces';
 
 export { MenuDropdownProps };
 
 export const ButtonTrigger = React.forwardRef(
   (
     {
+      testUtilsClass,
       iconName,
       iconUrl,
       iconAlt,
@@ -36,7 +38,9 @@ export const ButtonTrigger = React.forwardRef(
       <button
         ref={ref}
         type="button"
-        className={clsx(styles.button, styles[`offset-right-${offsetRight}`], { [styles.expanded]: expanded })}
+        className={clsx(styles.button, styles[`offset-right-${offsetRight}`], testUtilsClass, {
+          [styles.expanded]: expanded,
+        })}
         aria-label={ariaLabel}
         aria-expanded={!!expanded}
         aria-haspopup={true}
@@ -74,27 +78,34 @@ const MenuDropdown = ({
   iconAlt,
   iconSvg,
   badge,
-  ariaLabel,
   offsetRight,
   children,
   ...props
 }: MenuDropdownProps) => {
   const baseProps = getBaseProps(props);
 
-  const dropdownTrigger = (clickHandler: () => void, ref: React.Ref<any>, isDisabled: boolean, isExpanded: boolean) => {
+  const dropdownTrigger = ({
+    triggerRef,
+    ariaLabel,
+    isOpen,
+    testUtilsClass,
+    disabled,
+    onClick,
+  }: CustomTriggerProps) => {
     return (
       <ButtonTrigger
-        ref={ref}
-        disabled={isDisabled}
-        expanded={isExpanded}
+        testUtilsClass={testUtilsClass}
+        ref={triggerRef}
+        disabled={disabled}
+        expanded={isOpen}
         iconName={iconName}
         iconUrl={iconUrl}
         iconAlt={iconAlt}
         iconSvg={iconSvg}
         badge={badge}
         ariaLabel={ariaLabel}
         offsetRight={offsetRight}
-        onClick={clickHandler}
+        onClick={onClick}
       >
         {children}
       </ButtonTrigger>

diff --git a/src/internal/components/menu-dropdown/interfaces.ts b/src/internal/components/menu-dropdown/interfaces.ts
@@ -4,6 +4,7 @@ import { InternalButtonDropdownProps } from '../../../button-dropdown/interfaces
 import { IconProps } from '../../../icon/interfaces';
 
 export interface ButtonTriggerProps {
+  testUtilsClass?: string;
   iconName?: IconProps.Name;
   iconUrl?: string;
   iconAlt?: string;

diff --git a/src/test-utils/dom/button-dropdown/index.ts b/src/test-utils/dom/button-dropdown/index.ts
@@ -13,9 +13,9 @@ export default class ButtonDropdownWrapper extends ComponentWrapper {
   static rootSelector: string = styles['button-dropdown'];
 
   findNativeButton(): ElementWrapper<HTMLButtonElement> {
-    // ButtonDropdown always has a button
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return this.findByClassName(styles['dropdown-trigger'])!.find<HTMLButtonElement>(`button.${buttonStyles.button}`)!;
+    return this.findByClassName(styles['dropdown-trigger'])!.findByClassName<HTMLButtonElement>(
+      styles['test-utils-button-trigger']
+    )!;
   }
 
   findMainAction(): null | ButtonWrapper {