diff --git a/examples/bpk-component-scrollable-calendar/examples.js b/examples/bpk-component-scrollable-calendar/examples.js index 5318ea9772..0749b09602 100644 --- a/examples/bpk-component-scrollable-calendar/examples.js +++ b/examples/bpk-component-scrollable-calendar/examples.js @@ -136,6 +136,24 @@ const DefaultExample = () => ( /> ); +const DefaultExampleWithCustomHeight = () => ( + +); + + const RangeExample = () => ( ( export { DefaultExample, + DefaultExampleWithCustomHeight, RangeExample, SplitWeekRangeExample, WeekStartsOnSixExample, diff --git a/examples/bpk-component-scrollable-calendar/stories.js b/examples/bpk-component-scrollable-calendar/stories.js index e7dd6204f9..80f024ddf7 100644 --- a/examples/bpk-component-scrollable-calendar/stories.js +++ b/examples/bpk-component-scrollable-calendar/stories.js @@ -39,6 +39,7 @@ import { PastCalendarExample, RangeExample, SplitWeekRangeExample, + DefaultExampleWithCustomHeight, } from './examples'; export default { @@ -92,6 +93,12 @@ VisualTestWithZoom.args = { zoomEnabled: true }; +export const VisualTestWithCustomHeight = DefaultExampleWithCustomHeight; +export const VisualTestWithCustomHeightWithZoom = VisualTestWithCustomHeight.bind({}); +VisualTestWithCustomHeightWithZoom.args = { + zoomEnabled: true +}; + export const VisualTestRange = RangeExample; export const VisualTestRangeWithZoom = VisualTestRange.bind({}); VisualTestRangeWithZoom.args = { diff --git a/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts b/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts index 918cca1466..bac2a928f9 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts +++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.d.ts @@ -41,6 +41,7 @@ export type Props = { initiallyFocusedDate?: Date | null; markToday?: boolean; markOutsideDays?: boolean; + customRowHeight?: number; }; type InjectedProps = { onDateClick: ((date: Date) => void) | null; @@ -105,6 +106,7 @@ declare const withCalendarState:

(Calendar: ComponentType

) initiallyFocusedDate: null; markToday: boolean; markOutsideDays: boolean; + customRowHeight?: number; }; contextType?: import("react").Context | undefined; }; @@ -157,6 +159,7 @@ declare const _default: { initiallyFocusedDate: null; markToday: boolean; markOutsideDays: boolean; + customRowHeight?: 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 80966728c8..122966169f 100644 --- a/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx +++ b/packages/bpk-component-calendar/src/BpkCalendarContainer.tsx @@ -66,6 +66,10 @@ export type Props = { initiallyFocusedDate?: Date | null; markToday?: boolean; markOutsideDays?: boolean; + /** + * Sets the height of month rows in 'rem' units. If not specified, the default value of `2.75rem` will be used. + */ + customRowHeight?: number; }; type InjectedProps = { diff --git a/packages/bpk-component-calendar/src/composeCalendar.d.ts b/packages/bpk-component-calendar/src/composeCalendar.d.ts index c26088fdd8..b7da70e873 100644 --- a/packages/bpk-component-calendar/src/composeCalendar.d.ts +++ b/packages/bpk-component-calendar/src/composeCalendar.d.ts @@ -71,6 +71,7 @@ export type Props = { preventKeyboardFocus?: boolean; selectionConfiguration?: SelectionConfiguration; gridClassName?: string | null; + customRowHeight?: 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 d040a5b150..55997daa7e 100644 --- a/packages/bpk-component-calendar/src/composeCalendar.tsx +++ b/packages/bpk-component-calendar/src/composeCalendar.tsx @@ -85,6 +85,10 @@ export type Props = { preventKeyboardFocus?: boolean; selectionConfiguration?: SelectionConfiguration; gridClassName?: string | null; + /** + * Sets the height of month rows in 'rem' units. If not specified, the default value of `2.75rem` will be used. + */ + customRowHeight?: number; /** * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`. */ @@ -116,6 +120,7 @@ const composeCalendar = ( const BpkCalendar = ({ changeMonthLabel = null, className = null, + customRowHeight, dateModifiers = {}, dateProps = {}, daysOfWeek, @@ -216,6 +221,7 @@ const composeCalendar = ( className={gridClasses.join(' ')} dateProps={dateProps} selectionConfiguration={selectionConfiguration} + customRowHeight={customRowHeight} {...gridProps} /> diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx index b117721da9..293417a578 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList-test.tsx @@ -80,6 +80,22 @@ describe('BpkCalendarScrollGridList', () => { expect(asFragment()).toMatchSnapshot(); }); + it('should render correctly with a custom "customRowHeight" attribute', () => { + const { asFragment } = render( + , + ); + expect(asFragment()).toMatchSnapshot(); + }); + it('should render correctly with a custom date component', () => { const MyCustomDate = (props: any) => { const cx = { diff --git a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts index 545f2fadcd..0139277f5a 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.d.ts @@ -29,6 +29,7 @@ type Props = Partial & { focusedDate?: Date | null; selectionConfiguration?: SelectionConfiguration; className?: string | null; + customRowHeight?: 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 6afdcd4ca2..1c95f64ee0 100644 --- a/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx +++ b/packages/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.tsx @@ -36,16 +36,11 @@ import { getMonthsArray, getMonthItemHeights } from './utils'; const getClassName = cssModules(STYLES); // 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 = 8.125; const COLUMN_COUNT = 7; // Most browsers have by default 16px root font size const DEFAULT_ROOT_FONT_SIZE = 16; -// 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; @@ -60,11 +55,16 @@ type Props = Partial & { focusedDate?: Date | null; selectionConfiguration?: SelectionConfiguration; className?: string | null; + /** + * Sets the height of month rows in 'rem' units. If not specified, the default value of `2.75rem` will be used. + */ + customRowHeight?: number; }; const BpkScrollableCalendarGridList = (props: Props) => { const { className = null, + customRowHeight = 2.75, focusedDate = null, minDate, selectionConfiguration, @@ -75,6 +75,12 @@ const BpkScrollableCalendarGridList = (props: Props) => { const endDate = startOfDay(startOfMonth(rest.maxDate)); const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate); + // Row and month item heights are defined in rem to support text scaling + const rowHeight = customRowHeight; + // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects. + const estimatedMonthItemHeight = + (BASE_MONTH_ITEM_HEIGHT + 5 * rowHeight) * DEFAULT_ROOT_FONT_SIZE; + const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE; @@ -94,7 +100,7 @@ const BpkScrollableCalendarGridList = (props: Props) => { months, rest.weekStartsOn, COLUMN_COUNT, - ROW_HEIGHT * rootFontSize, + rowHeight * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize, ), [rootFontSize, months, rest.weekStartsOn], @@ -111,7 +117,7 @@ const BpkScrollableCalendarGridList = (props: Props) => { typeof document !== 'undefined' ? document.querySelector('html') : {}; const getItemSize = (index: number) => - monthItemHeights[index] || ESTIMATED_MONTH_ITEM_HEIGHT; + monthItemHeights[index] || estimatedMonthItemHeight; const rowRenderer = ({ index, style }: { index: number; style: {} }) => (

@@ -158,7 +164,7 @@ const BpkScrollableCalendarGridList = (props: Props) => { > {({ height, width }: { height: number | string, width: number | string}) => ( @@ -170,7 +176,7 @@ const BpkScrollableCalendarGridList = (props: Props) => { } width={width} height={height} - estimatedItemSize={ESTIMATED_MONTH_ITEM_HEIGHT} + estimatedItemSize={estimatedMonthItemHeight} itemSize={getItemSize} itemCount={months.length} overscanCount={1} 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 99f348a8bd..b33d799fce 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,6 +1261,1299 @@ exports[`BpkCalendarScrollGridList should render correctly with a "dateModifiers `; +exports[`BpkCalendarScrollGridList should render correctly with a custom "customRowHeight" attribute 1`] = ` + +
+
+
+
+
+
+

+ February 2010 +

+
+
+
+ +
+ + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+