Component System: Add Elevation Component #28593
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ItsJonQ
added
[Package] Components
|
Size Change: +1.48 kB (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
32 tasks
| test( 'should render isInteractive', () => { | ||
| const { container } = render( <Elevation isInteractive /> ); | ||
|
|
||
| expect( container.firstChild ).toMatchSnapshot(); |
There was a problem hiding this comment.
More snapshot tests 😱
There was a problem hiding this comment.
I know :(. Both Elevation and Surface are basically PURE css things.
This raises an interesting question. How should we handle unit testing for these low level primitives that are mostly CSS things?
It could get very verbose to check for individual css props 🤔 - for example, complex box shadows.
There was a problem hiding this comment.
I honestly have no idea. Checking for those things seems just as brittle as a snapshot test.
sarayourfriend
force-pushed
the
add/elevation-component
branch
from
8f7a1c5 to
8bbda0c
Compare
|
@sarayourfriend Thank you for your help with this one! Do you think we're 👍 now? |
diegohaz
reviewed
Feb 11, 2021
There was a problem hiding this comment.
Awesome work! Thanks @ItsJonQ and @sarayourfriend!
The only thing I didn't understand is how focus and isInteractive props work. I see Storybook has knobs for those props, but it doesn't seem like I can focus on the element.
| function Elevation( props, forwardedRef ) { | ||
| const otherProps = useElevation( props ); | ||
|
|
||
| return <View aria-hidden { ...otherProps } ref={ forwardedRef } />; |
There was a problem hiding this comment.
Does this component accept a children prop? Is it possible that someone uses this component like this by mistake?
<Elevation>
<p>Paragraph</p>
<button>Button</button>
</Elevation>If that's the case, I would whether not accept a children prop or warn against it. If there's a use case for children prop, I would use role="presentation" instead of aria-hidden (the difference is that aria-hidden will disable the whole subtree, whereas role="presentation" will only disable that element).
There was a problem hiding this comment.
Ooo! Thanks for the feedback. Elevation actually shouldn't accept children 😱 .
(@sarayourfriend how would we adjust the types for that? I think this may be one of the few new components that don't accept children)
There was a problem hiding this comment.
Oh, interesting. I'll do some tinkering.
@diegohaz Thank you for the review! We'll update the To clarify with Let's pretend we want to add We could do something like this: <LinkCard>
...
<Elevation focus={10} />
</LinkCard>The styles are written in a way where once the They apply when the direct parent element is engaged with, rather than the Hope this helps 🙏 P.S. I don't blame you for not getting it. I needed to poke at the story to remember why I set it up this way. After I did, I feel like it makes sense, and I can understand the use case. |
|
@ItsJonQ That makes sense. I imagined something like that. Do you think we can have a story for that too? |
|
diegohaz
reviewed
Feb 11, 2021
|
@diegohaz Focus story has been pushed |
diegohaz
approved these changes
Feb 11, 2021
|
@diegohaz Amazing!! Thank you 🙇 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This update adds a new Elevation component for the new Component System.
This is a brand new primitive component.
@wordpress/componentspreviously didn't have aElevationcomponent, so we didn't need to "adapt" it.This component renders shadows using the elevation/shadow values from the new Style System.
How has this been tested?
Tested locally in Storybook and in Jest.
Checklist: