Added variant option styling to TextInput

Headstorm · Oct 21, 2021 · d4923f0 · d4923f0
1 parent c464175
commit d4923f0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 11 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -100,7 +100,7 @@ export const ButtonContainer: string & StyledComponentBase<any, {}, ButtonContai
       border: ${
         variant === variants.outline
           ? `1px solid ${color || colors.grayDark}`
-          : '1px solid transparent;'
+          : '1px solid transparent'
       };
       cursor: pointer;
       background-color: ${backgroundColor};

diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 import * as IconPaths from '@mdi/js';
 
 import TextInput, { TextInputProps } from './TextInput';
+import variants from '../../enums/variants';
 
 const iconOptions = {
   none: '',
@@ -78,6 +79,7 @@ BasicTextInput.args = {
   cols: 0,
   isValid: true,
   errorMessage: '',
+  variant: variants.outline,
   type: '',
   multiLineIsResizable: false,
   showCharacterCount: true,
@@ -109,6 +111,13 @@ export default {
         type: 'select',
       },
     },
+    variant: {
+      options: Object.keys(variants),
+      mapping: variants,
+      control: {
+        type: 'radio',
+      },
+    },
   },
   parameters: {
     design: {

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -11,25 +11,43 @@ import React, {
 } from 'react';
 import styled, { css } from 'styled-components';
 import Icon from '@mdi/react';
-import { mdiClose } from '@mdi/js';
 import debounce from 'lodash.debounce';
+import { mdiClose } from '@mdi/js';
+import { darken } from 'polished';
 import { Div, Input as InputElement, TextArea } from '../../htmlElements';
 import { SubcomponentPropsType, StyledSubcomponentType } from '../commonTypes';
 import { useAnalytics, useTheme } from '../../context';
 import { disabledStyles } from '../../utils/color';
+import variants from '../../enums/variants';
+
+export type TextInputContainerProps = {
+  disabled?: boolean;
+  isValid?: boolean;
+  variant?: variants;
+};
 
 const Container = styled(Div)`
-  ${({ disabled = false, isValid }: { disabled?: boolean; isValid?: boolean }) => {
+  ${({ disabled = false, isValid, variant = variants.outline }: TextInputContainerProps) => {
     const { colors } = useTheme();
+    const borderColor = isValid === false ? colors.destructive : colors.grayMedium;
     return `
-      border 1px solid ${isValid === false ? colors.destructive : colors.grayMedium};
-      min-width: 10rem;
-      position: relative;
-      display: flex;
-      flex-flow: row;
-      border-radius: 0.25em;
-      background-color: ${colors.background};
-      ${disabled ? disabledStyles() : ''}
+    min-width: 10rem;
+    position: relative;
+    display: flex;
+    flex-flow: row;
+    border-radius: 0.25em;
+    border: ${variant === variants.outline ? `1px solid ${borderColor}` : '1px solid transparent'};
+    ${
+      variant === variants.fill
+        ? `border-bottom: 1px solid ${borderColor}; 
+          border-bottom-left-radius: 0; 
+          border-bottom-right-radius: 0;`
+        : ''
+    }
+    background-color: ${
+      variant === variants.fill ? darken(0.1, colors.background) : colors.background
+    };
+    ${disabled ? disabledStyles() : ''}
   `;
   }}
 `;
@@ -117,6 +135,7 @@ export type TextInputProps = InputHTMLAttributes<HTMLInputElement> &
     isValid?: boolean;
     isMultiline?: boolean;
     errorMessage?: string;
+    variant?: variants;
     debounceInterval?: number;
     multiLineIsResizable?: boolean;
     maxLength?: number;
@@ -164,6 +183,7 @@ const TextInput = ({
   isValid = true,
   isMultiline,
   errorMessage,
+  variant = variants.outline,
   debounceInterval = 8,
   multiLineIsResizable,
   maxLength,
@@ -235,6 +255,7 @@ const TextInput = ({
     <StyledContainer
       disabled={nativeHTMLAttributes.disabled}
       isValid={isValid}
+      variant={variant}
       ref={containerRef}
       {...containerProps}
     >