fix: updated the styles.

Author: dlabaj

packages/module/src/Severity/Severity.tsx

@@ -47,16 +47,18 @@ const severityUndefined = {
 };
 
 const useStyles = createUseStyles({
-  battery: {
+  severity: {
     display: 'inline-block',
     'line-height': 0,
     '& svg': {
       position: 'relative',
       top: 'var(--pf-t--global--spacer--sm)',
-      height: '1.75rem'
-    }
+      height: 'calc(var(--pf-t--global--spacer--md) * 1.75)',
+    },
+  },
+  severityLabel: {
+    'margin-left': 'var(--pf-t--global--spacer--xs)'
   },
-
   severityNone,
   severityMinor,
   severityModerate,
@@ -65,7 +67,7 @@ const useStyles = createUseStyles({
   severityUndefined
 });
 
-const batteryLevels = (severity: SeverityType, classMode?: boolean) => {
+const severityLevels = (severity: SeverityType, classMode?: boolean) => {
   switch (severity) {
   case 'critical':
     return classMode ? 'severityCritical' : <SeverityCriticalIcon />;
@@ -94,9 +96,9 @@ export const SeverityType = {
 export type SeverityType = (typeof SeverityType)[keyof typeof SeverityType];
 
 export interface SeverityProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
-  /** Determines a variant of displayed battery */
+  /** Determines a variant of displayed severity */
   severity: SeverityType;
-  /** Label displayed next to the battery */
+  /** Label displayed next to the severity */
   label: string;
   /** Option to hide the label */
   labelHidden?: boolean;
@@ -115,19 +117,19 @@ export const Severity: React.FunctionComponent<SeverityProps> = ({
   ...props
 }: SeverityProps) => {
   const classes = useStyles();
-  const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
+  const severityClasses = clsx(classes.severity, classes[String(severityLevels(severity, true))], className);
 
   const title = { title: `${severity} ${label}` };
 
-  const batteryVariant = useMemo(() => batteryLevels(severity), [ severity ]);
+  const severityVariant = useMemo(() => severityLevels(severity), [ severity ]);
 
   return (
     <React.Fragment>
       {/* eslint-disable-next-line react/no-unknown-property */}
-      <i className={batteryClasses} {...title} {...props} widget-type="Severity" widget-id={label} data-ouia-component-id={ouiaId}>
-        {batteryVariant}
+      <i className={severityClasses} {...title} {...props} widget-type="Severity" widget-id={label} data-ouia-component-id={ouiaId}>
+        {severityVariant}
       </i>
-      {!labelHidden && <span> {label} </span>}
+      {!labelHidden && <span className={clsx(classes.severityLabel)}> {label} </span>}
     </React.Fragment>
   );
 };

packages/module/src/Severity/__snapshots__/Severity.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Severity component API should hide label 1`] = `
 <div>
   <i
-    class="battery-0-2-1 severityImportant-0-2-5"
+    class="severity-0-2-1 severityImportant-0-2-6"
     data-ouia-component-id="Severity-icon"
     title="important important"
     widget-id="important"
@@ -29,7 +29,7 @@ exports[`Severity component API should hide label 1`] = `
 exports[`Severity component should render correctly CriticalSeverity 1`] = `
 <div>
   <i
-    class="battery-0-2-1 severityCritical-0-2-6"
+    class="severity-0-2-1 severityCritical-0-2-7"
     data-ouia-component-id="Severity-icon"
     title="critical Critical"
     widget-id="Critical"
@@ -49,7 +49,9 @@ exports[`Severity component should render correctly CriticalSeverity 1`] = `
       />
     </svg>
   </i>
-  <span>
+  <span
+    class="severityLabel-0-2-2"
+  >
      
     Critical
      
@@ -60,7 +62,7 @@ exports[`Severity component should render correctly CriticalSeverity 1`] = `
 exports[`Severity component should render correctly HighSeverity 1`] = `
 <div>
   <i
-    class="battery-0-2-1 severityImportant-0-2-5"
+    class="severity-0-2-1 severityImportant-0-2-6"
     data-ouia-component-id="Severity-icon"
     title="important Important"
     widget-id="Important"
@@ -80,7 +82,9 @@ exports[`Severity component should render correctly HighSeverity 1`] = `
       />
     </svg>
   </i>
-  <span>
+  <span
+    class="severityLabel-0-2-2"
+  >
      
     Important
      
@@ -91,7 +95,7 @@ exports[`Severity component should render correctly HighSeverity 1`] = `
 exports[`Severity component should render correctly LowSeverity 1`] = `
 <div>
   <i
-    class="battery-0-2-1 severityMinor-0-2-3"
+    class="severity-0-2-1 severityMinor-0-2-4"
     data-ouia-component-id="Severity-icon"
     title="minor Minor"
     widget-id="Minor"
@@ -111,7 +115,9 @@ exports[`Severity component should render correctly LowSeverity 1`] = `
       />
     </svg>
   </i>
-  <span>
+  <span
+    class="severityLabel-0-2-2"
+  >
      
     Minor
      
@@ -122,7 +128,7 @@ exports[`Severity component should render correctly LowSeverity 1`] = `
 exports[`Severity component should render correctly LowSeverity 2`] = `
 <div>
   <i
-    class="battery-0-2-1 severityMinor-0-2-3"
+    class="severity-0-2-1 severityMinor-0-2-4"
     data-ouia-component-id="Severity-icon"
     title="none None"
     widget-id="None"
@@ -142,7 +148,9 @@ exports[`Severity component should render correctly LowSeverity 2`] = `
       />
     </svg>
   </i>
-  <span>
+  <span
+    class="severityLabel-0-2-2"
+  >
      
     None
      
@@ -153,7 +161,7 @@ exports[`Severity component should render correctly LowSeverity 2`] = `
 exports[`Severity component should render correctly MediumSeverity 1`] = `
 <div>
   <i
-    class="battery-0-2-1 severityModerate-0-2-4"
+    class="severity-0-2-1 severityModerate-0-2-5"
     data-ouia-component-id="Severity-icon"
     title="moderate Moderate"
     widget-id="Moderate"
@@ -173,7 +181,9 @@ exports[`Severity component should render correctly MediumSeverity 1`] = `
       />
     </svg>
   </i>
-  <span>
+  <span
+    class="severityLabel-0-2-2"
+  >
      
     Moderate
      
@@ -184,7 +194,7 @@ exports[`Severity component should render correctly MediumSeverity 1`] = `
 exports[`Severity component should render correctly UndefinedSeverity, default 1`] = `
 <div>
   <i
-    class="battery-0-2-1 severityNone-0-2-2"
+    class="severity-0-2-1 severityNone-0-2-3"
     data-ouia-component-id="Severity-icon"
     title=" "
     widget-id=""
@@ -204,7 +214,9 @@ exports[`Severity component should render correctly UndefinedSeverity, default 1
       />
     </svg>
   </i>
-  <span>
+  <span
+    class="severityLabel-0-2-2"
+  >
      
      
   </span>