@patternfly/react-core 6.6.0-prerelease.6 → 6.6.0-prerelease.8

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -48,7 +48,7 @@ import {
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
@@ -221,7 +221,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -352,7 +352,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -386,7 +386,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >
@@ -421,7 +421,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >
@@ -457,7 +457,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >
@@ -492,7 +492,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -51,7 +51,7 @@ import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-s
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
 
@@ -271,7 +271,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon />}
+                    icon={<RhUiEllipsisVerticalFillIcon />}
                   />
                 )}
               >
@@ -403,7 +403,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -444,7 +444,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-5')}
                           isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -479,7 +479,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-6')}
                           isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -515,7 +515,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-7')}
                           isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -550,7 +550,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-8')}
                           isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -594,7 +594,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-9')}
                           isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -629,7 +629,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-10')}
                           isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -665,7 +665,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-11')}
                           isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >
@@ -700,7 +700,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-12')}
                           isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                          icon={<EllipsisVIcon />}
+                          icon={<RhUiEllipsisVerticalFillIcon />}
                         />
                       )}
                     >

package/src/demos/Page.md

@@ -11,11 +11,10 @@ import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/ico
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 

package/src/demos/PasswordGenerator/PasswordGenerator.md

@@ -5,8 +5,8 @@ section: patterns
 
 import { useEffect, useRef, useState } from 'react';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+import RhUiViewFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-fill-icon';
+import RhUiViewOffFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-off-fill-icon';
 
 ## Demos
 

package/src/demos/PasswordGenerator/examples/PasswordGenerator.tsx

@@ -12,8 +12,8 @@ import {
   MenuItemAction
 } from '@patternfly/react-core';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
-import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
-import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
+import RhUiViewFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-fill-icon';
+import RhUiViewOffFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-view-off-fill-icon';
 
 export const PasswordGenerator: React.FunctionComponent = () => {
   const generatePassword = () => {
@@ -123,7 +123,7 @@ export const PasswordGenerator: React.FunctionComponent = () => {
             variant="control"
             onClick={() => setPasswordHidden(!passwordHidden)}
             aria-label={passwordHidden ? 'Show password' : 'Hide password'}
-            icon={passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+            icon={passwordHidden ? <RhUiViewFillIcon /> : <RhUiViewOffFillIcon />}
           />
         </InputGroupItem>
       </InputGroup>

package/src/demos/PrimaryDetail.md

@@ -4,9 +4,9 @@ section: patterns
 ---
 
 import { Fragment, useState } from 'react';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
@@ -23,7 +23,7 @@ import sparkIcon from './assets/camel-spark_200x150.png';
 import swaggerIcon from './assets/camel-swagger-java_200x150.png';
 import azureIcon from './assets/FuseConnector_Icons_AzureServices.png';
 import restIcon from './assets/FuseConnector_Icons_REST.png';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 

package/src/demos/RTL/RTL.md

@@ -8,15 +8,15 @@ import translationsEn from "./examples/translations.en.json";
 import translationsHe from "./examples/translations.he.json";
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';
-import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
-import WalkingIcon from '@patternfly/react-icons/dist/esm/icons/walking-icon';
+import RhUiRunningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-running-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
+import RhUiStopCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-stop-circle-fill-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
 

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -6,16 +6,14 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Card,
   Content,
   Divider,
   Dropdown,
   DropdownGroup,
   DropdownItem,
   DropdownList,
-  Icon,
   Label,
-  LabelColor,
+  LabelStatus,
   Masthead,
   MastheadMain,
   MastheadLogo,
@@ -46,14 +44,14 @@ import translationsEn from './examples/translations.en.json';
 import translationsHe from './examples/translations.he.json';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
 import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';
-import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
-import WalkingIcon from '@patternfly/react-icons/dist/esm/icons/walking-icon';
+import RhUiRunningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-running-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
+import RhUiStopCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-stop-circle-fill-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleDataRTL';
 
@@ -180,42 +178,28 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
       case 'Running':
       case 'רץ':
         return (
-          <Label
-            color={LabelColor.green}
-            icon={
-              <Icon shouldMirrorRTL>
-                <WalkingIcon />
-              </Icon>
-            }
-          >
+          <Label status={LabelStatus.success} icon={<RhUiRunningIcon className="pf-v6-m-mirror-inline-rtl" />}>
             {translation.table.rows.status.running}
           </Label>
         );
       case 'Stopped':
       case 'עצר':
         return (
-          <Label
-            icon={
-              <Icon shouldMirrorRTL>
-                <HandPaperIcon />
-              </Icon>
-            }
-            color={LabelColor.red}
-          >
+          <Label status={LabelStatus.danger} icon={<RhUiStopCircleFillIcon className="pf-v6-m-mirror-inline-rtl" />}>
             {translation.table.rows.status.stopped}
           </Label>
         );
       case 'Needs maintenance':
       case 'זקוק לתחזוקה':
         return (
-          <Label icon={<ToolsIcon />} color={LabelColor.blue}>
+          <Label status={LabelStatus.info} icon={<ToolsIcon />}>
             {translation.table.rows.status.needsMaintenance}
           </Label>
         );
       case 'Down':
       case 'מטה':
         return (
-          <Label icon={<ClockIcon />} color={LabelColor.orange}>
+          <Label status={LabelStatus.warning} icon={<RhUiClockFillIcon />}>
             {translation.table.rows.status.down}
           </Label>
         );
@@ -229,11 +213,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           <ToolbarItem>
             <Button
               variant="primary"
-              icon={
-                <Icon shouldMirrorRTL>
-                  <AlignRightIcon />
-                </Icon>
-              }
+              icon={<AlignRightIcon className="pf-v6-m-mirror-inline-rtl" />}
               iconPosition="end"
               onClick={switchTranslation}
             >
@@ -363,7 +343,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >
@@ -383,7 +363,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                 >
@@ -443,52 +423,50 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
           </Content>
         </PageSection>
         <PageSection>
-          <Card>
-            {toolbarItems}
-            <Table variant="compact" aria-label={translation.table.ariaLabel}>
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => (
-                    <Th key={columnIndex}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {paginatedRows.map((row: Row, rowIndex: number) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      {Object.entries(row).map(([key, value]) => {
-                        if (key === 'status') {
-                          return (
-                            <Td key={key} width={15} dataLabel="Status">
-                              {renderLabel(value)}
-                            </Td>
-                          );
-                        } else if (key === 'url') {
-                          return (
-                            // Passing dir="rtl" forces truncation at the start of the URL,
-                            // resulting in the unique portion being visible regardless of language
-                            <Td key={key} dataLabel="URL" width={15}>
-                              <a href="#">
-                                <Truncate content={row.url} position={isDirRTL ? 'end' : 'start'} />
-                              </a>
-                            </Td>
-                          );
-                        } else {
-                          return (
-                            <Td key={key} dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}>
-                              {value}
-                            </Td>
-                          );
-                        }
-                      })}
-                    </>
-                  </Tr>
+          {toolbarItems}
+          <Table variant="compact" aria-label={translation.table.ariaLabel}>
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => (
+                  <Th key={columnIndex}>{column}</Th>
                 ))}
-              </Tbody>
-            </Table>
-            {renderPagination(PaginationVariant.bottom)}
-          </Card>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {paginatedRows.map((row: Row, rowIndex: number) => (
+                <Tr key={rowIndex}>
+                  <>
+                    {Object.entries(row).map(([key, value]) => {
+                      if (key === 'status') {
+                        return (
+                          <Td key={key} width={15} dataLabel="Status">
+                            {renderLabel(value)}
+                          </Td>
+                        );
+                      } else if (key === 'url') {
+                        return (
+                          // Passing dir="rtl" forces truncation at the start of the URL,
+                          // resulting in the unique portion being visible regardless of language
+                          <Td key={key} dataLabel="URL" width={15}>
+                            <a href="#">
+                              <Truncate content={row.url} position={isDirRTL ? 'end' : 'start'} />
+                            </a>
+                          </Td>
+                        );
+                      } else {
+                        return (
+                          <Td key={key} dataLabel={key === 'lastModified' ? 'Last modified' : capitalize(key)}>
+                            {value}
+                          </Td>
+                        );
+                      }
+                    })}
+                  </>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+          {renderPagination(PaginationVariant.bottom)}
         </PageSection>
       </Page>
     </Fragment>

package/src/demos/Tabs.md

@@ -6,12 +6,12 @@ section: components
 import { Fragment, useCallback, useRef, useState } from 'react';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
-import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
-import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import display from '@patternfly/react-styles/css/utilities/Display/display';
 import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';

package/src/demos/Toolbar.md

@@ -7,7 +7,7 @@ import { Fragment, useState } from 'react';
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -28,7 +28,7 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
@@ -248,7 +248,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               variant="plain"
               onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
               aria-label="Notification drawer actions"
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -279,7 +279,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                         variant="plain"
                         onClick={() => onDropdownToggle(key)}
                         aria-label={`Notification ${index + 1} actions`}
-                        icon={<EllipsisVIcon />}
+                        icon={<RhUiEllipsisVerticalFillIcon />}
                       />
                     )}
                   >

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -22,8 +22,8 @@ import {
 } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const CardHorizontalGrid: React.FunctionComponent = () => {
   const [isCardExpanded, setIsCardExpanded] = useState(false);
@@ -64,7 +64,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           onClick={onActionToggle}
           variant="plain"
           aria-label="Horizontal card grid demo kebab toggle"
-          icon={<EllipsisVIcon />}
+          icon={<RhUiEllipsisVerticalFillIcon />}
         />
       )}
     >
@@ -241,7 +241,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                   <ListItem>
                     <a href="#">
                       OpenShift 4.5: Top Tasks
-                      <ExternalLinkAltIcon />
+                      <RhMicronsExternalLinkIcon />
                     </a>
                   </ListItem>
                   <ListItem>

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -12,8 +12,8 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
+import RhUiClockIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-icon';
 
 export const DateTimePicker: React.FunctionComponent = () => {
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
@@ -65,7 +65,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
           onClick={onToggleTime}
           isExpanded={isTimeOpen}
           aria-label="Time picker"
-          icon={<OutlinedClockIcon />}
+          icon={<RhUiClockIcon />}
         />
       )}
     >
@@ -74,12 +74,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
   );
 
   const calendarButton = (
-    <Button
-      variant="control"
-      aria-label="Toggle the calendar"
-      onClick={onToggleCalendar}
-      icon={<OutlinedCalendarAltIcon />}
-    />
+    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar} icon={<RhUiCalendarIcon />} />
   );
 
   return (

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -36,7 +36,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
@@ -212,7 +212,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
             >
@@ -232,7 +232,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon />}
+                  icon={<RhUiEllipsisVerticalFillIcon />}
                 />
               )}
             >