Skip to content

Commit

Permalink
feat(Button): add link icon position for link buttons (#3798)
Browse files Browse the repository at this point in the history 
* feat(Button): add link icon position for link buttons

* feat(Misc): update snapshots using link button

* fix(tests): update table snapshot

* feat(Button): rename linkPosition > iconPosition, update example
  • Loading branch information
@kmcfaul
kmcfaul committed Mar 2, 2020
1 parent a08a464 commit 33739b5
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 34 deletions.
90 changes: 75 additions & 15 deletions .../patternfly-4/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
View file
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
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
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
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
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
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

0 comments on commit 33739b5

Please sign in to comment.