fix(numberinput): add arrowicon to buttons

react95-io · Jan 15, 2021 · e8f96d2 · e8f96d2
1 parent 43f4852
commit e8f96d2
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 18 deletions.
diff --git a/src/ColorButton/ColorButton.tsx b/src/ColorButton/ColorButton.tsx
@@ -40,7 +40,7 @@ const ColorButton = ({ disabled, color, ...rest }: Props) => {
         />
         <Divider orientation='vertical' size={previewHeight} />
         <ArrowIcon
-          direction='bottom'
+          direction='down'
           disabled={disabled}
           segments={3}
           style={styles.dropdownIcon}

diff --git a/src/Icons/ArrowIcon.tsx b/src/Icons/ArrowIcon.tsx
@@ -14,7 +14,7 @@ type Props = {
 const pixelSize = 2;
 
 const ArrowIcon = ({
-  direction = 'bottom',
+  direction = 'down',
   disabled = false,
   segments = 4,
   style = {},
@@ -24,7 +24,7 @@ const ArrowIcon = ({
 
   const segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
 
-  if (['right', 'bottom'].includes(direction)) {
+  if (['right', 'down'].includes(direction)) {
     segmentSizes.reverse();
   }
   const isHorizontal = ['left', 'right'].includes(direction);

diff --git a/src/Icons/ChevronIcon.tsx b/src/Icons/ChevronIcon.tsx
@@ -16,7 +16,7 @@ const pixelSize = 2;
 
 const ChevronIcon = ({
   color,
-  direction = 'bottom',
+  direction = 'down',
   disabled = false,
   segments = 5,
   style = {},
@@ -27,7 +27,7 @@ const ChevronIcon = ({
   const baseColor = color || theme.materialText;
   let segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
 
-  if (['right', 'bottom'].includes(direction)) {
+  if (['right', 'down'].includes(direction)) {
     segmentSizes = segmentSizes.reverse();
   }
   const isHorizontal = ['left', 'right'].includes(direction);

diff --git a/src/List/ListAccordion.tsx b/src/List/ListAccordion.tsx
@@ -83,13 +83,13 @@ const ListAccordion = ({
             <ChevronIcon
               color={theme.progress}
               segments={3}
-              direction={expanded ? 'top' : 'bottom'}
+              direction={expanded ? 'up' : 'down'}
             />
             <ChevronIcon
               color={theme.progress}
               segments={3}
               style={{ marginVertical: 1 }}
-              direction={expanded ? 'top' : 'bottom'}
+              direction={expanded ? 'up' : 'down'}
             />
           </View>
         </View>

diff --git a/src/NumberInput/NumberInput.tsx b/src/NumberInput/NumberInput.tsx
@@ -5,7 +5,7 @@ import type { DimensionValue } from '../types';
 import { blockSizes } from '../common/styles';
 import { clamp } from '../common/utils';
 
-import { TextInput, Button, Text } from '..';
+import { TextInput, Button, ArrowIcon } from '..';
 
 type Props = {
   defaultValue?: number;
@@ -80,9 +80,11 @@ const NumberInput = ({
         style={styles.button}
         testID='decrement'
       >
-        <Text disabled={isDecrementDisabled} style={styles.buttonText}>
-          -
-        </Text>
+        <ArrowIcon
+          segments={4}
+          disabled={isDecrementDisabled}
+          direction='left'
+        />
       </Button>
       <TextInput
         variant={variant}
@@ -101,9 +103,11 @@ const NumberInput = ({
         style={styles.button}
         testID='increment'
       >
-        <Text disabled={isIncrementDisabled} style={styles.buttonText}>
-          +
-        </Text>
+        <ArrowIcon
+          segments={4}
+          disabled={isIncrementDisabled}
+          direction='right'
+        />
       </Button>
     </View>
   );

diff --git a/src/ScrollView/ScrollView.tsx b/src/ScrollView/ScrollView.tsx
@@ -182,7 +182,7 @@ const ScrollView = ({
             style={[styles.scrollbarButton]}
           >
             <ArrowIcon
-              direction={horizontal ? 'left' : 'top'}
+              direction={horizontal ? 'left' : 'up'}
               disabled={contentFullyVisible}
               segments={4}
             />
@@ -229,7 +229,7 @@ const ScrollView = ({
             style={[styles.scrollbarButton]}
           >
             <ArrowIcon
-              direction={horizontal ? 'right' : 'bottom'}
+              direction={horizontal ? 'right' : 'down'}
               disabled={contentFullyVisible}
               segments={4}
             />

diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
@@ -127,7 +127,7 @@ const Select = ({
             >
               <ArrowIcon
                 segments={4}
-                direction='bottom'
+                direction='down'
                 disabled={disabled}
                 style={{
                   paddingTop: isPressed ? 2 : 0,

diff --git a/src/types.tsx b/src/types.tsx
@@ -14,7 +14,7 @@ export type Sizes = 'sm' | 'md' | 'lg';
 
 export type Orientation = 'horizontal' | 'vertical';
 
-export type Direction = 'top' | 'bottom' | 'left' | 'right';
+export type Direction = 'up' | 'down' | 'left' | 'right';
 
 export type DimensionValue = undefined | number | string;