Skip to content
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

Jump to bottom

feat(Button): add link icon position for link buttons #3798

Merged
merged 4 commits into from Mar 2, 2020
Merged

feat(Button): add link icon position for link buttons #3798

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
26fcd79
feat(Button): add link icon position for link buttons
kmcfaul Feb 19, 2020
3720be1
feat(Misc): update snapshots using link button
kmcfaul Feb 19, 2020
cfdb9b3
fix(tests): update table snapshot
kmcfaul Feb 20, 2020
279820b
feat(Button): rename linkPosition > iconPosition, update example
kmcfaul Mar 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
90 changes: 75 additions & 15 deletions .../patternfly-4/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
View file
Open in desktop
Expand Up @@ -332,7 +332,11 @@ exports[`Alert - danger Action Link 1`] = `
type="button"
variantLabel="Danger alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -490,7 +494,11 @@ exports[`Alert - danger Action and Title 1`] = `
type="button"
variantLabel="Danger alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -651,7 +659,11 @@ exports[`Alert - danger Custom aria label 1`] = `
type="button"
variantLabel="Danger alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -1346,7 +1358,11 @@ exports[`Alert - default Action Link 1`] = `
type="button"
variantLabel="Default alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -1504,7 +1520,11 @@ exports[`Alert - default Action and Title 1`] = `
type="button"
variantLabel="Default alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -1665,7 +1685,11 @@ exports[`Alert - default Custom aria label 1`] = `
type="button"
variantLabel="Default alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -2360,7 +2384,11 @@ exports[`Alert - info Action Link 1`] = `
type="button"
variantLabel="Info alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -2518,7 +2546,11 @@ exports[`Alert - info Action and Title 1`] = `
type="button"
variantLabel="Info alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -2679,7 +2711,11 @@ exports[`Alert - info Custom aria label 1`] = `
type="button"
variantLabel="Info alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -3374,7 +3410,11 @@ exports[`Alert - success Action Link 1`] = `
type="button"
variantLabel="Success alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -3532,7 +3572,11 @@ exports[`Alert - success Action and Title 1`] = `
type="button"
variantLabel="Success alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -3693,7 +3737,11 @@ exports[`Alert - success Custom aria label 1`] = `
type="button"
variantLabel="Success alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -4388,7 +4436,11 @@ exports[`Alert - warning Action Link 1`] = `
type="button"
variantLabel="Warning alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -4546,7 +4598,11 @@ exports[`Alert - warning Action and Title 1`] = `
type="button"
variantLabel="Warning alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -4707,7 +4763,11 @@ exports[`Alert - warning Custom aria label 1`] = `
type="button"
variantLabel="Warning alert:"
>
test
<span
className="pf-c-button__text"
>
test
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down
13 changes: 11 additions & 2 deletions packages/patternfly-4/react-core/src/components/Button/Button.tsx
View file
Open in desktop
Expand Up @@ -42,6 +42,8 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
type?: 'button' | 'submit' | 'reset';
/** Adds button variant styles */
variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'plain' | 'control';
/** Sets position of the link icon */
iconPosition?: 'left' | 'right';
/** Adds accessible text to the button. */
'aria-label'?: string;
/** Icon for the button if variant is a link */
Expand All @@ -62,6 +64,7 @@ const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
isInline = false,
type = ButtonType.button,
variant = ButtonVariant.primary,
iconPosition = 'left',
'aria-label': ariaLabel = null,
icon = null,
ouiaContext = null,
Expand Down Expand Up @@ -95,8 +98,14 @@ const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
})}
>
{icon && variant === ButtonVariant.link && <span className="pf-c-button__icon">{icon}</span>}
{children}
{icon && variant === ButtonVariant.link && iconPosition === 'left' && (
<span className="pf-c-button__icon">{icon}</span>
)}
{variant === ButtonVariant.link && <span className={css(styles.buttonText)}>{children}</span>}
{variant !== ButtonVariant.link && children}
{icon && variant === ButtonVariant.link && iconPosition === 'right' && (
<span className="pf-c-button__icon">{icon}</span>
)}
</Component>
);
};
Expand Down
20 changes: 16 additions & 4 deletions ...atternfly-4/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Expand Up @@ -317,7 +317,11 @@ exports[`isInline 1`] = `
tabIndex={null}
type="button"
>
Hovered Button
<span
className="pf-c-button__text"
>
Hovered Button
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -361,8 +365,12 @@ exports[`link button 1`] = `
tabIndex={null}
type="button"
>
link
Button
<span
className="pf-c-button__text"
>
link
Button
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -452,7 +460,11 @@ exports[`link with icon 1`] = `
</svg>
</CartArrowDownIcon>
</span>
Block Button
<span
className="pf-c-button__text"
>
Block Button
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down
11 changes: 8 additions & 3 deletions packages/patternfly-4/react-core/src/components/Button/examples/Button.md
View file
Open in desktop
Expand Up @@ -5,10 +5,12 @@ cssPrefix: 'pf-c-button'
typescript: true
propComponents: ['Button']
---

import { Button } from '@patternfly/react-core';
import { TimesIcon, PlusCircleIcon } from '@patternfly/react-icons';
import { TimesIcon, PlusCircleIcon, ExternalLinkSquareAltIcon } from '@patternfly/react-icons';

## Examples

```js title=Block-level
import React from 'react';
import { Button } from '@patternfly/react-core';
Expand All @@ -20,7 +22,7 @@ BlockButton = () => <Button isBlock>Block level button</Button>;
```js title=Variations
import React from 'react';
import { Button } from '@patternfly/react-core';
import { TimesIcon, PlusCircleIcon } from '@patternfly/react-icons';
import { TimesIcon, PlusCircleIcon, ExternalLinkSquareAltIcon } from '@patternfly/react-icons';

ButtonVariants = () => (
<React.Fragment>
Expand All @@ -30,6 +32,9 @@ ButtonVariants = () => (
<Button variant="link" icon={<PlusCircleIcon />}>
Link button
</Button>{' '}
<Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
Link button
</Button>{' '}
<Button variant="plain" aria-label="Action">
<TimesIcon />
</Button>
Expand Down Expand Up @@ -57,7 +62,7 @@ LinkButton = () => (
Tertiary Link to Core Docs
</Button>
<Button component="a" href="https://pf4.patternfly.org/contribution/#modifiers" variant="link">
Jump to modifiers in contribution guidelines
Jump to modifiers in contribution guidelines
</Button>
</React.Fragment>
);
Expand Down
24 changes: 20 additions & 4 deletions ...4/react-core/src/components/DataToolbar/__tests__/__snapshots__/DataToolbar.test.tsx.snap
View file
Open in desktop
Expand Up @@ -1455,7 +1455,11 @@ exports[`data toolbar DataToolbarFilter 1`] = `
class="pf-c-button pf-m-link pf-m-inline"
type="button"
>
Clear all filters
<span
class="pf-c-button__text"
>
Clear all filters
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -1550,7 +1554,11 @@ exports[`data toolbar DataToolbarFilter 1`] = `
tabIndex={null}
type="button"
>
Clear all filters
<span
className="pf-c-button__text"
>
Clear all filters
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down Expand Up @@ -1717,7 +1725,11 @@ exports[`data toolbar DataToolbarFilter 1`] = `
class="pf-c-button pf-m-link pf-m-inline"
type="button"
>
Clear all filters
<span
class="pf-c-button__text"
>
Clear all filters
</span>
</button>
</div>
</div>,
Expand Down Expand Up @@ -1789,7 +1801,11 @@ exports[`data toolbar DataToolbarFilter 1`] = `
tabIndex={null}
type="button"
>
Clear all filters
<span
className="pf-c-button__text"
>
Clear all filters
</span>
</button>
</Button>
</ComponentWithOuia>
Expand Down
12 changes: 10 additions & 2 deletions ...atternfly-4/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
View file
Open in desktop
Expand Up @@ -340,7 +340,11 @@ exports[`Wizard should match snapshot 1`] = `
class="pf-c-button pf-m-link"
type="button"
>
Cancel
<span
class="pf-c-button__text"
>
Cancel
</span>
</button>
</footer>
</div>
Expand Down Expand Up @@ -550,7 +554,11 @@ exports[`Wizard should match snapshot 1`] = `
class="pf-c-button pf-m-link"
type="button"
>
Cancel
<span
class="pf-c-button__text"
>
Cancel
</span>
</button>
</footer>
</div>
Expand Down