fixing radio buttons - focus state

wri · Nov 11, 2024 · c4eafd5 · c4eafd5
1 parent 2373c62
commit c4eafd5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
@@ -15,7 +15,7 @@ import { Button } from 'wri-design-systems'
 />
 ```
 
-### Props
+## Props
 ```
 type ButtonProps = Omit<
   ChakraButtonProps,

diff --git a/src/components/Radio/styled.ts b/src/components/Radio/styled.ts
@@ -26,6 +26,14 @@ export const StyledRadio = styled(Radio)<{
       ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)};
     outline-offset: 2px;
     box-shadow: none;
+
+    &[data-checked] {
+      border: 2px solid
+        ${({ theme, isDisabled }) =>
+          isDisabled
+            ? getThemedColor(theme.colors, 'neutral', 400)
+            : getThemedColor(theme.colors, 'primary', 700)} !important;
+    }
   }
 
   &[data-checked] {