text area css changes

myntra · Oct 9, 2023 · da9d3ae · da9d3ae
1 parent cde26ae
commit da9d3ae
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 13 deletions.
diff --git 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
@@ -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>
           ) : (

diff --git 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
@@ -55,6 +55,7 @@ export default function InputTextArea({
   __fieldContext = {},
   adornmentPosition = 'start',
   icon,
+  readOnly,
   ...props
 }: Props) {
   error = !!(error || __fieldContext.error)
@@ -69,15 +70,16 @@ export default function InputTextArea({
         { standard: variant === 'standard' },
         { bordered: variant === 'bordered' },
         { filled: !isEmptyValue(value) },
-        { noResize }
+        { noResize },
+        { readOnly }
       )}
     >
       {icon && <Icon className={classnames('icon')} name={icon} />}
 
       <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
@@ -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
@@ -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
@@ -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,
 );