From c4f3b9abc5355bb627e0c7c8b33bbe02a2a95311 Mon Sep 17 00:00:00 2001 From: DerekAgility Date: Tue, 13 Oct 2026 14:54:27 -0400 Subject: [PATCH] Disabled text fields: dim the value, placeholder and message TextInput (via InputField), TextArea and Combobox had no disabled styling on the field, so the placeholder, value and helper message looked active. Only the label dimmed. Disabled fields now show the value in gray-400, the placeholder in gray-300 and a not-allowed cursor. The helper message turns gray-400, overriding the error colour. Select, Checkbox and Radio already dim via opacity-50 and are unchanged. Bumps the version to 2.6.2. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 14 ++++++++++++++ package.json | 2 +- stories/molecules/inputs/InputField/InputField.tsx | 2 ++ stories/molecules/inputs/TextInput/TextInput.tsx | 5 ++++- stories/molecules/inputs/combobox/ComboBox.tsx | 9 +++++++-- stories/molecules/inputs/textArea/TextArea.tsx | 10 +++++++++- 6 files changed, 37 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a856556..5e14a33 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 4a45a0d..b57bf47 100644 --- a/package.json +++ b/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", diff --git a/stories/molecules/inputs/InputField/InputField.tsx b/stories/molecules/inputs/InputField/InputField.tsx index f8a2735..6ef6318 100644 --- a/stories/molecules/inputs/InputField/InputField.tsx +++ b/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 diff --git a/stories/molecules/inputs/TextInput/TextInput.tsx b/stories/molecules/inputs/TextInput/TextInput.tsx index b945bfb..f01cc4b 100644 --- a/stories/molecules/inputs/TextInput/TextInput.tsx +++ b/stories/molecules/inputs/TextInput/TextInput.tsx @@ -157,7 +157,10 @@ const TextInput = (
{message && ( - + {message} )} diff --git a/stories/molecules/inputs/combobox/ComboBox.tsx b/stories/molecules/inputs/combobox/ComboBox.tsx index 1c5b32c..f3f2b84 100644 --- a/stories/molecules/inputs/combobox/ComboBox.tsx +++ b/stories/molecules/inputs/combobox/ComboBox.tsx @@ -112,7 +112,8 @@ const Combobox = >({ "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) => `${item ? item[displayProperty] : ""}`} @@ -169,7 +170,11 @@ const Combobox = >({
{message && ( - + {message} )} diff --git a/stories/molecules/inputs/textArea/TextArea.tsx b/stories/molecules/inputs/textArea/TextArea.tsx index 28b3e32..83bff72 100644 --- a/stories/molecules/inputs/textArea/TextArea.tsx +++ b/stories/molecules/inputs/textArea/TextArea.tsx @@ -65,7 +65,13 @@ const Textarea: React.FC = ({ }) => { 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 = ({ { "border-red-500 outline-red-500 focus:ring-red-500": isError }, + disabledStyles, className )} disabled={isDisabled} @@ -126,6 +133,7 @@ const Textarea: React.FC = ({ { "border-red-500 outline-red-500 focus:ring-red-500": isError }, + disabledStyles, className )} disabled={isDisabled}