updating i18n string for relative range option desc

cloudscape-design · Jan 23, 2025 · 58164a3 · 58164a3
1 parent d300d1e
commit 58164a3
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 50 deletions.
diff --git a/pages/date-range-picker/common.ts b/pages/date-range-picker/common.ts
@@ -142,6 +142,7 @@ export const i18nStrings: DateRangePickerProps['i18nStrings'] = {
   relativeModeTitle: 'Relative range',
   absoluteModeTitle: 'Absolute range',
   relativeRangeSelectionHeading: 'Choose a range',
+  relativeRangeSelectionMonthlyDescription: 'Each month counts from the first day to the last day.',
   startMonthLabel: 'Start month',
   endMonthLabel: 'End month',
   startDateLabel: 'Start date',

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -7161,6 +7161,11 @@ Defaults to \`false\`.",
             "optional": true,
             "type": "string",
           },
+          {
+            "name": "relativeRangeSelectionDescription",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "relativeRangeSelectionHeading",
             "optional": true,

diff --git a/src/date-range-picker/calendar/grids/grid.tsx b/src/date-range-picker/calendar/grids/grid.tsx
@@ -75,8 +75,7 @@ export function Grid({
   const baseDateTime = baseDate?.getTime();
   // `baseDateTime` is used as a more stable replacement for baseDate
   const weeks = useMemo<Date[][]>(
-    () => getCalendarMonth(baseDate, { firstDayOfWeek: startOfWeek }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    () => getCalendarMonth(new Date(baseDateTime), { firstDayOfWeek: startOfWeek }),
     [baseDateTime, startOfWeek]
   );
   const i18n = useInternalI18n('date-range-picker');
@@ -204,31 +203,31 @@ export function Grid({
                     : -1; // Can be focused programmatically.
                 }
 
-                const hasTopBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  inSpecifiedRow: boolean
-                ): boolean => !!inSpecifiedRow || isInFirstGrouping(granularity, date);
-
-                const hasBottomBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  inSpecifiedRow: boolean
-                ): boolean => !!inSpecifiedRow || isInLastGrouping(granularity, date);
-                const hasLeftBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  itemIndex: number,
-                  isFirstItemInRange: boolean
-                ): boolean => itemIndex === 0 || isFirstItemInRange || isFirstItem(granularity, date);
-
-                const hasRightBorder = (
-                  granularity: DateRangePickerProps['granularity'],
-                  date: Date,
-                  itemIndex: number,
-                  rowLength: number,
-                  isLastItemInRange: boolean
-                ): boolean => itemIndex === rowLength - 1 || isLastItemInRange || isLastItemInPage(granularity, date);
+                // const hasTopBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   inSpecifiedRow: boolean
+                // ): boolean => !!inSpecifiedRow || isInFirstGrouping(granularity, date);
+
+                // const hasBottomBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   inSpecifiedRow: boolean
+                // ): boolean => !!inSpecifiedRow || isInLastGrouping(granularity, date);
+                // const hasLeftBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   itemIndex: number,
+                //   isFirstItemInRange: boolean
+                // ): boolean => itemIndex === 0 || isFirstItemInRange || isFirstItem(granularity, date);
+
+                // const hasRightBorder = (
+                //   granularity: DateRangePickerProps['granularity'],
+                //   date: Date,
+                //   itemIndex: number,
+                //   rowLength: number,
+                //   isLastItemInRange: boolean
+                // ): boolean => itemIndex === rowLength - 1 || isLastItemInRange || isLastItemInPage(granularity, date);
 
                 return (
                   <GridCell
@@ -246,21 +245,26 @@ export function Grid({
                       [styles['range-end-date']]: isRangeEndDate,
                       [styles['no-range']]: isSelected && onlyOneSelected,
                       [styles['in-range']]: dateIsInRange,
-                      [styles['in-range-border-block-start']]: hasTopBorder(granularity, date, !!inRangeStartRow),
-                      [styles['in-range-border-block-end']]: hasBottomBorder(granularity, date, !!inRangeEndRow),
-                      [styles['in-range-border-inline-start']]: hasLeftBorder(
-                        granularity,
-                        date,
-                        rowItemIndex,
-                        isRangeStartDate
-                      ),
-                      [styles['in-range-border-inline-end']]: hasRightBorder(
-                        granularity,
-                        date,
-                        rowItemIndex,
-                        row.length,
-                        isRangeEndDate
-                      ),
+                      [styles['in-range-border-block-start']]:
+                        !!inRangeStartRow || isInFirstGrouping(granularity, date), // hasTopBorder(granularity, date, !!inRangeStartRow),
+                      [styles['in-range-border-block-end']]: !!inRangeEndRow || isInLastGrouping(granularity, date), //hasBottomBorder(granularity, date, !!inRangeEndRow),
+                      [styles['in-range-border-inline-start']]:
+                        rowItemIndex === 0 || isRangeStartDate || isFirstItem(granularity, date),
+                      // hasLeftBorder(
+                      //   granularity,
+                      //   date,
+                      //   rowItemIndex,
+                      //   isRangeStartDate
+                      // ),
+                      [styles['in-range-border-inline-end']]:
+                        rowItemIndex === row.length - 1 || isRangeEndDate || isLastItemInPage(granularity, date),
+                      // hasRightBorder(
+                      //   granularity,
+                      //   date,
+                      //   rowItemIndex,
+                      //   row.length,
+                      //   isRangeEndDate
+                      // ),
                       [styles.today]: isCurrentDay,
                       [testutilStyles.today]: isCurrentDay,
                       [styles['this-month']]: isCurrentMonth,

diff --git a/src/date-range-picker/interfaces.ts b/src/date-range-picker/interfaces.ts
@@ -9,7 +9,7 @@ import { FormFieldValidationControlProps } from '../internal/context/form-field-
 import { NonCancelableEventHandler } from '../internal/events';
 import { TimeInputProps } from '../time-input/interfaces';
 
-export type Granularity = CalendarProps.Granularity; //'day' | 'month';
+export type Granularity = CalendarProps.Granularity;
 
 export interface DateRangePickerBaseProps {
   /**
@@ -298,6 +298,7 @@ export namespace DateRangePickerProps {
      * Adds `aria-label` to the trigger and dropdown.
      */
     ariaLabel?: string;
+
     /**
      * Adds `aria-labelledby` to the trigger and dropdown.
      */
@@ -331,9 +332,14 @@ export namespace DateRangePickerProps {
      * Heading for the relative range selection area
      * @i18n
      */
-
     relativeRangeSelectionHeading?: string;
 
+    /**
+     * Description for the relative range selection area
+     * @i18n
+     */
+    relativeRangeSelectionMonthlyDescription?: string;
+
     /**
      * Visible label of the Cancel button
      * @i18n

diff --git a/src/date-range-picker/relative-range/index.tsx b/src/date-range-picker/relative-range/index.tsx
@@ -6,14 +6,15 @@ import clsx from 'clsx';
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import InternalBox from '../../box/internal';
+import { CalendarProps } from '../../calendar/interfaces';
 import InternalFormField from '../../form-field/internal';
 import { useInternalI18n } from '../../i18n/context';
 import InternalInput from '../../input/internal';
 import { RadioGroupProps } from '../../radio-group/interfaces';
 import InternalRadioGroup from '../../radio-group/internal';
 import InternalSelect from '../../select/internal';
 import InternalSpaceBetween from '../../space-between/internal';
-import { DateRangePickerProps, Granularity } from '../interfaces';
+import { DateRangePickerProps } from '../interfaces';
 
 import testutilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
@@ -26,7 +27,7 @@ interface RelativeRangePickerProps {
   i18nStrings?: DateRangePickerProps.I18nStrings;
   isSingleGrid: boolean;
   customUnits?: DateRangePickerProps.TimeUnit[];
-  granularity?: Granularity;
+  granularity?: CalendarProps.Granularity;
 }
 
 interface UnitSelectOption {
@@ -126,7 +127,11 @@ export default function RelativeRangePicker({
             label={i18n('i18nStrings.relativeRangeSelectionHeading', i18nStrings?.relativeRangeSelectionHeading)}
             description={
               granularity === 'month' &&
-              'Each month counts from the first day of this month to the last day of this month'
+              granularity === 'month' &&
+              i18n(
+                'i18nStrings.relativeRangeSelectionMonthlyDescription',
+                i18nStrings?.relativeRangeSelectionMonthlyDescription
+              )
             }
           >
             <InternalRadioGroup

diff --git a/src/i18n/messages-types.ts b/src/i18n/messages-types.ts
@@ -165,6 +165,7 @@ export interface I18nFormatArgTypes {
     "i18nStrings.relativeModeTitle": never;
     "i18nStrings.absoluteModeTitle": never;
     "i18nStrings.relativeRangeSelectionHeading": never;
+    "i18nStrings.relativeRangeSelectionMonthlyDescription": never;
     "i18nStrings.cancelButtonLabel": never;
     "i18nStrings.clearButtonLabel": never;
     "i18nStrings.applyButtonLabel": never;

diff --git a/src/i18n/messages/all.en.json b/src/i18n/messages/all.en.json
@@ -129,6 +129,7 @@
     "i18nStrings.relativeModeTitle": "Relative mode",
     "i18nStrings.absoluteModeTitle": "Absolute mode",
     "i18nStrings.relativeRangeSelectionHeading": "Choose a range",
+    "i18nStrings.relativeRangeSelectionMonthlyDescription": "Each month counts from the first day to the last day.",
     "i18nStrings.cancelButtonLabel": "Cancel",
     "i18nStrings.clearButtonLabel": "Clear and dismiss",
     "i18nStrings.applyButtonLabel": "Apply",
@@ -427,4 +428,4 @@
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
     "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
   }
-}
+}
diff --git a/src/test-utils/dom/date-range-picker/index.ts b/src/test-utils/dom/date-range-picker/index.ts
@@ -107,15 +107,15 @@ export class DrpDropdownWrapper extends ComponentWrapper {
   }
 
   /**
-   * Alias for findPreviousButton for compatibility with previous versions
+   * Alias for findPreviousButton for compatibility with previous versions.
    * @deprecated
    */
   findPreviousMonthButton(): ButtonWrapper {
     return this.findComponent(`.${testutilStyles['calendar-prev-month-btn']}`, ButtonWrapper)!;
   }
 
   /**
-   * Alias for findNextButton for compatibility with previous versions
+   * Alias for findNextButton for compatibility with previous versions.
    * @deprecated
    */
   findNextMonthButton(): ButtonWrapper {