fix(Hidden): Add Hidden component #103
Conversation
hscgavin
force-pushed
the
feature/Hidden
branch
from
d393a76 to
657168f
Compare
michaeltaranto
changed the title
| label: 'Hidden on mobile', | ||
| render: () => ( | ||
| <Hidden component="span" hideFor="mobile"> | ||
| <Text baseline={false}>Hidden on mobile</Text> |
There was a problem hiding this comment.
The baseline={false} is not really required, it's best to try and keep these docs code blocks as lean as possible.
lib/components/Hidden/Hidden.tsx
Outdated
| return ( | ||
| <Box | ||
| display={[ | ||
| hideFor === 'mobile' ? 'none' : 'inline', |
There was a problem hiding this comment.
Whats the reason for falling back to inline on mobile?
There was a problem hiding this comment.
so children is the one decide the display style display: xxx, if falling back to block, children couldn't override it? thoughts?
There was a problem hiding this comment.
We had to pass something there and inline is something. If the child is block it will still behave as expected.
Better ideas gratefully accepted 😅
|
Just pushed an update that adds support for print/screen hiding, which necessitated a change in the API towards boolean props, since you can mix and match. For example: <Hidden desktop print>...</Hidden> |
| )} | ||
| /> | ||
| </button> | ||
| <Hidden print> |
There was a problem hiding this comment.
Dogfooding straight away 👍 🐶 🥘
There was a problem hiding this comment.
Yeah, trying to make this more of a habit.
lib/components/Hidden/Hidden.tsx
Outdated
| screen?: boolean; | ||
| print?: boolean; | ||
| inline?: boolean; | ||
| component?: ReactType; |
There was a problem hiding this comment.
As discussed maybe remove the component option for now.
Example usage
Hidden on mobile:
Hidden on desktop:
Hidden inline:
Hidden on print:
Hidden on screen: