Skip to content

feat(Button): allow icon to be used in any variant, add icon css modifiers #4032

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
redallen merged 4 commits into from
Apr 17, 2020
Merged

feat(Button): allow icon to be used in any variant, add icon css modifiers #4032

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
df02959
feat(Button): add start/end modifiers, allow icon to be used outside …
kmcfaul Apr 6, 2020
857a9f1
feat(Button): update snapshots
kmcfaul Apr 6, 2020
31a0291
feat(Table): update snapshots from button changes
kmcfaul Apr 6, 2020
23035bc
feat(Button): prevent icon prop with plain variant
kmcfaul Apr 13, 2020
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
60 changes: 15 additions & 45 deletions packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,9 +245,7 @@ exports[`Alert - danger Action Link 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -353,9 +351,7 @@ exports[`Alert - danger Action and Title 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -462,9 +458,7 @@ exports[`Alert - danger Custom aria label 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -1030,9 +1024,7 @@ exports[`Alert - default Action Link 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -1138,9 +1130,7 @@ exports[`Alert - default Action and Title 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -1247,9 +1237,7 @@ exports[`Alert - default Custom aria label 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -1815,9 +1803,7 @@ exports[`Alert - info Action Link 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -1923,9 +1909,7 @@ exports[`Alert - info Action and Title 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -2032,9 +2016,7 @@ exports[`Alert - info Custom aria label 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -2600,9 +2582,7 @@ exports[`Alert - success Action Link 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -2708,9 +2688,7 @@ exports[`Alert - success Action and Title 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -2817,9 +2795,7 @@ exports[`Alert - success Custom aria label 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -3385,9 +3361,7 @@ exports[`Alert - warning Action Link 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -3493,9 +3467,7 @@ exports[`Alert - warning Action and Title 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down Expand Up @@ -3602,9 +3574,7 @@ exports[`Alert - warning Custom aria label 1`] = `
tabIndex={null}
type="button"
>
<span>
test
</span>
test
</button>
</Button>
</AlertActionLink>
Expand Down
13 changes: 6 additions & 7 deletions packages/react-core/src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
iconPosition?: 'left' | 'right';
/** Adds accessible text to the button. */
'aria-label'?: string;
/** Icon for the button if variant is a link */
/** Icon for the button. Usable by all variants except for plain. */
icon?: React.ReactNode | null;
/** Set button tab index unless component is not a button and is disabled */
tabIndex?: number;
Expand Down Expand Up @@ -94,13 +94,12 @@ export const Button: React.FunctionComponent<ButtonProps & OUIAProps> = ({
type={isButtonElement ? type : null}
{...getOUIAProps('Button', ouiaId)}
>
{icon && variant === ButtonVariant.link && iconPosition === 'left' && (
<span className={styles.buttonIcon}>{icon}</span>
{variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (
<span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
)}
{variant === ButtonVariant.link && <span>{children}</span>}
{variant !== ButtonVariant.link && children}
{icon && variant === ButtonVariant.link && iconPosition === 'right' && (
<span className={styles.buttonIcon}>{icon}</span>
{children}
{variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
<span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
)}
</Component>
);
Expand Down
16 changes: 5 additions & 11 deletions packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,9 +161,7 @@ exports[`isInline 1`] = `
tabIndex={null}
type="button"
>
<span>
Hovered Button
</span>
Hovered Button
</button>
</Button>
`;
Expand All @@ -184,10 +182,8 @@ exports[`link button 1`] = `
tabIndex={null}
type="button"
>
<span>
link
Button
</span>
link
Button
</button>
</Button>
`;
Expand All @@ -209,7 +205,7 @@ exports[`link with icon 1`] = `
type="button"
>
<span
className="pf-c-button__icon"
className="pf-c-button__icon pf-m-start"
>
<CartArrowDownIcon>
<SVGIcon
Expand Down Expand Up @@ -250,9 +246,7 @@ exports[`link with icon 1`] = `
</SVGIcon>
</CartArrowDownIcon>
</span>
<span>
Block Button
</span>
Block Button
</button>
</Button>
`;
Expand Down
16 changes: 4 additions & 12 deletions ...s/react-core/src/components/DataToolbar/__tests__/__snapshots__/DataToolbar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1264,9 +1264,7 @@ exports[`data toolbar DataToolbarFilter 1`] = `
data-ouia-safe="true"
type="button"
>
<span>
Clear all filters
</span>
Clear all filters
</button>
</div>
</div>
Expand Down Expand Up @@ -1339,9 +1337,7 @@ exports[`data toolbar DataToolbarFilter 1`] = `
tabIndex={null}
type="button"
>
<span>
Clear all filters
</span>
Clear all filters
</button>
</Button>
</div>
Expand Down Expand Up @@ -1523,9 +1519,7 @@ exports[`data toolbar DataToolbarFilter 1`] = `
data-ouia-safe="true"
type="button"
>
<span>
Clear all filters
</span>
Clear all filters
</button>
</div>
</div>,
Expand Down Expand Up @@ -1575,9 +1569,7 @@ exports[`data toolbar DataToolbarFilter 1`] = `
tabIndex={null}
type="button"
>
<span>
Clear all filters
</span>
Clear all filters
</button>
</Button>
</div>
Expand Down
8 changes: 2 additions & 6 deletions packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,9 +347,7 @@ exports[`Wizard should match snapshot 1`] = `
data-ouia-safe="true"
type="button"
>
<span>
Cancel
</span>
Cancel
</button>
</footer>
</div>
Expand Down Expand Up @@ -568,9 +566,7 @@ exports[`Wizard should match snapshot 1`] = `
data-ouia-safe="true"
type="button"
>
<span>
Cancel
</span>
Cancel
</button>
</footer>
</div>
Expand Down
16 changes: 4 additions & 12 deletions packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37886,9 +37886,7 @@ exports[`Compound Expandable table 1`] = `
tabIndex={null}
type="button"
>
<span>
1
</span>
1
</button>
</Button>
</td>
Expand Down Expand Up @@ -37924,9 +37922,7 @@ exports[`Compound Expandable table 1`] = `
tabIndex={null}
type="button"
>
<span>
2
</span>
2
</button>
</Button>
</td>
Expand Down Expand Up @@ -38377,9 +38373,7 @@ exports[`Compound Expandable table 1`] = `
tabIndex={null}
type="button"
>
<span>
3
</span>
3
</button>
</Button>
</td>
Expand Down Expand Up @@ -38415,9 +38409,7 @@ exports[`Compound Expandable table 1`] = `
tabIndex={null}
type="button"
>
<span>
4
</span>
4
</button>
</Button>
</td>
Expand Down