Form controls: 36px single-line height and consistent thin focus (2.6.0)

CHANGELOG.md

@@ -1,5 +1,72 @@
 # Changelog
 
+## 2.6.0
+
+**Visual change for every form.** Single-line inputs are now 2px shorter, and focus styles are
+thinner and consistent. Check forms that set their own input heights or focus styles.
+
+### Changed: single-line controls are 36px, matching Button
+
+Inputs had no fixed height. `py-2` + `leading-5` + a 1px border made them 38px, while the default
+`Button` is `h-9` (36px), so an input next to a button sat 2px taller. The height also changed
+depending on whether `@tailwindcss/forms` was loaded and in which order: 22–24px without it, and
+42px when a consumer's forms styles loaded after plenum's.
+
+These are now a fixed `h-9` (36px) with `py-0` and the text vertically centred, whatever CSS is loaded:
+
+| Control | Before | After |
+| --- | --- | --- |
+| `InputField` (and so `TextInput`, including `date` / `datetime-local`) | 38px | 36px |
+| `FormInputWithAddons`, `AnimatedLabelInput`, `AnimatedFormInputWithAddons` | 38px | 36px |
+| `NestedInputButton` (the add-on button inside the above) | 38px | 36px |
+| `TextInputSelect`: input and native `<select>` segment | 38px | 36px |
+| `Select`: the bordered wrapper (the input fills it with `h-full`) | 38px | 36px |
+| `Combobox` input and chevron | 38px | 36px |
+| `DropdownWithMultiSelect` trigger | 38px | 36px |
+
+Add-on segments and nested buttons now match the input, so each combined control is one flush 36px
+row. The floating labels in `AnimatedLabelInput` / `AnimatedFormInputWithAddons` moved from
+`top-[9px]` to `top-[8px]` to stay centred. `Button`, `ButtonDropdown`, `TextArea` and
+`AnimatedLabelTextArea` are unchanged.
+
+`InputField` still appends your `className` after its own classes. If you forced a height (for
+example `h-9`) you can remove it now. If you pass vertical padding such as `py-2`, remove it; the
+height is fixed, so the padding only shrinks the text area.
+
+### Changed: text inputs and select triggers focus with a single 1px violet-700 border
+
+-   **Text inputs** (`InputField`, `TextInput`, `FormInputWithAddons`, the animated-label inputs,
+    `TextInputSelect`, `Combobox`) previously showed about 2px on focus: a 1px violet border plus
+    `@tailwindcss/forms`' 1px blue ring. `InputField` already had `focus:ring-0`, but it has the same
+    specificity as the forms rule, so it lost whenever the consumer's forms styles loaded after
+    plenum's. Focus is now only the 1px `violet-700` border. The ring is removed with
+    `focus:!ring-0` and the browser outline with `focus:outline-none`, so this holds with or without
+    `@tailwindcss/forms` and regardless of stylesheet order.
+-   **`Select`** used a deliberate 2px (`focus-within:border-primary-800 focus-within:ring-1`). It
+    now uses the same single 1px `violet-700` border, with `focus-within:ring-0`.
+-   **`TextInputSelect`'s `<select>`**, **`Combobox`** and **`NestedInputButton`** used
+    `focus:ring-1 focus:ring-purple-500` plus a purple border. They now use the same 1px `violet-700`
+    border. `NestedInputButton` and the `DropdownWithMultiSelect` trigger show it for keyboard focus
+    only (`focus-visible`).
+-   **Error and readonly states keep their red / gray border on focus.** Previously `Select` and
+    `Combobox` in error turned purple on focus. `TextInput` and `TextInputSelect` now also set
+    `aria-invalid="true"` on the input when `isError` is set.
+
+### Changed: button and toggle focus rings show for keyboard focus only
+
+`Button` (both the `<button>` and `asLink` variants), both halves of `ButtonDropdown`, `Capsule` and
+`ToggleSwitch` applied their 2px purple ring on `focus`, `focus-within` and `active`, so it also
+appeared on mouse click. The ring is now `focus-visible` only: it shows for keyboard focus (WCAG
+2.4.7) but not after a click. `Checkbox` and `Radio` do the same: the forms plugin's `:focus` ring is
+zeroed, and a 2px ring shows on `focus-visible`. This also removes some malformed class strings in
+the `asLink` danger/warning and `Capsule` danger variants.
+
+### Added
+
+-   Story **Design System / molecules / inputs / Form Control States**: every control in default,
+    error and disabled states, keyboard and mouse focus (choose the control in Controls), and an
+    input next to a default `Button` in one row.
+
 ## 2.5.6
 
 ### Fixed — Select no longer opens on focus

package.json

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

stories/atoms/buttons/Button/Button.tsx

@@ -91,7 +91,7 @@ const _Button = (
 				title: asLink.title,
 				className: twMerge(
 					cn(
-						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+						"inline-flex items-center justify-center gap-x-2  font rounded-[3px] !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 transition-all",
 						{ "min-w-[130px]": applyMinWidth },
 						{ "w-full": fullWidth },
 						{ "px-[11px] py-[7px] text-xs": resolvedSize === "xs" },
@@ -112,11 +112,11 @@ const _Button = (
 								actionType === "alternative"
 						},
 						{
-							" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+							" bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 								actionType === "danger"
 						},
 						{
-							" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 <focus-visible:!></focus-visible:!>ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-400 disabled:hover:bg-yellow-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
+							" bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 disabled:bg-yellow-400 disabled:hover:bg-yellow-400 disabled:text-transparent-black-70 disabled:focus-visible:ring-0":
 								actionType === "warning"
 						},
 						className ? className : ""
@@ -174,7 +174,7 @@ const _Button = (
 			type="button"
 			className={twMerge(
 				cn(
-					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all h-9",
+					" px-4 py-2 inline-flex items-center justify-center gap-x-2 rounded !ring-offset-white outline-none focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 transition-all h-9",
 					{ "min-w-[130px]": applyMinWidth },
 					{ "w-full": fullWidth },
 					{ "text-xs": resolvedSize === "xs" },
@@ -195,15 +195,15 @@ const _Button = (
 							actionType === "alternative"
 					},
 					{
-						"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
+						"bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 disabled:bg-red-400 disabled:hover:bg-red-400 disabled:text-gray-50 disabled:focus-visible:ring-0":
 							actionType === "danger"
 					},
 					{
-						"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 focus:!ring-red-500 active:bg-red-100 active:ring-red-500 focus-within:!ring-red-500 disabled:bg-white disabled:hover:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
+						"border-gray-300 border bg-white text-red-600 hover:bg-red-50 focus-visible:!ring-red-500 active:bg-red-100 disabled:bg-white disabled:hover:bg-white disabled:text-red-300 disabled:!ring-0 disabled:focus-visible:ring-0":
 							actionType === "danger-secondary"
 					},
 					{
-						"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 focus:!ring-yellow-500 active:!ring-yellow-500 focus-within:!ring-yellow-500 disabled:bg-yellow-300 disabled:hover:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
+						"bg-yellow-500 text-transparent-black-70 hover:bg-yellow-700 focus-visible:!ring-yellow-500 disabled:bg-yellow-300 disabled:hover:bg-yellow-300 disabled:text-transparent-black-30 disabled:focus-visible:ring-0":
 							actionType === "warning"
 					},
 					className ? className : ""

stories/atoms/buttons/Capsule/Capsule.tsx

@@ -54,7 +54,7 @@ const Capsule = ({
 		<button
 			type="button"
 			className={cn(
-				"inline-flex items-center justify-center gap-x-2 text-sm  p-2  !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2  focus-within:ring-2 focus-within:ring-purple-600 focus-within:ring-offset-2  focus:ring-2 focus:ring-purple-600 focus:ring-offset-2  active:ring-2 active:ring-purple-600 active:ring-offset-2 transition-all",
+				"inline-flex items-center justify-center gap-x-2 text-sm  p-2  !ring-offset-white outline-none   focus-visible:ring-2 focus-visible:ring-purple-600 focus-visible:ring-offset-2 transition-all",
 				{ "w-full": fullWidth },
 				{ "px-[11px] py-[7px] text-xs rounded-[15px]": size === "xs" },
 				{ "px-[15px] py-[9px] text-sm rounded-[17px]": size === "sm" },
@@ -73,7 +73,7 @@ const Capsule = ({
 						actionType === "alternative"
 				},
 				{
-					" bg-red-600 text-white hover:bg-red-700 <focus-visible:!></focus-visible:!>ring-red-500 focus:!ring-red-500 active:!ring-red-500 focus-within:!ring-red-500 ":
+					" bg-red-600 text-white hover:bg-red-700 focus-visible:!ring-red-500 ":
 						actionType === "danger"
 				},
 				className ? className : ""