From cc50fb9fd5224144d81ec8dcc5cb573ea8e1fedf Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Wed, 27 Jan 2021 09:18:31 -0500 Subject: [PATCH 01/12] Chip to emotion --- docs/pages/api-docs/chip.json | 3 +- docs/translations/api-docs/chip/chip.json | 1 + packages/material-ui/src/Chip/Chip.d.ts | 7 +- packages/material-ui/src/Chip/Chip.js | 613 +++++++++++------- packages/material-ui/src/Chip/Chip.test.js | 16 +- .../material-ui/src/Chip/chipClasses.d.ts | 45 ++ packages/material-ui/src/Chip/chipClasses.js | 47 ++ packages/material-ui/src/Chip/index.d.ts | 3 + packages/material-ui/src/Chip/index.js | 3 + 9 files changed, 477 insertions(+), 261 deletions(-) create mode 100644 packages/material-ui/src/Chip/chipClasses.d.ts create mode 100644 packages/material-ui/src/Chip/chipClasses.js diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json index c730093609a65c..1d15454637f0ac 100644 --- a/docs/pages/api-docs/chip.json +++ b/docs/pages/api-docs/chip.json @@ -21,6 +21,7 @@ "type": { "name": "enum", "description": "'medium'
| 'small'" }, "default": "'medium'" }, + "sx": { "type": { "name": "object" } }, "variant": { "type": { "name": "union", @@ -73,6 +74,6 @@ "filename": "/packages/material-ui/src/Chip/Chip.js", "inheritance": null, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index 0d93559a050bfc..36228e57bcdcdb 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -13,6 +13,7 @@ "label": "The content of the component.", "onDelete": "Callback fired when the delete icon is clicked. If set, the delete icon will be shown.", "size": "The size of the component.", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "variant": "The variant to use." }, "classDescriptions": { diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts index cab738ff631663..2a081454b68e73 100644 --- a/packages/material-ui/src/Chip/Chip.d.ts +++ b/packages/material-ui/src/Chip/Chip.d.ts @@ -1,6 +1,7 @@ import * as React from 'react'; import { OverridableStringUnion } from '@material-ui/types'; -import { PropTypes } from '..'; +import { SxProps } from '@material-ui/system'; +import { PropTypes, Theme } from '..'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface ChipPropsVariantOverrides {} @@ -126,6 +127,10 @@ export interface ChipTypeMap

{ * @default 'medium' */ size?: 'small' | 'medium'; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; /** * The variant to use. * @default 'filled' diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 88fda7adee48f7..2a4feb9e64853d 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -1,23 +1,101 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { useThemeVariants } from '@material-ui/styles'; +import { deepmerge } from '@material-ui/utils'; +// import { useThemeVariants } from '@material-ui/styles'; +import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import CancelIcon from '../internal/svg-icons/Cancel'; -import withStyles from '../styles/withStyles'; import { emphasize, alpha } from '../styles/colorManipulator'; import useForkRef from '../utils/useForkRef'; import unsupportedProp from '../utils/unsupportedProp'; import capitalize from '../utils/capitalize'; import ButtonBase from '../ButtonBase'; +import useThemeProps from '../styles/useThemeProps'; +import experimentalStyled from '../styles/experimentalStyled'; +import chipClasses, { getChipUtilityClass } from './chipClasses'; -export const styles = (theme) => { - const backgroundColor = - theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]; - const deleteIconColor = alpha(theme.palette.text.primary, 0.26); +const overridesResolver = (props, styles) => { + const { styleProps } = props; + const { color, clickable, onDelete, size } = styleProps; - return { - /* Styles applied to the root element. */ - root: { + return deepmerge(styles.root || {}, { + ...styles[styleProps.variant], + ...(styleProps.disabled && styles.disabled), + ...styles[`size${capitalize(size)}`], + ...styles[`color${capitalize(color)}`], + ...(clickable && styles.clickable), + ...(clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`]), + ...(onDelete && styles.deletable), + ...(onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`]), + ...styles[`outlined${capitalize(styleProps.variant)}`], + [`& .${chipClasses.label}`]: { + ...styles.label, + ...styles[`label${capitalize(size)}`], + }, + [`& .${chipClasses.avatar}`]: { + ...styles.avatar, + ...styles[`avatar${capitalize(size)}`], + ...styles[`avatarColor${capitalize(color)}`], + }, + [`& .${chipClasses.icon}`]: { + ...styles.icon, + ...styles[`icon${capitalize(size)}`], + ...styles[`iconColor${capitalize(color)}`], + }, + [`& .${chipClasses.deleteIcon}`]: { + ...styles.deleteIcon, + ...styles[`deleteIcon${capitalize(size)}`], + ...styles[`deleteIconColor${capitalize(color)}`], + ...styles[`deleteIconOutlinedColor${capitalize(color)}`], + }, + }); +}; + +const useUtilityClasses = (styleProps) => { + const { classes, disabled, size, color, onDelete, clickable, variant } = styleProps; + + const slots = { + root: [ + 'root', + variant, + `${variant}${capitalize(color)}`, + `size${capitalize(size)}`, + `color${capitalize(color)}`, + disabled && 'disabled', + clickable && 'clickable', + clickable && `clickableColor${capitalize(color)}`, + onDelete && 'deletable', + onDelete && `deletableColor${capitalize(color)})`, + ], + label: ['label', `label${capitalize(size)}`], + avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`], + icon: ['icon', `icon${capitalize(size)}`, `iconColor${capitalize(color)}`], + deleteIcon: [ + 'deleteIcon', + `deleteIcon${capitalize(size)}`, + `deleteIconColor${capitalize(color)}`, + `deleteIconOutlinedColor${capitalize(color)})`, + ], + }; + + return composeClasses(slots, getChipUtilityClass, classes); +}; + +const ChipRoot = experimentalStyled( + 'div', + {}, + { + name: 'MuiChip', + slot: 'Root', + overridesResolver, + }, +)( + ({ theme, styleProps }) => { + const backgroundColor = + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]; + + return { + /* Styles applied to the root element. */ fontFamily: theme.typography.fontFamily, fontSize: theme.typography.pxToRem(13), display: 'inline-flex', @@ -38,11 +116,11 @@ export const styles = (theme) => { padding: 0, // Remove `button` padding verticalAlign: 'middle', boxSizing: 'border-box', - '&$disabled': { + '&.Mui-disabled': { opacity: theme.palette.action.disabledOpacity, pointerEvents: 'none', }, - '& $avatar': { + [`& .${chipClasses.avatar}`]: { marginLeft: 5, marginRight: -6, width: 24, @@ -50,170 +128,199 @@ export const styles = (theme) => { color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], fontSize: theme.typography.pxToRem(12), }, - '& $avatarColorPrimary': { + [`& .${chipClasses.avatarColorPrimary}`]: { color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.dark, }, - '& $avatarColorSecondary': { + [`& .${chipClasses.avatarColorSecondary}`]: { color: theme.palette.secondary.contrastText, backgroundColor: theme.palette.secondary.dark, }, - '& $avatarSmall': { + [`& .${chipClasses.avatarSmall}`]: { marginLeft: 4, marginRight: -4, width: 18, height: 18, fontSize: theme.typography.pxToRem(10), }, - }, - /* Styles applied to the root element if `size="small"`. */ - sizeSmall: { - height: 24, - }, - /* Styles applied to the root element if `color="primary"`. */ - colorPrimary: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.primary.contrastText, - }, - /* Styles applied to the root element if `color="secondary"`. */ - colorSecondary: { - backgroundColor: theme.palette.secondary.main, - color: theme.palette.secondary.contrastText, - }, - /* Pseudo-class applied to the root element if `disabled={true}`. */ - disabled: {}, - /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ - clickable: { - userSelect: 'none', - WebkitTapHighlightColor: 'transparent', - cursor: 'pointer', - '&:hover, &$focusVisible': { - backgroundColor: emphasize(backgroundColor, 0.08), - }, - '&:active': { - boxShadow: theme.shadows[1], - }, - }, - /* Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */ - clickableColorPrimary: { - '&:hover, &$focusVisible': { - backgroundColor: emphasize(theme.palette.primary.main, 0.08), - }, - }, - /* Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */ - clickableColorSecondary: { - '&:hover, &$focusVisible': { - backgroundColor: emphasize(theme.palette.secondary.main, 0.08), - }, - }, - /* Styles applied to the root element if `onDelete` is defined. */ - deletable: { - '&$focusVisible': { - backgroundColor: emphasize(backgroundColor, 0.08), - }, - }, - /* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */ - deletableColorPrimary: { - '&$focusVisible': { - backgroundColor: emphasize(theme.palette.primary.main, 0.2), - }, - }, - /* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */ - deletableColorSecondary: { - '&$focusVisible': { - backgroundColor: emphasize(theme.palette.secondary.main, 0.2), - }, - }, - /* Styles applied to the root element if `variant="outlined"`. */ - outlined: { - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - '&$focusVisible, $clickable&:hover': { - backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), - }, - '& $avatar': { - marginLeft: 4, - }, - '& $avatarSmall': { - marginLeft: 2, - }, - '& $icon': { - marginLeft: 4, - }, - '& $iconSmall': { - marginLeft: 2, - }, - '& $deleteIcon': { - marginRight: 5, - }, - '& $deleteIconSmall': { - marginRight: 3, - }, - }, - /* Styles applied to the root element if `variant="filled"`. */ - filled: {}, - /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ - outlinedPrimary: { - color: theme.palette.primary.main, - border: `1px solid ${theme.palette.primary.main}`, - '&$focusVisible, $clickable&:hover': { - backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), - }, - }, - /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ - outlinedSecondary: { - color: theme.palette.secondary.main, - border: `1px solid ${theme.palette.secondary.main}`, - '&$focusVisible, $clickable&:hover': { - backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), - }, - }, - // TODO v5: remove - /* Styles applied to the avatar element. */ - avatar: {}, - /* Styles applied to the avatar element if `size="small"`. */ - avatarSmall: {}, - /* Styles applied to the avatar element if `color="primary"`. */ - avatarColorPrimary: {}, - /* Styles applied to the avatar element if `color="secondary"`. */ - avatarColorSecondary: {}, - /* Styles applied to the icon element. */ - icon: { - color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], - marginLeft: 5, - marginRight: -6, - }, - /* Styles applied to the icon element if `size="small"`. */ - iconSmall: { - fontSize: 18, - marginLeft: 4, - marginRight: -4, - }, - /* Styles applied to the icon element if `color="primary"`. */ - iconColorPrimary: { - color: 'inherit', - }, - /* Styles applied to the icon element if `color="secondary"`. */ - iconColorSecondary: { - color: 'inherit', - }, - /* Styles applied to the label `span` element. */ - label: { - overflow: 'hidden', - textOverflow: 'ellipsis', - paddingLeft: 12, - paddingRight: 12, - whiteSpace: 'nowrap', - }, - /* Styles applied to the label `span` element if `size="small"`. */ - labelSmall: { - paddingLeft: 8, - paddingRight: 8, - }, - /* Styles applied to the deleteIcon element. */ - deleteIcon: { + /* Styles applied to the root element if `size="small"`. */ + ...(styleProps.size === 'small' && { + height: 24, + }), + /* Styles applied to the root element if `color="primary"`. */ + ...(styleProps.color === 'primary' && { + backgroundColor: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }), + /* Styles applied to the root element if `color="secondary"`. */ + ...(styleProps.color === 'secondary' && { + backgroundColor: theme.palette.secondary.main, + color: theme.palette.secondary.contrastText, + }), + /* Styles applied to the root element if `onDelete` is defined. */ + ...(styleProps.onDelete && { + '&.Mui-focusVisible': { + backgroundColor: emphasize(backgroundColor, 0.08), + }, + }), + /* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */ + ...(styleProps.onDelete && + styleProps.color === 'primary' && { + '&.Mui-focusVisible': { + backgroundColor: emphasize(theme.palette.primary.main, 0.2), + }, + }), + /* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */ + ...(styleProps.onDelete && + styleProps.color === 'secondary' && { + '&.Mui-focusVisible': { + backgroundColor: emphasize(theme.palette.secondary.main, 0.2), + }, + }), + /* Styles applied to the root element if `variant="outlined"`. */ + ...(styleProps.variant === 'outlined' && { + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { + backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, + [`& .${chipClasses.avatar}`]: { + marginLeft: 4, + }, + [`& .${chipClasses.avatarSmall}`]: { + marginLeft: 2, + }, + [`& .${chipClasses.icon}`]: { + marginLeft: 4, + }, + [`& .${chipClasses.iconSmall}`]: { + marginLeft: 2, + }, + [`& .${chipClasses.deleteIcon}`]: { + marginRight: 5, + }, + [`& .${chipClasses.deleteIconSmall}`]: { + marginRight: 3, + }, + }), + /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + ...(styleProps.variant === 'outlined' && + styleProps.color === 'primary' && { + color: theme.palette.primary.main, + border: `1px solid ${theme.palette.primary.main}`, + [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), + }, + }), + /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + ...(styleProps.variant === 'outlined' && + styleProps.color === 'secondary' && { + color: theme.palette.secondary.main, + border: `1px solid ${theme.palette.secondary.main}`, + [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + }, + }), + }; + }, + ({ theme, styleProps }) => { + const backgroundColor = + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]; + + return { + /* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ + ...(styleProps.clickable && { + userSelect: 'none', + WebkitTapHighlightColor: 'transparent', + cursor: 'pointer', + '&:hover, &.Mui-focusVisible': { + backgroundColor: emphasize(backgroundColor, 0.08), + }, + '&:active': { + boxShadow: theme.shadows[1], + }, + }), + /* Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */ + ...(styleProps.clickable && + styleProps.color === 'primary' && { + '&:hover, &.Mui-focusVisible': { + backgroundColor: emphasize(theme.palette.primary.main, 0.08), + }, + }), + /* Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */ + ...(styleProps.clickable && + styleProps.color === 'secondary' && { + '&:hover, &.Mui-focusVisible': { + backgroundColor: emphasize(theme.palette.secondary.main, 0.08), + }, + }), + }; + }, +); + +const ChipLabel = experimentalStyled( + 'span', + {}, + { + name: 'MuiChip', + slot: 'Label', + }, +)(({ styleProps }) => ({ + /* Styles applied to the label `span` element. */ + overflow: 'hidden', + textOverflow: 'ellipsis', + paddingLeft: 12, + paddingRight: 12, + whiteSpace: 'nowrap', + /* Styles applied to the label `span` element if `size="small"`. */ + ...(styleProps.size === 'small' && { + paddingLeft: 8, + paddingRight: 8, + }), +})); + +const ChipIcon = experimentalStyled( + 'span', + {}, + { + name: 'MuiChip', + slot: 'Icon', + }, +)(({ theme, styleProps }) => ({ + /* Styles applied to the icon element. */ + color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + marginLeft: 5, + marginRight: -6, + /* Styles applied to the icon element if `size="small"`. */ + ...(styleProps.size === 'small' && { + fontSize: 18, + marginLeft: 4, + marginRight: -4, + }), + /* Styles applied to the icon element if `color="primary"`. */ + ...(styleProps.color === 'primary' && { + color: 'inherit', + }), + /* Styles applied to the icon element if `color="secondary"`. */ + ...(styleProps.color === 'secondary' && { + color: 'inherit', + }), +})); + +const ChipDeleteIcon = experimentalStyled( + 'span', + {}, + { + name: 'MuiChip', + slot: 'DeleteIcon', + }, +)( + ({ theme, styleProps }) => { + const deleteIconColor = alpha(theme.palette.text.primary, 0.26); + return { + /* Styles applied to the deleteIcon element. */ WebkitTapHighlightColor: 'transparent', color: deleteIconColor, fontSize: 22, @@ -222,45 +329,47 @@ export const styles = (theme) => { '&:hover': { color: alpha(deleteIconColor, 0.4), }, - }, - /* Styles applied to the deleteIcon element if `size="small"`. */ - deleteIconSmall: { - fontSize: 16, - marginRight: 4, - marginLeft: -4, - }, - /* Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ - deleteIconColorPrimary: { - color: alpha(theme.palette.primary.contrastText, 0.7), - '&:hover, &:active': { - color: theme.palette.primary.contrastText, - }, - }, - /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ - deleteIconColorSecondary: { - color: alpha(theme.palette.secondary.contrastText, 0.7), - '&:hover, &:active': { - color: theme.palette.secondary.contrastText, - }, - }, + /* Styles applied to the deleteIcon element if `size="small"`. */ + ...(styleProps.size === 'small' && { + fontSize: 16, + marginRight: 4, + marginLeft: -4, + }), + /* Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ + ...(styleProps.color === 'primary' && { + color: alpha(theme.palette.primary.contrastText, 0.7), + '&:hover, &:active': { + color: theme.palette.primary.contrastText, + }, + }), + /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ + ...(styleProps.color === 'secondary' && { + color: alpha(theme.palette.secondary.contrastText, 0.7), + '&:hover, &:active': { + color: theme.palette.secondary.contrastText, + }, + }), + }; + }, + ({ theme, styleProps }) => ({ /* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ - deleteIconOutlinedColorPrimary: { - color: alpha(theme.palette.primary.main, 0.7), - '&:hover, &:active': { - color: theme.palette.primary.main, - }, - }, + ...(styleProps.color === 'primary' && + styleProps.variant === 'outlined' && { + color: alpha(theme.palette.primary.main, 0.7), + '&:hover, &:active': { + color: theme.palette.primary.main, + }, + }), /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ - deleteIconOutlinedColorSecondary: { - color: alpha(theme.palette.secondary.main, 0.7), - '&:hover, &:active': { - color: theme.palette.secondary.main, - }, - }, - /* Pseudo-class applied to the root element if keyboard focused. */ - focusVisible: {}, - }; -}; + ...(styleProps.color === 'secondary' && + styleProps.variant === 'outlined' && { + color: alpha(theme.palette.secondary.main, 0.7), + '&:hover, &:active': { + color: theme.palette.secondary.main, + }, + }), + }), +); function isDeleteKeyboardEvent(keyboardEvent) { return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'; @@ -269,10 +378,10 @@ function isDeleteKeyboardEvent(keyboardEvent) { /** * Chips represent complex entities in small blocks, such as a contact. */ -const Chip = React.forwardRef(function Chip(props, ref) { +const Chip = React.forwardRef(function Chip(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiChip' }); const { avatar: avatarProp, - classes, className, clickable: clickableProp, color = 'default', @@ -332,9 +441,23 @@ const Chip = React.forwardRef(function Chip(props, ref) { const clickable = clickableProp !== false && onClick ? true : clickableProp; const small = size === 'small'; - const Component = ComponentProp || (clickable || onDelete ? ButtonBase : 'div'); + const component = ComponentProp || (clickable || onDelete ? ButtonBase : 'div'); + + const styleProps = { + ...props, + component, + disabled, + size, + color, + onDelete: !!onDelete, + clickable, + variant, + }; + + const classes = useUtilityClasses(styleProps); + const moreProps = - Component === ButtonBase + component === ButtonBase ? { component: 'div', focusVisibleClassName: classes.focusVisible, @@ -354,10 +477,13 @@ const Chip = React.forwardRef(function Chip(props, ref) { deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? ( - React.cloneElement(deleteIconProp, { - className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses), - onClick: handleDeleteIconClick, - }) + + {deleteIconProp} + ) : ( + {iconProp} + + ); } if (process.env.NODE_ENV !== 'production') { @@ -395,55 +520,37 @@ const Chip = React.forwardRef(function Chip(props, ref) { } } - const themeVariantsClasses = useThemeVariants( - { - ...props, - clickable, - color, - disabled, - size, - variant, - }, - 'MuiChip', - ); + // const themeVariantsClasses = useThemeVariants( + // { + // ...props, + // clickable, + // color, + // disabled, + // size, + // variant, + // }, + // 'MuiChip', + // ); return ( - {avatar || icon} - + {label} - + {deleteIcon} - + ); }); @@ -526,6 +633,10 @@ Chip.propTypes = { * @default 'medium' */ size: PropTypes.oneOf(['medium', 'small']), + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.object, /** * The variant to use. * @default 'filled' @@ -536,4 +647,4 @@ Chip.propTypes = { ]), }; -export default withStyles(styles, { name: 'MuiChip' })(Chip); +export default Chip; diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js index 2c9d1df99f30a4..297c6b83ab72ad 100644 --- a/packages/material-ui/src/Chip/Chip.test.js +++ b/packages/material-ui/src/Chip/Chip.test.js @@ -2,9 +2,8 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy, stub } from 'sinon'; import { - getClasses, createMount, - describeConformance, + describeConformanceV5, act, createClientRender, fireEvent, @@ -15,22 +14,23 @@ import { import CheckBox from '../internal/svg-icons/CheckBox'; import Avatar from '../Avatar'; import Chip from './Chip'; +import classes from './chipClasses'; describe('', () => { - let classes; const mount = createMount(); const render = createClientRender(); - before(() => { - classes = getClasses(); - }); - - describeConformance(, () => ({ + describeConformanceV5(, () => ({ classes, inheritComponent: 'div', mount, + muiName: 'MuiChip', + testDeepOverrides: { slotName: 'label', slotClassName: classes.label }, + testVariantProps: { variant: 'outlined' }, + testStatOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' }, refInstanceof: window.HTMLDivElement, testComponentPropWith: 'span', + skip: ['componentsProp'], })); describe('text only', () => { diff --git a/packages/material-ui/src/Chip/chipClasses.d.ts b/packages/material-ui/src/Chip/chipClasses.d.ts new file mode 100644 index 00000000000000..3f246b480efbbe --- /dev/null +++ b/packages/material-ui/src/Chip/chipClasses.d.ts @@ -0,0 +1,45 @@ +export interface ChipClasses { + root: string; + sizeSmall: string; + sizeMedium: string; + colorPrimary: string; + colorSecondary: string; + disabled: string; + clickable: string; + clickableColorPrimary: string; + clickableColorSecondary: string; + deletable: string; + deletableColorPrimary: string; + deletableColorSecondary: string; + outlined: string; + filled: string; + outlinedPrimary: string; + outlinedSecondary: string; + avatar: string; + avatarSmall: string; + avatarMedium: string; + avatarColorPrimary: string; + avatarColorSecondary: string; + icon: string; + iconSmall: string; + iconMedium: string; + iconColorPrimary: string; + iconColorSecondary: string; + label: string; + labelSmall: string; + labelMedium: string; + deleteIcon: string; + deleteIconSmall: string; + deleteIconMedium: string; + deleteIconColorPrimary: string; + deleteIconColorSecondary: string; + deleteIconOutlinedColorPrimary: string; + deleteIconOutlinedColorSecondary: string; + focusVisible: string; +} + +declare const chipClasses: ChipClasses; + +export function getChipUtilityClass(slot: string): string; + +export default chipClasses; diff --git a/packages/material-ui/src/Chip/chipClasses.js b/packages/material-ui/src/Chip/chipClasses.js new file mode 100644 index 00000000000000..456a2f3bd1f349 --- /dev/null +++ b/packages/material-ui/src/Chip/chipClasses.js @@ -0,0 +1,47 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getChipUtilityClass(slot) { + return generateUtilityClass('MuiChip', slot); +} + +const chipClasses = generateUtilityClasses('MuiChip', [ + 'root', + 'sizeSmall', + 'sizeMedium', + 'colorPrimary', + 'colorSecondary', + 'disabled', + 'clickable', + 'clickableColorPrimary', + 'clickableColorSecondary', + 'deletable', + 'deletableColorPrimary', + 'deletableColorSecondary', + 'outlined', + 'filled', + 'outlinedPrimary', + 'outlinedSecondary', + 'avatar', + 'avatarSmall', + 'avatarMedium', + 'avatarColorPrimary', + 'avatarColorSecondary', + 'icon', + 'iconSmall', + 'iconMedium', + 'iconColorPrimary', + 'iconColorSecondary', + 'label', + 'labelSmall', + 'labelMedium', + 'deleteIcon', + 'deleteIconSmall', + 'deleteIconMedium', + 'deleteIconColorPrimary', + 'deleteIconColorSecondary', + 'deleteIconOutlinedColorPrimary', + 'deleteIconOutlinedColorSecondary', + 'focusVisible', +]); + +export default chipClasses; diff --git a/packages/material-ui/src/Chip/index.d.ts b/packages/material-ui/src/Chip/index.d.ts index e1bbc559f77473..142aa252697363 100644 --- a/packages/material-ui/src/Chip/index.d.ts +++ b/packages/material-ui/src/Chip/index.d.ts @@ -1,2 +1,5 @@ export { default } from './Chip'; export * from './Chip'; + +export { default as chipClasses } from './chipClasses'; +export * from './chipClasses'; diff --git a/packages/material-ui/src/Chip/index.js b/packages/material-ui/src/Chip/index.js index fa00616df9aa1f..5c7f16c51acddf 100644 --- a/packages/material-ui/src/Chip/index.js +++ b/packages/material-ui/src/Chip/index.js @@ -1 +1,4 @@ export { default } from './Chip'; + +export { default as chipClasses } from './chipClasses'; +export * from './chipClasses'; From f7457b5278a1819698a776f5d93a4843f685f4a1 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Wed, 27 Jan 2021 10:18:35 -0500 Subject: [PATCH 02/12] Add sx prop to framer ignore Chip --- framer/scripts/framerConfig.js | 1 + 1 file changed, 1 insertion(+) diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index d4ce7dc1b9748a..324de72ac68ad3 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -127,6 +127,7 @@ export const componentSettings = { 'children', 'onDelete', // FIXME: `Union` + 'sx', 'variant', ], propValues: { From 581f42b42036cd7399e1e86ae347213496cc216a Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Wed, 27 Jan 2021 12:12:57 -0500 Subject: [PATCH 03/12] Fix Chip styling emotion --- packages/material-ui/src/Chip/Chip.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 2a4feb9e64853d..4210d9b3f08668 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -16,18 +16,17 @@ import chipClasses, { getChipUtilityClass } from './chipClasses'; const overridesResolver = (props, styles) => { const { styleProps } = props; - const { color, clickable, onDelete, size } = styleProps; + const { color, clickable, onDelete, size, variant } = styleProps; return deepmerge(styles.root || {}, { - ...styles[styleProps.variant], - ...(styleProps.disabled && styles.disabled), + ...styles[variant], ...styles[`size${capitalize(size)}`], ...styles[`color${capitalize(color)}`], ...(clickable && styles.clickable), ...(clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`]), ...(onDelete && styles.deletable), ...(onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`]), - ...styles[`outlined${capitalize(styleProps.variant)}`], + ...(variant === 'outlined' && styles[`outlined${capitalize(variant)}`]), [`& .${chipClasses.label}`]: { ...styles.label, ...styles[`label${capitalize(size)}`], From 3b7e3ddd9fd2922cc9c2c5634986c4c6f77e17aa Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Wed, 27 Jan 2021 12:14:33 -0500 Subject: [PATCH 04/12] Option 2 https://github.com/mui-org/material-ui/pull/24649#discussion_r565470859 --- packages/material-ui/src/Chip/Chip.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 4210d9b3f08668..8f992314c0cc60 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -478,11 +478,10 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { deleteIconProp && React.isValidElement(deleteIconProp) ? ( - {deleteIconProp} - + /> ) : ( - {iconProp} - - ); + icon = ; } if (process.env.NODE_ENV !== 'production') { From 4a464bb0cc2e113447525c071daa2c53f383fc0a Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Thu, 28 Jan 2021 08:34:10 -0500 Subject: [PATCH 05/12] Change Chip icon styles to root --- packages/material-ui/src/Chip/Chip.js | 276 ++++++++---------- .../material-ui/src/Chip/chipClasses.d.ts | 42 +-- 2 files changed, 123 insertions(+), 195 deletions(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 8f992314c0cc60..18169d8c81d5f9 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -92,6 +92,7 @@ const ChipRoot = experimentalStyled( ({ theme, styleProps }) => { const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[700]; + const deleteIconColor = alpha(theme.palette.text.primary, 0.26); return { /* Styles applied to the root element. */ @@ -142,6 +143,57 @@ const ChipRoot = experimentalStyled( height: 18, fontSize: theme.typography.pxToRem(10), }, + /* Styles applied to the icon element. */ + [`& .${chipClasses.icon}`]: { + color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], + marginLeft: 5, + marginRight: -6, + /* Styles applied to the icon element if `size="small"`. */ + ...(styleProps.size === 'small' && { + fontSize: 18, + marginLeft: 4, + marginRight: -4, + }), + /* Styles applied to the icon element if `color="primary"`. */ + ...(styleProps.color === 'primary' && { + color: 'inherit', + }), + /* Styles applied to the icon element if `color="secondary"`. */ + ...(styleProps.color === 'secondary' && { + color: 'inherit', + }), + }, + /* Styles applied to the deleteIcon element. */ + [`& .${chipClasses.deleteIcon}`]: { + WebkitTapHighlightColor: 'transparent', + color: deleteIconColor, + fontSize: 22, + cursor: 'pointer', + margin: '0 5px 0 -6px', + '&:hover': { + color: alpha(deleteIconColor, 0.4), + }, + /* Styles applied to the deleteIcon element if `size="small"`. */ + ...(styleProps.size === 'small' && { + fontSize: 16, + marginRight: 4, + marginLeft: -4, + }), + /* Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ + ...(styleProps.color === 'primary' && { + color: alpha(theme.palette.primary.contrastText, 0.7), + '&:hover, &:active': { + color: theme.palette.primary.contrastText, + }, + }), + /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ + ...(styleProps.color === 'secondary' && { + color: alpha(theme.palette.secondary.contrastText, 0.7), + '&:hover, &:active': { + color: theme.palette.secondary.contrastText, + }, + }), + }, /* Styles applied to the root element if `size="small"`. */ ...(styleProps.size === 'small' && { height: 24, @@ -176,52 +228,6 @@ const ChipRoot = experimentalStyled( backgroundColor: emphasize(theme.palette.secondary.main, 0.2), }, }), - /* Styles applied to the root element if `variant="outlined"`. */ - ...(styleProps.variant === 'outlined' && { - backgroundColor: 'transparent', - border: `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { - backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), - }, - [`& .${chipClasses.avatar}`]: { - marginLeft: 4, - }, - [`& .${chipClasses.avatarSmall}`]: { - marginLeft: 2, - }, - [`& .${chipClasses.icon}`]: { - marginLeft: 4, - }, - [`& .${chipClasses.iconSmall}`]: { - marginLeft: 2, - }, - [`& .${chipClasses.deleteIcon}`]: { - marginRight: 5, - }, - [`& .${chipClasses.deleteIconSmall}`]: { - marginRight: 3, - }, - }), - /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ - ...(styleProps.variant === 'outlined' && - styleProps.color === 'primary' && { - color: theme.palette.primary.main, - border: `1px solid ${theme.palette.primary.main}`, - [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { - backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), - }, - }), - /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ - ...(styleProps.variant === 'outlined' && - styleProps.color === 'secondary' && { - color: theme.palette.secondary.main, - border: `1px solid ${theme.palette.secondary.main}`, - [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { - backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), - }, - }), }; }, ({ theme, styleProps }) => { @@ -257,6 +263,68 @@ const ChipRoot = experimentalStyled( }), }; }, + ({ theme, styleProps }) => ({ + /* Styles applied to the root element if `variant="outlined"`. */ + ...(styleProps.variant === 'outlined' && { + backgroundColor: 'transparent', + border: `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { + backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, + [`& .${chipClasses.avatar}`]: { + marginLeft: 4, + }, + [`& .${chipClasses.avatarSmall}`]: { + marginLeft: 2, + }, + [`& .${chipClasses.icon}`]: { + marginLeft: 4, + }, + [`& .${chipClasses.iconSmall}`]: { + marginLeft: 2, + }, + [`& .${chipClasses.deleteIcon}`]: { + marginRight: 5, + }, + [`& .${chipClasses.deleteIconSmall}`]: { + marginRight: 3, + }, + }), + /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + ...(styleProps.variant === 'outlined' && + styleProps.color === 'primary' && { + color: theme.palette.primary.main, + border: `1px solid ${theme.palette.primary.main}`, + [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity), + }, + /* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ + [`& .${chipClasses.deleteIcon}`]: { + color: alpha(theme.palette.primary.main, 0.7), + '&:hover, &:active': { + color: theme.palette.primary.main, + }, + }, + }), + /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + ...(styleProps.variant === 'outlined' && + styleProps.color === 'secondary' && { + color: theme.palette.secondary.main, + border: `1px solid ${theme.palette.secondary.main}`, + [`&.Mui-focusVisible, .${chipClasses.clickable}&:hover`]: { + backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.hoverOpacity), + }, + /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ + [`& .${chipClasses.deleteIcon}`]: { + color: alpha(theme.palette.secondary.main, 0.7), + '&:hover, &:active': { + color: theme.palette.secondary.main, + }, + }, + }), + }), ); const ChipLabel = experimentalStyled( @@ -280,96 +348,6 @@ const ChipLabel = experimentalStyled( }), })); -const ChipIcon = experimentalStyled( - 'span', - {}, - { - name: 'MuiChip', - slot: 'Icon', - }, -)(({ theme, styleProps }) => ({ - /* Styles applied to the icon element. */ - color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300], - marginLeft: 5, - marginRight: -6, - /* Styles applied to the icon element if `size="small"`. */ - ...(styleProps.size === 'small' && { - fontSize: 18, - marginLeft: 4, - marginRight: -4, - }), - /* Styles applied to the icon element if `color="primary"`. */ - ...(styleProps.color === 'primary' && { - color: 'inherit', - }), - /* Styles applied to the icon element if `color="secondary"`. */ - ...(styleProps.color === 'secondary' && { - color: 'inherit', - }), -})); - -const ChipDeleteIcon = experimentalStyled( - 'span', - {}, - { - name: 'MuiChip', - slot: 'DeleteIcon', - }, -)( - ({ theme, styleProps }) => { - const deleteIconColor = alpha(theme.palette.text.primary, 0.26); - return { - /* Styles applied to the deleteIcon element. */ - WebkitTapHighlightColor: 'transparent', - color: deleteIconColor, - fontSize: 22, - cursor: 'pointer', - margin: '0 5px 0 -6px', - '&:hover': { - color: alpha(deleteIconColor, 0.4), - }, - /* Styles applied to the deleteIcon element if `size="small"`. */ - ...(styleProps.size === 'small' && { - fontSize: 16, - marginRight: 4, - marginLeft: -4, - }), - /* Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ - ...(styleProps.color === 'primary' && { - color: alpha(theme.palette.primary.contrastText, 0.7), - '&:hover, &:active': { - color: theme.palette.primary.contrastText, - }, - }), - /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ - ...(styleProps.color === 'secondary' && { - color: alpha(theme.palette.secondary.contrastText, 0.7), - '&:hover, &:active': { - color: theme.palette.secondary.contrastText, - }, - }), - }; - }, - ({ theme, styleProps }) => ({ - /* Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ - ...(styleProps.color === 'primary' && - styleProps.variant === 'outlined' && { - color: alpha(theme.palette.primary.main, 0.7), - '&:hover, &:active': { - color: theme.palette.primary.main, - }, - }), - /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ - ...(styleProps.color === 'secondary' && - styleProps.variant === 'outlined' && { - color: alpha(theme.palette.secondary.main, 0.7), - '&:hover, &:active': { - color: theme.palette.secondary.main, - }, - }), - }), -); - function isDeleteKeyboardEvent(keyboardEvent) { return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'; } @@ -476,12 +454,10 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? ( - + React.cloneElement(deleteIconProp, { + className: clsx(deleteIconProp.props.className, classes.deleteIcon, customClasses), + onClick: handleDeleteIconClick, + }) ) : ( ; + icon = React.cloneElement(iconProp, { + className: clsx(classes.icon, iconProp.props.className), + }); } if (process.env.NODE_ENV !== 'production') { @@ -514,18 +492,6 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { } } - // const themeVariantsClasses = useThemeVariants( - // { - // ...props, - // clickable, - // color, - // disabled, - // size, - // variant, - // }, - // 'MuiChip', - // ); - return ( ; export function getChipUtilityClass(slot: string): string; From 98c6b3cad2084f6fdfe3203728558f4aba727b1b Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Thu, 28 Jan 2021 08:48:36 -0500 Subject: [PATCH 06/12] remove dup classes from avatar on chip --- docs/pages/api-docs/chip.json | 5 ++++ docs/translations/api-docs/chip/chip.json | 25 +++++++++++++++++++ packages/material-ui/src/Chip/Chip.d.ts | 10 ++++++++ packages/material-ui/src/Chip/Chip.js | 5 +--- .../material-ui/src/Modal/modalClasses.d.ts | 9 +++++++ 5 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 packages/material-ui/src/Modal/modalClasses.d.ts diff --git a/docs/pages/api-docs/chip.json b/docs/pages/api-docs/chip.json index 1d15454637f0ac..c10f56517f44f8 100644 --- a/docs/pages/api-docs/chip.json +++ b/docs/pages/api-docs/chip.json @@ -35,6 +35,7 @@ "classes": [ "root", "sizeSmall", + "sizeMedium", "colorPrimary", "colorSecondary", "disabled", @@ -50,16 +51,20 @@ "outlinedSecondary", "avatar", "avatarSmall", + "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", + "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", + "labelMedium", "deleteIcon", "deleteIconSmall", + "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index 36228e57bcdcdb..31e7d1887f4a2c 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -23,6 +23,11 @@ "nodeName": "the root element", "conditions": "size=\"small\"" }, + "sizeMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "size=\"medium\"" + }, "colorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -97,6 +102,11 @@ "nodeName": "the avatar element", "conditions": "size=\"small\"" }, + "avatarMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the avatar element", + "conditions": "size=\"medium\"" + }, "avatarColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", @@ -113,6 +123,11 @@ "nodeName": "the icon element", "conditions": "size=\"small\"" }, + "iconMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the icon element", + "conditions": "size=\"medium\"" + }, "iconColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", @@ -132,6 +147,11 @@ "nodeName": "the label `span` element", "conditions": "size=\"small\"" }, + "labelMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the label `span` element", + "conditions": "size=\"medium\"" + }, "deleteIcon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the deleteIcon element" @@ -141,6 +161,11 @@ "nodeName": "the deleteIcon element", "conditions": "size=\"small\"" }, + "deleteIconMedium": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the deleteIcon element", + "conditions": "size=\"medium\"" + }, "deleteIconColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", diff --git a/packages/material-ui/src/Chip/Chip.d.ts b/packages/material-ui/src/Chip/Chip.d.ts index 2a081454b68e73..8d61c1efa89cf8 100644 --- a/packages/material-ui/src/Chip/Chip.d.ts +++ b/packages/material-ui/src/Chip/Chip.d.ts @@ -26,6 +26,8 @@ export interface ChipTypeMap

{ root?: string; /** Styles applied to the root element if `size="small"`. */ sizeSmall?: string; + /** Styles applied to the root element if `size="medium"`. */ + sizeMedium?: string; /** Styles applied to the root element if `color="primary"`. */ colorPrimary?: string; /** Styles applied to the root element if `color="secondary"`. */ @@ -56,6 +58,8 @@ export interface ChipTypeMap

{ avatar?: string; /** Styles applied to the avatar element if `size="small"`. */ avatarSmall?: string; + /** Styles applied to the avatar element if `size="medium"`. */ + avatarMedium?: string; /** Styles applied to the avatar element if `color="primary"`. */ avatarColorPrimary?: string; /** Styles applied to the avatar element if `color="secondary"`. */ @@ -64,6 +68,8 @@ export interface ChipTypeMap

{ icon?: string; /** Styles applied to the icon element if `size="small"`. */ iconSmall?: string; + /** Styles applied to the icon element if `size="medium"`. */ + iconMedium?: string; /** Styles applied to the icon element if `color="primary"`. */ iconColorPrimary?: string; /** Styles applied to the icon element if `color="secondary"`. */ @@ -72,10 +78,14 @@ export interface ChipTypeMap

{ label?: string; /** Styles applied to the label `span` element if `size="small"`. */ labelSmall?: string; + /** Styles applied to the label `span` element if `size="medium"`. */ + labelMedium?: string; /** Styles applied to the deleteIcon element. */ deleteIcon?: string; /** Styles applied to the deleteIcon element if `size="small"`. */ deleteIconSmall?: string; + /** Styles applied to the deleteIcon element if `size="medium"`. */ + deleteIconMedium?: string; /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ deleteIconColorPrimary?: string; /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 18169d8c81d5f9..28a0afcd4e49fe 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -469,10 +469,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { let avatar = null; if (avatarProp && React.isValidElement(avatarProp)) { avatar = React.cloneElement(avatarProp, { - className: clsx(classes.avatar, avatarProp.props.className, { - [classes.avatarSmall]: small, - [classes[`avatarColor${capitalize(color)}`]]: color !== 'default', - }), + className: clsx(classes.avatar, avatarProp.props.className), }); } diff --git a/packages/material-ui/src/Modal/modalClasses.d.ts b/packages/material-ui/src/Modal/modalClasses.d.ts new file mode 100644 index 00000000000000..0e5a493d4c68c8 --- /dev/null +++ b/packages/material-ui/src/Modal/modalClasses.d.ts @@ -0,0 +1,9 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getChipUtilityClass(slot) { + return generateUtilityClass('MuiChip', slot); +} + +const chipClasses = generateUtilityClasses('MuiChip', ['root']); + +export default chipClasses; From dcdc9743aff4a688d15b68548463ff82f8cb0e80 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Thu, 28 Jan 2021 08:50:00 -0500 Subject: [PATCH 07/12] remove file --- packages/material-ui/src/Modal/modalClasses.d.ts | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 packages/material-ui/src/Modal/modalClasses.d.ts diff --git a/packages/material-ui/src/Modal/modalClasses.d.ts b/packages/material-ui/src/Modal/modalClasses.d.ts deleted file mode 100644 index 0e5a493d4c68c8..00000000000000 --- a/packages/material-ui/src/Modal/modalClasses.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; - -export function getChipUtilityClass(slot) { - return generateUtilityClass('MuiChip', slot); -} - -const chipClasses = generateUtilityClasses('MuiChip', ['root']); - -export default chipClasses; From 11bff3d281e4e6fe53e51a00dae7ddbc56247cbf Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 28 Jan 2021 15:26:31 +0100 Subject: [PATCH 08/12] fixed typo --- packages/material-ui/src/Chip/Chip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 28a0afcd4e49fe..c970c5f0535319 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -64,7 +64,7 @@ const useUtilityClasses = (styleProps) => { clickable && 'clickable', clickable && `clickableColor${capitalize(color)}`, onDelete && 'deletable', - onDelete && `deletableColor${capitalize(color)})`, + onDelete && `deletableColor${capitalize(color)}`, ], label: ['label', `label${capitalize(size)}`], avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`], From 1bb3b004a31cc38650e0ace1f5b1c7b8029f5ad2 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 28 Jan 2021 15:35:39 +0100 Subject: [PATCH 09/12] Update packages/material-ui/src/Chip/Chip.js --- packages/material-ui/src/Chip/Chip.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index c970c5f0535319..158524e1b00999 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { deepmerge } from '@material-ui/utils'; -// import { useThemeVariants } from '@material-ui/styles'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import CancelIcon from '../internal/svg-icons/Cancel'; import { emphasize, alpha } from '../styles/colorManipulator'; From 7b052ec5a049a4a0c0bc6b9eab900efa09d41cf8 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 28 Jan 2021 15:35:46 +0100 Subject: [PATCH 10/12] Update packages/material-ui/src/Chip/Chip.js --- packages/material-ui/src/Chip/Chip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 158524e1b00999..848575453fc3b7 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -72,7 +72,7 @@ const useUtilityClasses = (styleProps) => { 'deleteIcon', `deleteIcon${capitalize(size)}`, `deleteIconColor${capitalize(color)}`, - `deleteIconOutlinedColor${capitalize(color)})`, + `deleteIconOutlinedColor${capitalize(color)}`, ], }; From 0b84a2ab4f8dd0177fbfb38f4d6457d58a42d5b8 Mon Sep 17 00:00:00 2001 From: Sean Campbell Date: Thu, 28 Jan 2021 10:22:56 -0500 Subject: [PATCH 11/12] Trigger --- packages/material-ui/src/Chip/Chip.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index 848575453fc3b7..ca2031fcddba0d 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -389,7 +389,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) { const handleKeyDown = (event) => { // Ignore events from children of `Chip`. if (event.currentTarget === event.target && isDeleteKeyboardEvent(event)) { - // will be handled in keyUp, otherwise some browsers + // Will be handled in keyUp, otherwise some browsers // might init navigation event.preventDefault(); } From e2aaa11bb4b577cac9d5cefe6f003be65160f9b3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 28 Jan 2021 17:30:22 +0100 Subject: [PATCH 12/12] order to match the source to allow simpler review It has allowed me to find one mistake with `outlined${capitalize(variant)}` --- packages/material-ui/src/Chip/Chip.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index ca2031fcddba0d..8383e1b0d3daaa 100644 --- a/packages/material-ui/src/Chip/Chip.js +++ b/packages/material-ui/src/Chip/Chip.js @@ -18,18 +18,14 @@ const overridesResolver = (props, styles) => { const { color, clickable, onDelete, size, variant } = styleProps; return deepmerge(styles.root || {}, { - ...styles[variant], ...styles[`size${capitalize(size)}`], ...styles[`color${capitalize(color)}`], ...(clickable && styles.clickable), ...(clickable && color !== 'default' && styles[`clickableColor${capitalize(color)})`]), ...(onDelete && styles.deletable), ...(onDelete && color !== 'default' && styles[`deletableColor${capitalize(color)}`]), - ...(variant === 'outlined' && styles[`outlined${capitalize(variant)}`]), - [`& .${chipClasses.label}`]: { - ...styles.label, - ...styles[`label${capitalize(size)}`], - }, + ...styles[variant], + ...(variant === 'outlined' && styles[`outlined${capitalize(color)}`]), [`& .${chipClasses.avatar}`]: { ...styles.avatar, ...styles[`avatar${capitalize(size)}`], @@ -40,6 +36,10 @@ const overridesResolver = (props, styles) => { ...styles[`icon${capitalize(size)}`], ...styles[`iconColor${capitalize(color)}`], }, + [`& .${chipClasses.label}`]: { + ...styles.label, + ...styles[`label${capitalize(size)}`], + }, [`& .${chipClasses.deleteIcon}`]: { ...styles.deleteIcon, ...styles[`deleteIcon${capitalize(size)}`], @@ -56,14 +56,14 @@ const useUtilityClasses = (styleProps) => { root: [ 'root', variant, - `${variant}${capitalize(color)}`, + disabled && 'disabled', `size${capitalize(size)}`, `color${capitalize(color)}`, - disabled && 'disabled', clickable && 'clickable', clickable && `clickableColor${capitalize(color)}`, onDelete && 'deletable', onDelete && `deletableColor${capitalize(color)}`, + `${variant}${capitalize(color)}`, ], label: ['label', `label${capitalize(size)}`], avatar: ['avatar', `avatar${capitalize(size)}`, `avatarColor${capitalize(color)}`],