Add missing ToggleSwitch--checked styles (#2094)

* Add missing ToggleSwitch--checked styles * Add rule to override Catalyst's display: block
primer · May 25, 2022 · 33f799f · 33f799f
1 parent f740d00
commit 33f799f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/.changeset/dirty-mails-stare.md b/.changeset/dirty-mails-stare.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Add missing ToggleSwitch--checked styles
diff --git a/src/toggle-switch/toggle-switch.scss b/src/toggle-switch/toggle-switch.scss
@@ -1,3 +1,9 @@
+// Catalyst in dotcom applies a display: block to all web component elements. This
+// rule overrides it so the status label and toggle switch are laid out correctly.
+.ToggleSwitch.ToggleSwitch {
+  display: inline-flex;
+}
+
 .ToggleSwitch {
   align-items: center;
   display: inline-flex;
@@ -16,6 +22,18 @@
   }
 }
 
+.ToggleSwitch--checked {
+  .ToggleSwitch-statusOn {
+    height: auto;
+    visibility: visible;
+  }
+
+  .ToggleSwitch-statusOff {
+    height: 0;
+    visibility: hidden;
+  }
+}
+
 .ToggleSwitch-track {
   position: relative;
   display: block;