@patternfly/react-core 4.222.4 → 4.222.7

package/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
+  <JumpLinks isVertical label="Jump to section">
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
+  <JumpLinks isCentered>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem isActive>Active section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

package/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
+
+export const JumpLinksWithLabel: React.FunctionComponent = () => (
+  <>
+    <JumpLinks label="Jump to section">
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem isActive>Active section</JumpLinksItem>
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+    </JumpLinks>
+    <JumpLinks isCentered label="Jump to section">
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+      <JumpLinksItem isActive>Active section</JumpLinksItem>
+      <JumpLinksItem>Inactive section</JumpLinksItem>
+    </JumpLinks>
+  </>
+);

package/src/components/LabelGroup/examples/LabelGroup.md

@@ -13,196 +13,30 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 
 ### Basic
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup>
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupBasic.tsx"
 ```
 
 ### Overflow
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup>
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="orange">
-    Label 4
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="red">
-    Label 5
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="purple">
-    Label 6
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupOverflow.tsx"
 ```
 
 ### Category
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-<LabelGroup categoryName="Group label">
-  <Label icon={<InfoCircleIcon />}>Label 1</Label>
-  <Label icon={<InfoCircleIcon />} color="blue">
-    Label 2
-  </Label>
-  <Label icon={<InfoCircleIcon />} color="green">
-    Label 3
-  </Label>
-</LabelGroup>;
+```ts file="LabelGroupCategory.tsx"
 ```
 
 ### Category removable
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-CategoryLabelGroupRemovable = () => {
-  const [labels, setLabels] = React.useState([
-    ['Label 1', 'grey'],
-    ['Label 2', 'blue'],
-    ['Label 3', 'green'],
-    ['Label 4', 'orange'],
-    ['Label 5', 'red']
-  ]);
-  const deleteCategory = () => setLabels([]);
-
-  return (
-    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
-      {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
-          {labelText}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
-};
+```ts file="LabelGroupCategoryRemovable.tsx"
 ```
 
 ### Vertical category overflow removable
 
-```js
-import React from 'react';
-import { Label, LabelGroup } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-
-VerticalCategoryLabelGroupOverflowRemovable = () => {
-  const [labels, setLabels] = React.useState([
-    ['Label 1', 'grey'],
-    ['Label 2', 'blue'],
-    ['Label 3', 'green'],
-    ['Label 4', 'orange'],
-    ['Label 5', 'red']
-  ]);
-  const deleteCategory = () => setLabels([]);
-
-  return (
-    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
-      {labels.map(([labelText, labelColor]) => (
-        <Label icon={<InfoCircleIcon />} color={labelColor} key={labelText}>
-          {labelText}
-        </Label>
-      ))}
-    </LabelGroup>
-  );
-};
+```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
 ```
 
 ### Editable labels
 
-```js isBeta
-import React from 'react';
-import { LabelGroup, Label, TextArea } from '@patternfly/react-core';
-
-class EditableLabelGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      label1: 'Editable label',
-      label2: 'Editable label 2',
-      label3: 'Editable label 3'
-    };
-    this.onEditCancel = (prevText, label) => {
-      this.setState({
-        [label]: prevText
-      });
-    };
-    this.onEditComplete = (newText, label) => {
-      this.setState({
-        [label]: newText
-      });
-    };
-  }
-
-  render() {
-    return (
-      <LabelGroup numLabels={5} isEditable>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label1')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label1')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text',
-            id: 'editable-label-1'
-          }}
-        >
-          {this.state.label1}
-        </Label>
-        <Label color="green">Static label</Label>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label2')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label2')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text 2',
-            id: 'editable-label-2'
-          }}
-        >
-          {this.state.label2}
-        </Label>
-        <Label
-          color="blue"
-          onClose={Function.prototype}
-          onEditCancel={prevText => this.onEditCancel(prevText, 'label3')}
-          onEditComplete={newText => this.onEditComplete(newText, 'label3')}
-          isEditable
-          editableProps={{
-            'aria-label': 'Editable text 3',
-            id: 'editable-label-3'
-          }}
-        >
-          {this.state.label3}
-        </Label>
-      </LabelGroup>
-    );
-  }
-}
+```ts file="LabelGroupEditableLabels.tsx" isBeta
 ```

package/src/components/LabelGroup/examples/LabelGroupBasic.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupBasic: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);

package/src/components/LabelGroup/examples/LabelGroupCategory.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupCategory: React.FunctionComponent = () => (
+  <LabelGroup categoryName="Group label">
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+  </LabelGroup>
+);

package/src/components/LabelGroup/examples/LabelGroupCategoryRemovable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

package/src/components/LabelGroup/examples/LabelGroupEditableLabels.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { LabelGroup, Label } from '@patternfly/react-core';
+
+export const LabelGroupEditableLabels: React.FunctionComponent = () => {
+  const [label1, setLabel1] = React.useState('Editable label');
+  const [label2, setLabel2] = React.useState('Editable label 2');
+  const [label3, setLabel3] = React.useState('Editable label 3');
+
+  return (
+    <LabelGroup numLabels={5} isEditable>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel1(prevText)}
+        onEditComplete={newText => setLabel1(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text',
+          id: 'editable-label-1'
+        }}
+      >
+        {label1}
+      </Label>
+      <Label color="green">Static label</Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel2(prevText)}
+        onEditComplete={newText => setLabel2(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 2',
+          id: 'editable-label-2'
+        }}
+      >
+        {label2}
+      </Label>
+      <Label
+        color="blue"
+        onClose={() => Function.prototype}
+        onEditCancel={prevText => setLabel3(prevText)}
+        onEditComplete={newText => setLabel3(newText)}
+        isEditable
+        editableProps={{
+          'aria-label': 'Editable text 3',
+          id: 'editable-label-3'
+        }}
+      >
+        {label3}
+      </Label>
+    </LabelGroup>
+  );
+};

package/src/components/LabelGroup/examples/LabelGroupOverflow.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupOverflow: React.FunctionComponent = () => (
+  <LabelGroup>
+    <Label icon={<InfoCircleIcon />}>Label 1</Label>
+    <Label icon={<InfoCircleIcon />} color="blue">
+      Label 2
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="green">
+      Label 3
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="orange">
+      Label 4
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="red">
+      Label 5
+    </Label>
+    <Label icon={<InfoCircleIcon />} color="purple">
+      Label 6
+    </Label>
+  </LabelGroup>
+);

package/src/components/LabelGroup/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {
+  const [labels, setLabels] = React.useState([
+    ['Label 1', 'grey'],
+    ['Label 2', 'blue'],
+    ['Label 3', 'green'],
+    ['Label 4', 'orange'],
+    ['Label 5', 'red']
+  ]);
+  const deleteCategory = () => setLabels([]);
+
+  return (
+    <LabelGroup categoryName="Group label with a very long name" isVertical isClosable onClick={deleteCategory}>
+      {labels.map(([labelText, labelColor]) => (
+        <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+          {labelText}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+};

package/src/components/List/examples/List.md

@@ -5,97 +5,35 @@ cssPrefix: pf-c-list
 propComponents: ['List', 'ListItem']
 ---
 
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListBasic.tsx"
 ```
 
 ### Inline
-```js
-import React from 'react';
-import { List, ListItem, ListVariant } from '@patternfly/react-core';
-
-<List variant={ListVariant.inline}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListInline.tsx"
 ```
 
 ### Ordered
-```js
-import React from 'react';
-import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
-
-<List component={ListComponent.ol} type={OrderType.number}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListOrdered.tsx"
 ```
 
 ### Plain
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListPlain.tsx"
 ```
 
 ### With horizontal rules
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain isBordered>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListHorizontalRules.tsx"
 ```
 
 ### With icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain>
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListIcons.tsx"
 ```
 
 ### With large icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain iconSize="large">
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListLargeIcons.tsx"
 ```

package/src/components/List/examples/ListBasic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListBasic: React.FunctionComponent = () => (
+  <List>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListHorizontalRules.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListHorizontalRules: React.FunctionComponent = () => (
+  <List isPlain isBordered>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListIcons.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListIcons: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListInline.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListVariant } from '@patternfly/react-core';
+
+export const ListInline: React.FunctionComponent = () => (
+  <List variant={ListVariant.inline}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListLargeIcons.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListLargeIcons: React.FunctionComponent = () => (
+  <List isPlain iconSize="large">
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListOrdered.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
+
+export const ListOrdered: React.FunctionComponent = () => (
+  <List component={ListComponent.ol} type={OrderType.number}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/List/examples/ListPlain.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListPlain: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);

package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItem.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
 <DocumentFragment>
   <li
     id="''"
-    role="menuitem"
+    role="none"
   >
     <button
       aria-disabled="true"
@@ -12,6 +12,7 @@ exports[`OptionsMenuItem should match snapshot 1`] = `
       data-ouia-component-id="OUIA-Generated-DropdownItem-1"
       data-ouia-component-type="PF4/DropdownItem"
       data-ouia-safe="true"
+      role="menuitem"
       tabindex="-1"
       type="button"
     >