fix(button): added logical start/end vals to iconPosition (#9611)

* fix(button): added logical start/end vals to iconposition * chore: updated snaps * chore: prop desc wording * chore: note deprecated prop vals * chore: fix test
patternfly · Sep 12, 2023 · 50b1bc3 · 50b1bc3
1 parent f916354
commit 50b1bc3
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 14 deletions.
diff --git 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<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="right">
+      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
         {title}
       </Button>
     </div>

diff --git 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(<BackToTop />);
 
-  expect(screen.getByText('iconPosition: right')).toBeVisible();
+  expect(screen.getByText('iconPosition: end')).toBeVisible();
 });
 
 test('Passes correct icon to button child component', () => {

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
@@ -20,7 +20,7 @@ exports[`Matches the snapshot 1`] = `
       isInline: undefined
     </p>
     <p>
-      iconPosition: right
+      iconPosition: end
     </p>
     <div
       data-testid="icon"

diff --git 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<React.HTMLProps<HTMLButtonElement>, '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';
+  /** 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;
   /** Icon for the button. Usable by all variants except for plain. */
@@ -108,7 +108,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   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<ButtonProps> = ({
         </span>
       )}
       {variant === ButtonVariant.plain && children === null && icon ? icon : null}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (
         <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
       )}
       {children}
-      {variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (
+      {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
       {countOptions && (

diff --git 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 = () => (
     <Button variant="link" icon={<PlusCircleIcon />}>
       Link
     </Button>{' '}
-    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+    <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
       Link
     </Button>{' '}
     <Button variant="link" isInline>

diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx
@@ -44,7 +44,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         formAdditionalItems={
           useCustomFooter ? (
             <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
                 Link
               </Button>
             </FormGroup>

diff --git 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 {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all set up cluster steps
                 </Button>
               </Flex>
@@ -196,7 +196,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all guided tours
                 </Button>
               </Flex>
@@ -227,7 +227,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all quick starts
                 </Button>
               </Flex>
@@ -261,7 +261,7 @@ class CardGridDemo extends React.Component {
                     </ListItem>
                   </List>
                 </Flex>
-                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="right">
+                <Button href="#" component="a" variant="link" isInline icon={<ArrowRightIcon />} iconPosition="end">
                   View all learning resources
                 </Button>
               </Flex>