fix(RadioButton): not centered when zoomed (#967)

* fix(RadioButton): not centered when zoomed * fix(RadioButton): fix stylelint * fix(RadioButton): rmv useless margin-top
kronostechnologies · Aug 19, 2024 · b409142 · b409142
1 parent 91b42e4
commit b409142
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 30 deletions.
diff --git a/packages/react/src/components/radio-button/radio-button.test.tsx.snap b/packages/react/src/components/radio-button/radio-button.test.tsx.snap
@@ -32,24 +32,12 @@ exports[`Radio button matches snapshot 1`] = `
 }
 
 .c1:checked {
+  background-image: url('data:image/svg+xml;utf8,%0A%20%20%20%20%20%20%20%20%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%224%22%20fill%3D%22%23006296%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E');
+  background-position: center;
+  background-repeat: no-repeat;
   border: 2px solid #006296;
 }
 
-.c1:checked::after {
-  background-color: #006296;
-  border-radius: 50%;
-  content: '';
-  display: block;
-  height: var(--size-half);
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  -webkit-transform: translate(-50%,-50%);
-  -ms-transform: translate(-50%,-50%);
-  transform: translate(-50%,-50%);
-  width: var(--size-half);
-}
-
 .c1:disabled + label {
   color: #B7BBC2;
 }
@@ -77,7 +65,6 @@ exports[`Radio button matches snapshot 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  margin-top: var(--spacing-1x);
   position: relative;
 }
 

diff --git a/packages/react/src/components/radio-button/radio-button.tsx b/packages/react/src/components/radio-button/radio-button.tsx
@@ -3,6 +3,14 @@ import styled from 'styled-components';
 import { focus } from '../../utils/css-state';
 import { useId } from '../../hooks/use-id';
 
+const getDotSvgDataUrl = (color: string): string => {
+    const svg = `
+        <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="8" cy="8" r="4" fill="${color}"/>
+        </svg>`;
+    return `url('data:image/svg+xml;utf8,${encodeURIComponent(svg)}')`;
+};
+
 const StyledInput = styled.input<{ disabled?: boolean }>`
     appearance: none;
     background-color: ${({ theme, disabled }) => (disabled ? theme.component['radio-button-disabled-background-color'] : theme.component['radio-button-background-color'])};
@@ -20,19 +28,10 @@ const StyledInput = styled.input<{ disabled?: boolean }>`
     ${(theme) => focus(theme, { selector: '+' })}
      
     &:checked {
+        background-image: ${({ theme, disabled }) => getDotSvgDataUrl(disabled ? theme.component['radio-button-disabled-checked-dot-color'] : theme.component['radio-button-checked-dot-color'])};
+        background-position: center;
+        background-repeat: no-repeat;
         border: 2px solid ${({ theme, disabled }) => (disabled ? theme.component['radio-button-disabled-border-color'] : theme.component['radio-button-checked-border-color'])};
-        &::after {
-            background-color: ${({ theme, disabled }) => (disabled ? theme.component['radio-button-disabled-border-color'] : theme.component['radio-button-checked-background-color'])};
-            border-radius: 50%;
-            content: '';
-            display: block;
-            height: var(--size-half);
-            left: 50%;
-            position: absolute;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: var(--size-half);
-        }
     }
     
     &:disabled {
@@ -61,7 +60,6 @@ const StyledLabel = styled.label`
 const StyledContainer = styled.div`
     align-items: flex-start;
     display: inline-flex;
-    margin-top: var(--spacing-1x);
     position: relative;
 `;
 

diff --git a/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts b/packages/react/src/themes/tokens/component/radio-button-group-tokens.ts
@@ -11,7 +11,9 @@ export type RadioButtonGroupTokens =
     | 'radio-button-disabled-border-color'
     | 'radio-button-hover-border-color'
     | 'radio-button-disabled-hover-border-color'
-    | 'radio-button-disabled-label-color';
+    | 'radio-button-disabled-label-color'
+    | 'radio-button-checked-dot-color'
+    | 'radio-button-disabled-checked-dot-color';
 
 export type RadioButtonGroupTokenValue = AliasTokens | RefTokens;
 
@@ -32,4 +34,7 @@ export const defaultRadioButtonGroupTokens: RadioButtonGroupTokenMap = {
 
     'radio-button-checked-background-color': 'color-control-background-checked',
     'radio-button-checked-border-color': 'color-control-border-checked',
+
+    'radio-button-checked-dot-color': 'color-control-background-checked',
+    'radio-button-disabled-checked-dot-color': 'color-control-auxiliary-disabled',
 };