fix(radiobutton): applying border radius token (#263)

* fix(radiobutton): applying border radius token DSY-2591 Co-authored-by: Design system Natura in behalf of Design System Team <[email protected]>
natura-cosmeticos · Mar 11, 2022 · 9f261ca · 9f261ca
1 parent 0dd652d
commit 9f261ca
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@naturacosmeticos/natds-rn",
-  "version": "7.26.4",
+  "version": "7.26.5-DSY-2591.0",
   "license": "ISC",
   "main": "build/lib/index.js",
   "keywords": [

diff --git a/src/components/RadioButton/RadioButton.styles.tsx b/src/components/RadioButton/RadioButton.styles.tsx
@@ -10,6 +10,13 @@ import {
 } from '../../common/themeSelectors'
 import { RadioButtonColors } from './RadioButton'
 
+type RadioButtonProps = {
+  theme: Theme;
+  color: RadioButtonColors;
+  selected?: boolean;
+  disabled: boolean;
+}
+
 function getCircleColor(
   selected = false,
   disabled: boolean,
@@ -44,17 +51,12 @@ export const Label = styled.Text<{ theme: Theme; disabled: boolean }>(({ theme,
   marginLeft: getSpacingTiny(theme)
 }))
 
-export const Circle = styled.View<{
-  theme: Theme;
-  color: RadioButtonColors;
-  selected?: boolean;
-  disabled: boolean;
-}>(({
+export const Circle = styled.View<RadioButtonProps>(({
   theme,
   color,
   selected,
   disabled
-}) => ({
+}: RadioButtonProps) => ({
   alignItems: 'center',
   borderColor: getCircleColor(selected, disabled, color, theme),
   borderRadius: 12,
@@ -64,19 +66,14 @@ export const Circle = styled.View<{
   width: 20
 }))
 
-export const Center = styled.View<{
-  theme: Theme;
-  color: RadioButtonColors;
-  selected?: boolean;
-  disabled: boolean;
-}>(({
+export const Center = styled.View<RadioButtonProps>(({
   theme,
   color,
   selected,
   disabled
-}) => ({
+}: RadioButtonProps) => ({
   backgroundColor: getCircleColor(selected, disabled, color, theme),
-  borderRadius: 12,
+  borderRadius: `${theme.radioButton.borderRadius}px`,
   height: 10,
   width: 10
 }))