STCOM-1342: Datepicker - add the hideCalendarButton property to hide …

…the calendar icon button. (#2347)
folio-org · Sep 16, 2024 · be2eacb · be2eacb
1 parent 3be6dba
commit be2eacb
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,7 @@
 * `<MultiSelection>` Bugfix - remove filter value after an item is selected. Refs STCOM-1324.
 * Fix visual issue with `<Selection>` where dropdown caret shifts downward when a validation message is present. Refs STCOM-1323.
 * Fix MCL Paging bug - back button being incorrectly disabled. This was due to an inaccurate rowcount/rowIndex value. Refs STCOM-1331.
+* `Datepicker` - add the `hideCalendarButton` property to hide the calendar icon button. Refs STCOM-1342.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

diff --git a/lib/Datepicker/Datepicker.js b/lib/Datepicker/Datepicker.js
@@ -28,6 +28,7 @@ const propTypes = {
   dateFormat: PropTypes.string,
   disabled: PropTypes.bool,
   exclude: PropTypes.func,
+  hideCalendarButton: PropTypes.bool,
   hideOnChoose: PropTypes.bool,
   id: PropTypes.string,
   input: PropTypes.object,
@@ -63,6 +64,7 @@ const Datepicker = (
     disabled,
     dateFormat,
     exclude,
+    hideCalendarButton = false,
     hideOnChoose = true,
     id,
     inputValidator = defaultInputValidator,
@@ -319,19 +321,21 @@ const Datepicker = (
             )}
           </FormattedMessage>
         )}
-        <FormattedMessage id="stripes-components.showOrHideDatepicker">
-          {([ariaLabel]) => (
-            <IconButton
-              data-test-calendar-button
-              onClick={toggleCalendar}
-              aria-label={ariaLabel}
-              aria-haspopup="true"
-              aria-expanded={!!showCalendar}
-              id={`datepicker-toggle-calendar-button-${testId}`}
-              icon="calendar"
-            />
-          )}
-        </FormattedMessage>
+        {!hideCalendarButton && (
+          <FormattedMessage id="stripes-components.showOrHideDatepicker">
+            {([ariaLabel]) => (
+              <IconButton
+                data-test-calendar-button
+                onClick={toggleCalendar}
+                aria-label={ariaLabel}
+                aria-haspopup="true"
+                aria-expanded={!!showCalendar}
+                id={`datepicker-toggle-calendar-button-${testId}`}
+                icon="calendar"
+              />
+            )}
+          </FormattedMessage>
+        )}
       </>
     );
   };

diff --git a/lib/Datepicker/readme.md b/lib/Datepicker/readme.md
@@ -15,6 +15,7 @@ Name | type | description | default | required
 `autoFocus` | bool | If this prop is `true`, component will automatically focus on mount | |
 `backendDateStandard` | string | parses to/from ISO 8601 standard, with Arabic (0-9) digits, by default before committing value. | "ISO 8601" | false
 `disabled` | bool | if true, field will be disabled for focus or entry. | false | false
+`hideCalendarButton` | bool | if true, calendar button will be hidden. | false | false
 `id` | string | id for date field - used in the "id" attribute of the text input | | false
 `inputValidator` | func | Function that receives the value (value prop or user input), the provided format prop and the backend format to determine if the value is passed on through advanced stages of the value lifecycle (formatting for output). Returns a boolean.  | | `defaultInputValidator`
 `label` | string | visible field label | | false

diff --git a/lib/Datepicker/tests/Datepicker-test.js b/lib/Datepicker/tests/Datepicker-test.js
@@ -736,4 +736,14 @@ describe('Datepicker', () => {
       });
     });
   });
+
+  describe('hideCalendarButton prop', () => {
+    beforeEach(async () => {
+      await mountWithContext(
+        <Datepicker hideCalendarButton />
+      );
+    });
+
+    it('does not display the calendar button', () => IconButton({ icon: 'calendar' }).absent());
+  });
 });