From faf45e4700360413c8248f7371a6a572534e29a1 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Fri, 16 Jan 2026 13:38:43 -0500 Subject: [PATCH 1/4] feat(icons): investigating pf-rh icon hotswapping --- packages/react-icons/scripts/writeIcons.mjs | 40 +-- packages/react-icons/src/createIcon.tsx | 160 ++++++++-- packages/react-icons/src/pfToRhIcons.js | 316 ++++++++++++++++++++ 3 files changed, 471 insertions(+), 45 deletions(-) create mode 100644 packages/react-icons/src/pfToRhIcons.js diff --git a/packages/react-icons/scripts/writeIcons.mjs b/packages/react-icons/scripts/writeIcons.mjs index a4c58a700f4..3ae962c3ce6 100644 --- a/packages/react-icons/scripts/writeIcons.mjs +++ b/packages/react-icons/scripts/writeIcons.mjs @@ -3,7 +3,7 @@ import { outputFileSync, ensureDirSync } from 'fs-extra/esm'; import { generateIcons } from './generateIcons.mjs'; import { createElement } from 'react'; import { renderToString } from 'react-dom/server'; - +import { pfToRhIcons } from '../src/pfToRhIcons.js'; import * as url from 'url'; const __dirname = url.fileURLToPath(new URL('.', import.meta.url)); @@ -17,19 +17,15 @@ const staticDir = join(outDir, 'static'); const removeSnake = (s) => s.toUpperCase().replace('-', '').replace('_', ''); const toCamel = (s) => `${s[0].toUpperCase()}${s.substr(1).replace(/([-_][\w])/gi, removeSnake)}`; -const writeCJSExport = (fname, jsName, icon) => { +const writeCJSExport = (fname, jsName, icon, rhUiIcon = null) => { outputFileSync( join(outDir, 'js/icons', `${fname}.js`), `"use strict" exports.__esModule = true; exports.${jsName}Config = { name: '${jsName}', - height: ${icon.height}, - width: ${icon.width}, - svgPath: ${JSON.stringify(icon.svgPathData)}, - yOffset: ${icon.yOffset || 0}, - xOffset: ${icon.xOffset || 0}, - svgClassName: ${JSON.stringify(icon.svgClassName)}, + icon: ${JSON.stringify(icon)}, + rhUiIcon: ${rhUiIcon ? JSON.stringify(rhUiIcon) : 'null'}, }; exports.${jsName} = require('../createIcon').createIcon(exports.${jsName}Config); exports["default"] = exports.${jsName}; @@ -37,19 +33,15 @@ exports["default"] = exports.${jsName}; ); }; -const writeESMExport = (fname, jsName, icon) => { +const writeESMExport = (fname, jsName, icon, rhUiIcon = null) => { outputFileSync( join(outDir, 'esm/icons', `${fname}.js`), `import { createIcon } from '../createIcon'; export const ${jsName}Config = { name: '${jsName}', - height: ${icon.height}, - width: ${icon.width}, - svgPath: ${JSON.stringify(icon.svgPathData)}, - yOffset: ${icon.yOffset || 0}, - xOffset: ${icon.xOffset || 0}, - svgClassName: ${JSON.stringify(icon.svgClassName)}, + icon: ${JSON.stringify(icon)}, + rhUiIcon: ${rhUiIcon ? JSON.stringify(rhUiIcon) : 'null'}, }; export const ${jsName} = createIcon(${jsName}Config); @@ -59,17 +51,13 @@ export default ${jsName}; ); }; -const writeDTSExport = (fname, jsName, icon) => { +const writeDTSExport = (fname, jsName, icon, rhUiIcon = null) => { const text = `import { ComponentClass } from 'react'; import { SVGIconProps } from '../createIcon'; export declare const ${jsName}Config: { name: '${jsName}', - height: ${icon.height}, - width: ${icon.width}, - svgPath: ${JSON.stringify(icon.svgPathData)}, - yOffset: ${icon.yOffset || 0}, - xOffset: ${icon.xOffset || 0}, - svgClassName: ${JSON.stringify(icon.svgClassName)}, + icon: ${JSON.stringify(icon)}, + rhUiIcon: ${rhUiIcon ? JSON.stringify(rhUiIcon) : 'null'}, }; export declare const ${jsName}: ComponentClass; export default ${jsName}; @@ -133,9 +121,11 @@ function writeIcons(icons) { Object.entries(icons).forEach(([iconName, icon]) => { const fname = `${iconName}-icon`; const jsName = `${toCamel(iconName)}Icon`; - writeESMExport(fname, jsName, icon); - writeCJSExport(fname, jsName, icon); - writeDTSExport(fname, jsName, icon); + + const altIcon = pfToRhIcons[jsName] ? pfToRhIcons[jsName].icon : null; + writeESMExport(fname, jsName, icon, altIcon); + writeCJSExport(fname, jsName, icon, altIcon); + writeDTSExport(fname, jsName, icon, altIcon); index.push({ fname, jsName }); }); diff --git a/packages/react-icons/src/createIcon.tsx b/packages/react-icons/src/createIcon.tsx index b447c039b72..60b0c668d05 100644 --- a/packages/react-icons/src/createIcon.tsx +++ b/packages/react-icons/src/createIcon.tsx @@ -4,45 +4,96 @@ export interface SVGPathObject { path: string; className?: string; } + export interface IconDefinition { name?: string; width: number; height: number; - svgPath: string | SVGPathObject[]; + svgPathData: string | SVGPathObject[]; xOffset?: number; yOffset?: number; svgClassName?: string; } +export interface CreateIconProps extends IconDefinition { + name?: string; + icon?: IconDefinition; + rhUiIcon?: IconDefinition | null; +} + export interface SVGIconProps extends Omit, 'ref'> { title?: string; className?: string; + /* Indicates the icon should render using alternate svg data for unified theme */ + set?: 'default' | 'unified'; } let currentId = 0; +const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); /** * Factory to create Icon class components for consumers */ -export function createIcon({ - name, - xOffset = 0, - yOffset = 0, - width, - height, - svgPath, - svgClassName -}: IconDefinition): React.ComponentClass { - return class SVGIcon extends Component { +export function createIcon({ name, icon, rhUiIcon = null }: CreateIconProps): React.ComponentClass { + return class SVGIcon extends Component { static displayName = name; id = `icon-title-${currentId++}`; + private observer: MutationObserver | null = null; + + constructor(props: SVGIconProps) { + super(props); + this.state = { themeClassVersion: 0 }; + } + + componentDidMount() { + if (rhUiIcon !== null && canUseDOM) { + this.observer = new MutationObserver((mutations) => { + for (const mutation of mutations) { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + const target = mutation.target as HTMLElement; + const hadClass = (mutation.oldValue || '').includes('pf-v6-theme-unified'); + const hasClass = target.classList.contains('pf-v6-theme-unified'); + + if (hadClass !== hasClass && this.props.set === undefined) { + this.setState((prevState) => ({ + themeClassVersion: prevState.themeClassVersion + 1 + })); + } + } + } + }); + + this.observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['class'], + attributeOldValue: true + }); + } + } + + componentWillUnmount() { + if (this.observer) { + this.observer.disconnect(); + this.observer = null; + } + } render() { - const { title, className: propsClassName, ...props } = this.props; + const { title, className: propsClassName, set, ...props } = this.props; + + const shouldUseAltData = + rhUiIcon !== null && + (set === 'unified' || + (set === undefined && canUseDOM && document.documentElement.classList.contains('pf-v6-theme-unified'))); + + const iconData = shouldUseAltData ? rhUiIcon : icon; + const { xOffset, yOffset, width, height, svgClassName, svgPathData } = iconData ?? {}; + const _xOffset = xOffset ?? 0; + const _yOffset = yOffset ?? 0; const hasTitle = Boolean(title); - const viewBox = [xOffset, yOffset, width, height].join(' '); + const viewBox = [_xOffset, _yOffset, width, height].join(' '); const classNames = ['pf-v6-svg']; if (svgClassName) { @@ -52,6 +103,14 @@ export function createIcon({ classNames.push(propsClassName); } + const svgPaths = Array.isArray(svgPathData) ? ( + svgPathData.map((pathObject, index) => ( + + )) + ) : ( + + ); + return ( , 'ref'>)} // Lie. > {hasTitle && {title}} - {Array.isArray(svgPath) ? ( - svgPath.map((pathObject, index) => ( - - )) - ) : ( - - )} + {svgPaths} ); + + // Alternate CSS method tinkering + // TODO: remove or refactor to use this method + // Below works for paths, but not viewbox without needing the MutationObserver which would be nice to not have when using CSS method + // May be able to use two separate svgs instead of paths instead if going this route + + // const defaultSvgPathData = Array.isArray(icon?.svgPathData) ? ( + // icon?.svgPathData.map((pathObject, index) => ( + // + // )) + // ) : ( + // + // ); + + // const rhUiSvgPathData = + // rhUiIcon?.svgPathData && Array.isArray(rhUiIcon?.svgPathData) ? ( + // rhUiIcon?.svgPathData.map((pathObject, index) => ( + // + // )) + // ) : ( + // + // ); + + // const finalSvgPath = + // rhUiIcon !== null ? ( + // <> + // {defaultSvgPathData} + // {rhUiSvgPathData} + // + // ) : ( + // pfSvgPathData + // ); + + // return ( + // , 'ref'>)} // Lie. + // > + // {hasTitle && {title}} + // + // {finalSvgPath} + // + // ); } }; } diff --git a/packages/react-icons/src/pfToRhIcons.js b/packages/react-icons/src/pfToRhIcons.js new file mode 100644 index 00000000000..339c54eb9d6 --- /dev/null +++ b/packages/react-icons/src/pfToRhIcons.js @@ -0,0 +1,316 @@ +import rhIconsUI from '../scripts/icons/rhIconsUI.mjs'; + +// Helper function to get icon data, handling cases where icon might not exist +const getIconData = (iconName) => rhIconsUI[iconName] || null; + +// Generated using Cursor from design's google sheet mapping data. +// Additional mappings were added based on rh-ui icon names that matched existing icons. +export const pfToRhIcons = { + // design sheet mappings + AddCircleOIcon: { name: 'rh-ui-add-circle', icon: getIconData('rh-ui-add-circle') }, + AngleDoubleLeftIcon: { name: 'rh-ui-double-caret-left', icon: getIconData('rh-ui-double-caret-left') }, + AngleDoubleRightIcon: { name: 'rh-ui-double-caret-right', icon: getIconData('rh-ui-double-caret-right') }, + AngleDownIcon: { name: 'rh-ui-caret-down', icon: getIconData('rh-ui-caret-down') }, + AngleLeftIcon: { name: 'rh-ui-caret-left', icon: getIconData('rh-ui-caret-left') }, + AngleRightIcon: { name: 'rh-ui-caret-right', icon: getIconData('rh-ui-caret-right') }, + AngleUpIcon: { name: 'rh-ui-caret-up', icon: getIconData('rh-ui-caret-up') }, + ArrowCircleDownIcon: { name: 'rh-ui-arrow-circle-down', icon: getIconData('rh-ui-arrow-circle-down') }, + ArrowCircleUpIcon: { name: 'rh-ui-arrow-circle-up', icon: getIconData('rh-ui-arrow-circle-up') }, + ArrowRightIcon: { name: 'rh-ui-arrow-right', icon: getIconData('rh-ui-arrow-right') }, + ArrowsAltVIcon: { name: 'rh-ui-arrow-up-down', icon: getIconData('rh-ui-arrow-up-down') }, + AsleepIcon: { name: 'rh-ui-asleep', icon: getIconData('rh-ui-asleep') }, + AttentionBellIcon: { name: 'rh-ui-attention-bell', icon: getIconData('rh-ui-attention-bell') }, + AutomationIcon: { name: 'rh-ui-automation', icon: getIconData('rh-ui-automation') }, + BalanceScaleIcon: { name: 'rh-ui-scale-balanced', icon: getIconData('rh-ui-scale-balanced') }, + BanIcon: { name: 'rh-ui-ban', icon: getIconData('rh-ui-ban') }, + BarsIcon: { name: 'rh-ui-menu-bars', icon: getIconData('rh-ui-menu-bars') }, + BellIcon: { name: 'rh-ui-notification', icon: getIconData('rh-ui-notification') }, + BlueprintIcon: { name: 'rh-ui-blueprint', icon: getIconData('rh-ui-blueprint') }, + BugIcon: { name: 'rh-ui-bug', icon: getIconData('rh-ui-bug') }, + BundleIcon: { name: 'rh-ui-cubes', icon: getIconData('rh-ui-cubes') }, + CaretDownIcon: { name: 'rh-ui-caret-down', icon: getIconData('rh-ui-caret-down') }, + CatalogIcon: { name: 'rh-ui-catalog-alt', icon: getIconData('rh-ui-catalog-alt') }, + CheckCircleIcon: { name: 'rh-ui-check-circle', icon: getIconData('rh-ui-check-circle') }, + CheckIcon: { name: 'rh-ui-check', icon: getIconData('rh-ui-check') }, + ClipboardCheckIcon: { name: 'rh-ui-check-clipboard', icon: getIconData('rh-ui-check-clipboard') }, + CloudSecurityIcon: { name: 'rh-ui-cloud-security', icon: getIconData('rh-ui-cloud-security') }, + CloudTenantIcon: { name: 'rh-ui-cloud-tenant', icon: getIconData('rh-ui-cloud-tenant') }, + ClusterIcon: { name: 'rh-ui-server-stack', icon: getIconData('rh-ui-server-stack') }, + CodeBranchIcon: { name: 'rh-ui-branch', icon: getIconData('rh-ui-branch') }, + CodeIcon: { name: 'rh-ui-code', icon: getIconData('rh-ui-code') }, + CogIcon: { name: 'rh-ui-settings', icon: getIconData('rh-ui-settings') }, + ColumnsIcon: { name: 'rh-ui-columns', icon: getIconData('rh-ui-columns') }, + CompressArrowsAltIcon: { name: 'rh-ui-compress-arrows', icon: getIconData('rh-ui-compress-arrows') }, + CompressIcon: { name: 'rh-ui-compress', icon: getIconData('rh-ui-compress') }, + ConnectedIcon: { name: 'rh-ui-connected', icon: getIconData('rh-ui-connected') }, + CopyIcon: { name: 'rh-ui-copy', icon: getIconData('rh-ui-copy') }, + CriticalRiskIcon: { name: 'rh-ui-severity-critical-fill', icon: getIconData('rh-ui-severity-critical-fill') }, + CubeIcon: { name: 'rh-ui-container', icon: getIconData('rh-ui-container') }, + CubesIcon: { name: 'rh-ui-module', icon: getIconData('rh-ui-module') }, + DatabaseIcon: { name: 'rh-ui-storage', icon: getIconData('rh-ui-storage') }, + DataProcessorIcon: { name: 'rh-ui-data-processor', icon: getIconData('rh-ui-data-processor') }, + DataSinkIcon: { name: 'rh-ui-data-sink', icon: getIconData('rh-ui-data-sink') }, + DataSourceIcon: { name: 'rh-ui-data-source', icon: getIconData('rh-ui-data-source') }, + DegradedIcon: { name: 'rh-ui-degraded', icon: getIconData('rh-ui-degraded') }, + DesktopIcon: { name: 'rh-ui-desktop', icon: getIconData('rh-ui-desktop') }, + DisconnectedIcon: { name: 'rh-ui-disconnected', icon: getIconData('rh-ui-disconnected') }, + DownloadIcon: { name: 'rh-ui-download', icon: getIconData('rh-ui-download') }, + EllipsisVIcon: { name: 'rh-ui-ellipsis-vertical', icon: getIconData('rh-ui-ellipsis-vertical') }, + EnhancementIcon: { name: 'rh-ui-enhancement', icon: getIconData('rh-ui-enhancement') }, + EnterpriseIcon: { name: 'rh-ui-enterprise', icon: getIconData('rh-ui-enterprise') }, + ExclamationCircleIcon: { name: 'rh-ui-error', icon: getIconData('rh-ui-error') }, + ExclamationTriangleIcon: { name: 'rh-ui-warning', icon: getIconData('rh-ui-warning') }, + ExpandArrowsAltIcon: { name: 'rh-ui-expand-arrows', icon: getIconData('rh-ui-expand-arrows') }, + ExpandIcon: { name: 'rh-ui-expand', icon: getIconData('rh-ui-expand') }, + ExportIcon: { name: 'rh-ui-export', icon: getIconData('rh-ui-export') }, + ExternalLinkAltIcon: { name: 'rh-ui-external-link', icon: getIconData('rh-ui-external-link') }, + EyeIcon: { name: 'rh-ui-view', icon: getIconData('rh-ui-view') }, + EyeSlashIcon: { name: 'rh-ui-view-off', icon: getIconData('rh-ui-view-off') }, + FileIcon: { name: 'rh-ui-document', icon: getIconData('rh-ui-document') }, + FilterIcon: { name: 'rh-ui-filter', icon: getIconData('rh-ui-filter') }, + FlagIcon: { name: 'rh-ui-flag', icon: getIconData('rh-ui-flag') }, + FolderIcon: { name: 'rh-ui-folder', icon: getIconData('rh-ui-folder') }, + FolderOpenIcon: { name: 'rh-ui-folder-open', icon: getIconData('rh-ui-folder-open') }, + GripHorizontalIcon: { name: 'rh-ui-grip-horizontal', icon: getIconData('rh-ui-grip-horizontal') }, + GripVerticalIcon: { name: 'rh-ui-grip-vertical', icon: getIconData('rh-ui-grip-vertical') }, + HistoryIcon: { name: 'rh-ui-history', icon: getIconData('rh-ui-history') }, + HomeIcon: { name: 'rh-ui-home', icon: getIconData('rh-ui-home') }, + ImageIcon: { name: 'rh-ui-image', icon: getIconData('rh-ui-image') }, + ImportIcon: { name: 'rh-ui-import', icon: getIconData('rh-ui-import') }, + InfoCircleIcon: { name: 'rh-ui-information', icon: getIconData('rh-ui-information') }, + InfrastructureIcon: { name: 'rh-ui-infrastructure', icon: getIconData('rh-ui-infrastructure') }, + InProgressIcon: { name: 'rh-ui-in-progress', icon: getIconData('rh-ui-in-progress') }, + IntegrationIcon: { name: 'rh-ui-puzzle-piece', icon: getIconData('rh-ui-puzzle-piece') }, + KeyIcon: { name: 'rh-ui-key', icon: getIconData('rh-ui-key') }, + LockIcon: { name: 'rh-ui-lock', icon: getIconData('rh-ui-lock') }, + LockOpenIcon: { name: 'rh-ui-unlock', icon: getIconData('rh-ui-unlock') }, + LongArrowAltDownIcon: { name: 'rh-ui-long-arrow-down', icon: getIconData('rh-ui-long-arrow-down') }, + LongArrowAltUpIcon: { name: 'rh-ui-long-arrow-up', icon: getIconData('rh-ui-long-arrow-up') }, + MemoryIcon: { name: 'rh-ui-memory', icon: getIconData('rh-ui-memory') }, + MicrochipIcon: { name: 'rh-ui-circuit', icon: getIconData('rh-ui-circuit') }, + MiddlewareIcon: { name: 'rh-ui-path', icon: getIconData('rh-ui-path') }, + MigrationIcon: { name: 'rh-ui-migrate', icon: getIconData('rh-ui-migrate') }, + MinusCircleIcon: { name: 'rh-ui-minus-circle', icon: getIconData('rh-ui-minus-circle') }, + MinusIcon: { name: 'rh-ui-minus', icon: getIconData('rh-ui-minus') }, + ModuleIcon: { name: 'rh-ui-module', icon: getIconData('rh-ui-module') }, + MonitoringIcon: { name: 'rh-ui-monitoring', icon: getIconData('rh-ui-monitoring') }, + MulticlusterIcon: { name: 'rh-ui-cluster', icon: getIconData('rh-ui-cluster') }, + NetworkIcon: { name: 'rh-ui-network', icon: getIconData('rh-ui-network') }, + OffIcon: { name: 'rh-ui-off', icon: getIconData('rh-ui-off') }, + OpenDrawerRightIcon: { name: 'rh-ui-open-drawer-right', icon: getIconData('rh-ui-open-drawer-right') }, + OptimizeIcon: { name: 'rh-ui-optimize', icon: getIconData('rh-ui-optimize') }, + OutlinedCalendarAltIcon: { name: 'rh-ui-calendar', icon: getIconData('rh-ui-calendar') }, + OutlinedClockIcon: { name: 'rh-ui-clock', icon: getIconData('rh-ui-clock') }, + OutlinedCommentsIcon: { name: 'rh-ui-comments', icon: getIconData('rh-ui-comments') }, + OutlinedHddIcon: { name: 'rh-ui-hard-drive', icon: getIconData('rh-ui-hard-drive') }, + OutlinedQuestionCircleIcon: { name: 'rh-ui-question-mark-circle', icon: getIconData('rh-ui-question-mark-circle') }, + OutlinedWindowRestoreIcon: { name: 'rh-ui-restore-window', icon: getIconData('rh-ui-restore-window') }, + PackageIcon: { name: 'rh-ui-package', icon: getIconData('rh-ui-package') }, + PauseCircleIcon: { name: 'rh-ui-pause-circle', icon: getIconData('rh-ui-pause-circle') }, + PauseIcon: { name: 'rh-ui-pause', icon: getIconData('rh-ui-pause') }, + PencilAltIcon: { name: 'rh-ui-edit', icon: getIconData('rh-ui-edit') }, + PendingIcon: { name: 'rh-ui-pending', icon: getIconData('rh-ui-pending') }, + PficonNetworkRangeIcon: { name: 'rh-ui-connected', icon: getIconData('rh-ui-connected') }, + PficonTemplateIcon: { name: 'rh-ui-template', icon: getIconData('rh-ui-template') }, + PficonVcenterIcon: { name: 'rh-ui-virtual-machine-center', icon: getIconData('rh-ui-virtual-machine-center') }, + PlayIcon: { name: 'rh-ui-play', icon: getIconData('rh-ui-play') }, + PlusIcon: { name: 'rh-ui-add', icon: getIconData('rh-ui-add') }, + PortIcon: { name: 'rh-ui-port', icon: getIconData('rh-ui-port') }, + PowerOffIcon: { name: 'rh-ui-power', icon: getIconData('rh-ui-power') }, + PrintIcon: { name: 'rh-ui-print', icon: getIconData('rh-ui-print') }, + PrivateIcon: { name: 'rh-ui-lock', icon: getIconData('rh-ui-lock') }, + ProcessAutomationIcon: { name: 'rh-ui-process-automation', icon: getIconData('rh-ui-process-automation') }, + QuestionCircleIcon: { name: 'rh-ui-question-mark-circle', icon: getIconData('rh-ui-question-mark-circle') }, + RedoIcon: { name: 'rh-ui-redo', icon: getIconData('rh-ui-redo') }, + RegionsIcon: { name: 'rh-ui-regions', icon: getIconData('rh-ui-regions') }, + RegistryIcon: { name: 'rh-ui-registry', icon: getIconData('rh-ui-registry') }, + ReplicatorIcon: { name: 'rh-ui-replicator', icon: getIconData('rh-ui-replicator') }, + RepositoryIcon: { name: 'rh-ui-folders', icon: getIconData('rh-ui-folders') }, + ResourcesAlmostEmptyIcon: { name: 'rh-ui-resources-almost-empty', icon: getIconData('rh-ui-resources-almost-empty') }, + ResourcesAlmostFullIcon: { name: 'rh-ui-resources-almost-full', icon: getIconData('rh-ui-resources-almost-full') }, + ResourcesEmptyIcon: { name: 'rh-ui-resources-empty', icon: getIconData('rh-ui-resources-empty') }, + ResourcesFullIcon: { name: 'rh-ui-resources-full', icon: getIconData('rh-ui-resources-full') }, + RouteIcon: { name: 'rh-ui-route', icon: getIconData('rh-ui-route') }, + RunningIcon: { name: 'rh-ui-running', icon: getIconData('rh-ui-running') }, + SaveIcon: { name: 'rh-ui-save', icon: getIconData('rh-ui-save') }, + SearchIcon: { name: 'rh-ui-search', icon: getIconData('rh-ui-search') }, + SearchMinusIcon: { name: 'rh-ui-zoom-out', icon: getIconData('rh-ui-zoom-out') }, + SearchPlusIcon: { name: 'rh-ui-zoom-in', icon: getIconData('rh-ui-zoom-in') }, + ServerGroupIcon: { name: 'rh-ui-server-stack', icon: getIconData('rh-ui-server-stack') }, + ServiceCatalogIcon: { name: 'rh-ui-catalog-alt', icon: getIconData('rh-ui-catalog-alt') }, + ServiceIcon: { name: 'rh-ui-kubernetes-service', icon: getIconData('rh-ui-kubernetes-service') }, + SeverityCriticalIcon: { name: 'rh-ui-severity-critical-fill', icon: getIconData('rh-ui-severity-critical-fill') }, + SeverityImportantIcon: { name: 'rh-ui-severity-important-fill', icon: getIconData('rh-ui-severity-important-fill') }, + SeverityMinorIcon: { name: 'rh-ui-severity-minor-fill', icon: getIconData('rh-ui-severity-minor-fill') }, + SeverityModerateIcon: { name: 'rh-ui-severity-moderate-fill', icon: getIconData('rh-ui-severity-moderate-fill') }, + SeverityNoneIcon: { name: 'rh-ui-severity-none-fill', icon: getIconData('rh-ui-severity-none-fill') }, + SeverityUndefinedIcon: { name: 'rh-ui-severity-undefined-fill', icon: getIconData('rh-ui-severity-undefined-fill') }, + ShareSquareIcon: { name: 'rh-ui-share-alt', icon: getIconData('rh-ui-share-alt') }, + SortAmountDownAltIcon: { + name: 'rh-ui-sort-down-small-to-large', + icon: getIconData('rh-ui-sort-down-small-to-large') + }, + SortAmountDownIcon: { name: 'rh-ui-sort-down-large-to-small', icon: getIconData('rh-ui-sort-down-large-to-small') }, + StarIcon: { name: 'rh-ui-star', icon: getIconData('rh-ui-star') }, + StorageDomainIcon: { name: 'rh-ui-storage-domain', icon: getIconData('rh-ui-storage-domain') }, + SyncAltIcon: { name: 'rh-ui-sync', icon: getIconData('rh-ui-sync') }, + TableIcon: { name: 'rh-ui-table', icon: getIconData('rh-ui-table') }, + TachometerAltIcon: { name: 'rh-ui-speedometer', icon: getIconData('rh-ui-speedometer') }, + TagIcon: { name: 'rh-ui-tag', icon: getIconData('rh-ui-tag') }, + TaskIcon: { name: 'rh-ui-task', icon: getIconData('rh-ui-task') }, + TenantIcon: { name: 'rh-ui-tenant', icon: getIconData('rh-ui-tenant') }, + ThIcon: { name: 'rh-ui-thumbnail-view-small', icon: getIconData('rh-ui-thumbnail-view-small') }, + ThLargeIcon: { name: 'rh-ui-thumbnail-view-large', icon: getIconData('rh-ui-thumbnail-view-large') }, + ThumbtackIcon: { name: 'rh-ui-thumbtack', icon: getIconData('rh-ui-thumbtack') }, + TimesCircleIcon: { name: 'rh-ui-close-circle', icon: getIconData('rh-ui-close-circle') }, + TimesIcon: { name: 'rh-ui-close', icon: getIconData('rh-ui-close') }, + TopologyIcon: { name: 'rh-ui-topology', icon: getIconData('rh-ui-topology') }, + TrashIcon: { name: 'rh-ui-trash', icon: getIconData('rh-ui-trash') }, + TrendDownIcon: { name: 'rh-ui-trend-down', icon: getIconData('rh-ui-trend-down') }, + TrendUpIcon: { name: 'rh-ui-trend-up', icon: getIconData('rh-ui-trend-up') }, + UndoIcon: { name: 'rh-ui-undo', icon: getIconData('rh-ui-undo') }, + UnknownIcon: { name: 'rh-ui-unknown', icon: getIconData('rh-ui-unknown') }, + UploadIcon: { name: 'rh-ui-upload', icon: getIconData('rh-ui-upload') }, + UserIcon: { name: 'rh-ui-profile', icon: getIconData('rh-ui-profile') }, + UsersIcon: { name: 'rh-ui-users', icon: getIconData('rh-ui-users') }, + VirtualMachineIcon: { name: 'rh-ui-virtual-server', icon: getIconData('rh-ui-virtual-server') }, + VolumeIcon: { name: 'rh-ui-storage', icon: getIconData('rh-ui-storage') }, + WrenchIcon: { name: 'rh-ui-build', icon: getIconData('rh-ui-build') }, + ZoneIcon: { name: 'rh-ui-zone', icon: getIconData('rh-ui-zone') }, + + // Cursor-generated direct mappings + AngleDoubleDownIcon: { name: 'rh-ui-double-caret-down', icon: getIconData('rh-ui-double-caret-down') }, + AngleDoubleUpIcon: { name: 'rh-ui-double-caret-up', icon: getIconData('rh-ui-double-caret-up') }, + ApplicationsIcon: { name: 'rh-ui-applications', icon: getIconData('rh-ui-applications') }, + ArrowCircleLeftIcon: { name: 'rh-ui-arrow-circle-left', icon: getIconData('rh-ui-arrow-circle-left') }, + ArrowCircleRightIcon: { name: 'rh-ui-arrow-circle-right', icon: getIconData('rh-ui-arrow-circle-right') }, + ArrowDownIcon: { name: 'rh-ui-arrow-down', icon: getIconData('rh-ui-arrow-down') }, + ArrowLeftIcon: { name: 'rh-ui-arrow-left', icon: getIconData('rh-ui-arrow-left') }, + ArrowUpIcon: { name: 'rh-ui-arrow-up', icon: getIconData('rh-ui-arrow-up') }, + BookmarkIcon: { name: 'rh-ui-bookmark', icon: getIconData('rh-ui-bookmark') }, + CarIcon: { name: 'rh-ui-car', icon: getIconData('rh-ui-car') }, + CaretLeftIcon: { name: 'rh-ui-caret-left', icon: getIconData('rh-ui-caret-left') }, + CaretRightIcon: { name: 'rh-ui-caret-right', icon: getIconData('rh-ui-caret-right') }, + CaretUpIcon: { name: 'rh-ui-caret-up', icon: getIconData('rh-ui-caret-up') }, + ClipboardIcon: { name: 'rh-ui-clipboard', icon: getIconData('rh-ui-clipboard') }, + CloudIcon: { name: 'rh-ui-cloud', icon: getIconData('rh-ui-cloud') }, + CommentIcon: { name: 'rh-ui-comment', icon: getIconData('rh-ui-comment') }, + EthernetIcon: { name: 'rh-ui-ethernet', icon: getIconData('rh-ui-ethernet') }, + FingerprintIcon: { name: 'rh-ui-fingerprint', icon: getIconData('rh-ui-fingerprint') }, + ForwardIcon: { name: 'rh-ui-forward', icon: getIconData('rh-ui-forward') }, + HourglassIcon: { name: 'rh-ui-hourglass', icon: getIconData('rh-ui-hourglass') }, + LanguageIcon: { name: 'rh-ui-language', icon: getIconData('rh-ui-language') }, + LinkIcon: { name: 'rh-ui-link', icon: getIconData('rh-ui-link') }, + ListIcon: { name: 'rh-ui-list', icon: getIconData('rh-ui-list') }, + MicrophoneIcon: { name: 'rh-ui-microphone', icon: getIconData('rh-ui-microphone') }, + NewProcessIcon: { name: 'rh-ui-new-process', icon: getIconData('rh-ui-new-process') }, + NotStartedIcon: { name: 'rh-ui-not-started', icon: getIconData('rh-ui-not-started') }, + PanelCloseIcon: { name: 'rh-ui-panel-close', icon: getIconData('rh-ui-panel-close') }, + PanelOpenIcon: { name: 'rh-ui-panel-open', icon: getIconData('rh-ui-panel-open') }, + PlayCircleIcon: { name: 'rh-ui-play-circle', icon: getIconData('rh-ui-play-circle') }, + PlugIcon: { name: 'rh-ui-plug', icon: getIconData('rh-ui-plug') }, + RobotIcon: { name: 'rh-ui-robot', icon: getIconData('rh-ui-robot') }, + RocketIcon: { name: 'rh-ui-rocket', icon: getIconData('rh-ui-rocket') }, + RssIcon: { name: 'rh-ui-rss', icon: getIconData('rh-ui-rss') }, + SecurityIcon: { name: 'rh-ui-security', icon: getIconData('rh-ui-security') }, + ServerIcon: { name: 'rh-ui-server', icon: getIconData('rh-ui-server') }, + ShareIcon: { name: 'rh-ui-share', icon: getIconData('rh-ui-share') }, + StopCircleIcon: { name: 'rh-ui-stop-circle', icon: getIconData('rh-ui-stop-circle') }, + StopIcon: { name: 'rh-ui-stop', icon: getIconData('rh-ui-stop') }, + TruckIcon: { name: 'rh-ui-truck', icon: getIconData('rh-ui-truck') }, + VolumeDownIcon: { name: 'rh-ui-volume-down', icon: getIconData('rh-ui-volume-down') }, + VolumeUpIcon: { name: 'rh-ui-volume-up', icon: getIconData('rh-ui-volume-up') }, + WindowsIcon: { name: 'rh-ui-windows', icon: getIconData('rh-ui-windows') } + + // Cursor-generated best-guess indirect mappings, need to verify before using + // BackwardIcon: { name: 'rh-ui-backwards', icon: getIconData('rh-ui-backwards') }, + // BuildIcon: { name: 'rh-ui-build-fill', icon: getIconData('rh-ui-build-fill') }, + // CalendarIcon: { name: 'rh-ui-calendar-fill', icon: getIconData('rh-ui-calendar-fill') }, + // CaretLeftIcon: { name: 'rh-ui-caret-left-fill', icon: getIconData('rh-ui-caret-left-fill') }, + // CaretRightIcon: { name: 'rh-ui-caret-right-fill', icon: getIconData('rh-ui-caret-right-fill') }, + // CaretUpIcon: { name: 'rh-ui-caret-up-fill', icon: getIconData('rh-ui-caret-up-fill') }, + // ClockIcon: { name: 'rh-ui-clock-fill', icon: getIconData('rh-ui-clock-fill') }, + // CloudDownloadAltIcon: { name: 'rh-ui-cloud-download', icon: getIconData('rh-ui-cloud-download') }, + // CloudUploadAltIcon: { name: 'rh-ui-cloud-upload', icon: getIconData('rh-ui-cloud-upload') }, + // CommentsIcon: { name: 'rh-ui-comments-fill', icon: getIconData('rh-ui-comments-fill') }, + // EditIcon: { name: 'rh-ui-edit-fill', icon: getIconData('rh-ui-edit-fill') }, + // GitlabIcon: { name: 'rh-ui-lab', icon: getIconData('rh-ui-lab') }, + // GraduationCapIcon: { name: 'rh-ui-graduation', icon: getIconData('rh-ui-graduation') }, + // MailBulkIcon: { name: 'rh-ui-mail', icon: getIconData('rh-ui-mail') }, + // MailchimpIcon: { name: 'rh-ui-mail', icon: getIconData('rh-ui-mail') }, + // PuzzlePieceIcon: { name: 'rh-ui-puzzle-piece-fill', icon: getIconData('rh-ui-puzzle-piece-fill') }, + // QuestionIcon: { name: 'rh-ui-question-mark', icon: getIconData('rh-ui-question-mark') }, + // ResourcePoolIcon: { name: 'rh-ui-resource', icon: getIconData('rh-ui-resource') }, + // ShareAltIcon: { name: 'rh-ui-share-alt-fill', icon: getIconData('rh-ui-share-alt-fill') }, + // SquareIcon: { name: 'rh-ui-add-square', icon: getIconData('rh-ui-add-square') }, + // SyncIcon: { name: 'rh-ui-sync-alt', icon: getIconData('rh-ui-sync-alt') }, + // TreeIcon: { name: 'rh-ui-tree-view', icon: getIconData('rh-ui-tree-view') }, + // UnlockIcon: { name: 'rh-ui-unlock-fill', icon: getIconData('rh-ui-unlock-fill') }, + // VoicemailIcon: { name: 'rh-ui-mail', icon: getIconData('rh-ui-mail') }, + // WindIcon: { name: 'rh-ui-window', icon: getIconData('rh-ui-window') } + + // Non-rh-ui icon mappings (commented out for now) + // AnchorIcon: { name: 'rh-standard-anchor', icon: getIconData('rh-standard-anchor') }, + // AtomIcon: { name: 'rh-standard-atom', icon: getIconData('rh-standard-atom') }, + // BinocularsIcon: { name: 'rh-standard-binoculars', icon: getIconData('rh-standard-binoculars') }, + // BlogIcon: { name: 'rh-standard-blog', icon: getIconData('rh-standard-blog') }, + // BookIcon: { name: 'rh-standard-book', icon: getIconData('rh-standard-book') }, + // BoxIcon: { name: 'rh-standard-box', icon: getIconData('rh-standard-box') }, + // BrainIcon: { name: 'rh-standard-brain', icon: getIconData('rh-standard-brain') }, + // CalculatorIcon: { name: 'rh-standard-calculator', icon: getIconData('rh-standard-calculator') }, + // CalendarIcon: { name: 'rh-standard-calendar', icon: getIconData('rh-standard-calendar') }, + // CameraIcon: { name: 'rh-standard-camera', icon: getIconData('rh-standard-camera') }, + // CaretLeftIcon: { name: 'rh-microns-caret-left', icon: getIconData('rh-microns-caret-left') }, + // CaretRightIcon: { name: 'rh-microns-caret-right', icon: getIconData('rh-microns-caret-right') }, + // CaretUpIcon: { name: 'rh-microns-caret-up', icon: getIconData('rh-microns-caret-up') }, + // CarrotIcon: { name: 'rh-standard-carrot', icon: getIconData('rh-standard-carrot') }, + // CityIcon: { name: 'rh-standard-city', icon: getIconData('rh-standard-city') }, + // ClockIcon: { name: 'rh-standard-clock', icon: getIconData('rh-standard-clock') }, + // CloseIcon: { name: 'rh-microns-close', icon: getIconData('rh-microns-close') }, + // CompassIcon: { name: 'rh-standard-compass', icon: getIconData('rh-standard-compass') }, + // CreditCardIcon: { name: 'rh-standard-credit-card', icon: getIconData('rh-standard-credit-card') }, + // CrossIcon: { name: 'rh-standard-cross', icon: getIconData('rh-standard-cross') }, + // DollarSignIcon: { name: 'rh-standard-dollar-sign', icon: getIconData('rh-standard-dollar-sign') }, + // EdgeIcon: { name: 'rh-standard-edge', icon: getIconData('rh-standard-edge') }, + // EnvelopeIcon: { name: 'rh-standard-envelope', icon: getIconData('rh-standard-envelope') }, + // FastForwardIcon: { name: 'rh-standard-fast-forward', icon: getIconData('rh-standard-fast-forward') }, + // FireExtinguisherIcon: { name: 'rh-standard-fire-extinguisher', icon: getIconData('rh-standard-fire-extinguisher') }, + // FishIcon: { name: 'rh-standard-fish', icon: getIconData('rh-standard-fish') }, + // GlobeIcon: { name: 'rh-standard-globe', icon: getIconData('rh-standard-globe') }, + // GraduationCapIcon: { name: 'rh-standard-graduation-cap', icon: getIconData('rh-standard-graduation-cap') }, + // HandshakeIcon: { name: 'rh-standard-handshake', icon: getIconData('rh-standard-handshake') }, + // HeadphonesIcon: { name: 'rh-standard-headphones', icon: getIconData('rh-standard-headphones') }, + // HeartIcon: { name: 'rh-standard-heart', icon: getIconData('rh-standard-heart') }, + // IndustryIcon: { name: 'rh-standard-industry', icon: getIconData('rh-standard-industry') }, + // InfoIcon: { name: 'rh-standard-info', icon: getIconData('rh-standard-info') }, + // KeyboardIcon: { name: 'rh-standard-keyboard', icon: getIconData('rh-standard-keyboard') }, + // LaptopIcon: { name: 'rh-standard-laptop', icon: getIconData('rh-standard-laptop') }, + // LungsIcon: { name: 'rh-standard-lungs', icon: getIconData('rh-standard-lungs') }, + // MapIcon: { name: 'rh-standard-map', icon: getIconData('rh-standard-map') }, + // MouseIcon: { name: 'rh-standard-mouse', icon: getIconData('rh-standard-mouse') }, + // NewspaperIcon: { name: 'rh-standard-newspaper', icon: getIconData('rh-standard-newspaper') }, + // PaintRollerIcon: { name: 'rh-standard-paint-roller', icon: getIconData('rh-standard-paint-roller') }, + // PenIcon: { name: 'rh-standard-pen', icon: getIconData('rh-standard-pen') }, + // PhoneIcon: { name: 'rh-standard-phone', icon: getIconData('rh-standard-phone') }, + // PiggyBankIcon: { name: 'rh-standard-piggy-bank', icon: getIconData('rh-standard-piggy-bank') }, + // PuzzlePieceIcon: { name: 'rh-standard-puzzle-piece', icon: getIconData('rh-standard-puzzle-piece') }, + // RainbowIcon: { name: 'rh-standard-rainbow', icon: getIconData('rh-standard-rainbow') }, + // RecycleIcon: { name: 'rh-standard-recycle', icon: getIconData('rh-standard-recycle') }, + // RibbonIcon: { name: 'rh-standard-ribbon', icon: getIconData('rh-standard-ribbon') }, + // SchoolIcon: { name: 'rh-standard-school', icon: getIconData('rh-standard-school') }, + // ShowerIcon: { name: 'rh-standard-shower', icon: getIconData('rh-standard-shower') }, + // SnowflakeIcon: { name: 'rh-standard-snowflake', icon: getIconData('rh-standard-snowflake') }, + // StopwatchIcon: { name: 'rh-standard-stopwatch', icon: getIconData('rh-standard-stopwatch') }, + // SunIcon: { name: 'rh-standard-sun', icon: getIconData('rh-standard-sun') }, + // TabletIcon: { name: 'rh-standard-tablet', icon: getIconData('rh-standard-tablet') }, + // ToolboxIcon: { name: 'rh-standard-toolbox', icon: getIconData('rh-standard-toolbox') }, + // TreeIcon: { name: 'rh-standard-tree', icon: getIconData('rh-standard-tree') }, + // TrophyIcon: { name: 'rh-standard-trophy', icon: getIconData('rh-standard-trophy') }, + // TshirtIcon: { name: 'rh-standard-tshirt', icon: getIconData('rh-standard-tshirt') }, + // UmbrellaIcon: { name: 'rh-standard-umbrella', icon: getIconData('rh-standard-umbrella') }, + // UtensilsIcon: { name: 'rh-standard-utensils', icon: getIconData('rh-standard-utensils') }, + // VideoIcon: { name: 'rh-standard-video', icon: getIconData('rh-standard-video') }, + // VolumeMuteIcon: { name: 'rh-standard-volume-mute', icon: getIconData('rh-standard-volume-mute') }, + // WifiIcon: { name: 'rh-standard-wifi', icon: getIconData('rh-standard-wifi') }, + // WindIcon: { name: 'rh-standard-wind', icon: getIconData('rh-standard-wind') } +}; From c85b84ecc59749fe128de9295e9a7e05dfd57ba3 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Fri, 16 Jan 2026 14:47:49 -0500 Subject: [PATCH 2/4] update createIcon tests for new structure --- .../src/__tests__/createIcon.test.tsx | 39 ++++++++++++------- packages/react-icons/src/createIcon.tsx | 2 +- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/packages/react-icons/src/__tests__/createIcon.test.tsx b/packages/react-icons/src/__tests__/createIcon.test.tsx index 2b0e36a6b6f..cfc8dd2115f 100644 --- a/packages/react-icons/src/__tests__/createIcon.test.tsx +++ b/packages/react-icons/src/__tests__/createIcon.test.tsx @@ -1,24 +1,35 @@ import { render, screen } from '@testing-library/react'; -import { createIcon } from '../createIcon'; +import { IconDefinition, CreateIconProps, createIcon, SVGPathObject } from '../createIcon'; -const iconDef = { +const multiPathIcon: IconDefinition = { name: 'IconName', width: 10, height: 20, - svgPath: 'svgPath' + svgPathData: [ + { path: 'svgPath1', className: 'class1' }, + { path: 'svgPath2', className: 'class2' } + ], + svgClassName: 'test' }; -const iconDefWithArrayPath = { +const singlePathIcon: IconDefinition = { name: 'IconName', width: 10, height: 20, - svgPath: [ - { path: 'svgPath1', className: 'class1' }, - { path: 'svgPath2', className: 'class2' } - ], + svgPathData: 'svgPath', svgClassName: 'test' }; +const iconDef: CreateIconProps = { + name: 'SinglePathIconName', + icon: singlePathIcon +}; + +const iconDefWithArrayPath: CreateIconProps = { + name: 'MultiPathIconName', + icon: multiPathIcon +}; + const SVGIcon = createIcon(iconDef); const SVGArrayIcon = createIcon(iconDefWithArrayPath); @@ -26,7 +37,7 @@ test('sets correct viewBox', () => { render(); expect(screen.getByRole('img', { hidden: true })).toHaveAttribute( 'viewBox', - `0 0 ${iconDef.width} ${iconDef.height}` + `0 0 ${singlePathIcon.width} ${singlePathIcon.height}` ); }); @@ -39,16 +50,16 @@ test('sets correct svgPath if array', () => { render(); const paths = screen.getByRole('img', { hidden: true }).querySelectorAll('path'); expect(paths).toHaveLength(2); - expect(paths[0]).toHaveAttribute('d', iconDefWithArrayPath.svgPath[0].path); - expect(paths[1]).toHaveAttribute('d', iconDefWithArrayPath.svgPath[1].path); - expect(paths[0]).toHaveClass(iconDefWithArrayPath.svgPath[0].className); - expect(paths[1]).toHaveClass(iconDefWithArrayPath.svgPath[1].className); + expect(paths[0]).toHaveAttribute('d', (multiPathIcon.svgPathData as SVGPathObject[])[0].path); + expect(paths[1]).toHaveAttribute('d', (multiPathIcon.svgPathData as SVGPathObject[])[1].path); + expect(paths[0]).toHaveClass((multiPathIcon.svgPathData as SVGPathObject[])[0].className ?? ''); + expect(paths[1]).toHaveClass((multiPathIcon.svgPathData as SVGPathObject[])[1].className ?? ''); }); test('sets correct svgClassName', () => { render(); const paths = screen.getByRole('img', { hidden: true }); - expect(paths).toHaveClass(iconDefWithArrayPath.svgClassName); + expect(paths).toHaveClass(multiPathIcon.svgClassName ?? ''); }); test('aria-hidden is true if no title is specified', () => { diff --git a/packages/react-icons/src/createIcon.tsx b/packages/react-icons/src/createIcon.tsx index 60b0c668d05..169675fab6f 100644 --- a/packages/react-icons/src/createIcon.tsx +++ b/packages/react-icons/src/createIcon.tsx @@ -15,7 +15,7 @@ export interface IconDefinition { svgClassName?: string; } -export interface CreateIconProps extends IconDefinition { +export interface CreateIconProps { name?: string; icon?: IconDefinition; rhUiIcon?: IconDefinition | null; From 8ef1ad4a96f04b26c3edb76049776f1e82c5bc61 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 19 Jan 2026 11:49:29 -0500 Subject: [PATCH 3/4] change to css svg logic --- packages/react-icons/src/createIcon.tsx | 325 +++++++++++++----------- 1 file changed, 183 insertions(+), 142 deletions(-) diff --git a/packages/react-icons/src/createIcon.tsx b/packages/react-icons/src/createIcon.tsx index 169675fab6f..0d10a01903d 100644 --- a/packages/react-icons/src/createIcon.tsx +++ b/packages/react-icons/src/createIcon.tsx @@ -29,171 +29,212 @@ export interface SVGIconProps extends Omit, 'ref'> { } let currentId = 0; -const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); +// const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); + +const createSvg = (icon: IconDefinition, iconClassName: string) => { + const { xOffset, yOffset, width, height, svgPathData, svgClassName } = icon ?? {}; + const _xOffset = xOffset ?? 0; + const _yOffset = yOffset ?? 0; + const viewBox = [_xOffset, _yOffset, width, height].join(' '); + + const classNames = []; + + if (svgClassName) { + classNames.push(svgClassName); + } + if (iconClassName) { + classNames.push(iconClassName); + } + + const svgPaths = + svgPathData && Array.isArray(svgPathData) ? ( + svgPathData.map((pathObject, index) => ( + + )) + ) : ( + + ); + + return ( + + {svgPaths} + + ); +}; /** * Factory to create Icon class components for consumers */ export function createIcon({ name, icon, rhUiIcon = null }: CreateIconProps): React.ComponentClass { - return class SVGIcon extends Component { + return class SVGIcon extends Component { + // return class SVGIcon extends Component { static displayName = name; id = `icon-title-${currentId++}`; - private observer: MutationObserver | null = null; + // private observer: MutationObserver | null = null; constructor(props: SVGIconProps) { super(props); - this.state = { themeClassVersion: 0 }; + // this.state = { themeClassVersion: 0 }; } - componentDidMount() { - if (rhUiIcon !== null && canUseDOM) { - this.observer = new MutationObserver((mutations) => { - for (const mutation of mutations) { - if (mutation.type === 'attributes' && mutation.attributeName === 'class') { - const target = mutation.target as HTMLElement; - const hadClass = (mutation.oldValue || '').includes('pf-v6-theme-unified'); - const hasClass = target.classList.contains('pf-v6-theme-unified'); - - if (hadClass !== hasClass && this.props.set === undefined) { - this.setState((prevState) => ({ - themeClassVersion: prevState.themeClassVersion + 1 - })); - } - } - } - }); - - this.observer.observe(document.documentElement, { - attributes: true, - attributeFilter: ['class'], - attributeOldValue: true - }); - } - } - - componentWillUnmount() { - if (this.observer) { - this.observer.disconnect(); - this.observer = null; - } - } + // componentDidMount() { + // if (rhUiIcon !== null && canUseDOM) { + // this.observer = new MutationObserver((mutations) => { + // for (const mutation of mutations) { + // if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + // const target = mutation.target as HTMLElement; + // const hadClass = (mutation.oldValue || '').includes('pf-v6-theme-unified'); + // const hasClass = target.classList.contains('pf-v6-theme-unified'); + + // if (hadClass !== hasClass && this.props.set === undefined) { + // this.setState((prevState) => ({ + // themeClassVersion: prevState.themeClassVersion + 1 + // })); + // } + // } + // } + // }); + + // this.observer.observe(document.documentElement, { + // attributes: true, + // attributeFilter: ['class'], + // attributeOldValue: true + // }); + // } + // } + + // componentWillUnmount() { + // if (this.observer) { + // this.observer.disconnect(); + // this.observer = null; + // } + // } render() { const { title, className: propsClassName, set, ...props } = this.props; - const shouldUseAltData = - rhUiIcon !== null && - (set === 'unified' || - (set === undefined && canUseDOM && document.documentElement.classList.contains('pf-v6-theme-unified'))); - - const iconData = shouldUseAltData ? rhUiIcon : icon; - const { xOffset, yOffset, width, height, svgClassName, svgPathData } = iconData ?? {}; - const _xOffset = xOffset ?? 0; - const _yOffset = yOffset ?? 0; - const hasTitle = Boolean(title); - const viewBox = [_xOffset, _yOffset, width, height].join(' '); - const classNames = ['pf-v6-svg']; - if (svgClassName) { - classNames.push(svgClassName); - } + if (propsClassName) { classNames.push(propsClassName); } - const svgPaths = Array.isArray(svgPathData) ? ( - svgPathData.map((pathObject, index) => ( - - )) - ) : ( - - ); - - return ( - , 'ref'>)} // Lie. - > - {hasTitle && {title}} - {svgPaths} - - ); - - // Alternate CSS method tinkering - // TODO: remove or refactor to use this method - // Below works for paths, but not viewbox without needing the MutationObserver which would be nice to not have when using CSS method - // May be able to use two separate svgs instead of paths instead if going this route - - // const defaultSvgPathData = Array.isArray(icon?.svgPathData) ? ( - // icon?.svgPathData.map((pathObject, index) => ( - // - // )) - // ) : ( - // - // ); - - // const rhUiSvgPathData = - // rhUiIcon?.svgPathData && Array.isArray(rhUiIcon?.svgPathData) ? ( - // rhUiIcon?.svgPathData.map((pathObject, index) => ( - // - // )) - // ) : ( - // - // ); - - // const finalSvgPath = - // rhUiIcon !== null ? ( - // <> - // {defaultSvgPathData} - // {rhUiSvgPathData} - // - // ) : ( - // pfSvgPathData - // ); - - // return ( - // , 'ref'>)} // Lie. - // > - // {hasTitle && {title}} - // - // {finalSvgPath} - // - // ); + if ((set === undefined && rhUiIcon === null) || set !== undefined) { + const iconData = set !== undefined && set === 'unified' ? rhUiIcon : icon; + const { xOffset, yOffset, width, height, svgPathData, svgClassName } = iconData ?? {}; + const _xOffset = xOffset ?? 0; + const _yOffset = yOffset ?? 0; + const viewBox = [_xOffset, _yOffset, width, height].join(' '); + + if (svgClassName) { + classNames.push(svgClassName); + } + + const svgPaths = + svgPathData && Array.isArray(svgPathData) ? ( + svgPathData.map((pathObject, index) => ( + + )) + ) : ( + + ); + + return ( + , 'ref'>)} // Lie. + > + {hasTitle && {title}} + {svgPaths} + + ); + } else { + let defaultIconClassName; + let rhUiIconClassName; + + const shouldRenderDefault = set === 'default' || (set === undefined && rhUiIcon !== null); + const shouldRenderRhUi = set === 'unified' || (set === undefined && rhUiIcon !== null); + + if (shouldRenderDefault) { + defaultIconClassName = 'pf-v6-icon-default'; + } + if (shouldRenderRhUi) { + rhUiIconClassName = 'pf-v6-icon-unified'; + } + + return ( + , 'ref'>)} // Lie. + > + {hasTitle && {title}} + {icon && shouldRenderDefault && createSvg(icon, set === undefined && defaultIconClassName)} + {rhUiIcon && shouldRenderRhUi && createSvg(rhUiIcon, set === undefined && rhUiIconClassName)} + + ); + } + + // React method w/ MutationObserver + // const shouldUseAltData = + // rhUiIcon !== null && + // (set === 'unified' || + // (set === undefined && canUseDOM && document.documentElement.classList.contains('pf-v6-theme-unified'))); + + // const iconData = shouldUseAltData ? rhUiIcon : icon; + // const { xOffset, yOffset, width, height, svgClassName, svgPathData } = iconData ?? {}; + // const _xOffset = xOffset ?? 0; + // const _yOffset = yOffset ?? 0; + + // const hasTitle = Boolean(title); + // const viewBox = [_xOffset, _yOffset, width, height].join(' '); + + // const classNames = ['pf-v6-svg']; + // if (svgClassName) { + // classNames.push(svgClassName); + // } + // if (propsClassName) { + // classNames.push(propsClassName); + // } + + // const svgPaths = Array.isArray(svgPathData) ? ( + // svgPathData.map((pathObject, index) => ( + // + // )) + // ) : ( + // + // ); + + // return ( + // , 'ref'>)} // Lie. + // > + // {hasTitle && {title}} + // {svgPaths} + // + // ); } }; } From 7e9e49a264d7c681b98db9d5d9f6afcf80238c2c Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 19 Jan 2026 12:55:14 -0500 Subject: [PATCH 4/4] upddate snapshots & logic for rhuiicon check --- .../__snapshots__/CodeEditor.test.tsx.snap | 60 +- .../AboutModalBoxCloseButton.test.tsx.snap | 60 +- .../AlertActionCloseButton.test.tsx.snap | 20 +- .../__snapshots__/AlertIcon.test.tsx.snap | 20 +- .../AlertActionCloseButton.test.tsx.snap | 20 +- .../__snapshots__/BackToTop.test.tsx.snap | 20 +- .../__snapshots__/Breadcrumb.test.tsx.snap | 20 +- .../__snapshots__/CardHeader.test.tsx.snap | 20 +- .../ClipboardCopyButton.test.tsx.snap | 20 +- .../ClipboardCopyToggle.test.tsx.snap | 20 +- .../DataListToggle.test.tsx.snap | 20 +- .../DataListToggle.test.tsx.snap | 20 +- .../__snapshots__/DatePicker.test.tsx.snap | 100 +- .../__snapshots__/Drawer.test.tsx.snap | 120 +- .../DualListSelector.test.tsx.snap | 20 +- .../EmptyStateIcon.test.tsx.snap | 20 +- .../ExpandableSection.test.tsx.snap | 100 +- .../FormFieldGroup.test.tsx.snap | 20 +- .../__snapshots__/FormSelect.test.tsx.snap | 240 +- .../__snapshots__/Icon.test.tsx.snap | 60 +- .../__snapshots__/JumpLinks.test.tsx.snap | 20 +- .../__snapshots__/Label.test.tsx.snap | 60 +- .../__snapshots__/LabelGroup.test.tsx.snap | 20 +- .../__snapshots__/LoginForm.test.tsx.snap | 20 +- .../__snapshots__/MenuToggle.test.tsx.snap | 200 +- .../__snapshots__/ModalBoxTitle.test.tsx.snap | 100 +- .../__snapshots__/ModalContent.test.tsx.snap | 20 +- .../MultipleFileUploadStatus.test.tsx.snap | 100 +- ...MultipleFileUploadStatusItem.test.tsx.snap | 280 ++- .../__snapshots__/NavExpandable.test.tsx.snap | 20 +- .../__tests__/__snapshots__/Nav.test.tsx.snap | 80 +- .../NotificationBadge.test.tsx.snap | 60 +- .../NotificationDrawerGroup.test.tsx.snap | 80 +- ...ficationDrawerListItemHeader.test.tsx.snap | 100 +- .../__snapshots__/NumberInput.test.tsx.snap | 580 ++++- .../__snapshots__/Page.test.tsx.snap | 540 ++++- .../PaginationNavigation.test.tsx.snap | 80 +- .../PaginationOptionsMenu.test.tsx.snap | 20 +- .../__snapshots__/Pagination.test.tsx.snap | 2080 +++++++++++++---- .../PopoverCloseButton.test.tsx.snap | 20 +- .../ProgressContainer.test.tsx.snap | 20 +- .../__snapshots__/Progress.test.tsx.snap | 60 +- .../__snapshots__/SearchInput.test.tsx.snap | 440 +++- .../__snapshots__/Switch.test.tsx.snap | 80 +- .../__snapshots__/OverflowTab.test.tsx.snap | 40 +- .../__snapshots__/Tabs.test.tsx.snap | 20 +- .../__snapshots__/TextInput.test.tsx.snap | 40 +- .../__snapshots__/Toolbar.test.tsx.snap | 60 +- .../TreeViewListItem.test.tsx.snap | 20 +- .../TreeViewSearch.test.tsx.snap | 20 +- .../__snapshots__/Chip.test.tsx.snap | 20 +- .../DualListSelector.test.tsx.snap | 540 ++++- .../__snapshots__/ModalBoxTitle.test.tsx.snap | 100 +- .../__snapshots__/ModalContent.test.tsx.snap | 160 +- .../__snapshots__/Tile.test.tsx.snap | 60 +- .../__snapshots__/WizardToggle.test.tsx.snap | 20 +- .../__snapshots__/Wizard.test.tsx.snap | 120 +- .../__snapshots__/DragDrop.test.tsx.snap | 60 +- packages/react-icons/src/createIcon.tsx | 2 +- .../__snapshots__/Table.test.tsx.snap | 920 ++++++-- .../SimpleDropdown.test.tsx.snap | 40 +- .../CheckboxSelectSnapshots.test.tsx.snap | 40 +- .../MultiTypeaheadSelect.test.tsx.snap | 40 +- .../__snapshots__/SimpleSelect.test.tsx.snap | 40 +- .../TypeaheadSelect.test.tsx.snap | 40 +- 65 files changed, 6785 insertions(+), 1697 deletions(-) diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap index 80f02fa90b6..ea4428ccf0e 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap @@ -34,12 +34,24 @@ exports[`Matches snapshot with control buttons enabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -64,12 +76,24 @@ exports[`Matches snapshot with control buttons enabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -94,12 +118,24 @@ exports[`Matches snapshot with control buttons enabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap index 2d721cf9cf6..030daff2189 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap @@ -22,12 +22,24 @@ exports[`AboutModalBoxCloseButton Test 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -57,12 +69,24 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -92,12 +116,24 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap index 9ebc77452b1..5113c0649ad 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -19,12 +19,24 @@ exports[`AlertActionCloseButton should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap index 00a41983f34..58f648ea06c 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap @@ -11,12 +11,24 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap index 98f1594e1b4..19a2ed0636f 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -28,12 +28,24 @@ exports[`Matches the snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap index 0905c8f41cd..93d9c1afc4d 100644 --- a/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap +++ b/packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap @@ -31,12 +31,24 @@ exports[`Matches the snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index c0ef331e2a7..764ac2d6670 100644 --- a/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -53,12 +53,24 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + - + + + + + + diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap index ed4e2052bf3..4e9faa08c6d 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap @@ -45,12 +45,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap index d4baa3e8223..f49ee2f9e3e 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap @@ -23,12 +23,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap index c7edd36fb32..e0a17342f1c 100644 --- a/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap @@ -32,12 +32,24 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap index d876e47445c..4a0c7eafe70 100644 --- a/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap +++ b/packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap @@ -32,12 +32,24 @@ exports[`Renders to match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap index 5ca4fb315f4..013458a69ea 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -51,12 +51,24 @@ exports[`With popover opened 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -110,12 +122,24 @@ exports[`With popover opened 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -161,12 +185,24 @@ exports[`With popover opened 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -215,12 +251,24 @@ exports[`With popover opened 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -844,12 +892,24 @@ exports[`disabled date picker 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 03220914f30..cc4fad2e0e3 100644 --- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -50,12 +50,24 @@ exports[`Drawer expands from bottom 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -142,12 +154,24 @@ exports[`Drawer has resizable callback and id 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -236,12 +260,24 @@ exports[`Drawer has resizable css and color variants 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -366,12 +402,24 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`] fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -439,12 +487,24 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -512,12 +572,24 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap index 63dab5eee9e..f152adbadef 100644 --- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap +++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap @@ -90,12 +90,24 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap index 8b9918bb6d2..66c3fc9e150 100644 --- a/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap +++ b/packages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snap @@ -29,12 +29,24 @@ exports[`Disclosure ExpandableSection 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -82,12 +94,24 @@ exports[`ExpandableSection 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -136,12 +160,24 @@ exports[`Renders ExpandableSection expanded 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -189,12 +225,24 @@ exports[`Renders ExpandableSection indented 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -241,12 +289,24 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap index de4e3c784d3..2eec471c52a 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap @@ -36,12 +36,24 @@ exports[`Check expandable form field group example against snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap index 3c6783c0926..d9aa1fd6244 100644 --- a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap +++ b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap @@ -32,12 +32,24 @@ exports[`FormSelect Disabled FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -76,12 +88,24 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -121,12 +145,24 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`] fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -164,12 +200,24 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -254,12 +302,24 @@ exports[`FormSelect Grouped FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -336,12 +396,24 @@ exports[`FormSelect Simple FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -380,12 +452,24 @@ exports[`FormSelect invalid FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -441,12 +537,24 @@ exports[`FormSelect validated success FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -502,12 +622,24 @@ exports[`FormSelect validated warning FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 576 512" width="1em" > - + + + + + + - + + + + + + diff --git a/packages/react-core/src/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap b/packages/react-core/src/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap index 9e8c4c04d73..b6152054b84 100644 --- a/packages/react-core/src/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap +++ b/packages/react-core/src/components/Icon/__tests__/__snapshots__/Icon.test.tsx.snap @@ -14,12 +14,24 @@ exports[`renders basic icon successfully 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -40,12 +52,24 @@ exports[`renders progress icon successfully 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + diff --git a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap index 93969472ef9..481dc503d11 100644 --- a/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap +++ b/packages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap @@ -36,12 +36,24 @@ exports[`expandable vertical with subsection 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap index 4aa4d10050e..7d75a286941 100644 --- a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap +++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap @@ -35,12 +35,24 @@ exports[`Label editable label 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -172,12 +184,24 @@ exports[`Label label with close button 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -220,12 +244,24 @@ exports[`Label label with close button and outline variant 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap index 3268741c202..9cd24d10df7 100644 --- a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap +++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap @@ -271,12 +271,24 @@ exports[`LabelGroup label group with closable category 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap index dca69158800..85b97445580 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap +++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap @@ -269,12 +269,24 @@ exports[`LoginForm LoginForm with show password 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 576 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap index 8d90793143a..7e0c1549cc5 100644 --- a/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap +++ b/packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap @@ -27,12 +27,24 @@ exports[`Old Snapshot tests - remove when refactoring passes additional classes fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -67,12 +79,24 @@ exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -116,12 +140,24 @@ exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -148,12 +184,24 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -214,12 +274,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -254,12 +326,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -286,12 +370,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -325,12 +421,24 @@ exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -365,12 +473,24 @@ exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap index 9da7e61017d..eea476cfad7 100644 --- a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap +++ b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap @@ -15,12 +15,24 @@ exports[`ModalBoxTitle alert variant 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 576 512" width="1em" > - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap index 821f03b2066..884f7e71193 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap @@ -33,12 +33,24 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -109,12 +121,24 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -133,12 +157,24 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 1024 1024" width="1em" > - + + + + + +
- + + + + + + @@ -277,12 +325,24 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap index fb8d7b33976..07effc3d740 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap @@ -14,12 +14,24 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 384 512" width="1em" > - + + + + + +
- + + + + + + @@ -133,12 +157,24 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 384 512" width="1em" > - + + + + + +
- + + + + + + @@ -339,12 +387,24 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -457,12 +517,24 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -485,12 +557,24 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when fill="currentColor" height="1em" role="img" - viewBox="0 0 384 512" width="1em" > - + + + + + +
- + + + + + +
@@ -592,12 +688,24 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -620,12 +728,24 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file fill="currentColor" height="1em" role="img" - viewBox="0 0 384 512" width="1em" > - + + + + + +
- + + + + + + @@ -738,12 +870,24 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 384 512" width="1em" > - + + + + + +
- + + + + + + @@ -944,12 +1100,24 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap index 8e10720ddf8..3e53080b982 100644 --- a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap +++ b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap @@ -25,12 +25,24 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap index 9430759a419..90953e82f77 100644 --- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap @@ -209,12 +209,24 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -342,12 +354,24 @@ exports[`Nav Expandable Nav List 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -474,12 +498,24 @@ exports[`Nav Expandable Nav List with aria label 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1004,12 +1040,24 @@ exports[`Nav Nav List with flyout 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap index ff9aa023b4d..2715ec667eb 100644 --- a/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap +++ b/packages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snap @@ -19,12 +19,24 @@ exports[`NotificationBadge count 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 896 1024" width="1em" > - + + + + + + - + + + + + + - + + + + + + - + + + + + + @@ -80,12 +92,24 @@ exports[`NotificationDrawerGroup drawer group with isRead applied 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -127,12 +151,24 @@ exports[`NotificationDrawerGroup renders correct heading level 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -174,12 +210,24 @@ exports[`NotificationDrawerGroup renders with PatternFly Core styles 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap index 66297258218..a40c267176e 100644 --- a/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap +++ b/packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap @@ -14,12 +14,24 @@ exports[`NotificationDrawerListItemHeader list item header with custom icon appl fill="currentColor" height="1em" role="img" - viewBox="0 0 896 1024" width="1em" > - + + + + + +

- + + + + + +

- + + + + + +

- + + + + + +

- + + + + + +

- + + + + + + @@ -84,12 +96,24 @@ exports[`numberInput disables lower threshold 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -131,12 +155,24 @@ exports[`numberInput disables upper threshold 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -184,12 +220,24 @@ exports[`numberInput disables upper threshold 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -232,12 +280,24 @@ exports[`numberInput passes button props successfully 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -285,12 +345,24 @@ exports[`numberInput passes button props successfully 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -332,12 +404,24 @@ exports[`numberInput passes input props successfully 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -384,12 +468,24 @@ exports[`numberInput passes input props successfully 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -432,12 +528,24 @@ exports[`numberInput renders custom width 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -484,12 +592,24 @@ exports[`numberInput renders custom width 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -532,12 +652,24 @@ exports[`numberInput renders defaults & extra props 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -584,12 +716,24 @@ exports[`numberInput renders defaults & extra props 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -632,12 +776,24 @@ exports[`numberInput renders disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -686,12 +842,24 @@ exports[`numberInput renders disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -733,12 +901,24 @@ exports[`numberInput renders error validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -772,12 +952,24 @@ exports[`numberInput renders error validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -806,12 +998,24 @@ exports[`numberInput renders error validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -853,12 +1057,24 @@ exports[`numberInput renders success validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -892,12 +1108,24 @@ exports[`numberInput renders success validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -926,12 +1154,24 @@ exports[`numberInput renders success validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -978,12 +1218,24 @@ exports[`numberInput renders unit & position 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1030,12 +1282,24 @@ exports[`numberInput renders unit & position 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1077,12 +1341,24 @@ exports[`numberInput renders unit 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1129,12 +1405,24 @@ exports[`numberInput renders unit 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1181,12 +1469,24 @@ exports[`numberInput renders value 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1233,12 +1533,24 @@ exports[`numberInput renders value 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1280,12 +1592,24 @@ exports[`numberInput renders warning validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1319,12 +1643,24 @@ exports[`numberInput renders warning validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 576 512" width="1em" > - + + + + + + @@ -1353,12 +1689,24 @@ exports[`numberInput renders warning validated 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index 06922646315..27e9ca454aa 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -136,12 +136,24 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + @@ -64,12 +76,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -114,12 +138,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -145,12 +181,24 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap index a23206c4287..48510ee405c 100644 --- a/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap +++ b/packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap @@ -39,12 +39,24 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap index 49a54958dfd..fa5d7037a7c 100644 --- a/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +++ b/packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap @@ -59,12 +59,24 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -96,12 +108,24 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -128,12 +152,24 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -178,12 +214,24 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -209,12 +257,24 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -284,12 +344,24 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -321,12 +393,24 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -353,12 +437,24 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -403,12 +499,24 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -434,12 +542,24 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -509,12 +629,24 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -546,12 +678,24 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -578,12 +722,24 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -628,12 +784,24 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -659,12 +827,24 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -734,12 +914,24 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -771,12 +963,24 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -803,12 +1007,24 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -853,12 +1069,24 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -884,12 +1112,24 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -959,12 +1199,24 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -996,12 +1248,24 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1028,12 +1292,24 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1078,12 +1354,24 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1109,12 +1397,24 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1184,12 +1484,24 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -1221,12 +1533,24 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1253,12 +1577,24 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1303,12 +1639,24 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1334,12 +1682,24 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1395,12 +1755,24 @@ exports[`Pagination component render custom pagination toggle 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -1432,12 +1804,24 @@ exports[`Pagination component render custom pagination toggle 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1464,12 +1848,24 @@ exports[`Pagination component render custom pagination toggle 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1519,12 +1915,24 @@ exports[`Pagination component render custom pagination toggle 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1550,12 +1958,24 @@ exports[`Pagination component render custom pagination toggle 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1624,12 +2044,24 @@ exports[`Pagination component render custom perPageOptions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -1661,12 +2093,24 @@ exports[`Pagination component render custom perPageOptions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1693,12 +2137,24 @@ exports[`Pagination component render custom perPageOptions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1748,12 +2204,24 @@ exports[`Pagination component render custom perPageOptions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1779,12 +2247,24 @@ exports[`Pagination component render custom perPageOptions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1853,12 +2333,24 @@ exports[`Pagination component render custom start end 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -1889,12 +2381,24 @@ exports[`Pagination component render custom start end 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1920,12 +2424,24 @@ exports[`Pagination component render custom start end 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1975,12 +2491,24 @@ exports[`Pagination component render custom start end 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2006,12 +2534,24 @@ exports[`Pagination component render custom start end 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2069,12 +2609,24 @@ exports[`Pagination component render empty per page options 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2101,12 +2653,24 @@ exports[`Pagination component render empty per page options 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2156,12 +2720,24 @@ exports[`Pagination component render empty per page options 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2187,12 +2763,24 @@ exports[`Pagination component render empty per page options 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2261,12 +2849,24 @@ exports[`Pagination component render last page 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -2297,12 +2897,24 @@ exports[`Pagination component render last page 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2328,12 +2940,24 @@ exports[`Pagination component render last page 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2384,12 +3008,24 @@ exports[`Pagination component render last page 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2416,12 +3052,24 @@ exports[`Pagination component render last page 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2490,12 +3138,24 @@ exports[`Pagination component render limited number of pages 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -2527,12 +3187,24 @@ exports[`Pagination component render limited number of pages 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2559,12 +3231,24 @@ exports[`Pagination component render limited number of pages 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2616,12 +3300,24 @@ exports[`Pagination component render limited number of pages 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2648,12 +3344,24 @@ exports[`Pagination component render limited number of pages 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2710,12 +3418,24 @@ exports[`Pagination component render should render correctly bottom 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -2747,12 +3467,24 @@ exports[`Pagination component render should render correctly bottom 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2779,12 +3511,24 @@ exports[`Pagination component render should render correctly bottom 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2834,12 +3578,24 @@ exports[`Pagination component render should render correctly bottom 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2865,12 +3621,24 @@ exports[`Pagination component render should render correctly bottom 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2927,12 +3695,24 @@ exports[`Pagination component render should render correctly bottom sticky 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -2964,12 +3744,24 @@ exports[`Pagination component render should render correctly bottom sticky 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -2996,12 +3788,24 @@ exports[`Pagination component render should render correctly bottom sticky 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3051,12 +3855,24 @@ exports[`Pagination component render should render correctly bottom sticky 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3082,12 +3898,24 @@ exports[`Pagination component render should render correctly bottom sticky 1`] = fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3156,12 +3984,24 @@ exports[`Pagination component render should render correctly compact 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -3193,12 +4033,24 @@ exports[`Pagination component render should render correctly compact 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3225,12 +4077,24 @@ exports[`Pagination component render should render correctly compact 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3280,12 +4144,24 @@ exports[`Pagination component render should render correctly compact 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3311,12 +4187,24 @@ exports[`Pagination component render should render correctly compact 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3386,12 +4274,24 @@ exports[`Pagination component render should render correctly disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -3423,12 +4323,24 @@ exports[`Pagination component render should render correctly disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3455,12 +4367,24 @@ exports[`Pagination component render should render correctly disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3512,12 +4436,24 @@ exports[`Pagination component render should render correctly disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3544,12 +4480,24 @@ exports[`Pagination component render should render correctly disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3618,12 +4566,24 @@ exports[`Pagination component render should render correctly sticky 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -3655,12 +4615,24 @@ exports[`Pagination component render should render correctly sticky 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3687,12 +4659,24 @@ exports[`Pagination component render should render correctly sticky 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3742,12 +4726,24 @@ exports[`Pagination component render should render correctly sticky 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3773,12 +4769,24 @@ exports[`Pagination component render should render correctly sticky 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3847,12 +4855,24 @@ exports[`Pagination component render should render correctly top 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -3884,12 +4904,24 @@ exports[`Pagination component render should render correctly top 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -3916,12 +4948,24 @@ exports[`Pagination component render should render correctly top 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -3971,12 +5015,24 @@ exports[`Pagination component render should render correctly top 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4002,12 +5058,24 @@ exports[`Pagination component render should render correctly top 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -4076,12 +5144,24 @@ exports[`Pagination component render titles 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -4113,12 +5193,24 @@ exports[`Pagination component render titles 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -4145,12 +5237,24 @@ exports[`Pagination component render titles 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4200,12 +5304,24 @@ exports[`Pagination component render titles 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4231,12 +5347,24 @@ exports[`Pagination component render titles 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -4305,12 +5433,24 @@ exports[`Pagination component render up drop direction 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -4342,12 +5482,24 @@ exports[`Pagination component render up drop direction 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -4374,12 +5526,24 @@ exports[`Pagination component render up drop direction 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4429,12 +5593,24 @@ exports[`Pagination component render up drop direction 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4460,12 +5636,24 @@ exports[`Pagination component render up drop direction 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -4534,12 +5722,24 @@ exports[`Pagination component render zero results 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -4571,12 +5771,24 @@ exports[`Pagination component render zero results 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -4603,12 +5815,24 @@ exports[`Pagination component render zero results 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4660,12 +5884,24 @@ exports[`Pagination component render zero results 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4692,12 +5928,24 @@ exports[`Pagination component render zero results 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap index 498ef9f35e5..a390ee08e70 100644 --- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap @@ -23,12 +23,24 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap b/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap index fe819d47622..3fbd5542496 100644 --- a/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap +++ b/packages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snap @@ -27,12 +27,24 @@ exports[`ProgressContainer should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + +

diff --git a/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap b/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap index 999c1fd0001..908088f3a2a 100644 --- a/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap +++ b/packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snap @@ -294,12 +294,24 @@ exports[`Progress variant danger 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -347,12 +359,24 @@ exports[`Progress variant success 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -400,12 +424,24 @@ exports[`Progress variant warning 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 576 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap index 142d15d97ee..7e2035e2478 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap @@ -29,12 +29,24 @@ exports[`SearchInput advanced search 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -92,12 +116,24 @@ exports[`SearchInput advanced search 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -125,12 +161,24 @@ exports[`SearchInput advanced search 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -172,12 +220,24 @@ exports[`SearchInput advanced search with custom attributes 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -235,12 +307,24 @@ exports[`SearchInput advanced search with custom attributes 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -268,12 +352,24 @@ exports[`SearchInput advanced search with custom attributes 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -505,12 +601,24 @@ exports[`SearchInput renders search input in strict mode 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -568,12 +688,24 @@ exports[`SearchInput renders search input in strict mode 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -601,12 +733,24 @@ exports[`SearchInput renders search input in strict mode 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -651,12 +795,24 @@ exports[`SearchInput search input with hint 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -710,12 +878,24 @@ exports[`SearchInput search input with hint 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -734,12 +914,24 @@ exports[`SearchInput search input with hint 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -769,12 +961,24 @@ exports[`SearchInput search input with hint 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -811,12 +1015,24 @@ exports[`SearchInput simple search input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -870,12 +1098,24 @@ exports[`SearchInput simple search input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -894,12 +1134,24 @@ exports[`SearchInput simple search input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -929,12 +1181,24 @@ exports[`SearchInput simple search input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap b/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap index fca0bc7e7e1..da6ce66d28b 100644 --- a/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap +++ b/packages/react-core/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap @@ -29,12 +29,24 @@ exports[`Switch no label switch is checked 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -70,12 +82,24 @@ exports[`Switch no label switch is not checked 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -143,12 +167,24 @@ exports[`Switch switch is checked and disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -214,12 +250,24 @@ exports[`Switch switch is not checked and disabled 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap index 5299ee62954..49a5f854d3f 100644 --- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snap @@ -27,12 +27,24 @@ exports[`Matches snapshot when expanded 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -112,12 +124,24 @@ exports[`Renders tabs passed via overflowingTabs when expanded in strict mode 1` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap index 7a0666e5962..e8802b24793 100644 --- a/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap +++ b/packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap @@ -431,12 +431,24 @@ exports[`should render expandable vertical tabs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap index 940a2e022e2..be5bc82db5f 100644 --- a/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -64,12 +64,24 @@ exports[`TextInput invalid text input 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -159,12 +171,24 @@ exports[`TextInput validated text input error 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap index 9eb38733f4e..f9d02a5caa8 100644 --- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap +++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap @@ -158,12 +158,24 @@ exports[`Toolbar should render with custom label content 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -205,12 +217,24 @@ exports[`Toolbar should render with custom label content 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -241,12 +265,24 @@ exports[`Toolbar should render with custom label content 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap index a8c4199727d..6d6f49db6ac 100644 --- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap +++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap @@ -32,12 +32,24 @@ exports[`Matches snapshot with children 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap index 24fee10c9fc..a09c46ae974 100644 --- a/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap +++ b/packages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap @@ -23,12 +23,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap index 8fbc81fae5b..2d991d96f28 100644 --- a/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap @@ -39,12 +39,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap index e0ef67bb97c..540e6209d30 100644 --- a/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap @@ -125,12 +125,24 @@ exports[`DualListSelector basic 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -157,12 +169,24 @@ exports[`DualListSelector basic 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -190,12 +214,24 @@ exports[`DualListSelector basic 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -223,12 +259,24 @@ exports[`DualListSelector basic 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -399,12 +447,24 @@ exports[`DualListSelector basic with disabled controls 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -432,12 +492,24 @@ exports[`DualListSelector basic with disabled controls 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -465,12 +537,24 @@ exports[`DualListSelector basic with disabled controls 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -498,12 +582,24 @@ exports[`DualListSelector basic with disabled controls 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -685,12 +781,24 @@ exports[`DualListSelector with actions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -717,12 +825,24 @@ exports[`DualListSelector with actions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -749,12 +869,24 @@ exports[`DualListSelector with actions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -782,12 +914,24 @@ exports[`DualListSelector with actions 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1023,12 +1167,24 @@ exports[`DualListSelector with custom status 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1055,12 +1211,24 @@ exports[`DualListSelector with custom status 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1088,12 +1256,24 @@ exports[`DualListSelector with custom status 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1121,12 +1301,24 @@ exports[`DualListSelector with custom status 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1217,12 +1409,24 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -1371,12 +1587,24 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1404,12 +1632,24 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1437,12 +1677,24 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1488,12 +1740,24 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + - + + + + + + @@ -1732,12 +2008,24 @@ exports[`DualListSelector with tree 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1764,12 +2052,24 @@ exports[`DualListSelector with tree 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1797,12 +2097,24 @@ exports[`DualListSelector with tree 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + + @@ -1830,12 +2142,24 @@ exports[`DualListSelector with tree 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap b/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap index 6517a7ab365..3ab96512512 100644 --- a/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap @@ -15,12 +15,24 @@ exports[`ModalBoxTitle alert variant 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 576 512" width="1em" > - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + - + + + + + + @@ -117,12 +129,24 @@ exports[`Modal Content Test isOpen 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -191,12 +215,24 @@ exports[`Modal Content Test only body 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -265,12 +301,24 @@ exports[`Modal Content Test with footer 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -344,12 +392,24 @@ exports[`Modal Content Test with onclose 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -423,12 +483,24 @@ exports[`Modal Content test without footer 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -497,12 +569,24 @@ exports[`Modal Test with custom footer 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -580,12 +664,24 @@ exports[`Modal Test with custom header 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + diff --git a/packages/react-core/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap b/packages/react-core/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap index 02bbe06dcb7..3b3f76e91a5 100644 --- a/packages/react-core/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/Tile/__tests__/__snapshots__/Tile.test.tsx.snap @@ -81,12 +81,24 @@ exports[`Tile renders with icon 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 448 512" width="1em" > - + + + + + +
- + + + + + +
- + + + + + +
- + + + + + + diff --git a/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap index ef385ff5aea..a4e1f1138c8 100644 --- a/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +++ b/packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap @@ -28,12 +28,24 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -83,12 +95,24 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -159,12 +183,24 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -363,12 +399,24 @@ exports[`Wizard Wizard should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -418,12 +466,24 @@ exports[`Wizard Wizard should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -684,12 +744,24 @@ exports[`Wizard bare wiz 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap index f1ccc6d027b..115fec2b087 100644 --- a/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap +++ b/packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap @@ -34,12 +34,24 @@ exports[`renders some divs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -74,12 +86,24 @@ exports[`renders some divs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -114,12 +138,24 @@ exports[`renders some divs 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-icons/src/createIcon.tsx b/packages/react-icons/src/createIcon.tsx index 0d10a01903d..fbd575aaf01 100644 --- a/packages/react-icons/src/createIcon.tsx +++ b/packages/react-icons/src/createIcon.tsx @@ -122,7 +122,7 @@ export function createIcon({ name, icon, rhUiIcon = null }: CreateIconProps): Re } if ((set === undefined && rhUiIcon === null) || set !== undefined) { - const iconData = set !== undefined && set === 'unified' ? rhUiIcon : icon; + const iconData = set !== undefined && set === 'unified' && rhUiIcon !== null ? rhUiIcon : icon; const { xOffset, yOffset, width, height, svgPathData, svgClassName } = iconData ?? {}; const _xOffset = xOffset ?? 0; const _yOffset = yOffset ?? 0; diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap index 6a7a59bfaf2..9869bf82039 100644 --- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -47,12 +47,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + +
@@ -176,12 +188,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -257,12 +281,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -338,12 +374,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -419,12 +467,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -500,12 +560,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -581,12 +653,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -662,12 +746,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -743,12 +839,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -824,12 +932,24 @@ exports[`Table Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -887,12 +1007,24 @@ exports[`Table Cell header table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1458,12 +1590,24 @@ exports[`Table Collapsible nested table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -1545,12 +1689,24 @@ exports[`Table Collapsible nested table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -1636,12 +1792,24 @@ exports[`Table Collapsible nested table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -1798,12 +1966,24 @@ exports[`Table Collapsible nested table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -2219,12 +2399,24 @@ exports[`Table Collapsible table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -2306,12 +2498,24 @@ exports[`Table Collapsible table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -2523,12 +2727,24 @@ exports[`Table Collapsible table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -4259,12 +4475,24 @@ exports[`Table Selectable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -4993,12 +5221,24 @@ exports[`Table Selectable table with Radio 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -5844,12 +6084,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -5973,12 +6225,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6054,12 +6318,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6135,12 +6411,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6216,12 +6504,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6297,12 +6597,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6378,12 +6690,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6459,12 +6783,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6540,12 +6876,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6621,12 +6969,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6703,12 +7063,24 @@ exports[`Table Simple Actions table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 192 512" width="1em" > - + + + + + + @@ -6766,12 +7138,24 @@ exports[`Table Table variants Breakpoint - 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -7294,12 +7678,24 @@ exports[`Table Table variants Breakpoint - grid 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -7822,12 +8218,24 @@ exports[`Table Table variants Breakpoint - grid-2xl 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -8350,12 +8758,24 @@ exports[`Table Table variants Breakpoint - grid-lg 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -8878,12 +9298,24 @@ exports[`Table Table variants Breakpoint - grid-md 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -9406,12 +9838,24 @@ exports[`Table Table variants Breakpoint - grid-xl 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -9934,12 +10378,24 @@ exports[`Table Table variants Size - compact 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -10655,12 +11111,24 @@ exports[`Table simple Editable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -10685,12 +11153,24 @@ exports[`Table simple Editable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -10716,12 +11196,24 @@ exports[`Table simple Editable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -10895,12 +11387,24 @@ exports[`Table simple Editable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -10925,12 +11429,24 @@ exports[`Table simple Editable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -10956,12 +11472,24 @@ exports[`Table simple Editable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 512 512" width="1em" > - + + + + + + @@ -11021,12 +11549,24 @@ exports[`Table simple Row click table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + @@ -11549,12 +12089,24 @@ exports[`Table simple Sortable table 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 256 512" width="1em" > - + + + + + + diff --git a/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap b/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap index 030f2536402..588f0ccc860 100644 --- a/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap +++ b/packages/react-templates/src/components/Dropdown/__tests__/__snapshots__/SimpleDropdown.test.tsx.snap @@ -27,12 +27,24 @@ exports[`Dropdown items Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -67,12 +79,24 @@ exports[`Dropdown toggle Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap index c7bb5a8151a..ab95668a3bc 100644 --- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap +++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap @@ -28,12 +28,24 @@ exports[`checkbox select with no props snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -69,12 +81,24 @@ exports[`opened checkbox select snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap index 32cbe5cb347..5f08b8a8c33 100644 --- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap @@ -48,12 +48,24 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -81,12 +93,24 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap index 60b09197a2e..e471cff5d89 100644 --- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap +++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/SimpleSelect.test.tsx.snap @@ -28,12 +28,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + @@ -69,12 +81,24 @@ exports[`checkbox select with no props snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + + diff --git a/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap b/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap index ea915bd1cb5..8b101a267af 100644 --- a/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap +++ b/packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap @@ -48,12 +48,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 352 512" width="1em" > - + + + + + + @@ -81,12 +93,24 @@ exports[`Matches snapshot 1`] = ` fill="currentColor" height="1em" role="img" - viewBox="0 0 320 512" width="1em" > - + + + + + +