customRowHeight

Skyscanner · Nov 6, 2023 · b48ac34 · b48ac34
1 parent fa77fb8
commit b48ac34
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 16 deletions.
diff --git 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),
     }}
-    rowHeight={3}
+    customRowHeight={3}
   />
 );
 

diff --git 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;
-    rowHeight?: number;
+    customRowHeight?: number;
 };
 type InjectedProps = {
     onDateClick: ((date: Date) => void) | null;
@@ -106,7 +106,7 @@ declare const withCalendarState: <P extends object>(Calendar: ComponentType<P>)
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
-        rowHeight?: number;
+        customRowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };
@@ -159,7 +159,7 @@ declare const _default: {
         initiallyFocusedDate: null;
         markToday: boolean;
         markOutsideDays: boolean;
-        rowHeight?: number;
+        customRowHeight?: number;
     };
     contextType?: import("react").Context<any> | undefined;
 };

diff --git 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;
-  rowHeight?: number;
+  customRowHeight?: number;
 };
 
 type InjectedProps = {

diff --git 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;
-    rowHeight?: number;
+    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
@@ -85,7 +85,7 @@ export type Props = {
   preventKeyboardFocus?: boolean;
   selectionConfiguration?: SelectionConfiguration;
   gridClassName?: string | null;
-  rowHeight?: number;
+  customRowHeight?: number;
   /**
    * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
    */
@@ -117,6 +117,7 @@ const composeCalendar = (
   const BpkCalendar = ({
     changeMonthLabel = null,
     className = null,
+    customRowHeight,
     dateModifiers = {},
     dateProps = {},
     daysOfWeek,
@@ -140,7 +141,6 @@ 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}
-          rowHeight={rowHeight}
+          customRowHeight={customRowHeight}
           {...gridProps}
         />
       </div>

diff --git 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 "rowHeight" attribute', () => {
+  it('should render correctly with a custom "customRowHeight" attribute', () => {
     const { asFragment } = render(
       <BpkScrollableCalendarGridList
         minDate={DateUtils.addDays(testDate, -1)}
@@ -90,7 +90,7 @@ describe('BpkCalendarScrollGridList', () => {
         formatDateFull={formatDateFull}
         DateComponent={BpkCalendarScrollDate}
         weekStartsOn={0}
-        rowHeight={3}
+        customRowHeight={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
@@ -29,7 +29,7 @@ type Props = Partial<BpkCalendarGridProps> & {
     focusedDate?: Date | null;
     selectionConfiguration?: SelectionConfiguration;
     className?: string | null;
-    rowHeight?: number;
+    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
@@ -55,15 +55,15 @@ type Props = Partial<BpkCalendarGridProps> & {
   focusedDate?: Date | null;
   selectionConfiguration?: SelectionConfiguration;
   className?: string | null;
-  rowHeight?: number;
+  customRowHeight?: number;
 };
 
 const BpkScrollableCalendarGridList = (props: Props) => {
   const {
     className = null,
+    customRowHeight = 2.75,
     focusedDate = null,
     minDate,
-    rowHeight = 2.75,
     selectionConfiguration,
     ...rest
   } = props;
@@ -73,7 +73,7 @@ const BpkScrollableCalendarGridList = (props: Props) => {
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
 
   // Row and month item heights are defined in rem to support text scaling
-  const ROW_HEIGHT = rowHeight;
+  const ROW_HEIGHT = customRowHeight;
   // 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;

diff --git a/...mponent-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap b/...mponent-scrollable-calendar/src/__snapshots__/BpkScrollableCalendarGridList-test.tsx.snap
@@ -1261,7 +1261,7 @@ exports[`BpkCalendarScrollGridList should render correctly with a "dateModifiers
 </DocumentFragment>
 `;
 
-exports[`BpkCalendarScrollGridList should render correctly with a custom "rowHeight" attribute 1`] = `
+exports[`BpkCalendarScrollGridList should render correctly with a custom "customRowHeight" attribute 1`] = `
 <DocumentFragment>
   <div
     class="bpk-scrollable-calendar-grid-list"