feat: add borderColor prop and refactor

luffy84217 · Dec 27, 2021 · ec941a5 · ec941a5
1 parent dccb140
commit ec941a5
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 15 deletions.
diff --git a/src/components/PinInput.tsx b/src/components/PinInput.tsx
@@ -68,6 +68,10 @@ PinInput.defaultProps = {
   size: 'md',
   autoFocus: false,
   autoTab: true,
+  borderColor: '#cccccc',
+  errorBorderColor: 'rgb(220, 53, 69)',
+  focusBorderColor: '#0d6efd',
+  validBorderColor: 'rgb(25, 135, 84)',
   containerStyle: {},
   inputStyle: {},
   autoComplete: 'off',

diff --git a/src/components/PinInputField.tsx b/src/components/PinInputField.tsx
@@ -34,6 +34,7 @@ const PinInputField: React.FC<PinInputFieldProps> = ({
   placeholder,
   required,
   inputStyle,
+  borderColor,
   errorBorderColor,
   focusBorderColor,
   validBorderColor,
@@ -167,6 +168,7 @@ const PinInputField: React.FC<PinInputFieldProps> = ({
       showState={showState}
       sizing={size}
       style={inputStyle}
+      borderColor={borderColor}
       errorBorderColor={errorBorderColor}
       focusBorderColor={focusBorderColor}
       validBorderColor={validBorderColor}

diff --git a/src/styles/PinInputField.ts b/src/styles/PinInputField.ts
@@ -5,6 +5,7 @@ export const Input = styled.input<{
   completed: boolean;
   showState: boolean;
   sizing: 'xs' | 'sm' | 'md' | 'lg';
+  borderColor: string;
   errorBorderColor: string;
   focusBorderColor: string;
   validBorderColor: string;
@@ -52,13 +53,12 @@ export const Input = styled.input<{
   border-radius: 0.375rem;
   border-width: 1px;
   border-style: solid;
-  border-color: #cccccc;
+  border-color: ${({ borderColor }) => borderColor};
   background-color: inherit;
   box-sizing: border-box;
   &:focus {
-    border-color: ${({ focusBorderColor }) => focusBorderColor || '#0d6efd'};
-    box-shadow: ${({ focusBorderColor }) => focusBorderColor || '#0d6efd'} 0px
-      0px 0px 1px;
+    border-color: ${({ focusBorderColor }) => focusBorderColor};
+    box-shadow: ${({ focusBorderColor }) => focusBorderColor} 0px 0px 0px 1px;
   }
   &:last-child {
     margin-right: 0;
@@ -69,13 +69,15 @@ export const Input = styled.input<{
     return completed && showState
       ? `&:valid {
     border-color: ${
-      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(25, 135, 84)'
+      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : validBorderColor
     };
     box-shadow: ${
-      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(25, 135, 84)'
+      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : validBorderColor
     } 0px 0px 0px 1px;
     background-color: ${
-      rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)` : 'rgba(25, 135, 84, 0.1)'
+      rgb
+        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
+        : validBorderColor.replace('rgb', 'rgba').replace(')', ', 0.1)')
     };
   }`
       : '';
@@ -86,13 +88,15 @@ export const Input = styled.input<{
     return showState
       ? `&:invalid {
     border-color: ${
-      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(220, 53, 69)'
+      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : errorBorderColor
     };
     box-shadow: ${
-      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : 'rgb(220, 53, 69)'
+      rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : errorBorderColor
     } 0px 0px 0px 1px;
     background-color: ${
-      rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)` : 'rgb(220, 53, 69, 0.1)'
+      rgb
+        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
+        : errorBorderColor.replace('rgb', 'rgba').replace(')', ', 0.1)')
     };
   }`
       : '';

diff --git a/src/tests/__snapshots__/PinInput.test.tsx.snap b/src/tests/__snapshots__/PinInput.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`Pin Input should render correct style when border color is provided 1`]
 .c1:invalid {
   border-color: rgb(220,53,69);
   box-shadow: rgb(220,53,69) 0px 0px 0px 1px;
-  background-color: rgb(220,53,69,0.1);
+  background-color: rgba(220,53,69,0.1);
 }
 
 .c1:disabled {
@@ -286,7 +286,7 @@ exports[`Pin Input should render correct style when size is provided 1`] = `
 .c1:invalid {
   border-color: rgb(220,53,69);
   box-shadow: rgb(220,53,69) 0px 0px 0px 1px;
-  background-color: rgb(220,53,69,0.1);
+  background-color: rgba(220,53,69,0.1);
 }
 
 .c1:disabled {
@@ -401,7 +401,7 @@ exports[`Pin Input should render correct style when size is provided 2`] = `
 .c1:invalid {
   border-color: rgb(220,53,69);
   box-shadow: rgb(220,53,69) 0px 0px 0px 1px;
-  background-color: rgb(220,53,69,0.1);
+  background-color: rgba(220,53,69,0.1);
 }
 
 .c1:disabled {
@@ -516,7 +516,7 @@ exports[`Pin Input should render correct style when size is provided 3`] = `
 .c1:invalid {
   border-color: rgb(220,53,69);
   box-shadow: rgb(220,53,69) 0px 0px 0px 1px;
-  background-color: rgb(220,53,69,0.1);
+  background-color: rgba(220,53,69,0.1);
 }
 
 .c1:disabled {
@@ -631,7 +631,7 @@ exports[`Pin Input should render correct style when size is provided 4`] = `
 .c1:invalid {
   border-color: rgb(220,53,69);
   box-shadow: rgb(220,53,69) 0px 0px 0px 1px;
-  background-color: rgb(220,53,69,0.1);
+  background-color: rgba(220,53,69,0.1);
 }
 
 .c1:disabled {

diff --git a/src/types/PinInput.ts b/src/types/PinInput.ts
@@ -12,6 +12,7 @@ export type PinInputProps = {
   autoTab?: boolean;
   containerStyle?: React.CSSProperties;
   inputStyle?: React.CSSProperties;
+  borderColor?: string;
   errorBorderColor?: string;
   focusBorderColor?: string;
   validBorderColor?: string;