[Badge][material-next] Add Badge component #37850

DiegoAndai · 2023-07-06T20:04:12Z

Badge issue: #37835
Material You umbrella issue: #29345

I have followed (at least) the PR section of the contributing guide.

Changes

Copy Badge from material
Migrate to Typescript
Remove deprecated components and componentsProps
Drop ThemeProvider in favor of CssVarsProvider
Implement Material You design specs
Add component playground to v5 docs
Refactor styles to use component CSS Variables

Breaking changes

https://github.com/mui/material-ui/pull/37850/files#diff-9548901bac6f3274c402a36fad9b83afe49cf663499e51d9fe306195d149a4a1

CSS Variables

I was heavily inspired by Joy Badge's variables, but didn't use exactly the same. As naming convention, I followed Material You's token convention in which component variables have the --md-comp prefix followed by the component's name, so in this case it is: --md-comp-badge

Playground

Link: https://deploy-preview-37850--material-ui.netlify.app/material-ui/react-badge/#material-you-version

Screen.Recording.2023-07-13.at.12.53.41.mov

mui-bot · 2023-07-06T20:07:10Z

Netlify deploy preview

docs/data/material/components/badges/badges.md

@mui/material-next: parsed: +2.36% , gzip: +1.55%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 257dac5

Signed-off-by: Diego Andai <diego@mui.com>

mnajdova

Looks great, left few comments for consideration.

mnajdova · 2023-07-20T10:38:25Z

packages/mui-material-next/migration.md

+
+Color options were changed to match Material You:
+
+- `"default"`, `"info"`, `"success"`, and `"warning"` were removed and are no longer supported out-of-the-box


Should we still keep these? We dsicussed that it may be useful to define these in the team. cc @danilo-leal

I discussed with @danilo-leal and we will work on a Material UI Material You theme that makes upgrading smoother (for example, having these colors) and that makes sense with the Material You color system.

I'll be working on developing this, but there are still things to figure out, like for example which would be the default theme, the Material You default theme, or the Material UI MY theme.

I don't want to block the components progress while we figure out the Material UI MY theme, so for now I think we should continue the work using the Material You default theme (which doesn't have these colors) and when we have more clarity we can go back to this. What do you think?

My worry with this is that we would introduce a breaking change and later add back these values. It could be frustrating for people to have to do some changes, and revert them later.

You're right, what we should do then is add the "info", "success", and "warning" to the palette following Material You's custom colors guidelines: https://m3.material.io/styles/color/the-color-system/custom-colors.

Regarding the "default" color, that's not really a color but rather the badge has no background:

Do you think we should keep that one as well?

I'll work with @zanivan on this.

In v5 we started with removing "default" from the color values, I wonder why it is still there in the Badge. The reasoning for it was that default is not a color, we should use as default some valid color value. I propose we drop it.

mnajdova · 2023-07-20T10:39:48Z

packages/mui-material-next/migration.md

+- `standard` renamed to `large`, which is still the default
+- `dot` renamed to `small`


We use size as a name for the sizes. I propose keeping all variant values as deprecated to easy up the migration, and use a new size prop for this instead. We can deprecate the whole variant prop with an appropriate deprecation message.

@mnajdova I agree with naming the prop size.

About keeping the variant prop, I think it would be better to remove it right away, because:

Migrating can be covered with a codemod

Keeping it would complicate and bloat the code

What do you think?

I feel like we can likely get more people to try it early if we don't introduce many breaking changes with the first version, but happy to experiment with what you suggest.

I see two ways going forward:

deprecate props and move forward with minimal breaking changes

introduce breaking changes together with a codemod for them at the moment they are implemented

So we should either, add a codemod now, or deprication, one of these two needs to be implemented.

That makes sense, I'll look into both options and let you know which one I think is better.

DiegoAndai · 2023-07-24T20:19:55Z

Hey @mnajdova I rolled back both deprecations 😊:

Bring back the variant prop with a deprecation message
Bring back "info", "warning", "success", and "default" color options. I did maintain the change that "error" is the new default though as that's the only color used in the Material You specs.

You can check the new colors in the playground: https://deploy-preview-37850--material-ui.netlify.app/material-ui/react-badge/#material-you-version

@zanivan the colors are looking great! 🎉 here's a picture of them being used in the badges (in order: "primary", "error", "info", "warning", and "success"):

A couple of questions regarding the colors:

May we use the tone 20 for the on dark tokens? (onInfo, onWarning, onSuccess). In Figma, the tone 15 is used, but all the other colors in Material You use tone 20. Doing this would make the implementation a little easier and the color usage more consistent. The picture is using the tone 20 of each color, I think it looks nice 👍🏼
The warning color on light mode is the only one that I think might need a little improving, I think it looks a little too brown and it should look more yellow or orange

zanivan · 2023-07-24T20:40:03Z

May we use the tone 20 for the on dark tokens?

Yep, absolutely! I'll update it on Figma.

The warning color on light mode is the only one that I think might need a little improving, I think it looks a little too brown and it should look more yellow or orange

I'll change the Hue a bit—I wouldn't saturate it, though. MY seems less saturate, so yellow or orange could be tricky and look a bit off from the others, since those are colors with more perceived light.

DiegoAndai · 2023-07-24T20:45:39Z

@mnajdova another question, regarding this comment, should we just remove the classes or is there anything else to do?

mnajdova · 2023-07-25T09:57:21Z

packages/mui-material-next/src/Badge/badgeClasses.ts

+  'colorTertiary',
+  'overlapRectangular',
+  'overlapCircular',
+  // TODO: v6 remove the overlap value from these class keys


@DiegoAndai we don't want to have in v6 combination of props in the classes. If someone wants to combine these two, they can create selector containing both classes. Each of the keys in classes should define one prop + value combination.

zanivan · 2023-07-25T11:26:25Z

@DiegoAndai I tried to bump the warning colors a bit to the yellow tones, I believe it works. Here's the Figma link

DiegoAndai · 2023-07-25T21:06:32Z

@mnajdova I removed the combined classes, added the corresponding migration section, and updated tests. Here's a sandbox of the new usage creating a CSS selector to combine anchorOrigin and overlap classes: https://codesandbox.io/s/next-badge-overlap-anchor-class-k7vwf7?file=/src/App.tsx

@zanivan updated the warning color 🙌🏼:

mnajdova

Looks good, left few final comments, nothing big. Well done! The PR description is very detailed, love it!

packages/mui-material-next/migration.md

packages/mui-material-next/src/Badge/Badge.tsx

packages/mui-material-next/src/Badge/Badge.spec.tsx

Co-authored-by: Marija Najdova <mnajdova@gmail.com> Signed-off-by: Diego Andai <diego@mui.com>

DiegoAndai added 2 commits July 6, 2023 09:45

Copy Badge files from material to material-next

9d3e666

Migrate files to Typescript

8785132

DiegoAndai added design: material This is about Material Design, please involve a visual or UX designer in the process component: badge This is the name of the generic UI component, not the React module! v6.x design: material you labels Jul 6, 2023

DiegoAndai self-assigned this Jul 6, 2023

DiegoAndai mentioned this pull request Jul 6, 2023

[Badge][material-next] Add Badge component #37835

Closed

8 tasks

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 11, 2023

DiegoAndai added 4 commits July 11, 2023 18:34

Remove deprecated components and componentsProps

082c834

Drop ThemeProvider in favor of CssVarsProvider

edca8c8

Implement Material You specs & naming

48afd6b

Update types and proptypes

d06a348

DiegoAndai force-pushed the material-you-badge branch from 2afa675 to d06a348 Compare July 11, 2023 22:35

Merge branch 'master' into material-you-badge

3805980

Signed-off-by: Diego Andai <diego@mui.com>

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 11, 2023

DiegoAndai added 4 commits July 11, 2023 19:23

Add playground to docs

7b26eb1

Add Badge rtl support

ecf7bcf

Fix Badge types

d187f90

Add Badge breaking changes to migration

5074265

DiegoAndai force-pushed the material-you-badge branch from 0af7743 to 5074265 Compare July 13, 2023 15:24

Fix padding values

e39a10b

DiegoAndai marked this pull request as ready for review July 13, 2023 16:32

DiegoAndai marked this pull request as draft July 13, 2023 18:16

Add missing use client directives

edf1b7d

DiegoAndai marked this pull request as ready for review July 14, 2023 22:11

DiegoAndai requested a review from siriwatknp July 14, 2023 22:29

mnajdova reviewed Jul 20, 2023

View reviewed changes

Rename variant to size

26db4d8

DiegoAndai added 2 commits July 24, 2023 15:38

Bring back variant prop for backward compatibility

154a38a

Bring back info, warning, success & default colors

8da4d2e

DiegoAndai force-pushed the material-you-badge branch from 9d321f3 to 8da4d2e Compare July 24, 2023 19:54

Remove incorrect ts test

b2b0aa6

mnajdova reviewed Jul 25, 2023

View reviewed changes

DiegoAndai added 3 commits July 25, 2023 15:24

Update palette warning color

98fe0ba

Remove combined anchor-overlap classes

18fcaa1

Update classes tests

ac87aef

mnajdova approved these changes Jul 26, 2023

View reviewed changes

DiegoAndai and others added 6 commits July 26, 2023 10:58

Update packages/mui-material-next/migration.md

7c93e3b

Co-authored-by: Marija Najdova <mnajdova@gmail.com> Signed-off-by: Diego Andai <diego@mui.com>

Remove "default" color option

ffa1a36

Add missing MuiBadge styleOverrides migration step

9c76810

Add missing colors tests and classes

e7c575c

Rename badge one letter type parameters

77cd47c

Fix markdown lint

257dac5

DiegoAndai merged commit 579fe2d into mui:master Jul 26, 2023
21 checks passed

DiegoAndai deleted the material-you-badge branch July 26, 2023 17:02

DiegoAndai added v7.x and removed v6.x labels Dec 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Badge][material-next] Add Badge component #37850

[Badge][material-next] Add Badge component #37850

DiegoAndai commented Jul 6, 2023 •

edited

mui-bot commented Jul 6, 2023 •

edited

mnajdova left a comment

mnajdova Jul 20, 2023

DiegoAndai Jul 20, 2023

mnajdova Jul 21, 2023

DiegoAndai Jul 21, 2023

mnajdova Jul 25, 2023

mnajdova Jul 20, 2023

DiegoAndai Jul 20, 2023

mnajdova Jul 21, 2023

DiegoAndai Jul 21, 2023

DiegoAndai commented Jul 24, 2023 •

edited

zanivan commented Jul 24, 2023

DiegoAndai commented Jul 24, 2023

mnajdova Jul 25, 2023

zanivan commented Jul 25, 2023

DiegoAndai commented Jul 25, 2023

mnajdova left a comment


		Color options were changed to match Material You:

		- `"default"`, `"info"`, `"success"`, and `"warning"` were removed and are no longer supported out-of-the-box

		- `standard` renamed to `large`, which is still the default
		- `dot` renamed to `small`

[Badge][material-next] Add Badge component #37850

[Badge][material-next] Add Badge component #37850

Conversation

DiegoAndai commented Jul 6, 2023 • edited

Changes

Breaking changes

CSS Variables

Playground

mui-bot commented Jul 6, 2023 • edited

Netlify deploy preview

Bundle size report

mnajdova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiegoAndai commented Jul 24, 2023 • edited

zanivan commented Jul 24, 2023

DiegoAndai commented Jul 24, 2023

Choose a reason for hiding this comment

zanivan commented Jul 25, 2023

DiegoAndai commented Jul 25, 2023

mnajdova left a comment

Choose a reason for hiding this comment

DiegoAndai commented Jul 6, 2023 •

edited

mui-bot commented Jul 6, 2023 •

edited

DiegoAndai commented Jul 24, 2023 •

edited