-
Notifications
You must be signed in to change notification settings - Fork 353
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Button): consume Penta tokens and update examples (#9934)
* feat(Button): consume Penta tokens and update examples * fix (Button docs): add aria-label to pass a11y tests * fix(Button): rename noPadding to hasNoPadding * docs(Button): update fragments
- Loading branch information
1 parent
dba392d
commit d7a3b29
Showing
15 changed files
with
359 additions
and
256 deletions.
There are no files selected for viewing
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
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
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
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
66 changes: 21 additions & 45 deletions
66
packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,28 @@ | ||
| import React from 'react'; | ||
| import { Button, Tooltip } from '@patternfly/react-core'; | ||
| import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; | ||
| import { Button, Flex, Tooltip } from '@patternfly/react-core'; | ||
| import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; | ||
|
|
||
| export const ButtonAriaDisabled: React.FunctionComponent = () => ( | ||
| <React.Fragment> | ||
| <Button isAriaDisabled>Primary aria disabled</Button> | ||
| <Button isAriaDisabled>Secondary aria disabled</Button>{' '} | ||
| <Button variant="secondary" isDanger isAriaDisabled> | ||
| Danger secondary aria disabled | ||
| </Button>{' '} | ||
| <Button isAriaDisabled variant="tertiary"> | ||
| Tertiary aria disabled | ||
| </Button>{' '} | ||
| <Button isAriaDisabled variant="danger"> | ||
| Danger disabled | ||
| </Button>{' '} | ||
| <Button isAriaDisabled variant="warning"> | ||
| Warning disabled | ||
| </Button> | ||
| <br /> | ||
| <br /> | ||
| <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}> | ||
| Link aria disabled | ||
| </Button>{' '} | ||
| <Button isAriaDisabled variant="link" isInline> | ||
| Inline link aria disabled | ||
| </Button>{' '} | ||
| <Button variant="link" isDanger isAriaDisabled> | ||
| Danger link disabled | ||
| </Button>{' '} | ||
| <Button isAriaDisabled variant="plain" aria-label="Action"> | ||
| <TimesIcon /> | ||
| </Button>{' '} | ||
| <Button isAriaDisabled variant="control"> | ||
| Control aria disabled | ||
| </Button> | ||
| <br /> | ||
| <br /> | ||
| <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support."> | ||
| <Button isAriaDisabled variant="secondary"> | ||
| Secondary button to core docs | ||
| <> | ||
| <Flex columnGap={{ default: 'columnGapSm' }}> | ||
| <Button isAriaDisabled>Primary aria disabled</Button> | ||
| <Button isAriaDisabled variant="link" icon={<PlusCircleIcon />}> | ||
| Link aria disabled | ||
| </Button> | ||
| </Tooltip>{' '} | ||
| <Tooltip content="Aria-disabled link as button with tooltip"> | ||
| <Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary"> | ||
| Tertiary link as button to core docs | ||
| <Button isAriaDisabled variant="link" isInline> | ||
| Inline link aria disabled | ||
| </Button> | ||
| </Tooltip> | ||
| </React.Fragment> | ||
| </Flex> | ||
| <br /> | ||
| <Flex columnGap={{ default: 'columnGapSm' }}> | ||
| <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support."> | ||
| <Button isAriaDisabled>Primary button with tooltip</Button> | ||
| </Tooltip> | ||
| <Tooltip content="Aria-disabled link as button with tooltip"> | ||
| <Button component="a" isAriaDisabled href="https://www.patternfly.org/" target="_blank" variant="secondary"> | ||
| Secondary link as button to PatternFly home | ||
| </Button> | ||
| </Tooltip> | ||
| </Flex> | ||
| </> | ||
| ); |
18 changes: 8 additions & 10 deletions
18
packages/react-core/src/components/Button/examples/ButtonCallToAction.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,20 @@ | ||
| import React from 'react'; | ||
| import { Button } from '@patternfly/react-core'; | ||
| import { Button, Flex } from '@patternfly/react-core'; | ||
| import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; | ||
|
|
||
| export const ButtonCallToAction: React.FunctionComponent = () => ( | ||
| <React.Fragment> | ||
| <Flex columnGap={{ default: 'columnGapSm' }}> | ||
| <Button variant="primary" size="lg"> | ||
| Call to action | ||
| </Button>{' '} | ||
| </Button> | ||
| <Button variant="secondary" size="lg"> | ||
| Call to action | ||
| </Button>{' '} | ||
| </Button> | ||
| <Button variant="tertiary" size="lg"> | ||
| Call to action | ||
| </Button>{' '} | ||
| <Button variant="link" size="lg"> | ||
| Call to action <ArrowRightIcon /> | ||
| </Button> | ||
| <br /> | ||
| <br /> | ||
| </React.Fragment> | ||
| <Button variant="link" size="lg" icon={<ArrowRightIcon />} iconPosition="end"> | ||
| Call to action | ||
| </Button> | ||
| </Flex> | ||
| ); |
75 changes: 44 additions & 31 deletions
75
packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,52 @@ | ||
| import React from 'react'; | ||
| import { Button } from '@patternfly/react-core'; | ||
| import { Button, Flex } from '@patternfly/react-core'; | ||
| import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; | ||
| import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; | ||
| import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; | ||
|
|
||
| export const ButtonDisabled: React.FunctionComponent = () => ( | ||
| <React.Fragment> | ||
| <Button isDisabled>Primary disabled</Button> <Button isDisabled>Secondary disabled</Button>{' '} | ||
| <Button variant="secondary" isDanger isDisabled> | ||
| Danger secondary disabled | ||
| </Button>{' '} | ||
| <Button isDisabled variant="tertiary"> | ||
| Tertiary disabled | ||
| </Button>{' '} | ||
| <Button isDisabled variant="danger"> | ||
| Danger disabled | ||
| </Button>{' '} | ||
| <Button isDisabled variant="warning"> | ||
| Warning disabled | ||
| </Button> | ||
| <> | ||
| <Flex columnGap={{ default: 'columnGapSm' }}> | ||
| <Button isDisabled>Primary</Button> | ||
| <Button variant="secondary" isDisabled> | ||
| Secondary | ||
| </Button> | ||
| <Button variant="secondary" isDanger isDisabled> | ||
| Danger secondary | ||
| </Button> | ||
| <Button isDisabled variant="tertiary"> | ||
| Tertiary | ||
| </Button> | ||
| <Button isDisabled variant="danger"> | ||
| Danger | ||
| </Button> | ||
| <Button isDisabled variant="warning"> | ||
| Warning | ||
| </Button> | ||
| </Flex> | ||
| <br /> | ||
| <Flex columnGap={{ default: 'columnGapSm' }}> | ||
| <Button isDisabled variant="link" icon={<PlusCircleIcon />}> | ||
| Link | ||
| </Button> | ||
| <Button isDisabled variant="link" isInline> | ||
| Inline link | ||
| </Button> | ||
| <Button variant="link" isDanger isDisabled> | ||
| Danger link | ||
| </Button> | ||
| <Button isDisabled variant="plain" aria-label="Action"> | ||
| <TimesIcon /> | ||
| </Button> | ||
| </Flex> | ||
| <br /> | ||
| <Button isDisabled variant="link" icon={<PlusCircleIcon />}> | ||
| Link disabled | ||
| </Button>{' '} | ||
| <Button isDisabled variant="link" isInline> | ||
| Inline link disabled | ||
| </Button>{' '} | ||
| <Button variant="link" isDanger isDisabled> | ||
| Danger link disabled | ||
| </Button>{' '} | ||
| <Button isDisabled variant="plain" aria-label="Action"> | ||
| <TimesIcon /> | ||
| </Button>{' '} | ||
| <Button isDisabled variant="control"> | ||
| Control disabled | ||
| </Button> | ||
| </React.Fragment> | ||
| <Flex columnGap={{ default: 'columnGapSm' }}> | ||
| <Button isDisabled variant="control"> | ||
| Control | ||
| </Button> | ||
| <Button isDisabled variant="control" aria-label="Copy"> | ||
| <CopyIcon /> | ||
| </Button> | ||
| </Flex> | ||
| </> | ||
| ); |
28 changes: 14 additions & 14 deletions
28
packages/react-core/src/components/Button/examples/ButtonLinks.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| import React from 'react'; | ||
| import { Button } from '@patternfly/react-core'; | ||
| import { Button, Flex } from '@patternfly/react-core'; | ||
|
|
||
| export const ButtonLinks: React.FunctionComponent = () => ( | ||
| <React.Fragment> | ||
| <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="primary"> | ||
| Link to core docs | ||
| </Button>{' '} | ||
| <Button component="a" href="https://pf4.patternfly.org/" target="_blank" variant="secondary"> | ||
| Secondary link to core docs | ||
| </Button>{' '} | ||
| <Button isDisabled component="a" href="https://pf4.patternfly.org/" target="_blank" variant="tertiary"> | ||
| Tertiary link to core docs | ||
| </Button>{' '} | ||
| <Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link"> | ||
| Jump to modifiers in contribution guidelines | ||
| <Flex> | ||
| <Button component="a" href="https://www.patternfly.org/" target="_blank" variant="primary"> | ||
| Link to PatternFly home | ||
| </Button> | ||
| </React.Fragment> | ||
| <Button component="a" href="https://www.patternfly.org/" target="_blank" variant="secondary"> | ||
| Secondary link to PatternFly home | ||
| </Button> | ||
| <Button isDisabled component="a" href="https://www.patternfly.org/" target="_blank" variant="tertiary"> | ||
| Tertiary link to PatternFly home | ||
| </Button> | ||
| <Button component="a" href="https://www.patternfly.org/" variant="link"> | ||
| Jump to PatternFly home | ||
| </Button> | ||
| </Flex> | ||
| ); |
Oops, something went wrong.