Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unstyled components progress #10

Open
21 of 35 tasks
michaldudak opened this issue Jul 7, 2021 · 47 comments
Open
21 of 35 tasks

Unstyled components progress #10

michaldudak opened this issue Jul 7, 2021 · 47 comments
Assignees
Labels
package: base-ui Specific to @mui/base

Comments

@michaldudak
Copy link
Member

michaldudak commented Jul 7, 2021

As discussed in mui/material-ui#6218, we are committed to providing unstyled versions of the components in @mui/base. This is an umbrella issue to have visibility on the progress.

We assume that most of the components will have both a headless (hook) and an unstyled component version. The component should utilize the hook.


We do not intend to convert the following components as they are pointless without styles:

  • Alert
  • AppBar
  • Avatar
  • AvatarGroup
  • Backdrop
  • Box
  • BottomNavigation
  • Breadcrumbs
  • CircularProgress
  • ButtonBase (replaced by Button)
  • Card
  • Chip
  • Collapse
  • Container
  • CssBaseline, ScopedCssBaseline
  • Dialog (covered by Modal)
  • Divider
  • Fab
  • Fade
  • FilledInput (covered by Input)
  • FormGroup
  • FormHelperText
  • GlobalStyles
  • Grid
  • Grow
  • Hidden
  • Icon
  • IconButton (covered by Button)
  • ImageList
  • InputAdornment
  • InputBase (replaced by Input)
  • InputLabel
  • LinearProgress
  • Link
  • List
  • OutlinedInput (covered by Input)
  • Paper
  • Skeleton
  • Slide
  • SpeedDial
  • Stepper, Step, MobileStepper
  • SvgIcon
  • Table
  • Toolbar
  • Typography
  • Zoom
@oliviertassinari
Copy link
Member

@michaldudak We heavily use the labels to function with our growing backlog of issues (13,000 at this point). I'm adding a new one.

@oliviertassinari oliviertassinari pinned this issue Aug 22, 2021
@siriwatknp
Copy link
Member

@michaldudak should the list split into something like this to make it transparent to the community?

WIP (prioritized)

These components are prioritized based on the page views from analytics.
...

Done

...

The rest
...

@michaldudak
Copy link
Member Author

michaldudak commented Aug 24, 2021

Yeah, I think it may be a good idea to highlight the ones we'd like to tackle first. I marked these high-priority components with ⭐. As for WIP and Done - this information is there already. The ones with a PR but not completed are in progress, and checked ones are done.

@imrishabh18
Copy link

@oliviertassinari I really want to contribute to this. Can you please assign me a component which is beginner friendly?

@michaldudak
Copy link
Member Author

@imrishabh18 There are few components in @mui/material that don't have any styles:

  • TextareaAutosize
  • ClickAwayListener
  • Portal

Moving them to @mui/core should be pretty simple. Take NoSSR as an example (#27356)

@akashshyamdev
Copy link

@michaldudak @oliviertassinari I'd like to contribute to this... could you assign a beginner friendly component?

@hbisadii
Copy link

So how can we bring the components that rely on styles(like drawer) to our project? because I chose mui/base for costumization and low bundle size and I don't want to install the whole material for it.

@michaldudak
Copy link
Member Author

michaldudak commented Feb 27, 2023

Is there any possibility to contribute

@Joklogh Our priority right now is making the existing components and their API stable. We sometimes change the API shape across the whole library, so creating a new component will be aiming for a moving target. We will resume the work on new components (and accept community contributions) once we reach the stable phase (likely Q2 this year).

So how can we bring the components that rely on styles(like drawer) to our project?

@hbisadii you have to import '@mui/material/Drawer' for this. Note that it won't impact the final bundle size significantly as unused Material UI components will be removed (see https://mui.com/material-ui/guides/minimizing-bundle-size/). In https://bundlephobia.com/package/@mui/material@5.11.11, the Drawer is at 20 kB, but this also includes MUI Base packages, and each new component shares modules with the previous ones imported.

@Joklogh
Copy link

Joklogh commented Feb 28, 2023

@michaldudak Thank you. I will be looking forward to it.

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 5, 2023

Is there any possibility to contribute

I assume that new components after the first stable MUI Base release will need to be added as Unstable_. I guess that the goal is to have about as many unstable as stable (assuming we did ~50% of the most common unstyled components).

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 26, 2023

Drawer, SwipeableDrawer

Shouldn't we have this one cover as well? 2k likes https://twitter.com/emilkowalski_/status/1683832539490942978, https://twitter.com/devongovett/status/1674470185783402496

@michaldudak
Copy link
Member Author

michaldudak commented Jul 27, 2023

Shouldn't we have this one cover as well?

Let's find out: #38

renovate bot referenced this issue in creatorsgarten/contentsgarten Aug 9, 2023
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [@mui/joy](https://mui.com/)
([source](https://togithub.com/mui/material-ui)) | [`5.0.0-beta.0` ->
`5.0.0-beta.1`](https://renovatebot.com/diffs/npm/@mui%2fjoy/5.0.0-beta.0/5.0.0-beta.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/@mui%2fjoy/5.0.0-beta.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@mui%2fjoy/5.0.0-beta.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@mui%2fjoy/5.0.0-beta.0/5.0.0-beta.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@mui%2fjoy/5.0.0-beta.0/5.0.0-beta.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mui/material-ui (@&#8203;mui/joy)</summary>

###
[`v5.0.0-beta.1`](https://togithub.com/mui/material-ui/blob/HEAD/CHANGELOG.md#500-beta1)

[Compare
Source](https://togithub.com/mui/material-ui/compare/v5.0.0-beta.0...v5.0.0-beta.1)

<!-- generated comparing v5.0.0-beta.0..next -->

*Jul 14, 2021*

A big thanks to the 17 contributors who made this release possible. Here
are some highlights ✨:

- ✨ We have introduced a new unstyled component: the Switch
([#&#8203;26688](https://togithub.com/mui/material-ui/issues/26688))
[@&#8203;michaldudak](https://togithub.com/michaldudak)
You can find two new versions of the Switch. A component without any
styles:
[`SwitchUnstyled`](https://mui.com/components/switches/#unstyled), and a
hook:
[`useSwitch`](https://mui.com/components/switches/#useswitch-hook).

<a href="https://mui.com/components/switches/#unstyled"><img width="832"
alt="switch"
src="https://user-images.githubusercontent.com/3165635/125192249-236f8a80-e247-11eb-9df9-17d476379a32.png"></a>

You can follow our progress at
[https://github.com/mui/material-ui/issues/27170](https://togithub.com/mui/material-ui/issues/27170).

- 💄 We have updated the default `info` `success` `warning` color to be
more accessible
([#&#8203;26817](https://togithub.com/mui/material-ui/issues/26817))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp).
You can find the new [default
values](https://mui.com/material-ui/customization/palette/#default-values)
in the documentation.

<a href="https://mui.com/customization/palette/#default-values"><img
width="780" alt="colors"
src="https://user-images.githubusercontent.com/3165635/125192657-4864fd00-e249-11eb-9dc1-44857b25b3b8.png"></a>

##### `@material-ui/core@5.0.0-beta.1`

##### Breaking changes

- \[Fab] Remove no longer necessary span wrapper
([#&#8203;27112](https://togithub.com/mui/material-ui/issues/27112))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp)
- \[ToggleButton] Remove no longer necessary span wrapper
([#&#8203;27111](https://togithub.com/mui/material-ui/issues/27111))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp)

##### Changes

- \[Autocomplete] Add componentsProps
([#&#8203;27183](https://togithub.com/mui/material-ui/issues/27183))
[@&#8203;michal-perlakowski](https://togithub.com/michal-perlakowski)
- \[Avatar] Fix support for crossOrigin
([#&#8203;27013](https://togithub.com/mui/material-ui/issues/27013))
[@&#8203;ShirasawaSama](https://togithub.com/ShirasawaSama)
- \[ButtonBase] Correct `disableRipple` API description
([#&#8203;27187](https://togithub.com/mui/material-ui/issues/27187))
[@&#8203;michaldudak](https://togithub.com/michaldudak)
- \[ButtonGroup] Add color palette types
([#&#8203;27215](https://togithub.com/mui/material-ui/issues/27215))
[@&#8203;ShirasawaSama](https://togithub.com/ShirasawaSama)
- \[SwitchBase] Bring back `checked` and mark as deprecated
([#&#8203;27047](https://togithub.com/mui/material-ui/issues/27047))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp)
- \[TextField] Remove redundant useFormControl implementation
([#&#8203;27197](https://togithub.com/mui/material-ui/issues/27197))
[@&#8203;michaldudak](https://togithub.com/michaldudak)
- \[theme] Add missing MuiRating types to components.d.ts
([#&#8203;27086](https://togithub.com/mui/material-ui/issues/27086))
[@&#8203;rajzik](https://togithub.com/rajzik)
- \[theme] Remove `createV4Spacing` from `adaptV4Theme`
([#&#8203;27072](https://togithub.com/mui/material-ui/issues/27072))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp)
- \[theme] Update default `info` `success` `warning` color
([#&#8203;26817](https://togithub.com/mui/material-ui/issues/26817))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp)
- \[ToggleButton] Add color palette types
([#&#8203;27046](https://togithub.com/mui/material-ui/issues/27046))
[@&#8203;ShirasawaSama](https://togithub.com/ShirasawaSama)
- \[ToggleButton] Fix the api page
([#&#8203;27164](https://togithub.com/mui/material-ui/issues/27164))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)

##### `@material-ui/unstyled@5.0.0-alpha.40`

- \[Switch] Create SwitchUnstyled and useSwitch
([#&#8203;26688](https://togithub.com/mui/material-ui/issues/26688))
[@&#8203;michaldudak](https://togithub.com/michaldudak)

##### `@material-ui/codemod@5.0.0-beta.1`

- \[codemod] Add v5 important migration
([#&#8203;27032](https://togithub.com/mui/material-ui/issues/27032))
[@&#8203;siriwatknp](https://togithub.com/siriwatknp)
- \[codemod] Fix v5 codemods on Windows
([#&#8203;27254](https://togithub.com/mui/material-ui/issues/27254))
[@&#8203;michaldudak](https://togithub.com/michaldudak)

##### `@material-ui/system@5.0.0-beta.1`

- \[Box] Add breakpoint value support to maxWidth prop
([#&#8203;26984](https://togithub.com/mui/material-ui/issues/26984))
[@&#8203;ansh-saini](https://togithub.com/ansh-saini)

##### `@material-ui/lab@5.0.0-alpha.40`

- \[CalendarPicker] Fix slide transition regression
([#&#8203;27273](https://togithub.com/mui/material-ui/issues/27273))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[CalendarPicker] Use transition components from core instead of a
custom implementation
([#&#8203;27043](https://togithub.com/mui/material-ui/issues/27043))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[pickers] Fix default value of text keys
([#&#8203;26990](https://togithub.com/mui/material-ui/issues/26990))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[TimePicker] Change default minutes and seconds to zero
([#&#8203;27037](https://togithub.com/mui/material-ui/issues/27037))
[@&#8203;michal-perlakowski](https://togithub.com/michal-perlakowski)

##### Docs

- \[blog] Q2 2021 Update
([#&#8203;27089](https://togithub.com/mui/material-ui/issues/27089))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[docs] Add information that the label prop in FormControlLabel is now
[@&#8203;michal-perlakowski](https://togithub.com/michal-perlakowski)
- \[docs] Don't crash page if an Ad crashes
([#&#8203;27178](https://togithub.com/mui/material-ui/issues/27178))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Fix alt description of movavi backer
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[docs] Fix import source of hidden component
([#&#8203;27116](https://togithub.com/mui/material-ui/issues/27116))
[@&#8203;vimutti77](https://togithub.com/vimutti77)
- \[docs] Fix layout regression
([#&#8203;27272](https://togithub.com/mui/material-ui/issues/27272))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[docs] Fix syntax error in /styles/api markdown
([#&#8203;27176](https://togithub.com/mui/material-ui/issues/27176))
[@&#8203;sahil-blulabs](https://togithub.com/sahil-blulabs)
- \[docs] Fix the link for the sx props page
([#&#8203;27202](https://togithub.com/mui/material-ui/issues/27202))
[@&#8203;mnajdova](https://togithub.com/mnajdova)
- \[docs] Fix theme context example code
([#&#8203;27053](https://togithub.com/mui/material-ui/issues/27053))
[@&#8203;moshfeu](https://togithub.com/moshfeu)
- \[docs] Fix typo in CONTRIBUTING.md
([#&#8203;27218](https://togithub.com/mui/material-ui/issues/27218))
Ayush Dubey
- \[docs] Fix typos
([#&#8203;27074](https://togithub.com/mui/material-ui/issues/27074))
[@&#8203;michaldudak](https://togithub.com/michaldudak)
- \[docs] Improve nav semantics
([#&#8203;27138](https://togithub.com/mui/material-ui/issues/27138))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Migrate Ad\* components to emotion
([#&#8203;27159](https://togithub.com/mui/material-ui/issues/27159))
[@&#8203;mnajdova](https://togithub.com/mnajdova)
- \[docs] Migrate rest of the docs to emotion
([#&#8203;27184](https://togithub.com/mui/material-ui/issues/27184))
[@&#8203;mnajdova](https://togithub.com/mnajdova)
- \[docs] Move versions from \_app PageContext to page-specific context
([#&#8203;27078](https://togithub.com/mui/material-ui/issues/27078))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Only bundle one version of the demos in production
([#&#8203;27020](https://togithub.com/mui/material-ui/issues/27020))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Reduce layout shift on landing page
([#&#8203;27251](https://togithub.com/mui/material-ui/issues/27251))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Remove Ethical Ads
([#&#8203;27173](https://togithub.com/mui/material-ui/issues/27173))
[@&#8203;mbrookes](https://togithub.com/mbrookes)
- \[docs] Remove unused fs polyfill
([#&#8203;27069](https://togithub.com/mui/material-ui/issues/27069))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Remove usage of `url` package
([#&#8203;27151](https://togithub.com/mui/material-ui/issues/27151))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Replace react-text-mask with react-imask in integration
example
([#&#8203;27071](https://togithub.com/mui/material-ui/issues/27071))
[@&#8203;michal-perlakowski](https://togithub.com/michal-perlakowski)
- \[docs] Sort the size in a more logical order
([#&#8203;27186](https://togithub.com/mui/material-ui/issues/27186))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[docs] Use actual link to paperbase
([#&#8203;27063](https://togithub.com/mui/material-ui/issues/27063))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Use custom markdown loader for landing page
([#&#8203;27065](https://togithub.com/mui/material-ui/issues/27065))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[docs] Use webpack 5
([#&#8203;27077](https://togithub.com/mui/material-ui/issues/27077))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[examples] Fix CDN warning
([#&#8203;27229](https://togithub.com/mui/material-ui/issues/27229))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[examples] Remove `StyledEngineProvider` as JSS is not used
([#&#8203;27133](https://togithub.com/mui/material-ui/issues/27133))
[@&#8203;mnajdova](https://togithub.com/mnajdova)
- \[examples] Remove forgotten StyledEngineProvider
([#&#8203;27163](https://togithub.com/mui/material-ui/issues/27163))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)

##### Core

- \[core] Batch small changes
([#&#8203;26970](https://togithub.com/mui/material-ui/issues/26970))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[core] Configure Renovate
([#&#8203;27003](https://togithub.com/mui/material-ui/issues/27003))
[@&#8203;renovate](https://togithub.com/renovate)\[bot]
- \[core] Migrate remaining mentions of Dependabot to Renovate
([#&#8203;27118](https://togithub.com/mui/material-ui/issues/27118))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[core] Run yarn deduplicate on Renovate updates
([#&#8203;27115](https://togithub.com/mui/material-ui/issues/27115))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[test] Document broken React 18 behavior of Autocomplete
([#&#8203;27242](https://togithub.com/mui/material-ui/issues/27242))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[test] Increase BS timeout to 6min
([#&#8203;27179](https://togithub.com/mui/material-ui/issues/27179))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[test] Migrate regressions to emotion
([#&#8203;27010](https://togithub.com/mui/material-ui/issues/27010))
[@&#8203;vicasas](https://togithub.com/vicasas)
- \[test] Narrow down React 18 compat issues
([#&#8203;27134](https://togithub.com/mui/material-ui/issues/27134))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[test] Remove StyledEngineProvider usage from regressions and e2e
test [@&#8203;mnajdova](https://togithub.com/mnajdova)
- \[test] Run React 18 integration tests with new createRoot API
([#&#8203;26672](https://togithub.com/mui/material-ui/issues/26672))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[test] Update tests with latest state of StrictMode compatibility
([#&#8203;27042](https://togithub.com/mui/material-ui/issues/27042))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[test] Use DOM events instead of mocked, partial events
([#&#8203;27198](https://togithub.com/mui/material-ui/issues/27198))
[@&#8203;eps1lon](https://togithub.com/eps1lon)
- \[website] Open 4 new roles
([#&#8203;27123](https://togithub.com/mui/material-ui/issues/27123))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)
- \[blog] Danilo Leal joins Material UI
([#&#8203;27231](https://togithub.com/mui/material-ui/issues/27231))
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari)

All contributors of this release in alphabetical order:
[@&#8203;eps1lon](https://togithub.com/eps1lon),
[@&#8203;mbrookes](https://togithub.com/mbrookes),
[@&#8203;michal-perlakowski](https://togithub.com/michal-perlakowski),
[@&#8203;michaldudak](https://togithub.com/michaldudak),
[@&#8203;mnajdova](https://togithub.com/mnajdova),
[@&#8203;moshfeu](https://togithub.com/moshfeu),
[@&#8203;oliviertassinari](https://togithub.com/oliviertassinari),
[@&#8203;rajzik](https://togithub.com/rajzik),
[@&#8203;renovate](https://togithub.com/renovate)\[bot],
[@&#8203;sahil-blulabs](https://togithub.com/sahil-blulabs),
[@&#8203;ShirasawaSama](https://togithub.com/ShirasawaSama),
[@&#8203;siriwatknp](https://togithub.com/siriwatknp),
[@&#8203;vimutti77](https://togithub.com/vimutti77)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/creatorsgarten/contentsgarten).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNi4yNy4xIiwidXBkYXRlZEluVmVyIjoiMzYuMjcuMSIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
@oliviertassinari oliviertassinari unpinned this issue Sep 13, 2023
@michaldudak michaldudak transferred this issue from mui/material-ui Feb 27, 2024
@zannager zannager added the package: base-ui Specific to @mui/base label Feb 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: base-ui Specific to @mui/base
Projects
None yet
Development

No branches or pull requests