From 57de73eec45e1547e29c8d9b753cfed547696a54 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Thu, 6 Jan 2022 06:04:11 +0100 Subject: [PATCH 1/7] [docs] Codemod doc for overriding styles using tss (#30499) --- .../pages/guides/migration-v4/migration-v4.md | 46 ++++++++++++++++--- 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 8b70f27940f49e..d6e6bdfdb4a0ca 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -2920,12 +2920,46 @@ and [an explicit name for the stylesheet](https://github.com/garronej/tss-react# export default MyCustomButton; ``` -> **Note:** `tss-react` is **not maintained** by MUI. -> If you have any question about how to setup SSR (Next.js) or if you are wondering -> how to customize the `theme` object please refer to `tss-react`'s documentation, -> the [Mui integration section](https://github.com/garronej/tss-react#mui-integration) in particular. -> You can also [submit an issue](https://github.com/garronej/tss-react/issues/new) for any bug or -> feature request and [start a discussion](https://github.com/garronej/tss-react/discussions) if you need help. +#### Overriding styles - `classes` prop + +[Documentation of the feature in v4](https://v4.mui.com/styles/advanced/#makestyles) - [Equivalent in `tss-react`](https://v4.mui.com/styles/advanced/#makestyles) + +```diff +-import { makeStyles } from '@material-ui/core/styles'; ++import { makeStyles } from 'tss-react/mui'; ++import { useMergedClasses } from 'tss-react'; + +-const useStyles = makeStyles({ ++const useStyles = makeStyles()({ + root: {}, // a style rule + label: {}, // a nested style rule +}); + +function Nested(props) { +- const classes = useStyles(props); ++ let { classes } = useStyles(); ++ classes = useMergedClasses(classes, props.classes); + + return ( + + ); +} + +function Parent() { + return +} +``` + +**Note:** `tss-react` is **not maintained** by MUI. +If you have any question about how to setup SSR (Next.js) or if you are wondering +how to customize the `theme` object please refer to `tss-react`'s documentation, +the [Mui integration section](https://github.com/garronej/tss-react#mui-integration) in particular. +You can also [submit an issue](https://github.com/garronej/tss-react/issues/new) for any bug or +feature request and [start a discussion](https://github.com/garronej/tss-react/discussions) if you need help. šŸ’” Once you migrate all of the styling, remove unnecessary `@mui/styles` by: From bf85575caa6631bbce93df5c3805c79cebcc4353 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 7 Jan 2022 13:40:24 +0700 Subject: [PATCH 2/7] [Joy] Add functional `Switch` component (#30487) --- docs/pages/experiments/joy/switch.tsx | 138 +++++++++ packages/mui-joy/src/Switch/Switch.spec.tsx | 42 +++ packages/mui-joy/src/Switch/Switch.test.js | 98 ++++++ packages/mui-joy/src/Switch/Switch.tsx | 280 ++++++++++++++++++ packages/mui-joy/src/Switch/SwitchProps.ts | 54 ++++ packages/mui-joy/src/Switch/index.ts | 4 + packages/mui-joy/src/Switch/switchClasses.ts | 63 ++++ packages/mui-joy/src/index.ts | 3 + packages/mui-joy/src/styles/components.d.ts | 10 +- .../src/cssVars/createGetThemeVar.ts | 5 +- .../src/styleFunctionSx/styleFunctionSx.d.ts | 1 + .../fixtures/SwitchJoy/SwitchJoy.js | 19 ++ 12 files changed, 712 insertions(+), 5 deletions(-) create mode 100644 docs/pages/experiments/joy/switch.tsx create mode 100644 packages/mui-joy/src/Switch/Switch.spec.tsx create mode 100644 packages/mui-joy/src/Switch/Switch.test.js create mode 100644 packages/mui-joy/src/Switch/Switch.tsx create mode 100644 packages/mui-joy/src/Switch/SwitchProps.ts create mode 100644 packages/mui-joy/src/Switch/index.ts create mode 100644 packages/mui-joy/src/Switch/switchClasses.ts create mode 100644 test/regressions/fixtures/SwitchJoy/SwitchJoy.js diff --git a/docs/pages/experiments/joy/switch.tsx b/docs/pages/experiments/joy/switch.tsx new file mode 100644 index 00000000000000..49e7a349fb18e2 --- /dev/null +++ b/docs/pages/experiments/joy/switch.tsx @@ -0,0 +1,138 @@ +import * as React from 'react'; +// @ts-ignore +import { jsx as _jsx } from 'react/jsx-runtime'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Switch from '@mui/joy/Switch'; +import { + CssVarsProvider, + styled, + useColorScheme, + ColorPaletteProp, + TypographySystem, + FontSize, +} from '@mui/joy/styles'; + +export const SvgIcon = styled('svg', { + shouldForwardProp: (prop) => prop !== 'fontSize' && prop !== 'sx', +})<{ + fontSize: keyof FontSize | 'inherit'; +}>(({ theme, fontSize }) => ({ + userSelect: 'none', + width: '1em', + height: '1em', + display: 'inline-block', + fill: 'currentColor', + flexShrink: 0, + ...(fontSize && { + fontSize: fontSize === 'inherit' ? 'inherit' : theme.vars.fontSize[fontSize], + }), +})); + +function createSvgIcon(path: any, displayName: any, initialProps?: any) { + const Component = (props: any, ref: any) => + ( + + {path} + + ) as unknown as typeof SvgIcon; + + // @ts-ignore + return React.memo(React.forwardRef(Component)); +} + +const Typography = styled('p', { + shouldForwardProp: (prop) => prop !== 'color' && prop !== 'level' && prop !== 'sx', +})<{ color?: ColorPaletteProp; level?: keyof TypographySystem }>( + ({ theme, level = 'body1', color }) => [ + { margin: 0 }, + theme.typography[level], + color && { color: `var(--joy-palette-${color}-textColor)` }, + ], +); + +export const Moon = createSvgIcon( + _jsx('path', { + d: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z', + }), + 'DarkMode', +); + +export const Sun = createSvgIcon( + _jsx('path', { + d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z', + }), + 'LightMode', +); + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +const props = { + size: ['sm', 'md', 'lg'], + color: ['primary', 'danger', 'info', 'success', 'warning'], +} as const; + +export default function JoySwitch() { + return ( + + + + + + + {Object.entries(props).map(([propName, propValue]) => ( + + {propName} + {propValue.map((value) => ( + + + {value && ( + + {value} + + )} + + ))} + + ))} + + + + ); +} diff --git a/packages/mui-joy/src/Switch/Switch.spec.tsx b/packages/mui-joy/src/Switch/Switch.spec.tsx new file mode 100644 index 00000000000000..131bd1329907a3 --- /dev/null +++ b/packages/mui-joy/src/Switch/Switch.spec.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; +import Switch from '@mui/joy/Switch'; + +; + +; + +; + +// common HTML attributes + {}} />; + +; + +; + + { + const checked = event.target.checked; + }} +/>; + +; +; +; +; +; +// @ts-expect-error there is no neutral switch +; + +; +; +; + +; diff --git a/packages/mui-joy/src/Switch/Switch.test.js b/packages/mui-joy/src/Switch/Switch.test.js new file mode 100644 index 00000000000000..53478b34da225c --- /dev/null +++ b/packages/mui-joy/src/Switch/Switch.test.js @@ -0,0 +1,98 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { describeConformance, act, createRenderer, fireEvent, screen } from 'test/utils'; +import Switch, { switchClasses as classes } from '@mui/joy/Switch'; +import { ThemeProvider } from '@mui/joy/styles'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes, + render, + ThemeProvider, + muiName: 'MuiSwitch', + testDeepOverrides: [ + { slotName: 'track', slotClassName: classes.track }, + { slotName: 'input', slotClassName: classes.input }, + ], + refInstanceof: window.HTMLSpanElement, + skip: [ + 'componentProp', + 'componentsProp', + 'classesRoot', + 'propsSpread', + 'themeDefaultProps', + 'themeVariants', + ], + })); + + it('should pass componentProps down to slots', () => { + const { + container: { firstChild: root }, + } = render( + , + ); + + expect(screen.getByTestId('root-switch')).toBeVisible(); + expect(root.childNodes[0]).to.have.class(/custom-(thumb|track|input)/); + expect(root.childNodes[1]).to.have.class(/custom-(thumb|track|input)/); + expect(root.childNodes[2]).to.have.class(/custom-(thumb|track|input)/); + }); + + it('should have the classes required for Switch', () => { + expect(classes).to.include.all.keys(['root', 'checked', 'disabled']); + }); + + it('should render the track as the first child of the Switch', () => { + const { + container: { firstChild: root }, + } = render(); + + expect(root.childNodes[0]).to.have.property('tagName', 'SPAN'); + expect(root.childNodes[0]).to.have.class(classes.track); + }); + + it('renders a `role="checkbox"` with the Unchecked state by default', () => { + const { getByRole } = render(); + + expect(getByRole('checkbox')).to.have.property('checked', false); + }); + + it('renders a checkbox with the Checked state when checked', () => { + const { getByRole } = render(); + + expect(getByRole('checkbox')).to.have.property('checked', true); + }); + + it('the switch can be disabled', () => { + const { getByRole } = render(); + + expect(getByRole('checkbox')).to.have.property('disabled', true); + }); + + it('the switch can be readonly', () => { + const { getByRole } = render(); + + expect(getByRole('checkbox')).to.have.property('readOnly', true); + }); + + it('the Checked state changes after change events', () => { + const { getByRole } = render(); + + // how a user would trigger it + act(() => { + getByRole('checkbox').click(); + fireEvent.change(getByRole('checkbox'), { target: { checked: '' } }); + }); + + expect(getByRole('checkbox')).to.have.property('checked', false); + }); +}); diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx new file mode 100644 index 00000000000000..a0b0b09756d1f5 --- /dev/null +++ b/packages/mui-joy/src/Switch/Switch.tsx @@ -0,0 +1,280 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { unstable_composeClasses as composeClasses } from '@mui/base'; +import { useSwitch } from '@mui/base/SwitchUnstyled'; +import { styled } from '../styles'; +import switchClasses, { getSwitchUtilityClass } from './switchClasses'; +import { SwitchProps } from './SwitchProps'; + +const useUtilityClasses = (ownerState: SwitchProps & { focusVisible: boolean }) => { + const { classes, checked, disabled, focusVisible, readOnly } = ownerState; + + const slots = { + root: [ + 'root', + checked && 'checked', + disabled && 'disabled', + focusVisible && 'focusVisible', + readOnly && 'readOnly', + ], + thumb: ['thumb', checked && 'checked'], + track: ['track', checked && 'checked'], + input: ['input'], + }; + + return composeClasses(slots, getSwitchUtilityClass, classes); +}; + +const SwitchRoot = styled('span', { + name: 'MuiSwitch', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})<{ ownerState: SwitchProps }>(({ theme, ownerState }) => { + return { + '--Switch-track-radius': theme.vars.radius.lg, + '--Switch-track-width': '48px', + '--Switch-track-height': '24px', + '--Switch-thumb-size': '16px', + ...(ownerState.size === 'sm' && { + '--Switch-track-width': '40px', + '--Switch-track-height': '20px', + '--Switch-thumb-size': '12px', + }), + ...(ownerState.size === 'lg' && { + '--Switch-track-width': '64px', + '--Switch-track-height': '32px', + '--Switch-thumb-size': '24px', + }), + '--Switch-thumb-radius': 'calc(var(--Switch-track-radius) - 2px)', + '--Switch-thumb-width': 'var(--Switch-thumb-size)', + '--Switch-thumb-offset': + 'max((var(--Switch-track-height) - var(--Switch-thumb-size)) / 2, 0px)', + display: 'inline-block', + width: 'var(--Switch-track-width)', // should have the same width as track because flex parent can stretch SwitchRoot. + borderRadius: 'var(--Switch-track-radius)', + position: 'relative', + padding: + 'calc((var(--Switch-thumb-size) / 2) - (var(--Switch-track-height) / 2)) calc(-1 * var(--Switch-thumb-offset))', + color: theme.vars.palette.neutral.containedBg, + '&:hover': { + color: theme.vars.palette.neutral.containedBg, + }, + [`&.${switchClasses.checked}`]: { + color: theme.vars.palette[ownerState.color!].containedBg, + '&:hover': { + color: theme.vars.palette[ownerState.color!].containedHoverBg, + }, + }, + [`&.${switchClasses.disabled}`]: { + pointerEvents: 'none', + cursor: 'default', + opacity: 0.6, + }, + [`&.${switchClasses.focusVisible}`]: theme.focus.default, + }; +}); + +const SwitchInput = styled('input', { + name: 'MuiSwitch', + slot: 'Input', + overridesResolver: (props, styles) => styles.input, +})<{ ownerState: SwitchProps }>(() => ({ + margin: 0, + height: '100%', + width: '100%', + opacity: 0, + position: 'absolute', + top: 0, + left: 0, + bottom: 0, + right: 0, + cursor: 'pointer', +})); + +const SwitchTrack = styled('span', { + name: 'MuiSwitch', + slot: 'Track', + overridesResolver: (props, styles) => styles.track, +})<{ ownerState: SwitchProps & { focusVisible: boolean } }>(() => ({ + position: 'relative', + color: 'inherit', + height: 'var(--Switch-track-height)', + width: 'var(--Switch-track-width)', + display: 'block', + backgroundColor: 'currentColor', + borderRadius: 'var(--Switch-track-radius)', +})); + +const SwitchThumb = styled('span', { + name: 'MuiSwitch', + slot: 'Thumb', + overridesResolver: (props, styles) => styles.thumb, +})<{ ownerState: SwitchProps }>(() => ({ + transition: 'left 0.2s', + position: 'absolute', + top: '50%', + left: 'calc(50% - var(--Switch-track-width) / 2 + var(--Switch-thumb-width) / 2 + var(--Switch-thumb-offset))', + transform: 'translate(-50%, -50%)', + width: 'var(--Switch-thumb-width)', + height: 'var(--Switch-thumb-size)', + borderRadius: 'var(--Switch-thumb-radius)', + backgroundColor: '#fff', + [`&.${switchClasses.checked}`]: { + left: 'calc(50% + var(--Switch-track-width) / 2 - var(--Switch-thumb-width) / 2 - var(--Switch-thumb-offset))', + }, +})); + +const Switch = React.forwardRef(function Switch(inProps, ref) { + const props = inProps; + const { + checked: checkedProp, + className, + component, + componentsProps = {}, + defaultChecked, + disabled: disabledProp, + onBlur, + onChange, + onFocus, + onFocusVisible, + readOnly: readOnlyProp, + required, + color = 'primary', + size, + ...otherProps + } = props; + + const useSwitchProps = { + checked: checkedProp, + defaultChecked, + disabled: disabledProp, + onBlur, + onChange, + onFocus, + onFocusVisible, + readOnly: readOnlyProp, + }; + + const { getInputProps, checked, disabled, focusVisible, readOnly } = useSwitch(useSwitchProps); + + const ownerState = { + ...props, + checked, + disabled, + focusVisible, + readOnly, + color, + size, + }; + + const classes = useUtilityClasses(ownerState); + + return ( + + + + + + ); +}); + +Switch.propTypes /* remove-proptypes */ = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * If `true`, the component is checked. + */ + checked: PropTypes.bool, + /** + * @ignore + */ + children: PropTypes.node, + /** + * Class name applied to the root element. + */ + className: PropTypes.string, + /** + * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' + */ + color: PropTypes.oneOf(['danger', 'info', 'primary', 'success', 'warning']), + /** + * The component used for the Root slot. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, + /** + * The props used for each slot inside the Switch. + * @default {} + */ + componentsProps: PropTypes.object, + /** + * The default checked state. Use when the component is not controlled. + */ + defaultChecked: PropTypes.bool, + /** + * If `true`, the component is disabled. + */ + disabled: PropTypes.bool, + /** + * @ignore + */ + id: PropTypes.string, + /** + * @ignore + */ + onBlur: PropTypes.func, + /** + * Callback fired when the state is changed. + * + * @param {React.ChangeEvent} event The event source of the callback. + * You can pull out the new value by accessing `event.target.value` (string). + * You can pull out the new checked state by accessing `event.target.checked` (boolean). + */ + onChange: PropTypes.func, + /** + * @ignore + */ + onFocus: PropTypes.func, + /** + * @ignore + */ + onFocusVisible: PropTypes.func, + /** + * If `true`, the component is read only. + */ + readOnly: PropTypes.bool, + /** + * If `true`, the `input` element is required. + */ + required: PropTypes.bool, + /** + * The size of the component. + * @default 'md' + */ + size: PropTypes.oneOf(['sm', 'md', 'lg']), +} as any; + +export default Switch; diff --git a/packages/mui-joy/src/Switch/SwitchProps.ts b/packages/mui-joy/src/Switch/SwitchProps.ts new file mode 100644 index 00000000000000..e4298111914736 --- /dev/null +++ b/packages/mui-joy/src/Switch/SwitchProps.ts @@ -0,0 +1,54 @@ +import * as React from 'react'; +import { OverridableStringUnion } from '@mui/types'; +import { UseSwitchProps } from '@mui/base/SwitchUnstyled'; +import { SwitchClasses } from './switchClasses'; +import { SxProps } from '../styles/defaultTheme'; +import { ColorPaletteProp } from '../styles/types'; + +export interface SwitchPropsColorOverrides {} + +export interface SwitchPropsSizeOverrides {} + +export interface SwitchProps + extends UseSwitchProps, + Omit, keyof UseSwitchProps> { + /** + * Class name applied to the root element. + */ + className?: string; + /** + * The component used for the Root slot. + * Either a string to use a HTML element or a component. + */ + component?: React.ElementType; + /** + * The props used for each slot inside the Switch. + * @default {} + */ + componentsProps?: { + thumb?: React.HTMLAttributes; + input?: React.InputHTMLAttributes; + track?: React.HTMLAttributes; + }; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * The color of the component. It supports those theme colors that make sense for this component. + * @default 'primary' + */ + color?: OverridableStringUnion< + Exclude, + SwitchPropsColorOverrides + >; + /** + * The size of the component. + * @default 'md' + */ + size?: OverridableStringUnion<'sm' | 'md' | 'lg', SwitchPropsSizeOverrides>; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} diff --git a/packages/mui-joy/src/Switch/index.ts b/packages/mui-joy/src/Switch/index.ts new file mode 100644 index 00000000000000..2c190ccd5f69b4 --- /dev/null +++ b/packages/mui-joy/src/Switch/index.ts @@ -0,0 +1,4 @@ +export { default } from './Switch'; +export { default as switchClasses } from './switchClasses'; +export * from './switchClasses'; +export * from './SwitchProps'; diff --git a/packages/mui-joy/src/Switch/switchClasses.ts b/packages/mui-joy/src/Switch/switchClasses.ts new file mode 100644 index 00000000000000..cceac6965d6213 --- /dev/null +++ b/packages/mui-joy/src/Switch/switchClasses.ts @@ -0,0 +1,63 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/base'; + +export interface SwitchClasses { + /** Styles applied to the root element. */ + root: string; + /** State class applied to the internal `SwitchBase` component's `checked` class. */ + checked: string; + /** State class applied to the internal SwitchBase component's disabled class. */ + disabled: string; + /** Styles applied to the internal SwitchBase component's input element. */ + input: string; + /** Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */ + thumb: string; + /** Styles applied to the track element. */ + track: string; + /** Class applied to the root element if the switch has visible focus */ + focusVisible: string; + /** Class applied to the root element if the switch is read-only */ + readOnly: string; + /** Styles applied to the root element if `color="primary"`. */ + colorPrimary: string; + /** Styles applied to the root element if `color="danger"`. */ + colorDanger: string; + /** Styles applied to the root element if `color="info"`. */ + colorInfo: string; + /** Styles applied to the root element if `color="success"`. */ + colorSuccess: string; + /** Styles applied to the root element if `color="warning"`. */ + colorWarning: string; + /** Styles applied to the root element if `size="sm"`. */ + sizeSm: string; + /** Styles applied to the root element if `size="md"`. */ + sizeMd: string; + /** Styles applied to the root element if `size="lg"`. */ + sizeLg: string; +} + +export type SwitchClassKey = keyof SwitchClasses; + +export function getSwitchUtilityClass(slot: string): string { + return generateUtilityClass('MuiSwitch', slot); +} + +const switchClasses: SwitchClasses = generateUtilityClasses('MuiSwitch', [ + 'root', + 'checked', + 'disabled', + 'input', + 'thumb', + 'track', + 'focusVisible', + 'readOnly', + 'colorPrimary', + 'colorDanger', + 'colorInfo', + 'colorSuccess', + 'colorWarning', + 'sizeSm', + 'sizeMd', + 'sizeLg', +]); + +export default switchClasses; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 3a8ed6e62c440f..7072cb249343de 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -3,3 +3,6 @@ export * from './styles'; export { default as Button } from './Button'; export * from './Button'; + +export { default as Switch } from './Switch'; +export * from './Switch'; diff --git a/packages/mui-joy/src/styles/components.d.ts b/packages/mui-joy/src/styles/components.d.ts index ea60820f1ff1c6..b0d2231051b87a 100644 --- a/packages/mui-joy/src/styles/components.d.ts +++ b/packages/mui-joy/src/styles/components.d.ts @@ -2,6 +2,8 @@ import { CSSInterpolation } from '@mui/system'; import { GlobalStateSlot } from '@mui/base'; import { ButtonProps } from '../Button/ButtonProps'; import { ButtonClassKey } from '../Button/buttonClasses'; +import { SwitchProps } from '../Switch/SwitchProps'; +import { SwitchClassKey } from '../Switch/switchClasses'; export type OverridesStyleRules = Record< ClassKey, @@ -12,9 +14,9 @@ export interface Components { MuiButton?: { defaultProps?: Partial; styleOverrides?: Partial>>; - variants?: Array<{ - props: Partial; - style: CSSInterpolation; - }>; + }; + MuiSwitch?: { + defaultProps?: Partial; + styleOverrides?: Partial>>; }; } diff --git a/packages/mui-system/src/cssVars/createGetThemeVar.ts b/packages/mui-system/src/cssVars/createGetThemeVar.ts index 419fc2cffe93a3..564b4a326edefb 100644 --- a/packages/mui-system/src/cssVars/createGetThemeVar.ts +++ b/packages/mui-system/src/cssVars/createGetThemeVar.ts @@ -6,7 +6,10 @@ export default function createGetThemeVar(prefix: str return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`; } - const getThemeVar = (field: T, ...vars: T[]) => { + const getThemeVar = ( + field: T | AdditionalVars, + ...vars: (T | AdditionalVars)[] + ) => { return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`; }; return getThemeVar; diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts index 084a4c47829ee7..7fd21123f81e9f 100644 --- a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts +++ b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.d.ts @@ -49,6 +49,7 @@ export type SystemStyleObject = | SystemCssProperties | CSSPseudoSelectorProps | CSSSelectorObject + | { [cssVariable: string]: string | number } | null; /** diff --git a/test/regressions/fixtures/SwitchJoy/SwitchJoy.js b/test/regressions/fixtures/SwitchJoy/SwitchJoy.js new file mode 100644 index 00000000000000..1586c8dd08a47a --- /dev/null +++ b/test/regressions/fixtures/SwitchJoy/SwitchJoy.js @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { CssVarsProvider } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Switch from '@mui/joy/Switch'; + +export default function SwitchJoy() { + return ( + + + {['primary', 'danger', 'info', 'success', 'warning'].map((color) => ( + + ))} + {['sm', 'md', 'lg'].map((size) => ( + + ))} + + + ); +} From 4389cc19029944831bb2f2cdcf6b8d548df9e4de Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Fri, 7 Jan 2022 14:28:34 +0530 Subject: [PATCH 3/7] [docs] Fix `componentsProps` API docs and PropTypes (#30502) --- docs/pages/api-docs/autocomplete.json | 5 ++++- docs/pages/api-docs/backdrop-unstyled.json | 5 ++++- docs/pages/api-docs/backdrop.json | 5 ++++- docs/pages/api-docs/badge-unstyled.json | 5 ++++- docs/pages/api-docs/badge.json | 5 ++++- docs/pages/api-docs/clock-picker.json | 7 ++++++- docs/pages/api-docs/date-picker.json | 8 +++++++- docs/pages/api-docs/date-range-picker.json | 8 +++++++- docs/pages/api-docs/date-time-picker.json | 8 +++++++- docs/pages/api-docs/desktop-date-picker.json | 8 +++++++- .../api-docs/desktop-date-range-picker.json | 8 +++++++- .../api-docs/desktop-date-time-picker.json | 8 +++++++- docs/pages/api-docs/filled-input.json | 5 ++++- docs/pages/api-docs/form-control-label.json | 5 ++++- docs/pages/api-docs/input-base.json | 5 ++++- docs/pages/api-docs/input-unstyled.json | 5 ++++- docs/pages/api-docs/input.json | 5 ++++- docs/pages/api-docs/list-item.json | 5 ++++- docs/pages/api-docs/mobile-date-picker.json | 8 +++++++- .../api-docs/mobile-date-range-picker.json | 8 +++++++- .../api-docs/mobile-date-time-picker.json | 8 +++++++- docs/pages/api-docs/modal-unstyled.json | 5 ++++- docs/pages/api-docs/modal.json | 5 ++++- docs/pages/api-docs/slider-unstyled.json | 8 +++++++- docs/pages/api-docs/slider.json | 8 +++++++- docs/pages/api-docs/static-date-picker.json | 8 +++++++- .../api-docs/static-date-range-picker.json | 8 +++++++- .../api-docs/static-date-time-picker.json | 8 +++++++- docs/pages/api-docs/step-label.json | 5 ++++- docs/pages/api-docs/switch-unstyled.json | 8 +++++++- docs/pages/api-docs/tab-panel-unstyled.json | 5 ++++- docs/pages/api-docs/tab-unstyled.json | 5 ++++- .../api-docs/table-pagination-unstyled.json | 8 +++++++- docs/pages/api-docs/tabs-list-unstyled.json | 5 ++++- docs/pages/api-docs/tabs-unstyled.json | 5 ++++- docs/pages/api-docs/tooltip.json | 8 +++++++- .../src/BackdropUnstyled/BackdropUnstyled.js | 4 +++- .../src/BadgeUnstyled/BadgeUnstyled.js | 5 ++++- .../src/ButtonUnstyled/ButtonUnstyled.tsx | 4 +++- .../FormControlUnstyled.tsx | 4 +++- .../src/InputUnstyled/InputUnstyled.tsx | 5 ++++- .../src/ModalUnstyled/ModalUnstyled.js | 4 +++- .../src/SliderUnstyled/SliderUnstyled.js | 18 +++++++++++++++++- .../src/SwitchUnstyled/SwitchUnstyled.tsx | 7 ++++++- .../src/TabPanelUnstyled/TabPanelUnstyled.tsx | 4 +++- .../mui-base/src/TabUnstyled/TabUnstyled.tsx | 4 +++- .../TablePaginationUnstyled.tsx | 11 ++++++++++- .../src/TabsListUnstyled/TabsListUnstyled.tsx | 4 +++- .../mui-base/src/TabsUnstyled/TabsUnstyled.tsx | 4 +++- .../mui-lab/src/ClockPicker/ClockPicker.tsx | 5 ++++- packages/mui-lab/src/DatePicker/DatePicker.tsx | 6 +++++- .../src/DateRangePicker/DateRangePicker.tsx | 6 +++++- .../src/DateTimePicker/DateTimePicker.tsx | 6 +++++- .../DesktopDatePicker/DesktopDatePicker.tsx | 6 +++++- .../DesktopDateRangePicker.tsx | 6 +++++- .../DesktopDateTimePicker.tsx | 6 +++++- .../src/MobileDatePicker/MobileDatePicker.tsx | 6 +++++- .../MobileDateRangePicker.tsx | 6 +++++- .../MobileDateTimePicker.tsx | 6 +++++- .../src/StaticDatePicker/StaticDatePicker.tsx | 6 +++++- .../StaticDateRangePicker.tsx | 6 +++++- .../StaticDateTimePicker.tsx | 6 +++++- packages/mui-material-next/src/Input/Input.js | 5 ++++- .../src/Autocomplete/Autocomplete.js | 4 +++- packages/mui-material/src/Backdrop/Backdrop.js | 4 +++- packages/mui-material/src/Badge/Badge.js | 5 ++++- .../src/FilledInput/FilledInput.js | 5 ++++- .../src/FormControlLabel/FormControlLabel.js | 4 +++- packages/mui-material/src/Input/Input.js | 5 ++++- .../mui-material/src/InputBase/InputBase.js | 5 ++++- packages/mui-material/src/ListItem/ListItem.js | 4 +++- packages/mui-material/src/Modal/Modal.js | 4 +++- packages/mui-material/src/Slider/Slider.js | 18 +++++++++++++++++- .../mui-material/src/StepLabel/StepLabel.js | 4 +++- packages/mui-material/src/Tooltip/Tooltip.js | 7 ++++++- scripts/generateProptypes.ts | 6 +++++- 76 files changed, 392 insertions(+), 76 deletions(-) diff --git a/docs/pages/api-docs/autocomplete.json b/docs/pages/api-docs/autocomplete.json index c065dfd831ba2b..0f860d6a4e6a50 100644 --- a/docs/pages/api-docs/autocomplete.json +++ b/docs/pages/api-docs/autocomplete.json @@ -19,7 +19,10 @@ "clearOnEscape": { "type": { "name": "bool" } }, "clearText": { "type": { "name": "string" }, "default": "'Clear'" }, "closeText": { "type": { "name": "string" }, "default": "'Close'" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ clearIndicator?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "custom", "description": "any" }, "default": "props.multiple ? [] : null" diff --git a/docs/pages/api-docs/backdrop-unstyled.json b/docs/pages/api-docs/backdrop-unstyled.json index 774ffb8e5fe7b0..d817a8ff919cbe 100644 --- a/docs/pages/api-docs/backdrop-unstyled.json +++ b/docs/pages/api-docs/backdrop-unstyled.json @@ -7,7 +7,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } } }, "name": "BackdropUnstyled", diff --git a/docs/pages/api-docs/backdrop.json b/docs/pages/api-docs/backdrop.json index f35f287b551c61..0fbf0b8775ef1f 100644 --- a/docs/pages/api-docs/backdrop.json +++ b/docs/pages/api-docs/backdrop.json @@ -8,7 +8,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } }, "sx": { "type": { diff --git a/docs/pages/api-docs/badge-unstyled.json b/docs/pages/api-docs/badge-unstyled.json index 177acded5ad169..c28594616def3b 100644 --- a/docs/pages/api-docs/badge-unstyled.json +++ b/docs/pages/api-docs/badge-unstyled.json @@ -15,7 +15,10 @@ "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ badge?: object, root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } }, "max": { "type": { "name": "number" }, "default": "99" }, "showZero": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/badge.json b/docs/pages/api-docs/badge.json index 6afe7c28592ab1..36feff75ac0e82 100644 --- a/docs/pages/api-docs/badge.json +++ b/docs/pages/api-docs/badge.json @@ -22,7 +22,10 @@ "type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ badge?: object, root?: object }" }, + "default": "{}" + }, "invisible": { "type": { "name": "bool" } }, "max": { "type": { "name": "number" }, "default": "99" }, "overlap": { diff --git a/docs/pages/api-docs/clock-picker.json b/docs/pages/api-docs/clock-picker.json index 39a10f74a9b41a..d61e28ce2e2bad 100644 --- a/docs/pages/api-docs/clock-picker.json +++ b/docs/pages/api-docs/clock-picker.json @@ -12,7 +12,12 @@ "description": "{ LeftArrowButton?: elementType, LeftArrowIcon?: elementType, RightArrowButton?: elementType, RightArrowIcon?: elementType }" } }, - "componentsProps": { "type": { "name": "object" } }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object }" + } + }, "disableIgnoringDatePartForTimeValidation": { "type": { "name": "bool" } }, "getClockLabelText": { "type": { "name": "func" }, diff --git a/docs/pages/api-docs/date-picker.json b/docs/pages/api-docs/date-picker.json index ddd205dc375d30..3e47b946e988f4 100644 --- a/docs/pages/api-docs/date-picker.json +++ b/docs/pages/api-docs/date-picker.json @@ -18,7 +18,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, diff --git a/docs/pages/api-docs/date-range-picker.json b/docs/pages/api-docs/date-range-picker.json index 3a12d83eaa45b1..b6d79ab0718614 100644 --- a/docs/pages/api-docs/date-range-picker.json +++ b/docs/pages/api-docs/date-range-picker.json @@ -29,7 +29,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "desktopModeMediaQuery": { "type": { "name": "string" }, diff --git a/docs/pages/api-docs/date-time-picker.json b/docs/pages/api-docs/date-time-picker.json index 55e5fd9f704216..a1c64ecbb46a24 100644 --- a/docs/pages/api-docs/date-time-picker.json +++ b/docs/pages/api-docs/date-time-picker.json @@ -20,7 +20,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "desktopModeMediaQuery": { diff --git a/docs/pages/api-docs/desktop-date-picker.json b/docs/pages/api-docs/desktop-date-picker.json index 9a2d7e34f147e6..ed3c0712eabff1 100644 --- a/docs/pages/api-docs/desktop-date-picker.json +++ b/docs/pages/api-docs/desktop-date-picker.json @@ -15,7 +15,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { "type": { "name": "bool" }, diff --git a/docs/pages/api-docs/desktop-date-range-picker.json b/docs/pages/api-docs/desktop-date-range-picker.json index 929ea76746b690..2bf4719ca0a5eb 100644 --- a/docs/pages/api-docs/desktop-date-range-picker.json +++ b/docs/pages/api-docs/desktop-date-range-picker.json @@ -26,7 +26,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/desktop-date-time-picker.json b/docs/pages/api-docs/desktop-date-time-picker.json index d8d3adb3e7e924..96ccbac3f44297 100644 --- a/docs/pages/api-docs/desktop-date-time-picker.json +++ b/docs/pages/api-docs/desktop-date-time-picker.json @@ -17,7 +17,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json index 49637ada53fa20..f2d2c91d6ab12c 100644 --- a/docs/pages/api-docs/filled-input.json +++ b/docs/pages/api-docs/filled-input.json @@ -13,7 +13,10 @@ "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableUnderline": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/form-control-label.json b/docs/pages/api-docs/form-control-label.json index 5775eb28c6b0af..39ad698651583e 100644 --- a/docs/pages/api-docs/form-control-label.json +++ b/docs/pages/api-docs/form-control-label.json @@ -10,7 +10,10 @@ }, "checked": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ typography?: object }" }, + "default": "{}" + }, "disabled": { "type": { "name": "bool" } }, "disableTypography": { "type": { "name": "bool" } }, "inputRef": { "type": { "name": "custom", "description": "ref" } }, diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json index ba17b9351b3002..74242c7132e19d 100644 --- a/docs/pages/api-docs/input-base.json +++ b/docs/pages/api-docs/input-base.json @@ -13,7 +13,10 @@ "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableInjectingGlobalStyles": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/input-unstyled.json b/docs/pages/api-docs/input-unstyled.json index 9f2a1d0987852a..ca00e18ddad644 100644 --- a/docs/pages/api-docs/input-unstyled.json +++ b/docs/pages/api-docs/input-unstyled.json @@ -11,7 +11,10 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "endAdornment": { "type": { "name": "node" } }, diff --git a/docs/pages/api-docs/input.json b/docs/pages/api-docs/input.json index f4347c9a3dfefb..7e50c63c54b043 100644 --- a/docs/pages/api-docs/input.json +++ b/docs/pages/api-docs/input.json @@ -13,7 +13,10 @@ "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ input?: object, root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableUnderline": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/list-item.json b/docs/pages/api-docs/list-item.json index e85e276cf0e4a9..5e5b5a6a430898 100644 --- a/docs/pages/api-docs/list-item.json +++ b/docs/pages/api-docs/list-item.json @@ -21,7 +21,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "ContainerComponent": { "type": { "name": "custom", "description": "element type" }, "default": "'li'", diff --git a/docs/pages/api-docs/mobile-date-picker.json b/docs/pages/api-docs/mobile-date-picker.json index d08cfbbd06fd81..10eb8fa8ad5bc2 100644 --- a/docs/pages/api-docs/mobile-date-picker.json +++ b/docs/pages/api-docs/mobile-date-picker.json @@ -18,7 +18,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "DialogProps": { "type": { "name": "object" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/mobile-date-range-picker.json b/docs/pages/api-docs/mobile-date-range-picker.json index 97c2fcfeee51fb..9de3b692b54279 100644 --- a/docs/pages/api-docs/mobile-date-range-picker.json +++ b/docs/pages/api-docs/mobile-date-range-picker.json @@ -29,7 +29,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "DialogProps": { "type": { "name": "object" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/mobile-date-time-picker.json b/docs/pages/api-docs/mobile-date-time-picker.json index 3feda225d8bd28..2a9bff51c2ef88 100644 --- a/docs/pages/api-docs/mobile-date-time-picker.json +++ b/docs/pages/api-docs/mobile-date-time-picker.json @@ -20,7 +20,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "DialogProps": { "type": { "name": "object" } }, diff --git a/docs/pages/api-docs/modal-unstyled.json b/docs/pages/api-docs/modal-unstyled.json index f740527a4bed4c..a748a54f7a8019 100644 --- a/docs/pages/api-docs/modal-unstyled.json +++ b/docs/pages/api-docs/modal-unstyled.json @@ -11,7 +11,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, "disableAutoFocus": { "type": { "name": "bool" } }, "disableEnforceFocus": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/modal.json b/docs/pages/api-docs/modal.json index bb8fa11eb2d1ae..44ef4e08fea4cf 100644 --- a/docs/pages/api-docs/modal.json +++ b/docs/pages/api-docs/modal.json @@ -14,7 +14,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "container": { "type": { "name": "union", "description": "HTML element
| func" } }, "disableAutoFocus": { "type": { "name": "bool" } }, "disableEnforceFocus": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/slider-unstyled.json b/docs/pages/api-docs/slider-unstyled.json index 3217278493a244..45de48f5a0a95e 100644 --- a/docs/pages/api-docs/slider-unstyled.json +++ b/docs/pages/api-docs/slider-unstyled.json @@ -12,7 +12,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { className?: string, components?: { Root?: elementType }, style?: object, value?: Array<number>
| number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" + }, + "default": "{}" + }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" } }, diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json index e97dc95a96d625..e587fb6b7c3d86 100644 --- a/docs/pages/api-docs/slider.json +++ b/docs/pages/api-docs/slider.json @@ -19,7 +19,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ mark?: object, markLabel?: object, rail?: object, root?: object, thumb?: object, track?: object, valueLabel?: { className?: string, components?: { Root?: elementType }, style?: object, value?: Array<number>
| number, valueLabelDisplay?: 'auto'
| 'off'
| 'on' } }" + }, + "default": "{}" + }, "defaultValue": { "type": { "name": "union", "description": "Array<number>
| number" } }, diff --git a/docs/pages/api-docs/static-date-picker.json b/docs/pages/api-docs/static-date-picker.json index 25974e804de405..b9ba92459f449d 100644 --- a/docs/pages/api-docs/static-date-picker.json +++ b/docs/pages/api-docs/static-date-picker.json @@ -15,7 +15,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { "type": { "name": "bool" }, diff --git a/docs/pages/api-docs/static-date-range-picker.json b/docs/pages/api-docs/static-date-range-picker.json index ad632ce7c75f68..a46096dd572a74 100644 --- a/docs/pages/api-docs/static-date-range-picker.json +++ b/docs/pages/api-docs/static-date-range-picker.json @@ -26,7 +26,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableAutoMonthSwitching": { "type": { "name": "bool" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/static-date-time-picker.json b/docs/pages/api-docs/static-date-time-picker.json index 4a4f309e793e80..46a9e2bdd5a049 100644 --- a/docs/pages/api-docs/static-date-time-picker.json +++ b/docs/pages/api-docs/static-date-time-picker.json @@ -17,7 +17,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ leftArrowButton?: object, rightArrowButton?: object, switchViewButton?: object }" + }, + "default": "{}" + }, "dateRangeIcon": { "type": { "name": "node" } }, "defaultCalendarMonth": { "type": { "name": "any" } }, "disableCloseOnSelect": { diff --git a/docs/pages/api-docs/step-label.json b/docs/pages/api-docs/step-label.json index a0125db1e6fd59..3a7fff19dbbf28 100644 --- a/docs/pages/api-docs/step-label.json +++ b/docs/pages/api-docs/step-label.json @@ -2,7 +2,10 @@ "props": { "children": { "type": { "name": "node" } }, "classes": { "type": { "name": "object" } }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ label?: object }" }, + "default": "{}" + }, "error": { "type": { "name": "bool" } }, "icon": { "type": { "name": "node" } }, "optional": { "type": { "name": "node" } }, diff --git a/docs/pages/api-docs/switch-unstyled.json b/docs/pages/api-docs/switch-unstyled.json index d868d5f5edfeb9..37630f590b50b1 100644 --- a/docs/pages/api-docs/switch-unstyled.json +++ b/docs/pages/api-docs/switch-unstyled.json @@ -10,7 +10,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ input?: object, root?: object, thumb?: object, track?: object }" + }, + "default": "{}" + }, "defaultChecked": { "type": { "name": "bool" } }, "disabled": { "type": { "name": "bool" } }, "onChange": { "type": { "name": "func" } }, diff --git a/docs/pages/api-docs/tab-panel-unstyled.json b/docs/pages/api-docs/tab-panel-unstyled.json index ba215602180a27..fbe5f7fca34d74 100644 --- a/docs/pages/api-docs/tab-panel-unstyled.json +++ b/docs/pages/api-docs/tab-panel-unstyled.json @@ -10,7 +10,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" } + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + } }, "name": "TabPanelUnstyled", "styles": { "classes": [], "globalClasses": {}, "name": null }, diff --git a/docs/pages/api-docs/tab-unstyled.json b/docs/pages/api-docs/tab-unstyled.json index 625b75e2ee3130..1bf0ba09074227 100644 --- a/docs/pages/api-docs/tab-unstyled.json +++ b/docs/pages/api-docs/tab-unstyled.json @@ -11,7 +11,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "disabled": { "type": { "name": "bool" } }, "onChange": { "type": { "name": "func" } }, "value": { "type": { "name": "union", "description": "number
| string" } } diff --git a/docs/pages/api-docs/table-pagination-unstyled.json b/docs/pages/api-docs/table-pagination-unstyled.json index 20b5064faf6bd1..9e81ea375cbae1 100644 --- a/docs/pages/api-docs/table-pagination-unstyled.json +++ b/docs/pages/api-docs/table-pagination-unstyled.json @@ -12,7 +12,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ actions?: object, displayedRows?: object, menuItem?: object, root?: object, select?: object, selectLabel?: object, spacer?: object, toolbar?: object }" + }, + "default": "{}" + }, "getItemAriaLabel": { "type": { "name": "func" }, "default": "function defaultGetAriaLabel(type: ItemAriaLabelType) {\n return `Go to ${type} page`;\n}" diff --git a/docs/pages/api-docs/tabs-list-unstyled.json b/docs/pages/api-docs/tabs-list-unstyled.json index 2e86bfde7fcf3c..1d479721ea9b60 100644 --- a/docs/pages/api-docs/tabs-list-unstyled.json +++ b/docs/pages/api-docs/tabs-list-unstyled.json @@ -6,7 +6,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" } + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + } }, "name": "TabsListUnstyled", "styles": { "classes": [], "globalClasses": {}, "name": null }, diff --git a/docs/pages/api-docs/tabs-unstyled.json b/docs/pages/api-docs/tabs-unstyled.json index 36417b446bdaa3..e4752dff65d537 100644 --- a/docs/pages/api-docs/tabs-unstyled.json +++ b/docs/pages/api-docs/tabs-unstyled.json @@ -6,7 +6,10 @@ "type": { "name": "shape", "description": "{ Root?: elementType }" }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { "name": "shape", "description": "{ root?: object }" }, + "default": "{}" + }, "defaultValue": { "type": { "name": "union", diff --git a/docs/pages/api-docs/tooltip.json b/docs/pages/api-docs/tooltip.json index 8856915ae9fd7f..54d6f83ef9cc67 100644 --- a/docs/pages/api-docs/tooltip.json +++ b/docs/pages/api-docs/tooltip.json @@ -11,7 +11,13 @@ }, "default": "{}" }, - "componentsProps": { "type": { "name": "object" }, "default": "{}" }, + "componentsProps": { + "type": { + "name": "shape", + "description": "{ arrow?: object, popper?: object, tooltip?: object, transition?: object }" + }, + "default": "{}" + }, "describeChild": { "type": { "name": "bool" } }, "disableFocusListener": { "type": { "name": "bool" } }, "disableHoverListener": { "type": { "name": "bool" } }, diff --git a/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js b/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js index ad47e4c6a4b38a..0be80c71a7e673 100644 --- a/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js +++ b/packages/mui-base/src/BackdropUnstyled/BackdropUnstyled.js @@ -89,7 +89,9 @@ BackdropUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Backdrop. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * If `true`, the backdrop is invisible. * It can be used when rendering a popover or a custom select component. diff --git a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.js b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.js index 3a7e5f9a18b686..3310fd29c63817 100644 --- a/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.js +++ b/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.js @@ -134,7 +134,10 @@ BadgeUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Badge. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + badge: PropTypes.object, + root: PropTypes.object, + }), /** * If `true`, the badge is invisible. */ diff --git a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx index 52c562324a1907..b2143362f1816c 100644 --- a/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx +++ b/packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx @@ -144,7 +144,9 @@ ButtonUnstyled.propTypes /* remove-proptypes */ = { /** * @ignore */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx index 593e18c0475a06..89d98458605337 100644 --- a/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx +++ b/packages/mui-base/src/FormControlUnstyled/FormControlUnstyled.tsx @@ -195,7 +195,9 @@ FormControlUnstyled.propTypes /* remove-proptypes */ = { /** * @ignore */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * @ignore */ diff --git a/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx b/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx index 4b0e9c50439b2c..b41033a95921ea 100644 --- a/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx +++ b/packages/mui-base/src/InputUnstyled/InputUnstyled.tsx @@ -230,7 +230,10 @@ InputUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Input. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + root: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js index eb05fbe529a481..51e390036e0c98 100644 --- a/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js +++ b/packages/mui-base/src/ModalUnstyled/ModalUnstyled.js @@ -330,7 +330,9 @@ ModalUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Modal. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * An HTML element or function that returns one. * The `container` will have the portal children appended to it. diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js index 6448594ac9d330..1dc4ef61335c2c 100644 --- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js +++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js @@ -865,7 +865,23 @@ SliderUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Slider. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + mark: PropTypes.object, + markLabel: PropTypes.object, + rail: PropTypes.object, + root: PropTypes.object, + thumb: PropTypes.object, + track: PropTypes.object, + valueLabel: PropTypes.shape({ + className: PropTypes.string, + components: PropTypes.shape({ + Root: PropTypes.elementType, + }), + style: PropTypes.object, + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + }), + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx index 51506ff9718ba9..f4bb8e7a99e11d 100644 --- a/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx +++ b/packages/mui-base/src/SwitchUnstyled/SwitchUnstyled.tsx @@ -165,7 +165,12 @@ SwitchUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Switch. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + root: PropTypes.object, + thumb: PropTypes.object, + track: PropTypes.object, + }), /** * The default checked state. Use when the component is not controlled. */ diff --git a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx index 0b5f5a29249ef9..12f25d98fc5bf9 100644 --- a/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx +++ b/packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.tsx @@ -100,7 +100,9 @@ TabPanelUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the TabPanel. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * The value of the TabPanel. It will be shown when the Tab with the corresponding value is selected. */ diff --git a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx index e1ed1c1bb6010d..61ffc3bed3f190 100644 --- a/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx +++ b/packages/mui-base/src/TabUnstyled/TabUnstyled.tsx @@ -129,7 +129,9 @@ TabUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Tab. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * If `true`, the component is disabled. * @default false diff --git a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx index 41de9e21e5a143..af3350bdaaaaa1 100644 --- a/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx +++ b/packages/mui-base/src/TablePaginationUnstyled/TablePaginationUnstyled.tsx @@ -245,7 +245,16 @@ TablePaginationUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the TablePagination. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + actions: PropTypes.object, + displayedRows: PropTypes.object, + menuItem: PropTypes.object, + root: PropTypes.object, + select: PropTypes.object, + selectLabel: PropTypes.object, + spacer: PropTypes.object, + toolbar: PropTypes.object, + }), /** * The total number of rows. * diff --git a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx index 61be780d0b17b8..2c0fb2dad6fd96 100644 --- a/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx +++ b/packages/mui-base/src/TabsListUnstyled/TabsListUnstyled.tsx @@ -91,7 +91,9 @@ TabsListUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the TabsList. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), } as any; export default TabsListUnstyled; diff --git a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx index a9314e71eae82f..f68d63b454f013 100644 --- a/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx +++ b/packages/mui-base/src/TabsUnstyled/TabsUnstyled.tsx @@ -104,7 +104,9 @@ TabsUnstyled.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Tabs. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-lab/src/ClockPicker/ClockPicker.tsx b/packages/mui-lab/src/ClockPicker/ClockPicker.tsx index d0a4bf34eef4a6..e236ef4cafb1f5 100644 --- a/packages/mui-lab/src/ClockPicker/ClockPicker.tsx +++ b/packages/mui-lab/src/ClockPicker/ClockPicker.tsx @@ -441,7 +441,10 @@ ClockPicker.propTypes /* remove-proptypes */ = { /** * The props used for each slot inside. */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + }), /** * Selected date @DateIOType. */ diff --git a/packages/mui-lab/src/DatePicker/DatePicker.tsx b/packages/mui-lab/src/DatePicker/DatePicker.tsx index 0888c5115db512..c986d201e7dd56 100644 --- a/packages/mui-lab/src/DatePicker/DatePicker.tsx +++ b/packages/mui-lab/src/DatePicker/DatePicker.tsx @@ -134,7 +134,11 @@ DatePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/DateRangePicker/DateRangePicker.tsx b/packages/mui-lab/src/DateRangePicker/DateRangePicker.tsx index 8ebeb5b6cbf683..ff3366375b53e6 100644 --- a/packages/mui-lab/src/DateRangePicker/DateRangePicker.tsx +++ b/packages/mui-lab/src/DateRangePicker/DateRangePicker.tsx @@ -234,7 +234,11 @@ DateRangePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx b/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx index f37dcd0c5d606a..ce475c6f49d56b 100644 --- a/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx +++ b/packages/mui-lab/src/DateTimePicker/DateTimePicker.tsx @@ -144,7 +144,11 @@ DateTimePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Date tab icon. */ diff --git a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx index 79b6b63deefc00..6860970c8fe7b0 100644 --- a/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx +++ b/packages/mui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx @@ -124,7 +124,11 @@ DesktopDatePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx index 0c663bb19cbfc3..65869a7f1f2d28 100644 --- a/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx +++ b/packages/mui-lab/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx @@ -227,7 +227,11 @@ DesktopDateRangePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx b/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx index 498b878083e46a..4e9de12b5aa16c 100644 --- a/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx +++ b/packages/mui-lab/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx @@ -135,7 +135,11 @@ DesktopDateTimePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Date tab icon. */ diff --git a/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx b/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx index cfb2508700deb9..d7b52da7597cb0 100644 --- a/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx +++ b/packages/mui-lab/src/MobileDatePicker/MobileDatePicker.tsx @@ -131,7 +131,11 @@ MobileDatePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx index c83ebec55115a8..8c5fa643c93ad9 100644 --- a/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx +++ b/packages/mui-lab/src/MobileDateRangePicker/MobileDateRangePicker.tsx @@ -238,7 +238,11 @@ MobileDateRangePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx b/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx index 7160a78c9e1f53..2012c223ae8483 100644 --- a/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx +++ b/packages/mui-lab/src/MobileDateTimePicker/MobileDateTimePicker.tsx @@ -144,7 +144,11 @@ MobileDateTimePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Date tab icon. */ diff --git a/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx b/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx index f361d4f430ab30..094c1f7ddd7c14 100644 --- a/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx +++ b/packages/mui-lab/src/StaticDatePicker/StaticDatePicker.tsx @@ -117,7 +117,11 @@ StaticDatePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx index 4d16af407ce746..9541ff7e7f12d7 100644 --- a/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx +++ b/packages/mui-lab/src/StaticDateRangePicker/StaticDateRangePicker.tsx @@ -215,7 +215,11 @@ StaticDateRangePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Default calendar month displayed when `value={null}`. */ diff --git a/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx b/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx index 280a814198fba2..5d3072a6725862 100644 --- a/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx +++ b/packages/mui-lab/src/StaticDateTimePicker/StaticDateTimePicker.tsx @@ -130,7 +130,11 @@ StaticDateTimePicker.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + leftArrowButton: PropTypes.object, + rightArrowButton: PropTypes.object, + switchViewButton: PropTypes.object, + }), /** * Date tab icon. */ diff --git a/packages/mui-material-next/src/Input/Input.js b/packages/mui-material-next/src/Input/Input.js index 6c7f57886d3361..9f2f5d7c16e803 100644 --- a/packages/mui-material-next/src/Input/Input.js +++ b/packages/mui-material-next/src/Input/Input.js @@ -377,7 +377,10 @@ Input.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Input. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + root: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index b7f0102e5ff46e..23a8503a8b6308 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -720,7 +720,9 @@ Autocomplete.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + clearIndicator: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. * @default props.multiple ? [] : null diff --git a/packages/mui-material/src/Backdrop/Backdrop.js b/packages/mui-material/src/Backdrop/Backdrop.js index 6f2b3aa67687d2..9abb9bf641071a 100644 --- a/packages/mui-material/src/Backdrop/Backdrop.js +++ b/packages/mui-material/src/Backdrop/Backdrop.js @@ -114,7 +114,9 @@ Backdrop.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Backdrop. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * If `true`, the backdrop is invisible. * It can be used when rendering a popover or a custom select component. diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js index 3144241c90d65a..7b1b5faa573819 100644 --- a/packages/mui-material/src/Badge/Badge.js +++ b/packages/mui-material/src/Badge/Badge.js @@ -348,7 +348,10 @@ Badge.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Badge. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + badge: PropTypes.object, + root: PropTypes.object, + }), /** * If `true`, the badge is invisible. */ diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 886a93e1a6a8ae..9daca3129bb3c3 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -257,7 +257,10 @@ FilledInput.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Input. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + root: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.js b/packages/mui-material/src/FormControlLabel/FormControlLabel.js index 4727c5331963b6..7b03778fe3bc19 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.js +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.js @@ -157,7 +157,9 @@ FormControlLabel.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + typography: PropTypes.object, + }), /** * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`. */ diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index e2bbd9c935c04a..7b79be6e48fbf4 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -184,7 +184,10 @@ Input.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Input. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + root: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index 9b4de8c2f469e3..7d3b2283997871 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -596,7 +596,10 @@ InputBase.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Input. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + root: PropTypes.object, + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-material/src/ListItem/ListItem.js b/packages/mui-material/src/ListItem/ListItem.js index 973d53046e0f3a..a77e0fd1c063a0 100644 --- a/packages/mui-material/src/ListItem/ListItem.js +++ b/packages/mui-material/src/ListItem/ListItem.js @@ -385,7 +385,9 @@ ListItem.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Input. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * The container component used when a `ListItemSecondaryAction` is the last child. * @default 'li' diff --git a/packages/mui-material/src/Modal/Modal.js b/packages/mui-material/src/Modal/Modal.js index abf4c5ad276dc7..1feadedce37cc3 100644 --- a/packages/mui-material/src/Modal/Modal.js +++ b/packages/mui-material/src/Modal/Modal.js @@ -172,7 +172,9 @@ Modal.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Modal. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + root: PropTypes.object, + }), /** * An HTML element or function that returns one. * The `container` will have the portal children appended to it. diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js index c64c45ee31d01e..67dd26a95401dd 100644 --- a/packages/mui-material/src/Slider/Slider.js +++ b/packages/mui-material/src/Slider/Slider.js @@ -557,7 +557,23 @@ Slider.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Slider. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + mark: PropTypes.object, + markLabel: PropTypes.object, + rail: PropTypes.object, + root: PropTypes.object, + thumb: PropTypes.object, + track: PropTypes.object, + valueLabel: PropTypes.shape({ + className: PropTypes.string, + components: PropTypes.shape({ + Root: PropTypes.elementType, + }), + style: PropTypes.object, + value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]), + valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']), + }), + }), /** * The default value. Use when the component is not controlled. */ diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 08505f1e21d8d5..543c69f800b733 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -198,7 +198,9 @@ StepLabel.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + label: PropTypes.object, + }), /** * If `true`, the step is marked as failed. * @default false diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js index 480916ea131402..8eb0d7073e2403 100644 --- a/packages/mui-material/src/Tooltip/Tooltip.js +++ b/packages/mui-material/src/Tooltip/Tooltip.js @@ -747,7 +747,12 @@ Tooltip.propTypes /* remove-proptypes */ = { * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + arrow: PropTypes.object, + popper: PropTypes.object, + tooltip: PropTypes.object, + transition: PropTypes.object, + }), /** * Set to `true` if the `title` acts as an accessible description. * By default the `title` acts as an accessible label for the child. diff --git a/scripts/generateProptypes.ts b/scripts/generateProptypes.ts index c1553a9a991007..43bf5bfbb20f4c 100644 --- a/scripts/generateProptypes.ts +++ b/scripts/generateProptypes.ts @@ -179,7 +179,11 @@ async function generateProptypes( ): Promise { const proptypes = ttp.parseFromProgram(tsFile, program, { shouldResolveObject: ({ name }) => { - if (name.toLowerCase().endsWith('classes') || name === 'theme' || name.endsWith('Props')) { + if ( + name.toLowerCase().endsWith('classes') || + name === 'theme' || + (name.endsWith('Props') && name !== 'componentsProps') + ) { return false; } return undefined; From e81f306e58df74c983e15718eb3f4bdf51896054 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Fri, 7 Jan 2022 16:49:12 +0700 Subject: [PATCH 4/7] [Joy] Add `Typography` component (#30489) --- docs/pages/experiments/joy/style-guide.tsx | 12 +- docs/pages/experiments/joy/typography.tsx | 101 ++++++++++ .../src/Typography/Typography.spec.tsx | 18 ++ .../mui-joy/src/Typography/Typography.test.js | 88 +++++++++ .../mui-joy/src/Typography/Typography.tsx | 182 ++++++++++++++++++ .../mui-joy/src/Typography/TypographyProps.ts | 67 +++++++ packages/mui-joy/src/Typography/index.ts | 4 + .../src/Typography/typographyClasses.ts | 51 +++++ packages/mui-joy/src/index.ts | 3 + .../mui-joy/src/styles/CssVarsProvider.tsx | 5 +- packages/mui-joy/src/styles/defaultTheme.ts | 6 +- .../src/cssVars/createCssVarsProvider.js | 4 +- .../src/cssVars/createCssVarsProvider.test.js | 4 +- ...emeVar.test.ts => createGetCssVar.test.ts} | 8 +- .../mui-system/src/cssVars/createGetCssVar.ts | 21 ++ .../src/cssVars/createGetThemeVar.ts | 16 -- packages/mui-system/src/index.d.ts | 2 +- packages/mui-system/src/index.js | 2 +- test/utils/describeConformance.js | 2 +- 19 files changed, 559 insertions(+), 37 deletions(-) create mode 100644 docs/pages/experiments/joy/typography.tsx create mode 100644 packages/mui-joy/src/Typography/Typography.spec.tsx create mode 100644 packages/mui-joy/src/Typography/Typography.test.js create mode 100644 packages/mui-joy/src/Typography/Typography.tsx create mode 100644 packages/mui-joy/src/Typography/TypographyProps.ts create mode 100644 packages/mui-joy/src/Typography/index.ts create mode 100644 packages/mui-joy/src/Typography/typographyClasses.ts rename packages/mui-system/src/cssVars/{createGetThemeVar.test.ts => createGetCssVar.test.ts} (84%) create mode 100644 packages/mui-system/src/cssVars/createGetCssVar.ts delete mode 100644 packages/mui-system/src/cssVars/createGetThemeVar.ts diff --git a/docs/pages/experiments/joy/style-guide.tsx b/docs/pages/experiments/joy/style-guide.tsx index 58bbecdf78a7e6..c8a974e1c6d9cd 100644 --- a/docs/pages/experiments/joy/style-guide.tsx +++ b/docs/pages/experiments/joy/style-guide.tsx @@ -9,10 +9,10 @@ import { styled, ColorPaletteProp, TypographySystem, - createGetThemeVar, + createGetCssVar, } from '@mui/joy/styles'; -const getThemeVar = createGetThemeVar(); +const getCssVar = createGetCssVar(); const rgb2hex = (rgb: string) => `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || []) @@ -26,7 +26,7 @@ const Typography = styled('p', { ({ theme, level = 'body1', color }) => [ { margin: 0 }, theme.typography[level], - color && color !== 'context' && { color: getThemeVar(`palette-${color}-textColor`) }, + color && color !== 'context' && { color: getCssVar(`palette-${color}-textColor`) }, ], ); @@ -85,12 +85,12 @@ const ColorToken = ({ name, value }: { name: string; value: string }) => { ({ - borderRadius: `calc(${theme.getThemeVar('radius-md')} / 2)`, + borderRadius: `calc(${theme.getCssVar('radius-md')} / 2)`, bgcolor: value, width: 64, height: 64, mb: 1, - boxShadow: theme.getThemeVar('shadow-sm'), + boxShadow: theme.getCssVar('shadow-sm'), })} /> {name} @@ -118,7 +118,7 @@ const PaletteTokens = () => { diff --git a/docs/pages/experiments/joy/typography.tsx b/docs/pages/experiments/joy/typography.tsx new file mode 100644 index 00000000000000..99eaef367c53e1 --- /dev/null +++ b/docs/pages/experiments/joy/typography.tsx @@ -0,0 +1,101 @@ +import * as React from 'react'; +// @ts-ignore +import { jsx as _jsx } from 'react/jsx-runtime'; +import { CssVarsProvider, styled, useColorScheme, FontSize } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import Button from '@mui/joy/Button'; +import Typography from '@mui/joy/Typography'; + +export const SvgIcon = styled('svg', { + shouldForwardProp: (prop) => prop !== 'fontSize' && prop !== 'sx', +})<{ + fontSize: keyof FontSize | 'inherit'; +}>(({ theme, fontSize }) => ({ + userSelect: 'none', + width: '1em', + height: '1em', + display: 'inline-block', + fill: 'currentColor', + flexShrink: 0, + ...(fontSize && { + fontSize: fontSize === 'inherit' ? 'inherit' : theme.vars.fontSize[fontSize], + }), +})); + +function createSvgIcon(path: any, displayName: any, initialProps?: any) { + const Component = (props: any, ref: any) => + ( + + {path} + + ) as unknown as typeof SvgIcon; + + // @ts-ignore + return React.memo(React.forwardRef(Component)); +} + +export const Moon = createSvgIcon( + _jsx('path', { + d: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z', + }), + 'DarkMode', +); + +export const Sun = createSvgIcon( + _jsx('path', { + d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z', + }), + 'LightMode', +); + +const ColorSchemePicker = () => { + const { mode, setMode } = useColorScheme(); + const [mounted, setMounted] = React.useState(false); + React.useEffect(() => { + setMounted(true); + }, []); + if (!mounted) { + return null; + } + + return ( + + ); +}; + +export default function JoyTypography() { + return ( + + + + + + {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'] as const).map((level) => ( + + {`${level} - typography`} + + ))} + + + ); +} diff --git a/packages/mui-joy/src/Typography/Typography.spec.tsx b/packages/mui-joy/src/Typography/Typography.spec.tsx new file mode 100644 index 00000000000000..7119c70dceeeb8 --- /dev/null +++ b/packages/mui-joy/src/Typography/Typography.spec.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Typography from '@mui/joy/Typography'; + + + Text +; + +function Link(props: JSX.IntrinsicElements['a']) { + return ; +} + + Text +; + +// @ts-expect-error href is not exist in div + + Text +; diff --git a/packages/mui-joy/src/Typography/Typography.test.js b/packages/mui-joy/src/Typography/Typography.test.js new file mode 100644 index 00000000000000..a7d7e2907ec02f --- /dev/null +++ b/packages/mui-joy/src/Typography/Typography.test.js @@ -0,0 +1,88 @@ +import * as React from 'react'; +import { expect } from 'chai'; +import { createRenderer, describeConformance } from 'test/utils'; +import Typography, { typographyClasses as classes } from '@mui/joy/Typography'; +import { ThemeProvider } from '@mui/joy/styles'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes, + inheritComponent: 'p', + ThemeProvider, + render, + refInstanceof: window.HTMLParagraphElement, + muiName: 'MuiTypography', + testStateOverrides: { prop: 'level', value: 'h2', styleKey: 'h2' }, + skip: ['componentsProp', 'classesRoot', 'themeVariants'], + })); + + it('should render the text', () => { + const { container } = render(Hello); + expect(container.firstChild).to.have.text('Hello'); + }); + + it('should render body1 root by default', () => { + const { container } = render(Hello); + + expect(container.firstChild).to.have.class(classes.body1); + expect(container.firstChild).to.have.class(classes.root); + }); + + ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'body3'].forEach((level) => { + it(`should render ${level} text`, () => { + const { container } = render(Hello); + + expect(classes).to.have.property(level); + + expect(container.firstChild).to.have.class(classes[level]); + }); + }); + + describe('headline', () => { + it('should render the mapped headline', () => { + const { getByText } = render(Hello); + + expect(getByText(/hello/i).tagName).to.equal('H6'); + }); + + it('should render a h1', () => { + const { getByText } = render(Hello); + + expect(getByText(/hello/i).tagName).to.equal('H1'); + }); + }); + + describe('prop: levelMapping', () => { + it('should work with a single value', () => { + const { getByText } = render( + + Hello + , + ); + + expect(getByText(/hello/i).tagName).to.equal('ASIDE'); + }); + + it('should work even with an empty mapping', () => { + const { getByText } = render( + + Hello + , + ); + + expect(getByText(/hello/i).tagName).to.equal('H6'); + }); + }); + + it('combines system properties with the sx prop', () => { + const { container } = render(); + + expect(container.firstChild).toHaveComputedStyle({ + marginTop: '16px', + marginRight: '40px', + marginBottom: '16px', + }); + }); +}); diff --git a/packages/mui-joy/src/Typography/Typography.tsx b/packages/mui-joy/src/Typography/Typography.tsx new file mode 100644 index 00000000000000..63710217dfef7c --- /dev/null +++ b/packages/mui-joy/src/Typography/Typography.tsx @@ -0,0 +1,182 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { OverridableComponent } from '@mui/types'; +import { unstable_extendSxProp as extendSxProp } from '@mui/system'; +import { unstable_composeClasses as composeClasses } from '@mui/base'; +import { TypographyTypeMap, TypographyProps } from './TypographyProps'; +import styled from '../styles/styled'; +import useThemeProps from '../styles/useThemeProps'; +import { getTypographyUtilityClass } from './typographyClasses'; + +const useUtilityClasses = (ownerState: TypographyProps) => { + const { gutterBottom, noWrap, level } = ownerState; + + const slots = { + root: ['root', level, gutterBottom && 'gutterBottom', noWrap && 'noWrap'], + }; + + return composeClasses(slots, getTypographyUtilityClass, {}); +}; + +export const TypographyRoot = styled('span', { + name: 'MuiTypography', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.root, + ownerState.level && styles[ownerState.level], + ownerState.noWrap && styles.noWrap, + ownerState.gutterBottom && styles.gutterBottom, + ]; + }, +})<{ ownerState: TypographyProps }>(({ theme, ownerState }) => ({ + margin: 0, + ...(ownerState.level && ownerState.level !== 'inherit' && theme.typography[ownerState.level]), + ...(ownerState.noWrap && { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }), + ...(ownerState.gutterBottom && { + marginBottom: '0.35em', + }), +})); + +const defaultVariantMapping = { + h1: 'h1', + h2: 'h2', + h3: 'h3', + h4: 'h4', + h5: 'h5', + h6: 'h6', + body1: 'p', + body2: 'p', + body3: 'p', + inherit: 'p', +}; + +const Typography = React.forwardRef(function Typography(inProps, ref) { + const themeProps = useThemeProps({ + props: inProps, + name: 'MuiTypography', + }); + + const props = extendSxProp(themeProps); + + const { + className, + component, + gutterBottom = false, + noWrap = false, + level = 'body1', + levelMapping = {}, + ...other + } = props; + + const ownerState = { + ...props, + level, + className, + component, + gutterBottom, + noWrap, + }; + + const Component = component || levelMapping[level] || defaultVariantMapping[level] || 'span'; + + const classes = useUtilityClasses(ownerState); + + return ( + + ); +}) as OverridableComponent; + +Typography.propTypes /* remove-proptypes */ = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, + /** + * If `true`, the text will have a bottom margin. + * @default false + */ + gutterBottom: PropTypes.bool, + /** + * Applies the theme typography styles. + * @default 'body1' + */ + level: PropTypes.oneOf([ + 'body1', + 'body2', + 'body3', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'inherit', + ]), + /** + * The component maps the variant prop to a range of different HTML element types. + * For instance, body1 to `
`. + * If you wish to change that mapping, you can provide your own. + * Alternatively, you can use the `component` prop. + * @default { + * h1: 'h1', + * h2: 'h2', + * h3: 'h3', + * h4: 'h4', + * h5: 'h5', + * h6: 'h6', + * body1: 'p', + * body2: 'p', + * body3: 'p', + * inherit: 'p', + * } + */ + levelMapping: PropTypes.shape({ + body1: PropTypes.string, + body2: PropTypes.string, + body3: PropTypes.string, + h1: PropTypes.string, + h2: PropTypes.string, + h3: PropTypes.string, + h4: PropTypes.string, + h5: PropTypes.string, + h6: PropTypes.string, + inherit: PropTypes.string, + }), + /** + * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis. + * + * Note that text overflow can only happen with block or inline-block level elements + * (the element needs to have a width in order to overflow). + * @default false + */ + noWrap: PropTypes.bool, +} as any; + +export default Typography; diff --git a/packages/mui-joy/src/Typography/TypographyProps.ts b/packages/mui-joy/src/Typography/TypographyProps.ts new file mode 100644 index 00000000000000..abda52a0692c7a --- /dev/null +++ b/packages/mui-joy/src/Typography/TypographyProps.ts @@ -0,0 +1,67 @@ +import * as React from 'react'; +import { OverrideProps } from '@mui/types'; +import { TypographyClasses } from './typographyClasses'; +import { SxProps } from '../styles/defaultTheme'; +import { TypographySystem } from '../styles/types'; + +export interface TypographyTypeMap

{ + props: P & { + /** + * The content of the component. + */ + children?: React.ReactNode; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * If `true`, the text will have a bottom margin. + * @default false + */ + gutterBottom?: boolean; + /** + * Applies the theme typography styles. + * @default 'body1' + */ + level?: keyof TypographySystem | 'inherit'; + /** + * The component maps the variant prop to a range of different HTML element types. + * For instance, body1 to `

`. + * If you wish to change that mapping, you can provide your own. + * Alternatively, you can use the `component` prop. + * @default { + * h1: 'h1', + * h2: 'h2', + * h3: 'h3', + * h4: 'h4', + * h5: 'h5', + * h6: 'h6', + * body1: 'p', + * body2: 'p', + * body3: 'p', + * inherit: 'p', + * } + */ + levelMapping?: Partial>; + /** + * If `true`, the text will not wrap, but instead will truncate with a text overflow ellipsis. + * + * Note that text overflow can only happen with block or inline-block level elements + * (the element needs to have a width in order to overflow). + * @default false + */ + noWrap?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + }; + defaultComponent: D; +} + +export type TypographyProps< + D extends React.ElementType = TypographyTypeMap['defaultComponent'], + P = { + component?: React.ElementType; + }, +> = OverrideProps, D>; diff --git a/packages/mui-joy/src/Typography/index.ts b/packages/mui-joy/src/Typography/index.ts new file mode 100644 index 00000000000000..bbaa51027683f6 --- /dev/null +++ b/packages/mui-joy/src/Typography/index.ts @@ -0,0 +1,4 @@ +export { default } from './Typography'; +export * from './TypographyProps'; +export { default as typographyClasses } from './typographyClasses'; +export * from './typographyClasses'; diff --git a/packages/mui-joy/src/Typography/typographyClasses.ts b/packages/mui-joy/src/Typography/typographyClasses.ts new file mode 100644 index 00000000000000..11f5136de17c3d --- /dev/null +++ b/packages/mui-joy/src/Typography/typographyClasses.ts @@ -0,0 +1,51 @@ +import { generateUtilityClass, generateUtilityClasses } from '@mui/base'; + +export interface TypographyClasses { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if `level="h1"`. */ + h1: string; + /** Styles applied to the root element if `level="h2"`. */ + h2: string; + /** Styles applied to the root element if `level="h3"`. */ + h3: string; + /** Styles applied to the root element if `level="h4"`. */ + h4: string; + /** Styles applied to the root element if `level="h5"`. */ + h5: string; + /** Styles applied to the root element if `level="h6"`. */ + h6: string; + /** Styles applied to the root element if `level="body1"`. */ + body1: string; + /** Styles applied to the root element if `level="body2"`. */ + body2: string; + /** Styles applied to the root element if `level="body3"`. */ + body3: string; + /** Styles applied to the root element if `nowrap={true}`. */ + noWrap: string; + /** Styles applied to the root element if `gutterBottom={true}`. */ + gutterBottom: string; +} + +export type TypographyClassKey = keyof TypographyClasses; + +export function getTypographyUtilityClass(slot: string): string { + return generateUtilityClass('MuiTypography', slot); +} + +const typographyClasses: TypographyClasses = generateUtilityClasses('MuiTypography', [ + 'root', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'body1', + 'body2', + 'body3', + 'noWrap', + 'gutterBottom', +]); + +export default typographyClasses; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 7072cb249343de..bc5c8e5d092e9d 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -4,5 +4,8 @@ export * from './styles'; export { default as Button } from './Button'; export * from './Button'; +export { default as Typography } from './Typography'; +export * from './Typography'; + export { default as Switch } from './Switch'; export * from './Switch'; diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 8b99e4df0b5de0..3b99bf1fbf0b92 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -67,7 +67,10 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV }, prefix: 'joy', shouldSkipGeneratingVar: (keys) => - keys[0] === 'typography' || keys[0] === 'variants' || keys[0] === 'focus', + keys[0] === 'typography' || + keys[0] === 'variants' || + keys[0] === 'focus' || + keys[0] === 'breakpoints', }); export { CssVarsProvider, useColorScheme, getInitColorSchemeScript }; diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 56dc156a7b30f6..a7fb1fb11ab100 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -5,7 +5,7 @@ import { Spacing, CSSObject, SxProps as SystemSxProps, - unstable_createGetThemeVar as systemCreateGetThemeVar, + unstable_createGetCssVar as systemCreateGetCssVar, } from '@mui/system'; import colors from '../colors'; import { @@ -399,7 +399,7 @@ type Vars = ThemeScales & ColorSystem; export type ThemeVar = NormalizeVars; -export const createGetThemeVar = (prefix = 'joy') => systemCreateGetThemeVar(prefix); +export const createGetCssVar = (prefix = 'joy') => systemCreateGetCssVar(prefix); export interface JoyTheme extends ThemeScales, @@ -411,7 +411,7 @@ export interface JoyTheme; + getCssVar: ReturnType; } export type SxProps = SystemSxProps; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index c1dc0275b20168..5525fec764e0d5 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -12,7 +12,7 @@ import getInitColorSchemeScript, { DEFAULT_MODE_STORAGE_KEY, } from './getInitColorSchemeScript'; import useCurrentColorScheme from './useCurrentColorScheme'; -import createGetThemeVar from './createGetThemeVar'; +import createGetCssVar from './createGetCssVar'; export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'; @@ -122,7 +122,7 @@ export default function createCssVarsProvider(options) { breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints, - getThemeVar: createGetThemeVar(prefix), + getCssVar: createGetCssVar(prefix), }; const styleSheet = {}; diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js index 108d620b075aa3..9f10e0c3536b25 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -95,7 +95,7 @@ describe('createCssVarsProvider', () => { expect(screen.getByTestId('text').textContent).to.equal('var(--mui-fontSize)'); }); - it('provide getThemeVar util', () => { + it('provide getCssVar util', () => { const { CssVarsProvider } = createCssVarsProvider({ theme: { colorSchemes: { light: { palette: { primary: { 500: '#ff5252' } } } }, @@ -105,7 +105,7 @@ describe('createCssVarsProvider', () => { }); const Text = () => { const theme = useTheme(); - return
{theme.getThemeVar('palette-primary-500')}
; + return
{theme.getCssVar('palette-primary-500')}
; }; render( diff --git a/packages/mui-system/src/cssVars/createGetThemeVar.test.ts b/packages/mui-system/src/cssVars/createGetCssVar.test.ts similarity index 84% rename from packages/mui-system/src/cssVars/createGetThemeVar.test.ts rename to packages/mui-system/src/cssVars/createGetCssVar.test.ts index fb321ea546d37d..451221a165d201 100644 --- a/packages/mui-system/src/cssVars/createGetThemeVar.test.ts +++ b/packages/mui-system/src/cssVars/createGetCssVar.test.ts @@ -1,9 +1,9 @@ import { expect } from 'chai'; -import createGetThemeVar from './createGetThemeVar'; +import createGetCssVar from './createGetCssVar'; -describe('createGetThemeVar', () => { +describe('createGetCssVar', () => { describe('default without prefix', () => { - const getThemeVar = createGetThemeVar(); + const getThemeVar = createGetCssVar(); it('should return correct CSS var with default prefix', () => { expect(getThemeVar('palette-primary-500')).to.equal('var(--palette-primary-500)'); }); @@ -28,7 +28,7 @@ describe('createGetThemeVar', () => { }); it('able to custom prefix', () => { - const getThemeVar = createGetThemeVar('custom'); + const getThemeVar = createGetCssVar('custom'); expect(getThemeVar('shadow-xs')).to.equal('var(--custom-shadow-xs)'); }); }); diff --git a/packages/mui-system/src/cssVars/createGetCssVar.ts b/packages/mui-system/src/cssVars/createGetCssVar.ts new file mode 100644 index 00000000000000..1d27fd61082f07 --- /dev/null +++ b/packages/mui-system/src/cssVars/createGetCssVar.ts @@ -0,0 +1,21 @@ +/** + * The benefit of this function is to help developers get CSS var from theme without specifying the whole variable + * and they does not need to remember the prefix (defined once). + */ +export default function createGetCssVar(prefix: string = '') { + function appendVar(...vars: string[]): string { + if (!vars.length) { + return ''; + } + return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`; + } + + // AdditionalVars makes `getCssVar` less strict, so it can be use like this `getCssVar('non-mui-variable')` without type error. + const getCssVar = ( + field: T | AdditionalVars, + ...vars: (T | AdditionalVars)[] + ) => { + return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`; + }; + return getCssVar; +} diff --git a/packages/mui-system/src/cssVars/createGetThemeVar.ts b/packages/mui-system/src/cssVars/createGetThemeVar.ts deleted file mode 100644 index 564b4a326edefb..00000000000000 --- a/packages/mui-system/src/cssVars/createGetThemeVar.ts +++ /dev/null @@ -1,16 +0,0 @@ -export default function createGetThemeVar(prefix: string = '') { - function appendVar(...vars: string[]): string { - if (!vars.length) { - return ''; - } - return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`; - } - - const getThemeVar = ( - field: T | AdditionalVars, - ...vars: (T | AdditionalVars)[] - ) => { - return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`; - }; - return getThemeVar; -} diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 5d95adc0ea7aa7..cf804500e25cea 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -161,5 +161,5 @@ export { default as ThemeProvider } from './ThemeProvider'; export * from './ThemeProvider'; export { default as unstable_createCssVarsProvider } from './cssVars'; -export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar'; +export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar'; export * from './cssVars'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index d1ca5cdf37e1bb..dcc7c985775884 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -46,4 +46,4 @@ export { default as useThemeWithoutDefault } from './useThemeWithoutDefault'; export * from './colorManipulator'; export { default as ThemeProvider } from './ThemeProvider'; export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider'; -export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar'; +export { default as unstable_createGetCssVar } from './cssVars/createGetCssVar'; diff --git a/test/utils/describeConformance.js b/test/utils/describeConformance.js index d0efa0cd65fb79..d57d63f204330a 100644 --- a/test/utils/describeConformance.js +++ b/test/utils/describeConformance.js @@ -208,7 +208,7 @@ export function testReactTestRenderer(element) { * @property {(node: React.ReactElement) => import('./createRenderer').MuiRenderResult} [render] - Should be a return value from createRenderer * @property {Array} [only] - If specified only run the tests listed * @property {any} refInstanceof - `ref` will be an instanceof this constructor. - * @property {Array} [skip] - Skip the specified tests + * @property {Array} [skip] - Skip the specified tests * @property {string} [testComponentsRootPropWith] - The host component that should be rendered instead. * @property {{ slotName: string, slotClassName: string } | Array<{ slotName: string, slotClassName: string }>} [testDeepOverrides] * @property {{ prop?: string, value?: any, styleKey: string }} [testStateOverrides] From 58464a8b6d7bbca92f527a043344ee8732bae3b8 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 7 Jan 2022 16:51:05 +0100 Subject: [PATCH 5/7] yarn proptypes --- packages/mui-joy/src/Switch/Switch.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx index a0b0b09756d1f5..cf6288c69f4c87 100644 --- a/packages/mui-joy/src/Switch/Switch.tsx +++ b/packages/mui-joy/src/Switch/Switch.tsx @@ -229,7 +229,11 @@ Switch.propTypes /* remove-proptypes */ = { * The props used for each slot inside the Switch. * @default {} */ - componentsProps: PropTypes.object, + componentsProps: PropTypes.shape({ + input: PropTypes.object, + thumb: PropTypes.object, + track: PropTypes.object, + }), /** * The default checked state. Use when the component is not controlled. */ From 1b05b0beb11e64b746e9cb74193b5c671ff817ae Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 7 Jan 2022 17:21:16 +0100 Subject: [PATCH 6/7] [docs] Lint markdown in the CI (#30395) --- .circleci/config.yml | 3 + .markdownlint.jsonc | 26 + .markdownlintignore | 3 + CHANGELOG.md | 68 +- CHANGELOG.old.md | 1355 +++++++++-------- CONTRIBUTING.md | 10 +- README.md | 3 +- benchmark/browser/README.md | 2 +- docs/packages/feedback/README.md | 4 +- .../blog/2019-developer-survey-results.md | 4 +- .../blog/2020-developer-survey-results.md | 34 +- docs/pages/blog/march-2019-update.md | 2 + docs/pages/blog/material-ui-v1-is-out.md | 6 +- docs/pages/blog/material-ui-v4-is-out.md | 36 +- docs/pages/blog/mui-x-v5.md | 2 +- docs/src/pages/components/grid/grid.md | 2 +- .../pages/components/snackbars/snackbars.md | 4 +- docs/src/pages/components/tables/tables.md | 2 +- .../templates/blog/blog-post.1.md | 12 +- .../templates/blog/blog-post.2.md | 2 +- .../templates/blog/blog-post.3.md | 2 +- .../pages/guides/migration-v4/migration-v4.md | 46 +- .../guides/styled-engine/styled-engine.md | 3 +- .../onepirate/modules/views/privacy.md | 5 + .../onepirate/modules/views/terms.md | 5 + docs/src/pages/styles/basics/basics.md | 2 +- .../src/pages/styles/typescript/typescript.md | 4 +- .../src/pages/system/properties/properties.md | 2 +- .../README.md | 2 +- examples/joy-cra-typescript/README.md | 2 +- package.json | 2 + packages/mui-codemod/README.md | 6 +- .../fixtures/game-icons/README.md | 1 - packages/typescript-to-proptypes/CHANGELOG.md | 22 +- scripts/README.md | 4 +- test/README.md | 6 +- yarn.lock | 131 +- 37 files changed, 994 insertions(+), 831 deletions(-) create mode 100644 .markdownlint.jsonc create mode 100644 .markdownlintignore diff --git a/.circleci/config.yml b/.circleci/config.yml index 937cb2f5b14ca9..0ff7ef8603944f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -202,6 +202,9 @@ jobs: - run: name: Lint JSON command: yarn jsonlint + - run: + name: Lint Markdown + command: yarn markdownlint test_static: <<: *defaults steps: diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc new file mode 100644 index 00000000000000..362ff0c8b45606 --- /dev/null +++ b/.markdownlint.jsonc @@ -0,0 +1,26 @@ +{ + // MD013/line-length. Already handled by Prettier. + "MD013": false, + // MD033/no-inline-html. We use it from time to time, it's fine. + "MD033": false, + // MD034/no-bare-urls. Not a concern for us, our Markdown interpreter supports it. + "MD034": false, + // MD014/commands-show-output. It's OK. + "MD014": false, + "MD025": { + // Heading level + "level": 1, + // RegExp for matching title in front matter + "front_matter_title": "" + }, + // MD024/no-duplicate-heading/no-duplicate-header + "MD024": { + "siblings_only": true + }, + // MD036/no-emphasis-as-heading/no-emphasis-as-header. It's OK. + "MD036": false, + // MD029/ol-prefix. Buggy + "MD029": false, + // MD004/ul-style. Buggy + "MD004": false +} diff --git a/.markdownlintignore b/.markdownlintignore new file mode 100644 index 00000000000000..31fad843d77d24 --- /dev/null +++ b/.markdownlintignore @@ -0,0 +1,3 @@ +node_modules +*-zh.md +*-pt.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 72ffde1e5d49e2..eccd2f12252bdc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -### [Versions](https://mui.com/versions/) +# [Versions](https://mui.com/versions/) ## 5.2.7 @@ -1225,7 +1225,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som replace `@material-ui/*` prefix with `@mui/*`: - ``` + ```sh @material-ui/system -> @mui/system @material-ui/styles -> @mui/styles @material-ui/lab -> @mui/lab @@ -1238,7 +1238,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som except these 3 packages that are renamed. - ``` + ```sh @material-ui/core => @mui/material // represents Material Design components. @material-ui/icons => @mui/icons-material // represents Material Design icons. @material-ui/unstyled => @mui/base // fully functional components with minimum styles. @@ -2611,6 +2611,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som ``` - ​[Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw + ```diff option.title === value.title} @@ -4184,7 +4185,7 @@ All contributors of this release in alphabetical order: @artola, @CyanoFresh, @d ## 5.0.0-alpha.23 -###### _Jan 14, 2021_ +_Jan 14, 2021_ A big thanks to the 15 contributors who made this release possible. Here are some highlights āœØ: @@ -4299,7 +4300,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som ## 5.0.0-alpha.22 -###### _Jan 4, 2021_ +_Jan 4, 2021_ A big thanks to the 14 contributors who made this release possible. Here are some highlights āœØ: @@ -4351,7 +4352,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ## 5.0.0-alpha.21 -###### _Dec 30, 2020_ +_Dec 30, 2020_ A big thanks to the 14 contributors who made this release possible. Here are some highlights āœØ: @@ -4424,7 +4425,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som ## 5.0.0-alpha.20 -###### _Dec 21, 2020_ +_Dec 21, 2020_ A big thanks to the 13 contributors who made this release possible. Here are some highlights āœØ: @@ -4502,7 +4503,7 @@ A big thanks to the 13 contributors who made this release possible. Here are som ## 5.0.0-alpha.19 -###### _Dec 13, 2020_ +_Dec 13, 2020_ A big thanks to the 24 contributors who made this release possible. Here are some highlights āœØ: @@ -4630,7 +4631,7 @@ A big thanks to the 24 contributors who made this release possible. Here are som ## 5.0.0-alpha.18 -###### _Dec 3, 2020_ +_Dec 3, 2020_ A big thanks to the 17 contributors who made this release possible. Here are some highlights āœØ: @@ -4722,7 +4723,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som ## 5.0.0-alpha.17 -###### _Nov 23, 2020_ +_Nov 23, 2020_ A big thanks to the 18 contributors who made this release possible. Here are some highlights āœØ: @@ -4889,7 +4890,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som ## 5.0.0-alpha.16 -###### _Nov 14, 2020_ +_Nov 14, 2020_ A big thanks to the 34 contributors who made this release possible. Here are some highlights āœØ: @@ -4993,7 +4994,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som ## 5.0.0-alpha.15 -###### _Nov 4, 2020_ +_Nov 4, 2020_ A big thanks to the 20 contributors who made this release possible. Here are some highlights āœØ: @@ -5105,7 +5106,7 @@ A big thanks to the 20 contributors who made this release possible. Here are som ## 5.0.0-alpha.14 -###### _Oct 23, 2020_ +_Oct 23, 2020_ A big thanks to the 23 contributors who made this release possible. Here are some highlights āœØ: @@ -5156,12 +5157,14 @@ Here are some highlights āœØ: You can read [their migration guide](https://popper.js.org/docs/v2/migration-guide/) or the following summary: - The CSS prefixes have changed: + ```diff popper: { zIndex: 1, - '&[x-placement*="bottom"] $arrow': { + '&[data-popper-placement*="bottom"] $arrow': { ``` + - Method names have changed. ```diff @@ -5276,7 +5279,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.13 -###### _Oct 17, 2020_ +_Oct 17, 2020_ A big thanks to the 25 contributors who made this release possible. Here are some highlights āœØ: @@ -5402,7 +5405,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.12 -###### _Oct 11, 2020_ +_Oct 11, 2020_ A big thanks to the 45 contributors who made this release possible. Here are some highlights āœØ: @@ -5626,7 +5629,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.11 -###### _Sep 26, 2020_ +_Sep 26, 2020_ A big thanks to the 29 contributors who made this release possible. Here are some highlights āœØ: @@ -5860,7 +5863,7 @@ More documentation are coming. ## 5.0.0-alpha.10 -###### _Sep 15, 2020_ +_Sep 15, 2020_ A big thanks to the 16 contributors who made this release possible. Here are some highlights āœØ: @@ -5925,13 +5928,13 @@ Here are some highlights āœØ: Before: - ``` + ```sh theme.spacing(2) => 16 ``` After: - ``` + ```sh theme.spacing(2) => '16px' ``` @@ -5990,7 +5993,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.9 -###### _Sep 6, 2020_ +_Sep 6, 2020_ A big thanks to the 14 contributors who made this release possible. Here are some highlights āœØ: @@ -6043,7 +6046,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.8 -###### _Aug 31, 2020_ +_Aug 31, 2020_ A big thanks to the 19 contributors who made this release possible. Here are some highlights āœØ: @@ -6219,7 +6222,7 @@ const theme = createMuiTheme({ ## 5.0.0-alpha.7 -###### _Aug 22, 2020_ +_Aug 22, 2020_ A big thanks to the 22 contributors who made this release possible. Here are some highlights āœØ: @@ -6349,7 +6352,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.6 -###### _Aug 13, 2020_ +_Aug 13, 2020_ A big thanks to the 26 contributors who made this release possible. Here are some highlights āœØ: @@ -6392,7 +6395,7 @@ Here are some highlights āœØ: ### `@material-ui/core@v5.0.0-alpha.6` -### Breaking changes +#### Breaking changes - [Avatar] Rename variant circle -> circular for consistency (#22015) @kodai3 Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: @@ -6551,7 +6554,7 @@ Here are some highlights āœØ: +}, ``` -### Changes +#### Changes - [Avatar] Custom variant (#22139) @mnajdova - [Badge] Add missing class key (#22095) @kodai3 @@ -6571,7 +6574,7 @@ Here are some highlights āœØ: ### `@material-ui/lab@v5.0.0-alpha.6` -### Breaking changes +#### Breaking changes - [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency (#22053) @kodai3 Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns: @@ -6583,7 +6586,7 @@ Here are some highlights āœØ: + ``` -### Changes +#### Changes - [Autocomplete] Add support for "{label: string}" data type as a default for "options" (#21992) @DanailH - [TreeView] Add disabled prop (#20133) @netochaves @@ -6635,7 +6638,7 @@ Here are some highlights āœØ: ## 5.0.0-alpha.5 -###### _July 28, 2020_ +_July 28, 2020_ A big thanks to the 18 contributors who made this release possible. @@ -6706,7 +6709,7 @@ A big thanks to the 18 contributors who made this release possible. ## 5.0.0-alpha.4 -###### _July 19, 2020_ +_July 19, 2020_ A big thanks to the 11 contributors who made this release possible. @@ -6748,7 +6751,7 @@ A big thanks to the 11 contributors who made this release possible. ## 5.0.0-alpha.3 -###### _July 12, 2020_ +_July 12, 2020_ A big thanks to the 14 contributors who made this release possible. @@ -6797,7 +6800,7 @@ A big thanks to the 14 contributors who made this release possible. ## 5.0.0-alpha.2 -###### _July 4, 2020_ +_July 4, 2020_ A big thanks to the 16 contributors who made this release possible. @@ -6859,7 +6862,7 @@ A big thanks to the 16 contributors who made this release possible. ## 5.0.0-alpha.1 -###### _June 27, 2020_ +_June 27, 2020_ A big thanks to the 33 contributors who made this release possible. Here are some highlights āœØ: @@ -6975,6 +6978,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som ``` - [Accordion] typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. + ```diff -, expanded: boolean) => {}} /> + {}} /> diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index 13e0a81ea18c01..758340bd4177ca 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -1,5 +1,9 @@ + + + ## 4.12.3 + _Jul 27, 2021_ @@ -186,7 +190,7 @@ You can expect similar releases like this one in the coming months. ## 4.11.3 -###### _Jan 24, 2021_ +_Jan 24, 2021_ This release fixes an important issue with Chrome 88. The usage of NaN as a CSS property with JSS throws an exception. @@ -225,7 +229,7 @@ This release fixes an important issue with Chrome 88. The usage of NaN as a CSS ## 4.11.2 -###### _Dec 2, 2020_ +_Dec 2, 2020_ This release widens the peer dependency scope of React to accept ^17.0.0. The change makes it easier for developers to upgrade React independently from Material-UI. The best support for React 17 will be found in Material-UI v5. @@ -262,7 +266,7 @@ This is a reminder that all ongoing work has moved to v5. This means a feature f ## 4.11.1 -###### _Nov 24, 2020_ +_Nov 24, 2020_ A big thanks to the 12 contributors who made this release possible. @@ -342,7 +346,7 @@ A big thanks to the 12 contributors who made this release possible. ## 4.11.0 -###### _July 1, 2020_ +_July 1, 2020_ A big thanks to the 8 contributors who made this release possible. @@ -404,7 +408,7 @@ A big thanks to the 8 contributors who made this release possible. ## 4.10.2 -###### _June 11, 2020_ +_June 11, 2020_ āš ļø This release marks the end of the active development on the v4.x versions, after 18 months of development. We are moving all ongoing efforts to v5 (`next` branch) āœØ. @@ -493,7 +497,7 @@ A big thanks to the 19 contributors who made this release possible. Here are som ## 4.10.1 -###### _June 1, 2020_ +_June 1, 2020_ A big thanks to the 21 contributors who made this release possible. @@ -545,7 +549,7 @@ A big thanks to the 21 contributors who made this release possible. ## 4.10.0 -###### _May 23, 2020_ +_May 23, 2020_ A big thanks to the 30 contributors who made this release possible. @@ -553,12 +557,15 @@ Here are some highlights āœØ: - šŸ¦“ Allow Skeleton to infer its dimensions from the children (#21097) @mikew. In the following example, the skeleton will take the size of the avatar. + ```jsx ``` + Follow [the docs to learn more](https://mui.com/components/skeleton/#inferring-dimensions). + - ā™æļø Add tabs accessibility docs section (#20965) @eps1lon. The behavior of the [keyboard navigation](https://mui.com/components/tabs/#keyboard-navigation) can be customized with the `selectionFollowsFocus` prop. - ā„¹ Improve tooltip arrow customizability (#21095) @sakulstra. @@ -633,7 +640,7 @@ Here are some highlights āœØ: ## 4.9.14 -###### _May 11, 2020_ +_May 11, 2020_ A big thanks to the 19 contributors who made this release possible. @@ -699,7 +706,7 @@ Here are some highlights āœØ: ## 4.9.13 -###### _May 4, 2020_ +_May 4, 2020_ A big thanks to the 27 contributors who made this release possible. @@ -768,7 +775,7 @@ Here are some highlights āœØ: ## 4.9.12 -###### _Apr 27, 2020_ +_Apr 27, 2020_ A big thanks to the 32 contributors who made this release possible. @@ -861,7 +868,7 @@ Here are some highlights āœØ: ## 4.9.11 -###### _Apr 18, 2020_ +_Apr 18, 2020_ A big thanks to the 25 contributors who made this release possible. @@ -913,7 +920,7 @@ A big thanks to the 25 contributors who made this release possible. ## 4.9.10 -###### _Apr 11, 2020_ +_Apr 11, 2020_ A big thanks to the 20 contributors who made this release possible. @@ -998,7 +1005,7 @@ You can expect the following: ## 4.9.9 -###### _Apr 4, 2020_ +_Apr 4, 2020_ A big thanks to the 20 contributors who made this release possible. @@ -1049,7 +1056,7 @@ A big thanks to the 20 contributors who made this release possible. ## 4.9.8 -###### _Mar 28, 2020_ +_Mar 28, 2020_ A big thanks to the 24 contributors who made this release possible. @@ -1132,7 +1139,7 @@ Here are some highlights āœØ: ## 4.9.7 -###### _Mar 19, 2020_ +_Mar 19, 2020_ ### `@material-ui/core@v4.9.7` @@ -1140,7 +1147,7 @@ Here are some highlights āœØ: ## 4.9.6 -###### _Mar 18, 2020_ +_Mar 18, 2020_ A big thanks to the 39 contributors who made this release possible. @@ -1148,10 +1155,10 @@ Here are some highlights āœØ: - āš›ļø Improve the DX in Visual Studio Code (#20079, #19962, #19280) @eps1lon @jedwards1211. - Preview the colors in right in the editor - ![](https://user-images.githubusercontent.com/12292047/76473891-2b70ad80-63fa-11ea-8afe-38ceee43eeaa.png) - ![](https://user-images.githubusercontent.com/12292047/76473890-2ad81700-63fa-11ea-9bb3-005f79a195e7.png) + ![colors](https://user-images.githubusercontent.com/12292047/76473891-2b70ad80-63fa-11ea-8afe-38ceee43eeaa.png) + ![colors.amber](https://user-images.githubusercontent.com/12292047/76473890-2ad81700-63fa-11ea-9bb3-005f79a195e7.png) - Preview the purpose of each theme.spacing arguments right in the editor - ![](https://user-images.githubusercontent.com/12292047/75786858-31192400-5d66-11ea-9382-94dd74c42985.png) + ![spacing](https://user-images.githubusercontent.com/12292047/75786858-31192400-5d66-11ea-9382-94dd74c42985.png) - Leverage code snippets to save time with [this extension](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets). - šŸ” 12 patches on the Autocomplete component. - šŸ’„ Polish on the Pagination component (#19933, #19964, #19966, #19987) @pvdstel @eps1lon @mbrookes. @@ -1263,7 +1270,7 @@ Here are some highlights āœØ: ## 4.9.5 -###### _Feb 29, 2020_ +_Feb 29, 2020_ A big thanks to the 15 contributors who made this release possible. @@ -1304,7 +1311,7 @@ Here are some highlights āœØ: ## 4.9.4 -###### _Feb 23, 2020_ +_Feb 23, 2020_ A big thanks to the 18 contributors who made this release possible. @@ -1353,7 +1360,7 @@ Here are some highlights āœØ: ## 4.9.3 -###### _Feb 16, 2020_ +_Feb 16, 2020_ A big thanks to the 18 contributors who made this release possible. @@ -1395,7 +1402,7 @@ A big thanks to the 18 contributors who made this release possible. ## 4.9.2 -###### _Feb 9, 2020_ +_Feb 9, 2020_ A big thanks to the 24 contributors who made this release possible. @@ -1441,7 +1448,7 @@ A big thanks to the 24 contributors who made this release possible. ## 4.9.1 -###### _Feb 2, 2020_ +_Feb 2, 2020_ A big thanks to the 39 contributors who made this release possible. @@ -1527,7 +1534,7 @@ Here are some highlights āœØ: ## 4.9.0 -###### _Jan 22, 2020_ +_Jan 22, 2020_ A big thanks to the 43 contributors who made this release possible. @@ -1631,7 +1638,7 @@ Here are some highlights āœØ: ## 4.8.3 -###### _Jan 6, 2020_ +_Jan 6, 2020_ A big thanks to the 19 contributors who made this release possible. @@ -1676,7 +1683,7 @@ Here are some highlights since 4.8.0 āœØ: ## 4.8.2 -###### _Dec 30, 2019_ +_Dec 30, 2019_ A big thanks to the 22 contributors who made this release possible. @@ -1733,7 +1740,7 @@ A big thanks to the 22 contributors who made this release possible. ## 4.8.1 -###### _Dec 24, 2019_ +_Dec 24, 2019_ A big thanks to the 24 contributors who made this release possible. @@ -1777,7 +1784,7 @@ A big thanks to the 24 contributors who made this release possible. ## 4.8.0 -###### _Dec 14, 2019_ +_Dec 14, 2019_ A big thanks to the 29 contributors who made this release possible. @@ -1840,7 +1847,7 @@ Here are some highlights āœØ: ## 4.7.2 -###### _Dec 7, 2019_ +_Dec 7, 2019_ A big thanks to the 18 contributors who made this release possible. @@ -1879,7 +1886,7 @@ A big thanks to the 18 contributors who made this release possible. ## 4.7.1 -###### _Dec 1, 2019_ +_Dec 1, 2019_ A big thanks to the 27 contributors who made this release possible. @@ -1939,7 +1946,7 @@ Here are some highlights āœØ: ## 3.9.4 -###### _Nov 28, 2019_ +_Nov 28, 2019_ ### `@material-ui/core@v3.9.4` @@ -1949,7 +1956,7 @@ Here are some highlights āœØ: ## 4.7.0 -###### _Nov 22, 2019_ +_Nov 22, 2019_ A big thanks to the 27 contributors who made this release possible. @@ -2021,7 +2028,7 @@ Here are some highlights āœØ: ## 4.6.1 -###### _Nov 12, 2019_ +_Nov 12, 2019_ A big thanks to the 19 contributors who made this release possible. @@ -2112,7 +2119,7 @@ index 757d66a97..a4f36edd5 100644 ## 4.6.0 -###### _Nov 5, 2019_ +_Nov 5, 2019_ A big thanks to the 26 contributors who made this release possible. @@ -2193,7 +2200,7 @@ We are proud of the community. Let's keep this trend going šŸš€. ## 4.5.2 -###### _Oct 28, 2019_ +_Oct 28, 2019_ A big thanks to the 48 contributors who made this release possible! @@ -2303,7 +2310,7 @@ Here are some highlights āœØ: ## 4.5.1 -###### _Oct 12, 2019_ +_Oct 12, 2019_ A big thanks to the 28 contributors who made this release possible! @@ -2398,7 +2405,7 @@ Here are some highlights āœØ: ## 4.5.0 -###### _Oct 2, 2019_ +_Oct 2, 2019_ A big thanks to the 20 contributors who made this release possible! @@ -2450,7 +2457,7 @@ Here are some highlights āœØ: - [system] Fix props being required from `style` function (#17534) @abukurov -### `@material-ui/codemod@v4.5.0` +### `@material-ui/styles@v4.5.0` - [styles] Bump jss dependencies to v10.0.0 stable (#17536) @eps1lon @@ -2487,7 +2494,7 @@ Here are some highlights āœØ: ## 4.4.3 -###### _Sep 22, 2019_ +_Sep 22, 2019_ A big thanks to the 23 contributors who made this release possible! This is a stability release. @@ -2557,7 +2564,7 @@ This is a stability release. ## 4.4.2 -###### _Sep 11, 2019_ +_Sep 11, 2019_ A big thanks to the 7 contributors who made this release possible! This is a quick release after v4.4.1 to solve 3 regressions. @@ -2582,7 +2589,7 @@ This is a quick release after v4.4.1 to solve 3 regressions. ## 4.4.1 -###### _Sep 8, 2019_ +_Sep 8, 2019_ A big thanks to the 21 contributors who made this release possible! @@ -2655,7 +2662,7 @@ Here are some highlights āœØ: ## 4.4.0 -###### _Aug 31, 2019_ +_Aug 31, 2019_ A big thanks to the 29 contributors who made this release possible! @@ -2718,7 +2725,7 @@ Here are some highlights āœØ: ## 4.3.3 -###### _Aug 21, 2019_ +_Aug 21, 2019_ A big thanks to the 22 contributors who made this release possible! @@ -2774,7 +2781,7 @@ Here are some highlights āœØ: ## 4.3.2 -###### _Aug 10, 2019_ +_Aug 10, 2019_ A big thanks to the 22 contributors who made this release possible! @@ -2833,7 +2840,7 @@ Here are some highlights āœØ: ## 4.3.1 -###### _Aug 03, 2019_ +_Aug 03, 2019_ A big thanks to the 18 contributors who made this release possible! @@ -2868,7 +2875,7 @@ A big thanks to the 18 contributors who made this release possible! ## 4.3.0 -###### _July 28, 2019_ +_July 28, 2019_ A big thanks to the 23 contributors who made this release possible! @@ -3003,7 +3010,7 @@ Here are some highlights āœØ: ## 4.2.1 -###### _July 17, 2019_ +_July 17, 2019_ A big thanks to the 25 contributors who made this release possible! @@ -3080,7 +3087,7 @@ Here are some highlights āœØ: ## 4.2.0 -###### _July 6, 2019_ +_July 6, 2019_ A big thanks to the 24 contributors who made this release possible! @@ -3157,7 +3164,7 @@ Here are some highlights āœØ: ## 4.1.3 -###### _June 25, 2019_ +_June 25, 2019_ A big thanks to the 4 contributors who made this release possible! This is a quick release after a regression that occurred in 4.1.2. @@ -3180,7 +3187,7 @@ This is a quick release after a regression that occurred in 4.1.2. ## 4.1.2 -###### _June 23, 2019_ +_June 23, 2019_ A big thanks to the 30 contributors who made this release possible! @@ -3272,7 +3279,7 @@ Here are some highlights āœØ: ## 4.1.1 -###### _June 13, 2019_ +_June 13, 2019_ A big thanks to the 10 contributors who made this release possible! @@ -3329,7 +3336,7 @@ Here are some highlights āœØ: ## 4.1.0 -###### _June 10, 2019_ +_June 10, 2019_ A A big thanks to the 26 contributors who made this release possible! @@ -3413,7 +3420,7 @@ Here are some highlights āœØ: ## 4.0.2 -###### _June 3, 2019_ +_June 3, 2019_ A A big thanks to the 30 contributors who made this release possible! @@ -3495,7 +3502,7 @@ Here are some highlights āœØ: ## 4.0.1 -###### _May 27, 2019_ +_May 27, 2019_ A A big thanks to the 23 contributors who made this release possible! @@ -3574,7 +3581,7 @@ Here are some highlights āœØ: ## 4.0.0 -###### _May 23, 2019_ +_May 23, 2019_ [Material-UI v4 is out šŸŽ‰](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701) @@ -3608,7 +3615,7 @@ Some statistics with v4 compared to the release of v1 one year ago: ## 4.0.0-rc.0 -###### _May 20, 2019_ +_May 20, 2019_ A A big thanks to the 17 contributors who made this release possible! @@ -3690,7 +3697,7 @@ The release of v4 is imminent, stay tuned! ## 4.0.0-beta.2 -###### _May 13, 2019_ +_May 13, 2019_ A A big thanks to the 13 contributors who made this release possible! @@ -3744,7 +3751,7 @@ This is a stability release preparing v4. ## 4.0.0-beta.1 -###### _May 5, 2019_ +_May 5, 2019_ A A big thanks to the 19 contributors who made this release possible! @@ -3826,7 +3833,7 @@ Here are some highlights āœØ: ## 4.0.0-beta.0 -###### _Apr 28, 2019_ +_Apr 28, 2019_ A A big thanks to the 21 contributors who made this release possible! @@ -3960,7 +3967,7 @@ You will learn more about v4 in the final release blog post and our plans for th ## 4.0.0-alpha.8 -###### _Apr 17, 2019_ +_Apr 17, 2019_ A A big thanks to the 27 contributors who made this release possible! @@ -4125,7 +4132,7 @@ We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May. ## 4.0.0-alpha.7 -###### _Apr 8, 2019_ +_Apr 8, 2019_ A A big thanks to the 24 contributors who made this release possible! @@ -4228,7 +4235,7 @@ Here are some highlights āœØ: ## 4.0.0-alpha.6 -###### _Mar 30, 2019_ +_Mar 30, 2019_ A A big thanks to the 20 contributors who made this release possible! @@ -4314,7 +4321,7 @@ Here are some highlights āœØ: ## 3.9.3 -###### _Mar 28, 2019_ +_Mar 28, 2019_ A big thanks to the 11 contributors who made this release possible! @@ -4344,7 +4351,7 @@ N/A ## 4.0.0-alpha.5 -###### _Mar 23, 2019_ +_Mar 23, 2019_ A A big thanks to the 23 contributors who made this release possible! @@ -4425,7 +4432,7 @@ Here are some highlights āœØ: ## 4.0.0-alpha.4 -###### _Mar 17, 2019_ +_Mar 17, 2019_ A A big thanks to the 17 contributors who made this release possible! @@ -4518,7 +4525,7 @@ Here are some highlights āœØ: ## 4.0.0-alpha.3 -###### _Mar 10, 2019_ +_Mar 10, 2019_ A A big thanks to the 14 contributors who made this release possible! @@ -4578,6 +4585,7 @@ Here are some highlights āœØ: ``` - Remove the `@material-ui/styles/install` module. + ```diff -import { install } from '@material-ui/styles'; -install(); @@ -4617,7 +4625,7 @@ Here are some highlights āœØ: ## 4.0.0-alpha.2 -###### _Mar 3, 2019_ +_Mar 3, 2019_ A A big thanks to the 23 contributors who made this release possible! @@ -4639,7 +4647,7 @@ Here are some highlights āœØ: We have removed the `labelContainer`, `label` and `labelWrapped` class keys. We have removed 2 intermediary DOM elements. You should be able to move the custom styles to the root class key. - ![](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png) + ![wrapper](https://user-images.githubusercontent.com/3165635/53287870-53a35500-3782-11e9-9431-2d1a14a41be0.png) - [Table] Add dense support (#14561) @leMaik @@ -4701,7 +4709,7 @@ Here are some highlights āœØ: - [utils] Drop componentPropType in favor of PropTypes.elementType (#14602) @eps1lon -## Docs +### Docs - [MobileStepper] Remove unused classname in example (#14597) @charlax - [docs] Update the Team (#14613) @oliviertassinari @@ -4720,7 +4728,7 @@ Here are some highlights āœØ: - [docs] Add simple list TypeScript demo (#14485) @eps1lon - [docs] Fix wrong source code URLs (#14716) @oliviertassinari -## Core +### Core - [core] Fix webstorm autocompletion (#14599) @eps1lon - [ci] Use dangerJS to report bundle size changes (#14587) @eps1lon @@ -4738,7 +4746,7 @@ Here are some highlights āœØ: ## 4.0.0-alpha.1 -###### _Feb 20, 2019_ +_Feb 20, 2019_ A A big thanks to the 16 contributors who made this release possible! @@ -4850,7 +4858,7 @@ Remove the first option argument of `withTheme()`. The first argument was a plac ## 4.0.0-alpha.0 -###### _Feb 12, 2019_ +_Feb 12, 2019_ This is our first unstable release toward Material-UI v4.0.0. We try to release a major every 6-12 months. This gives us the opportunity to remove deprecated APIs, upgrade our peer dependencies and more importantly, keep up with the direction the community is taking. @@ -5061,7 +5069,7 @@ _Tip: you can provide more than one argument: `theme.spacing(1, 2) // = '8px 16p ## 3.9.2 -###### _Feb 03, 2019_ +_Feb 03, 2019_ A big thanks to the 16 contributors who made this release possible! @@ -5121,7 +5129,7 @@ Here are some highlights āœØ: ## 3.9.1 -###### _Jan 26, 2019_ +_Jan 26, 2019_ A big thanks to the 30 contributors who made this release possible! @@ -5198,7 +5206,7 @@ Here are some highlights āœØ: ## 3.9.0 -###### _Jan 14, 2019_ +_Jan 14, 2019_ A big thanks to the 17 contributors who made this release possible! @@ -5250,7 +5258,7 @@ Here are some highlights āœØ: ## 3.8.3 -###### _Jan 9, 2019_ +_Jan 9, 2019_ A big thanks to the 5 contributors who made this release possible! @@ -5269,7 +5277,7 @@ We are making a quick release to fix an important TypeScript regression. ## 3.8.2 -###### _Jan 7, 2019_ +_Jan 7, 2019_ A big thanks to the 20 contributors who made this release possible! @@ -5344,7 +5352,7 @@ Here are some highlights āœØ: ## 3.8.1 -###### _Dec 30, 2018_ +_Dec 30, 2018_ ### `@material-ui/core@v3.8.1` @@ -5364,7 +5372,7 @@ Here are some highlights āœØ: ## 3.8.0 -###### _Dec 30, 2018_ +_Dec 30, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -5435,7 +5443,7 @@ The Tabs `fullWidth` and `scrollable` properties can't be used at the same time. ## 3.7.1 -###### _Dec 22, 2018_ +_Dec 22, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -5480,7 +5488,7 @@ Here are some highlights āœØ: ## 3.7.0 -###### _Dec 17, 2018_ +_Dec 17, 2018_ A big thanks to the 11 contributors who made this release possible! @@ -5547,7 +5555,7 @@ you to add them up quickly in your head without having to worry about decimals. ## 3.6.2 -###### _Dec 9, 2018_ +_Dec 9, 2018_ A big thanks to the 20 contributors who made this release possible! @@ -5612,7 +5620,7 @@ Here are some highlights āœØ: ## 3.6.1 -###### _Dec 1, 2018_ +_Dec 1, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -5659,7 +5667,7 @@ It's a stability release after v3.6.0. It contains tons of bug fixes šŸ›. ## 3.6.0 -###### _Nov 26, 2018_ +_Nov 26, 2018_ A big thanks to the 28 contributors who made this release possible! @@ -5766,7 +5774,7 @@ import Divider from '@material-ui/core/Divider'; ## 3.5.1 -###### _Nov 13, 2018_ +_Nov 13, 2018_ A big thanks to the 13 contributors who made this release possible! @@ -5872,13 +5880,13 @@ _Powered by [JSS](https://github.com/cssinjs/jss)._ ## 3.5.0 -###### _Nov 12, 2018_ +_Nov 12, 2018_ _Corrupted, to not use._ ## 3.4.0 -###### _Nov 5, 2018_ +_Nov 5, 2018_ A big thanks to the 16 contributors who made this release possible! @@ -5932,7 +5940,7 @@ Here are some highlights āœØ: ## 3.3.2 -###### _Oct 27, 2018_ +_Oct 27, 2018_ A big thanks to the 17 contributors who made this release possible! @@ -5979,7 +5987,7 @@ Here are some highlights āœØ: ## 3.3.1 -###### _Oct 24, 2018_ +_Oct 24, 2018_ A big thanks to the 8 contributors who made this release possible! @@ -6000,7 +6008,7 @@ This is a quick patch after an important regression with the Modal component. ## 3.3.0 -###### _Oct 21, 2018_ +_Oct 21, 2018_ A big thanks to the 26 contributors who made this release possible! @@ -6064,7 +6072,7 @@ Here are some highlights āœØ: ## 3.2.2 -###### _Oct 16, 2018_ +_Oct 16, 2018_ A big thanks to the 3 contributors who made this release possible! This is a quick patch after important regressions. @@ -6081,7 +6089,7 @@ This is a quick patch after important regressions. ## 3.2.1 -###### _Oct 14, 2018_ +_Oct 14, 2018_ A big thanks to the 19 contributors who made this release possible! @@ -6142,7 +6150,7 @@ Here are some highlights āœØ: ## 3.2.0 -###### _Oct 8, 2018_ +_Oct 8, 2018_ A big thanks to the 18 contributors who made this release possible! @@ -6230,7 +6238,7 @@ This change updates the variant wording to match the one used in the Material De ## 3.1.2 -###### _Sep 30, 2018_ +_Sep 30, 2018_ A big thanks to the 16 contributors who made this release possible! It contains many bug fixes šŸ› and documentation improvements šŸ“. @@ -6277,7 +6285,7 @@ It contains many bug fixes šŸ› and documentation improvements šŸ“. ## 3.1.1 -###### _Sep 24, 2018_ +_Sep 24, 2018_ A big thanks to the 21 contributors who made this release possible! It contains many bug fixes šŸ› and documentation improvements šŸ“. @@ -6332,7 +6340,7 @@ It contains many bug fixes šŸ› and documentation improvements šŸ“. ## 3.1.0 -###### _Sep 16, 2018_ +_Sep 16, 2018_ A big thanks to the 24 contributors who made this release possible! @@ -6396,7 +6404,7 @@ Here are some highlights āœØ: ## 3.0.3 -###### _Sep 9, 2018_ +_Sep 9, 2018_ A big thanks to the 13 contributors who made this release possible! @@ -6432,7 +6440,7 @@ A big thanks to the 13 contributors who made this release possible! ## 3.0.2 -###### _Sep 3, 2018_ +_Sep 3, 2018_ A big thanks to the 16 contributors who made this release possible! @@ -6465,7 +6473,7 @@ Here are some highlights āœØ: +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [SpeedDialAction] Update tooltipPlacement propTypes (#12730) @Primajin - [Slider] Add missing packages (#12745) @GermanBluefox @@ -6490,7 +6498,7 @@ N/A ## 3.0.1 -###### _Aug 28, 2018_ +_Aug 28, 2018_ A big thanks to the 10 contributors who made this release possible! @@ -6528,7 +6536,7 @@ It's also a good opportunity to upgrade to the stable release of Babel 7. ## 3.0.0 -###### _Aug 27, 2018_ +_Aug 27, 2018_ A big thanks to the 27 contributors who made this release possible! @@ -6555,7 +6563,7 @@ Firefox 52 is the last version supported by Windows XP. The market share of Firefox 45 is 0.03%. We use the same strategy for Chrome. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Input] Improve type checking for inputProps (#12591) @eps1lon - [ClickAwayListener] Prevent rerendering (#12613) @shcherbyakdev @@ -6569,7 +6577,7 @@ We use the same strategy for Chrome. - [CardActionArea] Add CardActionArea component (#12624) @yuchi - [ListItem] Move the selected prop from MenuItem to ListItem (#12602) @the-question -#### Docs +### Docs - [examples] Update ts example to be closer to the official docs (#12593) @eps1lon - [docs] Fix a display issue on IE11 (#12599) @oliviertassinari @@ -6587,7 +6595,7 @@ We use the same strategy for Chrome. - [docs] Autocomplete react-select dropdown overlay (#12664) @gerhat - [docs] Fix typo in usage.md (#12666) @DeveloperDavo -#### Core +### Core - [core] Better Windows support for the API generation (#12584) @adeelibr - [TypeScript] Update SnackbarContent type def to accept action prop as array (#12595) @cngraf @@ -6607,7 +6615,7 @@ We use the same strategy for Chrome. ## 1.5.1 -###### _Aug 19, 2018_ +_Aug 19, 2018_ A big thanks to the 22 contributors who made this release possible! @@ -6621,7 +6629,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tab] Fix fullWidth CSS (#12495) @jankjr - [TextField] Fix disabled prop only affecting the Input component (#12489) @WreckedArrow @@ -6637,7 +6645,7 @@ N/A - [Dialog] Simplify the DialogContentText implementation (#12577) @oliviertassinari - [Popover] Fix wrong getContentAnchorEl definition (#12562) @duvet86 -#### Docs +### Docs - [docs] Tweak dashboard example nav list heading (#12501) @JoshuaLicense - [docs] Fix a typo in the Modal page (#12502) @melaniebcohen @@ -6655,7 +6663,7 @@ N/A - [docs] Improve TypeScript issue assistance (#12560) @eps1lon - [docs] Add notistack in the related projects (#12578) @oliviertassinari -#### Core +### Core - [typescript] Style typing improvements (#12492) @pelotom - [core] Should run the tests when needed (#12510) @oliviertassinari @@ -6673,7 +6681,7 @@ N/A ## 1.5.0 -###### _Aug 12, 2018_ +_Aug 12, 2018_ A big thanks to the 23 contributors who made this release possible! This is a dense release! @@ -6689,7 +6697,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Accept boolean (#12429) @oliviertassinari - [icons] Resize svg icons (#12356) @the-question @@ -6704,7 +6712,7 @@ N/A - [Button] Make the outlined variant better leverage the color (#12473) @essuraj - [Tooltip] Hide the tooltip as soon as an exit event triggers (#12488) @oliviertassinari -#### Docs +### Docs - [docs] Fix react-select multiselection wrapping (#12412) @henkvhest - [docs] Add some Render Props demos (#12366) @jedwards1211 @@ -6724,7 +6732,7 @@ N/A - [docs] Fix link to twitter account (#12482) @patcito - [docs] Try CodeFund over Carbon (#12484) @oliviertassinari -#### Core +### Core - [typescript] Synced with PR #12373 (#12439) @franklixuefei - [core] Add hoverOpacity to TypeAction interface (#12455) @hassan-zaheer @@ -6739,7 +6747,7 @@ N/A ## 1.4.3 -###### _Aug 4, 2018_ +_Aug 4, 2018_ A big thanks to the 15 contributors who made this release possible! This release focuses on bug fixes šŸ›. @@ -6748,7 +6756,7 @@ This release focuses on bug fixes šŸ›. N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tooltip] Add default css max-width and customization demo (#12338) @simoami - [Step] Add completed class to the root (#12339) @kylezinter @@ -6763,7 +6771,7 @@ N/A - [MobileStepper] Add a LinearProgressProps property (#12404) @oliviertassinari - [Textarea] Add back defensive branch logic (#12406) @kanzelm3 -#### Docs +### Docs - [docs] Add markdown code to Interactive Grid (#12333) @itelo - [docs] Document how to use the Select with a label and a placeholder (#12342) @oliviertassinari @@ -6773,7 +6781,7 @@ N/A - [docs] Fix ChipPlayground generated code (#12401) @mbrookes - [docs] Add Tomahawk boilerplate to the related projects (#12393) @goemen -#### Core +### Core - [core] Upgrade the dependencies (#12409) @oliviertassinari @@ -6783,7 +6791,7 @@ N/A ## 1.4.2 -###### _Jul 29, 2018_ +_Jul 29, 2018_ A big thanks to the 22 contributors who made this release possible! I hope we will soon beat our previous record: 30 contributors in a single week. @@ -6799,7 +6807,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tabs] Reduce the bundle size (#12256) @oliviertassinari - [Menu] Add null as acceptable value of anchorEl (#12249) @LAITONEN @@ -6823,7 +6831,7 @@ N/A - [LinearProgress] Fix wrong style rule usage (#12319) @agentmilindu - [Popper] Fix modifiers appearing as attribute of div (#12329) @skeithtan -#### Docs +### Docs - [docs] Fix typo (#12248) @johnjacobkenny - [docs] Add typekev.com to showcase page (#12243) @typekev @@ -6839,7 +6847,7 @@ N/A - [docs] Document NoSsr (#12317) @oliviertassinari - [docs] Improve the docs to have matches (#12322) @oliviertassinari -#### Core +### Core - [core] Upgrade dev dependencies (#12323) @oliviertassinari @@ -6851,7 +6859,7 @@ N/A ## 1.4.1 -###### _Jul 22, 2018_ +_Jul 22, 2018_ A big thanks to the 15 contributors who made this release possible! @@ -6882,7 +6890,7 @@ Here are some highlights āœØ: @material-ui/icons@2.0.0 allows React users to take advantage of the icons revamp the Material Design Team has been recently released. Some icons have been removed, ~150 new icons have been added, and some icons have been renamed. There are also currently some issues with the size of certain icons. Please refer to #12016 for further details. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tab] Fix maxWidth issue with fullWidth mode (#12158) @chenop - [Popper] Update TypeScript definitions (#12161) @Slessi @@ -6905,7 +6913,7 @@ Here are some highlights āœØ: - [Textarea] Simplification of the code (#12238) @oliviertassinari - [Tabs] Small changes investigating #11624 (#12239) @oliviertassinari -#### Docs +### Docs - [docs] Add Toggle Selection Control to 'Migration From v0.x' Document (#12149) @shabareesh - [docs] Add Menu Item to 'Migration From v0.x' Document (#12150) @shabareesh @@ -6915,7 +6923,7 @@ Here are some highlights āœØ: - [docs] Document the CSS API (#12174) @mbrookes - [docs] An iteration on the SSR Troubleshooting section (#12229) @oliviertassinari -#### Core +### Core - [core] Upgrade dev dependencies (#12156) @oliviertassinari - [core] Add missing unwrap export to test-utils type definition (#12184) @kallebornemark @@ -6932,7 +6940,7 @@ Here are some highlights āœØ: ## 1.4.0 -###### _Jul 14, 2018_ +_Jul 14, 2018_ A big thanks to the 21 contributors who made this release possible. Here are some highlights āœØ: @@ -6954,7 +6962,7 @@ You can now dynamically change the theme of the whole documentation site. N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Icons] Misc fixes and optimizations (#12036) @mbrookes - [Tooltip] Rework the implementation (#12085) @oliviertassinari @@ -6967,7 +6975,7 @@ N/A - [Toolbar] Add dense variant (#12075) @srilman - [Typography] Fix display2 cuts off the bottom of a 'g' (#12146) @Skaronator -#### Docs +### Docs - [docs] Fix typo (#12046) @AlexanderLukin - [docs] Fix wrong icon names (#12042) @AlexanderLukin @@ -6989,7 +6997,7 @@ N/A - [docs] Add a comment that React 16.3.0 is a peer dependency (#12145) @chenop - [Table] Document the CSS API (#12147) @chenop -#### Core +### Core - [core] Upgrade the dev dependencies (#12049) @oliviertassinari - [core] Improve the prop-types of shape (#12098) @oliviertassinari @@ -7005,7 +7013,7 @@ N/A ## 1.3.1 -###### _Jul 2, 2018_ +_Jul 2, 2018_ A big thanks to the 13 contributors who made this release possible. @@ -7019,7 +7027,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Fix some W3C issues (#11983) @oliviertassinari - [Icon] Add a fontSize prop which accepts default and inherit (#11986) @sakulstra @@ -7033,7 +7041,7 @@ N/A - [ExpansionPanelSummary] Add IconButtonProps property (#12035) @dakotamurphyucf - [Dialog] Document the scroll property (#12025) @oliviertassinari -#### Docs +### Docs - [docs] Use \_app.js instead of wrapping every page by withRoot() (#11989) @NikitaVlaznev - [docs] Link RootRef in the FAQ (#12005) @scottastrophic @@ -7042,7 +7050,7 @@ N/A - [docs] Small spelling fix (#12028) @danh293 - [docs] Add a demo with Font Awesome (#12027) @oliviertassinari -#### Core +### Core - [typescript][createmuitheme] Fix typings & deepmerge shape (#11993) @franklixuefei - [core] Warn about Children.map & Fragment (#12021) @oliviertassinari @@ -7054,7 +7062,7 @@ N/A ## 1.3.0 -###### _Jun 26, 2018_ +_Jun 26, 2018_ A big thanks to the 10 contributors who made this release possible. @@ -7068,7 +7076,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [FormControl] Correct minor typo in text (#11931) @FluentSynergyDW - [Grid] Add `auto` to TypeScript definitions (#11933) @woobianca @@ -7079,7 +7087,7 @@ N/A - [theme] Add border-radius to the theme (#11847) @itelo - [Dialog] Add a scroll property (#11974) @oliviertassinari -#### Docs +### Docs - [Showcase] Add posters galore (react-admin) (#11939) @fzaninotto - [docs] Update ts example (#11949) @kevinhughes27 @@ -7088,7 +7096,7 @@ N/A - [docs] Better API wording (#11973) @oliviertassinari - [docs] In TypeScript doc, add missing `createStyles` to import (#11975) @Sylphony -#### Core +### Core - [typescript] Fix Typings for disableTouchRipple and allVariants (#11944) @franklixuefei - [core] Upgrade the dev dependencies (#11954) @oliviertassinari @@ -7102,7 +7110,7 @@ N/A ## 1.2.3 -###### _Jun 20, 2018_ +_Jun 20, 2018_ A big thanks to the 6 contributors who made this release possible. @@ -7113,7 +7121,7 @@ We are making it outside of the normal schedule. N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ButtonBase] Fix exception (#11905) @oliviertassinari - [NoSSR] Add a fallback property (#11907) @oliviertassinari @@ -7121,13 +7129,13 @@ N/A - [Tooltip] Revert update react-popper (#11920) @oliviertassinari - [Select] Fix classes merge issue (#11904) @C-Rodg -#### Docs +### Docs - [docs] Document jss-nested rule reference feature (#11901) @i8ramin - [docs] Correct markdown example from svg icon (#11922) @GabrielDuarteM - [docs] TS decorating reword (#11923) @swpease -#### Core +### Core N/A @@ -7137,7 +7145,7 @@ N/A ## 1.2.2 -###### _Jun 18, 2018_ +_Jun 18, 2018_ A big thanks to the 16 contributors who made this release possible. @@ -7151,7 +7159,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ClickAwayListener] Add a demo (#11801) @oliviertassinari - [Grid] Add support a auto value (#11804) @oliviertassinari @@ -7175,7 +7183,7 @@ N/A - [CircularProgress] End of line shape: use butt (#11888) @Modestas - [Select] Fix reflow in render (#11891) @oliviertassinari -#### Docs +### Docs - [docs] Add structured data (#11798) @oliviertassinari - [docs] Add a link to a CSS-in-JS egghead.io course (98168a2c749d8da2376d6a997145e3622df71bff) @kof @@ -7189,7 +7197,7 @@ N/A - [examples] Add Server Rendering implementation (#11880) @oliviertassinari - [docs] Update react-swipeable-views to fix a warning (#11890) @oliviertassinari -#### Core +### Core - [core] Misc (#11797) @oliviertassinari - [core] Better `component` prop types (#11863) @jedwards1211 @@ -7203,7 +7211,7 @@ N/A ## 1.2.1 -###### _Jun 10, 2018_ +_Jun 10, 2018_ A big thanks to the 15 contributors who made this release possible. @@ -7217,7 +7225,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Add a placeholder demo (#11706) @oliviertassinari - [RootRef] Update RootRef.d.ts (#11708) @franklixuefei @@ -7232,7 +7240,7 @@ N/A - [TextField] Bind the focus/blur explicitly (#11789) @oliviertassinari - [RadioGroup] Fix onChange chaining (#11793) @oliviertassinari -#### Docs +### Docs - [docs] Property !== attribute (#11694) @adeelibr - [docs] Add Trafikito.com to showcase (#11716) @liesislukas @@ -7245,7 +7253,7 @@ N/A - [docs] Fix typo (#11787) @BenDiuguid - [docs] Better troubleshooting action for the hydration mismatch (#11792) @oliviertassinari -#### Core +### Core - [core] Remove parser specification to fix JSON issue (#11763) @ryanpcmcquen - [core] Throw if react >= 16.3.0 requirement isn't matched (#11779) @oliviertassinari @@ -7259,7 +7267,7 @@ N/A ## 1.2.0 -###### _Jun 3, 2018_ +_Jun 3, 2018_ A big thanks to the 23 contributors who made this release possible. @@ -7273,7 +7281,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Snackbar] Add customization example (#11597) @mbrn - [Menu] Fix a regression on Edge (#11614) @oliviertassinari @@ -7289,7 +7297,7 @@ N/A - [SwipeableDrawer] Fix a regression introduced in React 16.4.0 (#11689) @oliviertassinari - [RootRef] Allow using React.createRef api with RootRef component (#11681) @TrySound -#### Docs +### Docs - [docs] Better API spread section (#11598) @oliviertassinari - [docs] Update Wertarbyte components link (#11603) @leMaik @@ -7304,7 +7312,7 @@ N/A - [docs] Update link to flow-typed definitions (#11674) @jessrosenfield - [docs] Minor grammitcal error (#11691) @NeuTrix -#### Core +### Core - [typescript] Depend directly on CSSType (#11608) @pelotom - [core] Upgrade dependencies (#11616) @oliviertassinari @@ -7323,7 +7331,7 @@ N/A ## 1.1.0 -###### _May 26, 2018_ +_May 26, 2018_ A big thanks to the 30 contributors who made this release possible. @@ -7337,7 +7345,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ListSubheader] Fix demo import path (#11468) @Hocdoc - [Backdrop] Fix export paths (#11481) @brandonhall @@ -7354,7 +7362,7 @@ N/A - [StepConnector] Add to default export from @material-ui/core (#11583) @OsipovIgor - [ButtonBase] Improve enter & space handling (#11585) @TheBear44 -#### Docs +### Docs - [examples] Fix imports for Dialog (#11469) @sboles - [docs] Add v0 subdirectory redirects (#11470) @mbrookes @@ -7378,7 +7386,7 @@ N/A - [docs] Add react-admin to related projects (#11582) @fzaninotto - [docs] Update the showcase (#11578) @mbrookes -#### Core +### Core - [typescript] Make TypographyStyle assignable to CSSProperties, misc other typing fixes (#11456) @pelotom - [core] Cut the head of the snake šŸ (#11477) @oliviertassinari @@ -7397,7 +7405,7 @@ N/A ## 1.0.0 -###### _May 17, 2018_ +_May 17, 2018_ Our first stable v1 release! šŸŽ‰ @@ -7413,7 +7421,7 @@ Some statistics with v1 while it was in alpha and beta: ## 1.0.0-rc.1 -###### _May 15, 2018_ +_May 15, 2018_ A big thanks to the 10 contributors who made this release possible. @@ -7427,7 +7435,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [codemod] Revert the codemod inception on the tests (#11376) @oliviertassinari - [typescript] Fix DialogContent export (#11378) @ljvanschie @@ -7436,14 +7444,14 @@ N/A - [NativeSelect] New component (#11364) @oliviertassinari - [Popover] Fix max height issue in some mobile browsers (#11349) @gaborcs -#### Docs +### Docs - [docs] Update notifications for v1.0.0-rc.0 (#11351) @simsim0709 - [Snackbar] Fix transition directions demo (#11391) @serendipity1004 - [docs] Remove react@15 message (#11399) @deltaskelta - [docs] Better netlify cache control (#11404) @oliviertassinari -#### Core +### Core - [core] Do not include polyfills in the ES modules build (#11358) @goto-bus-stop - [core] Workaround a Babel regression (#11398) @oliviertassinari @@ -7453,11 +7461,11 @@ N/A ## 0.20.1 -###### _May 13, 2018_ +_May 13, 2018_ A big thanks to the 14 contributors who made this release possible. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Tabs] Add support for inline style override for parent container of InkBar (#9598) @PharaohMaster - Popover does not listen to events unless it is open at the moment (#9482) @romanzenka @@ -7468,7 +7476,7 @@ A big thanks to the 14 contributors who made this release possible. - [TextField] Fix caret position issue (#10214) @MaratFaskhiev - Add sideEffects: false for webpack 4 (#11167) @matthoffner -#### Docs +### Docs - [docs] Adding smpl to showcase (#9386) @Bonitis - [docs] Remove HEAD in versions list (#9391) @HZooly @@ -7478,7 +7486,7 @@ A big thanks to the 14 contributors who made this release possible. ## 1.0.0-rc.0 -###### _May 13, 2018_ +_May 13, 2018_ A big thanks to the 11 contributors who made this release possible. @@ -7552,7 +7560,7 @@ The text underline color customization change: }, ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [CircularProgress] Add transition for static variant (#11313) @oliviertassinari - [createTypography] Add primary text color to 'button' typography variant (#11322) @ValentineStone @@ -7560,7 +7568,7 @@ The text underline color customization change: - [Grid] Add 32px gutter to grid spacing (#11338) @abnersajr - [Button] Add outlined variant (#11346) @leMaik -#### Docs +### Docs - [docs] v0 redirect (#11303) @mbrookes - [docs] Add a new premium-theme (#11300) @oliviertassinari @@ -7572,7 +7580,7 @@ The text underline color customization change: - [docs] Move v1-beta to master (#11354) @oliviertassinari - [docs] Install with yarn (#11357) @Xakher -#### Core +### Core - [typescript] Add CreateMuiTheme props TypeScript definition (#11296) @abnersajr - [typescript] Fix color type in augmentColor function (#11302) @AiusDa @@ -7581,7 +7589,7 @@ The text underline color customization change: ## 1.0.0-beta.47 -###### _May 9, 2018_ +_May 9, 2018_ A big thanks to the 4 contributors who made this release possible. @@ -7595,22 +7603,22 @@ Here are some highlights āœØ: If you are using TypeScript, 2.8 or later is required. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [withStyles] Support createRef() (#11293) @rolandjitsu - [InputLabel] Remove the width style property (#11297) @C-Rodg -#### Docs +### Docs N/A -#### Core +### Core - [core] Add @babel/runtime as a dependency (#11298) @oliviertassinari ## 1.0.0-beta.46 -###### _May 8, 2018_ +_May 8, 2018_ A big thanks to the 7 contributors who made this release possible. @@ -7622,19 +7630,19 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Table] Add table-footer-group CSS (#11264) @t49tran - [ButtonBase] Add a focusVisible action (#9712) @tkvw - [ButtonBase] Better performance (#11277) @oliviertassinari - [Tabs] Add a TabIndicatorProps property (#11254) @adeelibr -#### Docs +### Docs - [docs] Improve the table examples' accessibility (#11256) @mbrookes - [docs] Add Pilcro to showcase apps (#11274) @hugowoodhead -#### Core +### Core - [typescript] Fix type definitions for Snackbar and CircularProgress (#11265) @franklixuefei - [core] Upgrade Babel 6 to Babel 7 (#10964) @oliviertassinari @@ -7642,7 +7650,7 @@ N/A ## 1.0.0-beta.45 -###### _May 6, 2018_ +_May 6, 2018_ A big thanks to the 12 contributors who made this release possible. @@ -7739,7 +7747,7 @@ The rename started with #11090. I should have taken the time to complete it in t + onFocusVisible={this.handleVisible} ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [ButtonBase] Update TypeScript to sync with the implementation (#11189) @franklixuefei - [styles] Simpler outline reset (#11199) @oliviertassinari @@ -7756,7 +7764,7 @@ The rename started with #11090. I should have taken the time to complete it in t - [codemod] Support the private and direct imports (#11253) @oliviertassinari - [Table] Fix TypeScript classes support (#11255) @t49tran -#### Docs +### Docs - [docs] Fix typo in comparison.md (#11185) @morleytatro - [docs] Fix dark theme display (#11194) @oliviertassinari @@ -7769,14 +7777,14 @@ The rename started with #11090. I should have taken the time to complete it in t - [docs] Document the theme.props feature (#11245) @oliviertassinari - [docs] Speedup a bit the homepage (#11248) @oliviertassinari -#### Core +### Core - [test] Fix the CI (#11187) @oliviertassinari - [core] Update dependencies (#11240) @oliviertassinari ## 1.0.0-beta.44 -###### _Apr 29, 2018_ +_Apr 29, 2018_ A big thanks to the 17 contributors who made this release possible. @@ -7786,7 +7794,7 @@ A big thanks to the 17 contributors who made this release possible. As long as you are providing a valid URL to ``, it should be working. However, previously `"` escaped URL will no longer work. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [SwipeableDrawer] Prevent interaction with the drawer content if not opened (#11091) @leMaik - [Icon] Prevent shrinking when inside a flex container (#11097) @ValentinH @@ -7800,7 +7808,7 @@ As long as you are providing a valid URL to ``, it should be - [Tabs] Better Ant Design demo (#11095) @theiliad - [Popover] Improve the demos (#11175) @oliviertassinari -#### Docs +### Docs - [docs] Add npm-registry-browser into showcase (#11114) @topheman - [docs] Fix the flow example (#11118) @prastut @@ -7811,7 +7819,7 @@ As long as you are providing a valid URL to ``, it should be - [docs] Make sure next@6 is working (#11168) @oliviertassinari - [docs] Correct spelling error in FormDialog.js example (#11176) @weldon0405 -#### Core +### Core - [core] Reduce the size of the npm package (#11144) @oliviertassinari - [typescript] allow pseudos on any theme mixins (#11145) @rosskevin @@ -7820,7 +7828,7 @@ As long as you are providing a valid URL to ``, it should be ## 1.0.0-beta.43 -###### _Apr 22, 2018_ +_Apr 22, 2018_ A big thanks to the 8 contributors who made this release possible. @@ -7846,7 +7854,7 @@ Here are some highlights āœØ: /> ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [typescript] Constrain props type param appropriately in withStyles, withTheme, withWidth HOCs (#11003) @estaub - [typescript] make Select's onChange prop optional (#11041) @nmchaves @@ -7859,19 +7867,19 @@ Here are some highlights āœØ: - [ExpansionPanel] Fix display on IE11 and Edge (#11087) @oliviertassinari - [CardActions] Fix CSS override (#11092) @oliviertassinari -#### Docs +### Docs - [docs] Fix broken link (#11042) @imrobinized - [CONTRIBUTING] Update the docs (#11078) @oliviertassinari -#### Core +### Core - [core] Better distinction between the private and public components (#11051) @oliviertassinari - [core] Upgrade dev dependencies (#11096) @oliviertassinari ## 1.0.0-beta.42 -###### _Apr 16, 2018_ +_Apr 16, 2018_ A big thanks to the 15 contributors who made this release possible. @@ -7921,7 +7929,7 @@ const styles = { /> ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [lab] No side effect (7c379fa7ba4ed2a3eb8abc841a9a4376014b6145) @oliviertassinari - [Card] Hide overflow to maintain round corners with CardMedia (#10946) @mbrookes @@ -7942,13 +7950,13 @@ const styles = { - [SwipeableDrawer] Simplify isSwiping logic (#11032) @leMaik - [SwipeableDrawer] Add a blocking div to the edge of the screen (#11031) @leMaik -#### Docs +### Docs - [docs] Fix typo (#10990) @jleeohsu - [docs] Better private/public API description (#11024) @oliviertassinari - [Collapse] Fix typo in comment (#11035) @mknet -#### Core +### Core - [core] Add fallback to ownerWindow (#10978) @richardscarrott - [typescript] Remove unnecessary Partial<> for `style` prop (#10994) @franklixuefei @@ -7959,7 +7967,7 @@ const styles = { ## 1.0.0-beta.41 -###### _Apr 7, 2018_ +_Apr 7, 2018_ A big thanks to the 14 contributors who made this release possible. @@ -7978,7 +7986,7 @@ Here are some highlights āœØ: +import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL'; ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [icons] Reduce code duplication (#10902) @cherniavskii - [icons] Check if `global` is defined before trying to use it (#10933) @joliss @@ -7993,7 +8001,7 @@ Here are some highlights āœØ: - [styles] Add a warning to prevent a memory leak (#10953) @oliviertassinari - [Select] Fix width update (#10956) @oliviertassinari -#### Docs +### Docs - [docs] Add hideHeader option to Demo component (#10887) @mbrookes - [docs] Document the /es folder (#10888) @oliviertassinari @@ -8008,13 +8016,13 @@ Here are some highlights āœØ: - [docs] Fix npm urls (#10949) @sujeetkrjaiswal - [docs] Add "Do I have to use JSS?" to FAQ (#10954) @mbrookes -#### Core +### Core - [typescript] Upgrade React and JSS typings, which both make use of csstype now (#10903) @pelotom ## 1.0.0-beta.40 -###### _Apr 1, 2018_ +_Apr 1, 2018_ A big thanks to the 4 contributors who made this release possible. @@ -8033,21 +8041,21 @@ React is allowing us to return an array of elements in the render method. We have removed the useless root `div` element. Nothing has changed for people using React 15.x. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [FormControlLabel] Enable disabled label CSS modifications (#10841) @vkentta - [Select] Throw when the non native select is not controlled (#10860) @oliviertassinari - [Drawer] Back to 100% test coverage (#10861) @oliviertassinari - [core] Work on React 16.3.0 support (#10867) @oliviertassinari -#### Docs +### Docs - [docs] typo: reponse => response (#10850) @luminaxster - [docs] Remove dead code (#10855) @oliviertassinari - [docs] Much better navigation experience (#10859) @oliviertassinari - [examples] Demonstrate how to use the icons CDN (#10874) @oliviertassinari -#### Core +### Core - [core] Remove the addEventListener module (#10856) @oliviertassinari - [core] Upgrade the dependencies (#10853) @oliviertassinari @@ -8055,7 +8063,7 @@ Nothing has changed for people using React 15.x. ## 1.0.0-beta.39 -###### _Mar 28, 2018_ +_Mar 28, 2018_ A big thanks to the 25 contributors who made this release possible. @@ -8103,7 +8111,7 @@ I have made a mistake in [#8108](https://github.com/mui-org/material-ui/pull/810 + ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Switch] Add missing TypeScript class keys (#10691) @wenduzer - [ClickAwayListener] Add mouseEvent and touchEvent property (#10694) @tgrowden @@ -8127,7 +8135,7 @@ I have made a mistake in [#8108](https://github.com/mui-org/material-ui/pull/810 - [Select] Add support for autoFocus (#10792) @nicoffee - [Icon] Fix typing by taking out fontSize property (#10821) @franklixuefei -#### Docs +### Docs - [docs] Add new npm package: @material-ui/docs (#10699) @oliviertassinari - [docs] Use buttonRef instead of ref in anchor playground example (#10708) @pelotom @@ -8146,14 +8154,14 @@ I have made a mistake in [#8108](https://github.com/mui-org/material-ui/pull/810 - [examples] Update Flow Example (#10799) @prastut - [docs] Material Dashboard Pro React (#10832) @oliviertassinari -#### Core +### Core - [core] Upgrade the dev dependencies (#10702) @oliviertassinari - [typings] Fix `mixins.gutter` signature (argument is optional) (#10814) @sebald ## 1.0.0-beta.38 -###### _Mar 17, 2018_ +_Mar 17, 2018_ A big thanks to the 19 contributors who made this release possible. @@ -8168,7 +8176,7 @@ This release comes with important theme upgrades. Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Fix chip alignment (#10611) @adamszeptycki - [Tabs] Add 'scrollButtons' and 'indicator' to TabsClassKey TypeScript definition (#10618) @cvanem @@ -8188,7 +8196,7 @@ N/A - [theme] Allow changing the font-size (#10687) @oliviertassinari - [Stepper] Soft ripple background (#10690) @oliviertassinari -#### Docs +### Docs - [docs] Add project to showcase (#10614) @jdupont - [docs] Fix typo (#10621) @prastut @@ -8209,14 +8217,14 @@ N/A - [docs] Handle optional params (#10685) @oliviertassinari - [docs] Customized tables (#10686) @oliviertassinari -#### Core +### Core - [typescript] Remove xxxClassName props from type declarations (#10644) @lukePeavey - [typescript] Add inline style prop to transition (#10650) @nmchaves ## 1.0.0-beta.37 -###### _Mar 11, 2018_ +_Mar 11, 2018_ A big thanks to the 13 contributors who made this release possible. @@ -8254,7 +8262,7 @@ For instance, it's not about adding JavaScript polyfills. + ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Select] Fix wrong onBlur onFocus logic (#10538) @oliviertassinari - [ExpansionPanel] Fix controlled behavior (#10546) @oliviertassinari @@ -8271,7 +8279,7 @@ For instance, it's not about adding JavaScript polyfills. - [StepIcon] enable CSS modifications of active step (#10599) @vkentta - [Tooltip] Add enterTouchDelay and leaveTouchDelay props (#10577) @petegivens -#### Docs +### Docs - [docs] Simplify the CDN example (6e4cc723689961582ede16db421cbdf24ac7c4b9) @oliviertassinari - [docs] Add showcase to readme - componofy (#10541) @DalerAsrorov @@ -8285,14 +8293,14 @@ For instance, it's not about adding JavaScript polyfills. - [docs] Add Planalyze to Showcase (#10603) @dancastellon - [docs] Improve the htmlFontSize documentation (#10604) @oliviertassinari -#### Core +### Core - [core] Fix type definitions (#10553) @stefanorie - [core] Better overrides merge support (#10606) @oliviertassinari ## 1.0.0-beta.36 -###### _Mar 5, 2018_ +_Mar 5, 2018_ A big thanks to the 14 contributors who made this release possible. @@ -8322,7 +8330,7 @@ Now, you can use the `font-size` style property to changr the size of the icon. This is an effort in order to harmonize the classes API. The best way to recover from this breaking change is to check the warnings in the console and to check the added documentation around the design rules around this API. -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Table] Default display style for all table components (#10447) @caub - [Collapse] Fix description (#10454) @onurkose @@ -8340,7 +8348,7 @@ The best way to recover from this breaking change is to check the warnings in th - [Button] Add override support for sizeLarge and sizeSmall (#10526) @wenduzer - [Modal] Use prototype functions in ModalManager (#10528) @ianschmitz -#### Docs +### Docs - [docs] Fix Roadmap docs formatting (#10501) @cherniavskii - [docs] EnhancedTable Demo (#10491) @kgregory @@ -8350,7 +8358,7 @@ The best way to recover from this breaking change is to check the warnings in th - [docs] Add a CDN example (#10514) @oliviertassinari - [docs] Fix SSR rendering in Gatsby example (#10536) @LegNeato -#### Core +### Core - [core] Prepare the async API (#10523) @oliviertassinari - [core] Upgrade the dev dependencies (#10456) @oliviertassinari @@ -8358,7 +8366,7 @@ The best way to recover from this breaking change is to check the warnings in th ## 1.0.0-beta.35 -###### _Feb 24, 2018_ +_Feb 24, 2018_ A big thanks to the 20 contributors who made this release possible. @@ -8372,7 +8380,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Stepper] Add style override types (#10334) @vkentta - [Input] Reset the line-height (#10346) @oliviertassinari @@ -8394,7 +8402,7 @@ N/A - [SwitchBase] Fix defaultChecked issue (#10444) @tanmayrajani - [SwitchBase] Prevent defaultChecked regression (#10445) @oliviertassinari -#### Docs +### Docs - [Transitions] Document transition style prop handling (#10322) @AdamGorkoz - [Drawer] Add clipped navigation drawer demo (#10330) @AdamGorkoz @@ -8415,7 +8423,7 @@ N/A - [docs] Description of how component will render (#10432) @oliviertassinari - [docs] Add CSSGrid comparison example (#10433) @caub -#### Core +### Core - [core] Upgrade some dependency to start looking into React 16.3 (#10338) @oliviertassinari - [core] Remove direct references to window/document objects (#10328) @ianschmitz @@ -8423,7 +8431,7 @@ N/A ## 1.0.0-beta.34 -###### _Feb 17, 2018_ +_Feb 17, 2018_ A big thanks to the 21 contributors who made this release possible. @@ -8467,7 +8475,7 @@ The Material Design specification says that selection controls elements should [ + ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Input] Fix infinite loop (#10229) @oliviertassinari - [CircularProgress] Add static variant (#10228) @oliviertassinari @@ -8483,7 +8491,7 @@ The Material Design specification says that selection controls elements should [ - [Icon] Add fontSize to typings (#10317) @clentfort - [Slide] Work with SVG too (#10325) @oliviertassinari -#### Docs +### Docs - [docs] Update links on showcase.md (#10227) @klyburke - [docs] Remove dead code in Drawers (#10230) @oliviertassinari @@ -8509,7 +8517,7 @@ The Material Design specification says that selection controls elements should [ - [docs] Expose the theme as a global object (#10326) @oliviertassinari - [docs] Add an example with Google Web Fonts (#10332) @oliviertassinari -#### Core +### Core - [core] Fix the es distribution (#10254) @NMinhNguyen - [typescript] Add missing exports in index.d.ts (#10295) @Andy4ward @@ -8517,7 +8525,7 @@ The Material Design specification says that selection controls elements should [ ## 1.0.0-beta.33 -###### _Feb 10, 2018_ +_Feb 10, 2018_ A big thanks to the 16 contributors who made this release possible. @@ -8532,7 +8540,7 @@ Here are some highlights āœØ: N/A -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [typescript] Use Partial props in TypeScript definitions (#10170) @ianschmitz - [GridList] Allow null children in GridListTile (#10179) @caub @@ -8551,7 +8559,7 @@ N/A - [StepLabel] Give more flexibility to the style of span surrounding label (#10218) @seanchambo - [ButtonBase] Save one line of code (#10225) @oliviertassinari -#### Docs +### Docs - [examples] Rename type to variant (#10167) @oliviertassinari - [docs] Using "component" prop to customize rendering (#10128) @sebald @@ -8563,14 +8571,14 @@ N/A - [docs] Change negative to positive (#10211) @harvitronix - [docs] Add project to showcase (#10217) @klyburke -#### Core +### Core - [core] Upgrade Next.js (#10181) @oliviertassinari - [test] Remove the mockPortal workaround (#10208) @leMaik ## 1.0.0-beta.32 -###### _Feb 4, 2018_ +_Feb 4, 2018_ A big thanks to the 12 contributors who made this release possible. @@ -8638,7 +8646,7 @@ Umbrella pull request for: #10084, #10086, #10088. + }} ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [AppBar] Remove one dead CSS property (#10096) @oliviertassinari - [AppBar] Add support for `position="sticky"` (#10090) @scottastrophic @@ -8656,7 +8664,7 @@ Umbrella pull request for: #10084, #10086, #10088. - [InputAdornment] Remove hack (#10157) @oliviertassinari - [Hidden] css implementation handle custom className (#10165) @Vincz -#### Docs +### Docs - [docs] Minor CSP edit (#10089) @oliviertassinari - [docs] Avoid anchor id conflict in Progress (#10095) @oliviertassinari @@ -8675,14 +8683,14 @@ Umbrella pull request for: #10084, #10086, #10088. - [docs] Add mui-downshift (#10156) @oliviertassinari - [docs] Demo codesandbox deps (#10158) @caub -#### Core +### Core - [core] Add the license in the release (#10102) @oliviertassinari - [test] Fix AppBar test assert messages (#10109) @cherniavskii ## 1.0.0-beta.31 -###### _Jan 21, 2018_ +_Jan 21, 2018_ A big thanks to the 14 contributors who made this release possible. @@ -8797,7 +8805,7 @@ const theme = createMuiTheme({ }); ``` -#### Component Fixes / Enhancements +### Component Fixes / Enhancements - [Input] Make sure our previous or updated context is available (#9986) @yoiang - [Dialog] Add PaperProps property (#9985) @nbdaaron @@ -8819,7 +8827,7 @@ const theme = createMuiTheme({ - [LinearProgress] Add ARIA role & fix bugs (#10069) @mbrookes - [ButtonBase] Add buttonRef property (#10082) @oliviertassinari -#### Docs +### Docs - [docs] Edit css injection order docs for create-react-app users (#9990) @PTaylour - [docs] withStyles alternative APIs (#9981) @oliviertassinari @@ -8834,7 +8842,7 @@ const theme = createMuiTheme({ - [docs] Add Content Security Policy Guide (#10074) @dav-is - [docs] Add react-select example (#10070) @oliviertassinari -#### Core +### Core - [core] Two small fixes looking at #10005 (#10014) @oliviertassinari - [core] Use the official react-docgen package (#10054) @oliviertassinari @@ -8842,7 +8850,7 @@ const theme = createMuiTheme({ ## 1.0.0-beta.30 -###### _Jan 21, 2018_ +_Jan 21, 2018_ A big thanks to the 12 contributors who made this release possible. @@ -8858,17 +8866,23 @@ Here are some highlights āœØ: ### Breaking change - [palette] Keep simplifying the solution (#9876) @oliviertassinari + - Remove the contrast color from our API. This color variation hasn't proven itseft to be useful enough. + ```diff -