Input Textarea css changes

components/field/src/field.module.scss

@@ -5,9 +5,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  margin: size('1x') size('0');
+  margin: size('0') size('1x');
 
   @include typography('caption-revamp');
+  color: color('background-70');
 }
 
 .required {
@@ -20,6 +21,11 @@
   margin-top: margin-top('small');
   margin-bottom: negative(margin-bottom('field') - 1);
   overflow: hidden;
+
+  &-icon {
+    padding-right: size('1x');
+    margin-top: calc(size('1x')/4);
+  }
 }
 
 .meta:hover {
@@ -53,7 +59,7 @@
   color: color('input.error');
 }
 .success {
-  color: color('success-base-new');
+  color: color('success-100');
 }
 .icon {
   color: color('primary-base-new');

components/field/src/field.tsx

@@ -4,6 +4,9 @@ import React, {
   Children,
   isValidElement,
 } from 'react'
+import Icon from '@applique-ui/icon'
+import TimesSolid from "uikit-icons/svgs/TimesSolid"
+import CheckSolid from "uikit-icons/svgs/CheckSolid"
 
 import classnames from './field.module.scss'
 
@@ -103,13 +106,15 @@ export default function Field({
               role="alert"
               className={classnames({ error: !!error })}
             >
+              <Icon name={TimesSolid} className={classnames('meta-icon')}/>
               {Array.isArray(error) ? error.join(' ') : error}
             </div>
           ) : success ? (
             <div
               id={htmlFor ? htmlFor + '__success' : null}
               className={classnames('success')}
             >
+              <Icon name={CheckSolid} className={classnames('meta-icon')}/>
               {success}
             </div>
           ) : (

components/input-text-area/src/input-text-area.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import classnames from './input-text-area.module.scss'
-import Icon, { IconName } from '@applique-ui/icon'
+import { IconName } from '@applique-ui/icon'
+import Input from '@applique-ui/input'
 
 export interface Props extends BaseProps {
   /** @private */
@@ -32,9 +32,6 @@ type FieldContext = {
   error?: boolean
   disabled?: boolean
 }
-function isEmptyValue(value) {
-  return typeof value !== 'string' || !value
-}
 
 /**
  * A large text input component.
@@ -44,44 +41,14 @@ function isEmptyValue(value) {
  * @category input
  * @see http://uikit.myntra.com/components/input-text-area
  */
-export default function InputTextArea({
-  className,
-  noResize,
-  value,
-  onChange,
-  variant = 'bordered',
-  error = false,
-  disabled,
-  __fieldContext = {},
-  adornmentPosition = 'start',
-  icon,
-  ...props
-}: Props) {
-  error = !!(error || __fieldContext.error)
-  disabled = !!(disabled || __fieldContext.disabled)
+export default function InputTextArea({onChange, value, ...props}: Props) {
   return (
-    <div
-      className={classnames(
-        className,
-        'container',
-        { error },
-        { disable: disabled },
-        { standard: variant === 'standard' },
-        { bordered: variant === 'bordered' },
-        { filled: !isEmptyValue(value) },
-        { noResize }
-      )}
-    >
-      {icon && <Icon className={classnames('icon')} name={icon} />}
-
-      <textarea
-        {...props}
-        value={value || ''}
-        disabled={disabled}
-        className={classnames('input')}
-        onChange={(event) => onChange && onChange(event.target.value)}
-      />
-    </div>
+    <Input
+      {...props}
+      value={typeof value !== 'string' ? '' : value}
+      onChange={(event) => onChange?.(event.target.value)}
+      type='textarea'
+    />
   )
 }
 

components/input/src/_input.scss

@@ -27,6 +27,7 @@
   line-height: inherit;
   color: text-color('input.text');
   background-color: transparent;
+  caret-color: color('input.active');
   #{$border-type}: 1px solid color('input.border');
 
   @if not($border-type == 'border-bottom') {
@@ -38,6 +39,13 @@
   textarea:not([disabled])::placeholder {
     color: color('input.placeholder');
   }
+  input:is([disabled])::placeholder {
+    color: color('input.placeholder.disabled');
+  }
+  textarea:is([disabled])::placeholder {
+    color: color('input.placeholder.disabled');
+  }
+
   &.filled {
     #{$border-type}: 1px solid color('input.filled');
   }
@@ -60,6 +68,12 @@
   &:active {
     #{$border-type}: 1px solid color('input.active');
   }
+  &.readOnly {
+    background-color: color('input.readOnly');
+  }
+  &.readOnly textarea{
+    background-color: color('input.readOnly');
+  }
 }
 
 @mixin mixin-input-label-component {

components/input/src/input.module.scss

@@ -7,6 +7,18 @@
   }
 
   padding: padding('input.text');
+
+  &-textarea {
+    width: 100%;
+    vertical-align: baseline;
+    border: none;
+    outline: none;
+
+    &:disabled,
+    &[disabled] {
+      resize: none;
+    }
+  }
 }
 
 .input:not(:focus) {
@@ -36,7 +48,6 @@
   input {
     flex-grow: 1;
     padding: 0;
-    // margin-left: size('1x');
     line-height: inherit;
     background-color: transparent;
     border: 0;
@@ -56,4 +67,31 @@
       margin-left: size('1x');
     }
   }
+
+  &-textarea {
+    position: relative;
+    display: flex;
+    overflow: scroll;
+    resize: vertical;
+    &.standard {
+      @include mixin-input-text-revamp(
+        'border-bottom',
+        padding('input-text-standard')
+      );
+    }
+    &.bordered {
+      @include mixin-input-text-revamp('border', padding('input.textarea'));
+    }
+    textarea {
+      color: text-color('input.text');
+      resize: none;
+      font-family: Roboto, Helvetica, sans-serif;
+    }
+    &.disable, &.noResize, &.readOnly {
+      resize: none;
+    }
+    &.disable textarea {
+      background-color: transparent;
+    }
+  }
 }

components/input/src/input.tsx

@@ -4,7 +4,7 @@ import Icon, { IconName } from '@applique-ui/icon'
 
 export interface Props extends BaseProps {
   /** Sets the text format for the field. */
-  type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number'
+  type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'textarea'
   /** Current value of the text input field. */
   value?: string | number
   /** Displays a disabled text field */
@@ -56,6 +56,7 @@ export default function Input({
   error: propError,
   disabled: propDisabled,
   active,
+  type,
   ...props
 }: Props) {
   const { error, disabled } = {
@@ -69,14 +70,15 @@ export default function Input({
   return (
     <div
       className={classnames(
-        'container',
+        `container${type == "textarea" ? "-textarea" : ""}`,
         {
           disable: !!disabled,
           standard: standard,
           bordered: bordered,
           filled: !isEmptyValue(props.value),
           error: !!error,
           active: !!active,
+          readOnly: !!readOnly,
         },
         className
       )}
@@ -89,13 +91,23 @@ export default function Input({
           {adornment}
         </div>
       )}
-      <input
-        {...props}
-        readOnly={readOnly || !props.onChange}
-        className={classnames('input')}
-        disabled={!!disabled}
-        placeholder={placeholder}
-      />
+      {type === 'textarea' ? (
+        <textarea
+          {...props}
+          readOnly={readOnly || !props.onChange}
+          className={classnames('input-textarea')}
+          disabled={!!disabled || !!readOnly}
+          placeholder={placeholder}
+        />
+      ) : (
+        <input
+          {...props}
+          readOnly={readOnly || !props.onChange}
+          className={classnames('input')}
+          disabled={!!disabled || !!readOnly}
+          placeholder={placeholder}
+        />
+      )}
       {adornment && adornmentPosition === 'end' && (
         <div className={classnames('input-adornment', `input-adornment-end`)}>
           {adornment}

packages/accoutrement/src/config/colors.scss

@@ -37,6 +37,7 @@ $token-colors-revamp: (
   'success-40': #7ee2b8,
   'success-60': #4bce97,
   'success-80': #2abb7f,
+  'success-100': #22A06B,
   'success-140': #1f845a,
   'success-180': #216e4e,
   'success-200': #164b35,
@@ -45,6 +46,7 @@ $token-colors-revamp: (
   'danger-40': #f4b6ae,
   'danger-60': #ee9286,
   'danger-80': #e96d5d,
+  'danger-100': #E34935,
   'danger-140': #b63a2a,
   'danger-180': #882c20,
   'danger-200': #5b1d15,
@@ -61,9 +63,11 @@ $token-colors-revamp: (
   'primary-40': #c1b2ff,
   'primary-60': #a28cff,
   'primary-80': #8465ff,
+  'primary-100': #5232d0,
   'primary-140': #4228a6,
   'primary-180': #311e7d,
   'primary-200': #211453,
+  'secondary-80': #262939,
   'info-10': #e5eefb,
   'info-20': #ccddf7,
   'info-40': #99bcf0,
@@ -135,15 +139,17 @@ $colors: (
   'top-bar.border': '#nav-bar.border',
   'page.background': '#gray-light',
   'tab.border': '#gray-light',
-  'input.hover': '#primary-light-new',
+  'input.hover': '#primary-40',
   'input.focused': '#primary-base-new',
-  'input.active': '#primary-base-new',
-  'input.disabled': '#gray-base-new',
-  'input.error': '#danger-base-new',
+  'input.active': '#primary-100',
+  'input.disabled': '#background-30',
+  'input.error': '#danger-100',
   'input.border': '#gray-base-new',
-  'input.filled': '#gray-base-new-1',
-  'input.text': '#gray-base-new-5',
-  'input.placeholder': '#gray-base-new-2',
+  'input.filled': '#background-30',
+  'input.text': '#secondary-80',
+  'input.placeholder': '#background-50',
+  'input.placeholder.disabled': '#gray-base-new',
+  'input.readOnly': '#background-10',
   'warning-no-fill': $-tokens-colors-warning-no-fill,
 );
 $-tokens-colors: () !default;
@@ -164,7 +170,7 @@ $token-text-colors-warning-new: #624a19 !default;
 $text-colors: (
   'dark': $-tokens-text-colors-dark,
   'light': $-tokens-text-colors-light,
-  'input.text': $-tokens-text-colors-dark-new,
+  'input.text': '#secondary-80',
   'warning-text': $token-text-colors-warning-new,
 );