From 0cc23c8ec6124fa83d6e73b1a8532b63865ff919 Mon Sep 17 00:00:00 2001 From: Katie Langerman Date: Thu, 17 Nov 2022 00:49:12 +0000 Subject: [PATCH 1/3] use border instead of pseudo element --- src/forms/FormControl.scss | 72 ++++++++++++++++---------------------- 1 file changed, 31 insertions(+), 41 deletions(-) diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss index 6521359ac7..9d2261da01 100644 --- a/src/forms/FormControl.scss +++ b/src/forms/FormControl.scss @@ -77,7 +77,7 @@ } // default focus state - &:focus-visible { + &:not([type='checkbox']):not([type='radio']):focus-visible { @include focusBoxShadowInset; } } @@ -520,8 +520,7 @@ // these selectors are temporary to override base.scss // once Field styles are widely adopted, we can adjust this and the global base styles -input[type='checkbox'].FormControl-checkbox, -input[type='radio'].FormControl-radio { +input[type='checkbox'].FormControl-checkbox { @include Field; position: relative; @@ -604,9 +603,8 @@ input[type='radio'].FormControl-radio { // stylelint-enable primer/colors } - &:focus, &:focus-visible { - outline-offset: 2px; + @include focusOutline(2px); } &:indeterminate { @@ -618,31 +616,43 @@ input[type='radio'].FormControl-radio { } input[type='radio'].FormControl-radio { - border-radius: var(--primer-borderRadius-full, 100vh); + @include Field; - &::before { - clip-path: circle(0%); - mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgOS4zNzVDNy40MTYyMiA5LjM3NSA5LjM3NSA3LjQxNjIyIDkuMzc1IDVDOS4zNzUgMi41ODM3NiA3LjQxNjIyIDAuNjI1IDUgMC42MjVDMi41ODM3NiAwLjYyNSAwLjYyNSAyLjU4Mzc2IDAuNjI1IDVDMC42MjUgNy40MTYyMiAyLjU4Mzc2IDkuMzc1IDUgOS4zNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K'); // checked circle image - mask-size: 65%; + position: relative; + width: var(--base-size-16, 16px); + height: var(--base-size-16, 16px); + margin: 0; + margin-top: 0.125rem; // 2px to center align with label (20px line-height) + cursor: pointer; + transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out + appearance: none; + border-radius: var(--primer-borderRadius-full, 100vh); - @media screen and (prefers-reduced-motion: no-preference) { - animation: radioOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; // slightly snappier animation out - } + &::after { + @include minTouchTarget(var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px)); } &:checked { - &::before { - @media screen and (prefers-reduced-motion: no-preference) { - animation: radioIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms; - } + border-width: var(--base-size-4, 4px); + border-color: var(--color-accent-fg); + + &:disabled { + border-color: var(--color-primer-fg-disabled); + cursor: not-allowed; } } - &:indeterminate { - &::before { - visibility: hidden; - } + &:focus-visible { + @include focusOutline(2px); + } + + // Windows High Contrast mode + // stylelint-disable primer/colors + @media (forced-colors: active) { + background-color: CanvasText; + border-color: CanvasText; } + // stylelint-enable primer/colors } @keyframes checkmarkIn { @@ -664,23 +674,3 @@ input[type='radio'].FormControl-radio { clip-path: inset(var(--base-size-16, 16px) 0 0 0); } } - -@keyframes radioIn { - from { - clip-path: circle(0%); - } - - to { - clip-path: circle(100%); - } -} - -@keyframes radioOut { - from { - clip-path: circle(100%); - } - - to { - clip-path: circle(0%); - } -} From 5a253336789fa1af316a1e0e9b166c4f929359d8 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Thu, 17 Nov 2022 00:53:52 +0000 Subject: [PATCH 2/3] Stylelint auto-fixes --- src/forms/FormControl.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/forms/FormControl.scss b/src/forms/FormControl.scss index 9d2261da01..e4b5f2f452 100644 --- a/src/forms/FormControl.scss +++ b/src/forms/FormControl.scss @@ -624,21 +624,21 @@ input[type='radio'].FormControl-radio { margin: 0; margin-top: 0.125rem; // 2px to center align with label (20px line-height) cursor: pointer; + border-radius: var(--primer-borderRadius-full, 100vh); transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); // checked -> unchecked - add 120ms delay to fully see animation-out appearance: none; - border-radius: var(--primer-borderRadius-full, 100vh); &::after { @include minTouchTarget(var(--primer-control-medium-size, 32px), var(--primer-control-medium-size, 32px)); } &:checked { - border-width: var(--base-size-4, 4px); border-color: var(--color-accent-fg); + border-width: var(--base-size-4, 4px); &:disabled { - border-color: var(--color-primer-fg-disabled); cursor: not-allowed; + border-color: var(--color-primer-fg-disabled); } } From 6084b91a4e523e3de24b937fe26aa0814706f427 Mon Sep 17 00:00:00 2001 From: Katie Langerman Date: Wed, 16 Nov 2022 16:56:08 -0800 Subject: [PATCH 3/3] Create rude-ears-tie.md --- .changeset/rude-ears-tie.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rude-ears-tie.md diff --git a/.changeset/rude-ears-tie.md b/.changeset/rude-ears-tie.md new file mode 100644 index 0000000000..8e8cf0b0a0 --- /dev/null +++ b/.changeset/rude-ears-tie.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +[Bug] Radio checked + focus state fixes