@patternfly/react-core 4.199.0 → 4.199.3

package/src/components/Chip/examples/Chip.md

@@ -10,77 +10,5 @@ ouia: true
 
 ### Default
 
-```js
-import React from 'react';
-import { Badge, Chip } from '@patternfly/react-core';
-
-class SingleChip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chip: {
-        name: 'Chip 1'
-      },
-      longchip: {
-        name: 'Really long chip that goes on and on'
-      },
-      badgechip: {
-        name: 'Chip',
-        isRead: true,
-        count: 7
-      },
-      readonlychip: {
-        name: 'Read-only chip'
-      },
-      overflowchip: {
-        name: 'Overflow chip'
-      }
-    };
-    this.deleteItem = id => {
-      this.setState({ [id]: null });
-    };
-  }
-
-  render() {
-    const { chip, longchip, badgechip, readonlychip, overflowchip } = this.state;
-    return (
-      <React.Fragment>
-        {chip && (
-          <React.Fragment>
-            <Chip key="chip1" onClick={() => this.deleteItem('chip')}>
-              {chip.name}
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        {longchip && (
-          <React.Fragment>
-            <Chip key="chip2" onClick={() => this.deleteItem('longchip')}>
-              {longchip.name}
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        {badgechip && (
-          <React.Fragment>
-            <Chip key="chip3" onClick={() => this.deleteItem('badgechip')}>
-              {badgechip.name}
-              <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
-            </Chip>
-            <br /> <br />
-          </React.Fragment>
-        )}
-        <Chip key="chip4" onClick={() => this.deleteItem('readonlychip')} isReadOnly>
-          {readonlychip.name}
-        </Chip>
-        <br /> <br />
-        {overflowchip && (
-          <Chip key="chip5" component="button" onClick={() => this.deleteItem('overflowchip')} isOverflowChip>
-            {overflowchip.name}
-          </Chip>
-        )}
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipDefault.tsx'
 ```

package/src/components/Chip/examples/ChipDefault.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { Badge, Chip } from '@patternfly/react-core';
+
+export const ChipDefault: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState({
+    chip: {
+      name: 'Chip 1'
+    },
+    longchip: {
+      name: 'Really long chip that goes on and on'
+    },
+    badgechip: {
+      name: 'Chip',
+      isRead: true,
+      count: 7
+    },
+    readonlychip: {
+      name: 'Read-only chip'
+    },
+    overflowchip: {
+      name: 'Overflow chip'
+    }
+  });
+
+  const deleteItem = (id: string) => {
+    setChips({ ...chips, [id]: null });
+  };
+
+  const { chip, longchip, badgechip, readonlychip, overflowchip } = chips;
+  return (
+    <React.Fragment>
+      {chip && (
+        <React.Fragment>
+          <Chip key="chip1" onClick={() => deleteItem('chip')}>
+            {chip.name}
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      {longchip && (
+        <React.Fragment>
+          <Chip key="chip2" onClick={() => deleteItem('longchip')}>
+            {longchip.name}
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      {badgechip && (
+        <React.Fragment>
+          <Chip key="chip3" onClick={() => deleteItem('badgechip')}>
+            {badgechip.name}
+            <Badge isRead={badgechip.isRead}>{badgechip.count}</Badge>
+          </Chip>
+          <br /> <br />
+        </React.Fragment>
+      )}
+      <Chip key="chip4" onClick={() => deleteItem('readonlychip')} isReadOnly>
+        {readonlychip.name}
+      </Chip>
+      <br /> <br />
+      {overflowchip && (
+        <Chip key="chip5" component="button" onClick={() => deleteItem('overflowchip')} isOverflowChip>
+          {overflowchip.name}
+        </Chip>
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/ChipGroup/examples/ChipGroup.md

@@ -8,145 +8,17 @@ ouia: true
 
 ## Examples
 
-### Simple inline chip group
+### Simple inline
 
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleInlineChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Really long chip that goes on and on', 'Chip three', 'Chip four', 'Chip five']
-    };
-
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
-
-    return (
-      <ChipGroup>
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupInline.tsx'
 ```
 
-### Chip groups with categories
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class SimpleCategoryChipGroup extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three', 'Chip four', 'Chip five']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-  }
-
-  render() {
-    const { chips } = this.state;
+### With categories
 
-    return (
-      <ChipGroup categoryName="Category one">
-        {chips.map(currentChip => (
-          <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-            {currentChip}
-          </Chip>
-        ))}
-      </ChipGroup>
-    );
-  }
-}
+```ts file='./ChipGroupWithCategories.tsx'
 ```
 
-### Chip groups with categories removable
-
-```js
-import React from 'react';
-import { Chip, ChipGroup } from '@patternfly/react-core';
-
-class CategoryChipGroupRemovable extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      chips: ['Chip one', 'Chip two', 'Chip three'],
-      chips2: ['Chip one', 'Chip two', 'Chip three', 'Chip 4']
-    };
-    this.deleteItem = id => {
-      const copyOfChips = this.state.chips;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips: copyOfChips });
-      }
-    };
-
-    this.deleteItem2 = id => {
-      const copyOfChips = this.state.chips2;
-      const index = copyOfChips.indexOf(id);
-      if (index !== -1) {
-        copyOfChips.splice(index, 1);
-        this.setState({ chips2: copyOfChips });
-      }
-    };
-
-    this.deleteCategory = () => {
-      this.setState({ chips: [] });
-    };
-
-    this.deleteCategory2 = () => {
-      this.setState({ chips2: [] });
-    };
-  }
-
-  render() {
-    const { chips, chips2 } = this.state;
+### With removable categories
 
-    return (
-      <React.Fragment>
-        <ChipGroup categoryName="Category one" isClosable onClick={this.deleteCategory}>
-          {chips.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-        <br /> <br />
-        <ChipGroup categoryName="Category two has a very long name" isClosable onClick={this.deleteCategory2}>
-          {chips2.map(currentChip => (
-            <Chip key={currentChip} onClick={() => this.deleteItem2(currentChip)}>
-              {currentChip}
-            </Chip>
-          ))}
-        </ChipGroup>
-      </React.Fragment>
-    );
-  }
-}
+```ts file='./ChipGroupRemovableCategories.tsx'
 ```

package/src/components/ChipGroup/examples/ChipGroupInline.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupInline: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup>
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};

package/src/components/ChipGroup/examples/ChipGroupRemovableCategories.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupRemovableCategories: React.FunctionComponent = () => {
+  const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']);
+  const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']);
+
+  const deleteItem = (id: string, group: string[]) => {
+    const copyOfChips = [...group];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+
+    if (group === chipGroup1) {
+      setChipGroup1(filteredCopy);
+    } else {
+      setChipGroup2(filteredCopy);
+    }
+  };
+
+  const deleteCategory = (group: string[]) => {
+    if (group === chipGroup1) {
+      setChipGroup1([]);
+    } else {
+      setChipGroup2([]);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <ChipGroup categoryName="Category one" isClosable onClick={() => deleteCategory(chipGroup1)}>
+        {chipGroup1.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup1)}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+      <br /> <br />
+      <ChipGroup categoryName="Category two has a very long name" isClosable onClick={() => deleteCategory(chipGroup2)}>
+        {chipGroup2.map(currentChip => (
+          <Chip key={currentChip} onClick={() => deleteItem(currentChip, chipGroup2)}>
+            {currentChip}
+          </Chip>
+        ))}
+      </ChipGroup>
+    </React.Fragment>
+  );
+};

package/src/components/ChipGroup/examples/ChipGroupWithCategories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const ChipGroupWithCategories: React.FunctionComponent = () => {
+  const [chips, setChips] = React.useState([
+    'Chip one',
+    'Really long chip that goes on and on',
+    'Chip three',
+    'Chip four',
+    'Chip five'
+  ]);
+
+  const deleteItem = (id: string) => {
+    const copyOfChips = [...chips];
+    const filteredCopy = copyOfChips.filter(chip => chip !== id);
+    setChips(filteredCopy);
+  };
+
+  return (
+    <ChipGroup categoryName="Category one">
+      {chips.map(currentChip => (
+        <Chip key={currentChip} onClick={() => deleteItem(currentChip)}>
+          {currentChip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};

package/src/layouts/Flex/examples/Flex.md

@@ -81,7 +81,7 @@ import { Flex, FlexItem } from '@patternfly/react-core';
 import React from 'react';
 import { Flex, FlexItem } from '@patternfly/react-core';
 
-<Flex spaceItems={{ modifier: 'spaceItemsXl' }}>
+<Flex spaceItems={{ default: 'spaceItemsXl' }}>
   <FlexItem>Flex item</FlexItem>
   <FlexItem>Flex item</FlexItem>
   <FlexItem>Flex item</FlexItem>