[TimePicker] Add Mui-selected class to TimeClock meridiem buttons (…

…#13848)
mui · Jul 16, 2024 · 923de76 · 923de76
1 parent 75b3c0a
commit 923de76
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 29 deletions.
diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/packages/x-date-pickers/src/TimeClock/Clock.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { styled, useThemeProps } from '@mui/material/styles';
+import { styled, useThemeProps, Theme } from '@mui/material/styles';
 import {
   unstable_useEnhancedEffect as useEnhancedEffect,
   unstable_composeClasses as composeClasses,
@@ -16,6 +16,7 @@ import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from './shared';
 import { PickerValidDate, TimeView } from '../models';
 import { ClockClasses, getClockUtilityClass } from './clockClasses';
 import { formatMeridiem } from '../internals/utils/date-utils';
+import { Meridiem } from '../internals/utils/time-utils';
 
 export interface ClockProps<TDate extends PickerValidDate>
   extends ReturnType<typeof useMeridiemMode> {
@@ -47,15 +48,15 @@ export interface ClockProps<TDate extends PickerValidDate>
 }
 
 const useUtilityClasses = (ownerState: ClockProps<any>) => {
-  const { classes } = ownerState;
+  const { classes, meridiemMode } = ownerState;
   const slots = {
     root: ['root'],
     clock: ['clock'],
     wrapper: ['wrapper'],
     squareMask: ['squareMask'],
     pin: ['pin'],
-    amButton: ['amButton'],
-    pmButton: ['pmButton'],
+    amButton: ['amButton', meridiemMode === 'am' && 'selected'],
+    pmButton: ['pmButton', meridiemMode === 'pm' && 'selected'],
     meridiemText: ['meridiemText'],
   };
 
@@ -145,21 +146,15 @@ const ClockPin = styled('div', {
   transform: 'translate(-50%, -50%)',
 }));
 
-const ClockAmButton = styled(IconButton, {
-  name: 'MuiClock',
-  slot: 'AmButton',
-  overridesResolver: (_, styles) => styles.amButton,
-})<{ ownerState: ClockProps<any> }>(({ theme }) => ({
+const meridiemButtonCommonStyles = (theme: Theme, meridiemMode: Meridiem) => ({
   zIndex: 1,
-  position: 'absolute',
   bottom: 8,
-  left: 8,
   paddingLeft: 4,
   paddingRight: 4,
   width: CLOCK_HOUR_WIDTH,
   variants: [
     {
-      props: { meridiemMode: 'am' },
+      props: { meridiemMode },
       style: {
         backgroundColor: (theme.vars || theme).palette.primary.main,
         color: (theme.vars || theme).palette.primary.contrastText,
@@ -169,32 +164,28 @@ const ClockAmButton = styled(IconButton, {
       },
     },
   ],
+});
+
+const ClockAmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'AmButton',
+  overridesResolver: (_, styles) => styles.amButton,
+})<{ ownerState: ClockProps<any> }>(({ theme }) => ({
+  ...meridiemButtonCommonStyles(theme, 'am'),
+  // keeping it here to make TS happy
+  position: 'absolute',
+  left: 8,
 }));
 
 const ClockPmButton = styled(IconButton, {
   name: 'MuiClock',
   slot: 'PmButton',
   overridesResolver: (_, styles) => styles.pmButton,
 })<{ ownerState: ClockProps<any> }>(({ theme }) => ({
-  zIndex: 1,
+  ...meridiemButtonCommonStyles(theme, 'pm'),
+  // keeping it here to make TS happy
   position: 'absolute',
-  bottom: 8,
   right: 8,
-  paddingLeft: 4,
-  paddingRight: 4,
-  width: CLOCK_HOUR_WIDTH,
-  variants: [
-    {
-      props: { meridiemMode: 'pm' },
-      style: {
-        backgroundColor: (theme.vars || theme).palette.primary.main,
-        color: (theme.vars || theme).palette.primary.contrastText,
-        '&:hover': {
-          backgroundColor: (theme.vars || theme).palette.primary.light,
-        },
-      },
-    },
-  ],
 }));
 
 const ClockMeridiemText = styled(Typography, {

diff --git a/packages/x-date-pickers/src/TimeClock/clockClasses.ts b/packages/x-date-pickers/src/TimeClock/clockClasses.ts
@@ -20,6 +20,8 @@ export interface ClockClasses {
   pmButton: string;
   /** Styles applied to the meridiem typography element. */
   meridiemText: string;
+  /** Styles applied to the selected meridiem button element */
+  selected: string;
 }
 
 export type ClockClassKey = keyof ClockClasses;
@@ -37,4 +39,5 @@ export const clockClasses: ClockClasses = generateUtilityClasses('MuiClock', [
   'amButton',
   'pmButton',
   'meridiemText',
+  'selected',
 ]);