[pickers] Apply the layout.tabs class to Tabs slot (@LukasTy) (#1…

…1782) Co-authored-by: Lukas <llukas.tyla@gmail.com>
mui · Jan 22, 2024 · 680e11d · 680e11d
1 parent 3694bcb
commit 680e11d
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
@@ -122,7 +122,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 {}