[Hidden] Remove component by m4theushw · Pull Request #26135 · mui/material-ui

m4theushw · 2021-05-04T22:37:54Z

Breaking changes

[Hidden] Removed in favor of using the sx prop or the useMediaQuery hook.

Use the sx prop to replace implementation="css":

-<Hidden implementation="css" xlUp><Paper /></Hidden>
-<Hidden implementation="css" xlUp><button /></Hidden>
+<Paper sx={{ display: { xl: 'none', xs: 'block' } }} />
+<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />

Use the useMediaQuery hook to replace implementation="js":

-<Hidden implementation="js" xlUp><Paper /></Hidden>
+const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
+return hidden ? null : <Paper />;

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

Part of #20012
Closes #19704
Preview: https://deploy-preview-26135--material-ui.netlify.app/

mui-pr-bot · 2021-05-04T22:39:52Z

Details of bundle changes

@material-ui/core: parsed: -0.51% 😍, gzip: -0.63% 😍

Generated by 🚫 dangerJS against 192bd5f

eps1lon · 2021-05-05T09:03:06Z

docs/src/modules/components/AppNavDrawer.js

+            paper: classes.paper,
+          }}
+          variant="permanent"
+          sx={{ display: { xs: 'none', lg: 'block' } }}


question: Assuming we just want to migrate from <Hidden lgDown />. Do we need lg: 'block' here? To me it isn't clear what the display is above lg or why we even need to differentiate between above and below lg.

Documentation for this is lacking so whatever is the takeway, I'll incorporate into the docs.

So I eventually found out how these works from the docs and it seems to me that { xs: 'none', lg: 'block' } is not equivalent to lgDown if the screen width is below xs.
Wouldn't { display: 'none', lg: { display: 'none' }} actually be equivalent?
Though maybe lg isn't recognized and we would need { [theme.breakpoints.down('lg')]: { display: 'none' }.

Interesting feedback, xs is meant to be width: 0px but it's not very clear. I wonder how we could fix this. I have seen some name it differently, like base.

+1 for

{ [theme.breakpoints.down('lg')]: { display: 'none' } }

it's much more clear. Otherwise, I personally have hard time to follow what will be the end result.

@mnajdova Then I guess it's a matter of habit and we should seriously consider #25846.

I'm biased, I'm used to thinking "mobile-first", hence why sx={{ display: { xs: 'none', lg: 'block' } } reads naturally to me.

Maybe, my point was more, if I see lgDown, I would be able to immediately replace it with:

{ [theme.breakpoints.down('lg')]: { display: 'none' } }

without thinking about it... 🤷 Otherwise, it would require some mental exercise 😄

Why not add support for props like xxDown and xxUp in the sx prop? It would translate nicely with the props of Hidden.

Interesting feedback, xs is meant to be width: 0px but it's not very clear. I wonder how we could fix this. I have seen some name it differently, like base.

base would be great.

I'm biased, I'm used to thinking "mobile-first", hence why sx={{ display: { xs: 'none', lg: 'block' } } reads naturally to me.

For me, it's not natural. We have a dilemma between users that think mobile-first and desktop-first.

{ [theme.breakpoints.down('lg')]: { display: 'none' } }

I changing to this as I think it's more readable. However, I can't use it outside a component, like here.

Anyway, not a blocker, I think it's personal preference, I wouldn't change the code to be honest. @eps1lon can we resolve?

Migration is important. Please don't just handwave these things. Existing users and their path forward is critical to trust.

This is a general frustration I have where we constantly add new features completely ignoring that a feature has inherent cost associated with it. But as soon as we discuss interactions with other features, the feature is discarded.

People can customize breakpoints. The current migration path breaks in those customization scenarios. So whatever we do suggest as a migration either needs to actually be equivalent. Or justify why we ignore custom breakpoints. Which would be odd considering we just improved them with module augmentation.

Custom breakpoints is interesting. It looks like we forgot mobile: 0 in https://material-ui.com/customization/breakpoints/#custom-breakpoints 😅

Maybe we can open an issue to rename xs into base for v6? And maybe even remove it from the breakpoint theme structure.

@m4theushw do you want to comment on the xxDown alternative on [system] Allow max-width breakpoint instead of min-width #25846? It seems to be the same topic.

oliviertassinari

If we feel we are removing the component prematurely, we could only deprecate it, and dive deeper in the migration for v6.

oliviertassinari · 2021-05-05T14:55:47Z

docs/src/modules/components/AppNavDrawer.js

+            paper: classes.paper,
+          }}
+          variant="permanent"
+          sx={{ display: { xs: 'none', lg: 'block' } }}


Custom breakpoints is interesting. It looks like we forgot mobile: 0 in https://material-ui.com/customization/breakpoints/#custom-breakpoints 😅

Maybe we can open an issue to rename xs into base for v6? And maybe even remove it from the breakpoint theme structure.

@m4theushw do you want to comment on the xxDown alternative on [system] Allow max-width breakpoint instead of min-width #25846? It seems to be the same topic.

ocodista · 2021-05-17T19:44:45Z

How to replace <Hidden mdDown>? This change breaked my project

oliviertassinari · 2021-05-17T21:20:06Z

How to replace ?

<Box display={{ xs: 'none', md: 'block' }} />

mnajdova · 2021-05-17T21:37:33Z

Maybe we should update the changelog to show this example as well, or at least the migration guide.

valentyna-antoniuk · 2021-06-16T11:41:54Z

It looks like everyone who wants to migrate to the new version will have to create their own version of this component, otherwise they will rewrite the hiding of elements throughout the project, which entails a lot of edits, even in my not very large project.

Is this the final decision to remove Hidden component and not deprecate it? Thanks.

oliviertassinari · 2021-06-16T11:47:22Z

@missi2402 It's coming back as deprecated in #26408

valentyna-antoniuk · 2021-06-16T11:50:38Z

@oliviertassinari Thanks for the link!

This reverts commit 2b50b0f.

[Hidden] Remove component

fe85f27

update API docs

192bd5f

This was referenced May 5, 2021

[withWidth] Remove API #26136

Merged

[RFC] Material-UI v5 🚀 #20012

Closed

eps1lon reviewed May 5, 2021

View reviewed changes

eps1lon mentioned this pull request May 5, 2021

[docs] More explicit breakpoint documentation in sx #26140

Merged

mnajdova approved these changes May 5, 2021

View reviewed changes

oliviertassinari added breaking change Introduces changes that are not backward compatible. component: Hidden The React component. labels May 5, 2021

oliviertassinari approved these changes May 5, 2021

View reviewed changes

m4theushw mentioned this pull request May 6, 2021

[system] Allow max-width breakpoint instead of min-width #25846

Closed

m4theushw merged commit 2b50b0f into mui:next May 6, 2021

m4theushw deleted the remove-hidden branch May 6, 2021 17:12

oliviertassinari mentioned this pull request May 6, 2021

[RFC] Consider renaming "xs" breakpoint to "base" #26168

Open

1 task

robertvasile mentioned this pull request May 10, 2021

[Hidden] v5.0.0-alpha.33 is missing the Hidden component #26229

Closed

2 tasks

m4theushw mentioned this pull request May 17, 2021

[docs] Clarify migration from Hidden #26348

Merged

1 task

siriwatknp added a commit to siriwatknp/material-ui that referenced this pull request Jun 23, 2021

Revert "[Hidden] Remove component (mui#26135)"

117a081

This reverts commit 2b50b0f.

mnajdova mentioned this pull request Jun 28, 2021

Hidden component based on css implementation not working with Grid item #16346

Closed

2 tasks

aarongarciah mentioned this pull request May 20, 2024

[material-ui][Hidden] Remove component #42305

Closed

1 task

Uh oh!

Conversation

m4theushw commented May 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Breaking changes

Uh oh!

mui-pr-bot commented May 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eps1lon May 5, 2021

Choose a reason for hiding this comment

Uh oh!

eps1lon May 5, 2021

Choose a reason for hiding this comment

Uh oh!

oliviertassinari May 5, 2021

Choose a reason for hiding this comment

Uh oh!

mnajdova May 5, 2021

Choose a reason for hiding this comment

Uh oh!

oliviertassinari May 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mnajdova May 5, 2021

Choose a reason for hiding this comment

Uh oh!

m4theushw May 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mnajdova May 5, 2021

Choose a reason for hiding this comment

Uh oh!

eps1lon May 5, 2021

Choose a reason for hiding this comment

Uh oh!

oliviertassinari May 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oliviertassinari May 5, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ocodista commented May 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

oliviertassinari commented May 17, 2021

Uh oh!

mnajdova commented May 17, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

valentyna-antoniuk commented Jun 16, 2021

Uh oh!

oliviertassinari commented Jun 16, 2021

Uh oh!

valentyna-antoniuk commented Jun 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

m4theushw commented May 4, 2021 •

edited

Loading

mui-pr-bot commented May 4, 2021 •

edited

Loading

oliviertassinari May 5, 2021 •

edited

Loading

m4theushw May 5, 2021 •

edited

Loading

oliviertassinari May 5, 2021 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari May 5, 2021 •

edited

Loading

ocodista commented May 17, 2021 •

edited

Loading

mnajdova commented May 17, 2021 •

edited

Loading