feat(react-calendar-compat): changed design for the selected state (#…

…31509) Co-authored-by: Esteban Munoz Facusse <estebanmu@microsoft.com>
microsoft · Jun 4, 2024 · de23634 · de23634
1 parent 52125a2
commit de23634
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 29 deletions.
diff --git a/change/@fluentui-react-calendar-compat-acdf3646-9c24-46d9-85eb-7f68e84c551d.json b/change/@fluentui-react-calendar-compat-acdf3646-9c24-46d9-85eb-7f68e84c551d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(calendar-compat): changed design for the selected state",
+  "packageName": "@fluentui/react-calendar-compat",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-calendar-compat/etc/react-calendar-compat.api.md b/packages/react-components/react-calendar-compat/etc/react-calendar-compat.api.md
@@ -97,6 +97,8 @@ export interface CalendarDayGridStyles {
     dayOutsideBounds?: string;
     dayOutsideNavigatedMonth?: string;
     daySelected?: string;
+    daySingleSelected?: string;
+    dayTodayMarker?: string;
     firstTransitionWeek?: string;
     lastTransitionWeek?: string;
     table?: string;

diff --git a/...omponents/react-calendar-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts b/...omponents/react-calendar-compat/src/components/CalendarDay/useCalendarDayStyles.styles.ts
@@ -48,7 +48,7 @@ const useMonthAndYearStyles = makeStyles({
     alignItems: 'center',
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
-    borderRadius: '2px',
+    borderRadius: tokens.borderRadiusMedium,
     color: tokens.colorNeutralForeground1,
     display: 'inline-block',
     flexGrow: 1,
@@ -95,7 +95,7 @@ const useHeaderIconButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
-    borderRadius: '2px',
+    borderRadius: tokens.borderRadiusMedium,
     color: tokens.colorNeutralForeground3,
     display: 'block',
     fontFamily: 'inherit',

diff --git a/...-components/react-calendar-compat/src/components/CalendarDayGrid/CalendarDayGrid.types.ts b/...-components/react-calendar-compat/src/components/CalendarDayGrid/CalendarDayGrid.types.ts
@@ -234,6 +234,11 @@ export interface CalendarDayGridStyles {
    */
   daySelected?: string;
 
+  /**
+   * The classname applied when a single day is selected
+   */
+  daySingleSelected?: string;
+
   /**
    * The style to apply to row around weeks
    */
@@ -283,4 +288,9 @@ export interface CalendarDayGridStyles {
    * The style applied to the marker on days to mark as important
    */
   dayMarker?: string;
+
+  /**
+   * The classname applied to the day "today" span
+   */
+  dayTodayMarker?: string;
 }
diff --git a/...t-components/react-calendar-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx b/...t-components/react-calendar-compat/src/components/CalendarDayGrid/CalendarGridDayCell.tsx
@@ -215,7 +215,8 @@ export const CalendarGridDayCell: React.FunctionComponent<CalendarGridDayCellPro
       className={mergeClasses(
         classNames.dayCell,
         weekCorners && cornerStyle,
-        day.isSelected && classNames.daySelected,
+        day.isSelected && !day.isSingleSelected && classNames.daySelected,
+        day.isSingleSelected && classNames.daySingleSelected,
         !day.isInBounds && classNames.dayOutsideBounds,
         !day.isInMonth && classNames.dayOutsideNavigatedMonth,
       )}
@@ -247,7 +248,9 @@ export const CalendarGridDayCell: React.FunctionComponent<CalendarGridDayCellPro
         type="button"
         tabIndex={-1}
       >
-        <span aria-hidden="true">{dateTimeFormatter.formatDay(day.originalDate)}</span>
+        <span className={day.isToday ? mergeClasses(classNames.dayTodayMarker) : undefined} aria-hidden="true">
+          {dateTimeFormatter.formatDay(day.originalDate)}
+        </span>
         {day.isMarked && <div aria-hidden="true" className={classNames.dayMarker} />}
       </button>
     </td>

diff --git a/...s/react-calendar-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts b/...s/react-calendar-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.styles.ts
@@ -29,6 +29,7 @@ export const calendarDayGridClassNames: SlotClassNames<CalendarDayGridStyles> =
   table: 'fui-CalendarDayGrid__table',
   dayCell: 'fui-CalendarDayGrid__dayCell',
   daySelected: 'fui-CalendarDayGrid__daySelected',
+  daySingleSelected: 'fui-CalendarDayGrid__daySingleSelected',
   weekRow: 'fui-CalendarDayGrid__weekRow',
   weekDayLabelCell: 'fui-CalendarDayGrid__weekDayLabelCell',
   weekNumberCell: 'fui-CalendarDayGrid__weekNumberCell',
@@ -39,6 +40,7 @@ export const calendarDayGridClassNames: SlotClassNames<CalendarDayGridStyles> =
   firstTransitionWeek: 'fui-CalendarDayGrid__firstTransitionWeek',
   lastTransitionWeek: 'fui-CalendarDayGrid__lastTransitionWeek',
   dayMarker: 'fui-CalendarDayGrid__dayMarker',
+  dayTodayMarker: 'fui-CalendarDayGrid__dayTodayMarker',
 };
 
 /**
@@ -78,12 +80,9 @@ const useDayCellStyles = makeStyles({
     cursor: 'pointer',
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
-    height: '28px',
-    lineHeight: '28px',
     margin: '0',
-    padding: '0',
+    padding: '2px',
     position: 'relative',
-    width: '28px',
     '@media (forced-colors: active)': {
       backgroundColor: 'Window',
       color: 'WindowText',
@@ -93,10 +92,11 @@ const useDayCellStyles = makeStyles({
       color: tokens.colorNeutralForeground1Static,
       backgroundColor: tokens.colorBrandBackgroundInvertedHover,
       '@media (forced-colors: active)': {
-        backgroundColor: 'Window',
-        color: 'WindowText',
         outline: '1px solid Highlight',
         zIndex: 3,
+        [`& .${calendarDayGridClassNames.dayTodayMarker}`]: {
+          backgroundColor: 'Highlight',
+        },
       },
     },
 
@@ -112,8 +112,8 @@ const useDayCellStyles = makeStyles({
   },
   focusIndicator: createFocusOutlineStyle({
     style: {
-      outlineWidth: tokens.strokeWidthThin,
-      ...shorthands.borderWidth(tokens.strokeWidthThin),
+      outlineWidth: tokens.strokeWidthThick,
+      ...shorthands.borderWidth(tokens.strokeWidthThick),
     },
   }),
 });
@@ -147,6 +147,30 @@ const useDaySelectedStyles = makeStyles({
   },
 });
 
+const useDaySingleSelectedStyles = makeStyles({
+  base: {
+    color: tokens.colorNeutralForeground1Static,
+
+    [`& > .${calendarDayGridClassNames.dayMarker}`]: {
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Window',
+      },
+    },
+
+    [`& > .${calendarDayGridClassNames.dayButton}`]: {
+      backgroundColor: tokens.colorBrandBackgroundInvertedSelected,
+      borderRadius: tokens.borderRadiusMedium,
+      ...shorthands.border('1px', 'solid', tokens.colorBrandStroke1),
+      '@media (forced-colors: active)': {
+        backgroundColor: 'Highlight',
+        ...shorthands.borderColor('Highlight'),
+        color: 'HighlightText',
+        forcedColorAdjust: 'none',
+      },
+    },
+  },
+});
+
 const useWeekRowStyles = makeStyles({
   base: {
     animationDuration: DURATION_3,
@@ -220,7 +244,6 @@ const useDayOutsideNavigatedMonthStyles = makeStyles({
 const useDayButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
-    borderRadius: '2px',
     border: 'none',
     color: 'inherit',
     cursor: 'pointer',
@@ -236,23 +259,24 @@ const useDayButtonStyles = makeStyles({
       height: 'inherit',
       lineHeight: 'inherit',
     },
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundInvertedHover,
+      borderRadius: tokens.borderRadiusMedium,
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackgroundInvertedPressed,
+    },
   },
 });
 
 const useDayIsTodayStyles = makeStyles({
   base: {
-    backgroundColor: tokens.colorBrandBackground,
-    borderRadius: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     color: tokens.colorNeutralForegroundOnBrand,
     fontWeight: tokens.fontWeightSemibold,
 
-    '@media (forced-colors: active)': {
-      backgroundColor: 'WindowText',
-      ...shorthands.borderColor('WindowText'),
-      color: 'Window',
-      forcedColorAdjust: 'none',
-    },
-
     [`& > .${calendarDayGridClassNames.dayMarker}`]: {
       backgroundColor: tokens.colorNeutralForegroundOnBrand,
       '@media (forced-colors: active)': {
@@ -262,6 +286,25 @@ const useDayIsTodayStyles = makeStyles({
   },
 });
 
+const useDayTodayMarkerStyles = makeStyles({
+  base: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: tokens.colorBrandBackground,
+    borderRadius: '100%',
+    width: '20px',
+    height: '20px',
+    lineHeight: '20px',
+    '@media (forced-colors: active)': {
+      backgroundColor: 'WindowText',
+      ...shorthands.borderColor('WindowText'),
+      color: 'Window',
+      forcedColorAdjust: 'none',
+    },
+  },
+});
+
 const useFirstTransitionWeekStyles = makeStyles({
   base: {
     height: 0,
@@ -319,16 +362,16 @@ const useDayMarkerStyles = makeStyles({
 const useCornerBorderAndRadiusStyles = makeStyles({
   corners: {
     [`&.${weekCornersClassNames.topRightCornerDate}`]: {
-      borderTopRightRadius: '2px',
+      borderTopRightRadius: tokens.borderRadiusMedium,
     },
     [`&.${weekCornersClassNames.topLeftCornerDate}`]: {
-      borderTopLeftRadius: '2px',
+      borderTopLeftRadius: tokens.borderRadiusMedium,
     },
     [`&.${weekCornersClassNames.bottomRightCornerDate}`]: {
-      borderBottomRightRadius: '2px',
+      borderBottomRightRadius: tokens.borderRadiusMedium,
     },
     [`&.${weekCornersClassNames.bottomLeftCornerDate}`]: {
-      borderBottomLeftRadius: '2px',
+      borderBottomLeftRadius: tokens.borderRadiusMedium,
     },
   },
 });
@@ -343,6 +386,7 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro
   const tableStyles = useTableStyles();
   const dayCellStyles = useDayCellStyles();
   const daySelectedStyles = useDaySelectedStyles();
+  const daySingleSelectedStyles = useDaySingleSelectedStyles();
   const weekRowStyles = useWeekRowStyles();
   const weekDayLabelCellStyles = useWeekDayLabelCellStyles();
   const weekNumberCellStyles = useWeekNumberCellStyles();
@@ -354,6 +398,7 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro
   const lastTransitionWeekStyles = useLastTransitionWeekStyles();
   const dayMarkerStyles = useDayMarkerStyles();
   const cornerBorderAndRadiusStyles = useCornerBorderAndRadiusStyles();
+  const dayTodayMarkerStyles = useDayTodayMarkerStyles();
 
   const { animateBackwards, animationDirection, lightenDaysOutsideNavigatedMonth, showWeekNumbers } = props;
 
@@ -371,6 +416,7 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro
       cornerBorderAndRadiusStyles.corners,
     ),
     daySelected: mergeClasses(calendarDayGridClassNames.daySelected, daySelectedStyles.base),
+    daySingleSelected: mergeClasses(calendarDayGridClassNames.daySingleSelected, daySingleSelectedStyles.base),
     weekRow: mergeClasses(
       calendarDayGridClassNames.weekRow,
       animateBackwards !== undefined && weekRowStyles.base,
@@ -409,5 +455,6 @@ export const useCalendarDayGridStyles_unstable = (props: CalendarDayGridStylePro
         lastTransitionWeekStyles.verticalBackward,
     ),
     dayMarker: mergeClasses(calendarDayGridClassNames.dayMarker, dayMarkerStyles.base),
+    dayTodayMarker: mergeClasses(calendarDayGridClassNames.dayTodayMarker, dayTodayMarkerStyles.base),
   };
 };
diff --git a/...nts/react-calendar-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts b/...nts/react-calendar-compat/src/components/CalendarPicker/useCalendarPickerStyles.styles.ts
@@ -57,6 +57,7 @@ const useCurrentItemButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     ...shorthands.borderStyle('none'),
+    borderRadius: tokens.borderRadiusMedium,
     color: 'inherit',
     flexGrow: 1,
     fontFamily: 'inherit',
@@ -100,7 +101,7 @@ const useNavigationButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     border: 'none',
-    borderRadius: '2px',
+    borderRadius: tokens.borderRadiusMedium,
     color: tokens.colorNeutralForeground1,
     display: 'block',
     fontFamily: 'inherit',
@@ -165,7 +166,7 @@ const useItemButtonStyles = makeStyles({
   base: {
     backgroundColor: tokens.colorTransparentBackground,
     border: 'none',
-    borderRadius: '2px',
+    borderRadius: tokens.borderRadiusMedium,
     color: tokens.colorNeutralForeground3,
     fontFamily: 'inherit',
     fontSize: tokens.fontSizeBase200,

diff --git a/packages/react-components/react-calendar-compat/src/utils/dateGrid/dateGrid.types.ts b/packages/react-components/react-calendar-compat/src/utils/dateGrid/dateGrid.types.ts
@@ -11,8 +11,10 @@ export interface Day {
   isInMonth: boolean;
   /** Is current date is "today" date */
   isToday: boolean;
-  /** Is current date is selected */
+  /** Is current date is selected in range */
   isSelected: boolean;
+  /** Is current date is selected */
+  isSingleSelected: boolean;
   /** Is current date within restriction boundaries */
   isInBounds: boolean;
   /** Is current date marked */

diff --git a/packages/react-components/react-calendar-compat/src/utils/dateGrid/getDayGrid.ts b/packages/react-components/react-calendar-compat/src/utils/dateGrid/getDayGrid.ts
@@ -83,6 +83,7 @@ export const getDayGrid = (options: DayGridOptions): Day[][] => {
         isInMonth: date.getMonth() === navigatedDate.getMonth(),
         isToday: compareDates(todaysDate, date),
         isSelected: isInDateRangeArray(date, selectedDates),
+        isSingleSelected: selectedDates.length === 1 && compareDates(date, selectedDate),
         isInBounds: !isRestrictedDate(date, restrictedDateOptions),
         isMarked: markedDays?.some((markedDay: Date) => compareDates(originalDate, markedDay)) || false,
       };