Disabled text fields: dim the value, placeholder and message (2.6.2)

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2.6.2
+
+### Fixed: disabled text fields look disabled
+
+`TextInput` (and `InputField`), `TextArea` and `Combobox` had no disabled styling on the field
+itself, so the placeholder, value and helper message looked the same as an enabled field. Only the
+label dimmed.
+
+-   **Field:** when disabled, the value is `gray-400`, the placeholder is `gray-300`, and the cursor
+    is `not-allowed`.
+-   **Helper message:** `gray-400` when disabled. This takes priority over the red error colour.
+
+`Select`, `Checkbox` and `Radio` already dim the whole control with `opacity-50` and are unchanged.
+
 ## 2.6.1
 
 ### Changed: focus rings are 1px

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agility/plenum-ui",
-	"version": "2.6.1",
+	"version": "2.6.2",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"module": "dist/index.js",

stories/molecules/inputs/InputField/InputField.tsx

@@ -89,6 +89,8 @@ const InputField = (
 					// blue border from winning when a consumer's forms styles load after plenum's stylesheet.
 					"focus:outline-none focus:!ring-0",
 					{ "focus:!border-violet-700": !isInvalid && !isReadonly },
+					// Disabled: dim the value and placeholder so the field reads as inactive.
+					"disabled:cursor-not-allowed disabled:text-gray-400 disabled:placeholder:text-gray-300",
 					isError ? "!border-red-600 !text-red-600" : "",
 					isReadonly ? "!border-gray-400 !text-gray-500" : "",
 					className

stories/molecules/inputs/TextInput/TextInput.tsx

@@ -157,7 +157,10 @@ const TextInput = (
 			<div className="flex flex-row space-x-3">
 				<div className="grow">
 					{message && (
-						<Paragraph size="md" className={isError ? "text-red-600" : "text-gray-500"}>
+						<Paragraph
+							size="md"
+							className={isDisabled ? "text-gray-400" : isError ? "text-red-600" : "text-gray-500"}
+						>
 							{message}
 						</Paragraph>
 					)}

stories/molecules/inputs/combobox/ComboBox.tsx

@@ -112,7 +112,8 @@ const Combobox = <T extends Record<string, unknown>>({
 							"h-9 w-full rounded border py-0 pl-3 pr-10 text-sm leading-5",
 							// Same focus treatment as InputField: a single 1px violet border, no ring.
 							"focus:outline-none focus:!ring-0",
-							isError ? "!border-red-500" : "border-gray-300 focus:!border-violet-700"
+							isError ? "!border-red-500" : "border-gray-300 focus:!border-violet-700",
+							"disabled:cursor-not-allowed disabled:text-gray-400 disabled:placeholder:text-gray-300"
 						)}
 						onChange={(event) => setQuery(event.target.value)}
 						displayValue={(item: Record<string, unknown>) => `${item ? item[displayProperty] : ""}`}
@@ -169,7 +170,11 @@ const Combobox = <T extends Record<string, unknown>>({
 			</div>
 			<div className="grow">
 				{message && (
-					<span className={`mt-1 block text-sm ${isError ? `text-red-500` : `text-gray-500`}`}>
+					<span
+						className={`mt-1 block text-sm ${
+							isDisabled ? `text-gray-400` : isError ? `text-red-500` : `text-gray-500`
+						}`}
+					>
 						{message}
 					</span>
 				)}

stories/molecules/inputs/textArea/TextArea.tsx

@@ -65,7 +65,13 @@ const Textarea: React.FC<ITextareaProps> = ({
 }) => {
 	const uniqueID = useId();
 
-	const discriptionStyles = cn("text-sm mt-1 block", { "text-gray-500": !isError }, { "text-red-500": isError });
+	const discriptionStyles = cn(
+		"text-sm mt-1 block",
+		{ "text-gray-400": isDisabled },
+		{ "text-gray-500": !isError && !isDisabled },
+		{ "text-red-500": isError && !isDisabled }
+	);
+	const disabledStyles = "disabled:cursor-not-allowed disabled:text-gray-400 disabled:placeholder:text-gray-300";
 
 	if (!id) id = `ta-${uniqueID}`;
 
@@ -90,6 +96,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 					{
 						"border-red-500 outline-red-500 focus:ring-red-500": isError
 					},
+					disabledStyles,
 					className
 				)}
 				disabled={isDisabled}
@@ -126,6 +133,7 @@ const Textarea: React.FC<ITextareaProps> = ({
 						{
 							"border-red-500 outline-red-500 focus:ring-red-500": isError
 						},
+						disabledStyles,
 						className
 					)}
 					disabled={isDisabled}