feat(counter): fix styling elements

Author: minheq

src/components/Alert/Alert.mdx

@@ -27,11 +27,15 @@ Give feedback to the user about an action or state
   </Box>
 </Playground>
 
+### Props
+
+<Props of={Alert} />
+
 ### Customization
 
 Use `getStyles` prop
 
-```
+```tsx
 AlertStyleProps {
   intent: Intent;
 }
@@ -46,6 +50,14 @@ AlertStyles {
 getStyles={(AlertStyleProps, Theme) => AlertStyles}
 ```
 
-### Props
+Markup
 
-<Props of={Alert} />
+```tsx
+<View containerStyle>
+  {icon}
+  <View bodyStyle>
+    <Text titleStyle>{title}</Text>
+    <Text descriptionStyle>{description}</Text>
+  </View>
+</View>
+```

src/components/Avatar/Avatar.mdx

@@ -20,11 +20,15 @@ Display avatar image, with default for name initials
   />
 </Playground>
 
+### Props
+
+<Props of={Avatar} />
+
 ### Customization
 
 Using `getStyles` prop
 
-```
+```tsx
 AvatarStylesProps {
   name?: string;
   color: AvatarColor;
@@ -42,6 +46,11 @@ AvatarStyles {
 getStyles={(AvatarStylesProps, Theme) => AvatarStyles}
 ```
 
-### Props
+Markup
 
-<Props of={Avatar} />
+```tsx
+<View containerStyle>
+  <Text textStyle>{initials}</Text>
+  <Image imageStyle />
+</View>
+```

src/components/Badge/Badge.mdx

@@ -18,11 +18,15 @@ Display to indicate status or feat of service
   </Box>
 </Playground>
 
+### Props
+
+<Props of={Badge} />
+
 ### Customization
 
 Using `getStyles` prop
 
-```
+```tsx
 BadgeStylesProps {
   shape: ContainerShape;
   size: ControlSize;
@@ -38,6 +42,10 @@ BadgeStyles {
 getStyles={(BadgeStylesProps, Theme) => BadgeStyles}
 ```
 
-### Props
+Markup
 
-<Props of={Badge} />
+```tsx
+<View containerStyle>
+  <Text textStyle>{title}</Text>
+</View>
+```

src/components/Button/Button.mdx

@@ -46,6 +46,10 @@ Button component to trigger an action
   </Box>
 </Playground>
 
+### Props
+
+<Props of={Button} />
+
 ### Customization
 
 Using `getStyles` prop
@@ -72,6 +76,16 @@ ButtonStyles {
 getStyles={(ButtonStylesProps, Theme) => ButtonStyles}
 ```
 
-### Props
+Markup
 
-<Props of={Button} />
+```tsx
+<TouchableOpacity buttonStyle>
+  <View innerButtonWrapperStyle>
+    {iconBefore}
+    <View buttonContentWrapperStyle>
+      <Text textStyle />
+    </View>
+    {iconAfter}
+  </View>
+</TouchableOpacity>
+```

src/components/Button/Button.tsx

@@ -145,8 +145,6 @@ export const Button = (props: ButtonProps) => {
       <View style={innerButtonWrapperStyle}>
         {iconBefore}
         <View style={buttonContentWrapperStyle}>
-          {/*
-          // @ts-ignore */}
           <ButtonContent {...props} textStyle={textStyle} />
         </View>
         {iconAfter}

src/components/Checkbox/Checkbox.mdx

@@ -27,6 +27,10 @@ Checkbox for boolean values
   </Toggle>
 </Playground>
 
+### Props
+
+<Props of={Checkbox} />
+
 ### Customization
 
 Using `getStyles` prop
@@ -48,6 +52,10 @@ CheckboxStyles {
 getStyles={(CheckboxStylesProps, Theme) => CheckboxStyles}
 ```
 
-### Props
+Markup
 
-<Props of={Checkbox} />
+```tsx
+<TouchableOpacity touchableStyle>
+  <View checkboxStyle>{icon}</View>
+</TouchableOpacity>
+```

src/components/Collapsible/Collapsible.mdx

@@ -33,6 +33,10 @@ Component to reveal and hide content
   </Toggle>
 </Playground>
 
+### Props
+
+<Props of={Collapsible} />
+
 ### Customization
 
 Using `getStyles` prop
@@ -53,6 +57,16 @@ CollapsibleStyles {
 getStyles={(CollapsibleStylesProps, Theme) => CollapsibleStyles}
 ```
 
-### Props
+Markup
 
-<Props of={Collapsible} />
+```tsx
+<>
+  <TouchableOpacity touchableStyle>
+    <View outerWrapperStyle>
+      <Text textStyle>{title}</Text>
+      <View iconWrapperStyle>{icon}</View>
+    </View>
+  </TouchableOpacity>
+  <View contentWrapperStyle>{children}</View>
+</>
+```

src/components/Counter/Counter.mdx

@@ -13,25 +13,49 @@ import { Counter, CounterState } from '..';
 <Playground>
   <CounterState initial={0}>
     {({ count, increment, decrement }) => (
-      <Counter
-        count={count}
-        onDecrement={decrement}
-        onIncrement={increment}
-        min={0}
-        max={10}
-        component={null}
-        getStyles={(props, theme) => ({
-          containerStyle: {},
-          counterStyle: {},
-          countStyle: {},
-          disabledStyle: {},
-          ntextStyle: {},
-        })}
-      />
+      <Counter count={count} onDecrement={decrement} onIncrement={increment} />
     )}
   </CounterState>
 </Playground>
 
 ### Props
 
 <Props of={Counter} />
+
+### Customization
+
+Using `getStyles` prop
+
+```
+CounterStylesProps {
+  count: number;
+}
+
+CounterStyles {
+  containerStyle: ViewStyle;
+  counterStyle: ViewStyle;
+  countStyle: ViewStyle;
+  decrementWrapperStyle: ViewStyle;
+  disabledStyle: ViewStyle;
+  incrementWrapperStyle: ViewStyle;
+  textStyle: TextStyle;
+}
+
+getStyles={(CounterStylesProps, Theme) => CounterStyles}
+```
+
+Markup
+
+```tsx
+<View containerStyle>
+  <View decrementWrapperStyle>
+    <TouchableOpacity counterStyle>{icon}</TouchableOpacity>
+  </View>
+  <View countStyle>
+    <Text textStyle>{count}</Text>
+  </View>
+  <View incrementWrapperStyle>
+    <TouchableOpacity counterStyle>{icon}</TouchableOpacity>
+  </View>
+</View>
+```

src/components/Counter/Counter.styles.ts

@@ -2,15 +2,24 @@ import { TextStyle, ViewStyle } from 'react-native';
 
 import { Theme } from '../../theme/Theme';
 
+export interface CounterStylesProps {
+  count: number;
+}
+
 export interface CounterStyles {
   containerStyle: ViewStyle;
-  countStyle: ViewStyle;
   counterStyle: ViewStyle;
+  countStyle: ViewStyle;
+  decrementWrapperStyle: ViewStyle;
   disabledStyle: ViewStyle;
+  incrementWrapperStyle: ViewStyle;
   textStyle: TextStyle;
 }
 
-export type GetCounterStyles = (props: {}, theme: Theme) => CounterStyles;
+export type GetCounterStyles = (
+  props: CounterStylesProps,
+  theme: Theme,
+) => CounterStyles;
 
 export const getCounterStyles: GetCounterStyles = (props, theme) => {
   return {
@@ -32,9 +41,11 @@ export const getCounterStyles: GetCounterStyles = (props, theme) => {
       justifyContent: 'center',
       width: 40,
     },
+    decrementWrapperStyle: { paddingRight: 16 },
     disabledStyle: {
       borderColor: theme.colors.border.default,
     },
+    incrementWrapperStyle: { paddingLeft: 16 },
     textStyle: {},
   };
 };

src/components/Counter/Counter.tsx

@@ -4,7 +4,6 @@ import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
 import { mergeStyles, ReplaceReturnType } from '../../utils/mergeStyles';
-import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { Text } from '../Typography';
 import {
@@ -14,13 +13,24 @@ import {
 } from './Counter.styles';
 
 export interface CounterProps {
-  count: number;
+  /** Count to be displayed. */
+  count?: number;
+
+  /** Minimum count for the counter. Upon reaching the limit, it will disable decrement button. */
   min?: number;
+
+  /** Maximum count for the counter. Upon reaching the limit, it will disable increment button. */
   max?: number;
-  /* custom component in place of count */
+
+  /** Custom component in place of count */
   component?: React.ReactNode;
+
+  /** Called when increment button is pressed */
   onIncrement?: () => void;
+
+  /** Called when decrement button is pressed */
   onDecrement?: () => void;
+
   /**
    * Inline styles for components
    */
@@ -29,7 +39,7 @@ export interface CounterProps {
 
 export const Counter = (props: CounterProps) => {
   const {
-    count,
+    count = 0,
     component,
     max,
     min,
@@ -44,22 +54,23 @@ export const Counter = (props: CounterProps) => {
     containerStyle,
     counterStyle,
     countStyle,
-    textStyle,
+    decrementWrapperStyle,
     disabledStyle,
+    incrementWrapperStyle,
+    textStyle,
   } = mergeStyles(
     getCounterStyles,
     getStyles,
     theme.components.getCounterStyles,
-  )({}, theme);
+  )({ count }, theme);
 
   const isDecrementDisabled = min === count;
   const isIncrementDisabled = max === count;
 
   return (
     <View style={containerStyle}>
-      <Box paddingRight={16}>
+      <View style={decrementWrapperStyle}>
         <TouchableOpacity
-          activeOpacity={0.7}
           style={{
             ...counterStyle,
             ...(isDecrementDisabled && disabledStyle),
@@ -77,7 +88,7 @@ export const Counter = (props: CounterProps) => {
             }
           />
         </TouchableOpacity>
-      </Box>
+      </View>
       {component || (
         <View style={countStyle}>
           <Text
@@ -86,9 +97,8 @@ export const Counter = (props: CounterProps) => {
           >{`${count}`}</Text>
         </View>
       )}
-      <Box paddingLeft={16}>
+      <View style={incrementWrapperStyle}>
         <TouchableOpacity
-          activeOpacity={0.7}
           style={{
             ...counterStyle,
             ...(isIncrementDisabled && disabledStyle),
@@ -106,7 +116,7 @@ export const Counter = (props: CounterProps) => {
             }
           />
         </TouchableOpacity>
-      </Box>
+      </View>
     </View>
   );
 };