@patternfly/react-core 6.0.0-alpha.50 → 6.0.0-alpha.52

package/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -53,6 +53,21 @@ describe('menu toggle', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('shows success status', () => {
+    render(<MenuToggle status="success">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-success');
+  });
+
+  test('shows warning status', () => {
+    render(<MenuToggle status="warning">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-warning');
+  });
+
+  test('shows danger status', () => {
+    render(<MenuToggle status="danger">Toggle</MenuToggle>);
+    expect(screen.getByRole('button')).toHaveClass('pf-m-danger');
+  });
+
   test('split toggle passes onClick', async () => {
     const mockClick = jest.fn();
     const user = userEvent.setup();

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -152,9 +152,9 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 ### Plain toggle with icon
 
-To apply plain styling to a menu toggle with an icon, pass in `variant="plain"` and pass the icon to the `icon` property. This will remove the default bottom border and caret. The following example passes in an `EllipsisVIcon`.
+To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. This will remove the default bottom border and caret. You may pass in an `icon` to serve as the menu toggle. The following example passes in an `EllipsisVIcon`.
 
-If the toggle does not have any visible text content, you must pass in the `aria-label` property to provide an accessible name.
+If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts
 import React from 'react';
@@ -203,7 +203,7 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 ```
 
-### Split button toggle with text label
+### Split button toggle with checkbox label
 
 To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
 
@@ -211,6 +211,16 @@ To display text in a split button menu toggle, add a label to the `items` proper
 
 ```
 
+### Split button toggle with checkbox and toggle button text
+
+For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`.
+
+The following example shows a split button with a `<MenuToggleCheckbox>` and toggle button text.
+
+```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
+
+```
+
 ### Split button toggle with action
 
 To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.
@@ -266,3 +276,13 @@ To create a multiple typeahead toggle, pass a `<TextInputGroup>` component imple
 ```ts file='MenuToggleTypeahead.tsx'
 
 ```
+
+### Status toggle
+
+To create a toggle with a status, pass in the `status` property to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
+
+When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
+
+```ts isBeta file='MenuToggleStatus.tsx'
+
+```

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithToggleText.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-example"
+            key="split-checkbox-with-text"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    >
+      10 selected
+    </MenuToggle>{' '}
+    <MenuToggle
+      variant="primary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-primary-example"
+            key="split-checkbox-primary"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Primary menu toggle with checkbox split button"
+    >
+      10 selected
+    </MenuToggle>{' '}
+    <MenuToggle
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-example"
+            key="split-checkbox-secondary"
+            aria-label="Select all"
+          />
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    >
+      10 selected
+    </MenuToggle>
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleStatus.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const MenuToggleStatus: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle status="success">Success</MenuToggle>
+    <br />
+    <br />
+    <MenuToggle status="warning">Warning</MenuToggle>
+    <HelperText>
+      <HelperTextItem variant="warning">Warning text that explains the issue.</HelperTextItem>
+    </HelperText>
+    <br />
+    <br />
+    <MenuToggle status="danger">Danger</MenuToggle>
+    <HelperText>
+      <HelperTextItem variant="error">Danger text that explains the issue.</HelperTextItem>
+    </HelperText>
+  </React.Fragment>
+);

package/src/components/MultipleFileUpload/__tests__/MultipleFileUpload.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { MultipleFileUpload } from '../MultipleFileUpload';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUpload', () => {
   test('renders with expected class names when not horizontal', () => {
     const { asFragment } = render(<MultipleFileUpload>Foo</MultipleFileUpload>);

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatus.test.tsx

@@ -3,6 +3,8 @@ import { render } from '@testing-library/react';
 import { MultipleFileUploadStatus } from '../MultipleFileUploadStatus';
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 describe('MultipleFileUploadStatus', () => {
   test('renders with expected class names', () => {
     const { asFragment } = render(<MultipleFileUploadStatus>Foo</MultipleFileUploadStatus>);

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -9,10 +9,10 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-1-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v6-c-expandable-section__toggle"
-        id="pf-expandable-section-1-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -48,9 +48,9 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-1-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-1-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -74,10 +74,10 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-3-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v6-c-expandable-section__toggle"
-        id="pf-expandable-section-3-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -127,9 +127,9 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-3-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-3-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -153,10 +153,10 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-2-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v6-c-expandable-section__toggle"
-        id="pf-expandable-section-2-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -194,9 +194,9 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-2-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-2-content"
+        id="generated-id-content"
         role="region"
       >
         <ul
@@ -220,10 +220,10 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       class="pf-v6-c-expandable-section pf-m-expanded"
     >
       <button
-        aria-controls="pf-expandable-section-0-content"
+        aria-controls="generated-id-content"
         aria-expanded="true"
         class="pf-v6-c-expandable-section__toggle"
-        id="pf-expandable-section-0-toggle"
+        id="generated-id-toggle"
         type="button"
       >
         <span
@@ -259,9 +259,9 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
         </span>
       </button>
       <div
-        aria-labelledby="pf-expandable-section-0-toggle"
+        aria-labelledby="generated-id-toggle"
         class="pf-v6-c-expandable-section__content"
-        id="pf-expandable-section-0-content"
+        id="generated-id-content"
         role="region"
       >
         <ul

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -125,10 +125,8 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     };
 
     const handleClick = (event: MouseEvent) => {
-      // If the event is on the toggle and was fired via keyboard 'click', focus the first
-      // non-disabled menu item
-      // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
-      if (event.detail === 0 && isOpen && toggleRef.current?.contains(event.target as Node)) {
+      // Focus the first non-disabled menu item on toggle 'click'
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();

package/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -11,6 +11,7 @@ import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 
 jest.mock('../../../helpers/OUIA/ouia');
+jest.mock('../../../helpers/GenerateId/GenerateId');
 
 const props = {
   onChange: jest.fn(),

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -364,7 +364,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                 >
                   <label
                     class="pf-v6-c-form__label"
-                    for="pf-random-id-2"
+                    for="generated-id"
                   >
                     <span
                       class="pf-v6-c-form__label-text"
@@ -382,7 +382,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   >
                     <input
                       aria-invalid="false"
-                      id="pf-random-id-2"
+                      id="generated-id"
                       type="text"
                       value=""
                     />

package/src/components/Select/Select.tsx

@@ -124,8 +124,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     };
 
     const handleClick = (event: MouseEvent) => {
-      // toggle was clicked open via keyboard, focus on first menu item
-      if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
+      // toggle was opened, focus on first menu item
+      if (isOpen && toggleRef.current?.contains(event.target as Node)) {
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();

package/src/components/Select/examples/Select.md

@@ -15,7 +15,10 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 Select builds off of the menu component suite to adapt commonly used properties and functions to create a select menu. See the [menu documentation](/components/menus/menu) for a full list of properties that may be used to further customize a select menu. View the [custom menu examples](/components/menus/custom-menus) to see examples of fully functional select menus.
 
+For use cases that do not require a lot of customization, there are various template components available to use in the `@react-templates` package. These templates have a streamlined API and logic, making them easier to set up and use, but are limited in scope and flexibility. See the [templates page](/components/menus/select/react-templates) for details.
+
 ### Single select
+
 To let users select a single item from a list, use a single select menu.
 
 You can add multiple `<SelectOption>` components to build out a list of menu items. For each select option, pass a relevant option label to the `value` property.
@@ -28,30 +31,42 @@ To disable the select menu toggle, use the `isDisabled` property. In the followi
 
 ### Select option variants
 
-The following example showcases different option variants and customizations that are commonly used in a select menu. 
+The following example showcases different option variants and customizations that are commonly used in a select menu.
 
-To create these variants, you can pass different properties into a `<SelectOption>` component. 
+To create these variants, you can pass different properties into a `<SelectOption>` component.
 
-This example provides examples of: 
+This example provides examples of:
 
 - An option with a description, which is created by using the `description` property.
-- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon. 
-- An option with an icon, which is created by using the `icon` property. 
-- An option that is disabled by using the `isDisabled` property. 
+- An option with a link, which is created by passing a URL into the `to` property. For external links, use the `isExternalLink` property so that the option is styled with an outbound link icon.
+- An option with an icon, which is created by using the `icon` property.
+- An option that is disabled by using the `isDisabled` property.
 
 ```ts file="./SelectOptionVariations.tsx"
 
 ```
 
 ### With grouped items
+
 To group related select options together, use 1 or more `<SelectGroup>` components and title each group using the `label` property.
 
 ```ts file="./SelectGrouped.tsx"
 
 ```
 
+### With validation
+
+To create a toggle with a status, pass in `status` to the `MenuToggle`. The default icon associated with each status may be overridden by using the `statusIcon` property.
+
+When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.
+
+```ts isBeta file="./SelectValidated.tsx"
+
+```
+
 ### Checkbox select
-To let users select multiple list options via checkbox input, use a checkbox select. 
+
+To let users select multiple list options via checkbox input, use a checkbox select.
 
 To create a checkbox select, pass `role="menu"` to the `<Select>`, and `hasCheckbox` into each `<SelectOption>` component. To indicate that an option is selected, use the `isSelected` property.
 
@@ -64,6 +79,8 @@ By default, the menu toggle will display a badge to indicate the number of items
 ### Typeahead
 Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
 
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
 To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component and link an `onClick` function to the `<TextInputGroupMain>` component.
 
 ```ts file="./SelectTypeahead.tsx"
@@ -73,6 +90,8 @@ To make a typeahead, pass `variant=typeahead` into the `<MenuToggle>` component
 ### Typeahead with create option
 If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value. 
 
+If a user enters a value into a typeahead select menu that does not exist, you can allow them to create an option of that value.
+
 To enable the creation ability, pass a predetermined `value` into a `<SelectOption>` component. You can use the `placeholder` property to change the default text shown in the text input.
 
 The following example outlines the code implementation required to create a working typeahead menu that allows for creation.
@@ -84,6 +103,8 @@ The following example outlines the code implementation required to create a work
 ### Multiple typeahead with chips
 A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
 
+A multiple typeahead can be used to allow users to select multiple options from a list. Additionally, you can render a chip group to be placed in the select toggle.
+
 When more items than the allowed limit are selected, overflowing items will be hidden under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Select "show less" to hide extra items again.
 
 ```ts file="./SelectMultiTypeahead.tsx"
@@ -93,6 +114,8 @@ When more items than the allowed limit are selected, overflowing items will be h
 ### Multiple typeahead with create option
 If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
 
+If the text that is entered into a typeahead doesn't match a menu item, users can choose to create a new option that matches the text input. You can also combine this create functionality with a chip group to display created items as chips."
+
 ```ts file="./SelectMultiTypeaheadCreatable.tsx"
 
 ```
@@ -100,11 +123,13 @@ If the text that is entered into a typeahead doesn't match a menu item, users ca
 ### Multiple typeahead with checkboxes
 By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
 
+By default, a multiple typeahead select allows you to select multiple menu items, placing a checkmark beside selected items. Like basic checkbox select menus, you can add checkboxes to your menu items. This approach may be more accurate and comprehensive for more complex menu scenarios like filtering.
+
 ```ts file="./SelectMultiTypeaheadCheckbox.tsx"
 
 ```
 
-### With view more 
+### With view more
 
 To reduce the processing load for long select lists, you can add a "View more" action to load additional items.
 
@@ -118,7 +143,6 @@ The following example shows 3 items before the "View more" link, but you can adj
 
 You can add a `<MenuFooter>` component to a select menu to hold additional actions that users can take on menu items, through elements such as link buttons. A footer will be placed beneath a divider at the end of the select menu.
 
-
 ```ts file="./SelectFooter.tsx"
 
 ```

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -44,7 +44,12 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${inputValue}"`, value: 'no results' }
+          {
+            isDisabled: false,
+            children: `No results found for "${inputValue}"`,
+            value: 'no results',
+            hasCheckbox: false
+          }
         ];
       }
 

package/src/components/Select/examples/SelectValidated.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleStatus,
+  HelperText,
+  HelperTextItem
+} from '@patternfly/react-core';
+
+export const SelectValidated: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [status, setStatus] = React.useState<MenuToggleStatus>();
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+
+    setSelected(value as string);
+    setStatus((value as string).toLowerCase() as MenuToggleStatus);
+    setIsOpen(false);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+      status={status}
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <React.Fragment>
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption value="Success">Success</SelectOption>
+          <SelectOption value="Warning">Warning</SelectOption>
+          <SelectOption value="Danger">Danger</SelectOption>
+        </SelectList>
+      </Select>
+      {(status === MenuToggleStatus.warning || status === MenuToggleStatus.danger) && (
+        <HelperText isLiveRegion>
+          <HelperTextItem variant={status === MenuToggleStatus.warning ? 'warning' : 'error'}>
+            {status === MenuToggleStatus.warning && 'Warning text that explains the issue.'}
+            {status === MenuToggleStatus.danger && 'Danger text that explains the issue.'}
+          </HelperTextItem>
+        </HelperText>
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/Tabs/__tests__/Tabs.test.tsx

@@ -7,6 +7,8 @@ import { TabTitleIcon } from '../TabTitleIcon';
 import { TabContent } from '../TabContent';
 import { TabContentBody } from '../TabContentBody';
 
+jest.mock('../../../helpers/GenerateId/GenerateId');
+
 test('should render simple tabs', () => {
   const { asFragment } = render(
     <Tabs id="simpleTabs">

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -408,12 +408,12 @@ exports[`should render expandable vertical tabs 1`] = `
       >
         <button
           aria-disabled="false"
-          aria-labelledby="pf-random-id-0-text pf-random-id-0-button"
+          aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"
           data-ouia-component-type="PF5/Button"
           data-ouia-safe="true"
-          id="pf-random-id-0-button"
+          id="generated-id-button"
           type="button"
         >
           <span
@@ -436,7 +436,7 @@ exports[`should render expandable vertical tabs 1`] = `
           </span>
           <span
             class="pf-v6-c-tabs__toggle-text"
-            id="pf-random-id-0-text"
+            id="generated-id-text"
           >
             toggle
           </span>

package/src/components/TextArea/TextArea.tsx

@@ -36,10 +36,6 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   value?: string | number;
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
-  /** Callback function when text area is focused */
-  onFocus?: (event?: React.FocusEvent<HTMLTextAreaElement>) => void;
-  /** Callback function when text area is blurred (focus leaves) */
-  onBlur?: (event?: React.FocusEvent<HTMLTextAreaElement>) => void;
   /** Sets the orientation to limit the resize to */
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -8,6 +8,8 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
   text?: React.ReactNode;
   /** Icon rendered inside the toggle group item */
   icon?: React.ReactNode;
+  /** Sets position of the icon when text is also passed in */
+  iconPosition?: 'start' | 'end';
   /** Additional classes added to the toggle group item */
   className?: string;
   /** Flag indicating if the toggle group item is disabled */
@@ -25,6 +27,7 @@ export interface ToggleGroupItemProps extends Omit<React.HTMLProps<HTMLDivElemen
 export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
   text,
   icon,
+  iconPosition = 'start',
   className,
   isDisabled = false,
   isSelected = false,
@@ -42,6 +45,8 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
     console.warn('An accessible aria-label is required when using the toggle group item icon variant.');
   }
 
+  const toggleGroupIcon = <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>;
+
   return (
     <div className={css(styles.toggleGroupItem, className)} {...props}>
       <button
@@ -53,8 +58,9 @@ export const ToggleGroupItem: React.FunctionComponent<ToggleGroupItemProps> = ({
         disabled={isDisabled}
         id={buttonId}
       >
-        {icon && <ToggleGroupItemElement variant={ToggleGroupItemVariant.icon}>{icon}</ToggleGroupItemElement>}
+        {icon && iconPosition === 'start' && toggleGroupIcon}
         {text && <ToggleGroupItemElement variant={ToggleGroupItemVariant.text}>{text}</ToggleGroupItemElement>}
+        {icon && iconPosition === 'end' && toggleGroupIcon}
       </button>
     </div>
   );