fix(DatePicker): fix text prop for submit and cancel buttons (#2254)

* fix submit and cancel button text props * create tests for custom text props
dnbexperience · May 31, 2023 · b5f1bfa · b5f1bfa
1 parent 4ecb17e
commit b5f1bfa
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePicker.js b/packages/dnb-eufemia/src/components/date-picker/DatePicker.js
@@ -509,6 +509,8 @@ export default class DatePicker extends React.PureComponent {
       mask_order,
       mask_placeholder,
       align_picker,
+      submit_button_text,
+      cancel_button_text,
       reset_button_text,
 
       hide_navigation: _hide_navigation, // eslint-disable-line
@@ -703,6 +705,8 @@ export default class DatePicker extends React.PureComponent {
                         onSubmit={this.onSubmitHandler}
                         onCancel={this.onCancelHandler}
                         onReset={this.onResetHandler}
+                        submitButtonText={submit_button_text}
+                        cancelButtonText={cancel_button_text}
                         resetButtonText={reset_button_text}
                       />
                     </>

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.d.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.d.ts
@@ -5,6 +5,8 @@ export interface DatePickerFooterProps
   onSubmit?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
   onReset?: (...args: any[]) => any;
+  submitButtonText?: string;
+  cancelButtonText?: string;
   resetButtonText?: string;
 }
 export default class DatePickerFooter extends React.Component<

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.js b/packages/dnb-eufemia/src/components/date-picker/DatePickerFooter.js
@@ -20,13 +20,17 @@ export default class DatePickerFooter extends React.PureComponent {
     onCancel: PropTypes.func,
     onReset: PropTypes.func,
 
+    submitButtonText: PropTypes.string,
+    cancelButtonText: PropTypes.string,
     resetButtonText: PropTypes.string,
   }
 
   static defaultProps = {
     onSubmit: null,
     onCancel: null,
     onReset: null,
+    submitButtonText: null,
+    cancelButtonText: null,
     resetButtonText: null,
   }
 
@@ -90,7 +94,12 @@ export default class DatePickerFooter extends React.PureComponent {
   }
 
   render() {
-    const { isRange, resetButtonText } = this.props
+    const {
+      isRange,
+      resetButtonText,
+      submitButtonText,
+      cancelButtonText,
+    } = this.props
 
     const { show_reset_button, show_cancel_button, show_submit_button } =
       this.context.props
@@ -105,16 +114,16 @@ export default class DatePickerFooter extends React.PureComponent {
     }
 
     const {
-      submit_button_text,
-      cancel_button_text,
+      submit_button_text: submit_button_text_translation,
+      cancel_button_text: cancel_button_text_translation,
       reset_button_text: reset_button_text_translation,
     } = this.context.translation.DatePicker
 
     return (
       <div className="dnb-date-picker__footer">
         {((isRange || isTrue(show_submit_button)) && (
           <Button
-            text={submit_button_text}
+            text={submitButtonText || submit_button_text_translation}
             onClick={this.onSubmitHandler}
             data-testid="submit"
           />
@@ -134,7 +143,7 @@ export default class DatePickerFooter extends React.PureComponent {
 
           {((isRange || isTrue(show_cancel_button)) && (
             <Button
-              text={cancel_button_text}
+              text={cancelButtonText || cancel_button_text_translation}
               icon="close"
               icon_position="left"
               variant="tertiary"

diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx b/packages/dnb-eufemia/src/components/date-picker/__tests__/DatePicker.test.tsx
@@ -1375,4 +1375,37 @@ describe('DatePicker scss', () => {
   })
 })
 
+describe('Custom text for buttons', () => {
+  it('should show custom text for submit button', () => {
+    render(
+      <Component submit_button_text="Yes" show_submit_button opened />
+    )
+
+    expect(
+      document.querySelector('[data-testid="submit"]  .dnb-button__text')
+        .textContent
+    ).toBe('Yes')
+  })
+
+  it('should show custom text for cancel button', () => {
+    render(<Component cancel_button_text="No" show_cancel_button opened />)
+
+    expect(
+      document.querySelector('[data-testid="cancel"]  .dnb-button__text')
+        .textContent
+    ).toBe('No')
+  })
+
+  it('should show custom text for reset button', () => {
+    render(
+      <Component reset_button_text="Maybe" show_reset_button opened />
+    )
+
+    expect(
+      document.querySelector('[data-testid="reset"]  .dnb-button__text')
+        .textContent
+    ).toBe('Maybe')
+  })
+})
+
 const wait = (t) => new Promise((r) => setTimeout(r, t))