@patternfly/react-core 6.1.0-prerelease.3 → 6.1.0-prerelease.4

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.3","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.3","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0-prerelease.3",
+  "version": "6.1.0-prerelease.4",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "41c7edb44b4d88d0bbd7099907c233f83d3abcbd"
+  "gitHead": "b05dc66de1e0c6ac0fd5ec95e4357dd31122cb6f"
 }

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -84,9 +84,8 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
                   variant="plain"
                   isExpanded={isOpen}
                   aria-label="Action list single group kebab"
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardExpandable.tsx

@@ -71,9 +71,8 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardExpandableWithIcon.tsx

@@ -67,9 +67,8 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardHeaderInCardHead.tsx

@@ -58,9 +58,8 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardOnlyActionsInCardHead.tsx

@@ -56,9 +56,8 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/Card/examples/CardWithImageAndActions.tsx

@@ -64,9 +64,8 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-          >
-            <EllipsisVIcon aria-hidden="true" />
-          </MenuToggle>
+            icon={<EllipsisVIcon aria-hidden="true" />}
+          />
         )}
         isOpen={isOpen}
         onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/DataList/examples/DataListActions.tsx

@@ -86,9 +86,8 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen}
                 onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -84,9 +84,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen1}
               onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -139,9 +138,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen2}
               onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -203,9 +201,8 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
+                  icon={<EllipsisVIcon aria-hidden="true" />}
+                />
               )}
               isOpen={isOpen3}
               onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -76,9 +76,8 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -126,9 +125,8 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -92,9 +92,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -163,9 +162,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -234,9 +232,8 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -94,9 +94,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen1}
                 onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -167,9 +166,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen2}
                 onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}
@@ -228,9 +226,8 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                  >
-                    <EllipsisVIcon aria-hidden="true" />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon aria-hidden="true" />}
+                  />
                 )}
                 isOpen={isOpen3}
                 onOpenChange={(isOpen: boolean) => setIsOpen3(isOpen)}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -103,9 +103,8 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                   isOpen={isOpen1}
                   onOpenChange={(isOpen: boolean) => setIsOpen1(isOpen)}
@@ -177,9 +176,8 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                   isOpen={isOpen2}
                   onOpenChange={(isOpen: boolean) => setIsOpen2(isOpen)}

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -27,9 +27,8 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggleClick}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
       shouldFocusToggleOnSelect
     >

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -166,9 +166,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={<EllipsisVIcon aria-hidden="true" />}
+              />
             )}
             isOpen={isAvailableKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsAvailableKebabOpen(isOpen)}
@@ -202,9 +201,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
+                icon={<EllipsisVIcon aria-hidden="true" />}
+              />
             )}
             isOpen={isChosenKebabOpen}
             onOpenChange={(isOpen: boolean) => setIsChosenKebabOpen(isOpen)}

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -37,9 +37,8 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
     >
       <DropdownList>

package/src/components/Hint/examples/HintBasicWithoutTitle.tsx

@@ -36,9 +36,8 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
           variant="plain"
           onClick={onToggle}
           isExpanded={isOpen}
-        >
-          <EllipsisVIcon />
-        </MenuToggle>
+          icon={<EllipsisVIcon />}
+        />
       )}
     >
       <DropdownList>

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -200,8 +200,8 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
   };
 
   const iconToggle = (
-    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen}>
-      {icon || 'Select'}
+    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen} icon={icon}>
+      {icon ? '' : 'Select'}
     </MenuToggle>
   );
 

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

@@ -81,36 +81,24 @@ For most basic icons, it is recommended to wrap it inside our [icon component](/
 
 ```ts
 import React from 'react';
-import { MenuToggle, Icon } from '@patternfly/react-core';
+import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
 <React.Fragment>
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="primary"
   >
     Icon
   </MenuToggle>{' '}
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="secondary"
   >
     Icon
   </MenuToggle>{' '}
   <MenuToggle
-    icon={
-      <Icon>
-        <CogIcon />
-      </Icon>
-    }
+    icon={<CogIcon />}
     variant="secondary"
     isDisabled
   >

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -95,9 +95,8 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
                   variant="plain"
                   onClick={onToggle}
                   isExpanded={isOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isOpen}
               onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -99,9 +99,8 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -88,9 +88,8 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx

@@ -62,9 +62,8 @@ export const OverflowMenuPersistent: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx

@@ -62,9 +62,8 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-            >
-              <EllipsisVIcon />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
           isOpen={isOpen}
           onOpenChange={(isOpen) => setIsOpen(isOpen)}

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -229,9 +229,8 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={onKebabToggle}
                       isExpanded={kebabIsOpen}
-                    >
-                      <EllipsisVIcon />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon />}
+                    />
                   )}
                   isOpen={kebabIsOpen}
                 >

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -231,9 +231,8 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -47,9 +47,8 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
               onClick={onToggle}
               variant="plain"
               aria-label="Tree view with actions example kebab toggle"
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon />}
+            />
           )}
         >
           <DropdownList>

package/src/demos/CardView/examples/CardView.tsx

@@ -427,9 +427,8 @@ export const CardViewBasic: React.FunctionComponent = () => {
                   variant="plain"
                   onClick={onToolbarKebabDropdownToggle}
                   isExpanded={isLowerToolbarKebabDropdownOpen}
-                >
-                  <EllipsisVIcon />
-                </MenuToggle>
+                  icon={<EllipsisVIcon />}
+                />
               )}
               isOpen={isLowerToolbarKebabDropdownOpen}
               onOpenChange={(isOpen) => setIsLowerToolbarDropdownOpen(isOpen)}
@@ -518,9 +517,8 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 onCardKebabDropdownToggle(e, key.toString());
                               }}
                               isExpanded={!!state[key]}
-                            >
-                              <EllipsisVIcon />
-                            </MenuToggle>
+                              icon={<EllipsisVIcon />}
+                            />
                           )}
                           popperProps={{ position: 'right' }}
                         >

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -215,9 +215,8 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           onClick={onToggleClick}
           isExpanded={isOpen}
           style={{ width: 'auto' }}
-        >
-          <ThIcon />
-        </MenuToggle>
+          icon={<ThIcon />}
+        />
       )}
       ref={menuRef}
       onActionClick={onFavorite}

package/src/demos/DashboardHeader.tsx

@@ -137,9 +137,8 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownList>{kebabDropdownItems}</DropdownList>
@@ -158,9 +157,8 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
+                      icon={<EllipsisVIcon aria-hidden="true" />}
+                    />
                   )}
                 >
                   <DropdownGroup key="group 2" aria-label="User actions">

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -56,9 +56,7 @@ export const DataListBasic: React.FunctionComponent = () => {
             <Button variant="primary">Create instance</Button>
           </OverflowMenuItem>
           <OverflowMenuControl hasAdditionalOptions>
-            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain">
-              <EllipsisVIcon />
-            </MenuToggle>
+            <MenuToggle aria-label="Toolbar kebab overflow menu" variant="plain" icon={<EllipsisVIcon />} />
           </OverflowMenuControl>
         </OverflowMenu>
       </ToolbarItem>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -13,6 +13,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   Toolbar,
@@ -22,7 +23,6 @@ import {
   ToolbarContent,
   SearchInput,
   Tooltip,
-  Icon,
   PageSection
 } from '@patternfly/react-core';
 
@@ -182,9 +182,8 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>
@@ -259,9 +258,8 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>
@@ -336,9 +334,8 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>