feat(list): remove bullet list item and fixes

Author: minheq

scripts/convertDoczToKitchenSink.js

@@ -42,6 +42,7 @@ function removeUnused() {
     remove(tree, 'import');
     remove(tree, 'thematicBreak');
     remove(tree, 'paragraph');
+    remove(tree, 'code');
 
     const isNotH1 = node => node.type === 'heading' && node.depth !== 1;
     const isPropsTable = node =>

src/components/Badge/Badge.tsx

@@ -11,17 +11,17 @@ import { BadgeStyles, GetBadgeStyles, getBadgeStyles } from './Badge.styles';
 export interface BadgeProps {
   children: React.ReactNode;
   /**
-   * Color of badge
+   * Color of the badge
    * @default neutral
    */
   color?: FillColor;
   /**
-   * Size of badge
+   * Size of the badge
    * @default medium
    */
   size?: ControlSize;
   /**
-   * Shape of container
+   * Shape of the container
    * @default rounded
    */
   shape?: ContainerShape;

src/components/Box/Box.mdx

@@ -9,17 +9,27 @@ import { Box } from '..';
 
 # Box
 
-Box is a primitive component for convenient layout of components. All style properties are passed as props and has some convenient props such as `paddingHorizontal`, `marginVertical`, `shape` for styling
+Primitive component for convenient layout of components that accepts all `ViewStyle` properties
 
 ### Usage
 
 <Playground>
   <Box
     // ...ViewStyle
-    height={200}
-    width={200}
-    shape="rounded" // pill, circle or square (default)
+    height={100}
+    width={100}
+    shape="rounded"
     elevation={5}
-    backgroundColor="primaryDefault" // background colors or any custom color "#67c6bb"
+    backgroundColor="primaryDefault"
   />
 </Playground>
+
+### Props
+
+...extends `ViewStyle`
+
+Modified or additional props
+
+`shape` - 'circle' | 'pill' | 'rounded' | 'roundedBottom' | 'roundedLeft' | 'roundedRight' | 'roundedTop' | 'square'
+
+`backgroundColor` - valid color string or from `theme.colors.background`

src/components/Box/Box.tsx

@@ -4,11 +4,8 @@ import { View, ViewStyle } from 'react-native';
 import { BackgroundColor, ContainerShape, Theme, useTheme } from '../../theme';
 
 export interface BoxProps extends ViewStyle {
-  style?: ViewStyle;
   children?: React.ReactNode;
 
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
   shape?: ContainerShape;
 }
 
@@ -29,7 +26,7 @@ const propToFn = {
 };
 
 export const Box = (props: BoxProps) => {
-  const { children, style: propStyle, testID, ...viewStyles } = props;
+  const { children, testID, ...viewStyles } = props;
   const theme = useTheme();
   const transformedStyles = [];
   const pureStyles = {};
@@ -52,7 +49,7 @@ export const Box = (props: BoxProps) => {
   }
 
   return (
-    <View testID={testID} style={[pureStyles, transformedStyles, propStyle]}>
+    <View testID={testID} style={[pureStyles, transformedStyles]}>
       {children}
     </View>
   );

src/components/Button/Button.tsx

@@ -29,8 +29,8 @@ export interface ButtonProps extends AccessibilityProps {
   icon?: React.ReactNode;
 
   /**
-   * The intent of the button.
-   * @default "primary"
+   * The color of the button.
+   * @default "default"
    */
   color?: ButtonColor;
 
@@ -106,7 +106,7 @@ export const Button = (props: ButtonProps) => {
   const {
     appearance = 'primary',
     title,
-    color = 'primary',
+    color = 'default',
     getStyles,
     icon,
     iconAfter,