From cc1b1657dd76645f9027fc1461afe81ec804e6d5 Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 12 Sep 2023 12:35:58 -0500 Subject: [PATCH 1/5] fix(button): added logical start/end vals to iconposition --- .../react-core/src/components/BackToTop/BackToTop.tsx | 2 +- packages/react-core/src/components/Button/Button.tsx | 8 ++++---- .../src/components/Button/examples/ButtonVariations.tsx | 2 +- .../SearchInput/examples/SearchInputAdvanced.tsx | 2 +- packages/react-core/src/demos/CardDemos.md | 8 ++++---- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react-core/src/components/BackToTop/BackToTop.tsx b/packages/react-core/src/components/BackToTop/BackToTop.tsx index d47c2899d98..48d82742a41 100644 --- a/packages/react-core/src/components/BackToTop/BackToTop.tsx +++ b/packages/react-core/src/components/BackToTop/BackToTop.tsx @@ -82,7 +82,7 @@ const BackToTopBase: React.FunctionComponent = ({ onClick={handleClick} {...props} > - diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 5b05d137f44..c98dbdfaf4e 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -71,7 +71,7 @@ export interface ButtonProps extends Omit, 'r /** Adds button variant styles */ variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'; /** Sets position of the link icon */ - iconPosition?: 'left' | 'right'; + iconPosition?: 'left' | 'right' | 'start' | 'end'; /** Adds accessible text to the button. */ 'aria-label'?: string; /** Icon for the button. Usable by all variants except for plain. */ @@ -108,7 +108,7 @@ const ButtonBase: React.FunctionComponent = ({ isInline = false, type = ButtonType.button, variant = ButtonVariant.primary, - iconPosition = 'left', + iconPosition = 'start', 'aria-label': ariaLabel = null, icon = null, ouiaId, @@ -183,11 +183,11 @@ const ButtonBase: React.FunctionComponent = ({ )} {variant === ButtonVariant.plain && children === null && icon ? icon : null} - {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && ( + {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && ( {icon} )} {children} - {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && ( + {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && ( {icon} )} {countOptions && ( diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx index badb9e33d91..e808916fd07 100644 --- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx @@ -30,7 +30,7 @@ export const ButtonVariations: React.FunctionComponent = () => ( {' '} - {' '} diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md index 0a06722bb86..6efc898e879 100644 --- a/packages/react-core/src/demos/CardDemos.md +++ b/packages/react-core/src/demos/CardDemos.md @@ -168,7 +168,7 @@ class CardGridDemo extends React.Component { - @@ -196,7 +196,7 @@ class CardGridDemo extends React.Component { - @@ -227,7 +227,7 @@ class CardGridDemo extends React.Component { - @@ -261,7 +261,7 @@ class CardGridDemo extends React.Component { - From cd08e33ed44ae4f6b70571633e2102b6ee86ac70 Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 12 Sep 2023 12:38:09 -0500 Subject: [PATCH 2/5] chore: updated snaps --- .../BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap index fb3781425e7..144783a33c1 100644 --- a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap +++ b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap @@ -20,7 +20,7 @@ exports[`Matches the snapshot 1`] = ` isInline: undefined

- iconPosition: right + iconPosition: end

Date: Tue, 12 Sep 2023 12:45:38 -0500 Subject: [PATCH 3/5] chore: prop desc wording --- packages/react-core/src/components/Button/Button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index c98dbdfaf4e..6d81569add2 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -70,8 +70,8 @@ export interface ButtonProps extends Omit, 'r type?: 'button' | 'submit' | 'reset'; /** Adds button variant styles */ variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'; - /** Sets position of the link icon */ - iconPosition?: 'left' | 'right' | 'start' | 'end'; + /** Sets position of the icon */ + iconPosition?: 'start' | 'end' | 'left' | 'right'; /** Adds accessible text to the button. */ 'aria-label'?: string; /** Icon for the button. Usable by all variants except for plain. */ From f5580e92c785f99ef2f0ca0f92c3aa6863c6878a Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 12 Sep 2023 12:48:28 -0500 Subject: [PATCH 4/5] chore: note deprecated prop vals --- packages/react-core/src/components/Button/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 6d81569add2..53863058344 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -70,7 +70,7 @@ export interface ButtonProps extends Omit, 'r type?: 'button' | 'submit' | 'reset'; /** Adds button variant styles */ variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'link' | 'plain' | 'control'; - /** Sets position of the icon */ + /** Sets position of the icon. Note: "left" and "right" are deprecated. Use "start" and "end" instead */ iconPosition?: 'start' | 'end' | 'left' | 'right'; /** Adds accessible text to the button. */ 'aria-label'?: string; From 5536e4e756055956f803d6ed350c61b82d9fa61a Mon Sep 17 00:00:00 2001 From: mcoker Date: Tue, 12 Sep 2023 13:41:12 -0500 Subject: [PATCH 5/5] chore: fix test --- .../src/components/BackToTop/__tests__/BackToTop.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx index cd3707609b0..4eb9ac41732 100644 --- a/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx +++ b/packages/react-core/src/components/BackToTop/__tests__/BackToTop.test.tsx @@ -135,7 +135,7 @@ test('Passes correct variant to button child component', () => { test('Passes correct iconPosition to button child component', () => { render(); - expect(screen.getByText('iconPosition: right')).toBeVisible(); + expect(screen.getByText('iconPosition: end')).toBeVisible(); }); test('Passes correct icon to button child component', () => {