fix(iconbutton): applying border radius token (#245)

* fix(iconbutton): applying border radius token DSY-2580 Co-authored-by: @mattosdavi
natura-cosmeticos · Feb 8, 2022 · 7f425c0 · 7f425c0
1 parent 3a88482
commit 7f425c0
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 398 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@naturacosmeticos/natds-rn",
-  "version": "7.26.0",
+  "version": "7.26.1-DSY-2580.0",
   "license": "ISC",
   "main": "build/lib/index.js",
   "keywords": [

diff --git a/src/components/IconButton/IconButton.helpers.tsx b/src/components/IconButton/IconButton.helpers.tsx
@@ -16,7 +16,7 @@ import {
 
 export const getContainerBackgroundColor = ({
   theme,
-  backgroundStyle,
+  backgroundStyle = 'none',
   disabled
 }: Omit<IconContainerProps, 'size'> & { theme: Theme }) => {
   const float = disabled

diff --git a/src/components/IconButton/IconButton.styles.ts b/src/components/IconButton/IconButton.styles.ts
@@ -4,19 +4,22 @@ import {
   getContainerBackgroundColor,
   getContainerElevation
 } from './IconButton.helpers'
-import { getSize } from '../../common/themeSelectors'
+import { getSize, Theme } from '../../common/themeSelectors'
 
 import { IconContainerProps } from './IconButton.types'
 
+type IconStyleProps = {theme: Theme} & IconContainerProps;
+const currentSizes = ['semi', 'semiX', 'medium']
+
 export const IconContainer = styled.View<IconContainerProps>`
   ${({
-    theme, backgroundStyle, disabled, size
-  }) => css`
+    theme, backgroundStyle = 'none', disabled = false, size = 'semi'
+  }: IconStyleProps) => css`
     ${getContainerElevation(backgroundStyle, theme)};
     height: ${getSize(theme, size)}px;
     width: ${getSize(theme, size)}px;
     background-color: ${getContainerBackgroundColor({ backgroundStyle, disabled, theme })};
-    border-radius: 50px;
+    border-radius: ${currentSizes.includes(size) ? theme.iconButton[size].borderRadius : 50}px;
     justify-content: center;
     align-items: center;
   `}

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -6,6 +6,7 @@ import {
   getIconSize
 } from './IconButton.helpers'
 import { IconButtonBase } from './IconButtonBase'
+import { IconContainer } from './IconButton.styles'
 
 export const IconButton = ({
   accessibilityHint,
@@ -22,19 +23,25 @@ export const IconButton = ({
   <IconButtonBase
     disabled={disabled}
     size={size}
-    backgroundStyle={backgroundStyle}
     testID={testID}
     onPress={disabled ? undefined : onPress}
     IconComponent={(
-      <Icon
-        accessibilityHint={accessibilityHint}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityRole="imagebutton"
-        size={getIconSize(size)}
-        color={getIconColor(iconColor, disabled)}
-        name={icon}
-        testID={`${testID}-icon`}
-      />
+      <IconContainer
+        disabled={disabled}
+        size={size}
+        backgroundStyle={backgroundStyle}
+        testID={`${testID}-background`}
+      >
+        <Icon
+          accessibilityHint={accessibilityHint}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityRole="imagebutton"
+          size={getIconSize(size)}
+          color={getIconColor(iconColor, disabled)}
+          name={icon}
+          testID={`${testID}-icon`}
+        />
+      </IconContainer>
       )}
   />
 )
diff --git a/src/components/IconButton/IconButton.types.ts b/src/components/IconButton/IconButton.types.ts
@@ -5,7 +5,6 @@ import { ReactElement } from 'react'
 
 export interface IconButtonBaseProps {
   IconComponent: ReactElement;
-  backgroundStyle?: IconButtonBackgroundStyle;
   disabled?: boolean;
   onPress?: () => void;
   testID?: string;
@@ -26,7 +25,7 @@ export type IconButtonColors = 'primary' | 'highEmphasis' | 'light' | IconButton
 
 export type IconButtonBackgroundStyle = 'none' | 'float' | 'overlay';
 
-export type IconContainerProps = Required<Pick<IconButtonBaseProps, 'size' | 'backgroundStyle' | 'disabled'>>;
+export type IconContainerProps = {backgroundStyle?: IconButtonBackgroundStyle} & Required<Pick<IconButtonBaseProps, 'size' | 'disabled'>>;
 
 export interface IconButtonProps {
   /**

diff --git a/src/components/IconButton/IconButtonBase.tsx b/src/components/IconButton/IconButtonBase.tsx
@@ -3,12 +3,10 @@ import { useTheme } from 'styled-components/native'
 import { TouchableRipple } from '../TouchableRipple/TouchableRipple'
 import { getSize } from '../../common/themeSelectors'
 import { IconButtonBaseProps } from './IconButton.types'
-import { IconContainer } from './IconButton.styles'
 
 export const IconButtonBase = ({
   size = 'semi',
   IconComponent,
-  backgroundStyle = 'none',
   disabled = false,
   onPress,
   testID
@@ -24,14 +22,7 @@ export const IconButtonBase = ({
       testID={`${testID}-button`}
       style={{ borderRadius: 50 }}
     >
-      <IconContainer
-        disabled={disabled}
-        size={size}
-        backgroundStyle={backgroundStyle}
-        testID={`${testID}-background`}
-      >
-        {IconComponent}
-      </IconContainer>
+      {IconComponent}
     </TouchableRipple>
   )
 }
diff --git a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`IconButton component should render IconButton component disabled 1`] =
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -89,7 +89,7 @@ exports[`IconButton component should render IconButton component with background
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -146,7 +146,7 @@ exports[`IconButton component should render IconButton component with background
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -203,7 +203,7 @@ exports[`IconButton component should render IconButton component with background
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -260,7 +260,7 @@ exports[`IconButton component should render IconButton component with color "def
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -317,7 +317,7 @@ exports[`IconButton component should render IconButton component with color "hig
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -374,7 +374,7 @@ exports[`IconButton component should render IconButton component with color "lig
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -431,7 +431,7 @@ exports[`IconButton component should render IconButton component with color "pri
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -488,7 +488,7 @@ exports[`IconButton component should render IconButton component with size "medi
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 24,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -545,7 +545,7 @@ exports[`IconButton component should render IconButton component with size "semi
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 16,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",
@@ -602,7 +602,7 @@ exports[`IconButton component should render IconButton component with size "semi
         Object {
           "alignItems": "center",
           "backgroundColor": "transparent",
-          "borderRadius": 50,
+          "borderRadius": 20,
           "elevation": 1,
           "height": "px",
           "justifyContent": "center",