fix(DateRangePicker): disable year pagination (#353)

Author: mitrotasios

src/components/input-elements/DateRangePicker/Calendar.tsx

@@ -95,10 +95,10 @@ const CalendarHeader = ({
       >
         <button
           type="button"
-          hidden={!enableYearPagination}
           className={twMerge(
             makeDateRangePickerClassName("calendarHeaderPrevYearButton"),
             "inline-flex focus:outline-none focus:ring-2",
+            !enableYearPagination && "hidden",
             getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground).hoverBgColor,
             getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
             getColorClassNames("blue", colorPalette.lightRing).focusRingColor,
@@ -198,10 +198,10 @@ const CalendarHeader = ({
         </button>
         <button
           type="button"
-          hidden={!enableYearPagination}
           className={twMerge(
             makeDateRangePickerClassName("calendarHeaderNextYearButton"),
             "inline-flex focus:outline-none focus:ring-2",
+            !enableYearPagination && "hidden",
             getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground).hoverBgColor,
             getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
             getColorClassNames("blue", colorPalette.lightRing).focusRingColor,

src/stories/input-elements/DateRangePicker.stories.tsx

@@ -137,6 +137,12 @@ UncontrolledWithDropdownOptionsWithEndDate.args = {
   ],
 };
 
+export const UncontrolledWithYearPaginationEnabled = UncontrolledTemplate.bind({});
+UncontrolledWithYearPaginationEnabled.args = {
+  defaultValue: [new Date(2022, 10, 1), new Date(), "tdy"],
+  enableYearPagination: true,
+};
+
 export const ControlledDefault = ControlledTemplate.bind({});
 
 export const ControlledWithDefaultDateRange = ControlledTemplate.bind({});