DatePicker: Migrate Emotion styles to SCSS Modules

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Breaking Changes
 
 -   Components that compose Emotion style fragments with `cx()` should pass source-order-dependent fragments in a single `css()` call. Passing separate fragments can change override order after the following components stopped rendering styles through Emotion:
+    -   `DatePicker` ([#84724](https://github.com/WordPress/gutenberg/pull/84724)).
     -   `Menu` ([#84706](https://github.com/WordPress/gutenberg/pull/84706))
     -   `Navigator` ([#84565](https://github.com/WordPress/gutenberg/pull/84565))
     -   `UnitControl` ([#84561](https://github.com/WordPress/gutenberg/pull/84561))
@@ -31,6 +32,7 @@
 ### Bug Fixes
 
 -   `BorderBoxControl`: Unpack multi-value CSS box shorthand strings (such as `"0 0 0 2px"`) into individual side widths when splitting borders ([#84826](https://github.com/WordPress/gutenberg/pull/84826)).
+-   `DatePicker`: Keep month navigation in a grid in iframe documents ([#84724](https://github.com/WordPress/gutenberg/pull/84724)).
 -   `PaletteEdit`: Name picker dialogs and add screen-reader-only dismissal controls while preserving live edits ([#84333](https://github.com/WordPress/gutenberg/pull/84333)).
 -   `Grid`: Fix the `bottomLeft` alignment, which resolved to the top right corner instead of the bottom left one ([#82641](https://github.com/WordPress/gutenberg/pull/82641)).
 -   Keep JavaScript color fallbacks in sync with the generated design tokens. ([#84569](https://github.com/WordPress/gutenberg/pull/84569))

packages/components/src/date-time/date-picker/index.tsx

@@ -9,23 +9,18 @@ import {
 	addWeeks,
 	isSameMonth,
 } from 'date-fns';
-import type { KeyboardEventHandler } from 'react';
+import type { CSSProperties, KeyboardEventHandler } from 'react';
+import clsx from 'clsx';
 import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { arrowLeft, arrowRight } from '@wordpress/icons';
 import { dateI18n, date as formatDate, getSettings } from '@wordpress/date';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { useLilius } from './use-lilius';
 import type { DatePickerProps } from '../types';
-import {
-	Wrapper,
-	Navigator,
-	ViewPreviousMonthButton,
-	ViewNextMonthButton,
-	NavigatorHeading,
-	Calendar,
-	DayOfWeek,
-	DayButton,
-} from './styles';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { Heading } from '../../heading';
+import styles from './style.module.scss';
 import {
 	inputToDate,
 	setInConfiguredTimezone,
@@ -98,13 +93,14 @@ export function DatePicker( {
 	}
 
 	return (
-		<Wrapper
-			className="components-datetime__date"
+		<div
+			className={ clsx( 'components-datetime__date', styles.wrapper ) }
 			role="application"
 			aria-label={ __( 'Calendar' ) }
 		>
-			<Navigator>
-				<ViewPreviousMonthButton
+			<HStack className={ styles.navigator }>
+				<Button
+					className={ styles[ 'previous-month' ] }
 					icon={ isRTL() ? arrowRight : arrowLeft }
 					variant="tertiary"
 					aria-label={ __( 'View previous month' ) }
@@ -122,7 +118,7 @@ export function DatePicker( {
 					} }
 					size="compact"
 				/>
-				<NavigatorHeading level={ 3 }>
+				<Heading level={ 3 } className={ styles.heading }>
 					<strong>
 						{ dateI18n(
 							'F',
@@ -131,8 +127,9 @@ export function DatePicker( {
 						) }
 					</strong>{ ' ' }
 					{ dateI18n( 'Y', viewing, -viewing.getTimezoneOffset() ) }
-				</NavigatorHeading>
-				<ViewNextMonthButton
+				</Heading>
+				<Button
+					className={ styles[ 'next-month' ] }
 					icon={ isRTL() ? arrowLeft : arrowRight }
 					variant="tertiary"
 					aria-label={ __( 'View next month' ) }
@@ -150,15 +147,19 @@ export function DatePicker( {
 					} }
 					size="compact"
 				/>
-			</Navigator>
-			<Calendar
+			</HStack>
+			<div
+				className={ styles.calendar }
 				onFocus={ () => setIsFocusWithinCalendar( true ) }
 				onBlur={ () => setIsFocusWithinCalendar( false ) }
 			>
 				{ calendar[ 0 ][ 0 ].map( ( day ) => (
-					<DayOfWeek key={ day.toString() }>
+					<div
+						className={ styles[ 'day-of-week' ] }
+						key={ day.toString() }
+					>
 						{ dateI18n( 'D', day, -day.getTimezoneOffset() ) }
-					</DayOfWeek>
+					</div>
 				) ) }
 				{ calendar[ 0 ].map( ( week ) =>
 					week.map( ( day, index ) => {
@@ -273,8 +274,8 @@ export function DatePicker( {
 						);
 					} )
 				) }
-			</Calendar>
-		</Wrapper>
+			</div>
+		</div>
 	);
 }
 
@@ -317,22 +318,33 @@ function Day( {
 	}, [ isFocusable ] );
 
 	return (
-		<DayButton
+		// Invalid dates intentionally cannot receive focus or be selected.
+		// eslint-disable-next-line @wordpress/components-no-unsafe-button-disabled
+		<Button
 			__next40pxDefaultSize
 			ref={ ref }
-			className="components-datetime__date__day" // Unused, for backwards compatibility.
+			className={ clsx(
+				'components-datetime__date__day', // Unused, for backwards compatibility.
+				styles.day,
+				{
+					[ styles[ 'is-selected' ] ]: isSelected,
+					[ styles[ 'is-today' ] ]: ! isSelected && isToday,
+					[ styles[ 'has-events' ] ]: numEvents > 0,
+				}
+			) }
+			style={
+				{
+					'--_wp-components-date-picker-column': column,
+				} as CSSProperties
+			}
 			disabled={ isInvalid }
 			tabIndex={ isFocusable ? 0 : -1 }
 			aria-label={ getDayLabel( day, isSelected, isToday, numEvents ) }
-			column={ column }
-			isSelected={ isSelected }
-			isToday={ isToday }
-			hasEvents={ numEvents > 0 }
 			onClick={ onClick }
 			onKeyDown={ onKeyDown }
 		>
 			{ dateI18n( 'j', day, -day.getTimezoneOffset() ) }
-		</DayButton>
+		</Button>
 	);
 }
 

packages/components/src/date-time/date-picker/style.module.scss

@@ -0,0 +1,119 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../../utils/theme-variables" as *;
+
+.wrapper {
+	box-sizing: border-box;
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+}
+
+.navigator {
+	grid-template-columns: 0.5fr repeat(5, 1fr) 0.5fr;
+	justify-items: center;
+	margin-bottom: $grid-unit-20;
+}
+
+.navigator.navigator {
+	// Keep the calendar grid over HStack's Flex display in either style order.
+	display: grid;
+}
+
+.previous-month {
+	grid-column: 1 / 2;
+}
+
+.next-month {
+	grid-column: 7 / 8;
+}
+
+.heading {
+	grid-column: 2 / 7;
+
+	strong {
+		font-weight: 600;
+	}
+}
+
+.heading.heading {
+	// Preserve the existing override of Heading's typography.
+	font-size: $font-size-medium;
+	font-weight: 400;
+}
+
+.calendar {
+	column-gap: $grid-unit-10;
+	display: grid;
+	grid-template-columns: 0.5fr repeat(5, 1fr) 0.5fr;
+	justify-items: center;
+	row-gap: $grid-unit-10;
+}
+
+.day-of-week {
+	color: $components-color-gray-700;
+	font-size: $font-size-medium;
+	line-height: 1.4;
+}
+
+.day {
+	grid-column: var(--_wp-components-date-picker-column);
+	position: relative;
+	justify-content: center;
+	padding: 0;
+
+	&:where(:disabled) {
+		pointer-events: none;
+	}
+
+	&:where(.has-events)::before {
+		border: 2px solid $components-color-accent;
+		border-radius: $radius-round;
+		content: " ";
+		/* stylelint-disable-next-line logical-css/require-logical-properties -- Preserve the physical center and translate offset in both directions. */
+		left: 50%;
+		position: absolute;
+		transform: translate(-50%, 9px);
+	}
+
+	&:where(.has-events.is-selected)::before {
+		border-color: $components-color-accent-inverted;
+	}
+}
+
+.day.day.day {
+	// Preserve the original specificity over Button and wp-admin styles.
+	border-radius: $radius-round;
+	height: 28px;
+	width: 28px;
+	font-weight: 400;
+
+	&:where(.is-selected) {
+		background: $components-color-accent;
+
+		&,
+		&:hover:not(:disabled, [aria-disabled="true"]) {
+			color: $components-color-accent-inverted;
+		}
+
+		&:focus:not(:disabled) {
+			border: 1.5px solid currentColor;
+		}
+
+		// Highlight the selected day for high-contrast mode.
+		&::after {
+			content: "";
+			position: absolute;
+			pointer-events: none;
+			inset: 0;
+			border-radius: inherit;
+			border: 1px solid transparent;
+		}
+	}
+
+	&:where(.is-today) {
+		background: $components-color-gray-200;
+	}
+}