@patternfly/react-core 5.1.1-prerelease.7 → 5.1.1-prerelease.9

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.1.1-prerelease.8","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.1.1-prerelease.8","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.1.1-prerelease.8","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.1.1-prerelease.7",
+  "version": "5.1.1-prerelease.9",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "4be044a936d21467733468d49f87c7f61b763e9c"
+  "gitHead": "295aa26fe74665f75560a61f157c3a02122d550a"
 }

package/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>

package/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', () => {

package/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"

package/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 && (

package/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>

package/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>

package/src/components/Tile/examples/Tile.md

@@ -12,32 +12,36 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
 
-### Basic
-
+### Basic tile
+Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.
 ```ts file="./TileBasic.tsx"
 ```
 
-### With subtext
-
+### With subtext 
+Tile subtext can provide users with additional context. To add subtext, pass a short description to the `<Tile>` component. 
 ```ts file="./TileWithSubtext.tsx"
 ```
 
 ### With icon
-
+Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property.
 ```ts file="./TileWithIcon.tsx"
 ```
 
-### Stacked
-
+### With stacked icon
+You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property.
 ```ts file="./TileStacked.tsx"
 ```
 
-### Stacked with large icons
+### With large icons
+You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the  `isDisplayLarge` property. 
 
+Be aware that `isDisplayLarge` can only be used when  `isStacked` is also applied. 
 ```ts file="./TileStackedWithLargeIcons.tsx"
 ```
 
-### With extra content
+### With long subtext
+To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into `<Tile>`. 
 
+You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks.
 ```ts file="./TileWithExtraContent.tsx"
-```
+```

package/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>