From 72a3ffdbffd81b817625a047ba3928554688b002 Mon Sep 17 00:00:00 2001 From: Olga Polikashina Date: Mon, 12 Aug 2024 17:10:11 +0300 Subject: [PATCH 1/5] feat: add explicit readonly prop to TextInput --- src/components/controls/TextInput/README.md | 3 ++- .../controls/TextInput/TextInput.scss | 5 ++++ .../controls/TextInput/TextInput.tsx | 10 ++++++-- .../controls/TextInput/TextInputControl.tsx | 2 ++ .../TextInputCustomThemeShowcase.tsx | 12 ++++++++++ .../__stories__/TextInputShowcase.tsx | 24 +++++++++++++++++++ 6 files changed, 53 insertions(+), 3 deletions(-) diff --git a/src/components/controls/TextInput/README.md b/src/components/controls/TextInput/README.md index 9ebce52aab..f3da177c21 100644 --- a/src/components/controls/TextInput/README.md +++ b/src/components/controls/TextInput/README.md @@ -260,7 +260,8 @@ LANDING_BLOCK--> | onUpdate | Fires when the input’s value is changed by the user. Provides new value as an callback's argument | `function` | | | pin | The control's border view | `string` | `'round-round'` | | placeholder | Text that appears in the control when it has no value set | `string` | | -| qa | Test ID attribute (`data-qa`) | `string` | | +| qa | Test ID attribute (`data-qa`) | `string` | +| readOnly | Indicates that the user cannot change control's value | `boolean` | `false` | | rightContent | User`s node rendered after the input node and clear button | `React.ReactNode` | | | size | The size of the control | `"s"` `"m"` `"l"` `"xl"` | `"m"` | | tabIndex | The `tabindex` attribute of the control | `string` | | diff --git a/src/components/controls/TextInput/TextInput.scss b/src/components/controls/TextInput/TextInput.scss index 562a6d045a..e184723fd2 100644 --- a/src/components/controls/TextInput/TextInput.scss +++ b/src/components/controls/TextInput/TextInput.scss @@ -300,6 +300,11 @@ $block: '.#{variables.$ns}text-input'; $append: false ); + &_readonly { + --_--background-color: var(--g-color-base-generic-accent-disabled); + --_--border-color: transparent; + } + &_disabled { --_--text-color: var(--g-color-text-hint); --_--background-color: var(--g-color-base-generic-accent-disabled); diff --git a/src/components/controls/TextInput/TextInput.tsx b/src/components/controls/TextInput/TextInput.tsx index 44b23f0027..3acfd153fd 100644 --- a/src/components/controls/TextInput/TextInput.tsx +++ b/src/components/controls/TextInput/TextInput.tsx @@ -52,6 +52,8 @@ export type TextInputProps = BaseInputControlProps & { endContent?: React.ReactNode; /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */ note?: React.ReactNode; + /** Indicates that the user cannot change control's value */ + readOnly?: boolean; }; export type TextInputPin = InputControlPin; export type TextInputSize = InputControlSize; @@ -68,7 +70,8 @@ export const TextInput = React.forwardRef( value, defaultValue, label, - disabled = false, + disabled: originalDisabled, + readOnly: originalReadOnly, hasClear = false, error, errorMessage: errorMessageProp, @@ -89,6 +92,8 @@ export const TextInput = React.forwardRef( onUpdate, onChange, } = props; + const disabled = originalDisabled ?? originalControlProps?.disabled; + const readOnly = originalReadOnly ?? originalControlProps?.readOnly; const {errorMessage, errorPlacement, validationState} = errorPropsMapper({ error, @@ -110,7 +115,7 @@ export const TextInput = React.forwardRef( validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'outside'; const isErrorIconVisible = validationState === 'invalid' && Boolean(errorMessage) && errorPlacement === 'inside'; - const isClearControlVisible = Boolean(hasClear && !disabled && inputValue); + const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue); const isStartContentVisible = Boolean(startContent); const isEndContentVisible = Boolean(endContent); const isAutoCompleteOff = @@ -197,6 +202,7 @@ export const TextInput = React.forwardRef( { view, size, + readonly: readOnly, disabled, state, pin: view === 'clear' ? undefined : pin, diff --git a/src/components/controls/TextInput/TextInputControl.tsx b/src/components/controls/TextInput/TextInputControl.tsx index a4e7adfbd5..46cc1ae287 100644 --- a/src/components/controls/TextInput/TextInputControl.tsx +++ b/src/components/controls/TextInput/TextInputControl.tsx @@ -25,6 +25,7 @@ export function TextInputControl(props: Props) { defaultValue, autoFocus, disabled, + readOnly, onChange, onFocus, onBlur, @@ -54,6 +55,7 @@ export function TextInputControl(props: Props) { onKeyUp={onKeyUp} onKeyPress={onKeyPress} disabled={disabled ?? controlProps.disabled} + readOnly={readOnly ?? controlProps.readOnly} /> ); } diff --git a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx index 26e90a8346..31a74784c1 100644 --- a/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx +++ b/src/components/controls/TextInput/__stories__/TextInputCustomThemeShowcase.tsx @@ -45,6 +45,12 @@ export const CustomThemeShowcase = () => { errorPlacement="inside" /> + { errorPlacement="inside" /> + + + + } + rightContent={ + + } + readOnly + /> Date: Tue, 13 Aug 2024 12:13:09 +0300 Subject: [PATCH 2/5] feat: add explicit readonly prop to TextArea --- src/components/controls/TextArea/README.md | 1 + .../controls/TextArea/TextArea.scss | 5 +++++ src/components/controls/TextArea/TextArea.tsx | 10 +++++++-- .../controls/TextArea/TextAreaControl.tsx | 2 ++ .../TextArea/__stories__/TextAreaShowcase.tsx | 21 +++++++++++++++++++ 5 files changed, 37 insertions(+), 2 deletions(-) diff --git a/src/components/controls/TextArea/README.md b/src/components/controls/TextArea/README.md index 7de9b89a05..f67f008172 100644 --- a/src/components/controls/TextArea/README.md +++ b/src/components/controls/TextArea/README.md @@ -239,6 +239,7 @@ LANDING_BLOCK--> | pin | The control's border view | `string` | `"round-round"` | | placeholder | Text that appears in the control when no value is set | `string` | | | qa | Test id attribute (`data-qa`) | `string` | | +| readOnly | Indicates that the user cannot change control's value | `boolean` | `false` | | rows | The number of visible text lines for the control. If unspecified, the hight will be calculated automatically based on the content | `number` | | | size | The control's size | `"s"` `"m"` `"l"` `"xl"` | `"m"` | | tabIndex | The control's `tabindex` attribute | `string` | | diff --git a/src/components/controls/TextArea/TextArea.scss b/src/components/controls/TextArea/TextArea.scss index 72dc5a1ca7..d5aadb4ec3 100644 --- a/src/components/controls/TextArea/TextArea.scss +++ b/src/components/controls/TextArea/TextArea.scss @@ -172,6 +172,11 @@ $block: '.#{variables.$ns}text-area'; $append: false ); + &_readonly { + --_--background-color: var(--g-color-base-generic-accent-disabled); + --_--border-color: transparent; + } + &_disabled { --_--text-color: var(--g-color-text-hint); --_--background-color: var(--g-color-base-generic-accent-disabled); diff --git a/src/components/controls/TextArea/TextArea.tsx b/src/components/controls/TextArea/TextArea.tsx index ae86d559a5..3ada51e0e6 100644 --- a/src/components/controls/TextArea/TextArea.tsx +++ b/src/components/controls/TextArea/TextArea.tsx @@ -32,6 +32,8 @@ export type TextAreaProps = BaseInputControlProps & { maxRows?: number; /** An optional element displayed under the lower right corner of the control and sharing the place with the error container */ note?: React.ReactNode; + /** Indicates that the user cannot change control's value */ + readOnly?: boolean; }; export type TextAreaPin = InputControlPin; export type TextAreaSize = InputControlSize; @@ -47,7 +49,8 @@ export const TextArea = React.forwardRef( name, value, defaultValue, - disabled = false, + disabled: originalDisabled, + readOnly: originalReadOnly, hasClear = false, error, errorMessage: errorMessageProp, @@ -63,6 +66,8 @@ export const TextArea = React.forwardRef( onUpdate, onChange, } = props; + const disabled = originalDisabled ?? controlProps?.disabled; + const readOnly = originalReadOnly ?? controlProps?.readOnly; const {errorMessage, validationState} = errorPropsMapper({ error, @@ -79,7 +84,7 @@ export const TextArea = React.forwardRef( const innerId = useUniqId(); const isErrorMsgVisible = validationState === 'invalid' && Boolean(errorMessage); - const isClearControlVisible = Boolean(hasClear && !disabled && inputValue); + const isClearControlVisible = Boolean(hasClear && !disabled && !readOnly && inputValue); const id = originalId || innerId; const errorMessageId = useUniqId(); @@ -150,6 +155,7 @@ export const TextArea = React.forwardRef( { view, size, + readonly: readOnly, disabled, state, pin: view === 'clear' ? undefined : pin, diff --git a/src/components/controls/TextArea/TextAreaControl.tsx b/src/components/controls/TextArea/TextAreaControl.tsx index ad9bbfce6d..262337928f 100644 --- a/src/components/controls/TextArea/TextAreaControl.tsx +++ b/src/components/controls/TextArea/TextAreaControl.tsx @@ -45,6 +45,7 @@ export function TextAreaControl(props: Props) { maxRows, autoFocus, disabled, + readOnly, onChange, onFocus, onBlur, @@ -112,6 +113,7 @@ export function TextAreaControl(props: Props) { onKeyUp={onKeyUp} onKeyPress={onKeyPress} disabled={disabled ?? controlProps.disabled} + readOnly={readOnly ?? controlProps.readOnly} /> ); } diff --git a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx index 3c0a2918d1..9a8e37acdc 100644 --- a/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx +++ b/src/components/controls/TextArea/__stories__/TextAreaShowcase.tsx @@ -62,6 +62,13 @@ export function TextAreaShowcase() { />