From d8b4ffe67d15a92ffead38871fe5b28d49e16997 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 08:44:22 -0400 Subject: [PATCH 01/34] Support custom sizes for ToggleButton ToggleButtonGroup Table and Autocomplete --- docs/pages/api-docs/autocomplete.json | 5 ++++- docs/pages/api-docs/table.json | 5 ++++- docs/pages/api-docs/toggle-button-group.json | 4 ++-- docs/pages/api-docs/toggle-button.json | 4 ++-- packages/material-ui/src/Autocomplete/Autocomplete.d.ts | 5 ++++- packages/material-ui/src/Autocomplete/Autocomplete.js | 5 ++++- packages/material-ui/src/Table/Table.d.ts | 5 ++++- packages/material-ui/src/Table/Table.js | 5 ++++- packages/material-ui/src/ToggleButton/ToggleButton.d.ts | 5 ++++- packages/material-ui/src/ToggleButton/ToggleButton.js | 5 ++++- .../material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts | 5 ++++- .../material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js | 5 ++++- 12 files changed, 44 insertions(+), 14 deletions(-) diff --git a/docs/pages/api-docs/autocomplete.json b/docs/pages/api-docs/autocomplete.json index d5ba1f18fb1932..d217be58fe2764 100644 --- a/docs/pages/api-docs/autocomplete.json +++ b/docs/pages/api-docs/autocomplete.json @@ -69,7 +69,10 @@ "renderTags": { "type": { "name": "func" } }, "selectOnFocus": { "type": { "name": "bool" }, "default": "!props.freeSolo" }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/docs/pages/api-docs/table.json b/docs/pages/api-docs/table.json index 80edad26ece156..4d9854fa27d94c 100644 --- a/docs/pages/api-docs/table.json +++ b/docs/pages/api-docs/table.json @@ -11,7 +11,10 @@ "default": "'default'" }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "stickyHeader": { "type": { "name": "bool" } }, diff --git a/docs/pages/api-docs/toggle-button-group.json b/docs/pages/api-docs/toggle-button-group.json index 7070fc4b849258..8a4a81b39e0cbd 100644 --- a/docs/pages/api-docs/toggle-button-group.json +++ b/docs/pages/api-docs/toggle-button-group.json @@ -18,8 +18,8 @@ }, "size": { "type": { - "name": "enum", - "description": "'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'large'
| 'medium'
| 'small'
| string" }, "default": "'medium'" }, diff --git a/docs/pages/api-docs/toggle-button.json b/docs/pages/api-docs/toggle-button.json index 3a89ebe272c1b4..7276f553eb3559 100644 --- a/docs/pages/api-docs/toggle-button.json +++ b/docs/pages/api-docs/toggle-button.json @@ -17,8 +17,8 @@ "selected": { "type": { "name": "bool" } }, "size": { "type": { - "name": "enum", - "description": "'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'large'
| 'medium'
| 'small'
| string" }, "default": "'medium'" }, diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui/src/Autocomplete/Autocomplete.d.ts index 1f1c3e182c1c9a..ca01c45a7534ae 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui/src/Autocomplete/Autocomplete.d.ts @@ -3,6 +3,7 @@ import { InternalStandardProps as StandardProps, Theme } from '@material-ui/core import { ChipProps, ChipTypeMap } from '@material-ui/core/Chip'; import { PopperProps } from '@material-ui/core/Popper'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import useAutocomplete, { AutocompleteChangeDetails, AutocompleteChangeReason, @@ -59,6 +60,8 @@ export interface AutocompleteRenderInputParams { inputProps: ReturnType['getInputProps']>; } +export interface AutocompletePropsSizeOverrides {} + export interface AutocompleteProps< T, Multiple extends boolean | undefined, @@ -266,7 +269,7 @@ export interface AutocompleteProps< * The size of the component. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js index e74a5a47bd3c3d..31bde4c434f58f 100644 --- a/packages/material-ui/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui/src/Autocomplete/Autocomplete.js @@ -1046,7 +1046,10 @@ Autocomplete.propTypes /* remove-proptypes */ = { * The size of the component. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index fa2534e8ed3013..23afbda8b2f06a 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/packages/material-ui/src/Table/Table.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; @@ -7,6 +8,8 @@ export type Padding = 'default' | 'checkbox' | 'none'; export type Size = 'small' | 'medium'; +export interface TablePropsSizeOverrides {} + export interface TableTypeMap

{ props: P & { /** @@ -31,7 +34,7 @@ export interface TableTypeMap

{ * Allows TableCells to inherit size of the Table. * @default 'medium' */ - size?: Size; + size?: OverridableStringUnion; /** * Set the header sticky. * diff --git a/packages/material-ui/src/Table/Table.js b/packages/material-ui/src/Table/Table.js index a23a46f40711c0..8e33bbc7fc2ff2 100644 --- a/packages/material-ui/src/Table/Table.js +++ b/packages/material-ui/src/Table/Table.js @@ -126,7 +126,10 @@ Table.propTypes /* remove-proptypes */ = { * Allows TableCells to inherit size of the Table. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * Set the header sticky. * diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.d.ts b/packages/material-ui/src/ToggleButton/ToggleButton.d.ts index 8be9214fe4c988..68e968fbff71c8 100644 --- a/packages/material-ui/src/ToggleButton/ToggleButton.d.ts +++ b/packages/material-ui/src/ToggleButton/ToggleButton.d.ts @@ -1,8 +1,11 @@ import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { Theme } from '..'; import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase'; import { OverrideProps } from '../OverridableComponent'; +export interface ToggleButtonPropsSizeOverrides {} + export type ToggleButtonTypeMap< P = {}, D extends React.ElementType = 'button' @@ -66,7 +69,7 @@ export type ToggleButtonTypeMap< * The prop defaults to the value inherited from the parent ToggleButtonGroup component. * @default 'medium' */ - size?: 'small' | 'medium' | 'large'; + size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/ToggleButton/ToggleButton.js b/packages/material-ui/src/ToggleButton/ToggleButton.js index fbc7a5237c42dd..b99a411e045197 100644 --- a/packages/material-ui/src/ToggleButton/ToggleButton.js +++ b/packages/material-ui/src/ToggleButton/ToggleButton.js @@ -261,7 +261,10 @@ ToggleButton.propTypes /* remove-proptypes */ = { * The prop defaults to the value inherited from the parent ToggleButtonGroup component. * @default 'medium' */ - size: PropTypes.oneOf(['large', 'medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['large', 'medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts index 2e8320f02c5110..0d0cf0f2ea9b08 100644 --- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts +++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts @@ -1,8 +1,11 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { InternalStandardProps as StandardProps } from '..'; import { Theme } from '../styles'; +export interface ToggleButtonGroupPropsSizeOverrides {} + export interface ToggleButtonGroupProps extends StandardProps, 'onChange' | 'children'> { /** @@ -57,7 +60,7 @@ export interface ToggleButtonGroupProps * The size of the component. * @default 'medium' */ - size?: 'small' | 'medium' | 'large'; + size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js index 8eed888fa34b10..45ef5607bc363d 100644 --- a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js +++ b/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js @@ -227,7 +227,10 @@ ToggleButtonGroup.propTypes /* remove-proptypes */ = { * The size of the component. * @default 'medium' */ - size: PropTypes.oneOf(['large', 'medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['large', 'medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 4f1e80cea4089a3aba16274227f9d1f5edea9934 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 09:45:02 -0400 Subject: [PATCH 02/34] Add support custom color Slider --- docs/pages/api-docs/slider.json | 5 ++++- packages/material-ui/src/Slider/Slider.d.ts | 5 ++++- packages/material-ui/src/Slider/Slider.js | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/slider.json b/docs/pages/api-docs/slider.json index a037bdea996290..86d695bfa956bf 100644 --- a/docs/pages/api-docs/slider.json +++ b/docs/pages/api-docs/slider.json @@ -5,7 +5,10 @@ "aria-valuetext": { "type": { "name": "custom", "description": "string" } }, "classes": { "type": { "name": "object" } }, "color": { - "type": { "name": "enum", "description": "'primary'
| 'secondary'" }, + "type": { + "name": "union", + "description": "'primary'
| 'secondary'
| string" + }, "default": "'primary'" }, "component": { "type": { "name": "elementType" } }, diff --git a/packages/material-ui/src/Slider/Slider.d.ts b/packages/material-ui/src/Slider/Slider.d.ts index 15bfbd97ede072..dd0820771b4740 100644 --- a/packages/material-ui/src/Slider/Slider.d.ts +++ b/packages/material-ui/src/Slider/Slider.d.ts @@ -5,9 +5,12 @@ import { SliderUnstyledTypeMap, } from '@material-ui/unstyled/SliderUnstyled'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { Theme } from '../styles'; import { OverrideProps } from '../OverridableComponent'; +export interface SliderPropsColorOverrides {} + export type SliderTypeMap< D extends React.ElementType = 'span', P = {} @@ -17,7 +20,7 @@ export type SliderTypeMap< * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color?: 'primary' | 'secondary'; + color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>; /** * Override or extend the styles applied to the component. */ diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index c5e23bd3bf43f3..f1a776056ba144 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -476,7 +476,10 @@ Slider.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'primary' */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary']), + PropTypes.string, + ]), /** * The components used for each slot inside the Slider. * Either a string to use a HTML element or a component. From 617802e64c3fe01604023d84d41b8d6a576768c3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 24 Apr 2021 15:49:31 +0200 Subject: [PATCH 03/34] fix leaky types --- packages/material-ui/src/Table/Table.d.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index 23afbda8b2f06a..a90a21cdd6963b 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/packages/material-ui/src/Table/Table.d.ts @@ -4,10 +4,6 @@ import { OverridableStringUnion } from '@material-ui/types'; import { Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; -export type Padding = 'default' | 'checkbox' | 'none'; - -export type Size = 'small' | 'medium'; - export interface TablePropsSizeOverrides {} export interface TableTypeMap

{ @@ -29,12 +25,12 @@ export interface TableTypeMap

{ * Allows TableCells to inherit padding of the Table. * @default 'default' */ - padding?: Padding; + padding?: 'default' | 'checkbox' | 'none'; /** * Allows TableCells to inherit size of the Table. * @default 'medium' */ - size?: OverridableStringUnion; + size?: OverridableStringUnion<'small' | 'medium', TablePropsSizeOverrides>; /** * Set the header sticky. * From ff5c61d88ae3200bef2cee3ff22e70d5a526b8e2 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 10:00:22 -0400 Subject: [PATCH 04/34] Add support custom color and size Pagination --- docs/pages/api-docs/pagination.json | 8 ++++---- packages/material-ui/src/Pagination/Pagination.d.ts | 11 +++++++++-- packages/material-ui/src/Pagination/Pagination.js | 10 ++++++++-- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/pages/api-docs/pagination.json b/docs/pages/api-docs/pagination.json index 4bc4cd56e7322b..32c6f089e34db2 100644 --- a/docs/pages/api-docs/pagination.json +++ b/docs/pages/api-docs/pagination.json @@ -4,8 +4,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'primary'
| 'secondary'
| 'standard'" + "name": "union", + "description": "'primary'
| 'secondary'
| 'standard'
| string" }, "default": "'standard'" }, @@ -30,8 +30,8 @@ "siblingCount": { "type": { "name": "custom", "description": "integer" }, "default": "1" }, "size": { "type": { - "name": "enum", - "description": "'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'large'
| 'medium'
| 'small'
| string" }, "default": "'medium'" }, diff --git a/packages/material-ui/src/Pagination/Pagination.d.ts b/packages/material-ui/src/Pagination/Pagination.d.ts index b86e9c1e340404..0390bd5296b5bb 100644 --- a/packages/material-ui/src/Pagination/Pagination.d.ts +++ b/packages/material-ui/src/Pagination/Pagination.d.ts @@ -14,6 +14,10 @@ export interface PaginationRenderItemParams extends UsePaginationItem { export interface PaginationPropsVariantOverrides {} +export interface PaginationPropsSizeOverrides {} + +export interface PaginationPropsColorOverrides {} + export interface PaginationProps extends UsePaginationProps, StandardProps, 'children' | 'onChange'> { @@ -34,7 +38,10 @@ export interface PaginationProps * The active color. * @default 'standard' */ - color?: 'primary' | 'secondary' | 'standard'; + color?: OverridableStringUnion< + 'primary' | 'secondary' | 'standard', + PaginationPropsColorOverrides + >; /** * Accepts a function which returns a string value that provides a user-friendly name for the current page. * @@ -67,7 +74,7 @@ export interface PaginationProps * The size of the component. * @default 'medium' */ - size?: 'small' | 'medium' | 'large'; + size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Pagination/Pagination.js b/packages/material-ui/src/Pagination/Pagination.js index 611b5299000385..35fca598778b2c 100644 --- a/packages/material-ui/src/Pagination/Pagination.js +++ b/packages/material-ui/src/Pagination/Pagination.js @@ -158,7 +158,10 @@ Pagination.propTypes /* remove-proptypes */ = { * The active color. * @default 'standard' */ - color: PropTypes.oneOf(['primary', 'secondary', 'standard']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary', 'standard']), + PropTypes.string, + ]), /** * The total number of pages. * @default 1 @@ -238,7 +241,10 @@ Pagination.propTypes /* remove-proptypes */ = { * The size of the component. * @default 'medium' */ - size: PropTypes.oneOf(['large', 'medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['large', 'medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 7e1e15e2565b3d8921263f63dcf54991e05b1f0c Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 10:49:09 -0400 Subject: [PATCH 05/34] Fix framer Slider --- framer/Material-UI.framerfx/code/Slider.tsx | 7 ------- framer/scripts/framerConfig.js | 3 +++ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Slider.tsx b/framer/Material-UI.framerfx/code/Slider.tsx index 40103226cd4189..78e978dfeaa998 100644 --- a/framer/Material-UI.framerfx/code/Slider.tsx +++ b/framer/Material-UI.framerfx/code/Slider.tsx @@ -3,7 +3,6 @@ import { addPropertyControls, ControlType } from 'framer'; import MuiSlider from '@material-ui/core/Slider'; interface Props { - color: 'primary' | 'secondary'; disabled?: boolean; disableSwap?: boolean; max?: number; @@ -23,17 +22,11 @@ export function Slider(props: Props): JSX.Element { } Slider.defaultProps = { - color: 'primary' as 'primary', width: 160, height: 24, }; addPropertyControls(Slider, { - color: { - type: ControlType.Enum, - title: 'Color', - options: ['primary', 'secondary'], - }, disabled: { type: ControlType.Boolean, title: 'Disabled', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 91e9c2f0c8da76..49d18b636718de 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -292,6 +292,9 @@ export const componentSettings = { 'valueLabelFormat', 'marks', 'sx', + // FIXME: `Union` + 'color', + 'size', ], propValues: { width: 160, From 7f1fa8b33b1b148e658bc43100c9e036af6a24e6 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 10:51:18 -0400 Subject: [PATCH 06/34] Fix framer Slider --- framer/scripts/framerConfig.js | 1 - 1 file changed, 1 deletion(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 49d18b636718de..1d9b3f8b2c9e70 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -294,7 +294,6 @@ export const componentSettings = { 'sx', // FIXME: `Union` 'color', - 'size', ], propValues: { width: 160, From de467cc247b0e3a3108fd8d933a72033777005f0 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 11:10:39 -0400 Subject: [PATCH 07/34] Fix types --- packages/material-ui/src/Table/TableContext.d.ts | 5 ++--- packages/material-ui/src/TableCell/TableCell.d.ts | 7 ++----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/Table/TableContext.d.ts b/packages/material-ui/src/Table/TableContext.d.ts index 38a3269242f2ef..a60ef49bfafa8d 100644 --- a/packages/material-ui/src/Table/TableContext.d.ts +++ b/packages/material-ui/src/Table/TableContext.d.ts @@ -1,9 +1,8 @@ import * as React from 'react'; -import { Padding, Size } from './Table'; interface TableContextProps { - padding: Padding; - size: Size; + padding: 'default' | 'checkbox' | 'none'; + size: 'default' | 'checkbox' | 'none'; } declare const TableContext: React.Context; diff --git a/packages/material-ui/src/TableCell/TableCell.d.ts b/packages/material-ui/src/TableCell/TableCell.d.ts index 12987f3dedeacb..df0671ef523f05 100644 --- a/packages/material-ui/src/TableCell/TableCell.d.ts +++ b/packages/material-ui/src/TableCell/TableCell.d.ts @@ -1,9 +1,6 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; import { InternalStandardProps as StandardProps, Theme } from '..'; -import { Padding, Size } from '../Table'; - -export { Padding, Size }; /** * `` will be rendered as an ``or `` depending @@ -66,7 +63,7 @@ export interface TableCellProps extends StandardProps Date: Sat, 24 Apr 2021 11:51:02 -0400 Subject: [PATCH 08/34] Add support custom color and size PaginationItem --- docs/pages/api-docs/pagination-item.json | 8 ++++---- .../src/PaginationItem/PaginationItem.d.ts | 11 +++++++++-- .../material-ui/src/PaginationItem/PaginationItem.js | 10 ++++++++-- 3 files changed, 21 insertions(+), 8 deletions(-) diff --git a/docs/pages/api-docs/pagination-item.json b/docs/pages/api-docs/pagination-item.json index 5e9614ebf6d6fe..e97cdf62d79eaf 100644 --- a/docs/pages/api-docs/pagination-item.json +++ b/docs/pages/api-docs/pagination-item.json @@ -3,8 +3,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'primary'
| 'secondary'
| 'standard'" + "name": "union", + "description": "'primary'
| 'secondary'
| 'standard'
| string" }, "default": "'standard'" }, @@ -18,8 +18,8 @@ }, "size": { "type": { - "name": "enum", - "description": "'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'large'
| 'medium'
| 'small'
| string" }, "default": "'medium'" }, diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.d.ts b/packages/material-ui/src/PaginationItem/PaginationItem.d.ts index 6a75054af7d591..650e436ebf2826 100644 --- a/packages/material-ui/src/PaginationItem/PaginationItem.d.ts +++ b/packages/material-ui/src/PaginationItem/PaginationItem.d.ts @@ -7,6 +7,10 @@ import { UsePaginationItem } from '../usePagination/usePagination'; export interface PaginationItemPropsVariantOverrides {} +export interface PaginationItemPropsSizeOverrides {} + +export interface PaginationItemPropsColorOverrides {} + export interface PaginationItemTypeMap

{ props: P & { /** @@ -54,7 +58,10 @@ export interface PaginationItemTypeMap

; /** * If `true`, the component is disabled. * @default false @@ -78,7 +85,7 @@ export interface PaginationItemTypeMap

; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/PaginationItem/PaginationItem.js b/packages/material-ui/src/PaginationItem/PaginationItem.js index a42c8e06f1a15e..86a9bafa110225 100644 --- a/packages/material-ui/src/PaginationItem/PaginationItem.js +++ b/packages/material-ui/src/PaginationItem/PaginationItem.js @@ -359,7 +359,10 @@ PaginationItem.propTypes /* remove-proptypes */ = { * The active color. * @default 'standard' */ - color: PropTypes.oneOf(['primary', 'secondary', 'standard']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary', 'standard']), + PropTypes.string, + ]), /** * The component used for the root node. * Either a string to use a HTML element or a component. @@ -388,7 +391,10 @@ PaginationItem.propTypes /* remove-proptypes */ = { * The size of the component. * @default 'medium' */ - size: PropTypes.oneOf(['large', 'medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['large', 'medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From a5c3bef11326123ab4bb529a48022b5a6592ff98 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 12:31:06 -0400 Subject: [PATCH 09/34] Add support custom color and size Fab --- docs/pages/api-docs/fab.json | 8 ++++---- framer/Material-UI.framerfx/code/Fab.tsx | 14 -------------- framer/scripts/framerConfig.js | 2 ++ packages/material-ui/src/Fab/Fab.d.ts | 8 ++++++-- packages/material-ui/src/Fab/Fab.js | 10 ++++++++-- 5 files changed, 20 insertions(+), 22 deletions(-) diff --git a/docs/pages/api-docs/fab.json b/docs/pages/api-docs/fab.json index c5928f084db175..586d3472c6df69 100644 --- a/docs/pages/api-docs/fab.json +++ b/docs/pages/api-docs/fab.json @@ -4,8 +4,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'inherit'
| 'primary'
| 'secondary'
| string" }, "default": "'default'" }, @@ -16,8 +16,8 @@ "href": { "type": { "name": "string" } }, "size": { "type": { - "name": "enum", - "description": "'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'large'
| 'medium'
| 'small'
| string" }, "default": "'large'" }, diff --git a/framer/Material-UI.framerfx/code/Fab.tsx b/framer/Material-UI.framerfx/code/Fab.tsx index 6da09354ded217..2dc23d16f1bf28 100644 --- a/framer/Material-UI.framerfx/code/Fab.tsx +++ b/framer/Material-UI.framerfx/code/Fab.tsx @@ -4,10 +4,8 @@ import MuiFab from '@material-ui/core/Fab'; import { Icon } from './Icon'; interface Props { - color: 'default' | 'inherit' | 'primary' | 'secondary'; disabled: boolean; href?: string; - size: 'large' | 'medium' | 'small'; icon: string; iconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; label: string; @@ -31,9 +29,7 @@ export function Fab(props: Props): JSX.Element { } Fab.defaultProps = { - color: 'default' as 'default', disabled: false, - size: 'large' as 'large', icon: 'add', iconTheme: 'Filled' as 'Filled', label: 'extended', @@ -42,11 +38,6 @@ Fab.defaultProps = { }; addPropertyControls(Fab, { - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'inherit', 'primary', 'secondary'], - }, disabled: { type: ControlType.Boolean, title: 'Disabled', @@ -55,11 +46,6 @@ addPropertyControls(Fab, { type: ControlType.String, title: 'Href', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['large', 'medium', 'small'], - }, icon: { type: ControlType.String, title: 'Icon', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 1d9b3f8b2c9e70..f7f3f16b0ca2a1 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -167,6 +167,8 @@ export const componentSettings = { 'disableFocusRipple', // FIXME: `Union` 'variant', + 'color', + 'size', 'sx', ], propValues: { diff --git a/packages/material-ui/src/Fab/Fab.d.ts b/packages/material-ui/src/Fab/Fab.d.ts index 906d9aa6bd991b..f035898aab6e33 100644 --- a/packages/material-ui/src/Fab/Fab.d.ts +++ b/packages/material-ui/src/Fab/Fab.d.ts @@ -6,6 +6,10 @@ import { OverrideProps } from '../OverridableComponent'; export interface FabPropsVariantOverrides {} +export interface FabPropsSizeOverrides {} + +export interface FabPropsColorOverrides {} + export type FabTypeMap

= ExtendButtonBaseTypeMap<{ props: P & { /** @@ -43,7 +47,7 @@ export type FabTypeMap

= ExtendB * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color?: PropTypes.Color; + color?: OverridableStringUnion; /** * If `true`, the component is disabled. * @default false @@ -68,7 +72,7 @@ export type FabTypeMap

= ExtendB * `small` is equivalent to the dense button styling. * @default 'large' */ - size?: 'small' | 'medium' | 'large'; + size?: OverridableStringUnion<'small' | 'medium' | 'large', FabPropsSizeOverrides>; /** * The variant to use. * @default 'circular' diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 70b08108724946..840213399053f0 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -230,7 +230,10 @@ Fab.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The component used for the root node. * Either a string to use a HTML element or a component. @@ -264,7 +267,10 @@ Fab.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense button styling. * @default 'large' */ - size: PropTypes.oneOf(['large', 'medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['large', 'medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From ceac21718cfff543241181c785c8b26a115a81f3 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 12:44:12 -0400 Subject: [PATCH 10/34] Add support custom color and size SvgIcon --- docs/pages/api-docs/svg-icon.json | 8 ++++---- packages/material-ui/src/SvgIcon/SvgIcon.d.ts | 15 +++++++++++++-- packages/material-ui/src/SvgIcon/SvgIcon.js | 10 ++++++++-- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/docs/pages/api-docs/svg-icon.json b/docs/pages/api-docs/svg-icon.json index afb03ddb6c1414..7b17989059ed5d 100644 --- a/docs/pages/api-docs/svg-icon.json +++ b/docs/pages/api-docs/svg-icon.json @@ -4,16 +4,16 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'action'
| 'disabled'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'action'
| 'disabled'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'
| string" }, "default": "'inherit'" }, "component": { "type": { "name": "elementType" } }, "fontSize": { "type": { - "name": "enum", - "description": "'inherit'
| 'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'inherit'
| 'large'
| 'medium'
| 'small'
| string" }, "default": "'medium'" }, diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts index 326d7c18ecbeaa..073bed65516fbf 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.d.ts +++ b/packages/material-ui/src/SvgIcon/SvgIcon.d.ts @@ -1,8 +1,13 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; +export interface SvgIconPropsSizeOverrides {} + +export interface SvgIconPropsColorOverrides {} + export interface SvgIconTypeMap

{ props: P & { /** @@ -37,12 +42,18 @@ export interface SvgIconTypeMap

{ * You can use the `htmlColor` prop to apply a color attribute to the SVG element. * @default 'inherit' */ - color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error'; + color?: OverridableStringUnion< + 'inherit' | 'primary' | 'secondary' | 'action' | 'disabled' | 'error', + SvgIconPropsColorOverrides + >; /** * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. * @default 'medium' */ - fontSize?: 'inherit' | 'large' | 'medium' | 'small'; + fontSize?: OverridableStringUnion< + 'inherit' | 'large' | 'medium' | 'small', + SvgIconPropsSizeOverrides + >; /** * Applies a color attribute to the SVG element. */ diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 68cf5abd857e77..d977b6dce17032 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -130,7 +130,10 @@ SvgIcon.propTypes /* remove-proptypes */ = { * You can use the `htmlColor` prop to apply a color attribute to the SVG element. * @default 'inherit' */ - color: PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The component used for the root node. * Either a string to use a HTML element or a component. @@ -140,7 +143,10 @@ SvgIcon.propTypes /* remove-proptypes */ = { * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. * @default 'medium' */ - fontSize: PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), + fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), + PropTypes.string, + ]), /** * Applies a color attribute to the SVG element. */ From 5c15f10209c58f49b97e67bff96a8424c967bb41 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 12:54:03 -0400 Subject: [PATCH 11/34] Add support custom color and size Icon --- docs/pages/api-docs/icon.json | 8 ++++---- framer/Material-UI.framerfx/code/Icon.tsx | 7 ------- framer/scripts/framerConfig.js | 2 +- packages/material-ui/src/Icon/Icon.d.ts | 15 +++++++++++++-- packages/material-ui/src/Icon/Icon.js | 10 ++++++++-- 5 files changed, 26 insertions(+), 16 deletions(-) diff --git a/docs/pages/api-docs/icon.json b/docs/pages/api-docs/icon.json index 3acb8c1e1093ec..f9093b9e6c1b15 100644 --- a/docs/pages/api-docs/icon.json +++ b/docs/pages/api-docs/icon.json @@ -5,16 +5,16 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'action'
| 'disabled'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'action'
| 'disabled'
| 'error'
| 'inherit'
| 'primary'
| 'secondary'
| string" }, "default": "'inherit'" }, "component": { "type": { "name": "elementType" } }, "fontSize": { "type": { - "name": "enum", - "description": "'inherit'
| 'large'
| 'medium'
| 'small'" + "name": "union", + "description": "'inherit'
| 'large'
| 'medium'
| 'small'
| string" }, "default": "'medium'" }, diff --git a/framer/Material-UI.framerfx/code/Icon.tsx b/framer/Material-UI.framerfx/code/Icon.tsx index 6b14521fd4749d..b7ebd57b722b75 100644 --- a/framer/Material-UI.framerfx/code/Icon.tsx +++ b/framer/Material-UI.framerfx/code/Icon.tsx @@ -6,7 +6,6 @@ import { pascalCase } from './utils'; interface Props extends SvgIconProps { baseClassName: string; - color: 'action' | 'disabled' | 'error' | 'inherit' | 'primary' | 'secondary'; icon: string; theme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; width: number | string; @@ -25,7 +24,6 @@ export function Icon(props: Props): JSX.Element | null { Icon.defaultProps = { baseClassName: 'material-icons', - color: 'inherit' as 'inherit', icon: 'add', theme: 'Filled' as 'Filled', width: 24, @@ -37,11 +35,6 @@ addPropertyControls(Icon, { type: ControlType.String, title: 'Base class name', }, - color: { - type: ControlType.Enum, - title: 'Color', - options: ['action', 'disabled', 'error', 'inherit', 'primary', 'secondary'], - }, icon: { type: ControlType.String, title: 'Icon', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index f7f3f16b0ca2a1..13ca40de83ac66 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -181,7 +181,7 @@ export const componentSettings = { template: 'fab.txt', }, Icon: { - ignoredProps: ['children', 'fontSize', 'sx'], + ignoredProps: ['children', 'fontSize', 'sx', 'color'], propValues: { icon: "'add'", theme: 'Filled', diff --git a/packages/material-ui/src/Icon/Icon.d.ts b/packages/material-ui/src/Icon/Icon.d.ts index 5f59366f8708bc..69b9edf61d4b58 100644 --- a/packages/material-ui/src/Icon/Icon.d.ts +++ b/packages/material-ui/src/Icon/Icon.d.ts @@ -1,9 +1,14 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { PropTypes } from '..'; import { Theme } from '../styles'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; +export interface IconPropsSizeOverrides {} + +export interface IconPropsColorOverrides {} + export interface IconTypeMap

{ props: P & { /** @@ -43,12 +48,18 @@ export interface IconTypeMap

{ * The color of the component. It supports those theme colors that make sense for this component. * @default 'inherit' */ - color?: Exclude | 'action' | 'disabled' | 'error'; + color?: OverridableStringUnion< + Exclude | 'action' | 'disabled' | 'error', + IconPropsColorOverrides + >; /** * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. * @default 'medium' */ - fontSize?: 'inherit' | 'large' | 'medium' | 'small'; + fontSize?: OverridableStringUnion< + 'inherit' | 'large' | 'medium' | 'small', + IconPropsSizeOverrides + >; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Icon/Icon.js b/packages/material-ui/src/Icon/Icon.js index a638a558c35b4a..d80956668c615d 100644 --- a/packages/material-ui/src/Icon/Icon.js +++ b/packages/material-ui/src/Icon/Icon.js @@ -132,7 +132,10 @@ Icon.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'inherit' */ - color: PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['action', 'disabled', 'error', 'inherit', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The component used for the root node. * Either a string to use a HTML element or a component. @@ -142,7 +145,10 @@ Icon.propTypes /* remove-proptypes */ = { * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size. * @default 'medium' */ - fontSize: PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), + fontSize: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['inherit', 'large', 'medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 25d0a277239521ccd8c4a95ebb02a836097a2922 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 14:40:21 -0400 Subject: [PATCH 12/34] Add support custom color and size Chip --- docs/pages/api-docs/chip.json | 9 ++++++--- framer/Material-UI.framerfx/code/Chip.tsx | 14 -------------- framer/scripts/framerConfig.js | 2 ++ packages/material-ui/src/Chip/Chip.d.ts | 8 ++++++-- packages/material-ui/src/Chip/Chip.js | 10 ++++++++-- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json index c10f56517f44f8..494b8cfedb62cf 100644 --- a/docs/pages/api-docs/chip.json +++ b/docs/pages/api-docs/chip.json @@ -6,8 +6,8 @@ "clickable": { "type": { "name": "bool" } }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'primary'
| 'secondary'
| string" }, "default": "'default'" }, @@ -18,7 +18,10 @@ "label": { "type": { "name": "node" } }, "onDelete": { "type": { "name": "func" } }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/framer/Material-UI.framerfx/code/Chip.tsx b/framer/Material-UI.framerfx/code/Chip.tsx index 271eb15aac42e6..1266b862f81fd5 100644 --- a/framer/Material-UI.framerfx/code/Chip.tsx +++ b/framer/Material-UI.framerfx/code/Chip.tsx @@ -6,12 +6,10 @@ import { Avatar } from './Avatar'; interface Props { clickable: boolean; - color: 'default' | 'primary' | 'secondary'; deleteIcon: string; disabled: boolean; icon: string; label: string; - size: 'medium' | 'small'; avatarImageFile: string; avatarImageUrl: string; deletable: boolean; @@ -50,12 +48,10 @@ export function Chip(props: Props): JSX.Element { Chip.defaultProps = { clickable: true, - color: 'default' as 'default', deleteIcon: '', disabled: false, icon: 'star', label: 'Chip', - size: 'medium' as 'medium', avatarImageFile: '', avatarImageUrl: '', deletable: false, @@ -69,11 +65,6 @@ addPropertyControls(Chip, { type: ControlType.Boolean, title: 'Clickable', }, - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'primary', 'secondary'], - }, deleteIcon: { type: ControlType.String, title: 'Delete icon', @@ -90,11 +81,6 @@ addPropertyControls(Chip, { type: ControlType.String, title: 'Label', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['medium', 'small'], - }, avatarImageFile: { type: ControlType.Image, title: 'Avatar Image File', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 13ca40de83ac66..632b761101a38f 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -130,6 +130,8 @@ export const componentSettings = { // FIXME: `Union` 'sx', 'variant', + 'color', + 'size', ], propValues: { avatarImageFile: "''", diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts index 92d8c71531a98d..9c78478412d53e 100644 --- a/packages/material-ui/src/Chip/Chip.d.ts +++ b/packages/material-ui/src/Chip/Chip.d.ts @@ -6,6 +6,10 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ChipPropsVariantOverrides {} +export interface ChipPropsSizeOverrides {} + +export interface ChipPropsColorOverrides {} + export interface ChipTypeMap

{ props: P & { /** @@ -109,7 +113,7 @@ export interface ChipTypeMap

{ * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color?: Exclude; + color?: OverridableStringUnion, ChipPropsColorOverrides>; /** * Override the default delete icon element. Shown only if `onDelete` is set. */ @@ -136,7 +140,7 @@ export interface ChipTypeMap

{ * The size of the component. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 18fb6084ae0ab1..779a30b711bfea 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -519,7 +519,10 @@ Chip.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'default' */ - color: PropTypes.oneOf(['default', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The component used for the root node. * Either a string to use a HTML element or a component. @@ -563,7 +566,10 @@ Chip.propTypes /* remove-proptypes */ = { * The size of the component. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From bc5db410261e8aa3dcbd95268cd428026ff313f5 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 20:06:45 -0400 Subject: [PATCH 13/34] Add support custom color and size Checkbox --- docs/pages/api-docs/checkbox.json | 9 ++++++--- framer/Material-UI.framerfx/code/Checkbox.tsx | 18 ++---------------- framer/scripts/framerConfig.js | 2 ++ .../material-ui/src/Checkbox/Checkbox.d.ts | 9 +++++++-- packages/material-ui/src/Checkbox/Checkbox.js | 10 ++++++++-- 5 files changed, 25 insertions(+), 23 deletions(-) diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json index 6576164f68961d..bc98cfc4e4838c 100644 --- a/docs/pages/api-docs/checkbox.json +++ b/docs/pages/api-docs/checkbox.json @@ -5,8 +5,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'primary'
| 'secondary'
| string" }, "default": "'secondary'" }, @@ -22,7 +22,10 @@ "onChange": { "type": { "name": "func" } }, "required": { "type": { "name": "bool" } }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index 1f6e6269be8dde..445205c985313e 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -5,10 +5,8 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; interface Props { checked: boolean; - color: 'default' | 'primary' | 'secondary'; defaultChecked?: boolean; disabled: boolean; - size: 'medium' | 'small'; label: string; width: number | string; height: number; @@ -16,7 +14,7 @@ interface Props { } export function Checkbox(props: Props): JSX.Element { - const { checked: checkedProp, label, onChange, size, ...other } = props; + const { checked: checkedProp, label, onChange, ...other } = props; const [checked, setChecked] = React.useState(false); const handleChange = (event: React.ChangeEvent) => { @@ -30,16 +28,14 @@ export function Checkbox(props: Props): JSX.Element { setChecked(checkedProp); }, [checkedProp]); - const control = ; + const control = ; return ; } Checkbox.defaultProps = { checked: false, - color: 'secondary' as 'secondary', disabled: false, - size: 'medium' as 'medium', label: 'Checkbox', width: 100, height: 42, @@ -50,11 +46,6 @@ addPropertyControls(Checkbox, { type: ControlType.Boolean, title: 'Checked', }, - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'primary', 'secondary'], - }, defaultChecked: { type: ControlType.Boolean, title: 'Default checked', @@ -63,11 +54,6 @@ addPropertyControls(Checkbox, { type: ControlType.Boolean, title: 'Disabled', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['medium', 'small'], - }, label: { type: ControlType.String, title: 'Label', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 632b761101a38f..1d34fe01ec5bf2 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -112,6 +112,8 @@ export const componentSettings = { 'sx', 'type', 'value', + 'color', + 'size', ], propValues: { label: "'Checkbox'", diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index 9379e860536432..f0485766025e49 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -1,8 +1,13 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { SwitchBaseProps } from '../internal/SwitchBase'; +export interface CheckboxPropsSizeOverrides {} + +export interface CheckboxPropsColorOverrides {} + export interface CheckboxProps extends StandardProps { /** @@ -35,7 +40,7 @@ export interface CheckboxProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color?: 'primary' | 'secondary' | 'default'; + color?: OverridableStringUnion<'primary' | 'secondary' | 'default', CheckboxPropsColorOverrides>; /** * If `true`, the component is disabled. */ @@ -90,7 +95,7 @@ export interface CheckboxProps * `small` is equivalent to the dense checkbox styling. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', CheckboxPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 7afee605df5039..33c8e451d58441 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -144,7 +144,10 @@ Checkbox.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color: PropTypes.oneOf(['default', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The default checked state. Use when the component is not controlled. */ @@ -203,7 +206,10 @@ Checkbox.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense checkbox styling. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 507cdb375934df4ec106f3998be36b731792d99e Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 20:17:37 -0400 Subject: [PATCH 14/34] Fix framer --- framer/Material-UI.framerfx/code/Checkbox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index 445205c985313e..6bbc892a63c5a2 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -14,7 +14,7 @@ interface Props { } export function Checkbox(props: Props): JSX.Element { - const { checked: checkedProp, label, onChange, ...other } = props; + const { checked: checkedProp, label, onChange, size, ...other } = props; const [checked, setChecked] = React.useState(false); const handleChange = (event: React.ChangeEvent) => { @@ -28,7 +28,7 @@ export function Checkbox(props: Props): JSX.Element { setChecked(checkedProp); }, [checkedProp]); - const control = ; + const control = ; return ; } From 20a901a97c49498dc78ad274033ec2c8a9467936 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 20:37:18 -0400 Subject: [PATCH 15/34] Fix framer --- framer/Material-UI.framerfx/code/Checkbox.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index 6bbc892a63c5a2..290f3a81d277af 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -5,8 +5,10 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; interface Props { checked: boolean; + color: 'default' | 'primary' | 'secondary' | 'custom'; defaultChecked?: boolean; disabled: boolean; + size: 'medium' | 'small'; label: string; width: number | string; height: number; @@ -35,7 +37,9 @@ export function Checkbox(props: Props): JSX.Element { Checkbox.defaultProps = { checked: false, + color: 'secondary' as 'secondary', disabled: false, + size: 'medium' as 'medium', label: 'Checkbox', width: 100, height: 42, @@ -46,6 +50,11 @@ addPropertyControls(Checkbox, { type: ControlType.Boolean, title: 'Checked', }, + color: { + type: ControlType.Enum, + title: 'Color', + options: ['default', 'primary', 'secondary'], + }, defaultChecked: { type: ControlType.Boolean, title: 'Default checked', @@ -54,6 +63,11 @@ addPropertyControls(Checkbox, { type: ControlType.Boolean, title: 'Disabled', }, + size: { + type: ControlType.Enum, + title: 'Size', + options: ['medium', 'small'], + }, label: { type: ControlType.String, title: 'Label', From c08b395b20f69b6da51d44617b8861196e74bb7d Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 20:38:39 -0400 Subject: [PATCH 16/34] Fix framer --- framer/Material-UI.framerfx/code/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index 290f3a81d277af..1f6e6269be8dde 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -5,7 +5,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; interface Props { checked: boolean; - color: 'default' | 'primary' | 'secondary' | 'custom'; + color: 'default' | 'primary' | 'secondary'; defaultChecked?: boolean; disabled: boolean; size: 'medium' | 'small'; From e01c2195aebcfdae996f3917ea4b208ff1113265 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 20:46:17 -0400 Subject: [PATCH 17/34] Fix framer --- framer/scripts/framerConfig.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 1d34fe01ec5bf2..632b761101a38f 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -112,8 +112,6 @@ export const componentSettings = { 'sx', 'type', 'value', - 'color', - 'size', ], propValues: { label: "'Checkbox'", From 6ace85a15aeae3d9dfa38595052cbd14f8707505 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 20:57:21 -0400 Subject: [PATCH 18/34] Revert "Add support custom color and size Checkbox" This reverts commit bc5db410261e8aa3dcbd95268cd428026ff313f5. --- docs/pages/api-docs/checkbox.json | 9 +++------ packages/material-ui/src/Checkbox/Checkbox.d.ts | 9 ++------- packages/material-ui/src/Checkbox/Checkbox.js | 10 ++-------- 3 files changed, 7 insertions(+), 21 deletions(-) diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json index bc98cfc4e4838c..6576164f68961d 100644 --- a/docs/pages/api-docs/checkbox.json +++ b/docs/pages/api-docs/checkbox.json @@ -5,8 +5,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "union", - "description": "'default'
| 'primary'
| 'secondary'
| string" + "name": "enum", + "description": "'default'
| 'primary'
| 'secondary'" }, "default": "'secondary'" }, @@ -22,10 +22,7 @@ "onChange": { "type": { "name": "func" } }, "required": { "type": { "name": "bool" } }, "size": { - "type": { - "name": "union", - "description": "'medium'
| 'small'
| string" - }, + "type": { "name": "enum", "description": "'medium'
| 'small'" }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index f0485766025e49..9379e860536432 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -1,13 +1,8 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; -import { OverridableStringUnion } from '@material-ui/types'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { SwitchBaseProps } from '../internal/SwitchBase'; -export interface CheckboxPropsSizeOverrides {} - -export interface CheckboxPropsColorOverrides {} - export interface CheckboxProps extends StandardProps { /** @@ -40,7 +35,7 @@ export interface CheckboxProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color?: OverridableStringUnion<'primary' | 'secondary' | 'default', CheckboxPropsColorOverrides>; + color?: 'primary' | 'secondary' | 'default'; /** * If `true`, the component is disabled. */ @@ -95,7 +90,7 @@ export interface CheckboxProps * `small` is equivalent to the dense checkbox styling. * @default 'medium' */ - size?: OverridableStringUnion<'small' | 'medium', CheckboxPropsSizeOverrides>; + size?: 'small' | 'medium'; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 33c8e451d58441..7afee605df5039 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -144,10 +144,7 @@ Checkbox.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['default', 'primary', 'secondary']), - PropTypes.string, - ]), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), /** * The default checked state. Use when the component is not controlled. */ @@ -206,10 +203,7 @@ Checkbox.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense checkbox styling. * @default 'medium' */ - size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ - PropTypes.oneOf(['medium', 'small']), - PropTypes.string, - ]), + size: PropTypes.oneOf(['medium', 'small']), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From f4f39c0c2eb89a23400878ecd3bd4ee990ee98b5 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 21:24:49 -0400 Subject: [PATCH 19/34] Add support custom color and size InputBase --- docs/pages/api-docs/input-base.json | 7 ++++++- packages/material-ui/src/InputBase/InputBase.d.ts | 4 +++- packages/material-ui/src/InputBase/InputBase.js | 5 ++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/input-base.json b/docs/pages/api-docs/input-base.json index e5b675c6abd771..93e88d7f66d1f2 100644 --- a/docs/pages/api-docs/input-base.json +++ b/docs/pages/api-docs/input-base.json @@ -3,7 +3,12 @@ "autoComplete": { "type": { "name": "string" } }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "color": { + "type": { + "name": "union", + "description": "'primary'
| 'secondary'
| string" + } + }, "components": { "type": { "name": "shape", "description": "{ Input?: elementType, Root?: elementType }" }, "default": "{}" diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts index 0c1fbd85b036ae..e9f2db6fcd0674 100644 --- a/packages/material-ui/src/InputBase/InputBase.d.ts +++ b/packages/material-ui/src/InputBase/InputBase.d.ts @@ -6,6 +6,8 @@ import { InternalStandardProps as StandardProps } from '..'; export interface InputBasePropsSizeOverrides {} +export interface InputBasePropsColorOverrides {} + export interface InputBaseProps extends StandardProps< React.HTMLAttributes, @@ -74,7 +76,7 @@ export interface InputBaseProps * The color of the component. It supports those theme colors that make sense for this component. * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ - color?: 'primary' | 'secondary'; + color?: OverridableStringUnion<'primary' | 'secondary', InputBasePropsColorOverrides>; /** * The components used for each slot inside the InputBase. * Either a string to use a HTML element or a component. diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index 3bcffc7ede6875..f7e395aba36586 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -587,7 +587,10 @@ InputBase.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary']), + PropTypes.string, + ]), /** * The components used for each slot inside the InputBase. * Either a string to use a HTML element or a component. From 0833d0c68c3ab9ca67a9e2cb5d4a12d7e020dbd8 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sat, 24 Apr 2021 21:50:23 -0400 Subject: [PATCH 20/34] Add support custom color and size OutlinedInput --- docs/pages/api-docs/outlined-input.json | 7 ++++++- packages/material-ui/src/OutlinedInput/OutlinedInput.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/outlined-input.json b/docs/pages/api-docs/outlined-input.json index d6ae6faadee1b2..ea8f87cf321bfb 100644 --- a/docs/pages/api-docs/outlined-input.json +++ b/docs/pages/api-docs/outlined-input.json @@ -3,7 +3,12 @@ "autoComplete": { "type": { "name": "string" } }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "color": { + "type": { + "name": "union", + "description": "'primary'
| 'secondary'
| string" + } + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "endAdornment": { "type": { "name": "node" } }, diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 0bf95ad47c63a4..5a8f6824e5c2a3 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -183,7 +183,10 @@ OutlinedInput.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary']), + PropTypes.string, + ]), /** * The default value. Use when the component is not controlled. */ From d74cc58517fe2c0c136440b2f2b70d69ff6a4b8c Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 07:52:15 -0400 Subject: [PATCH 21/34] Add support custom color and size FilledInput --- docs/pages/api-docs/filled-input.json | 7 ++++++- packages/material-ui/src/FilledInput/FilledInput.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json index 9b31ef3631c3dd..57ef9254f30844 100644 --- a/docs/pages/api-docs/filled-input.json +++ b/docs/pages/api-docs/filled-input.json @@ -3,7 +3,12 @@ "autoComplete": { "type": { "name": "string" } }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "color": { + "type": { + "name": "union", + "description": "'primary'
| 'secondary'
| string" + } + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableUnderline": { "type": { "name": "bool" } }, diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index eb8fd3fd1f65b8..b89eca043772dd 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -234,7 +234,10 @@ FilledInput.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary']), + PropTypes.string, + ]), /** * The default value. Use when the component is not controlled. */ From aa8c65c9429b0b69fabbdf7d5b05d5be479f04a9 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 08:07:18 -0400 Subject: [PATCH 22/34] Add support custom color Input --- docs/pages/api-docs/input.json | 7 ++++++- packages/material-ui/src/Input/Input.js | 5 ++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/input.json b/docs/pages/api-docs/input.json index 2bb728714f2725..b623726cccd5ff 100644 --- a/docs/pages/api-docs/input.json +++ b/docs/pages/api-docs/input.json @@ -3,7 +3,12 @@ "autoComplete": { "type": { "name": "string" } }, "autoFocus": { "type": { "name": "bool" } }, "classes": { "type": { "name": "object" } }, - "color": { "type": { "name": "enum", "description": "'primary'
| 'secondary'" } }, + "color": { + "type": { + "name": "union", + "description": "'primary'
| 'secondary'
| string" + } + }, "defaultValue": { "type": { "name": "any" } }, "disabled": { "type": { "name": "bool" } }, "disableUnderline": { "type": { "name": "bool" } }, diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index a7b26966dd4c19..f23db93eacd342 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -163,7 +163,10 @@ Input.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component. */ - color: PropTypes.oneOf(['primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['primary', 'secondary']), + PropTypes.string, + ]), /** * The default value. Use when the component is not controlled. */ From c47f730981c60ffdca5469fcfca8cf17dccec343 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 08:51:35 -0400 Subject: [PATCH 23/34] Add support custom color and size Switch --- docs/pages/api-docs/switch.json | 9 ++++++--- packages/material-ui/src/Switch/Switch.d.ts | 9 +++++++-- packages/material-ui/src/Switch/Switch.js | 10 ++++++++-- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/pages/api-docs/switch.json b/docs/pages/api-docs/switch.json index 5d3b2ad51b044e..0fb485c11d55b0 100644 --- a/docs/pages/api-docs/switch.json +++ b/docs/pages/api-docs/switch.json @@ -5,8 +5,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'primary'
| 'secondary'
| string" }, "default": "'secondary'" }, @@ -27,7 +27,10 @@ "onChange": { "type": { "name": "func" } }, "required": { "type": { "name": "bool" } }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/packages/material-ui/src/Switch/Switch.d.ts b/packages/material-ui/src/Switch/Switch.d.ts index f8ea1f22087ef0..99fb72bfdb132b 100644 --- a/packages/material-ui/src/Switch/Switch.d.ts +++ b/packages/material-ui/src/Switch/Switch.d.ts @@ -1,8 +1,13 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { SwitchBaseProps } from '../internal/SwitchBase'; +export interface SwitchPropsSizeOverrides {} + +export interface SwitchPropsColorOverrides {} + export interface SwitchProps extends StandardProps { /** @@ -44,7 +49,7 @@ export interface SwitchProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color?: 'primary' | 'secondary' | 'default'; + color?: OverridableStringUnion<'primary' | 'secondary' | 'default', SwitchPropsColorOverrides>; /** * If `true`, the component is disabled. */ @@ -58,7 +63,7 @@ export interface SwitchProps * `small` is equivalent to the dense switch styling. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', SwitchPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index b65670ab94f764..0b3c21684b482f 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -260,7 +260,10 @@ Switch.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color: PropTypes.oneOf(['default', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The default checked state. Use when the component is not controlled. */ @@ -314,7 +317,10 @@ Switch.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense switch styling. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From df754639e26e5afaf83f41c0b4553baa45a9902d Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 08:59:47 -0400 Subject: [PATCH 24/34] Fix framer --- framer/scripts/framerConfig.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 632b761101a38f..d6ca6845c24adc 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -316,7 +316,18 @@ export const componentSettings = { template: 'snackbar_content.txt', }, Switch: { - ignoredProps: ['checkedIcon', 'edge', 'icon', 'onChange', 'required', 'sx', 'type', 'value'], + ignoredProps: [ + 'checkedIcon', + 'edge', + 'icon', + 'onChange', + 'required', + 'sx', + 'type', + 'value', + 'color', + 'size', + ], propValues: { label: "'Switch'", width: 100, From 8c8ef4323cdb0a845297ec039092c494af79dc8e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 25 Apr 2021 16:46:19 +0200 Subject: [PATCH 25/34] yarn workspace framer build --- framer/Material-UI.framerfx/code/Switch.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Switch.tsx b/framer/Material-UI.framerfx/code/Switch.tsx index be603f6dde4660..23a59f81a92dd1 100644 --- a/framer/Material-UI.framerfx/code/Switch.tsx +++ b/framer/Material-UI.framerfx/code/Switch.tsx @@ -5,10 +5,8 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; interface Props { checked: boolean; - color: 'default' | 'primary' | 'secondary'; defaultChecked?: boolean; disabled: boolean; - size: 'medium' | 'small'; label: string; width: number | string; height: number; @@ -43,9 +41,7 @@ export function Switch(props: Props) { Switch.defaultProps = { checked: false, - color: 'secondary' as 'secondary', disabled: false, - size: 'medium' as 'medium', label: 'Switch', width: 100, height: 38, @@ -56,11 +52,6 @@ addPropertyControls(Switch, { type: ControlType.Boolean, title: 'Checked', }, - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'primary', 'secondary'], - }, defaultChecked: { type: ControlType.Boolean, title: 'Default checked', @@ -69,11 +60,6 @@ addPropertyControls(Switch, { type: ControlType.Boolean, title: 'Disabled', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['medium', 'small'], - }, label: { type: ControlType.String, title: 'Label', From 33d80d0b2022f91c03eac0cee5fa14e78c50ff2e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 25 Apr 2021 16:56:39 +0200 Subject: [PATCH 26/34] it doesn't matter --- framer/Material-UI.framerfx/code/Switch.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/framer/Material-UI.framerfx/code/Switch.tsx b/framer/Material-UI.framerfx/code/Switch.tsx index 23a59f81a92dd1..bb11971f3b7145 100644 --- a/framer/Material-UI.framerfx/code/Switch.tsx +++ b/framer/Material-UI.framerfx/code/Switch.tsx @@ -18,6 +18,7 @@ export function Switch(props: Props) { label, // @ts-ignore -- untyped onChange, + // @ts-ignore -- untyped size, ...other } = props; From 2efb6a5128908dc97baae8ff496669354d8e94b0 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 25 Apr 2021 17:20:36 +0200 Subject: [PATCH 27/34] fix build --- framer/scripts/templates/switch.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/framer/scripts/templates/switch.txt b/framer/scripts/templates/switch.txt index c8b60db03c97fb..d73b9ea6ee2acf 100644 --- a/framer/scripts/templates/switch.txt +++ b/framer/scripts/templates/switch.txt @@ -14,6 +14,7 @@ export function «componentName»(props: Props) { label, // @ts-ignore -- untyped onChange, + // @ts-ignore -- untyped size, ...other } = props; From 5dd2e64dda7daf998bc29f63eec65080c40aaa93 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 11:43:56 -0400 Subject: [PATCH 28/34] Revert "Revert "Add support custom color and size Checkbox"" This reverts commit 6ace85a15aeae3d9dfa38595052cbd14f8707505. --- docs/pages/api-docs/checkbox.json | 9 ++++++--- packages/material-ui/src/Checkbox/Checkbox.d.ts | 9 +++++++-- packages/material-ui/src/Checkbox/Checkbox.js | 10 ++++++++-- 3 files changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/pages/api-docs/checkbox.json b/docs/pages/api-docs/checkbox.json index 6576164f68961d..bc98cfc4e4838c 100644 --- a/docs/pages/api-docs/checkbox.json +++ b/docs/pages/api-docs/checkbox.json @@ -5,8 +5,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'primary'
| 'secondary'
| string" }, "default": "'secondary'" }, @@ -22,7 +22,10 @@ "onChange": { "type": { "name": "func" } }, "required": { "type": { "name": "bool" } }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/packages/material-ui/src/Checkbox/Checkbox.d.ts b/packages/material-ui/src/Checkbox/Checkbox.d.ts index 9379e860536432..f0485766025e49 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.d.ts +++ b/packages/material-ui/src/Checkbox/Checkbox.d.ts @@ -1,8 +1,13 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { SwitchBaseProps } from '../internal/SwitchBase'; +export interface CheckboxPropsSizeOverrides {} + +export interface CheckboxPropsColorOverrides {} + export interface CheckboxProps extends StandardProps { /** @@ -35,7 +40,7 @@ export interface CheckboxProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color?: 'primary' | 'secondary' | 'default'; + color?: OverridableStringUnion<'primary' | 'secondary' | 'default', CheckboxPropsColorOverrides>; /** * If `true`, the component is disabled. */ @@ -90,7 +95,7 @@ export interface CheckboxProps * `small` is equivalent to the dense checkbox styling. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', CheckboxPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js index 7afee605df5039..33c8e451d58441 100644 --- a/packages/material-ui/src/Checkbox/Checkbox.js +++ b/packages/material-ui/src/Checkbox/Checkbox.js @@ -144,7 +144,10 @@ Checkbox.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color: PropTypes.oneOf(['default', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.string, + ]), /** * The default checked state. Use when the component is not controlled. */ @@ -203,7 +206,10 @@ Checkbox.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense checkbox styling. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 523a20aeb4eca50342197ceb40283bed6e6b3b3d Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 11:49:24 -0400 Subject: [PATCH 29/34] Fix framer Checkbox --- framer/Material-UI.framerfx/code/Checkbox.tsx | 23 +++++++------------ framer/scripts/framerConfig.js | 2 ++ 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index 1f6e6269be8dde..dfcf11728b7c9d 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -5,10 +5,8 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; interface Props { checked: boolean; - color: 'default' | 'primary' | 'secondary'; defaultChecked?: boolean; disabled: boolean; - size: 'medium' | 'small'; label: string; width: number | string; height: number; @@ -16,7 +14,14 @@ interface Props { } export function Checkbox(props: Props): JSX.Element { - const { checked: checkedProp, label, onChange, size, ...other } = props; + const { + checked: checkedProp, + label, + onChange, + // @ts-ignore -- untyped + size, + ...other + } = props; const [checked, setChecked] = React.useState(false); const handleChange = (event: React.ChangeEvent) => { @@ -37,9 +42,7 @@ export function Checkbox(props: Props): JSX.Element { Checkbox.defaultProps = { checked: false, - color: 'secondary' as 'secondary', disabled: false, - size: 'medium' as 'medium', label: 'Checkbox', width: 100, height: 42, @@ -50,11 +53,6 @@ addPropertyControls(Checkbox, { type: ControlType.Boolean, title: 'Checked', }, - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'primary', 'secondary'], - }, defaultChecked: { type: ControlType.Boolean, title: 'Default checked', @@ -63,11 +61,6 @@ addPropertyControls(Checkbox, { type: ControlType.Boolean, title: 'Disabled', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['medium', 'small'], - }, label: { type: ControlType.String, title: 'Label', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index d6ca6845c24adc..82c0d79eb4f996 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -112,6 +112,8 @@ export const componentSettings = { 'sx', 'type', 'value', + 'color', + 'size', ], propValues: { label: "'Checkbox'", From a480ffece139278868126fdf0496a8b86b1d7e97 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 11:58:05 -0400 Subject: [PATCH 30/34] Fix framer --- framer/Material-UI.framerfx/code/Checkbox.tsx | 1 + framer/scripts/templates/selection_control.txt | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index dfcf11728b7c9d..ccd9236d670fb7 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -22,6 +22,7 @@ export function Checkbox(props: Props): JSX.Element { size, ...other } = props; + const [checked, setChecked] = React.useState(false); const handleChange = (event: React.ChangeEvent) => { diff --git a/framer/scripts/templates/selection_control.txt b/framer/scripts/templates/selection_control.txt index a6d5c876c1522d..11dfa5541d31e1 100644 --- a/framer/scripts/templates/selection_control.txt +++ b/framer/scripts/templates/selection_control.txt @@ -10,7 +10,15 @@ interface Props { } export function «componentName»(props: Props): JSX.Element { - const { checked: checkedProp, label, onChange, size, ...other } = props; + const { + checked: checkedProp, + label, + onChange, + // @ts-ignore -- untyped + size, + ...other + } = props; + const [checked, setChecked] = React.useState(false); const handleChange = (event: React.ChangeEvent) => { From c1734af5b0f781552b63a7658e8ac375a2871536 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 12:02:18 -0400 Subject: [PATCH 31/34] yarn prettier --- framer/Material-UI.framerfx/code/Checkbox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/framer/Material-UI.framerfx/code/Checkbox.tsx b/framer/Material-UI.framerfx/code/Checkbox.tsx index ccd9236d670fb7..22e654aec964bc 100644 --- a/framer/Material-UI.framerfx/code/Checkbox.tsx +++ b/framer/Material-UI.framerfx/code/Checkbox.tsx @@ -22,7 +22,7 @@ export function Checkbox(props: Props): JSX.Element { size, ...other } = props; - + const [checked, setChecked] = React.useState(false); const handleChange = (event: React.ChangeEvent) => { From 1c07ec090d9e15ffe7121059a494656e36792643 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 25 Apr 2021 12:13:55 -0400 Subject: [PATCH 32/34] Add support custom color and size Radio --- docs/pages/api-docs/radio.json | 9 ++++++--- framer/Material-UI.framerfx/code/Radio.tsx | 21 ++++++--------------- framer/scripts/framerConfig.js | 13 ++++++++++++- framer/scripts/templates/radio.txt | 7 ++++++- packages/material-ui/src/Radio/Radio.d.ts | 9 +++++++-- packages/material-ui/src/Radio/Radio.js | 10 ++++++++-- 6 files changed, 45 insertions(+), 24 deletions(-) diff --git a/docs/pages/api-docs/radio.json b/docs/pages/api-docs/radio.json index 24bb15c5606d7e..b5ba01f8d41457 100644 --- a/docs/pages/api-docs/radio.json +++ b/docs/pages/api-docs/radio.json @@ -5,8 +5,8 @@ "classes": { "type": { "name": "object" } }, "color": { "type": { - "name": "enum", - "description": "'default'
| 'primary'
| 'secondary'" + "name": "union", + "description": "'default'
| 'primary'
| 'secondary'
| string" }, "default": "'secondary'" }, @@ -20,7 +20,10 @@ "onChange": { "type": { "name": "func" } }, "required": { "type": { "name": "bool" } }, "size": { - "type": { "name": "enum", "description": "'medium'
| 'small'" }, + "type": { + "name": "union", + "description": "'medium'
| 'small'
| string" + }, "default": "'medium'" }, "sx": { "type": { "name": "object" } }, diff --git a/framer/Material-UI.framerfx/code/Radio.tsx b/framer/Material-UI.framerfx/code/Radio.tsx index c532c1c263b82a..e8b392d8d0b5d4 100644 --- a/framer/Material-UI.framerfx/code/Radio.tsx +++ b/framer/Material-UI.framerfx/code/Radio.tsx @@ -4,44 +4,35 @@ import FormControlLabel, { FormControlLabelProps } from '@material-ui/core/FormC import MuiRadio from '@material-ui/core/Radio'; interface Props extends Omit { - color: 'default' | 'primary' | 'secondary'; disabled: boolean; - size: 'medium' | 'small'; label: string; width: number | string; height: number; } export function Radio(props: Props): JSX.Element { - const { label, size, ...other } = props; + const { + label, + // @ts-ignore -- untyped + size, + ...other + } = props; return } label={label} {...other} />; } Radio.defaultProps = { - color: 'secondary' as 'secondary', disabled: false, - size: 'medium' as 'medium', label: 'Radio', width: '100%', height: 42, }; addPropertyControls(Radio, { - color: { - type: ControlType.Enum, - title: 'Color', - options: ['default', 'primary', 'secondary'], - }, disabled: { type: ControlType.Boolean, title: 'Disabled', }, - size: { - type: ControlType.Enum, - title: 'Size', - options: ['medium', 'small'], - }, label: { type: ControlType.String, title: 'Label', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index 82c0d79eb4f996..c80bc20147e1d3 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -263,7 +263,18 @@ export const componentSettings = { template: 'paper.txt', }, Radio: { - ignoredProps: ['checked', 'checkedIcon', 'icon', 'onChange', 'required', 'sx', 'type', 'value'], + ignoredProps: [ + 'checked', + 'checkedIcon', + 'icon', + 'onChange', + 'required', + 'sx', + 'type', + 'value', + 'color', + 'size', + ], propValues: { label: "'Radio'", width: "'100%'", diff --git a/framer/scripts/templates/radio.txt b/framer/scripts/templates/radio.txt index 0c36e35075c051..e4c2f1441d81be 100644 --- a/framer/scripts/templates/radio.txt +++ b/framer/scripts/templates/radio.txt @@ -9,7 +9,12 @@ interface Props extends Omit { } export function «componentName»(props: Props): JSX.Element { - const { label, size, ...other } = props; + const { + label, + // @ts-ignore -- untyped + size, + ...other + } = props; return ( } label={label} {...other} /> diff --git a/packages/material-ui/src/Radio/Radio.d.ts b/packages/material-ui/src/Radio/Radio.d.ts index cbceadd0179f48..6f295c7894e718 100644 --- a/packages/material-ui/src/Radio/Radio.d.ts +++ b/packages/material-ui/src/Radio/Radio.d.ts @@ -1,8 +1,13 @@ import * as React from 'react'; import { SxProps } from '@material-ui/system'; +import { OverridableStringUnion } from '@material-ui/types'; import { InternalStandardProps as StandardProps, Theme } from '..'; import { SwitchBaseProps } from '../internal/SwitchBase'; +export interface RadioPropsSizeOverrides {} + +export interface RadioPropsColorOverrides {} + export interface RadioProps extends StandardProps { /** @@ -28,7 +33,7 @@ export interface RadioProps * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color?: 'primary' | 'secondary' | 'default'; + color?: OverridableStringUnion<'primary' | 'secondary' | 'default', RadioPropsColorOverrides>; /** * If `true`, the component is disabled. */ @@ -42,7 +47,7 @@ export interface RadioProps * `small` is equivalent to the dense radio styling. * @default 'medium' */ - size?: 'small' | 'medium'; + size?: OverridableStringUnion<'small' | 'medium', RadioPropsSizeOverrides>; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js index 23e69e631cec87..044ce398c22570 100644 --- a/packages/material-ui/src/Radio/Radio.js +++ b/packages/material-ui/src/Radio/Radio.js @@ -139,7 +139,10 @@ Radio.propTypes /* remove-proptypes */ = { * The color of the component. It supports those theme colors that make sense for this component. * @default 'secondary' */ - color: PropTypes.oneOf(['default', 'primary', 'secondary']), + color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['default', 'primary', 'secondary']), + PropTypes.string, + ]), /** * If `true`, the component is disabled. */ @@ -185,7 +188,10 @@ Radio.propTypes /* remove-proptypes */ = { * `small` is equivalent to the dense radio styling. * @default 'medium' */ - size: PropTypes.oneOf(['medium', 'small']), + size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['medium', 'small']), + PropTypes.string, + ]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ From 5b2757b42137fa390f1e8930d611ae2a41223048 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 26 Apr 2021 13:05:36 +0200 Subject: [PATCH 33/34] Update packages/material-ui/src/Table/Table.d.ts --- packages/material-ui/src/Table/Table.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Table/Table.d.ts b/packages/material-ui/src/Table/Table.d.ts index ac7c46f11c3946..1e6b5b556891f1 100644 --- a/packages/material-ui/src/Table/Table.d.ts +++ b/packages/material-ui/src/Table/Table.d.ts @@ -25,7 +25,7 @@ export interface TableTypeMap

{ * Allows TableCells to inherit padding of the Table. * @default 'normal' */ - padding?: 'default' | 'checkbox' | 'none'; + padding?: 'normal' | 'checkbox' | 'none'; /** * Allows TableCells to inherit size of the Table. * @default 'medium' From fedb770ebcc815b120b79471c2f491d9274a448e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 26 Apr 2021 13:18:36 +0200 Subject: [PATCH 34/34] fix wrong padding value --- packages/material-ui/src/TableCell/TableCell.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/TableCell/TableCell.d.ts b/packages/material-ui/src/TableCell/TableCell.d.ts index df0671ef523f05..f023d6eb2e740b 100644 --- a/packages/material-ui/src/TableCell/TableCell.d.ts +++ b/packages/material-ui/src/TableCell/TableCell.d.ts @@ -63,7 +63,7 @@ export interface TableCellProps extends StandardProps