Skip to content

Commit

Permalink
[pickers] Apply the layout.tabs class to Tabs slot (@LukasTy) (#1…
Browse files Browse the repository at this point in the history
…1782)

Co-authored-by: Lukas <llukas.tyla@gmail.com>
  • Loading branch information
github-actions[bot] and LukasTy authored Jan 22, 2024
1 parent 3694bcb commit 680e11d
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 8 deletions.
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();
Expand All @@ -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"
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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. */
Expand All @@ -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'],
);
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions packages/x-date-pickers/src/internals/models/props/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}

0 comments on commit 680e11d

Please sign in to comment.