From 584e742992766b4cf81f3337fbfee15374ffbfe7 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Fri, 5 Jul 2024 19:25:04 +0530 Subject: [PATCH 1/2] added color and leftover changes --- src/blocks/Blocks.colors.ts | 11 ++++ src/blocks/icons/components/Asterisk.tsx | 30 +++++++++ src/blocks/icons/index.ts | 2 + src/blocks/textInput/TextInput.constants.tsx | 37 ++++++++--- src/blocks/textInput/TextInput.tsx | 64 ++++++++++++-------- src/blocks/textInput/TextInput.types.tsx | 2 +- src/blocks/textInput/TextInput.utils.ts | 34 +++++++---- 7 files changed, 132 insertions(+), 48 deletions(-) create mode 100644 src/blocks/icons/components/Asterisk.tsx diff --git a/src/blocks/Blocks.colors.ts b/src/blocks/Blocks.colors.ts index 22df3b8e61..e5db5179c1 100644 --- a/src/blocks/Blocks.colors.ts +++ b/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 = { diff --git a/src/blocks/icons/components/Asterisk.tsx b/src/blocks/icons/components/Asterisk.tsx new file mode 100644 index 0000000000..6313a21f20 --- /dev/null +++ b/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 = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + } + {...restProps} + /> + ); +}; + +export default Asterisk; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index fe2feec934..dbf5c774f8 100644 --- a/src/blocks/icons/index.ts +++ b/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'; diff --git a/src/blocks/textInput/TextInput.constants.tsx b/src/blocks/textInput/TextInput.constants.tsx index 37948a5744..71add54a8b 100644 --- a/src/blocks/textInput/TextInput.constants.tsx +++ b/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-700' }, +}; + +export const textInputColor = { + backgroundColor: backgroundColor, + borderColor: borderColor, + textColor: textColor, + iconColor: iconColor, + descriptionColor: descriptionColor, }; diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx index 4492d87536..33a259eb44 100644 --- a/src/blocks/textInput/TextInput.tsx +++ b/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` 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,15 +71,9 @@ const StyledTextInput = styled.div` 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 { @@ -84,6 +81,7 @@ const StyledTextInput = styled.div` 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` } } /* 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( ( > {(label || totalCount) && (
- {label && {label}} - {totalCount && {totalCount}} + {label && ( +
+ + {label} + + {!!required && ( + + )} +
+ )} + + {totalCount && ( + + {`${value?.length}/${totalCount}`} + + )}
)}
- {icon && {icon}} + {icon} ( onChange={onChange} value={value} /> - {/* width is not getting applied */} - {onClear && ( - onClear?.()} - /> - )} + {onClear && onClear?.()} />}
{description && ( ; diff --git a/src/blocks/textInput/TextInput.utils.ts b/src/blocks/textInput/TextInput.utils.ts index aa2a64b823..3416ece84d 100644 --- a/src/blocks/textInput/TextInput.utils.ts +++ b/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', + })}; }; } From 8d90a554d4e43bdd5d4eb716dc4ad3ce75f2bb31 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra <42746736+mishramonalisha76@users.noreply.github.com> Date: Mon, 8 Jul 2024 13:05:01 +0530 Subject: [PATCH 2/2] Update TextInput.constants.tsx --- src/blocks/textInput/TextInput.constants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/blocks/textInput/TextInput.constants.tsx b/src/blocks/textInput/TextInput.constants.tsx index 71add54a8b..116b86331c 100644 --- a/src/blocks/textInput/TextInput.constants.tsx +++ b/src/blocks/textInput/TextInput.constants.tsx @@ -31,7 +31,7 @@ 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-300', dark: 'gray-700' }, + default: { light: 'gray-300', dark: 'gray-600' }, }; export const textInputColor = {