diff --git a/examples/bpk-component-scrollable-calendar/examples.js b/examples/bpk-component-scrollable-calendar/examples.js index dffbab6697..dbe79111f2 100644 --- a/examples/bpk-component-scrollable-calendar/examples.js +++ b/examples/bpk-component-scrollable-calendar/examples.js @@ -149,7 +149,7 @@ const DefaultExampleWithCustomHeight = () => ( type: CALENDAR_SELECTION_TYPE.single, date: new Date(2020, 3, 15), }} - monthHeight={10} + rowHeight={3} /> ); diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts b/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts index e3a67c1be3..62f7f0e3ec 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts +++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts @@ -41,7 +41,7 @@ export type Props = { initiallyFocusedDate?: Date | null; markToday?: boolean; markOutsideDays?: boolean; - monthHeight?: number; + rowHeight?: number; }; type InjectedProps = { onDateClick: ((date: Date) => void) | null; @@ -106,7 +106,7 @@ declare const withCalendarState:

(Calendar: ComponentType

) initiallyFocusedDate: null; markToday: boolean; markOutsideDays: boolean; - monthHeight?: number; + rowHeight?: number; }; contextType?: import("react").Context | undefined; }; @@ -159,7 +159,7 @@ declare const _default: { initiallyFocusedDate: null; markToday: boolean; markOutsideDays: boolean; - monthHeight?: number; + rowHeight?: number; }; contextType?: import("react").Context | undefined; }; diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx index af1a71868b..47ed02d9f6 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx @@ -66,7 +66,7 @@ export type Props = { initiallyFocusedDate?: Date | null; markToday?: boolean; markOutsideDays?: boolean; - monthHeight?: number; + rowHeight?: number; }; type InjectedProps = { diff --git a/packages/bpk-component-calendar/src/composeCalendar.d.ts b/packages/bpk-component-calendar/src/composeCalendar.d.ts index c8e074de50..38af12cba0 100644 --- a/packages/bpk-component-calendar/src/composeCalendar.d.ts +++ b/packages/bpk-component-calendar/src/composeCalendar.d.ts @@ -71,7 +71,7 @@ export type Props = { preventKeyboardFocus?: boolean; selectionConfiguration?: SelectionConfiguration; gridClassName?: string | null; - monthHeight?: number; + rowHeight?: number; /** * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`. */ diff --git a/packages/bpk-component-calendar/src/composeCalendar.tsx b/packages/bpk-component-calendar/src/composeCalendar.tsx index 2de9ea78a7..8e1bd8a8e1 100644 --- a/packages/bpk-component-calendar/src/composeCalendar.tsx +++ b/packages/bpk-component-calendar/src/composeCalendar.tsx @@ -85,7 +85,7 @@ export type Props = { preventKeyboardFocus?: boolean; selectionConfiguration?: SelectionConfiguration; gridClassName?: string | null; - monthHeight?: number; + rowHeight?: number; /** * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`. */ @@ -133,7 +133,6 @@ const composeCalendar = ( maxDate, minDate, month, - monthHeight, navProps = {}, nextMonthLabel = null, onDateClick = null, @@ -141,6 +140,7 @@ const composeCalendar = ( onMonthChange = null, preventKeyboardFocus = false, previousMonthLabel = null, + rowHeight, selectionConfiguration = { type: CALENDAR_SELECTION_TYPE.single, date: null, @@ -218,7 +218,7 @@ const composeCalendar = ( className={gridClasses.join(' ')} dateProps={dateProps} selectionConfiguration={selectionConfiguration} - monthHeight={monthHeight} + rowHeight={rowHeight} {...gridProps} /> diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx index a2f4c9b688..37ea12aa64 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx @@ -80,7 +80,7 @@ describe('BpkCalendarScrollGridList', () => { expect(asFragment()).toMatchSnapshot(); }); - it('should render correctly with a custom "monthHeight" attribute', () => { + it('should render correctly with a custom "rowHeight" attribute', () => { const { asFragment } = render( { formatDateFull={formatDateFull} DateComponent={BpkCalendarScrollDate} weekStartsOn={0} - monthHeight={10} + rowHeight={3} />, ); expect(asFragment()).toMatchSnapshot(); diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts index aa8599ea83..d612d6adf7 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts @@ -29,7 +29,7 @@ type Props = Partial & { focusedDate?: Date | null; selectionConfiguration?: SelectionConfiguration; className?: string | null; - monthHeight?: number; + rowHeight?: number; }; declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element; export default BpkScrollableCalendarGridList; diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx index 23eaae9273..28e47952a7 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx @@ -35,6 +35,15 @@ import { getMonthsArray, getMonthItemHeights } from './utils'; const getClassName = cssModules(STYLES); +// These constants are here to facilitate calculating the height +// This is the additional height of each grid without any rows. +const BASE_MONTH_ITEM_HEIGHT = 8.125; +const COLUMN_COUNT = 7; +// Most browsers have by default 16px root font size +const DEFAULT_ROOT_FONT_SIZE = 16; +// Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting) +const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE; + type Props = Partial & { minDate: Date; maxDate: Date; @@ -46,7 +55,7 @@ type Props = Partial & { focusedDate?: Date | null; selectionConfiguration?: SelectionConfiguration; className?: string | null; - monthHeight?: number; + rowHeight?: number; }; const BpkScrollableCalendarGridList = (props: Props) => { @@ -54,7 +63,7 @@ const BpkScrollableCalendarGridList = (props: Props) => { className = null, focusedDate = null, minDate, - monthHeight = 8.125, + rowHeight = 2.75, selectionConfiguration, ...rest } = props; @@ -63,19 +72,11 @@ const BpkScrollableCalendarGridList = (props: Props) => { const endDate = startOfDay(startOfMonth(rest.maxDate)); const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate); - // These constants are here to facilitate calculating the height // Row and month item heights are defined in rem to support text scaling - const ROW_HEIGHT = 2.75; - // This is the additional height of each grid without any rows. - const BASE_MONTH_ITEM_HEIGHT = monthHeight; - const COLUMN_COUNT = 7; - // Most browsers have by default 16px root font size - const DEFAULT_ROOT_FONT_SIZE = 16; + const ROW_HEIGHT = rowHeight; // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects. const ESTIMATED_MONTH_ITEM_HEIGHT = (BASE_MONTH_ITEM_HEIGHT + 5 * ROW_HEIGHT) * DEFAULT_ROOT_FONT_SIZE; - // Minimum month item width (useful for server-side rendering. This value will be overridden with an accurate width after mounting) - const ESTIMATED_MONTH_ITEM_WIDTH = BASE_MONTH_ITEM_HEIGHT * 7 * DEFAULT_ROOT_FONT_SIZE; const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || diff --git a/packages/bpk-component-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap b/packages/bpk-component-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap index df58f7a161..51af072703 100644 --- a/packages/bpk-component-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap +++ b/packages/bpk-component-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap @@ -1261,7 +1261,7 @@ exports[`BpkCalendarScrollGridList should render correctly with a "dateModifiers `; -exports[`BpkCalendarScrollGridList should render correctly with a custom "monthHeight" attribute 1`] = ` +exports[`BpkCalendarScrollGridList should render correctly with a custom "rowHeight" attribute 1`] = `