From df0295955a0cee84d1eecc3975b67f37de0d7456 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 6 Apr 2020 12:10:28 -0400 Subject: [PATCH 1/4] feat(Button): add start/end modifiers, allow icon to be used outside of link btns --- packages/react-core/src/components/Button/Button.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index ebbea39353b..32d542ea012 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -94,14 +94,11 @@ export const Button: React.FunctionComponent = ({ type={isButtonElement ? type : null} {...getOUIAProps('Button', ouiaId)} > - {icon && variant === ButtonVariant.link && iconPosition === 'left' && ( - {icon} - )} - {variant === ButtonVariant.link && {children}} - {variant !== ButtonVariant.link && children} - {icon && variant === ButtonVariant.link && iconPosition === 'right' && ( - {icon} + {icon && iconPosition === 'left' && ( + {icon} )} + {children} + {icon && iconPosition === 'right' && {icon}} ); }; From 857a9f136383a39b04e160a6087a492f6a8e5408 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 6 Apr 2020 12:43:57 -0400 Subject: [PATCH 2/4] feat(Button): update snapshots --- .../__snapshots__/Alert.test.tsx.snap | 60 +++++-------------- .../__snapshots__/Button.test.tsx.snap | 16 ++--- .../__snapshots__/DataToolbar.test.tsx.snap | 16 ++--- .../__snapshots__/Wizard.test.tsx.snap | 8 +-- 4 files changed, 26 insertions(+), 74 deletions(-) diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap index 0e523c3f9d1..d137b7becd9 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap @@ -245,9 +245,7 @@ exports[`Alert - danger Action Link 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -353,9 +351,7 @@ exports[`Alert - danger Action and Title 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -462,9 +458,7 @@ exports[`Alert - danger Custom aria label 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -1030,9 +1024,7 @@ exports[`Alert - default Action Link 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -1138,9 +1130,7 @@ exports[`Alert - default Action and Title 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -1247,9 +1237,7 @@ exports[`Alert - default Custom aria label 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -1815,9 +1803,7 @@ exports[`Alert - info Action Link 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -1923,9 +1909,7 @@ exports[`Alert - info Action and Title 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -2032,9 +2016,7 @@ exports[`Alert - info Custom aria label 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -2600,9 +2582,7 @@ exports[`Alert - success Action Link 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -2708,9 +2688,7 @@ exports[`Alert - success Action and Title 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -2817,9 +2795,7 @@ exports[`Alert - success Custom aria label 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -3385,9 +3361,7 @@ exports[`Alert - warning Action Link 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -3493,9 +3467,7 @@ exports[`Alert - warning Action and Title 1`] = ` tabIndex={null} type="button" > - - test - + test @@ -3602,9 +3574,7 @@ exports[`Alert - warning Custom aria label 1`] = ` tabIndex={null} type="button" > - - test - + test diff --git a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index 9f3942c2f85..60c75482c38 100644 --- a/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react-core/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -161,9 +161,7 @@ exports[`isInline 1`] = ` tabIndex={null} type="button" > - - Hovered Button - + Hovered Button `; @@ -184,10 +182,8 @@ exports[`link button 1`] = ` tabIndex={null} type="button" > - - link - Button - + link + Button `; @@ -209,7 +205,7 @@ exports[`link with icon 1`] = ` type="button" > - - Block Button - + Block Button `; diff --git a/packages/react-core/src/components/DataToolbar/__tests__/__snapshots__/DataToolbar.test.tsx.snap b/packages/react-core/src/components/DataToolbar/__tests__/__snapshots__/DataToolbar.test.tsx.snap index 4b203f80115..4c49d3a998d 100644 --- a/packages/react-core/src/components/DataToolbar/__tests__/__snapshots__/DataToolbar.test.tsx.snap +++ b/packages/react-core/src/components/DataToolbar/__tests__/__snapshots__/DataToolbar.test.tsx.snap @@ -1264,9 +1264,7 @@ exports[`data toolbar DataToolbarFilter 1`] = ` data-ouia-safe="true" type="button" > - - Clear all filters - + Clear all filters @@ -1339,9 +1337,7 @@ exports[`data toolbar DataToolbarFilter 1`] = ` tabIndex={null} type="button" > - - Clear all filters - + Clear all filters @@ -1523,9 +1519,7 @@ exports[`data toolbar DataToolbarFilter 1`] = ` data-ouia-safe="true" type="button" > - - Clear all filters - + Clear all filters , @@ -1575,9 +1569,7 @@ exports[`data toolbar DataToolbarFilter 1`] = ` tabIndex={null} type="button" > - - Clear all filters - + Clear all filters diff --git a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap index 04c62d16325..d25e971c7f6 100644 --- a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +++ b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap @@ -347,9 +347,7 @@ exports[`Wizard should match snapshot 1`] = ` data-ouia-safe="true" type="button" > - - Cancel - + Cancel @@ -568,9 +566,7 @@ exports[`Wizard should match snapshot 1`] = ` data-ouia-safe="true" type="button" > - - Cancel - + Cancel From 31a02916dddfaf10fb39386f445f58409f98e1f0 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 6 Apr 2020 13:16:05 -0400 Subject: [PATCH 3/4] feat(Table): update snapshots from button changes --- .../Table/__snapshots__/Table.test.tsx.snap | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap index 6f8202bcb10..e5e46383f8c 100644 --- a/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/components/Table/__snapshots__/Table.test.tsx.snap @@ -37886,9 +37886,7 @@ exports[`Compound Expandable table 1`] = ` tabIndex={null} type="button" > - - 1 - + 1 @@ -37924,9 +37922,7 @@ exports[`Compound Expandable table 1`] = ` tabIndex={null} type="button" > - - 2 - + 2 @@ -38377,9 +38373,7 @@ exports[`Compound Expandable table 1`] = ` tabIndex={null} type="button" > - - 3 - + 3 @@ -38415,9 +38409,7 @@ exports[`Compound Expandable table 1`] = ` tabIndex={null} type="button" > - - 4 - + 4 From 23035bc68652165512b49fb20c4eb76e31e4999c Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 13 Apr 2020 12:09:24 -0400 Subject: [PATCH 4/4] feat(Button): prevent icon prop with plain variant plain variant expects icon as child without padding --- packages/react-core/src/components/Button/Button.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 32d542ea012..15219bbf8de 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -46,7 +46,7 @@ export interface ButtonProps extends React.HTMLProps { 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; @@ -94,11 +94,13 @@ export const Button: React.FunctionComponent = ({ type={isButtonElement ? type : null} {...getOUIAProps('Button', ouiaId)} > - {icon && iconPosition === 'left' && ( + {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && ( {icon} )} {children} - {icon && iconPosition === 'right' && {icon}} + {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && ( + {icon} + )} ); };