fix(ModalHeader): add closeBtnProps

momentum-design · May 17, 2019 · ceacf56 · ceacf56
1 parent 6352676
commit ceacf56
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/react/src/lib/ModalHeader/index.js b/react/src/lib/ModalHeader/index.js
@@ -9,6 +9,7 @@ class ModalHeader extends React.PureComponent {
     const {
       children,
       className,
+      closeBtnProps,
       headerLabel,
       message,
       showCloseButton,
@@ -39,6 +40,7 @@ class ModalHeader extends React.PureComponent {
           <CloseIcon
             className='md-modal__close'
             onClick={handleClose}
+            {...closeBtnProps}
           />
         }
       </div>
@@ -51,6 +53,8 @@ ModalHeader.propTypes = {
   children: PropTypes.node,
   /** @prop Optional CSS class names | '' */
   className: PropTypes.string,
+  /** @prop Props to be passed to close button | null */
+  closeBtnProps: PropTypes.object,
   /** @prop ModalHeader label text | '' */
   headerLabel: PropTypes.string,
    /** @prop Modal message | '' */
@@ -62,6 +66,7 @@ ModalHeader.propTypes = {
 ModalHeader.defaultProps = {
   children: null,
   className: '',
+  closeBtnProps: null,
   headerLabel: '',
   message: '',
   showCloseButton: true,

diff --git a/react/src/lib/ModalHeader/tests/__snapshots__/index.spec.js.snap b/react/src/lib/ModalHeader/tests/__snapshots__/index.spec.js.snap
@@ -5,6 +5,7 @@ ShallowWrapper {
   Symbol(enzyme.__root__): [Circular],
   Symbol(enzyme.__unrendered__): <ModalHeader
     className=""
+    closeBtnProps={null}
     headerLabel=""
     id="test"
     message=""

diff --git a/react/src/lib/ModalHeader/tests/index.spec.js b/react/src/lib/ModalHeader/tests/index.spec.js
@@ -21,6 +21,12 @@ describe('tests for <ModalHeader />', () => {
     expect(container.find('.md-modal__close').length).toEqual(1);
   });
 
+  it('should apply closeBtnProps', () => {
+    const container = shallow(<ModalHeader closeBtnProps={{ className: 'test'}}/>);
+
+    expect(container.find('.test').length).toEqual(1);
+  });
+
   it('should display not display closable button', () => {
     const container = shallow(<ModalHeader showCloseButton={false} />);