Fleet UI: Disabled styling fixes (#19614)

frontend/components/forms/fields/InputField/InputField.jsx

@@ -14,6 +14,9 @@ const baseClass = "input-field";
 class InputField extends Component {
   static propTypes = {
     autofocus: PropTypes.bool,
+    /** readOnly displays a non-editable field */
+    readOnly: PropTypes.bool,
+    /** disabled displays a greyed out non-editable field */
     disabled: PropTypes.bool,
     error: PropTypes.string,
     inputClassName: PropTypes.string, // eslint-disable-line react/forbid-prop-types
@@ -96,6 +99,7 @@ class InputField extends Component {
 
   render() {
     const {
+      readOnly,
       disabled,
       error,
       inputClassName,
@@ -115,12 +119,14 @@ class InputField extends Component {
     const shouldShowPasswordClass = type === "password";
     const inputClasses = classnames(baseClass, inputClassName, {
       [`${baseClass}--password`]: shouldShowPasswordClass,
+      [`${baseClass}--read-only`]: readOnly || disabled,
       [`${baseClass}--disabled`]: disabled,
       [`${baseClass}--error`]: error,
       [`${baseClass}__textarea`]: type === "textarea",
     });
 
     const inputWrapperClasses = classnames(inputWrapperClass, {
+      [`input-field--read-only`]: readOnly || disabled,
       [`input-field--disabled`]: disabled,
     });
 
@@ -155,7 +161,7 @@ class InputField extends Component {
             id={name}
             onChange={onInputChange}
             className={inputClasses}
-            disabled={disabled}
+            disabled={readOnly || disabled}
             placeholder={placeholder}
             ref={(r) => {
               this.input = r;
@@ -180,7 +186,7 @@ class InputField extends Component {
       >
         <div className={inputContainerClasses}>
           <input
-            disabled={disabled}
+            disabled={readOnly || disabled}
             name={name}
             id={name}
             onChange={onInputChange}

frontend/components/forms/fields/InputField/InputField.stories.tsx

@@ -9,6 +9,7 @@ import "../../../../index.scss";
 
 interface IInputFieldProps {
   autofocus?: boolean;
+  readOnly?: boolean;
   disabled?: boolean;
   error?: string;
   inputClassName?: string;
@@ -27,6 +28,7 @@ export default {
   title: "Components/FormFields/Input",
   args: {
     autofocus: false,
+    readOnly: false,
     disabled: false,
     error: "",
     inputClassName: "",

frontend/components/forms/fields/InputField/_styles.scss

@@ -21,7 +21,7 @@
     border-color: $core-vibrant-blue;
   }
 
-  &:hover &:not(.input-field--disabled) {
+  &:hover &:not(.input-field--read-only) {
     box-shadow: none;
     border: 1px solid $core-vibrant-blue;
   }