components: Remove @emotion/css from ItemGroup
#33070
Closed
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
|
Size Change: +860 B (0%) Total Size: 1.05 MB
ℹ️ View Unchanged
|
sarayourfriend
requested review from
ajitbohra and
chrisvanpatten
as code owners
ciampo
reviewed
Jul 1, 2021
| import { useItem } from './use-item'; | ||
| import { ItemView } from './styles'; | ||
|
|
||
| function Item( props: PolymorphicComponentProps< ItemProps, 'div' > ) { |
There was a problem hiding this comment.
Is it missing forwardedRef: Ref< any > ?
There was a problem hiding this comment.
Whoops, yes it is.
There was a problem hiding this comment.
It's really weird that contextConnect didn't yell about it missing the ref as the first argument to contextConnect is a function accepting PolymorphicComponentProps and a ref 🤔
ciampo
reviewed
Jul 1, 2021
| role, | ||
| size, | ||
| spacedAround, | ||
| action, |
There was a problem hiding this comment.
action is a valid HTML attribute, and therefore when it is passed down to ItemView React assigned an invalid value of "true"|"false" to the action attribute.
We should rename this property so that it doesn't conflict with any existing HTML attributes, maybe hasAction ?
There was a problem hiding this comment.
Yeah, isAction makes sense to me and follows our boolean naming agreement 🙂
|
@ciampo I went ahead and renamed all the booleans and moved the default props up out of styles into the component like we did with other components. |
ciampo
reviewed
Jul 1, 2021
| } | ||
| `; | ||
|
|
||
| const renderRounded = ( { rounded = false }: ItemGroupProps ) => |
There was a problem hiding this comment.
In the original hook, rounded defaulted to true
ciampo
reviewed
Jul 5, 2021
Comment on lines
+28
to
+34
| const { | ||
| isBordered = false, | ||
| isSeparated = false, | ||
| size: sizeProp, | ||
| role = 'list', | ||
| ...otherProps | ||
| } = useContextSystem( props, 'ItemGroup' ); |
There was a problem hiding this comment.
Should we move these default prop values to the DEFAULT_PROPS object?
We could then rewrite this something like:
Suggested change
| const { | |
| isBordered = false, | |
| isSeparated = false, | |
| size: sizeProp, | |
| role = 'list', | |
| ...otherProps | |
| } = useContextSystem( props, 'ItemGroup' ); | |
| const { | |
| isBordered, | |
| isSeparated, | |
| size: sizeProp, | |
| role, | |
| ...otherProps | |
| } = useContextSystem( { ...DEFAULT_PROPS, props }, 'ItemGroup' ); |
and then remove spreading DEFAULT_PROPS directly on <ItemGroupView />
ciampo
reviewed
Jul 5, 2021
| } | ||
|
|
||
| export interface ItemProps { | ||
| isAction?: boolean; |
There was a problem hiding this comment.
Should we add JSDocs, including specifying the @default value?
ciampo
reviewed
Jul 5, 2021
| } | ||
| `; | ||
|
|
||
| const borderRadius = CONFIG.controlBorderRadius; |
There was a problem hiding this comment.
Nit, but should borderRadius be declared at the top of the file?
ciampo
reviewed
Jul 5, 2021
| css` | ||
| border-radius: ${ borderRadius }; | ||
|
|
||
| > *:first-child { |
There was a problem hiding this comment.
This rule seems to create a warning in Storybook:
The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"
Suggested change
| > *:first-child { | |
| > *:first-of-type { |
7 tasks
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.
Description
Part of #30503 (comment)
Also had to make some updates to the storybook story to remove usages of the
cssprop in favor ofstyleas we've been doing in stories.How has this been tested?
Storybook, everything all the props etc should all work as they worked before.
Types of changes
Non breaking change
Checklist:
*.native.jsfiles for terms that need renaming or removal).