Updated to use a more flexible prop

patternfly · Jan 5, 2022 · c4382cd · c4382cd
1 parent cef68a1
commit c4382cd
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 13 deletions.
diff --git a/packages/react-core/src/components/Modal/Modal.tsx b/packages/react-core/src/components/Modal/Modal.tsx
@@ -39,8 +39,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   actions?: any;
   /** A callback for when the close button is clicked */
   onClose?: () => void;
-  /** Close button id */
-  closeButtonId?: string;
+  /** Additional props added to the close button */
+  closeButtonProps?: any;
   /** Default width of the Modal. */
   width?: number | string;
   /** The parent container to append the modal to. Defaults to document.body */

diff --git a/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx
@@ -7,17 +7,14 @@ export interface ModalBoxCloseButtonProps {
   className?: string;
   /** A callback for when the close button is clicked */
   onClose?: () => void;
-  /** Close button id */
-  id?: string;
 }
 
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
   className = '',
   onClose = () => undefined as any,
-  id,
   ...props
 }: ModalBoxCloseButtonProps) => (
-  <Button className={className} variant="plain" onClick={onClose} aria-label="Close" id={id} {...props}>
+  <Button className={className} variant="plain" onClick={onClose} aria-label="Close" {...props}>
     <TimesIcon />
   </Button>
 );

diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -57,8 +57,8 @@ export interface ModalContentProps extends OUIAProps {
   actions?: any;
   /** A callback for when the close button is clicked */
   onClose?: () => void;
-  /** Close button id */
-  closeButtonId?: string;
+  /** Additional props added to the close button */
+  closeButtonProps?: any;
   /** Id of the ModalBox container */
   boxId: string;
   /** Id of the ModalBox title */
@@ -88,7 +88,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
   footer = null,
   actions = [],
   onClose = () => undefined as any,
-  closeButtonId,
+  closeButtonProps,
   variant = 'default',
   position,
   positionOffset,
@@ -165,7 +165,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
       {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
     >
-      {showClose && <ModalBoxCloseButton onClose={onClose} id={closeButtonId} />}
+      {showClose && <ModalBoxCloseButton onClose={onClose} {...closeButtonProps} />}
       {modalBoxHeader}
       {modalBody}
       {modalBoxFooter}

diff --git a/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx b/packages/react-core/src/components/Modal/__tests__/ModalBoxCloseButton.test.tsx
@@ -4,7 +4,7 @@ import { ModalBoxCloseButton } from '../ModalBoxCloseButton';
 
 test('ModalBoxCloseButton Test', () => {
   const mockfn = jest.fn();
-  const view = shallow(<ModalBoxCloseButton className="test-box-close-button-class" onClose={mockfn} id="close-button-id"/>);
+  const view = shallow(<ModalBoxCloseButton className="test-box-close-button-class" onClose={mockfn} closeButtonProps={{ id: 'basic-close-button', 'data-example': 'example-data-attribute' }}/>);
   expect(view).toMatchSnapshot();
   view
     .find('.test-box-close-button-class')

diff --git a/...react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap b/...react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxCloseButton.test.tsx.snap
@@ -4,7 +4,12 @@ exports[`ModalBoxCloseButton Test 1`] = `
 <Button
   aria-label="Close"
   className="test-box-close-button-class"
-  id="close-button-id"
+  closeButtonProps={
+    Object {
+      "data-example": "example-data-attribute",
+      "id": "basic-close-button",
+    }
+  }
   onClick={[MockFunction]}
   variant="plain"
 >

diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -44,7 +44,7 @@ class SimpleModal extends React.Component {
           title="Simple modal header"
           isOpen={isModalOpen}
           onClose={this.handleModalToggle}
-          closeButtonId="basic-close-button"
+          closeButtonProps={{ id: 'basic-close-button', 'data-example': 'example-data-attribute' }}
           actions={[
             <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
               Confirm