@patternfly/react-core 4.258.7 → 4.258.8

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.258.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.258.7...@patternfly/react-core@4.258.8) (2022-11-07)
+
+
+### Bug Fixes
+
+* **bulk-select:** fixed toggle spacing ([#8326](https://github.com/patternfly/patternfly-react/issues/8326)) ([fe40f19](https://github.com/patternfly/patternfly-react/commit/fe40f19058a383cfc12e3f7a07d07af8dc579d04))
+
+
+
+
+
 ## [4.258.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.258.6...@patternfly/react-core@4.258.7) (2022-11-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.7",
+  "version": "4.258.8",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "69c78cfc668577eb1b005710b0c77522cbabe9c6"
+  "gitHead": "caf942ac339aec701ec15dfc6cb48d4859b7c3e4"
 }

package/src/components/TextArea/examples/TextArea.md

@@ -9,300 +9,52 @@ propComponents: ['TextArea']
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class SimpleTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return <TextArea value={value} onChange={this.handleTextAreaChange} aria-label="text area example" />;
-  }
-}
+```ts file="./TextAreaBasic.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleInvalidTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleInvalidTextAreaChange}
-        isRequired
-        validated={'error'}
-        aria-label="invalid text area example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaInvalid.tsx"
 ```
 
 ### Validated
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must have something to say',
-      validated: 'default',
-      helperText: 'Share your thoughts.'
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState(
-        {
-          value,
-          validated: 'default',
-          helperText: 'Validating...'
-        },
-        this.simulateNetworkCall(() => {
-          if (value && value.length > 0) {
-            if (value.length >= 10) {
-              this.setState({ validated: 'success', helperText: 'Thanks for your comments!' });
-            } else {
-              this.setState({
-                validated: 'error',
-                invalidText: 'Your being too brief, please enter at least 10 characters.'
-              });
-            }
-          } else {
-            this.setState({ validated: 'warning', helperText: 'You must have something to say' });
-          }
-        })
-      );
-    };
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Comments:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <TextArea
-            value={value}
-            onChange={this.handleTextAreaChange}
-            isRequired
-            validated={validated}
-            aria-label="invalid text area example"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./TextAreaValidated.tsx"
 ```
 
-### Vertically resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
+### Vertically resizable
 
-class VerticalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="vertical"
-        aria-label="text vertical resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaVerticallyResizable.tsx"
 ```
 
-### Horizontally resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class HorizontalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
+### Horizontally resizable
 
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="horizontal"
-        aria-label="text horizontal resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaHorizontallyResizable.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />;
+```ts file="./TextAreaUncontrolled.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="disabled text area example" isDisabled />;
+```ts file="./TextAreaDisabled.tsx"
 ```
 
 ### Read only
 
-```js
-import React from 'react';
-import { Checkbox, TextArea } from '@patternfly/react-core';
-
-const ReadOnlyTextArea = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
-
-  return (
-    <React.Fragment>
-      <div style={{ marginBottom: '12px' }}>
-        <Checkbox
-          id="isPlain"
-          key="isPlain"
-          label="Plain read only variant"
-          isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
-        />
-      </div>
-      <TextArea
-        aria-label="read only text area example"
-        value="read only text area example"
-        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
-      />
-    </React.Fragment>
-  );
-};
+```ts file="./TextAreaReadOnly.tsx"
 ```
 
 ### Auto resizing
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="auto resizing text area example" autoResize />;
+```ts file="./TextAreaAutoResizing.tsx"
 ```
 
 ### Icon sprite variants
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-IconSpriteTextArea = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={ValidatedOptions.success}
-        isIconSprite
-        type="text"
-        onChange={value => setSuccess(value)}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.warning}
-        isIconSprite
-        type="text"
-        onChange={value => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.error}
-        isIconSprite
-        type="text"
-        onChange={value => setError(value)}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};
+```ts isBeta file="./TextAreaIconSprite.tsx"
 ```

package/src/components/TextArea/examples/TextAreaAutoResizing.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaAutoResizing: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      aria-label="auto resizing text area example"
+      autoResize
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaBasic.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return <TextArea value={value} onChange={value => setValue(value)} aria-label="text area example" />;
+};

package/src/components/TextArea/examples/TextAreaDisabled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaDisabled: React.FunctionComponent = () => (
+  <TextArea aria-label="disabled text area example" isDisabled />
+);

package/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="horizontal"
+      aria-label="text area horizontal resize example"
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaIconSprite.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaIconSprite: React.FunctionComponent = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={'success'}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        value={success}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'warning'}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        value={warning}
+        aria-label="warning icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'error'}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        value={error}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};

package/src/components/TextArea/examples/TextAreaInvalid.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaInvalid: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      isRequired
+      validated={'error'}
+      aria-label="invalid text area example"
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaReadOnly.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox, TextArea } from '@patternfly/react-core';
+
+export const TextAreaReadOnly: React.FunctionComponent = () => {
+  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id="isPlain"
+          key="isPlain"
+          label="Plain read only variant"
+          isChecked={isPlainChecked}
+          onChange={checked => setIsPlainChecked(checked)}
+        />
+      </div>
+      <TextArea
+        aria-label="read only text area example"
+        value="read only text area example"
+        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/TextArea/examples/TextAreaUncontrolled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaUncontrolled: React.FunctionComponent = () => (
+  <TextArea defaultValue="default value" aria-label="uncontrolled text area example" />
+);

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+
+export const TextAreaValidated: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must have something to say');
+  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const simulateNetworkCall = (callback: Function) => {
+    setTimeout(callback, 2000);
+  };
+
+  const handleTextAreaChange = (value: string) => {
+    setValue(value);
+    setValidated('default');
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value.length > 0) {
+        if (value.length >= 10) {
+          setValidated('success');
+          setHelperText('Thanks for your comments!');
+        } else {
+          setValidated('error');
+          setInvalidText("You're being too brief, please enter at least 10 characters.");
+        }
+      } else {
+        setValidated('warning');
+        setHelperText('You must have something to say');
+      }
+    });
+  };
+  return (
+    <Form>
+      <FormGroup
+        label="Comments:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <TextArea
+          value={value}
+          onChange={value => handleTextAreaChange(value)}
+          isRequired
+          validated={validated}
+          aria-label="invalid text area example"
+        />
+      </FormGroup>
+    </Form>
+  );
+};

package/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const VerticalResizeTextArea: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="vertical"
+      aria-label="text area vertical resize example"
+    />
+  );
+};

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}