@patternfly/react-core 4.221.7 → 4.221.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.7",
+  "version": "4.221.10",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.7",
-    "@patternfly/react-styles": "^4.71.7",
-    "@patternfly/react-tokens": "^4.73.7",
+    "@patternfly/react-icons": "^4.72.10",
+    "@patternfly/react-styles": "^4.71.10",
+    "@patternfly/react-tokens": "^4.73.10",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9f9b98091cf0361abdc23cd00cc5652d4421bdb4"
+  "gitHead": "4c074ff2399b6dd544baff5536a61b73cbcb1fb0"
 }

package/src/components/EmptyState/examples/EmptyState.md

@@ -9,222 +9,36 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateBasic.tsx"
 ```
 
 ### Extra small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
 
-<EmptyState variant={EmptyStateVariant.xs}>
-  <Title headingLevel="h4" size="md">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateExtraSmall.tsx"
 ```
 
 ### Small
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.small}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateSmall.tsx"
 ```
 
 ### Large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.large}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h4" size="lg">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateLarge.tsx"
 ```
 
 ### Extra large
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateSecondaryActions
-} from '@patternfly/react-core';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
 
-<EmptyState variant={EmptyStateVariant.xl}>
-  <EmptyStateIcon icon={CubesIcon} />
-  <Title headingLevel="h5" size="4xl">
-    Empty state
-  </Title>
-  <EmptyStateBody>
-    This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
-    enough to meet a variety of needs.
-  </EmptyStateBody>
-  <Button variant="primary">Primary action</Button>
-  <EmptyStateSecondaryActions>
-    <Button variant="link">Multiple</Button>
-    <Button variant="link">Action Buttons</Button>
-    <Button variant="link">Can</Button>
-    <Button variant="link">Go here</Button>
-    <Button variant="link">In the secondary</Button>
-    <Button variant="link">Action area</Button>
-  </EmptyStateSecondaryActions>
-</EmptyState>
+```ts file="EmptyStateExtraLarge.tsx"
 ```
 
 ### Spinner
-```js
-import React from 'react';
-import {
-  Title,
-  EmptyState,
-  EmptyStateIcon,
-  Spinner
-} from '@patternfly/react-core';
 
-
-EmptyStateSpinner = () => {
-  return (
-    <EmptyState>
-      <EmptyStateIcon variant="container" component={Spinner} />
-      <Title size="lg" headingLevel="h4">
-        Loading
-      </Title>
-    </EmptyState>
-  );
-}
+```ts file="EmptyStateSpinner.tsx"
 ```
 
 ### No match found
-```js
-import React from 'react';
-import {
-  Title,
-  Button,
-  EmptyState,
-  EmptyStatePrimary,
-  EmptyStateIcon,
-  EmptyStateBody
-} from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-
 
-<EmptyState>
-  <EmptyStateIcon icon={SearchIcon} />
-  <Title size="lg" headingLevel="h4">
-    No results found
-  </Title>
-  <EmptyStateBody>
-    No results match the filter criteria. Clear all filters and try again.
-  </EmptyStateBody>
-  <EmptyStatePrimary>
-    <Button variant="link">Clear all filters</Button>
-  </EmptyStatePrimary>
-</EmptyState>
+```ts file="EmptyStateNoMatchFound.tsx"
 ```

package/src/components/EmptyState/examples/EmptyStateBasic.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateBasic: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);

package/src/components/EmptyState/examples/EmptyStateExtraLarge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateExtraLarge: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xl}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h5" size="4xl">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);

package/src/components/EmptyState/examples/EmptyStateExtraSmall.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+
+export const EmptyStateExtraSmall: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.xs}>
+    <Title headingLevel="h4" size="md">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);

package/src/components/EmptyState/examples/EmptyStateLarge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateLarge: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.large}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);

package/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Title, Button, EmptyState, EmptyStatePrimary, EmptyStateIcon, EmptyStateBody } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+
+export const EmptyStateNoMatchFound: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon icon={SearchIcon} />
+    <Title size="lg" headingLevel="h4">
+      No results found
+    </Title>
+    <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
+    <EmptyStatePrimary>
+      <Button variant="link">Clear all filters</Button>
+    </EmptyStatePrimary>
+  </EmptyState>
+);

package/src/components/EmptyState/examples/EmptyStateSmall.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+  Title,
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateSecondaryActions
+} from '@patternfly/react-core';
+import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
+
+export const EmptyStateSmall: React.FunctionComponent = () => (
+  <EmptyState variant={EmptyStateVariant.small}>
+    <EmptyStateIcon icon={CubesIcon} />
+    <Title headingLevel="h4" size="lg">
+      Empty state
+    </Title>
+    <EmptyStateBody>
+      This represents an the empty state pattern in Patternfly 4. Hopefully it's simple enough to use but flexible
+      enough to meet a variety of needs.
+    </EmptyStateBody>
+    <Button variant="primary">Primary action</Button>
+    <EmptyStateSecondaryActions>
+      <Button variant="link">Multiple</Button>
+      <Button variant="link">Action Buttons</Button>
+      <Button variant="link">Can</Button>
+      <Button variant="link">Go here</Button>
+      <Button variant="link">In the secondary</Button>
+      <Button variant="link">Action area</Button>
+    </EmptyStateSecondaryActions>
+  </EmptyState>
+);

package/src/components/EmptyState/examples/EmptyStateSpinner.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Title, EmptyState, EmptyStateIcon, Spinner } from '@patternfly/react-core';
+
+export const EmptyStateSpinner: React.FunctionComponent = () => (
+  <EmptyState>
+    <EmptyStateIcon variant="container" component={Spinner} />
+    <Title size="lg" headingLevel="h4">
+      Loading
+    </Title>
+  </EmptyState>
+);

package/src/components/Label/Label.tsx

@@ -14,7 +14,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey' | 'gold';
   /** Variant of the label. */
   variant?: 'outline' | 'filled';
   /** Flag indicating the label is compact. */
@@ -78,6 +78,7 @@ const colorStyles = {
   orange: styles.modifiers.orange,
   purple: styles.modifiers.purple,
   red: styles.modifiers.red,
+  gold: styles.modifiers.gold,
   grey: ''
 };
 

package/src/components/Label/examples/Label.md

@@ -156,6 +156,27 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
   <Label color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
     Cyan label with icon that overflows
   </Label>
+  <br />
+  <br />
+  <Label color="gold">Gold</Label>{' '}
+  <Label color="gold" icon={<InfoCircleIcon />}>
+    Gold icon
+  </Label>{' '}
+  <Label color="gold" onClose={Function.prototype}>
+    Gold removable
+  </Label>{' '}
+  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
+    Gold icon removable
+  </Label>{' '}
+  <Label color="gold" href="#filled">
+    Gold link
+  </Label>{' '}
+  <Label color="gold" href="#filled" onClose={Function.prototype}>
+    Gold link removable
+  </Label>
+  <Label color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
+    Gold label with icon that overflows
+  </Label>
 </React.Fragment>;
 ```
 
@@ -324,6 +345,29 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
   <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
     Cyan label with icon that overflows
   </Label>
+  <br />
+  <br />
+  <Label variant="outline" color="gold">
+    Gold
+  </Label>{' '}
+  <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+    Gold icon
+  </Label>{' '}
+  <Label variant="outline" color="gold" onClose={Function.prototype}>
+    Gold removable
+  </Label>{' '}
+  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype}>
+    Gold icon removable
+  </Label>{' '}
+  <Label variant="outline" color="gold" href="#outline">
+    Gold link
+  </Label>{' '}
+  <Label variant="outline" color="gold" href="#outline" onClose={Function.prototype}>
+    Gold link removable
+  </Label>
+  <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={Function.prototype} isTruncated>
+    Gold label with icon that overflows
+  </Label>
 </React.Fragment>;
 ```
 

package/src/components/Select/Select.tsx

@@ -294,6 +294,7 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       this.props.variant !== 'typeaheadmulti'
     ) {
       this.refCollection[this.state.viewMoreNextIndex][0].focus();
+      this.setState({ viewMoreNextIndex: -1 });
     }
 
     const hasUpdatedChildren =

package/src/components/Tabs/examples/Tabs.md

@@ -640,8 +640,8 @@ class InsetTabs extends React.Component {
           inset={{
             default: 'insetNone',
             md: 'insetSm',
-            xl: 'inset2xl',
-            '2xl': 'insetLg'
+            xl: 'insetLg',
+            '2xl': 'inset2xl'
           }}
           isBox={isBox}
           aria-label="Tabs in the inset example"