From 0582ce3fba0a8aadb18938a5fc3f04b5f45f99c1 Mon Sep 17 00:00:00 2001 From: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com> Date: Wed, 20 Nov 2024 20:07:42 +0530 Subject: [PATCH] fix: added readonly states for fluid components (#17746) * fix: added readonly states for fluid components * fix: snapshots * fix: readOnly states for fluidTimePicker & FluidDatePicker * fix: timepicker * fix: formatting * chore: yarn format * fix: optimised * chore: yarn format --- .../__snapshots__/PublicAPI-test.js.snap | 12 +++++ .../src/components/ComboBox/ComboBox.tsx | 2 +- .../FluidDatePicker.stories.js | 13 ++++-- .../FluidNumberInput/FluidNumberInput.tsx | 12 ++++- .../components/FluidSelect/FluidSelect.tsx | 10 +++++ .../FluidTextArea/FluidTextArea.tsx | 10 +++++ .../FluidTextInput/FluidPasswordInput.tsx | 10 +++++ .../FluidTextInput/FluidTextInput.tsx | 10 +++++ .../FluidTimePicker/FluidTimePicker.tsx | 45 +++++++++++++++---- .../fluid-time-picker/_fluid-time-picker.scss | 6 +++ 10 files changed, 116 insertions(+), 14 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 4ad728b59e2b..58a02b6cce38 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -10615,6 +10615,9 @@ Map { "onChange": Object { "type": "func", }, + "readOnly": Object { + "type": "bool", + }, "warn": Object { "type": "bool", }, @@ -10690,6 +10693,9 @@ Map { "placeholder": Object { "type": "string", }, + "readOnly": Object { + "type": "bool", + }, "rows": Object { "type": "number", }, @@ -10769,6 +10775,9 @@ Map { "placeholder": Object { "type": "string", }, + "readOnly": Object { + "type": "bool", + }, "value": Object { "args": Array [ Array [ @@ -10820,6 +10829,9 @@ Map { "isRequired": true, "type": "node", }, + "readOnly": Object { + "type": "bool", + }, "warn": Object { "type": "bool", }, diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 00c3a5485ec5..1283e740e568 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -322,7 +322,7 @@ export interface ComboBoxProps placeholder?: string; /** - * Is the ComboBox readonly? + * Whether or not the component is read-only */ readOnly?: boolean; diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js index 9802d4f9027f..e992d8e91fb5 100644 --- a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js +++ b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js @@ -113,7 +113,7 @@ export const Skeleton = () => ( ); export const Playground = (args) => { - const { invalid, invalidText, warn, warnText, disabled } = args; + const { invalid, invalidText, warn, warnText, disabled, readOnly } = args; return (
{ invalid={invalid} invalidText={invalidText} warn={warn} - warnText={warnText}> + warnText={warnText} + readOnly={readOnly}> {

- + = React.forwardRef< @@ -234,6 +239,11 @@ FluidNumberInput.propTypes = { * Provide the text that is displayed when the control is in warning state */ warnText: PropTypes.node, + + /** + * Whether or not the component is readonly + */ + readOnly: PropTypes.bool, }; export default FluidNumberInput; diff --git a/packages/react/src/components/FluidSelect/FluidSelect.tsx b/packages/react/src/components/FluidSelect/FluidSelect.tsx index 0df2324164eb..d8dfd90b6d69 100644 --- a/packages/react/src/components/FluidSelect/FluidSelect.tsx +++ b/packages/react/src/components/FluidSelect/FluidSelect.tsx @@ -69,6 +69,11 @@ export interface FluidSelectProps { * Provide the text that is displayed when the control is in warning state */ warnText?: React.ReactNode; + + /** + * Whether or not the component is readonly + */ + readOnly?: boolean; } const FluidSelect = React.forwardRef( @@ -143,6 +148,11 @@ FluidSelect.propTypes = { * Provide the text that is displayed when the control is in warning state */ warnText: PropTypes.node, + + /** + * Whether or not the component is readonly + */ + readOnly: PropTypes.bool, }; export default FluidSelect; diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.tsx b/packages/react/src/components/FluidTextArea/FluidTextArea.tsx index 78bce8a70e59..f9edebe0f82f 100644 --- a/packages/react/src/components/FluidTextArea/FluidTextArea.tsx +++ b/packages/react/src/components/FluidTextArea/FluidTextArea.tsx @@ -118,6 +118,11 @@ export interface FluidTextAreaProps { * Provide the text that is displayed when the control is in warning state */ warnText?: React.ReactNode; + + /** + * Whether or not the component is readonly + */ + readOnly?: boolean; } const FluidTextArea: React.FC = ({ @@ -243,6 +248,11 @@ FluidTextArea.propTypes = { * Provide the text that is displayed when the control is in warning state */ warnText: PropTypes.node, + + /** + * Whether or not the component is readonly + */ + readOnly: PropTypes.bool, }; export default FluidTextArea; diff --git a/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx b/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx index 688cf5bdc8be..75470923dc6e 100644 --- a/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx +++ b/packages/react/src/components/FluidTextInput/FluidPasswordInput.tsx @@ -101,6 +101,11 @@ export interface FluidPasswordInputProps { * Provide the text that is displayed when the control is in warning state */ warnText?: React.ReactNode; + + /** + * Whether or not the component is readonly + */ + readOnly?: boolean; } const FluidPasswordInput: React.FC = ({ @@ -206,6 +211,11 @@ FluidPasswordInput.propTypes = { * Provide the text that is displayed when the control is in warning state */ warnText: PropTypes.node, + + /** + * Whether or not the component is readonly + */ + readOnly: PropTypes.bool, }; export default FluidPasswordInput; diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.tsx b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx index d0c253ae9733..1e62c3cc0fa4 100644 --- a/packages/react/src/components/FluidTextInput/FluidTextInput.tsx +++ b/packages/react/src/components/FluidTextInput/FluidTextInput.tsx @@ -85,6 +85,11 @@ export interface FluidTextInputProps { * Provide the text that is displayed when the control is in warning state */ warnText?: React.ReactNode; + + /** + * Whether or not the component is readonly + */ + readOnly?: boolean; } const FluidTextInput = React.forwardRef( @@ -179,6 +184,11 @@ FluidTextInput.propTypes = { * Provide the text that is displayed when the control is in warning state */ warnText: PropTypes.node, + + /** + * Whether or not the component is readonly + */ + readOnly: PropTypes.bool, }; export default FluidTextInput; diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.tsx b/packages/react/src/components/FluidTimePicker/FluidTimePicker.tsx index 66af8aa49824..c48f9ca93685 100644 --- a/packages/react/src/components/FluidTimePicker/FluidTimePicker.tsx +++ b/packages/react/src/components/FluidTimePicker/FluidTimePicker.tsx @@ -52,6 +52,11 @@ export interface FluidTimePickerProps extends FluidTextInputProps { * Provide the text that is displayed when the control is in warning state */ warnText?: React.ReactNode; + + /** + * Specify if the component is readonly + */ + readOnly?: boolean; } const FluidTimePicker = React.forwardRef< @@ -66,12 +71,12 @@ const FluidTimePicker = React.forwardRef< invalidText, warn, warnText, + readOnly, ...other }, ref ) { const prefix = usePrefix(); - const classNames = classnames(className, { [`${prefix}--time-picker--fluid`]: true, [`${prefix}--time-picker--equal-width`]: @@ -92,19 +97,36 @@ const FluidTimePicker = React.forwardRef< const error = invalid || warn; + const childrenWithProps = () => { + if (disabled) { + return React.Children.toArray(children).map((child) => + React.cloneElement(child as React.ReactElement, { + disabled: true, + }) + ); + } + if (readOnly) { + return React.Children.toArray(children).map((child) => + React.cloneElement(child as React.ReactElement, { + readOnly: true, + }) + ); + } + return children; + }; + return (
- +
- {disabled - ? React.Children.toArray(children).map((child) => { - return React.cloneElement(child as React.ReactElement, { - disabled, - }); - }) - : children} + {childrenWithProps()}
{error &&
} {error && ( @@ -164,6 +186,11 @@ FluidTimePicker.propTypes = { * Provide the text that is displayed when the control is in warning state */ warnText: PropTypes.node, + + /** + * Whether or not the component is readonly + */ + readOnly: PropTypes.bool, }; export default FluidTimePicker; diff --git a/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss b/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss index b69b902e4064..67d4e2317db3 100644 --- a/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss +++ b/packages/styles/scss/components/fluid-time-picker/_fluid-time-picker.scss @@ -54,6 +54,12 @@ transition: opacity $duration-fast-01 motion(standard, productive); } + .#{$prefix}--select--readonly .#{$prefix}--select-input__wrapper::before { + background-color: $border-subtle !important; /* stylelint-disable-line declaration-no-important */ + opacity: 1 !important; /* stylelint-disable-line declaration-no-important */ + transition: none; + } + .#{$prefix}--time-picker--fluid__wrapper .#{$prefix}--select-input__wrapper::after { inset-inline-end: 0;