diff --git a/.changeset/modern-zebras-pretend.md b/.changeset/modern-zebras-pretend.md new file mode 100644 index 00000000000..18b7bf91d1b --- /dev/null +++ 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 index 526f4909cc6..794d65e6af2 100644 --- 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 index 8611559cedd..196d991b0b7 100644 --- 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 = () => ( ); +const WithButtonSystemStatusExample: FC = ({ status }) => { + return ( + + + + + Title + + } + endItem={ + + } + /> + Example custom renderer + + + + ); +}; export const ExamplesGrid: StoryFn = (props) => ( + );