[pickers] Apply the layout.tabs class to Tabs slot (mui#11781)

thomasmoon · Sep 6, 2024 · 57d56ce · 57d56ce
1 parent fb739f9
commit 57d56ce
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx b/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import Tab from '@mui/material/Tab';
 import Tabs, { tabsClasses } from '@mui/material/Tabs';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
 import { TimeIcon, DateRangeIcon } from '../icons';
 import { DateOrTimeViewWithMeridiem } from '../internals/models';
 import { useLocaleText } from '../internals/hooks/useUtils';
@@ -101,6 +102,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
  timeIcon = <TimeIcon />,
  view,
  hidden = typeof window === 'undefined' || window.innerHeight < 667,
+ className,
  } = props;
 
  const localeText = useLocaleText();
@@ -120,7 +122,7 @@ const DateTimePickerTabs = function DateTimePickerTabs(inProps: DateTimePickerTa
  variant="fullWidth"
  value={viewToTab(view)}
  onChange={handleChange}
- className={classes.root}
+ className={clsx(className, classes.root)}
  >
  <Tab
  value="date"
@@ -145,6 +147,7 @@ DateTimePickerTabs.propTypes = {
  * Override or extend the styles applied to the component.
  */
  classes: PropTypes.object,
+ className: PropTypes.string,
  /**
  * Date tab icon.
  * @default DateRange

diff --git a/packages/x-date-pickers/src/PickersLayout/pickersLayoutClasses.ts b/packages/x-date-pickers/src/PickersLayout/pickersLayoutClasses.ts
@@ -1,7 +1,5 @@
-import {
- unstable_generateUtilityClass as generateUtilityClass,
- unstable_generateUtilityClasses as generateUtilityClasses,
-} from '@mui/utils';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 
 export interface PickersLayoutClasses {
  /** Styles applied to the root element. */
@@ -28,5 +26,5 @@ export function getPickersLayoutUtilityClass(slot: string) {
 
 export const pickersLayoutClasses = generateUtilityClasses<PickersLayoutClassKey>(
  'MuiPickersLayout',
- ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'shortcuts'],
+ ['root', 'landscape', 'contentWrapper', 'toolbar', 'actionBar', 'tabs', 'shortcuts'],
 );
diff --git a/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx b/packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx
@@ -116,7 +116,9 @@ const usePickerLayout = <TValue, TDate, TView extends DateOrTimeViewWithMeridiem
 
  const Tabs = slots?.tabs;
  const tabs =
- view && Tabs ? <Tabs view={view} onViewChange={onViewChange} {...slotProps?.tabs} /> : null;
+ view && Tabs ? (
+ <Tabs view={view} onViewChange={onViewChange} className={classes.tabs} {...slotProps?.tabs} />
+ ) : null;
 
  // Shortcuts
 

diff --git a/packages/x-date-pickers/src/internals/models/props/tabs.ts b/packages/x-date-pickers/src/internals/models/props/tabs.ts
@@ -11,6 +11,7 @@ export interface BaseTabsProps<TView extends DateOrTimeViewWithMeridiem> {
  * @param {TView} view The view to open
  */
  onViewChange: (view: TView) => void;
+ className?: string;
 }
 
 export interface ExportedBaseTabsProps {}