Merge pull request #2154 from xmicha82/rm-unknown-icon

fix(Shield): remove Unknown question mark icon
RedHatInsights · Feb 7, 2025 · e72ba9e · e72ba9e
2 parents 7bdbc55 + 2095f46
commit e72ba9e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/packages/components/doc/shield.md b/packages/components/doc/shield.md
@@ -12,12 +12,10 @@ Import Shield from this package.
 import React from 'react';
 import { Shield } from '@redhat-cloud-services/frontend-components';
 
-class YourCmp extends React.Component {
-  render() {
+const YourCmp = () => {
     return (
         <Shield impact={'Critical'} hasTooltip={true} size={'md'} />
     )
-  }
 }
 ```
 
@@ -32,6 +30,7 @@ You can also use all the props from Patternfly Tooltip component - [Documentatio
         propTypes.number
     ]),
     hasTooltip: propTypes.bool,
+    disableQuestionIcon: propTypes.bool
     tooltipPosition: propTypes.string, // top, (right), bottom, left
     tooltipPrefix: propTypes.string,
     title: propTypes.string,

diff --git a/packages/components/src/Shield/Shield.tsx b/packages/components/src/Shield/Shield.tsx
@@ -11,18 +11,29 @@ export interface ShieldProps {
   impact: keyof typeof impactList | 'N/A';
   hasLabel?: boolean;
   hasTooltip?: boolean;
+  disableQuestionIcon?: boolean;
   size?: IconComponentProps['size'];
 }
 
-const Shield: React.FunctionComponent<ShieldProps> = ({ impact = 'N/A', hasLabel = false, size = 'md', hasTooltip = true }) => {
+const Shield: React.FunctionComponent<ShieldProps> = ({
+  impact = 'N/A',
+  hasLabel = false,
+  size = 'md',
+  hasTooltip = true,
+  disableQuestionIcon = false,
+}) => {
   const attributes = impactList?.[impact as keyof typeof impactList] ?? impactList.Unknown;
   const badgeProps: SVGIconProps = {
     'aria-hidden': 'false',
     'aria-label': attributes.title,
     color: attributes.color,
   };
 
-  const badge = <Icon size={size}>{attributes.title === 'Unknown' ? <QuestionIcon {...badgeProps} /> : <SecurityIcon {...badgeProps} />}</Icon>;
+  const badge = (
+    <Icon size={size}>
+      {attributes.title === 'Unknown' ? disableQuestionIcon ? null : <QuestionIcon {...badgeProps} /> : <SecurityIcon {...badgeProps} />}
+    </Icon>
+  );
 
   const body = (
     <span>