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}