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 = (