mui / mui-design-kits Goto Github PK

Context

We cover MUI in Figma with a design component kit. However, there is recurring feedback from people who are asking for design templates too. I think that having the MUI components in Figma is a great step but this is most beneficial to experience designers who need flexibility. The teams without a designer could still struggle to create pages that feel & look great. Designers that are whiling to rely on pre-designed standard screens could still benefit from templates to take shortcuts.

Custom requests

• What is really helpful for me are ready to use/show templates for entire "pages", parts of the application/webpage. I have purchased https://gumroad.com/l/materialsystem instead author
• I was hoping for some finished screens and templates already to deviate form as I am not an experienced Figma user [email protected]
• I just expected more designs and templates to be a part of the pack. [email protected]
• Hi I thought it would be pre-made templates to quickly edit rather than just the individual elements. It's too complicated as I just need to just create quick mockups [email protected]
• I mean it’s a great library with lots of atoms and molecules. But I am a developer and was looking for something to quickly sketch some layout. It takes me too long to get used to all the components that the library offers. [email protected]
• There are too few examples of real use in design, for example, even an unprepared person can assemble an intelligible interface from a tailwind Figma file, but with this file, it will not work
  in general, there is not much more useful information here than in the free material file in the Figma community [email protected]
• I was expecting more detailed examples like those there: https://mui.com/getting-started/templates/. https://mui.zendesk.com/agent/tickets/1556
• "I thought it would have layouts for pages already set for me" https://mui.zendesk.com/agent/tickets/1584
• "it only includes some basic pages" https://mui.zendesk.com/agent/tickets/6198

Benchmarks

• https://setproduct.com/material

• https://materialdesignkit.com/templates/

• https://www.antforfigma.com/pricing

• https://www.untitledui.com/

The feedback was left by a customer without more details. To investigate (thalesdigital.io)

Your Environment 🌎

v4.13.0

https://mui.zendesk.com/agent/tickets/1289

The material 2014 color palette, which I found helpful were only listed on a frame, rather than being actual color styles.

Your Environment 🌎

v5.0.0

https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6706%3A38914

It makes me wonder if we should display the line-height too.

Your Environment 🌎

v5.0.0

Compare the source of truth, https://mui.com/customization/palette/, with the values used in Figma:

The Figma file "MUI for Figma v5.0.0" doesn't contain the AvatarGroup layout of the Avatar component.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The Figma file has lots of variants, but if I want to represent an Avatar Group layout, I'll have to build it myself.

Expected Behavior 🤔

The Figma file would contain the Avatar Group layout so I wouldn't have to make it myself.

Steps to Reproduce 🕹

Steps:

1. Visit the MUI for Figma 5.0.0 file and note the absence of the Avatar Group component

Context 🔦

I want to deliver specs to my engineers that are 100% correct. If I have to make the component on my own, I may get it wrong. I also want to save time.

Your Environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

I tried to use GH discussions, but the required category dropdown was broken.... so here I am :)

Hi - I wanted to ask the community, what is the best way you have found to deliver mockups for interfaces built using material-ui to your development team? We recently had a retrospective and this was a topic that came up. We need more clear communication of the user interfaces, but w/o crazy overhead or bringing in a designer every time.

What have you found that works? What have you found that doesn't work?

Curious to learn how others are addressing this.

Thanks!

One of our designers has experienced a high memory usage alert in Figma.

The entire library does feel a bit laggy on an 8GB machine like an MBP 13 2018. Seems like it takes 2.8GB of RAM when having just the MUI for Figma opened. If users have multiple tabs opened it might cause problems.

Solution

Close other Figma files when working inside the library.

Your Environment 🌎

v5.2.0

The production Menu component offers several features which are absent in the Figma design file.

• I have searched the issues of this repository and believe that this is not a duplicate.
• The issue is present in the latest release.

Current Behavior 😯

The Figma Menu component only supports the default size, it also only has an option to display an icon on the left.

Expected Behavior 🤔

The Figma menu component should support the dense prop in addition to the default size. It should also include an option to display items on the right, as shown in the documentation. Wouldn't hurt to also include a selected state in addition to the resting and default states.

Also, nitpick: the size and padding of the icon included in the Figma file appears to be different than production. Could be wrong here. Prod seems to show a 20x20 icon with 0 padding. Figma displays a 24x24 icon.

Steps to Reproduce 🕹

Open the latest Figma file.

Context 🔦

I want to provide perfect specs to my engineers. I also want to modify components, which requires a perfect understanding of how the component is set up.

Your Environment 🌎

5.0.0

This is similar to https://material.io/design/interaction/states.html#focus.

The Figma assets account for all aspects of Accessibility, including keyboard focus states. The Material UI Library I purchased from you does not have these.

https://mui.zendesk.com/agent/tickets/1146

Your Environment 🌎

v5.0.0

While the MUI Studio team was conducting interviews, a user mentioned that having one Figma file for light mode and another for dark is cumbersome as it demands a duplicated effort to update the other once one has been changed. I'm sure there are benefits to having them separated, especially related to performance given that the file could get considerably larger, but have we considered the option of merging it? I suppose it would be way easier to design with both modes at the same place.

Introduction

We could create a Figma plugin to sync the configuration with a theme.js file.

A first prototype was done at https://github.com/mui/hackathon-figma-plugin.

Motivation

This could allow us to make the current Figma file free for the community while selling a subscription (to keep sustaining the effort). The subscription would be for using this plugin and growing into a more advanced suite of plugins to reduce the gaps between code and design.

Benchmarks

• https://www.telerik.com/themebuilder & https://www.figma.com/community/plugin/1243108105563929541/Progress-ThemeBuilder
• https://figma.chakra-ui.com/
• https://www.antforfigma.com/figma-tokens-sync
• https://www.lekoarts.de/en/blog/using-theme-ui-as-the-starting-point-for-your-figma-design-and-gatsby-development#in-the-beginning-there-is-only-a-theme-ui-config
• https://twitter.com/lekoarts_de/status/1227181813157834753
• https://github.com/jan-dh/sketch-tailwind
• https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens Figma Tokens
• https://semi.design/dsm/landing
• https://twitter.com/matsugfx/status/1575105271055060993
• https://www.figma.com/community/plugin/1192256903171420509/TSL---MUI-Theme-Exporter

Requests

• https://mui.zendesk.com/agent/tickets/2651
• https://mui.zendesk.com/agent/tickets/2949
• https://mui.zendesk.com/agent/tickets/2737
• https://mui.zendesk.com/agent/tickets/6972
• https://mui.zendesk.com/agent/tickets/7657
• #174
• https://mui.zendesk.com/agent/tickets/9294
• #198 (comment)
• https://mui.zendesk.com/agent/tickets/9715
• https://mui.zendesk.com/agent/tickets/9804
• https://mui.zendesk.com/agent/tickets/9999
• https://mui.zendesk.com/agent/tickets/10207
• https://mui.zendesk.com/agent/tickets/11057
• https://mui.zendesk.com/agent/tickets/17465

We could do the same that we did with Figma in https://www.figma.com/community/file/912837788133317724.

sometimes there are too many layers which makes adobe XD hang.

[email protected]

I'm using it on the latest macOS powerful desktop, the file keeps loading and freezing all the time, especially when copying and pasting between different projects (files), maybe it's XD itself

[email protected]

The kit can still be slow to respond in Adobe XD on a new Macbook Pro.

James - https://store-wp.mui.com/wp-admin/comment.php?action=editcomment&c=164102

Every time I make a change, XD will hang for several minutes, and sometimes doesn't come back.

#163

@adrianmanea thoughts on the issue:

Regarding this issue, I'm thinking to "fork" the main document and remove most states, strip out the not-so-necessary components, and basically have a light version alternative. The maintenance will be a bit tricky but we plan to hire another designer to take more responsibilities.

Your Environment 🌎

v4.13.0

We've been playing around with the figma file and our own solutions to try and implement the ideas from components such as https://mui.com/components/stack/ and the system in general.

We haven't quite nailed it yet, and would love to see an example or two of a complete layout using the figma components that somehow adheres to the system so that designers and developers can align on the design tokens and their settings, especially when it comes to spacing.

The issue

List Item, Text Only variant not adjusting its padding if nesting level is changed

Solution until next update

The weird thing is that the rest of the components work fine with the same text properties so this must be a Sketch bug. The simple solution is to just copy and paste a text style from other components.

📹 Video

Context

https://mui.zendesk.com/agent/tickets/2012

Hey there 👋 , I love the foundations you have set with version 5 of MUI and the figma file!

For the Paper component in figma, we had to add some more variants to match the settings for the component (https://mui.com/components/paper/). I understand adding all the variations might be tedious, but one that was missing that I think would be useful to add to the file itself is the state where paper can have an elevation of 0 and no outline.

Expections

https://mui.com/components/date-picker/
https://material.io/components/date-pickers#mobile-pickers

Reality

Your Environment 🌎

v5.0.0

The app bar has multiple variants, based on the screen width, however, we call them Size: Mobile | Web. For instance:

https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6583%3A46318

IMHO, this doesn't make sense. "Web" is too broad, it could be a mobile web version.
Also, "Size" could be confused with a prop of the React component, it's not.

Maybe this would be clearer? breakpoint: xs (phone) | sm (tablet)

Related to #5.

Introduction

We could create dedicated documentation under https://mui.com/design-kits/sketch/.

Questions

A list of frequently asked questions that we could probably cover:

How to handle updates?

Sketch doesn't provide great mechanisms to handle updates. Ironically, some of the future work we plan for the Sketch library is around this specific pain: make updates easier.

Up until now, it works as follows. We avoid changing the existing symbols. The previous updates of the Sketch kit were mainly about adding new symbols. This has limited the pain around processing updates. When a new update is available, we send an email to notify you. You login into the store and download the new Sketch version. Then, you can link the new Sketch version of the kit as a library. When the symbols are used, you should get a "Library updates available" message button in Sketch and an "Update Components", for each symbol update.

https://www.abstract.com/ could help with this problem.

In https://mui.com/api/slider/, the size is small or medium (default), but in Adobe XD, we say "large".

version: v5.0.0

The basic demo mixes the filled and outlined empty stars, this is wrong, outlined should be use everywhere.

Your Environment 🌎

v5.0.0-alpha

I guess that interactive components can be particularly interesting for checkboxes/switches.

Requests

sometime soon?

https://mui.zendesk.com/agent/tickets/1460

Is this something that your team plans to include?

https://mui.zendesk.com/agent/tickets/1528

a prototype of Material UI components (the difference in state on hover, click) instead of static designs.

https://mui.zendesk.com/agent/tickets/1905

Buttons use the wrong theme tokens

Solution

Select the errored buttons and replace with its opposing light token. E.g "Light/Error/Shades/4p" -> "Dark/Error/Shades/8p"

Your Environment 🌎

v5.4.0

The user feedback, from an exigent user (Senior Designer at Coursera) https://mui.zendesk.com/agent/tickets/1146

We expect our Figma components to be created in such a way so that the nesting of objects in the hierarchical tree on the left (see image) matches the code and our API's.
I know that it's highly unlikely that your components will match what we do 100%, but I wondered if they might be a good start or a close-ish match. They weren't really, so they aren't really a good starting point for us.

Your Environment 🌎

v5.0.0

I can count:

• 1933 Google Icons: https://fonts.google.com/icons document.querySelectorAll('.material-icons-outlined').length
• 1780 Material Design icons in React: https://mui.com/components/material-icons/
• 1756 icons in Figma: https://www.figma.com/community/plugin/934505788375924322/Count-Things

on October 16th, 2021

cc @hbjORbj for context that recently worked on this.

Your Environment 🌎

v5.0.0

While we don't have any React charts components in MUI X yet, there is a nonnegligible chance that we will get to it.

Related to mui/mui-x#1408 and https://www.notion.so/mui-org/Charts-component-3e93ffb9a40349e6a1b39ec34fce0775

Feedback from users

• "But I am interested and will need the complex use cases, tables, sparklines and charts, other data viz, etc." ⎯ https://mui.zendesk.com/agent/tickets/2028
• "I did not find any charts in my pack" ⎯ https://mui.zendesk.com/agent/tickets/2817
• "Where is it possible to get components for Figma to use charts from MUI v6?" ⎯ https://mui.zendesk.com/agent/tickets/9801
• https://mui.zendesk.com/agent/tickets/17154

Benchmarks

• https://antforfigma.com/ant-design-charts-for-figma
• Vaadin DS: Vaadin Charts https://www.figma.com/community/file/1030435514000803214
• Charts https://www.figma.com/community/plugin/734590934750866002/Chart
• Figma Charts & Infographics UI kit https://www.figma.com/community/file/855517047816771255
• Figma plug-in for manipulating Charts: https://twitter.com/jgspace_design/status/1700096614772400442
• Lightweight chart tradingview/lightweight-charts#1157

The question from Yaron

Is there an option to create a multiline component didn't figure out how? Those are the props in the Figma file:

Problem

I'm creating this issue as it seems to be growing in terms of demand from our Figma kit users. It's about step 2 of #10 (comment).

• #10 focuses on step 1: syncing the main design tokens
• In this issue, we would focus on a sync of the theme.components structure between Figma and React.

We might need to split this GitHub issue in two. The React -> Figma and Figma -> React workflows might be very different.

User requests

• Gerda in our team looking for using the design system that the engineering are using inside Figma.

• Is there an easy way to copy the styles from an older version of this template to the newer version? I took quite a bit of time to get all our styles in v5.4.

  https://www.figma.com/community/file/912837788133317724?comment=1139582455253158228

• https://mui.zendesk.com/agent/tickets/6972

Hi! I am looking for a product that would allow the following workflow:

1. Designers customize the components as they please in Adobe
2. They export the results of their work to some repository
3. We (developers) import this repository in our React app and just use it without getting into the component styles
4. We build an application and it runs in production
   Does your MUI + Adobe XD comply with this flow?

Benchmarks

• https://www.producthunt.com/posts/design-system-automation-by-anima-2, see the introduction video on how it can look from on from React to Figma.
• https://www.telerik.com/unite-ux (abandoned, converted https://www.telerik.com/themebuilder instead)
• https://www.modulz.app/ (abandoned)

We got this review:

The quality of the library is good but i must admit it was more easy to work with version 4. Within version 5 you are missing the cards. Are they comming back?

@software-vision.com

Should we do something about it?

Idea

Add a spacer component with pre-defined widths and heights.

Should we replace the paddings with spacers? Or just use them in layouts.

Benchmark

IBM Carbon Design System (https://www.figma.com/file/kbaAuFUvEWhoPLWIersWf9/IBM-Carbon-Design-System-(Community)?node-id=0%3A4149)

The selected state doesn't exist: https://mui.com/components/button-group/

Your Environment 🌎

v4.13.0

When I export tokens (in JSON format) from official Figma File and create theme file based on those tokens using TypeScript, TS is warning me about not supported colors.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The JSON file is not prepared to be used directly, so I built a tool to generate the theme file to match the default theme structure but I see that there are colors that are not present both in that structure nor on the Palette interface.

The colors in tokens I am talking about are:

{
  "color": {
    "other": {
      "divider": {
        "description": "Divider fill color",
        "type": "color",
        "value": "#0000001f"
      },
      "outlined border": {
        "description": "Border style for outlined variant components in resting state (Text Field, Select, Chips, etc)",
        "type": "color",
        "value": "#0000003b"
      },
      "backdrop overlay": {
        "description": "Backdrop overlay style",
        "type": "color",
        "value": "#00000080"
      },
      "filled input background": {
        "description": null,
        "type": "color",
        "value": "#00000017"
      },
      "standard input line": {
        "description": "Border style for standard variant Text Field & Select",
        "type": "color",
        "value": "#0000006b"
      },
      "snackbar": {
        "description": "Snackbar background color",
        "type": "color",
        "value": "#323232ff"
      },
      "rating active": {
        "description": "Active state color for Rating component",
        "type": "color",
        "value": "#ffb400ff"
      }
    }
  }
}

[this is just a part of the whole JSON file]

They are nothing like any other colors, such as Primary with its properties (that I can use to create theme color that matches the interface):

"primary": {
  "main": {
    "description": "Main color used by most components",
    "type": "color",
    "value": "#3f51b5ff"
  },
  "dark": {
    "description": "Alternative dark shade",
    "type": "color",
    "value": "#303f9fff"
  },
  "light": {
    "description": "Alternative light shade",
    "type": "color",
    "value": "#7986cbff"
  },
  "contrast": {
    "description": "Color that keeps a contrast ratio above AA when XX.main is used as a bg. color",
    "type": "color",
    "value": "#ffffffff"
  },
  "states": {
    "outlined resting border": {
      "description": "Used for outlined variant components in resting state. E.g Buttons, Chips, etc",
      "type": "color",
      "value": "#3f51b580"
    },
    "outlined hover background": {
      "description": "Fill background color for outlined & text variant components in hover state (Button, etc)",
      "type": "color",
      "value": "#3f51b514"
    },
    "contained hover background": {
      "0": {
        "type": "color",
        "value": "#3f51b5ff"
      },
      "1": {
        "type": "color",
        "value": "#0000004d"
      },
      "description": "Fill background for contained variant components in hover state."
    }
  }
}

so I can't simply extend the palette and add them as new colors.

The only color from the other which exists on the Palette interface is divider and that color can be easily used. I have no idea what to do about the rest.

Point worth mentioning is that they (other colors) come from the official Figma file, and are not custom made.

Expected Behavior 🤔

I would expect a clear resemblance of the Theme type in Figma file (and/or vice versa). For example:

• the other property in JSON tokens should not be present but should be reflecting Theme interface;
• OR Theme interface should reflect the structure of exported JSON tokens;
• OR a mixture of both.

Steps to Reproduce 🕹

1. Export tokens from Figma file:
   

2. Compare color.other with Palette interface.

Context 🔦

What I try to do is to have an automated way of creating theme files based on tokens exported from Figma file.

Your Environment 🌎

  System:
    OS: macOS 11.6
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: Not Found
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Edge: Not Found
    Firefox: 93.0
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.5.0 => 11.5.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.51 
    @mui/material: ^5.0.4 => 5.0.4 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/system:  5.0.4 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react: 17.0.3 => 17.0.3 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: 5.2.1 => 5.2.1 
    typescript: ~4.2.4 => 4.2.4 

https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6736%3A47533

Your Environment 🌎

v5.0.0

Just purchased the fig design components. I added a dialog component to layout a new dialog. When i resize the height of the dialog the actions don't move to the bottom. What am i missing?

Discussed in https://github.com/mui-org/mui-design-kits/discussions/35

I'm creating this issue as it seems to be growing in terms of demand from our Figma kit users. It's about step 3 of #10 (comment), where #10 focuses on step 1.

User requests

I have started keeping track of this early 2022:

• Its good, but im also interested how you to export it to react? That is very important for beginner's as well. Simple do some page and show us conversion pls..

  https://www.youtube.com/attribution_link?a=dkzVlr8oOCkJxesn&u=/watch%3Fv%3DhCGiyI_NmRY%26lc%3DUgz1vAyDlJ7L8pEJlgR4AaABAg%26feature%3Dem-comments

• It's possible to export the design generated with the Figma tool as React code?

  https://mui.zendesk.com/agent/tickets/1844

• Can we designer give developers a Figma prototype with MUI components and they can download the code of each component? How does this work? Can we see a demo for this?

  https://mui.zendesk.com/agent/tickets/1867

• Is there any way to export from Figma and get the output to be React Web code that imports and utilizes the actual MUI components instead of creating react components?

  https://mui.zendesk.com/agent/tickets/1913

• "How easy would this be to export to React with something like Anima?"

  https://www.youtube.com/watch?v=hCGiyI_NmRY question by Sebastian

• "We subscribed for the purpose of converting MUI Figma Design to React Code"

  https://mui.zendesk.com/agent/tickets/6969

Benchmarks

• https://platform.uno/unofigma/
• https://www.notion.so/mui-org/Low-code-directions-available-10aeeb10596d41ac97593c6928c361aa#6493eca06cd14ba1bec7ca39e7303271
• https://quest.ai/
• https://www.animaapp.com/. A video demo https://www.youtube.com/watch?v=0jOoOmbcW04
• https://www.figmachine.com/
• https://www.overlay-tech.com/
• https://docs.amplify.aws/console/uibuilder/figmatocode/
• https://clapy.co/
• https://www.fae.dev/
• https://twitter.com/chakra_ui/status/1613267652717191191 & https://figma.chakra-ui.com/

Ideas

It would be great to add coverage for:

• A clear separation of the data grid community and pro and premium
• Column panels
• Column menu
• Toolbar
• Filter panel: While the filter feature is still a WIP, we are currently far from happy with the UX: mui/mui-x#3140, once fixed.

Requests

A list of user feedback:

• Review from @thunderpigeon

  I bought it large because, I needed the datatables & tables. So, I was a bit dissapoinet that it was not so ellaborate in terms of features and reponsive. Like the prints, filter features are all missing.
  Otherwise, seems like a good purchase.

• Comments in https://www.figma.com/community/file/912837788133317724?comment=1138868874312027233

  however, there is no data grid pro page - only data grid. can you please add this?

• Comments in #107

  why is the data grid pro not available?

See how the link uses the old domain (x all the other pages) and how this links the page of the table component, not the data grid.

the correct link would be:

Your Environment 🌎

v5.0.0-alpha

The right to left alignment is not handled correctly. See on it stilled aligned on the left, instead of the right:

The spacing might also be wrong, to double-check:

Your Environment 🌎

v5.0.0-alpha

https://mui.zendesk.com/agent/tickets/1247

It would be wonderful for you to add separate type scales and components for different breakpoints/screen sizes eg. Mobile, Tablet, and not just desktop.

The breakpoints you use in your design system are good to see, however, I was referring to having a dedicated mobile, tablet, and desktop type scale and components/assets designed to be used at these breakpoints/screen sizes. In your Figma file, the type scale is just for desktop and most of the components are designed at a single size, not at multiple breakpoint sizes.

https://mui.zendesk.com/agent/tickets/1408

I am working on a mobile-first project and not on an app project. I was wondering if the components are only designed for app purposes or are they responsive to create desktop versions of my screen?

Your Environment 🌎

v5.0.0

We got the feedback multiple times, no it's not a preview file.

• https://material-ui.zendesk.com/agent/tickets/1365
• https://material-ui.zendesk.com/agent/tickets/1382
• https://material-ui.zendesk.com/agent/tickets/1490

Your Environment 🌎

v5.0.0

Introduction

We could create dedicated documentation under https://mui.com/figma/getting-started/. For now, it's a redirection to https://mui-org.notion.site/MUI-for-Figma-docs-4eb22360388047a9a31fc19d300a285e but it's not really great.

Benchmark

• https://www.antforfigma.com/docs/introduction

Problems it would solve

• Showcasing all the features of the kit, e.g. https://mui.zendesk.com/agent/tickets/11801.
• Tons of Zendesk tickets: https://www.notion.so/mui-org/MUI-Design-Kits-FAQ-b729d8b48f5a45529319a92656cad41f

I didn't see anyone ask for it yet, so it's likely not a high priority.

Your Environment 🌎

v4.13.0

For example, https://mui.com/components/material-icons/?query=rocket&selected=Rocket is not available in the Figma icons set.

Version

v5.0.1

Context

https://mui.zendesk.com/agent/tickets/1964

The "enabled" state has a couple of issues:

1. The menu opens below the helper text it's wrong, it should be below the textbox
2. The name of the state is weird: "enabled". What is enabled? I think that we could use "open" to match the name of the React prop instead
3. The element is moving by 2 px up when the open state is shown, it's worth on the dark mode, it's like 10 px.

This was first reported in https://mui.zendesk.com/agent/tickets/1882 by Joshaven.

I recorded a screencast of a bug related to the positioning of the component states with MUI 5.0.0 for XD. Please have the developer preview. As far as I can tell, All select elements are affected in light and dark themes.

Version: v5.0.0

While the second row of the example looks great, the first one looks weird. I would have expected the usage of the dotted variant https://mui.com/components/badges/#dot-badge

version: v5.0.0

https://www.figma.com/file/cfH79wJ7c6WSioSmuweHzF/MUI-for-Figma-v5.0.0-(Light)?node-id=6706%3A38914

Your Environment 🌎

v5.0.0

It's scheduled for the end of the month. People to notify https://material-ui.zendesk.com/agent/tickets/1503.