From da9d3ae65521177749a819894fd3091130931485 Mon Sep 17 00:00:00 2001
From: "ashwin.srivastav1" <ashwin.srivastav1@myntra.com>
Date: Mon, 9 Oct 2023 17:11:33 +0530
Subject: [PATCH 1/3] text area css changes

---
 components/field/src/field.module.scss        | 11 +++++++--
 components/field/src/field.tsx                |  5 ++++
 .../src/input-text-area.module.scss           |  4 ++++
 .../input-text-area/src/input-text-area.tsx   |  6 +++--
 components/input/src/_input.scss              | 14 +++++++++++
 components/input/src/input.tsx                |  3 ++-
 packages/accoutrement/src/config/colors.scss  | 23 ++++++++++++-------
 7 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/components/field/src/field.module.scss b/components/field/src/field.module.scss
index 4fe00b8b6..45087efa6 100644
--- a/components/field/src/field.module.scss
+++ b/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: #3D4152;
 }
 
 .required {
@@ -20,6 +21,11 @@
   margin-top: margin-top('small');
   margin-bottom: negative(margin-bottom('field') - 1);
   overflow: hidden;
+
+  &-icon {
+    padding-right: 4px;
+    margin-top: 1px;
+  }
 }
 
 .meta:hover {
@@ -31,6 +37,7 @@
   color: color('text-dark-medium-emphasis'); // TODO: Change to mid-emphasis.
 
   @include typography('caption-revamp-light');
+  font-weight: 200;
 }
 
 .meta > [role='alert'] {
@@ -53,7 +60,7 @@
   color: color('input.error');
 }
 .success {
-  color: color('success-base-new');
+  color: color('success-base-new-1');
 }
 .icon {
   color: color('primary-base-new');
diff --git a/components/field/src/field.tsx b/components/field/src/field.tsx
index 37f4b637b..36064683b 100644
--- a/components/field/src/field.tsx
+++ b/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,6 +106,7 @@ 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 ? (
@@ -110,6 +114,7 @@ export default function Field({
               id={htmlFor ? htmlFor + '__success' : null}
               className={classnames('success')}
             >
+              <Icon name={CheckSolid} className={classnames('meta-icon')}/>
               {success}
             </div>
           ) : (
diff --git a/components/input-text-area/src/input-text-area.module.scss b/components/input-text-area/src/input-text-area.module.scss
index f3709ed58..b6d346cb4 100644
--- a/components/input-text-area/src/input-text-area.module.scss
+++ b/components/input-text-area/src/input-text-area.module.scss
@@ -18,6 +18,7 @@
   textarea {
     color: text-color('input.text');
     resize: none;
+    font-family: Roboto, Helvetica, sans-serif;
   }
   &.disable {
     resize: none;
@@ -28,6 +29,9 @@
   &.noResize {
     resize: none;
   }
+  &.readOnly {
+    resize: none;
+  }
 }
 .icon {
   margin-top: size('1x');
diff --git a/components/input-text-area/src/input-text-area.tsx b/components/input-text-area/src/input-text-area.tsx
index ee97b3a6f..1fdc86cac 100644
--- a/components/input-text-area/src/input-text-area.tsx
+++ b/components/input-text-area/src/input-text-area.tsx
@@ -55,6 +55,7 @@ export default function InputTextArea({
   __fieldContext = {},
   adornmentPosition = 'start',
   icon,
+  readOnly,
   ...props
 }: Props) {
   error = !!(error || __fieldContext.error)
@@ -69,7 +70,8 @@ export default function InputTextArea({
         { standard: variant === 'standard' },
         { bordered: variant === 'bordered' },
         { filled: !isEmptyValue(value) },
-        { noResize }
+        { noResize },
+        { readOnly }
       )}
     >
       {icon && <Icon className={classnames('icon')} name={icon} />}
@@ -77,7 +79,7 @@ export default function InputTextArea({
       <textarea
         {...props}
         value={value || ''}
-        disabled={disabled}
+        disabled={disabled || readOnly}
         className={classnames('input')}
         onChange={(event) => onChange && onChange(event.target.value)}
       />
diff --git a/components/input/src/_input.scss b/components/input/src/_input.scss
index f7a2df14c..f6a5b278e 100644
--- a/components/input/src/_input.scss
+++ b/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') !important;
+  }
+  textarea:is([disabled])::placeholder {
+    color: color('input.placeholder') !important;
+  }
+
   &.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 {
diff --git a/components/input/src/input.tsx b/components/input/src/input.tsx
index 0f5853174..462167fcd 100644
--- a/components/input/src/input.tsx
+++ b/components/input/src/input.tsx
@@ -77,6 +77,7 @@ export default function Input({
           filled: !isEmptyValue(props.value),
           error: !!error,
           active: !!active,
+          readOnly: !!readOnly
         },
         className
       )}
@@ -93,7 +94,7 @@ export default function Input({
         {...props}
         readOnly={readOnly || !props.onChange}
         className={classnames('input')}
-        disabled={!!disabled}
+        disabled={!!disabled || !!readOnly}
         placeholder={placeholder}
       />
       {adornment && adornmentPosition === 'end' && (
diff --git a/packages/accoutrement/src/config/colors.scss b/packages/accoutrement/src/config/colors.scss
index e531c7d59..b3d549bb5 100644
--- a/packages/accoutrement/src/config/colors.scss
+++ b/packages/accoutrement/src/config/colors.scss
@@ -92,13 +92,17 @@ $token-colors-revamp: (
   'gray-base-new': #cfcfd1,
   'gray-base-new-1': #86878b,
   'danger-base-new': #c84646,
+  'danger-base-new-1': #E34935,
   'success-base-new': #239d56,
+  'success-base-new-1': #22A06B,
   'primary-base-new': #4f47c8,
+  'primary-base-active': #5232d0,
   'gray-base-new-2': #bababc,
   'gray-base-new-3': #3e3f45,
   'gray-base-new-4': #8f8f92,
   'gray-base-new-5': #0e0f17,
   'gray-base-new-6': #f3f3f3,
+  'gray-base-new-7': #262939,
   'gray-dark-base': #56575d,
   'gray-dark-base-2': #3e3f45,
   'primary-base-light': #ededf9,
@@ -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-base-active',
+  'input.disabled': '#background-30',
+  'input.error': '#danger-base-new-1',
   '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': '#gray-base-new-7',
+  '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;
@@ -159,12 +165,13 @@ $-tokens-colors: () !default;
 $-tokens-text-colors-dark: #000 !default;
 $-tokens-text-colors-light: #fff !default;
 $-tokens-text-colors-dark-new: #0e0f17 !default;
+$-tokens-input-text-color-new: #262939 !default;
 $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': $-tokens-input-text-color-new,
   'warning-text': $token-text-colors-warning-new,
 );
 

From 7ccf0a8162dcbe7d9722a22fc2164e05c26d2db5 Mon Sep 17 00:00:00 2001
From: "ashwin.srivastav1" <ashwin.srivastav1@myntra.com>
Date: Wed, 11 Oct 2023 15:29:31 +0530
Subject: [PATCH 2/3] review changes

---
 components/field/src/field.module.scss        |  9 ++--
 .../input-text-area/src/input-text-area.tsx   | 49 ++++---------------
 components/input/src/_input.scss              |  4 +-
 components/input/src/input.module.scss        | 40 ++++++++++++++-
 components/input/src/input.tsx                | 31 ++++++++----
 packages/accoutrement/src/config/colors.scss  | 17 +++----
 6 files changed, 83 insertions(+), 67 deletions(-)

diff --git a/components/field/src/field.module.scss b/components/field/src/field.module.scss
index 45087efa6..35828a8d3 100644
--- a/components/field/src/field.module.scss
+++ b/components/field/src/field.module.scss
@@ -8,7 +8,7 @@
   margin: size('0') size('1x');
 
   @include typography('caption-revamp');
-  color: #3D4152;
+  color: color('background-70');
 }
 
 .required {
@@ -23,8 +23,8 @@
   overflow: hidden;
 
   &-icon {
-    padding-right: 4px;
-    margin-top: 1px;
+    padding-right: size('1x');
+    margin-top: calc(size('1x')/4);
   }
 }
 
@@ -37,7 +37,6 @@
   color: color('text-dark-medium-emphasis'); // TODO: Change to mid-emphasis.
 
   @include typography('caption-revamp-light');
-  font-weight: 200;
 }
 
 .meta > [role='alert'] {
@@ -60,7 +59,7 @@
   color: color('input.error');
 }
 .success {
-  color: color('success-base-new-1');
+  color: color('success-100');
 }
 .icon {
   color: color('primary-base-new');
diff --git a/components/input-text-area/src/input-text-area.tsx b/components/input-text-area/src/input-text-area.tsx
index 1fdc86cac..98b7c56b3 100644
--- a/components/input-text-area/src/input-text-area.tsx
+++ b/components/input-text-area/src/input-text-area.tsx
@@ -1,6 +1,7 @@
 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 */
@@ -44,46 +45,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,
-  readOnly,
-  ...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 },
-        { readOnly }
-      )}
-    >
-      {icon && <Icon className={classnames('icon')} name={icon} />}
-
-      <textarea
-        {...props}
-        value={value || ''}
-        disabled={disabled || readOnly}
-        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'
+    />
   )
 }
 
diff --git a/components/input/src/_input.scss b/components/input/src/_input.scss
index f6a5b278e..415b44b64 100644
--- a/components/input/src/_input.scss
+++ b/components/input/src/_input.scss
@@ -40,10 +40,10 @@
     color: color('input.placeholder');
   }
   input:is([disabled])::placeholder {
-    color: color('input.placeholder') !important;
+    color: color('input.placeholder.disabled');
   }
   textarea:is([disabled])::placeholder {
-    color: color('input.placeholder') !important;
+    color: color('input.placeholder.disabled');
   }
 
   &.filled {
diff --git a/components/input/src/input.module.scss b/components/input/src/input.module.scss
index 1358ad81f..669d2f04e 100644
--- a/components/input/src/input.module.scss
+++ b/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;
+    }
+  }
 }
diff --git a/components/input/src/input.tsx b/components/input/src/input.tsx
index 462167fcd..98ee3cd15 100644
--- a/components/input/src/input.tsx
+++ b/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,7 +70,7 @@ export default function Input({
   return (
     <div
       className={classnames(
-        'container',
+        `container${type == "textarea" ? "-textarea" : ""}`,
         {
           disable: !!disabled,
           standard: standard,
@@ -77,7 +78,7 @@ export default function Input({
           filled: !isEmptyValue(props.value),
           error: !!error,
           active: !!active,
-          readOnly: !!readOnly
+          readOnly: !!readOnly,
         },
         className
       )}
@@ -90,13 +91,23 @@ export default function Input({
           {adornment}
         </div>
       )}
-      <input
-        {...props}
-        readOnly={readOnly || !props.onChange}
-        className={classnames('input')}
-        disabled={!!disabled || !!readOnly}
-        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}
diff --git a/packages/accoutrement/src/config/colors.scss b/packages/accoutrement/src/config/colors.scss
index b3d549bb5..168ad2cf1 100644
--- a/packages/accoutrement/src/config/colors.scss
+++ b/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,
@@ -92,17 +96,13 @@ $token-colors-revamp: (
   'gray-base-new': #cfcfd1,
   'gray-base-new-1': #86878b,
   'danger-base-new': #c84646,
-  'danger-base-new-1': #E34935,
   'success-base-new': #239d56,
-  'success-base-new-1': #22A06B,
   'primary-base-new': #4f47c8,
-  'primary-base-active': #5232d0,
   'gray-base-new-2': #bababc,
   'gray-base-new-3': #3e3f45,
   'gray-base-new-4': #8f8f92,
   'gray-base-new-5': #0e0f17,
   'gray-base-new-6': #f3f3f3,
-  'gray-base-new-7': #262939,
   'gray-dark-base': #56575d,
   'gray-dark-base-2': #3e3f45,
   'primary-base-light': #ededf9,
@@ -141,12 +141,12 @@ $colors: (
   'tab.border': '#gray-light',
   'input.hover': '#primary-40',
   'input.focused': '#primary-base-new',
-  'input.active': '#primary-base-active',
+  'input.active': '#primary-100',
   'input.disabled': '#background-30',
-  'input.error': '#danger-base-new-1',
+  'input.error': '#danger-100',
   'input.border': '#gray-base-new',
   'input.filled': '#background-30',
-  'input.text': '#gray-base-new-7',
+  'input.text': '#secondary-80',
   'input.placeholder': '#background-50',
   'input.placeholder.disabled': '#gray-base-new',
   'input.readOnly': '#background-10',
@@ -165,13 +165,12 @@ $-tokens-colors: () !default;
 $-tokens-text-colors-dark: #000 !default;
 $-tokens-text-colors-light: #fff !default;
 $-tokens-text-colors-dark-new: #0e0f17 !default;
-$-tokens-input-text-color-new: #262939 !default;
 $token-text-colors-warning-new: #624a19 !default;
 
 $text-colors: (
   'dark': $-tokens-text-colors-dark,
   'light': $-tokens-text-colors-light,
-  'input.text': $-tokens-input-text-color-new,
+  'input.text': '#secondary-80',
   'warning-text': $token-text-colors-warning-new,
 );
 

From 05cec7312124c67de90156c8b4b51d4eb363edb9 Mon Sep 17 00:00:00 2001
From: "ashwin.srivastav1" <ashwin.srivastav1@myntra.com>
Date: Wed, 11 Oct 2023 15:36:54 +0530
Subject: [PATCH 3/3] removed unused scss file

---
 .../src/input-text-area.module.scss           | 50 -------------------
 .../input-text-area/src/input-text-area.tsx   |  4 --
 2 files changed, 54 deletions(-)
 delete mode 100644 components/input-text-area/src/input-text-area.module.scss

diff --git a/components/input-text-area/src/input-text-area.module.scss b/components/input-text-area/src/input-text-area.module.scss
deleted file mode 100644
index b6d346cb4..000000000
--- a/components/input-text-area/src/input-text-area.module.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import '@accoutrement';
-@import '@applique-ui/input/style.scss';
-
-.container {
-  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 {
-    resize: none;
-  }
-  &.disable textarea {
-    background-color: transparent;
-  }
-  &.noResize {
-    resize: none;
-  }
-  &.readOnly {
-    resize: none;
-  }
-}
-.icon {
-  margin-top: size('1x');
-  margin-right: size('2x');
-}
-.input {
-  width: 100%;
-  vertical-align: baseline;
-  border: none;
-  outline: none;
-
-  &:disabled,
-  &[disabled] {
-    resize: none;
-  }
-}
diff --git a/components/input-text-area/src/input-text-area.tsx b/components/input-text-area/src/input-text-area.tsx
index 98b7c56b3..38d72d92e 100644
--- a/components/input-text-area/src/input-text-area.tsx
+++ b/components/input-text-area/src/input-text-area.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import classnames from './input-text-area.module.scss'
 import { IconName } from '@applique-ui/icon'
 import Input from '@applique-ui/input'
 
@@ -33,9 +32,6 @@ type FieldContext = {
   error?: boolean
   disabled?: boolean
 }
-function isEmptyValue(value) {
-  return typeof value !== 'string' || !value
-}
 
 /**
  * A large text input component.