From 89a3cfa74cdcafd4ab76037d873a7f367b125b91 Mon Sep 17 00:00:00 2001 From: kodai <33568829+kodai3@users.noreply.github.com> Date: Mon, 3 Aug 2020 20:02:24 +0900 Subject: [PATCH] [Badge] Rename overlap circle -> circular and rectangle -> rectangular for consistency (#22050) --- docs/pages/api-docs/badge.md | 18 +++++----- .../pages/components/avatars/BadgeAvatars.js | 4 +-- .../pages/components/avatars/BadgeAvatars.tsx | 4 +-- .../pages/components/badges/BadgeOverlap.js | 9 +++-- .../pages/components/badges/BadgeOverlap.tsx | 9 +++-- .../pages/guides/migration-v4/migration-v4.md | 11 ++++++ packages/material-ui/src/Badge/Badge.d.ts | 16 ++++----- packages/material-ui/src/Badge/Badge.js | 36 +++++++++---------- packages/material-ui/src/Badge/Badge.test.js | 4 +-- 9 files changed, 66 insertions(+), 45 deletions(-) diff --git a/docs/pages/api-docs/badge.md b/docs/pages/api-docs/badge.md index 45e432472eb349..581130f9185f28 100644 --- a/docs/pages/api-docs/badge.md +++ b/docs/pages/api-docs/badge.md @@ -36,7 +36,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo | component | elementType | 'span' | The component used for the root node. Either a string to use a HTML element or a component. | | invisible | bool | | If `true`, the badge will be invisible. | | max | number | 99 | Max count to show. | -| overlap | 'circle'
| 'rectangle' | 'rectangle' | Wrapped shape the badge should overlap. | +| 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. | @@ -54,14 +54,14 @@ 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"`. -| anchorOriginTopRightRectangle | .MuiBadge-anchorOriginTopRightRectangle | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. -| anchorOriginBottomRightRectangle | .MuiBadge-anchorOriginBottomRightRectangle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. -| anchorOriginTopLeftRectangle | .MuiBadge-anchorOriginTopLeftRectangle | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. -| anchorOriginBottomLeftRectangle | .MuiBadge-anchorOriginBottomLeftRectangle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. -| anchorOriginTopRightCircle | .MuiBadge-anchorOriginTopRightCircle | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. -| anchorOriginBottomRightCircle | .MuiBadge-anchorOriginBottomRightCircle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. -| anchorOriginTopLeftCircle | .MuiBadge-anchorOriginTopLeftCircle | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. -| anchorOriginBottomLeftCircle | .MuiBadge-anchorOriginBottomLeftCircle | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. +| 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"`. +| anchorOriginBottomLeftRectangular | .MuiBadge-anchorOriginBottomLeftRectangular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. +| anchorOriginTopRightCircular | .MuiBadge-anchorOriginTopRightCircular | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. +| anchorOriginBottomRightCircular | .MuiBadge-anchorOriginBottomRightCircular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. +| anchorOriginTopLeftCircular | .MuiBadge-anchorOriginTopLeftCircular | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. +| anchorOriginBottomLeftCircular | .MuiBadge-anchorOriginBottomLeftCircular | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. | invisible | .MuiBadge-invisible | Pseudo-class to the badge `span` element if `invisible={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/src/pages/components/avatars/BadgeAvatars.js b/docs/src/pages/components/avatars/BadgeAvatars.js index 0ed2333512661c..38fe4f78aa8bcb 100644 --- a/docs/src/pages/components/avatars/BadgeAvatars.js +++ b/docs/src/pages/components/avatars/BadgeAvatars.js @@ -55,7 +55,7 @@ export default function BadgeAvatars() { return (
{rectangle} - + {circle} - + {circle}
diff --git a/docs/src/pages/components/badges/BadgeOverlap.tsx b/docs/src/pages/components/badges/BadgeOverlap.tsx index 29669b01930e9c..26fc7fcac5bf10 100644 --- a/docs/src/pages/components/badges/BadgeOverlap.tsx +++ b/docs/src/pages/components/badges/BadgeOverlap.tsx @@ -35,10 +35,15 @@ export default function BadgeOverlap() { {rectangle} - + {circle} - + {circle} diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 55fb8004a967b6..51fba8f457d96d 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -51,6 +51,17 @@ Support for non-ref-forwarding class components in the `component` prop or as an Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate. This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. ``) +### Badge + +- Rename `circle` to `circular` and `rectangle` to `rectangular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + - + + + + + ``` + ### BottomNavigation - typescript: The `event` in `onChange` is no longer typed as a `React.ChangeEvent` but `React.SyntheticEvent`. diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts index e30b1a0e6890dd..eebdff6a0989f4 100644 --- a/packages/material-ui/src/Badge/Badge.d.ts +++ b/packages/material-ui/src/Badge/Badge.d.ts @@ -15,7 +15,7 @@ export interface BadgeTypeMap

{ /** * Wrapped shape the badge should overlap. */ - overlap?: 'rectangle' | 'circle'; + overlap?: 'rectangular' | 'circular'; /** * The content rendered within the badge. */ @@ -56,13 +56,13 @@ export type BadgeClassKey = | 'colorSecondary' | 'colorError' | 'dot' - | 'anchorOriginTopRightRectangle' - | 'anchorOriginBottomRightRectangle' - | 'anchorOriginTopLeftRectangle' - | 'anchorOriginBottomLeftRectangle' - | 'anchorOriginTopRightCircle' - | 'anchorOriginBottomRightCircle' - | 'anchorOriginTopLeftCircle' + | 'anchorOriginTopRightRectangular' + | 'anchorOriginBottomRightRectangular' + | 'anchorOriginTopLeftRectangular' + | 'anchorOriginBottomLeftRectangular' + | 'anchorOriginTopRightCircular' + | 'anchorOriginBottomRightCircular' + | 'anchorOriginTopLeftCircular' | 'invisible'; /** * diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js index 12c26968fdeb0d..3800f1ad57bc20 100644 --- a/packages/material-ui/src/Badge/Badge.js +++ b/packages/material-ui/src/Badge/Badge.js @@ -62,8 +62,8 @@ export const styles = (theme) => ({ minWidth: RADIUS_DOT * 2, padding: 0, }, - /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`. */ - anchorOriginTopRightRectangle: { + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */ + anchorOriginTopRightRectangular: { top: 0, right: 0, transform: 'scale(1) translate(50%, -50%)', @@ -72,8 +72,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(50%, -50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */ - anchorOriginBottomRightRectangle: { + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */ + anchorOriginBottomRightRectangular: { bottom: 0, right: 0, transform: 'scale(1) translate(50%, 50%)', @@ -82,8 +82,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(50%, 50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */ - anchorOriginTopLeftRectangle: { + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */ + anchorOriginTopLeftRectangular: { top: 0, left: 0, transform: 'scale(1) translate(-50%, -50%)', @@ -92,8 +92,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(-50%, -50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */ - anchorOriginBottomLeftRectangle: { + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */ + anchorOriginBottomLeftRectangular: { bottom: 0, left: 0, transform: 'scale(1) translate(-50%, 50%)', @@ -102,8 +102,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(-50%, 50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */ - anchorOriginTopRightCircle: { + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */ + anchorOriginTopRightCircular: { top: '14%', right: '14%', transform: 'scale(1) translate(50%, -50%)', @@ -112,8 +112,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(50%, -50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */ - anchorOriginBottomRightCircle: { + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */ + anchorOriginBottomRightCircular: { bottom: '14%', right: '14%', transform: 'scale(1) translate(50%, 50%)', @@ -122,8 +122,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(50%, 50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */ - anchorOriginTopLeftCircle: { + /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */ + anchorOriginTopLeftCircular: { top: '14%', left: '14%', transform: 'scale(1) translate(-50%, -50%)', @@ -132,8 +132,8 @@ export const styles = (theme) => ({ transform: 'scale(0) translate(-50%, -50%)', }, }, - /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */ - anchorOriginBottomLeftCircle: { + /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */ + anchorOriginBottomLeftCircular: { bottom: '14%', left: '14%', transform: 'scale(1) translate(-50%, 50%)', @@ -173,7 +173,7 @@ const Badge = React.forwardRef(function Badge(props, ref) { component: ComponentProp = 'span', invisible: invisibleProp, max: maxProp = 99, - overlap: overlapProp = 'rectangle', + overlap: overlapProp = 'rectangular', showZero = false, variant: variantProp = 'standard', ...other @@ -285,7 +285,7 @@ Badge.propTypes = { /** * Wrapped shape the badge should overlap. */ - overlap: PropTypes.oneOf(['circle', 'rectangle']), + overlap: PropTypes.oneOf(['circular', 'rectangular']), /** * Controls whether the badge is hidden when `badgeContent` is zero. */ diff --git a/packages/material-ui/src/Badge/Badge.test.js b/packages/material-ui/src/Badge/Badge.test.js index 1f1582b0d225ae..d4d7b4f83e9e3b 100644 --- a/packages/material-ui/src/Badge/Badge.test.js +++ b/packages/material-ui/src/Badge/Badge.test.js @@ -175,7 +175,7 @@ describe('', () => { badgeContent: 0, color: 'primary', variant: 'standard', - overlap: 'circle', + overlap: 'circular', anchorOrigin: { vertical: 'bottom', horizontal: 'left', @@ -185,6 +185,6 @@ describe('', () => { expect(findBadge(wrapper.container)).to.have.text(''); expect(findBadge(wrapper.container)).to.have.class(classes.colorSecondary); expect(findBadge(wrapper.container)).to.have.class(classes.dot); - expect(findBadge(wrapper.container)).to.have.class(classes.anchorOriginTopRightRectangle); + expect(findBadge(wrapper.container)).to.have.class(classes.anchorOriginTopRightRectangular); }); });