fix(*): fix checkbox size and style refactorings

Author: minheq

src/components/Badge/Badge.styles.ts

@@ -1,19 +1,16 @@
 import { TextStyle, ViewStyle } from 'react-native';
 
-import { FillColor, Fills, Theme } from '../../theme/ThemeInterface';
+import {
+  ControlSize,
+  FillColor,
+  Fills,
+  Theme,
+} from '../../theme/ThemeInterface';
 import { Shape, shapeMapping } from '../Box';
 
-export interface BadgeSizes {
-  small: ViewStyle;
-  medium: ViewStyle;
-  large: ViewStyle;
-}
-
-export type BadgeSize = keyof BadgeSizes;
-
 export interface BadgeVariables {
   fills: Fills;
-  sizes: BadgeSizes;
+  sizes: { [size in ControlSize]: ViewStyle };
 }
 export const getBadgeVariables = (theme: Theme): BadgeVariables => {
   return {
@@ -43,7 +40,7 @@ export const getBadgeVariables = (theme: Theme): BadgeVariables => {
 
 export interface BadgeStylesProps {
   shape: Shape;
-  size: BadgeSize;
+  size: ControlSize;
   color: FillColor;
   isSolid: boolean;
 }

src/components/Badge/Badge.tsx

@@ -3,21 +3,16 @@ import { View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
-import { FillColor } from '../../theme/ThemeInterface';
+import { ControlSize, FillColor } from '../../theme/ThemeInterface';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Shape } from '../Box';
 import { Text } from '../Typography';
-import {
-  BadgeSize,
-  BadgeStyles,
-  GetBadgeStyles,
-  getBadgeStyles,
-} from './Badge.styles';
+import { BadgeStyles, GetBadgeStyles, getBadgeStyles } from './Badge.styles';
 
 export interface BadgeProps {
   children: React.ReactNode;
   color?: FillColor;
-  size?: BadgeSize;
+  size?: ControlSize;
   shape?: Shape;
   isSolid?: boolean;
   getStyles?: ReplaceReturnType<GetBadgeStyles, DeepPartial<BadgeStyles>>;

src/components/Checkbox/Checkbox.mdx

@@ -20,7 +20,7 @@ import { Checkbox } from '.';
         isDisabled={false}
         isInteractive={true}
         onChange={toggle}
-        size="small"
+        size="medium"
         getStyles={(props, theme) => ({
           checkboxStyle: {},
           checkboxFocusBackgroundColor: '',

src/components/Checkbox/Checkbox.styles.ts

@@ -44,7 +44,7 @@ export const getCheckboxStyles: GetCheckboxStyles = (
   { isChecked, isDisabled, shape, hasLabel, labelPosition, checkColor, size },
   theme,
 ) => {
-  const sizeValue = theme.controlHeights[size];
+  const sizeValue = theme.controlHeights[size] - 16;
 
   return {
     checkboxFocusBackgroundColor: isChecked

src/components/Checkbox/Checkbox.tsx

@@ -44,7 +44,7 @@ export const Checkbox = (props: CheckboxProps) => {
     onChange = () => null,
     shape = 'square',
     labelPosition = 'right',
-    size = 'small',
+    size = 'medium',
     label,
     checkColor,
     getStyles,
@@ -92,15 +92,19 @@ export const Checkbox = (props: CheckboxProps) => {
     >
       <View style={outerWrapperStyle}>
         {labelPosition === 'left' && (
-          <Text getStyles={() => ({ textStyle })}>{label}</Text>
+          <Text size={size} getStyles={() => ({ textStyle })}>
+            {label}
+          </Text>
         )}
 
         <View style={checkboxStyle}>
           {isChecked ? <Icon name="check" size={20} color={iconColor} /> : null}
         </View>
 
         {labelPosition === 'right' && (
-          <Text getStyles={() => ({ textStyle })}>{label}</Text>
+          <Text size={size} getStyles={() => ({ textStyle })}>
+            {label}
+          </Text>
         )}
       </View>
     </TouchableHighlight>

src/components/Grid/Container.tsx

@@ -4,14 +4,20 @@ import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
-import { GetProgressStyles, ProgressStyles } from '../Progress/Progress.styles';
-import { getContainerStyles } from './Container.styles';
+import {
+  ContainerStyles,
+  GetContainerStyles,
+  getContainerStyles,
+} from './Container.styles';
 import { LayoutContext } from './LayoutContext';
 
 export interface ContainerProps {
   children: React.ReactNode;
   maxWidth?: number;
-  getStyles?: ReplaceReturnType<GetProgressStyles, DeepPartial<ProgressStyles>>;
+  getStyles?: ReplaceReturnType<
+    GetContainerStyles,
+    DeepPartial<ContainerStyles>
+  >;
 }
 
 /**

src/components/Progress/Progress.styles.ts

@@ -1,24 +1,24 @@
 ---
-name: Progress
+name: ProgressBar
 menu: Components
 ---
 
 import { Counter as CounterContainer } from 'react-powerplug';
 import { Playground, Props } from 'docz';
-import { Progress } from './Progress';
+import { ProgressBar } from '.';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { Counter } from '../Counter';
 
-# Progress
+# ProgressBar
 
 ### Usage
 
 <Playground>
   <CounterContainer initial={0}>
     {({ count, incBy, decBy }) => (
       <Box>
-        <Progress
+        <ProgressBar
           percent={count}
           size="large"
           getStyles={(props, theme) => ({
@@ -40,4 +40,4 @@ import { Counter } from '../Counter';
 
 ### Props
 
-<Props of={Progress} />
+<Props of={ProgressBar} />

src/components/Progress/index.ts

@@ -0,0 +1,40 @@
+import { ViewStyle } from 'react-native';
+
+import { ControlSize, Theme } from '../../theme/ThemeInterface';
+
+export interface ProgressBarVariables {
+  container: ViewStyle;
+  progress: ViewStyle;
+}
+
+export interface ProgressBarStylesProps {
+  size: ControlSize;
+}
+
+export type GetProgressBarStyles = (
+  progressStylesProps: ProgressBarStylesProps,
+  theme: Theme,
+) => ProgressBarStyles;
+
+export interface ProgressBarStyles {
+  progressStyle: ViewStyle;
+  containerStyle: ViewStyle;
+}
+
+export const getProgressBarStyles: GetProgressBarStyles = ({ size }, theme) => {
+  const height = theme.controlHeights[size] - 16;
+
+  return {
+    containerStyle: {
+      backgroundColor: theme.colors.background.greyDefault,
+      borderRadius: 999,
+      height,
+      overflow: 'hidden',
+    },
+    progressStyle: {
+      backgroundColor: theme.colors.background.primaryDefault,
+      borderRadius: 999,
+      height: '100%',
+    },
+  };
+};