Unify disabled appearance across all form controls

Disabled controls looked inconsistent: the SearchSelect faded (opacity-50)
while native inputs used a solid strong surface. Standardize on the faded look
(opacity-50) the user preferred, via shared constants so every form element
matches:

- DISABLED_CONTROL_CLASS (disabled:opacity-50 disabled:cursor-not-allowed) on
  the control — native inputs/select/textarea via PrimitiveWidgetsMixin, plus
  the Checkbox component (previously had no disabled style).
- DISABLED_WITHIN_CLASS (has-[:disabled]: wrapper variant) for composite
  controls like SearchSelect whose disabled state lives on an inner element.

e2e asserts a disabled SearchSelect and the Name input fade identically
(opacity 0.5) and return to 1 when enabled. CLAUDE.md documents the shared
disabled constants.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-20 07:52:44 +02:00
parent 02798f8858
commit 29ba3e66e9
7 changed files with 50 additions and 34 deletions
+4
View File
@@ -53,6 +53,8 @@ from common.components.primitives import (
A,
AddForm,
ButtonGroup,
DISABLED_CONTROL_CLASS,
DISABLED_WITHIN_CLASS,
FormFields,
Checkbox,
CsrfInput,
@@ -115,6 +117,8 @@ __all__ = [
"randomid",
"A",
"AddForm",
"DISABLED_CONTROL_CLASS",
"DISABLED_WITHIN_CLASS",
"FormFields",
"StyledButton",
"ButtonGroup",