@patternfly/react-core 4.258.6 → 4.258.8

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -14,207 +14,21 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
 ## Examples
 
 ### Default with multiple selectable
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
-
-class DefaultToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        first: false,
-        second: false,
-        disableAll: false
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-    this.disableAllClick = () => {
-      this.setState(prevState => ({ disableAll: !prevState.disableAll }));
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <Button onClick={this.disableAllClick}>
-            {this.state.disableAll ? "Enable back" : "Disable all"}
-          </Button>
-        </StackItem>
-        <StackItem>
-          <ToggleGroup areAllGroupsDisabled={this.state.disableAll} aria-label="Default with multiple selectable">
-            <ToggleGroupItem text="Option 1" key={0} buttonId="first" isSelected={isSelected.first} onChange={this.handleItemClick} />
-            <ToggleGroupItem text="Option 2" key={1} buttonId="second" isSelected={isSelected.second} onChange={this.handleItemClick} />
-            <ToggleGroupItem text="Option 3" key={2} isDisabled/>
-          </ToggleGroup>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="./ToggleGroupDefaultMultiple.tsx"
 ```
 
 ### Default with single selectable
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-
-class DefaultAsRadioToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: ""
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState({ isSelected: id });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <ToggleGroup aria-label="Default with single selectable">
-        <ToggleGroupItem text="Option 1" buttonId="firstRadio" isSelected={isSelected === "firstRadio"} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 2" buttonId="secondRadio" isSelected={isSelected === "secondRadio"} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 3" buttonId="thirdRadio" isSelected={isSelected === "thirdRadio"} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupDefaultSingle.tsx"
 ```
 
 ### Icons
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
-
-class IconToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "icons-1": false,
-        "icons-2": false,
-        "icons-3": true
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-    return (
-      <ToggleGroup aria-label="Icon variant toggle group">
-        <ToggleGroupItem icon={<CopyIcon />} aria-label="copy icon button" buttonId="icons-1" isSelected={isSelected["icons-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<UndoIcon />} aria-label="undo icon button" buttonId="icons-2" isSelected={isSelected["icons-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<ShareSquareIcon />} aria-label="share square icon button" buttonId="icons-3" isSelected={isSelected["icons-3"]} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupIcon.tsx"
 ```
 
 ### Text and icons
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
-
-class TextIconToggleGroupExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "text-icons-1": false,
-        "text-icons-2": false,
-        "text-icons-3": true
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-    return (
-      <ToggleGroup aria-label="Icon variant toggle group">
-        <ToggleGroupItem icon={<CopyIcon />} text="Copy" aria-label="copy icon button" buttonId="text-icons-1" isSelected={isSelected["text-icons-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<UndoIcon />} text="Undo" aria-label="undo icon button" buttonId="text-icons-2" isSelected={isSelected["text-icons-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem icon={<ShareSquareIcon />} text="Share" aria-label="share square icon button" buttonId="text-icons-3" isSelected={isSelected["text-icons-3"]} onChange={this.handleItemClick} />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupTextIcon.tsx"
 ```
 
 ### Compact variant
-```js
-import React from 'react';
-import { ToggleGroup, ToggleGroupItem, ToggleGroupVariant } from '@patternfly/react-core';
-
-class CompactToggleGroupExample extends React.Component {
-constructor(props) {
-    super(props);
-    this.state = {
-      isSelected: {
-        "compact-1": false,
-        "compact-2": false
-      }
-    };
-    this.handleItemClick = (isSelected, event) => {
-      const id = event.currentTarget.id;
-      this.setState(prevState => {
-        prevState.isSelected[id] = isSelected;
-        return {
-          isSelected: prevState.isSelected
-        };
-      });
-    };
-  }
-
-  render() {
-    const { isSelected } = this.state;
-
-    return (
-      <ToggleGroup isCompact aria-label="Compact variant toggle group">
-        <ToggleGroupItem text="Option 1" buttonId="compact-1" isSelected={isSelected["compact-1"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 2" buttonId="compact-2" isSelected={isSelected["compact-2"]} onChange={this.handleItemClick} />
-        <ToggleGroupItem text="Option 3" isDisabled />
-      </ToggleGroup>
-    );
-  }
-}
+```ts file="./ToggleGroupCompact.tsx"
 ```

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupCompact: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-compact-1': false,
+    'toggle-group-compact-2': false
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup isCompact aria-label="Compact variant toggle group">
+      <ToggleGroupItem
+        text="Option 1"
+        buttonId="toggle-group-compact-1"
+        isSelected={isSelected['toggle-group-compact-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 2"
+        buttonId="toggle-group-compact-2"
+        isSelected={isSelected['toggle-group-compact-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem text="Option 3" isDisabled />
+    </ToggleGroup>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
+
+export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-multiple-1': false,
+    'toggle-group-multiple-2': false
+  });
+  const [disableAll, setDisableAll] = React.useState(false);
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  const disableAllClick = () => {
+    setDisableAll(!disableAll);
+  };
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <Button onClick={disableAllClick}>{disableAll ? 'Enable back' : 'Disable all'}</Button>
+      </StackItem>
+      <StackItem>
+        <ToggleGroup areAllGroupsDisabled={disableAll} aria-label="Default with multiple selectable">
+          <ToggleGroupItem
+            text="Option 1"
+            key={0}
+            buttonId="toggle-group-multiple-1"
+            isSelected={isSelected['toggle-group-multiple-1']}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem
+            text="Option 2"
+            key={1}
+            buttonId="toggle-group-multiple-2"
+            isSelected={isSelected['toggle-group-multiple-2']}
+            onChange={handleItemClick}
+          />
+          <ToggleGroupItem text="Option 3" key={2} isDisabled />
+        </ToggleGroup>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState('');
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(id);
+  };
+  return (
+    <ToggleGroup aria-label="Default with single selectable">
+      <ToggleGroupItem
+        text="Option 1"
+        buttonId="toggle-group-single-1"
+        isSelected={isSelected === 'toggle-group-single-1'}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 2"
+        buttonId="toggle-group-single-2"
+        isSelected={isSelected === 'toggle-group-single-2'}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        text="Option 3"
+        buttonId="toggle-group-single-3"
+        isSelected={isSelected === 'toggle-group-single-3'}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+
+export const ToggleGroupIcon: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'toggle-group-icons-1': false,
+    'toggle-group-icons-2': false,
+    'toggle-group-icons-3': true
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup aria-label="Icon variant toggle group">
+      <ToggleGroupItem
+        icon={<CopyIcon />}
+        aria-label="copy"
+        buttonId="toggle-group-icons-1"
+        isSelected={isSelected['toggle-group-icons-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<UndoIcon />}
+        aria-label="undo"
+        buttonId="toggle-group-icons-2"
+        isSelected={isSelected['toggle-group-icons-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<ShareSquareIcon />}
+        aria-label="share square"
+        buttonId="toggle-group-icons-3"
+        isSelected={isSelected['toggle-group-icons-3']}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
+
+export const ToggleGroupIcon: React.FunctionComponent = () => {
+  const [isSelected, setIsSelected] = React.useState({
+    'text-icons-1': false,
+    'text-icons-2': false,
+    'text-icons-3': true
+  });
+  const handleItemClick = (isSelected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+  return (
+    <ToggleGroup aria-label="Text and icon toggle group">
+      <ToggleGroupItem
+        icon={<CopyIcon />}
+        text="Copy"
+        buttonId="toggle-group-text-icons-1"
+        isSelected={isSelected['toggle-group-text-icons-1']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<UndoIcon />}
+        text="Undo"
+        buttonId="toggle-group-text-icons-2"
+        isSelected={isSelected['toggle-group-text-icons-2']}
+        onChange={handleItemClick}
+      />
+      <ToggleGroupItem
+        icon={<ShareSquareIcon />}
+        text="Share"
+        buttonId="toggle-group-text-icons-3"
+        isSelected={isSelected['toggle-group-text-icons-3']}
+        onChange={handleItemClick}
+      />
+    </ToggleGroup>
+  );
+};

package/src/demos/Card/Card.md

@@ -426,11 +426,12 @@ class CardViewBasic extends React.Component {
                 aria-label={anySelected ? 'Deselect all' : 'Select all'}
                 isChecked={areAllSelected}
                 onClick={this.splitCheckboxSelectAll.bind(this)}
-              ></DropdownToggleCheckbox>
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
           >
-            {numSelected !== 0 && <React.Fragment>{numSelected} selected</React.Fragment>}
           </DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}

package/src/demos/PrimaryDetail.md

@@ -1369,14 +1369,12 @@ class PrimaryDetailCardView extends React.Component {
                 aria-label={anySelected ? 'Deselect all' : 'Select all'}
                 isChecked={areAllSelected}
                 onClick={this.splitCheckboxSelectAll}
-              ></DropdownToggleCheckbox>
+              >
+                {numSelected !== 0 && `${numSelected} selected`}
+              </DropdownToggleCheckbox>
             ]}
             onToggle={this.onSplitButtonToggle}
-          >
-            {numSelected !== 0 && (
-              <React.Fragment>{allSelected ? this.state.totalItemCount : numSelected} selected</React.Fragment>
-            )}
-          </DropdownToggle>
+          ></DropdownToggle>
         }
         isOpen={splitButtonDropdownIsOpen}
         dropdownItems={splitButtonDropdownItems}