Skip to content

Item: remove isAction, use onClick to discriminate if it should render as button #35152

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.

Sign up for GitHub

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

Merged
ciampo merged 7 commits into from
Sep 28, 2021
Merged

Item: remove isAction, use onClick to discriminate if it should render as button #35152

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
28798dd
Item: mark `isAction` as deprecated, use `onClick` to discriminate if…
ciampo Sep 27, 2021
ef3d41d
Update and add tests
ciampo Sep 27, 2021
501d0c1
Update stories
ciampo Sep 27, 2021
e2454ee
Remove `isAction` from Global Styles Sidebar
ciampo Sep 27, 2021
a148cea
Remove the `isAction` prop
ciampo Sep 28, 2021
eb50c94
CHANGELOG
ciampo Sep 28, 2021
c80a971
Memo-ise item s classname computation
ciampo Sep 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update stories
  • Loading branch information
@ciampo
ciampo committed Sep 27, 2021
commit 501d0c1baf63b6fc4576753a49c8c5104f2583a9
30 changes: 11 additions & 19 deletions packages/components/src/item-group/stories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export const _default = () => {
},
PROP_UNSET
),
isAction: boolean( 'Item 1: isAction', true ),
};

// Do not pass the `size` prop when its value is `undefined`.
Expand All @@ -68,16 +67,14 @@ export const _default = () => {

return (
<ItemGroup style={ { width: '350px' } } { ...itemGroupProps }>
<Item { ...itemProps } onClick={ () => alert( 'WordPress.org' ) }>
<Item { ...itemProps }>Code is Poetry (no click handlers)</Item>
<Item onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
<Item onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
<Item onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
</ItemGroup>
Expand All @@ -90,16 +87,14 @@ export const dropdown = () => (
trigger={ <Button>Open Popover</Button> }
>
<ItemGroup style={ { padding: 4 } }>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
<Item>Code is Poetry (no click handlers)</Item>
<Item onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
<Item onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
<Item isAction onClick={ () => alert( 'WordPress.org' ) }>
<Item onClick={ () => alert( 'WordPress.org' ) }>
Code is Poetry — Click me!
</Item>
</ItemGroup>
Expand Down Expand Up @@ -141,7 +136,7 @@ export const complexLayouts = () => {

return (
<ItemGroup isBordered isSeparated style={ { width: '250px' } }>
<Item isAction onClick={ () => alert( 'Color palette' ) }>
<Item onClick={ () => alert( 'Color palette' ) }>
<HStack>
<FlexBlock>
<ZStack isLayered={ false } offset={ -8 }>
Expand All @@ -156,7 +151,7 @@ export const complexLayouts = () => {
</HStack>
</Item>

<Item isAction onClick={ () => alert( 'Single color setting' ) }>
<Item onClick={ () => alert( 'Single color setting' ) }>
<HStack justify="flex-start">
<FlexItem
as={ SimpleColorSwatch }
Expand All @@ -169,10 +164,7 @@ export const complexLayouts = () => {
</HStack>
</Item>

<Item
isAction
onClick={ () => alert( 'Single typography setting' ) }
>
<Item onClick={ () => alert( 'Single typography setting' ) }>
<HStack justify="flex-start">
<FlexItem>
<Icon icon={ typography } size={ 24 } />
Expand Down