diff --git a/.changeset/dull-rules-double.md b/.changeset/dull-rules-double.md new file mode 100644 index 0000000000..77a7d4529f --- /dev/null +++ b/.changeset/dull-rules-double.md @@ -0,0 +1,7 @@ +--- +'@primer/view-components': patch +--- + +Fix disabled styles for radio + + diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png index 51326910a0..541df014a3 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png index 51326910a0..541df014a3 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/radio_button/disabled/focused.png differ diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss index 275d88346c..49d622d36a 100644 --- 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; + } + } } }