@patternfly/react-core 4.222.3 → 4.222.6

package/src/components/DualListSelector/DualListSelector.tsx

@@ -134,10 +134,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
   private removeAllButtonRef = React.createRef<HTMLButtonElement>();
   static defaultProps: PickOptional<DualListSelectorProps> = {
     children: '',
-    availableOptions: [] as React.ReactNode[],
+    availableOptions: [],
     availableOptionsTitle: 'Available options',
     availableOptionsSearchAriaLabel: 'Available search input',
-    chosenOptions: [] as React.ReactNode[],
+    chosenOptions: [],
     chosenOptionsTitle: 'Chosen options',
     chosenOptionsSearchAriaLabel: 'Chosen search input',
     id: getUniqueId('dual-list-selector'),
@@ -177,11 +177,11 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
   constructor(props: DualListSelectorProps) {
     super(props);
     this.state = {
-      availableOptions: [...this.props.availableOptions],
+      availableOptions: [...this.props.availableOptions] as React.ReactNode[],
       availableOptionsSelected: [],
       availableFilteredOptions: null,
       availableTreeFilteredOptions: null,
-      chosenOptions: [...this.props.chosenOptions],
+      chosenOptions: [...this.props.chosenOptions] as React.ReactNode[],
       chosenOptionsSelected: [],
       chosenFilteredOptions: null,
       chosenTreeFilteredOptions: null,
@@ -208,8 +208,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         JSON.stringify(this.state.chosenOptions, this.replacer)
     ) {
       this.setState({
-        availableOptions: [...this.props.availableOptions],
-        chosenOptions: [...this.props.chosenOptions]
+        availableOptions: [...this.props.availableOptions] as React.ReactNode[],
+        chosenOptions: [...this.props.chosenOptions] as React.ReactNode[]
       });
     }
   }
@@ -226,7 +226,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       }
       if (isTree) {
         this.setState({
-          availableTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
+          availableTreeFilteredOptions: flattenTreeWithFolders(
+            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+          )
         });
       } else {
         this.setState({
@@ -243,7 +245,9 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       }
       if (isTree) {
         this.setState({
-          chosenTreeFilteredOptions: flattenTreeWithFolders(newFilteredOptions as DualListSelectorTreeItemData[])
+          chosenTreeFilteredOptions: flattenTreeWithFolders(
+            (newFilteredOptions as unknown) as DualListSelectorTreeItemData[]
+          )
         });
       } else {
         this.setState({
@@ -283,16 +287,20 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     this.setState(prevState => {
       const movedOptions =
         prevState.availableTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.availableOptions as DualListSelectorTreeItemData[]);
+        flattenTreeWithFolders((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const newAvailable = prevState.availableOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
+        .filter(item =>
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions)
+        ) as React.ReactNode[];
 
-      const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+      const currChosen = flattenTree((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(movedOptions);
       const newChosen = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
+        ) as React.ReactNode[];
 
       this.props.addAll && this.props.addAll(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -339,15 +347,17 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       const newAvailable = prevState.availableOptions
         .map(opt => Object.assign({}, opt))
         .filter(item =>
-          filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, prevState.availableTreeOptionsChecked)
         );
 
       // Get next chosen options from current + new nodes and remap from base
-      const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+      const currChosen = flattenTree((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
       const newChosen = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions)
+        ) as React.ReactNode[];
 
       this.props.addSelected && this.props.addSelected(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -391,16 +401,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     this.setState(prevState => {
       const movedOptions =
         prevState.chosenTreeFilteredOptions ||
-        flattenTreeWithFolders(prevState.chosenOptions as DualListSelectorTreeItemData[]);
+        flattenTreeWithFolders((prevState.chosenOptions as unknown) as DualListSelectorTreeItemData[]);
 
       const newChosen = prevState.chosenOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
-      const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
+        .filter(item => filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, movedOptions));
+      const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(movedOptions);
       const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
+        ) as React.ReactNode[];
 
       this.props.removeAll && this.props.removeAll(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -444,14 +456,18 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       // Remove selected chosen nodes from current chosen nodes
       const newChosen = prevState.chosenOptions
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked));
+        .filter(item =>
+          filterRestTreeItems((item as unknown) as DualListSelectorTreeItemData, prevState.chosenTreeOptionsChecked)
+        );
 
       // Get next chosen options from current and remap from base
-      const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
+      const currAvailable = flattenTree((prevState.availableOptions as unknown) as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
       const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
+        .filter(item =>
+          filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions)
+        ) as React.ReactNode[];
 
       this.props.removeSelected && this.props.removeSelected(newAvailable, newChosen);
       this.props.onListChange && this.props.onListChange(newAvailable, newChosen);
@@ -542,7 +558,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         panelOptions = chosenOptions
           .map(opt => Object.assign({}, opt))
           .filter(item =>
-            filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
+            filterTreeItemsWithoutFolders((item as unknown) as DualListSelectorTreeItemData, chosenTreeFilteredOptions)
           );
       } else {
         panelOptions = chosenOptions;
@@ -552,7 +568,10 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         panelOptions = availableOptions
           .map(opt => Object.assign({}, opt))
           .filter(item =>
-            filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, availableTreeFilteredOptions)
+            filterTreeItemsWithoutFolders(
+              (item as unknown) as DualListSelectorTreeItemData,
+              availableTreeFilteredOptions
+            )
           );
       } else {
         panelOptions = availableOptions;
@@ -560,8 +579,8 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     }
     const checkedOptionTree = panelOptions
       .map(opt => Object.assign({}, opt))
-      .filter(item => filterTreeItems(item as DualListSelectorTreeItemData, [itemData.id]));
-    const flatTree = flattenTreeWithFolders(checkedOptionTree as DualListSelectorTreeItemData[]);
+      .filter(item => filterTreeItems((item as unknown) as DualListSelectorTreeItemData, [itemData.id]));
+    const flatTree = flattenTreeWithFolders((checkedOptionTree as unknown) as DualListSelectorTreeItemData[]);
 
     const prevChecked = isChosen ? this.state.chosenTreeOptionsChecked : this.state.availableTreeOptionsChecked;
     let updatedChecked = [] as string[];
@@ -638,23 +657,24 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       availableOptionsStatus ||
       (isTree
         ? `${
-            filterFolders(availableOptions as DualListSelectorTreeItemData[], availableTreeOptionsChecked).length
-          } of ${flattenTree(availableOptions as DualListSelectorTreeItemData[]).length} items selected`
+            filterFolders((availableOptions as unknown) as DualListSelectorTreeItemData[], availableTreeOptionsChecked)
+              .length
+          } of ${flattenTree((availableOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
         : `${availableOptionsSelected.length} of ${availableOptions.length} items selected`);
     const chosenOptionsStatusToDisplay =
       chosenOptionsStatus ||
       (isTree
-        ? `${filterFolders(chosenOptions as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length} of ${
-            flattenTree(chosenOptions as DualListSelectorTreeItemData[]).length
-          } items selected`
+        ? `${
+            filterFolders((chosenOptions as unknown) as DualListSelectorTreeItemData[], chosenTreeOptionsChecked).length
+          } of ${flattenTree((chosenOptions as unknown) as DualListSelectorTreeItemData[]).length} items selected`
         : `${chosenOptionsSelected.length} of ${chosenOptions.length} items selected`);
 
-    const available = isTree
-      ? availableOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, false))
-      : availableOptions;
-    const chosen = isTree
-      ? chosenOptions.map(item => this.mapChecked(item as DualListSelectorTreeItemData, true))
-      : chosenOptions;
+    const available = (isTree
+      ? availableOptions.map(item => this.mapChecked((item as unknown) as DualListSelectorTreeItemData, false))
+      : availableOptions) as React.ReactNode[];
+    const chosen = (isTree
+      ? chosenOptions.map(item => this.mapChecked((item as unknown) as DualListSelectorTreeItemData, true))
+      : chosenOptions) as React.ReactNode[];
 
     return (
       <DualListSelectorContext.Provider value={{ isTree }}>

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -70,7 +70,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   onOptionSelect,
   onOptionCheck,
   title = '',
-  options = [] as React.ReactNode[],
+  options = [],
   selectedOptions = [],
   isSearchable = false,
   searchInputAriaLabel = '',
@@ -87,11 +87,11 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   // only called when search input is dynamically built
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
-    let filtered;
+    let filtered: React.ReactNode[];
     if (isTree) {
-      filtered = (options as DualListSelectorTreeItemData[])
+      filtered = options
         .map(opt => Object.assign({}, opt))
-        .filter(item => filterInput(item as DualListSelectorTreeItemData, newValue));
+        .filter(item => filterInput((item as unknown) as DualListSelectorTreeItemData, newValue));
     } else {
       filtered = options.filter(option => {
         if (displayOption(option)) {
@@ -110,7 +110,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   // only called when options are passed via options prop and isTree === true
   const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => {
     if (filterOption) {
-      return filterOption(item, input);
+      return filterOption((item as unknown) as React.ReactNode, input);
     } else {
       if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') {
         return true;
@@ -200,10 +200,12 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
                 <DualListSelectorTree
                   data={
                     isSearchable
-                      ? (options as DualListSelectorTreeItemData[])
+                      ? ((options
                           .map(opt => Object.assign({}, opt))
-                          .filter(item => filterInput(item as DualListSelectorTreeItemData, input))
-                      : (options as DualListSelectorTreeItemData[])
+                          .filter(item =>
+                            filterInput((item as unknown) as DualListSelectorTreeItemData, input)
+                          ) as unknown) as DualListSelectorTreeItemData[])
+                      : ((options as unknown) as DualListSelectorTreeItemData[])
                   }
                   onOptionCheck={onOptionCheck}
                   id={`${id}-tree`}

package/src/components/JumpLinks/examples/JumpLinks.md

@@ -9,89 +9,26 @@ propComponents: ['JumpLinks', 'JumpLinksItem']
 These examples are static because they have no element to scroll spy on that makes sense. Check out the [React demos](./react-demos) to see scroll spying in action!
 
 ### Basic
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksBasic.tsx'
 ```
 
 ### With centered list
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isCentered>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksWithCenteredList.tsx'
 ```
 
 ### With label
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<React.Fragment>
-  <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>
-</React.Fragment>
+```ts file='./JumpLinksWithLabel.tsx'
 ```
 
 ### Vertical
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isVertical>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksVertical.tsx'
 ```
 
 ### Vertical with label
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
-
-<JumpLinks isVertical label="Jump to section">
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem isActive>Active section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksVerticalWithLabel.tsx'
 ```
 
 ### Expandable vertical with subsection
-```js
-import React from 'react';
-import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
-
-<JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem>
-    Section with active subsection
-    <JumpLinksList>
-      <JumpLinksItem isActive>Active subsection</JumpLinksItem>
-      <JumpLinksItem>Inactive subsection</JumpLinksItem>
-      <JumpLinksItem>Inactive subsection</JumpLinksItem>
-    </JumpLinksList>
-  </JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-  <JumpLinksItem>Inactive section</JumpLinksItem>
-</JumpLinks>
+```ts file='./JumpLinksExpandableVerticalWithSubsection.tsx'
 ```
 

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

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
+
+export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
+  <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem>
+      Section with active subsection
+      <JumpLinksList>
+        <JumpLinksItem isActive>Active subsection</JumpLinksItem>
+        <JumpLinksItem>Inactive subsection</JumpLinksItem>
+        <JumpLinksItem>Inactive subsection</JumpLinksItem>
+      </JumpLinksList>
+    </JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+    <JumpLinksItem>Inactive section</JumpLinksItem>
+  </JumpLinks>
+);

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

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

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>
+);