mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.14k stars 32.35k forks source link

[joy-ui][Theme] Components use radius 'sm' irrespective of their own size. #41764

Open cjmconie opened 8 months ago

cjmconie commented 8 months ago

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-9jgg4d?file=src%2Findex.tsx

Steps:

  1. Inspect each of the size variants of the components button and input.
  2. Notice all components have a radius of 0px irrespective of their own size. This is the value of the 'sm' prop in the theme's radius object. var(--joy-radius-sm)

Current behavior

Components like button, input, etc. all use theme radius 'sm' irrespective of their own size ('sm', 'md', 'lg').

Expected behavior

Components like button, input, etc. should (I think) use the theme's size radius appropriate for their own size. E.g <Button size='lg'> would use theme radius 'lg' as its radius.

At least, that's my assumption of how theme radius works 🙈

Context

Use the JoyUI theme object to theme my app. Specifically here, to set the radius property for each size variant once (in the theme radius object) and have it apply to all components without the need to provide radius style override for components individually.

Theme Radius

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.3 Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm pnpm: Not Found Browsers: Chrome: 123.0.6312.106 Edge: Not Found Safari: 17.3 npmPackages: @emotion/react: ^11.11.3 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.14 @mui/icons-material: ^5.15.14 => 5.15.14 @mui/joy: ^5.0.0-beta.32 => 5.0.0-beta.32 @mui/material: ^5.15.14 => 5.15.14 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.14 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-date-pickers: ^6.19.0 => 6.19.8 @types/react: ^18.2.74 => 18.2.74 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: 5.4.3 ```

Search keywords: joy-ui radius theme

siriwatknp commented 3 months ago

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI