Fix tertiary card disabled styles

jpmorganchase · Jan 28, 2025 · d2a6f7a · d2a6f7a
1 parent 3e474a0
commit d2a6f7a
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 1 deletion.
diff --git a/.changeset/lovely-bats-kick.md b/.changeset/lovely-bats-kick.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed secondary and tertiary InteractableCards having incorrect disabled styling.
diff --git a/packages/core/src/interactable-card/InteractableCard.css b/packages/core/src/interactable-card/InteractableCard.css
@@ -126,10 +126,18 @@
 .saltInteractableCard-secondary.saltInteractableCard-disabled,
 .saltInteractableCard-secondary.saltInteractableCard-disabled:focus,
 .saltInteractableCard-secondary.saltInteractableCard-disabled:active {
-  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background));
+  background: var(--saltInteractableCard-background-disabled, var(--salt-container-secondary-background-disabled));
   border-color: var(--salt-container-secondary-borderColor-disabled);
 }
 
+/* Styles applied to InteractableCard tertiary variant if `disabled={true}` */
+.saltInteractableCard-tertiary.saltInteractableCard-disabled,
+.saltInteractableCard-tertiary.saltInteractableCard-disabled:focus,
+.saltInteractableCard-tertiary.saltInteractableCard-disabled:active {
+  background: var(--salt-container-tertiary-background-disabled);
+  border-color: var(--salt-container-tertiary-borderColor-disabled);
+}
+
 /* Styles applied to InteractableCard if `selected={true}`and `disabled={true}` */
 .saltInteractableCard-selected.saltInteractableCard-disabled,
 .saltInteractableCard-selected.saltInteractableCard-disabled:focus,

diff --git a/packages/core/stories/interactable-card/interactable-card.qa.stories.tsx b/packages/core/stories/interactable-card/interactable-card.qa.stories.tsx
@@ -55,6 +55,18 @@ export const AllExamples: StoryFn<QAContainerProps & { className?: string }> = (
           <Text>Content</Text>
         </InteractableCard>
       </InteractableCardGroup>
+      <InteractableCard disabled>
+        <H1>Disabled primary</H1>
+        <Text>Content</Text>
+      </InteractableCard>
+      <InteractableCard disabled variant="secondary">
+        <H1>Disabled secondary</H1>
+        <Text>Content</Text>
+      </InteractableCard>
+      <InteractableCard disabled variant="tertiary">
+        <H1>Disabled tertiary</H1>
+        <Text>Content</Text>
+      </InteractableCard>
     </QAContainer>
   );
 };
@@ -117,6 +129,18 @@ export const NoStyleInjectionGrid: StoryFn<QAContainerNoStyleInjectionProps> = (
         <Text>Content</Text>
       </InteractableCard>
     </InteractableCardGroup>
+    <InteractableCard disabled>
+      <H1>Disabled primary</H1>
+      <Text>Content</Text>
+    </InteractableCard>
+    <InteractableCard disabled variant="secondary">
+      <H1>Disabled secondary</H1>
+      <Text>Content</Text>
+    </InteractableCard>
+    <InteractableCard disabled variant="tertiary">
+      <H1>Disabled tertiary</H1>
+      <Text>Content</Text>
+    </InteractableCard>
   </QAContainerNoStyleInjection>
 );