@patternfly/react-core 5.0.0-alpha.62 → 5.0.0-alpha.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.62",
+  "version": "5.0.0-alpha.64",
   "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": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d92de5c78c49b2c1e5df50821a7fdb0870cea154"
+  "gitHead": "96fff41f82b6547ea995ea64938c38575058518e"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
-import { TextInput } from '../TextInput/TextInput';
-import { Button } from '../Button/Button';
-import { Select, SelectOption } from '../Select';
+import { TextInput } from '../TextInput';
+import { Button } from '../Button';
+import { Select, SelectList, SelectOption } from '../Select';
+import { MenuToggle, MenuToggleElement } from '../MenuToggle';
 import { InputGroup } from '../InputGroup';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -263,13 +264,21 @@ export const CalendarMonth = ({
               Month
             </span>
             <Select
-              // Max width with "September"
-              width="140px"
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={()=>setIsSelectOpen(!isSelectOpen)}
+                  isExpanded={isSelectOpen}
+                  style={{width: "140px"} as React.CSSProperties }
+                >
+                  {monthFormatted}
+                </MenuToggle>
+              )}
               aria-labelledby={hiddenMonthId}
               isOpen={isSelectOpen}
-              onToggle={() => {
-                setIsSelectOpen(!isSelectOpen);
-                onSelectToggle(!isSelectOpen);
+              onOpenChange={(isOpen) => {
+                setIsSelectOpen(isOpen);
+                onSelectToggle(isOpen);
               }}
               onSelect={(ev, monthNum) => {
                 // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
@@ -285,14 +294,15 @@ export const CalendarMonth = ({
                   onMonthChange(ev, newDate);
                 }, 0);
               }}
-              variant="single"
-              selections={monthFormatted}
+              selected={monthFormatted}
             >
-              {longMonths.map((longMonth, index) => (
-                <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
-                  {longMonth}
-                </SelectOption>
-              ))}
+              <SelectList>
+                {longMonths.map((longMonth, index) => (
+                  <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
+                    {longMonth}
+                  </SelectOption>
+                ))}
+              </SelectList>
             </Select>
           </div>
           <div className={styles.calendarMonthHeaderYear}>

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

@@ -103,45 +103,36 @@ exports[`With popover opened 1`] = `
                   >
                     Month
                   </span>
-                  <div
-                    class="pf-c-select"
-                    data-ouia-component-id="OUIA-Generated-Select-single-1"
-                    data-ouia-component-type="PF4/Select"
-                    data-ouia-safe="true"
-                    style="width: 140px;"
-                  >
+                  <div>
                     <button
                       aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-label="Options menu"
-                      aria-labelledby="unique_id_mock pf-select-toggle-id-0"
-                      class="pf-c-select__toggle"
-                      id="pf-select-toggle-id-0"
+                      class="pf-c-menu-toggle"
+                      style="width: 140px;"
                       type="button"
                     >
-                      <div
-                        class="pf-c-select__toggle-wrapper"
+                      <span
+                        class="pf-c-menu-toggle__text"
                       >
-                        <span
-                          class="pf-c-select__toggle-text"
-                        >
-                          December
-                        </span>
-                      </div>
+                        December
+                      </span>
                       <span
-                        class="pf-c-select__toggle-arrow"
+                        class="pf-c-menu-toggle__controls"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-svg"
-                          fill="currentColor"
-                          role="img"
-                          viewBox="0 0 320 512"
+                        <span
+                          class="pf-c-menu-toggle__toggle-icon"
                         >
-                          <path
-                            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                          />
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="pf-svg"
+                            fill="currentColor"
+                            role="img"
+                            viewBox="0 0 320 512"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                          </svg>
+                        </span>
                       </span>
                     </button>
                   </div>

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -8,9 +8,11 @@ import {
   LoginPage,
   ListItem,
   ListVariant,
+  MenuToggle,
+  MenuToggleElement,
   Select,
-  SelectOption,
-  SelectOptionObject
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
@@ -22,7 +24,7 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const [isValidPassword, setIsValidPassword] = React.useState(true);
   const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false);
   const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false);
-  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState<string | SelectOptionObject>('English');
+  const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English');
 
   /** i18n object is used to simulate i18n integration of native language translation */
   const i18n = {
@@ -35,23 +37,21 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
     Bengali: 'বাংলা'
   };
 
-  const headerUtilsOptions = [
-    <SelectOption key={0} value={i18n.English} />,
-    <SelectOption key={1} value={i18n.Mandarin} />,
-    <SelectOption key={2} value={i18n.Hindi} />,
-    <SelectOption key={3} value={i18n.Spanish} />,
-    <SelectOption key={4} value={i18n.Portuguese} />,
-    <SelectOption key={5} value={i18n.Arabic} />,
-    <SelectOption key={6} value={i18n.Bengali} />
-  ];
-
-  const onHeaderUtilsToggle = (_event: any, isExpanded: boolean) => {
-    setIsHeaderUtilsOpen(isExpanded);
-  };
+  const headerUtilsOptions = (
+    <SelectList>
+      <SelectOption key={0} itemId={i18n.English}>{i18n.English}</SelectOption>
+      <SelectOption key={1} itemId={i18n.Mandarin}>{i18n.Mandarin}</SelectOption>
+      <SelectOption key={2} itemId={i18n.Hindi}>{i18n.Hindi}</SelectOption>
+      <SelectOption key={3} itemId={i18n.Spanish}>{i18n.Spanish}</SelectOption>
+      <SelectOption key={4} itemId={i18n.Portuguese}>{i18n.Portuguese}</SelectOption>
+      <SelectOption key={5} itemId={i18n.Arabic}>{i18n.Arabic}</SelectOption>
+      <SelectOption key={6} itemId={i18n.Bengali}>{i18n.Bengali}</SelectOption>
+    </SelectList>
+  );
 
   const onHeaderUtilsSelect = (
     _event: React.MouseEvent<Element, MouseEvent> | React.ChangeEvent<Element>,
-    value: string | SelectOptionObject
+    value: string
   ) => {
     setSelectedHeaderUtils(value);
     setIsHeaderUtilsOpen(false);
@@ -60,9 +60,18 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
   const headerUtils = (
     <Select
       aria-label="Select Language"
-      onToggle={onHeaderUtilsToggle}
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={toggleRef}
+          onClick={() => setIsHeaderUtilsOpen(!isHeaderUtilsOpen)}
+          isExpanded={isHeaderUtilsOpen}
+        >
+          {selectedHeaderUtils}
+        </MenuToggle>
+      )}
       onSelect={onHeaderUtilsSelect}
-      selections={selectedHeaderUtils}
+      onOpenChange={isOpen => setIsHeaderUtilsOpen(isOpen)}
+      selected={selectedHeaderUtils}
       isOpen={isHeaderUtilsOpen}
     >
       {headerUtilsOptions}

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
+import { Icon } from '../Icon';
 
 export type MenuToggleElement = HTMLDivElement | HTMLButtonElement;
 
@@ -85,7 +86,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
 
     const content = (
       <>
-        {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
+        {icon && <span className={css(styles.menuToggleIcon)}><Icon>{icon}</Icon></span>}
         {isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
         {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (

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

@@ -124,17 +124,25 @@ exports[`menu toggle shows icon 1`] = `
     <span
       class="pf-c-menu-toggle__icon"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-svg"
-        fill="currentColor"
-        role="img"
-        viewBox="0 0 512 512"
+      <span
+        class="pf-c-icon"
       >
-        <path
-          d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-        />
-      </svg>
+        <span
+          class="pf-c-icon__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-svg"
+            fill="currentColor"
+            role="img"
+            viewBox="0 0 512 512"
+          >
+            <path
+              d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+            />
+          </svg>
+        </span>
+      </span>
     </span>
     <span
       class="pf-c-menu-toggle__text"

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

@@ -11,10 +11,13 @@ import './MenuToggle.css'
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
 
-### Collapsed
+### Collapsed toggle
+
+A toggle is collapsed until it is selected by a user. 
 
 ```ts
 import React from 'react';
@@ -24,7 +27,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Expanded
+### Expanded toggle
+
+When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property . 
 
 ```ts
 import React from 'react';
@@ -34,7 +39,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Disabled
+### Disabled toggle
+
+To disable the selection and expansion of a toggle, use the `isDisabled` property. 
 
 ```ts
 import React from 'react';
@@ -44,7 +51,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 ```
 
-### Count
+### With a badge
+
+To display a count of selected items in a toggle, use the `badge` property.
 
 ```ts
 import React from 'react';
@@ -54,7 +63,9 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 
 ```
 
-### Primary
+### With icons
+
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the  toggle.
 
 ```ts
 import React from 'react';
@@ -62,21 +73,33 @@ import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
-  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-  <MenuToggle variant="primary" icon={<CogIcon />}>
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle variant="primary" isExpanded>
-    Expanded
-  </MenuToggle>{' '}
-  <MenuToggle variant="primary" isDisabled>
-    Disabled
-  </MenuToggle>
+  <MenuToggle icon={<CogIcon />} variant="primary">Icon</MenuToggle>{' '}
+  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
+  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
 </React.Fragment>
+```
+
+### With avatar and text
 
+You can also pass images into the `icon` property. The following example passes in an `<Avatar>` component with an `imgAvatar`. 
+
+This can be used alongside a text label that provides more context for the image.
+
+```ts
+import React from 'react';
+import { MenuToggle, Avatar } from '@patternfly/react-core';
+import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+
+<React.Fragment>
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
+  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
+</React.Fragment>
 ```
 
-### Secondary
+### Variant styles
+
+Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts
 import React from 'react';
@@ -84,21 +107,22 @@ import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
-  <MenuToggle variant="secondary">Collapsed</MenuToggle>{' '}
-    <MenuToggle variant="secondary" icon={<CogIcon />}>
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle variant="secondary" isExpanded>
+  <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
+  <MenuToggle variant="primary" isExpanded>
     Expanded
   </MenuToggle>{' '}
-  <MenuToggle variant="secondary" isDisabled>
+  <MenuToggle variant="primary" isDisabled>
     Disabled
   </MenuToggle>
 </React.Fragment>
 
 ```
 
-### Plain
+### Plain toggle with icon
+
+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, use the `aria-label` property to provide an accessible name. 
 
 ```ts
 import React from 'react';
@@ -108,16 +132,18 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 <React.Fragment>
   <MenuToggle variant="plain" aria-label="plain kebab">
     <EllipsisVIcon />
-  </MenuToggle>
+  </MenuToggle>{' '}
   <MenuToggle variant="plain" isExpanded aria-label="plain expanded kebab">
     <EllipsisVIcon />
-  </MenuToggle>
+  </MenuToggle>{' '}
   <MenuToggle variant="plain" isDisabled aria-label="disabled kebab">
     <EllipsisVIcon />
   </MenuToggle>
 </React.Fragment>
 ```
-### Plain with text
+### Plain toggle with text label
+
+To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts
 import React from 'react';
@@ -126,80 +152,48 @@ import { MenuToggle } from '@patternfly/react-core';
 <React.Fragment>
   <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
     Disabled
-  </MenuToggle>
-  &nbsp;
+  </MenuToggle>{' '}
   <MenuToggle variant="plainText" aria-label="Plain menu toggle">
     Custom text
-  </MenuToggle>
+  </MenuToggle>{' '}
   <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
     Custom text (expanded)
   </MenuToggle>
 </React.Fragment>
 ```
 
-### Split button (checkbox)
-    
-```ts file='MenuToggleSplitButtonCheckbox.tsx'
-```
+### Split button toggle with checkbox
 
-### Split button (checkbox with toggle text)
-    
-```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
-```
+To add an action button or other control to a menu toggle, use a split button. A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
 
-### Split button (checkbox, primary)
-    
-```ts file='MenuToggleSplitButtonCheckboxPrimary.tsx'
-```
+The following example shows a split button with a `<MenuToggleCheckbox>`.
 
-### Split button (checkbox, secondary)
-    
-```ts file='MenuToggleSplitButtonCheckboxSecondary.tsx'
-```
+Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.
 
-### Split button (action)
-    
-```ts file='MenuToggleSplitButtonAction.tsx'
+```ts file='MenuToggleSplitButtonCheckbox.tsx'
 ```
 
-### Split button (action, primary)
-    
-```ts file='MenuToggleSplitButtonActionPrimary.tsx'
-```
+### Split button toggle with text label
 
-### Split button (action, secondary)
-    
-```ts file='MenuToggleSplitButtonActionSecondary.tsx'
+To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.  
+
+```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 ```
 
-### With icon/image and text
+### Split button toggle with action
 
-```ts
-import React from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`. 
 
-<React.Fragment>
-  <MenuToggle icon={<CogIcon />} variant="secondary">Icon</MenuToggle>{' '}
-  <MenuToggle icon={<CogIcon />} variant="secondary" isDisabled>Icon</MenuToggle>
-</React.Fragment>
+Actions may be used with primary and secondary toggle variants.
+    
+```ts file='MenuToggleSplitButtonAction.tsx'
 ```
 
-### With avatar and text
+### Full height toggle
 
-```ts
-import React from 'react';
-import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+A full height toggle fills the height of its parent. To flag a full height toggle, use the `isFullHeight` property. 
 
-<React.Fragment>
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isExpanded>Ned Username</MenuToggle>{' '}
-  <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />} isDisabled>Ned Username</MenuToggle>
-</React.Fragment>
-```
-
-### Full height
+In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
 ```ts
 import React from 'react';
@@ -212,7 +206,11 @@ import { MenuToggle } from '@patternfly/react-core';
 </div>
 ```
 
-### Full width
+### Full width toggle
+
+A full width toggle fills the width of its parent. To flag a full width toggle, use the `isFullWidth` property. 
+
+In the following example, the toggle fills the width of its parent as the window size changes.
 
 ```ts
 import React from 'react';
@@ -226,3 +224,12 @@ const fullWidth: React.FunctionComponent = () => {
   );
 }
 ```
+
+### Typeahead toggle
+
+To create a typeahead toggle, pass in `variant="typeahead"` to the `<MenuToggle>`. Then, pass a `<TextInputGroup>` component as a child of the `<MenuToggle>`.
+
+To create a multiple typeahead toggle, pass a `<TextInputGroup>` component implemented like the [text input group's filter example](/components/text-input-group#filters) as a child of `<MenuToggle>`.
+
+```ts file='MenuToggleTypeahead.tsx'
+```

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

@@ -4,16 +4,10 @@ import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      isDisabled
       splitButtonOptions={{
         variant: 'action',
         items: [
-          <MenuToggleAction
-            id="split-button-action-disabled-example-with-toggle-button"
-            key="split-action-disabled"
-            aria-label="Action"
-            isDisabled
-          >
+          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
             Action
           </MenuToggleAction>
         ]
@@ -21,10 +15,15 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
+      variant="primary"
       splitButtonOptions={{
         variant: 'action',
         items: [
-          <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
+          <MenuToggleAction
+            id="split-button-action-primary-example-with-toggle-button"
+            key="split-action-primary"
+            aria-label="Action"
+          >
             Action
           </MenuToggleAction>
         ]
@@ -32,13 +31,13 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
       aria-label="Menu toggle with action split button"
     />{' '}
     <MenuToggle
-      isExpanded
+      variant="secondary"
       splitButtonOptions={{
         variant: 'action',
         items: [
           <MenuToggleAction
-            id="split-button-action-expanded-example-with-toggle-button"
-            key="split-action-expanded"
+            id="split-button-action-secondary-example-with-toggle-button"
+            key="split-action-secondary"
             aria-label="Action"
           >
             Action

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

@@ -4,35 +4,22 @@ import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
   <React.Fragment>
     <MenuToggle
-      isDisabled
       splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-disabled-example"
-            key="split-checkbox-disabled"
-            aria-label="Select all"
-            isDisabled
-          />
-        ]
+        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
       }}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
+      variant="primary"
       splitButtonOptions={{
         items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
       }}
       aria-label="Menu toggle with checkbox split button"
     />{' '}
     <MenuToggle
-      isExpanded
+      variant="secondary"
       splitButtonOptions={{
-        items: [
-          <MenuToggleCheckbox
-            id="split-button-checkbox-expanded-example"
-            key="split-checkbox-expanded"
-            aria-label="Select all"
-          />
-        ]
+        items: [<MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />]
       }}
       aria-label="Menu toggle with checkbox split button"
     />