fix system status icon styles (#4466)

jpmorganchase · Nov 29, 2024 · 33c8da5 · 33c8da5
1 parent 5af2978
commit 33c8da5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/.changeset/modern-zebras-pretend.md b/.changeset/modern-zebras-pretend.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Fix system status icons in content from using the component styles override
diff --git a/packages/lab/src/system-status/SystemStatus.css b/packages/lab/src/system-status/SystemStatus.css
@@ -1,7 +1,5 @@
 /* Styles applied to root component */
 .saltSystemStatus {
-  --saltIcon-color: var(--salt-content-bold-foreground);
-
   background: var(--saltSystemStatus-background, var(--systemStatus-background));
   border-color: var(--saltSystemStatus-borderColor, var(--systemStatus-borderColor));
   border-width: var(--saltSystemStatus-borderWidth, var(--salt-size-border));
@@ -21,6 +19,7 @@
 /* Styles applied to icon */
 .saltSystemStatus-icon.saltIcon {
   min-height: var(--salt-size-base);
+  --saltIcon-color: var(--salt-content-bold-foreground);
 }
 
 /* Styles applied when state = "info" */

diff --git a/packages/lab/stories/system-status/system-status.qa.stories.tsx b/packages/lab/stories/system-status/system-status.qa.stories.tsx
@@ -1,4 +1,5 @@
-import { StackLayout, Text } from "@salt-ds/core";
+import { Button, SplitLayout, StackLayout, Text } from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
 import {
   SystemStatus,
   SystemStatusContent,
@@ -36,13 +37,37 @@ const WarningSystemStatus = () => (
 const SuccessSystemStatus = () => (
   <BasicSystemStatusExample status={"success"} />
 );
+const WithButtonSystemStatusExample: FC<SystemStatusProps> = ({ status }) => {
+  return (
+    <SystemStatus status={status}>
+      <SystemStatusContent>
+        <StackLayout gap={0.5}>
+          <SplitLayout
+            startItem={
+              <Text color="inherit">
+                <strong>Title</strong>
+              </Text>
+            }
+            endItem={
+              <Button appearance="transparent" aria-label="close">
+                <CloseIcon aria-hidden />
+              </Button>
+            }
+          />
 
+          <Text color="inherit">Example custom renderer</Text>
+        </StackLayout>
+      </SystemStatusContent>
+    </SystemStatus>
+  );
+};
 export const ExamplesGrid: StoryFn = (props) => (
   <QAContainer cols={1} itemPadding={10} height={600} width={1000} {...props}>
     <InfoSystemStatus />
     <ErrorSystemStatus />
     <WarningSystemStatus />
     <SuccessSystemStatus />
+    <WithButtonSystemStatusExample />
   </QAContainer>
 );