From d37b5f6cd50f5289150353509b7a25d7ff13386b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 10 Aug 2020 08:54:21 +0200 Subject: [PATCH 1/4] added support for custom variants --- packages/material-ui/src/Badge/Badge.d.ts | 7 +++++- packages/material-ui/src/Badge/Badge.js | 27 +++++++++++++++++++++-- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts index 94d60b50741e0e..5c91ba6d9b599d 100644 --- a/packages/material-ui/src/Badge/Badge.d.ts +++ b/packages/material-ui/src/Badge/Badge.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import { OverridableStringUnion } from '@material-ui/types'; import { OverridableComponent, OverrideProps } from '../OverridableComponent'; export interface BadgeOrigin { @@ -6,6 +7,9 @@ export interface BadgeOrigin { horizontal: 'left' | 'right'; } +export interface BadgePropsVariantOverrides {} +export type BadgeVariantDefaults = Record<'standard' | 'dot', true>; + export interface BadgeTypeMap

{ props: P & { /** @@ -43,7 +47,7 @@ export interface BadgeTypeMap

{ /** * The variant to use. */ - variant?: 'standard' | 'dot'; + variant?: OverridableStringUnion; }; defaultComponent: D; classKey: BadgeClassKey; @@ -56,6 +60,7 @@ export type BadgeClassKey = | 'colorSecondary' | 'colorError' | 'dot' + | 'standard' | 'anchorOriginTopRightRectangular' | 'anchorOriginBottomRightRectangular' | 'anchorOriginTopLeftRectangular' diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 3800f1ad57bc20..926717116d0bf1 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; +import { useThemeVariants } from '@material-ui/styles'; import withStyles from '../styles/withStyles'; import capitalize from '../utils/capitalize'; @@ -62,6 +63,8 @@ export const styles = (theme) => ({ minWidth: RADIUS_DOT * 2, padding: 0, }, + /* Styles applied to the root element if `variant="standard"`. */ + standard: {}, /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */ anchorOriginTopRightRectangular: { top: 0, @@ -206,6 +209,22 @@ const Badge = React.forwardRef(function Badge(props, ref) { variant = variantProp, } = invisible ? prevProps : props; + const themeVariantsClasses = useThemeVariants( + { + ...props, + anchorOrigin, + badgeContent, + color, + component: ComponentProp, + invisible, + max, + overlap, + showZero, + variant, + }, + 'MuiBadge', + ); + let displayValue = ''; if (variant !== 'dot') { @@ -218,6 +237,7 @@ const Badge = React.forwardRef(function Badge(props, ref) { {displayValue} @@ -293,7 +313,10 @@ Badge.propTypes = { /** * The variant to use. */ - variant: PropTypes.oneOf(['dot', 'standard']), + variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['dot', 'standard']), + PropTypes.string, + ]), }; export default withStyles(styles, { name: 'MuiBadge' })(Badge); From 806cdc40ccf1d91b59e80daf7b9d4034ef45b4cc Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 10 Aug 2020 08:55:47 +0200 Subject: [PATCH 2/4] prettier + docs:api --- docs/pages/api-docs/badge.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/pages/api-docs/badge.md b/docs/pages/api-docs/badge.md index 581130f9185f28..d9f13d3b35f7bb 100644 --- a/docs/pages/api-docs/badge.md +++ b/docs/pages/api-docs/badge.md @@ -38,7 +38,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo | max | number | 99 | Max count to show. | | overlap | 'circular'
| 'rectangular' | 'rectangular' | Wrapped shape the badge should overlap. | | showZero | bool | false | Controls whether the badge is hidden when `badgeContent` is zero. | -| variant | 'dot'
| 'standard' | 'standard' | The variant to use. | +| variant | 'dot'
| 'standard'
| string | 'standard' | The variant to use. | The `ref` is forwarded to the root element. @@ -54,6 +54,7 @@ Any other props supplied will be provided to the root element (native element). | colorSecondary | .MuiBadge-colorSecondary | Styles applied to the root element if `color="secondary"`. | colorError | .MuiBadge-colorError | Styles applied to the root element if `color="error"`. | dot | .MuiBadge-dot | Styles applied to the root element if `variant="dot"`. +| standard | .MuiBadge-standard | Styles applied to the root element if `variant="standard"`. | anchorOriginTopRightRectangular | .MuiBadge-anchorOriginTopRightRectangular | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. | anchorOriginBottomRightRectangular | .MuiBadge-anchorOriginBottomRightRectangular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. | anchorOriginTopLeftRectangular | .MuiBadge-anchorOriginTopLeftRectangular | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. From a8526227b45026c2d5a3c920842f58e658e20cea Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 10 Aug 2020 09:10:04 +0200 Subject: [PATCH 3/4] framer --- framer/Material-UI.framerfx/code/Badge.tsx | 7 ------- framer/scripts/framerConfig.js | 2 ++ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/framer/Material-UI.framerfx/code/Badge.tsx b/framer/Material-UI.framerfx/code/Badge.tsx index 1f645c68a0979d..227bdc34d8fe3d 100644 --- a/framer/Material-UI.framerfx/code/Badge.tsx +++ b/framer/Material-UI.framerfx/code/Badge.tsx @@ -7,7 +7,6 @@ interface Props { badgeContent: string; max: number; showZero: boolean; - variant: 'dot' | 'standard'; icon: string; theme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; badgeColor: 'default' | 'primary' | 'secondary' | 'error'; @@ -37,7 +36,6 @@ Badge.defaultProps = { badgeContent: '8', max: 99, showZero: false, - variant: 'standard' as 'standard', icon: '', theme: 'Filled' as 'Filled', badgeColor: 'primary' as 'primary', @@ -58,11 +56,6 @@ addPropertyControls(Badge, { type: ControlType.Boolean, title: 'Show zero', }, - variant: { - type: ControlType.Enum, - title: 'Variant', - options: ['dot', 'standard'], - }, icon: { type: ControlType.String, title: 'Icon', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index a7394666304457..c9e7e217643b5e 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -39,6 +39,8 @@ export const componentSettings = { 'disableFocusRipple', 'invisible', 'overlap', + // FIXME: `Union` + 'variant', ], propValues: { icon: "''", From f846f49f50422a27708cd5bacd737d6ea5cc921c Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 10 Aug 2020 20:28:15 +0200 Subject: [PATCH 4/4] added to allowlisted components --- packages/material-ui-styles/src/makeStyles/makeStyles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js index dc7bc5b5a9916f..0909b5ebcc5d95 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.js @@ -242,7 +242,7 @@ export default function makeStyles(stylesOrCreator, options = {}) { React.useDebugValue(classes); } if (process.env.NODE_ENV !== 'production') { - const allowlistedComponents = ['MuiButton', 'MuiTypography']; + const allowlistedComponents = ['MuiButton', 'MuiTypography', 'MuiBadge']; if ( name &&