Fixed buttons

cultureamp · Jan 17, 2025 · 119c44e · 119c44e
1 parent e05d52c
commit 119c44e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss b/packages/components/src/Calendar/CalendarRange/CalendarRange.module.scss
@@ -47,6 +47,11 @@ $cell-border-radius: 3px;
   .captionEnd & {
     flex-direction: row-reverse;
   }
+
+  .captionStart.captionEnd & {
+    justify-content: space-between;
+    flex-direction: row;
+  }
 }
 
 .dayRangeStart,

diff --git a/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx b/packages/components/src/Calendar/CalendarRange/CalendarRange.tsx
@@ -22,6 +22,7 @@ export const CalendarRange = ({
   classNameOverride,
   selected,
   defaultMonth,
+  numberOfMonths = 2,
   locale = enAU,
   ...restProps
 }: CalendarRangeProps): JSX.Element => {
@@ -39,6 +40,7 @@ export const CalendarRange = ({
     ...baseCalendarClassNames,
     month: hasDivider ? styles.monthWithDivider : styles.month,
     caption_end: styles.captionEnd,
+    caption_start: styles.captionStart,
     nav: styles.nav,
     day_range_start: styles.dayRangeStart,
     day_range_end: styles.dayRangeEnd,
@@ -57,7 +59,7 @@ export const CalendarRange = ({
           IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
           IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
-        numberOfMonths={2}
+        numberOfMonths={numberOfMonths}
         locale={locale}
         {...restProps}
       />

diff --git a/...erDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx b/...erDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx
@@ -15,6 +15,7 @@ import { type DateValidationResponse } from '~components/Filter/FilterDatePicker
 import { useDateInputHandlers } from '~components/Filter/FilterDatePicker/hooks/useDateInputHandlers'
 import { type DataAttributes } from '~components/types/DataAttributes'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { DateRangeInputField, type DateRangeInputFieldProps } from '../DateRangeInputField'
 import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer'
 import { useEndDateValidation } from './hooks/useEndDateValidation'
@@ -239,6 +240,10 @@ export const FilterDateRangePickerField = ({
     handleDateRangeChange({ from: newStartDate, to: newEndDate })
   }
 
+  const {
+    queries: { isSmall },
+  } = useMediaQueries()
+
   useEffect(() => {
     if (inputStartDateLabel === ' ' || inputEndDateLabel === ' ') {
       // Translations are loading
@@ -303,6 +308,7 @@ export const FilterDateRangePickerField = ({
         }}
         onSelect={handleCalendarSelectRange}
         month={state.startMonth}
+        numberOfMonths={isSmall ? 1 : 2}
         onMonthChange={(value: Date) => dispatch({ type: 'navigate_months', date: value })}
       />
     </div>