Fix disabled styles for radio labels (#2256)

Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Sep 25, 2023 · fd17adf · fd17adf
1 parent 4449ee7
commit fd17adf
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/.changeset/dull-rules-double.md b/.changeset/dull-rules-double.md
@@ -0,0 +1,7 @@
+---
+'@primer/view-components': patch
+---
+
+Fix disabled styles for radio
+
+<!-- Changed components: _none_ -->
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png
diff --git a/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png b/...hots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -593,8 +593,7 @@ input[type='checkbox'].FormControl-checkbox {
   }
 
   &[disabled] {
-    & ~ .FormControl-checkbox-labelWrap,
-    & ~ .FormControl-radio-labelWrap {
+    & ~ .FormControl-checkbox-labelWrap {
       & .FormControl-label {
         color: var(--control-fgColor-disabled);
         cursor: not-allowed;
@@ -664,13 +663,29 @@ input[type='radio'].FormControl-radio {
     @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
   }
 
+  &[disabled] {
+    & ~ .FormControl-radio-labelWrap {
+      & .FormControl-label {
+        color: var(--control-fgColor-disabled);
+        cursor: not-allowed;
+      }
+    }
+  }
+
   &:checked {
     border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
     border-width: var(--base-size-4);
 
-    &:disabled {
+    &[disabled], &:disabled {
       cursor: not-allowed;
       border-color: var(--control-fgColor-disabled);
+
+      & ~ .FormControl-radio-labelWrap {
+        & .FormControl-label {
+          color: var(--control-fgColor-disabled);
+          cursor: not-allowed;
+        }
+      }
     }
   }