Added color and leftover changes in Text input component (#1701)

* added color and leftover changes

* Update TextInput.constants.tsx

src/blocks/Blocks.colors.ts

@@ -35,6 +35,17 @@ const brandColors = {
  'RED-800': '#A40A0A',
  'RED-900': '#670000',
  'RED-1000': '#400000',
+
+ 'GREEN-100': '#D8F7F0',
+ 'GREEN-200': '#AFEFE1',
+ 'GREEN-300': '#51DCBD',
+ 'GREEN-400': '#00C296',
+ 'GREEN-500': '#00A47F',
+ 'GREEN-600': '#008769',
+ 'GREEN-700': '#006B53',
+ 'GREEN-800': '#A40A0A',
+ 'GREEN-900': '#00382B',
+ 'GREEN-1000': '#002019',
 };
 
 export const blocksColorsLegacy = {

src/blocks/icons/components/Asterisk.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Asterisk: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="Asterisk"
+ icon={
+ <svg
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 5 5"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ {...props}
+ >
+ <path
+ d="M0.687978 4.28802L0.795978 4.14402L1.43198 3.32202L1.83998 2.84202C1.82798 2.81802 1.82198 2.79402 1.81598 2.76402L1.20998 2.62002L0.207978 2.33802L0.039978 2.28402L0.327978 1.40202L0.495978 1.45602L1.47398 1.81002L2.04398 2.04402C2.06798 2.02602 2.09198 2.00802 2.11598 1.99002L2.07398 1.39002L2.03798 0.346015V0.166016H2.96198V0.346015L2.92598 1.39002L2.87798 1.99002C2.90198 2.00802 2.92598 2.02602 2.94998 2.04402L3.51998 1.81002L4.50398 1.45602L4.67198 1.40202L4.95998 2.28402L4.78598 2.33802L3.78398 2.62002L3.17798 2.76402C3.17198 2.79402 3.16598 2.81802 3.15398 2.84202L3.56198 3.32202L4.20398 4.14402L4.30598 4.28802L3.55598 4.83402L3.45398 4.68402L2.87198 3.82002L2.54798 3.29202C2.52998 3.29202 2.51198 3.29202 2.49998 3.29202C2.48198 3.29202 2.46398 3.29202 2.44598 3.29202L2.12198 3.82002L1.53998 4.68402L1.43798 4.83402L0.687978 4.28802Z"
+ fill="currentColor"
+ />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default Asterisk;

src/blocks/icons/index.ts

@@ -5,6 +5,8 @@ export { default as Add } from './components/Add';
 
 export { default as AddEmoji } from './components/AddEmoji';
 
+export { default as Asterisk } from './components/Asterisk';
+
 export { default as Back } from './components/Back';
 
 export { default as BellRingFilled } from './components/BellRingFilled';

src/blocks/textInput/TextInput.constants.tsx

@@ -1,26 +1,43 @@
 import { TextInputStyles } from './TextInput.types';
 
-//optimisation needed for this part
-export const backgroundColor: TextInputStyles = {
- error: { light: 'red-100', dark: 'red-100' },
+const backgroundColor: TextInputStyles = {
+ error: { light: 'red-100', dark: 'gray-800' },
+ success: { light: 'green-100', dark: 'gray-800' },
  disabled: { light: 'gray-200', dark: 'gray-800' },
  default: { light: 'white', dark: 'gray-800' },
 };
 
-export const borderColor: TextInputStyles = {
- error: { light: 'red-400', dark: 'red-400' },
+const borderColor: TextInputStyles = {
+ error: { light: 'red-400', dark: 'red-500' },
+ success: { light: 'green-500', dark: 'green-400' },
  disabled: { light: 'gray-300', dark: 'gray-900' },
  default: { light: 'gray-200', dark: 'gray-800' },
 };
 
-export const textColor: TextInputStyles = {
- error: { light: 'red-700', dark: 'red-700' },
+const textColor: TextInputStyles = {
+ error: { light: 'gray-1000', dark: 'gray-100' },
+ success: { light: 'gray-1000', dark: 'gray-100' },
  disabled: { light: 'gray-400', dark: 'gray-700' },
  default: { light: 'gray-1000', dark: 'gray-100' },
 };
 
-export const placeholderColor: TextInputStyles = {
- error: { light: 'red-600', dark: 'red-600' },
+const descriptionColor: TextInputStyles = {
+ error: { light: 'gray-1000', dark: 'gray-100' },
+ success: { light: 'gray-1000', dark: 'gray-100' },
+ disabled: { light: 'gray-400', dark: 'gray-600' },
+ default: { light: 'gray-400', dark: 'gray-600' },
+};
+const iconColor: TextInputStyles = {
+ error: { light: 'red-700', dark: 'red-500' },
+ success: { light: 'green-600', dark: 'green-400' },
  disabled: { light: 'gray-400', dark: 'gray-700' },
- default: { light: 'gray-400', dark: 'gray-500' },
+ default: { light: 'gray-300', dark: 'gray-600' },
+};
+
+export const textInputColor = {
+ backgroundColor: backgroundColor,
+ borderColor: borderColor,
+ textColor: textColor,
+ iconColor: iconColor,
+ descriptionColor: descriptionColor,
 };

src/blocks/textInput/TextInput.tsx

@@ -6,7 +6,7 @@ import { ModeProp } from '../Blocks.types';
 
 import { getTextInputState, getTextInputStateStyles } from './TextInput.utils';
 import { useBlocksTheme } from 'blocks/Blocks.hooks';
-import { CrossFilled } from 'blocks/icons';
+import { Asterisk, CrossFilled } from 'blocks/icons';
 import { Text } from 'blocks/text';
 
 export type TextInputProps = {
@@ -53,7 +53,10 @@ const StyledTextInput = styled.div<TextInputProps & ModeProp>`
  justify-content: space-between;
  align-items: center;
  }
-
+ .label {
+ display: flex;
+ gap: var(--s1);
+ }
  .input-container {
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
  display: flex;
@@ -68,22 +71,17 @@ const StyledTextInput = styled.div<TextInputProps & ModeProp>`
  border-radius: var(--r3);
 
  /* Common icon css added through CSS class */
- .icon {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-right: 2px;
- span {
- width: 18px;
- height: 13.5px;
- }
+ [role='img'] {
+ width: 18px;
+ height: 18px;
  }
 
  & input {
  flex: 1;
  border: none;
  background-color: transparent;
  padding: var(--s3) var(--s0);
+ margin-left: var(--s1);
  &:focus {
  outline: none;
  }
@@ -96,10 +94,10 @@ const StyledTextInput = styled.div<TextInputProps & ModeProp>`
  }
  }
  /* TextInput type CSS styles */
- ${({ mode, error, disabled }) =>
+ ${({ mode, error, disabled, success }) =>
  getTextInputStateStyles({
  mode,
- state: getTextInputState({ error: !!error, disabled: !!disabled }),
+ state: getTextInputState({ error: !!error, disabled: !!disabled, success: !!success }),
  })}
 
  /* Custom CSS applied via styled component css prop */
@@ -132,6 +130,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  <StyledTextInput
  disabled={disabled}
  error={error}
+ success={success}
  required={required}
  role="input"
  mode={mode}
@@ -140,12 +139,35 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  >
  {(label || totalCount) && (
  <div className="label-count">
- {label && <Text>{label}</Text>}
- {totalCount && <Text>{totalCount}</Text>}
+ {label && (
+ <div className="label">
+ <Text
+ variant="h6-semibold"
+ color={{ light: disabled ? 'gray-400' : 'gray-1000', dark: disabled ? 'gray-700' : 'gray-100' }}
+ >
+ {label}
+ </Text>
+ {!!required && (
+ <Asterisk
+ color={{ light: disabled ? 'gray-400' : 'gray-500', dark: disabled ? 'gray-700' : 'gray-500' }}
+ size={4.6}
+ />
+ )}
+ </div>
+ )}
+
+ {totalCount && (
+ <Text
+ variant="c-regular"
+ color={{ light: 'gray-600', dark: 'gray-500' }}
+ >
+ {`${value?.length}/${totalCount}`}
+ </Text>
+ )}
  </div>
  )}
  <div className="input-container">
- {icon && <span className="icon">{icon}</span>}
+ {icon}
  <input
  type={type}
  disabled={!!disabled}
@@ -154,15 +176,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  onChange={onChange}
  value={value}
  />
- {/* width is not getting applied */}
- {onClear && (
- <CrossFilled
- width="18px"
- height="18px"
- className="clear"
- onClick={() => onClear?.()}
- />
- )}
+ {onClear && <CrossFilled onClick={() => onClear?.()} />}
  </div>
  {description && (
  <Text

src/blocks/textInput/TextInput.types.tsx

@@ -1,4 +1,4 @@
 import { ThemeModeColors } from 'blocks/Blocks.types';
 
-export type TextInputStates = 'error' | 'disabled' | 'default';
+export type TextInputStates = 'error' | 'disabled' | 'default' | 'success';
 export type TextInputStyles = Record<TextInputStates, ThemeModeColors>;

src/blocks/textInput/TextInput.utils.ts

@@ -1,14 +1,24 @@
 import { ThemeMode } from 'blocks/Blocks.types';
 import { getBlocksColor } from 'blocks/Blocks.utils';
 
-import { backgroundColor, borderColor, placeholderColor, textColor } from './TextInput.constants';
+import { textInputColor } from './TextInput.constants';
 import { TextInputStates } from './TextInput.types';
 
-export const getTextInputState = ({ error, disabled }: { error: boolean; disabled: boolean }): TextInputStates => {
+export const getTextInputState = ({
+ error,
+ disabled,
+ success,
+}: {
+ error: boolean;
+ disabled: boolean;
+ success: boolean;
+}): TextInputStates => {
  if (error) {
  return 'error';
  } else if (disabled) {
  return 'disabled';
+ } else if (success) {
+ return 'success';
  }
  return 'default';
 };
@@ -20,9 +30,9 @@ export const getTextInputStateStyles = ({ mode, state }: { mode: ThemeMode; stat
  return `
  
  .input-container {
- background-color: ${getBlocksColor(mode, backgroundColor[state])};
+ background-color: ${getBlocksColor(mode, textInputColor.backgroundColor[state])};
  
- border: 1.5px solid ${getBlocksColor(mode, borderColor[state])};
+ border: 1.5px solid ${getBlocksColor(mode, textInputColor.borderColor[state])};
 
 
  &:hover {
@@ -35,21 +45,21 @@ export const getTextInputStateStyles = ({ mode, state }: { mode: ThemeMode; stat
  &:focus-within {
  border: 1.5px solid ${getBlocksColor(
  mode,
- state === 'error' ? borderColor.error : { light: 'pink-300', dark: 'pink-300' }
+ state === 'error' ? textInputColor.borderColor.error : { light: 'pink-300', dark: 'pink-300' }
  )};
  };
  
- .icon,.clear {
- color: ${getBlocksColor(mode, {
- light: 'gray-300',
- dark: 'gray-100',
- })};
+ [role='img'] {
+ color: ${getBlocksColor(mode, textInputColor.iconColor[state])};
  };
  
  & input{
- color: ${getBlocksColor(mode, textColor[state])};
+ color: ${getBlocksColor(mode, textInputColor.textColor[state])};
  ::placeholder {
- color: ${getBlocksColor(mode, placeholderColor[state])};
+ color: ${getBlocksColor(mode, {
+ light: 'gray-400',
+ dark: 'gray-600',
+ })};
 
  };
  }