-
Notifications
You must be signed in to change notification settings - Fork 357
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.
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
feat(Button): consume Penta tokens and update examples #9934
Changes from 1 commit
4c3dd28
27fd544
d076af7
8572a61
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,7 +2,7 @@ import React from 'react'; | |
|
||
import { render, screen } from '@testing-library/react'; | ||
|
||
import { Button, ButtonVariant } from '../Button'; | ||
import { Button, ButtonState, ButtonVariant } from '../Button'; | ||
|
||
Object.values(ButtonVariant).forEach((variant) => { | ||
if (variant !== 'primary') { | ||
|
@@ -55,10 +55,9 @@ test('Renders with class pf-m-block when isBlock = true', () => { | |
expect(screen.getByRole('button')).toHaveClass('pf-m-block'); | ||
}); | ||
|
||
// TODO: Reenable or remove with issue #9907 | ||
xtest('Renders with class pf-m-active when isActive = true', () => { | ||
render(<Button isActive>Active Button</Button>); | ||
expect(screen.getByRole('button')).toHaveClass('pf-m-active'); | ||
xtest('Renders with class pf-m-clicked when isClicked = true', () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we reenable this one? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Well, there will no longer be the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It looks like you modified it for the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have opened this issue #9989 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Oh, I did not realize that when it is marked as There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. fix PR: #10013 |
||
render(<Button isClicked>Clicked Button</Button>); | ||
expect(screen.getByRole('button')).toHaveClass('pf-m-clicked'); | ||
}); | ||
|
||
test('Renders with class pf-m-disabled when isDisabled = true', () => { | ||
|
@@ -80,6 +79,22 @@ test('Does not disable button when isDisabled = true and component = a', () => { | |
expect(screen.getByText('Disabled yet focusable button')).not.toHaveProperty('disabled'); | ||
}); | ||
|
||
test('Renders with class pf-m-unread by default when variant = stateful', () => { | ||
render(<Button variant="stateful">Stateful Button</Button>); | ||
expect(screen.getByRole('button')).toHaveClass('pf-m-stateful', 'pf-m-unread'); | ||
}); | ||
|
||
Object.values(ButtonState).forEach((state) => { | ||
test(`Renders with class pf-m-${state} when state = ${state} and variant = stateful`, () => { | ||
render( | ||
<Button variant="stateful" state={state}> | ||
Stateful Button - {state} | ||
</Button> | ||
); | ||
expect(screen.getByRole('button')).toHaveClass('pf-m-stateful', `pf-m-${state}`); | ||
}); | ||
}); | ||
|
||
test('Renders with class pf-m-danger when isDanger = true and variant = secondary', () => { | ||
render( | ||
<Button variant="secondary" isDanger> | ||
|
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 | ||
<> | ||
adamviktora marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<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> | ||
</> | ||
); |
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> | ||
); |
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> | ||
adamviktora marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<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> | ||
<Flex columnGap={{ default: 'columnGapSm' }}> | ||
<Button isDisabled variant="control"> | ||
Control | ||
</Button> | ||
<Button isDisabled variant="control" aria-label="Copy"> | ||
<CopyIcon /> | ||
</Button> | ||
</Flex> | ||
</React.Fragment> | ||
); |
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> | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍