fix(Modal): fix data-testid usage in object defined props

dnbexperience · May 10, 2022 · e023f13 · e023f13
1 parent fb3e452
commit e023f13
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 52 deletions.
diff --git a/packages/dnb-eufemia/src/components/button/Button.d.ts b/packages/dnb-eufemia/src/components/button/Button.d.ts
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { SkeletonShow } from '../skeleton/Skeleton';
 import { IconPrimaryIcon } from '../icon-primary/IconPrimary';
+import { DataAttributeTypes } from '../../shared/interfaces';
+
 export type ButtonText = string | React.ReactNode;
 export type ButtonVariant =
   | 'primary'
@@ -72,9 +74,10 @@ export type ButtonOnClick = string | ((...args: any[]) => any);
  */
 export interface ButtonProps
   extends Omit<
-    React.HTMLProps<HTMLElement>,
-    'disabled' | 'size' | 'title' | 'wrap'
-  > {
+      React.HTMLProps<HTMLElement>,
+      'disabled' | 'size' | 'title' | 'wrap'
+    >,
+    Partial<DataAttributeTypes> {
   /**
    * The content of the button can be a string or a React Element.
    */

diff --git a/packages/dnb-eufemia/src/components/modal/parts/CloseButton.tsx b/packages/dnb-eufemia/src/components/modal/parts/CloseButton.tsx
@@ -10,12 +10,12 @@ import Button from '../../button/Button'
 import Context from '../../../shared/Context'
 import { ButtonProps } from '../../button'
 
-export interface CloseButtonProps extends ButtonProps {
+export type CloseButtonProps = {
   /**
    * The title of the close button. Defaults to <em>Close</em> or <em>Lukk</em>.
    */
   close_title?: string
-}
+} & Partial<ButtonProps>
 
 export default class CloseButton extends React.PureComponent<CloseButtonProps> {
   static contextType = Context

diff --git a/packages/dnb-eufemia/src/components/modal/stories/Modal.stories.tsx b/packages/dnb-eufemia/src/components/modal/stories/Modal.stories.tsx
@@ -241,7 +241,13 @@ export const ModalV2Sandbox = () => (
   <Modal
     openState={true}
     title="hellooo"
-    triggerAttributes={{ text: 'Custom' }}
+    triggerAttributes={{
+      text: 'Custom',
+      'data-testid': 'html-selector',
+    }}
+    closeButtonAttributes={{
+      'data-testid': 'html-selector',
+    }}
   >
     The informational content
   </Modal>

diff --git a/packages/dnb-eufemia/src/components/modal/types.ts b/packages/dnb-eufemia/src/components/modal/types.ts
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { CloseButtonProps } from './parts/CloseButton'
+import { ButtonProps } from '../button/Button'
 import { ModalRootProps } from './ModalRoot'
 
 export type ExtendedBoolean = string | boolean
@@ -339,49 +340,4 @@ export interface ModalContentProps {
   dialog_role?: 'dialog' | 'alertdialog' | 'region'
 }
 
-export type TriggerAttributes = {
-  /**
-   * If truthy, no trigger button will be show. This can be used in combination with `open_state="opened"`.
-   */
-  hidden?: string | boolean
-
-  /**
-   * If truthy, then the trigger button can&#39;t be opened.
-   */
-  disabled?: string | boolean
-
-  /**
-   * The triggering button variant. Defaults to `secondary`.
-   */
-  variant?: ModalTriggerVariant
-
-  /**
-   * If type is set to `text`, this will be the text which triggers the drawer. If set to `button` it will be the `title` attribute of the button.
-   */
-  text?: string
-
-  /**
-   * The triggering button title
-   */
-  title?: string
-
-  /**
-   * The triggering button size
-   */
-  size?: string
-
-  /**
-   * The modal/drawer triggering button icon. Can be used instead of a `trigger_text`. Defaults to `question`.
-   */
-  icon?: React.ReactNode | ((...args: any[]) => any)
-
-  /**
-   * Defines the modal/drawer triggering icon position. Defaults to `left` because of the tertiary button variant.
-   */
-  iconPosition?: ModalTriggerIconPosition
-
-  /**
-   * Adds a custom modal trigger class name.
-   */
-  class?: string
-}
+export type TriggerAttributes = ButtonProps
diff --git a/packages/dnb-eufemia/src/shared/interfaces.tsx b/packages/dnb-eufemia/src/shared/interfaces.tsx
@@ -10,3 +10,23 @@ export interface ISpacingElementProps {
 }
 
 export type SpaceTypes = string | boolean | number
+
+export type DataAttributeTypes = {
+  /**
+   * When using HTMLAttributes on object to define props,
+   * we need not get data-* attributes as valid types:
+   *
+   * triggerAttributes={{
+   *   'data-testid': 'html-selector'
+   * }}
+   *
+   * Effects: triggerAttributes, closeButtonAttributes
+   */
+  'data-testid'?: string
+
+  /**
+   * In future we want to use this below.
+   * But its supported from TS v4.4 - so we may wait some more months.
+   */
+  // [property: `data-${string}`]: string
+}