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
carbon-design-system · Nov 20, 2024 · 0582ce3 · 0582ce3
1 parent 3772ad2
commit 0582ce3
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 14 deletions.
diff --git 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
@@ -322,7 +322,7 @@ export interface ComboBoxProps<ItemType>
   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
@@ -113,15 +113,16 @@ export const Skeleton = () => (
 );
 
 export const Playground = (args) => {
-  const { invalid, invalidText, warn, warnText, disabled } = args;
+  const { invalid, invalidText, warn, warnText, disabled, readOnly } = args;
   return (
     <div style={{ width: '288px' }}>
       <FluidDatePicker
         datePickerType="range"
         invalid={invalid}
         invalidText={invalidText}
         warn={warn}
-        warnText={warnText}>
+        warnText={warnText}
+        readOnly={readOnly}>
         <FluidDatePickerInput
           placeholder="mm/dd/yyyy"
           labelText="Date Picker label"
@@ -137,7 +138,7 @@ export const Playground = (args) => {
       </FluidDatePicker>
       <br />
       <br />
-      <FluidDatePicker datePickerType="single">
+      <FluidDatePicker datePickerType="single" readOnly={readOnly}>
         <FluidDatePickerInput
           placeholder="mm/dd/yyyy"
           labelText="Date Picker label"
@@ -225,6 +226,12 @@ Playground.argTypes = {
       category: 'DatePickerInput',
     },
   },
+  readOnly: {
+    control: { type: 'boolean' },
+    table: {
+      category: 'DatePickerInput',
+    },
+  },
   invalid: {
     control: { type: 'boolean' },
     table: {

diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx b/packages/react/src/components/FluidNumberInput/FluidNumberInput.tsx
@@ -8,7 +8,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import { NumberInput } from '../NumberInput';
+import { NumberInput, NumberInputProps } from '../NumberInput';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 
@@ -115,6 +115,11 @@ export interface FluidNumberInputProps {
    * 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 FluidNumberInput: React.FC<FluidNumberInputProps> = 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
@@ -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<HTMLSelectElement, FluidSelectProps>(
@@ -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
@@ -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<FluidTextAreaProps> = ({
@@ -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
@@ -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<FluidPasswordInputProps> = ({
@@ -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
@@ -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<HTMLInputElement, FluidTextInputProps>(
@@ -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
@@ -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 (
     <div className={classNames}>
       <div className={`${prefix}--time-picker--fluid__wrapper`}>
         <div className={`${prefix}--time-picker__input`}>
-          <FluidTextInput ref={ref} {...other} />
+          <FluidTextInput
+            ref={ref}
+            readOnly={readOnly}
+            disabled={disabled}
+            {...other}
+          />
         </div>
-        {disabled
-          ? React.Children.toArray(children).map((child) => {
-              return React.cloneElement(child as React.ReactElement, {
-                disabled,
-              });
-            })
-          : children}
+        {childrenWithProps()}
       </div>
       {error && <hr className={`${prefix}--time-picker__divider`} />}
       {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
@@ -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;