Convert `calendar.module.css` to CSS Modules (#40353)

frontend/src/metabase/admin/datamodel/components/filters/pickers/DatePicker/RangeDatePicker.tsx

@@ -98,7 +98,7 @@ export const BetweenPicker = ({
           onClear={handleEndDateClear}
         />
       </DateContainer>
-      <div className="Calendar--noContext">
+      <div>
         <Calendar
           isRangePicker
           primaryColor={primaryColor}
@@ -106,6 +106,7 @@ export const BetweenPicker = ({
           selected={startValue && moment(startValue)}
           selectedEnd={endValue && moment(endValue)}
           onChangeDate={handleDateClick}
+          noContext
         />
       </div>
     </div>

frontend/src/metabase/admin/datamodel/components/filters/pickers/LegacyDatePicker/DatePicker.jsx

@@ -70,7 +70,7 @@ const MultiDatePicker = ({
         />
       </div>
     </div>
-    <div className="Calendar--noContext">
+    <div>
       <Calendar
         initial={startValue ? moment(startValue) : moment()}
         selected={startValue && moment(startValue)}
@@ -78,6 +78,7 @@ const MultiDatePicker = ({
         onChange={(startValue, endValue) =>
           onFilterChange([op, field, startValue, endValue])
         }
+        noContext
       />
     </div>
   </div>

frontend/src/metabase/components/Calendar/Calendar.module.css

-:global(.Calendar-weeks) {
+.CalendarWeeks {
   padding-bottom: 14px;
 }
 
-:global(.Calendar-week) {
+.CalendarWeek {
   display: flex;
   padding-left: 12px;
   padding-right: 12px;
 }
 
-:global(.Calendar-header) {
+.CalendarHeader {
   padding: 14px;
   margin-bottom: 8px;
 }
 
-:global(.Calendar-header h4) {
+.CalendarHeader h4 {
   font-weight: 700;
 }
 
-:global(.Calendar-day-names) {
+.CalendarDayNames {
   opacity: 0.12;
 }
 
-:global(.Calendar-day),
-:global(.Calendar-day-name) {
+.CalendarDay,
+.CalendarDayName {
   flex: 1;
 }
 
-:global(.Calendar-day) {
+.CalendarDay {
   color: var(--color-text-light);
   position: relative;
   border-radius: 99px;
@@ -36,36 +36,36 @@
   padding: 10px;
 }
 
-:global(.Calendar-day-name) {
+.CalendarDayName {
   cursor: inherit;
   color: inherit !important;
 }
 
-:global(.Calendar-day--this-month) {
+.CalendarDayThisMonth {
   color: currentcolor;
 }
 
-:global(.Calendar--range .Calendar-day--selected) {
+.CalendarRange .CalendarDaySelected {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-:global(.Calendar--range .Calendar-day--selected-end) {
+.CalendarRange .CalendarDaySelectedEnd {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-:global(.Calendar-day--in-range) {
+.CalendarDayInRange {
   border-radius: 0;
   background-color: var(--color-bg-medium);
 }
 
-:global(.Calendar--noContext .Calendar-day) {
+.CalendarNoContext.CalendarDay {
   visibility: hidden;
   pointer-events: none;
 }
 
-:global(.Calendar--noContext .Calendar-day--this-month) {
+.CalendarNoContext.CalendarDayThisMonth {
   visibility: visible;
   pointer-events: all;
 }

frontend/src/metabase/components/Calendar/Calendar.tsx

@@ -10,7 +10,7 @@ import {
 } from "metabase/lib/date-time";
 import { Icon } from "metabase/ui";
 
-import "./Calendar.module.css";
+import CalendarS from "./Calendar.module.css";
 import { CalendarDay, CalendarIconContainer } from "./Calendar.styled";
 
 export type SelectAll = "after" | "before";
@@ -29,6 +29,7 @@ export type CalendarProps = {
   onChangeDate?: (date: string, dateMoment: Moment) => void;
   isRangePicker?: boolean;
   primaryColor?: string;
+  noContext?: boolean;
 };
 
 type State = {
@@ -46,6 +47,7 @@ export default class Calendar extends Component<CalendarProps, State> {
 
   static defaultProps = {
     isRangePicker: true,
+    noContext: false,
   };
 
   UNSAFE_componentWillReceiveProps(nextProps: CalendarProps) {
@@ -118,7 +120,7 @@ export default class Calendar extends Component<CalendarProps, State> {
     return (
       <div
         className={cx(
-          "Calendar-header",
+          CalendarS.CalendarHeader,
           CS.flex,
           CS.alignCenter,
           CS.borderBottom,
@@ -145,11 +147,17 @@ export default class Calendar extends Component<CalendarProps, State> {
     const days = getDayOfWeekOptions();
 
     return (
-      <div className="Calendar-day-names Calendar-week py1">
+      <div
+        className={cx(
+          CalendarS.CalendarDayNames,
+          CalendarS.CalendarWeek,
+          CS.py1,
+        )}
+      >
         {days.map(({ shortName }) => (
           <span
             key={shortName}
-            className="Calendar-day-name text-centered"
+            className={cx(CalendarS.CalendarDayName, CS.textCentered)}
             data-testid="calendar-day-name"
           >
             {shortName}
@@ -186,6 +194,7 @@ export default class Calendar extends Component<CalendarProps, State> {
           primaryColor={this.props.primaryColor}
           selectedEnd={this.props.selectedEnd}
           selectAll={this.props.selectAll}
+          noContext={this.props.noContext}
         />,
       );
       date.add(1, "w");
@@ -194,18 +203,21 @@ export default class Calendar extends Component<CalendarProps, State> {
     }
 
     return (
-      <div className="Calendar-weeks relative" data-testid="calendar-weeks">
+      <div
+        className={cx(CalendarS.CalendarWeeks, CS.relative)}
+        data-testid="calendar-weeks"
+      >
         {weeks}
       </div>
     );
   }
 
-  renderCalender(current?: Moment, side?: "left" | "right") {
+  renderCalendar(current?: Moment, side?: "left" | "right") {
     return (
       <div
         data-testid="calendar"
         className={cx("Calendar", {
-          "Calendar--range":
+          [CalendarS.CalendarRange]:
             (this.props.isRangePicker &&
               this.props.selected &&
               this.props.selectedEnd) ||
@@ -221,7 +233,7 @@ export default class Calendar extends Component<CalendarProps, State> {
 
   render() {
     const { current } = this.state;
-    return this.renderCalender(current);
+    return this.renderCalendar(current);
   }
 }
 
@@ -234,13 +246,21 @@ type WeekProps = {
   isRangePicker?: boolean;
   primaryColor?: string;
   onClickDay: (date: Moment) => void;
+  noContext?: boolean;
 };
 
 class Week extends Component<WeekProps> {
   render() {
     const days = [];
-    let { date, month, selected, selectedEnd, selectAll, isRangePicker } =
-      this.props;
+    let {
+      date,
+      month,
+      selected,
+      selectedEnd,
+      selectAll,
+      isRangePicker,
+      noContext,
+    } = this.props;
 
     for (let i = 0; i < 7; i++) {
       const isSelected =
@@ -266,21 +286,27 @@ class Week extends Component<WeekProps> {
         !isEnd && selected && date.isSame(selected, "day");
       const isSelectedEnd =
         isEnd || (selectedEnd && date.isSame(selectedEnd, "day"));
-      const classes = cx("Calendar-day cursor-pointer text-centered", {
-        "Calendar-day--this-month": date.month() === month.month(),
-        "Calendar-day--selected": isSelectedStart,
-        "Calendar-day--selected-end": isSelectedEnd,
-        "Calendar-day--week-start": i === 0,
-        "Calendar-day--week-end": i === 6,
-        "Calendar-day--in-range":
-          (selectAll && isInRange) ||
-          (!(date.isSame(selected, "day") || date.isSame(selectedEnd, "day")) &&
-            (date.isSame(selected, "day") ||
-              date.isSame(selectedEnd, "day") ||
-              (selectedEnd &&
-                selectedEnd.isAfter(date, "day") &&
-                date.isAfter(selected, "day")))),
-      });
+      const classes = cx(
+        { [CalendarS.CalendarNoContext]: noContext },
+        CalendarS.CalendarDay,
+        CS.cursorPointer,
+        CS.textCentered,
+        {
+          [CalendarS.CalendarDayThisMonth]: date.month() === month.month(),
+          [CalendarS.CalendarDaySelected]: isSelectedStart,
+          [CalendarS.CalendarDaySelectedEnd]: isSelectedEnd,
+          [CalendarS.CalendarDayInRange]:
+            (selectAll && isInRange) ||
+            (!(
+              date.isSame(selected, "day") || date.isSame(selectedEnd, "day")
+            ) &&
+              (date.isSame(selected, "day") ||
+                date.isSame(selectedEnd, "day") ||
+                (selectedEnd &&
+                  selectedEnd.isAfter(date, "day") &&
+                  date.isAfter(selected, "day")))),
+        },
+      );
       days.push(
         <CalendarDay
           key={date.toString()}
@@ -299,7 +325,7 @@ class Week extends Component<WeekProps> {
     }
 
     return (
-      <div className="Calendar-week" key={days[0].toString()}>
+      <div className={CalendarS.CalendarWeek} key={days[0].toString()}>
         {days}
       </div>
     );