feat(unified): update icons and glass theme

package.json

@@ -27,7 +27,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "devDependencies": {
-    "@patternfly/patternfly-a11y": "^5.0.0",
+    "@patternfly/patternfly-a11y": "^5.2.1",
     "@types/jest": "^26.0.14",
     "@types/lodash-es": "^4.17.7",
     "@typescript-eslint/eslint-plugin": "5.59.6",
@@ -66,7 +66,9 @@
   "resolutions": {
     "chromedriver": "^104",
     "express": "^4.22.1",
-    "picomatch": "2.3.1"
+    "picomatch": "2.3.1",
+    "qs": "^6.14.2",
+    "path-to-regexp": "^0.1.13"
   },
   "jest": {
     "moduleFileExtensions": [

packages/dev/package.json

@@ -9,9 +9,9 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/patternfly": "^6.5.2",
     "@patternfly/quickstarts": "^6.0.0-alpha.0",
-    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-core": "^6.5.1",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-parser": "^9.4.0",

packages/dev/src/AppCustomDrawer.tsx

@@ -116,7 +116,7 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
   const [drawerContent, setDrawerContent] = React.useState('none');
 
   const otherDrawerPanelContent = (
-    <DrawerPanelContent>
+    <DrawerPanelContent isGlass>
       <DrawerHead>
         <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
         <DrawerActions>

packages/dev/src/CustomCatalog.tsx

@@ -16,8 +16,8 @@ import {
   getQuickStartStatus,
   LoadingBox,
 } from '@patternfly/quickstarts';
-import BookmarkIcon from '@patternfly/react-icons/dist/esm/icons/bookmark-icon';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/esm/icons/outlined-bookmark-icon';
+import RhUiBookmarkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-bookmark-fill-icon';
+import RhUiBookmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-bookmark-icon';
 import {
   Divider,
   Gallery,
@@ -115,7 +115,7 @@ export const CustomCatalog: React.FC = () => {
                             return [...prev, id];
                           });
                         },
-                        icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon,
+                        icon: bookmarked.includes(id) ? RhUiBookmarkFillIcon : RhUiBookmarkIcon,
                         'aria-label': 'bookmark',
                       }}
                       quickStart={quickStart}
@@ -156,7 +156,7 @@ export const CustomCatalog: React.FC = () => {
                         return [...prev, id];
                       });
                     },
-                    icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon,
+                    icon: bookmarked.includes(id) ? RhUiBookmarkFillIcon : RhUiBookmarkIcon,
                     'aria-label': 'bookmark',
                   }}
                   quickStart={quickStart}
@@ -195,7 +195,7 @@ export const CustomCatalog: React.FC = () => {
                         return [...prev, id];
                       });
                     },
-                    icon: bookmarked.includes(id) ? BookmarkIcon : OutlinedBookmarkIcon,
+                    icon: bookmarked.includes(id) ? RhUiBookmarkFillIcon : RhUiBookmarkIcon,
                     'aria-label': 'bookmark',
                   }}
                   quickStart={quickStart}

packages/dev/src/common/Page.tsx

@@ -21,7 +21,7 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import { QuickStartContext } from '@patternfly/quickstarts';
 import { Link } from 'react-router-dom';
@@ -111,7 +111,7 @@ export const AppHeader = (
       <MastheadToggle>
         <PageToggleButton variant="plain" aria-label="Global navigation">
           <Icon>
-            <BarsIcon />
+            <RhUiMenuBarsIcon />
           </Icon>
         </PageToggleButton>
       </MastheadToggle>

packages/module/package.json

@@ -55,14 +55,14 @@
     "history": "^5.0.0"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^6.28.8",
-    "@patternfly/patternfly": "^6.0.0",
-    "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-core": "^6.0.0",
-    "@patternfly/react-icons": "^6.0.0",
-    "@patternfly/react-styles": "^6.0.0",
-    "@patternfly/react-table": "^6.0.0",
-    "@patternfly/react-tokens": "^6.0.0",
+    "@patternfly/documentation-framework": "^6.44.0",
+    "@patternfly/patternfly": "^6.5.2",
+    "@patternfly/react-code-editor": "^6.5.1",
+    "@patternfly/react-core": "^6.5.1",
+    "@patternfly/react-icons": "^6.5.1",
+    "@patternfly/react-styles": "^6.5.1",
+    "@patternfly/react-table": "^6.5.1",
+    "@patternfly/react-tokens": "^6.5.1",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.1.0",

packages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx

@@ -94,7 +94,7 @@ export const App = ({ showCardFooters }) => {
   const [drawerContent, setDrawerContent] = React.useState('none');
 
   const otherDrawerPanelContent = (
-    <DrawerPanelContent>
+    <DrawerPanelContent isGlass>
       <DrawerHead>
         <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
         <DrawerActions>

packages/module/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -3,7 +3,7 @@ import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/q
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
-import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import RhUiCopyIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-copy-icon';
 
 const useInlineCopyClipboardShowdownExtension = () => {
   const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
@@ -23,7 +23,7 @@ const useInlineCopyClipboardShowdownExtension = () => {
                   <button class="pf-v6-c-button pf-m-plain" aria-label="${getResource(
                     'Copy to clipboard',
                   )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
-                    ${renderToStaticMarkup(<CopyIcon />)}
+                    ${renderToStaticMarkup(<RhUiCopyIcon />)}
                   </button>
                 </span>
               </span>

packages/module/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -3,7 +3,7 @@ import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { renderToStaticMarkup } from 'react-dom/server';
-import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import RhUiCopyIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-copy-icon';
 
 const useMultilineCopyClipboardShowdownExtension = () => {
   const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
@@ -22,7 +22,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="${getResource(
                       'Copy to clipboard',
                     )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
-                      ${renderToStaticMarkup(<CopyIcon />)}
+                      ${renderToStaticMarkup(<RhUiCopyIcon />)}
                     </button>
                   </div>
                 </div>

packages/module/src/ConsoleShared/src/components/status/Status.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-sync-icon';
 import { DASH } from '../../constants';
 import { SuccessStatus } from './statuses';
 import StatusIconAndText from './StatusIconAndText';
@@ -9,7 +9,7 @@ export const Status: FC<StatusProps> = ({ status, title, iconOnly, noTooltip, cl
   const statusProps = { title: title || status, iconOnly, noTooltip, className };
   switch (status) {
     case 'In Progress':
-      return <StatusIconAndText {...statusProps} icon={<SyncAltIcon />} />;
+      return <StatusIconAndText {...statusProps} icon={<RhUiSyncIcon />} />;
 
     case 'Complete':
       return <SuccessStatus {...statusProps} />;

packages/module/src/ConsoleShared/src/components/status/icons.tsx

@@ -1,24 +1,24 @@
 import { FC } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
 import { Icon } from '@patternfly/react-core';
 
 export const GreenCheckCircleIcon: FC<ColoredIconProps> = ({ className, title, size }) => (
   <Icon size={size} status="success">
-    <CheckCircleIcon data-test="success-icon" className={className} title={title} />
+    <RhUiCheckCircleFillIcon data-test="success-icon" className={className} title={title} />
   </Icon>
 );
 
 export const RedExclamationCircleIcon: FC<ColoredIconProps> = ({ className, title, size }) => (
   <Icon size={size} status="danger">
-    <ExclamationCircleIcon className={className} title={title} />
+    <RhUiErrorFillIcon className={className} title={title} />
   </Icon>
 );
 
 export const BlueInfoCircleIcon: FC<ColoredIconProps> = ({ className, title }) => (
   <Icon status="info">
-    <InfoCircleIcon className={className} title={title} />
+    <RhUiInformationFillIcon className={className} title={title} />
   </Icon>
 );
 

packages/module/src/HelpTopicPanelContent.tsx

@@ -18,8 +18,8 @@ import {
 
 import QuickStartMarkdownView from './QuickStartMarkdownView';
 import { HelpTopic } from './utils/help-topic-types';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-external-link-fill-icon';
 
 import { HelpTopicContext, HelpTopicContextValues } from './utils/help-topic-context';
 
@@ -80,7 +80,7 @@ const HelpTopicPanelContent: FC<HelpTopicPanelContentProps> = ({
                 variant="link"
                 aria-label={`Open documentation in new window`}
                 isInline
-                icon={isExternal ? <ExternalLinkAltIcon /> : null}
+                icon={isExternal ? <RhUiExternalLinkFillIcon /> : null}
                 iconPosition="right"
                 style={{ fontSize: 'inherit' }}
               >
@@ -94,7 +94,7 @@ const HelpTopicPanelContent: FC<HelpTopicPanelContentProps> = ({
   );
 
   const content = (
-    <DrawerPanelContent isResizable={isResizable} {...props}>
+    <DrawerPanelContent isResizable={isResizable} isGlass {...props}>
       <div>
         <DrawerHead>
           <div>
@@ -110,7 +110,7 @@ const HelpTopicPanelContent: FC<HelpTopicPanelContentProps> = ({
                   <MenuToggle
                     isFullWidth
                     ref={toggleRef}
-                    icon={<BarsIcon />}
+                    icon={<RhUiMenuBarsIcon />}
                     onClick={toggleHelpTopicMenu}
                     isExpanded={isHelpTopicMenuOpen}
                   >

packages/module/src/QuickStartCatalogPage.tsx

@@ -10,7 +10,7 @@ import {
   PageSection,
   Title,
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import RhUiSearchIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-search-icon';
 import { EmptyBox, LoadingBox, clearFilterParams } from '@console/internal/components/utils';
 import QuickStartCatalog from './catalog/QuickStartCatalog';
 import QuickStartCatalogFilter from './catalog/Toolbar/QuickStartCatalogFilter';
@@ -32,7 +32,7 @@ export const QuickStartCatalogEmptyState = ({ clearFilters }) => {
   return (
     <EmptyState
       headingLevel="h4"
-      icon={SearchIcon as any}
+      icon={RhUiSearchIcon as any}
       titleText={<>{getResource('No results found')}</>}
     >
       <EmptyStateBody>

packages/module/src/QuickStartPanelContent.tsx

@@ -23,6 +23,7 @@ interface QuickStartPanelContentProps {
   handleClose: HandleClose;
   appendTo?: HTMLElement | (() => HTMLElement);
   isResizable?: boolean;
+  isGlass?: boolean;
   showClose?: boolean;
   footerClass?: string;
 }
@@ -48,6 +49,7 @@ const QuickStartPanelContent: FC<QuickStartPanelContentProps> = ({
   activeQuickStartID,
   appendTo,
   isResizable = true,
+  isGlass = true,
   showClose = true,
   footerClass,
   ...props
@@ -83,6 +85,7 @@ const QuickStartPanelContent: FC<QuickStartPanelContentProps> = ({
   const content = quickStart ? (
     <DrawerPanelContent
       isResizable={isResizable}
+      isGlass={isGlass}
       data-testid={`qs-drawer-${camelize(quickStart.spec.displayName)}`}
       data-qs={`qs-step-${getStep()}`}
       data-test="quickstart drawer"

packages/module/src/catalog/QuickStartTile.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useMemo } from 'react';
-import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
+import RhUiRocketFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-rocket-fill-icon';
 import { FallbackImg } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStart, QuickStartStatus } from '../utils/quick-start-types';
@@ -8,7 +8,7 @@ import QuickStartTileDescription from './QuickStartTileDescription';
 import QuickStartTileFooter from './QuickStartTileFooter';
 import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
 import QuickStartTileHeader from './QuickStartTileHeader';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
+import RhUiBookmarkIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-bookmark-icon';
 import {
   Card,
   CardBody,
@@ -22,7 +22,7 @@ import {
   Stack,
   Label,
 } from '@patternfly/react-core';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-clock-fill-icon';
 import { StatusIcon } from '@console/shared';
 import './QuickStartTile.scss';
 
@@ -87,7 +87,7 @@ const QuickStartTile: FC<QuickStartTileProps> = ({
           src={icon as string}
           alt=""
           className="pfext-catalog-item-icon__img"
-          fallback={<RocketIcon />}
+          fallback={<RhUiRocketFillIcon />}
         />
       </Icon>
     );
@@ -121,7 +121,7 @@ const QuickStartTile: FC<QuickStartTileProps> = ({
     );
   }, [footer, id, link, status, tasks?.length]);
 
-  const ActionIcon = action?.icon || OutlinedBookmarkIcon;
+  const ActionIcon = action?.icon || RhUiBookmarkIcon;
   const additionalAction = action ? (
     <Button
       aria-label={action['aria-label']}
@@ -156,7 +156,7 @@ const QuickStartTile: FC<QuickStartTileProps> = ({
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             {type && <Label color={type.color}>{type.text}</Label>}
             {durationMinutes && (
-              <Label variant="outline" data-test="duration" icon={<OutlinedClockIcon />}>
+              <Label variant="outline" data-test="duration" icon={<RhUiClockFillIcon />}>
                 {getResource('{{duration, number}} minutes', durationMinutes).replace(
                   '{{duration, number}}',
                   durationMinutes,

packages/module/src/catalog/QuickStartTileDescription.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext, useRef } from 'react';
 import { Button, Flex, Popover } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 
@@ -38,7 +38,7 @@ const QuickStartTileDescription: FC<QuickStartTileDescriptionProps> = ({
             }}
             aria-label={getResource('Show prerequisites')}
           >
-            <InfoCircleIcon />
+            <RhUiInformationFillIcon />
           </Button>
           <Popover
             aria-label={getResource('Prerequisites')}

packages/module/src/catalog/QuickStartTileFooterExternal.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Button, Flex, FlexItem } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-external-link-fill-icon';
 import { QuickStartExternal } from '../utils/quick-start-types';
 
 interface QuickStartTileFooterProps {
@@ -22,7 +22,7 @@ const QuickStartTileFooterExternal: FC<QuickStartTileFooterProps> = ({ link, qui
           variant="link"
           aria-label={`Open documentation in new window`}
           isInline
-          icon={<ExternalLinkAltIcon />}
+          icon={<RhUiExternalLinkFillIcon />}
           iconPosition="right"
           id={quickStartId}
           aria-labelledby={`${quickStartId}-external ${quickStartId}`}

packages/module/src/controller/QuickStartConclusion.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext } from 'react';
 import { Button } from '@patternfly/react-core';
-import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
+import RhUiArrowRightIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-arrow-right-icon';
 import QuickStartMarkdownView from '../QuickStartMarkdownView';
 import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
 import { QuickStart, QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
@@ -45,7 +45,7 @@ const QuickStartConclusion: FC<QuickStartConclusionProps> = ({
             variant="link"
             onClick={() => onQuickStartChange(nextQuickStart.metadata.name)}
             isInline
-            icon={<ArrowRightIcon />}
+            icon={<RhUiArrowRightIcon />}
             iconPosition="end"
             isBlock
             key={index}