From 33f799f13edad2e7434425913a8d445aa27213de Mon Sep 17 00:00:00 2001
From: Cameron Dutro <camertron@gmail.com>
Date: Wed, 25 May 2022 15:37:13 -0700
Subject: [PATCH] Add missing ToggleSwitch--checked styles (#2094)

* Add missing ToggleSwitch--checked styles

* Add rule to override Catalyst's display: block
---
 .changeset/dirty-mails-stare.md      |  5 +++++
 src/toggle-switch/toggle-switch.scss | 18 ++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 .changeset/dirty-mails-stare.md

diff --git a/.changeset/dirty-mails-stare.md b/.changeset/dirty-mails-stare.md
new file mode 100644
index 0000000000..c601af0600
--- /dev/null
+++ 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
index 683d6678d2..7eba40ae6f 100644
--- 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;