fix(listitem): remove size prop

Author: minheq

src/components/Avatar/Avatar.styles.ts

@@ -57,8 +57,8 @@ export type GetAvatarStyles = (
 
 const avatarScale: { [size in ControlSize]: number } = {
   large: 2,
-  medium: 1,
-  small: 0.75,
+  medium: 1.5,
+  small: 1,
 };
 
 export const getAvatarStyles: GetAvatarStyles = (

src/components/KitchenSink/KitchenSink.tsx

@@ -611,7 +611,6 @@ export const KitchenSink = () => {
           }}
           title="Some label"
           description="Some description"
-          size="large"
         />
       </Playground>
 

src/components/ListItem/ListItem.mdx

@@ -21,7 +21,6 @@ For image, it composes `Avatar`, you can pass `avatarProps` provide more specifi
     }}
     title="Some label"
     description="Some description"
-    size="large"
   />
 </Playground>
 

src/components/ListItem/ListItem.styles.ts

@@ -18,10 +18,7 @@ export type GetListItemStyles = (
   theme: Theme,
 ) => ListItemStyles;
 
-export const getListItemStyles: GetListItemStyles = (
-  { size = 'medium', isDisabled },
-  theme,
-) => {
+export const getListItemStyles: GetListItemStyles = ({ isDisabled }, theme) => {
   return {
     descriptionStyle: {},
     imageWrapperStyle: {
@@ -39,7 +36,7 @@ export const getListItemStyles: GetListItemStyles = (
       backgroundColor: theme.colors.background.content,
       borderBottomWidth: 1,
       borderColor: theme.colors.border.default,
-      height: theme.controlHeights[size],
+      height: theme.controlHeights.large,
       justifyContent: 'center',
       paddingLeft: 16,
       paddingRight: 8,

src/components/ListItem/ListItem.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GestureResponderEvent, TouchableOpacity, View } from 'react-native';
 import { DeepPartial } from 'ts-essentials';
 
-import { ControlSize, TextSize, useTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
 import { Avatar, AvatarProps } from '../Avatar';
 import { Icon } from '../Icon';
@@ -14,18 +14,6 @@ import {
 } from './ListItem.styles';
 
 export interface ListItemProps {
-  /**
-   * Size of the list item.
-   * @default "medium"
-   */
-  size?: ControlSize;
-
-  /**
-   * When true, list item will not be able to be pressed.
-   * @default false
-   */
-  isDisabled?: boolean;
-
   /**
    * Title of the list item
    */
@@ -41,6 +29,12 @@ export interface ListItemProps {
    */
   avatarProps?: AvatarProps;
 
+  /**
+   * When true, list item will not be able to be pressed.
+   * @default false
+   */
+  isDisabled?: boolean;
+
   /**
    * Icon replacing `Avatar` on the left hand-side
    */
@@ -75,46 +69,13 @@ export interface ListItemProps {
   testID?: string;
 }
 
-const iconSize: {
-  [size in ControlSize]: number;
-} = {
-  large: 32,
-  medium: 24,
-  small: 16,
-};
-
-const avatarSize: {
-  [size in ControlSize]: number;
-} = {
-  large: 40,
-  medium: 32,
-  small: 24,
-};
-
-const titleSize: {
-  [size in ControlSize]: TextSize;
-} = {
-  large: 'large',
-  medium: 'medium',
-  small: 'small',
-};
-
-const descriptionSize: {
-  [size in ControlSize]: TextSize;
-} = {
-  large: 'medium',
-  medium: 'small',
-  small: 'xsmall',
-};
-
 export const ListItem = (props: ListItemProps) => {
   const {
     avatarProps,
     getStyles,
     isDisabled = false,
     title,
     description,
-    size = 'medium',
     onPress,
     rightIcon,
     leftIcon,
@@ -153,23 +114,19 @@ export const ListItem = (props: ListItemProps) => {
         <View style={leftWrapperStyle}>
           <View style={imageWrapperStyle}>
             {leftIcon || avatarProps ? (
-              <Avatar size={avatarSize[size]} {...avatarProps} />
+              <Avatar size="small" {...avatarProps} />
             ) : null}
           </View>
           <View style={textWrapperStyle}>
             {title && (
-              <Text
-                getStyles={() => ({ textStyle: titleStyle })}
-                size={titleSize[size]}
-                weight="500"
-              >
+              <Text getStyles={() => ({ textStyle: titleStyle })} size="large">
                 {title}
               </Text>
             )}
             {description && (
               <Text
                 getStyles={() => ({ textStyle: descriptionStyle })}
-                size={descriptionSize[size]}
+                size="medium"
                 color="muted"
               >
                 {description}
@@ -180,11 +137,7 @@ export const ListItem = (props: ListItemProps) => {
         {rightIcon === null
           ? null
           : rightIcon || (
-              <Icon
-                color="default"
-                size={iconSize[size]}
-                name="chevron-right"
-              />
+              <Icon color="default" size={24} name="chevron-right" />
             )}
       </View>
     </TouchableOpacity>