Align form control styling (#4027)

jpmorganchase · Sep 13, 2024 · dccd349 · dccd349
1 parent 2295601
commit dccd349
Show file tree

Hide file tree

Showing 7 changed files with 725 additions and 558 deletions.
diff --git a/.changeset/cold-carrots-hide.md b/.changeset/cold-carrots-hide.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/lab": patch
+---
+
+Updated DatePicker to show validation status when set to read-only.
diff --git a/.changeset/hip-trainers-wash.md b/.changeset/hip-trainers-wash.md
@@ -0,0 +1,17 @@
+---
+"@salt-ds/core": patch
+---
+
+- Fixed bordered form controls' activation indicator and border combining to 3px instead of 2px in:
+
+  - Dropdown
+  - ComboBox
+  - Input
+  - MultilineInput
+
+- Fixed form controls' activation indicator changing color when an active field is hovered in:
+
+  - Input
+  - MultilineInput
+
+- Updated the token applied to form controls' activation indicator to use `--salt-size-border-strong` instead of `  --salt-editable-borderWidth-active`.
diff --git a/packages/core/src/dropdown/Dropdown.css b/packages/core/src/dropdown/Dropdown.css
@@ -1,13 +1,3 @@
-.saltDropdown {
-  --dropdown-border: none;
-  --dropdown-borderColor: var(--salt-editable-borderColor);
-  --dropdown-color: var(--salt-content-primary-foreground);
-  --dropdown-cursor: var(--salt-selectable-cursor-hover);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle);
-  --dropdown-outlineColor: var(--salt-focused-outlineColor);
-  --dropdown-borderWidth: var(--salt-size-border);
-}
-
 .saltDropdown {
   all: unset;
   box-sizing: border-box;
@@ -33,36 +23,77 @@
 }
 
 .saltDropdown:hover {
-  --dropdown-borderColor: var(--salt-editable-borderColor-hover);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle-hover);
-  --dropdown-background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
+  background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));
+  cursor: var(--salt-selectable-cursor-hover);
 }
 
-.saltDropdown:active {
-  --dropdown-background: var(--saltDropdown-background-active, var(--dropdown-background-active));
-  --dropdown-borderColor: var(--salt-editable-borderColor-active);
-  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
+.saltDropdown-bordered.saltDropdown {
+  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
 }
 
-.saltDropdown:focus {
-  outline: var(--salt-focused-outline);
-  --dropdown-borderColor: var(--salt-editable-borderColor-active);
-  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
-  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);
+.saltDropdown-bordered.saltDropdown:hover {
+  border-style: var(--salt-editable-borderStyle-hover);
+  border-color: var(--dropdown-borderColor-hover);
 }
 
-.saltDropdown-content {
-  flex: 1;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
+/* Style applied if focused or active when `bordered={true}` */
+.saltDropdown-bordered.saltDropdown:focus,
+.saltDropdown-bordered.saltDropdown:focus:hover {
+  border-style: var(--salt-editable-borderStyle-active);
+  border-color: var(--dropdown-borderColor-active);
 }
 
-.saltDropdown-placeholder {
-  color: var(--salt-content-secondary-foreground);
-  font-weight: var(--salt-text-fontWeight-small);
+/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */
+.saltDropdown-bordered.saltDropdown[aria-readonly="true"],
+.saltDropdown-bordered.saltDropdown[aria-readonly="true"]:hover {
+  border-style: var(--salt-editable-borderStyle-readonly);
+  border-color: var(--dropdown-borderColor-readonly);
+}
+
+.saltDropdown-bordered.saltDropdown-disabled,
+.saltDropdown-bordered.saltDropdown-disabled:hover {
+  border-style: var(--salt-editable-borderStyle-disabled);
+  border-color: var(--dropdown-borderColor-disabled);
+}
+
+.saltDropdown-activationIndicator {
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  position: absolute;
+  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);
+}
+
+.saltDropdown:hover .saltDropdown-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-hover);
+  border-bottom-color: var(--dropdown-borderColor-hover);
+}
+
+.saltDropdown:focus .saltDropdown-activationIndicator,
+.saltDropdown:focus:hover .saltDropdown-activationIndicator {
+  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);
+}
+
+.saltDropdown[aria-readonly="true"] .saltDropdown-activationIndicator,
+.saltDropdown[aria-readonly="true"]:hover .saltDropdown-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-readonly);
+  border-bottom-color: var(--dropdown-borderColor-readonly);
+}
+
+.saltDropdown-disabled .saltDropdown-activationIndicator,
+.saltDropdown-disabled:hover .saltDropdown-activationIndicator {
+  border-bottom-style: var(--salt-editable-borderStyle-disabled);
+  border-bottom-color: var(--dropdown-borderColor-disabled);
+}
+
+.saltDropdown-bordered .saltDropdown-activationIndicator,
+.saltDropdown-bordered.saltDropdown[aria-readonly="true"] .saltDropdown-activationIndicator,
+.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {
+  border-bottom-width: 0;
+}
+
+.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {
+  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));
 }
 
 .saltDropdown-primary {
@@ -71,6 +102,12 @@
   --dropdown-background-hover: var(--salt-editable-primary-background-hover);
   --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);
   --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor);
+  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
+  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --dropdown-borderColor-disabled: var(--salt-editable-borderColor-disabled);
+  --dropdown-borderColor-readonly: var(--salt-editable-borderColor-readonly);
+  --dropdown-outlineColor: var(--salt-focused-outlineColor);
 }
 
 .saltDropdown-secondary {
@@ -79,90 +116,81 @@
   --dropdown-background-hover: var(--salt-editable-secondary-background-active);
   --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);
   --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);
+  --dropdown-borderColor: var(--salt-editable-borderColor);
+  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);
+  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);
+  --dropdown-borderColor-disabled: var(--salt-editable-borderColor-disabled);
+  --dropdown-borderColor-readonly: var(--salt-editable-borderColor-readonly);
+  --dropdown-outlineColor: var(--salt-focused-outlineColor);
 }
 
-.saltDropdown:disabled,
-.saltDropdown:disabled:active,
-.saltDropdown:disabled:hover,
-.saltDropdown:disabled:focus {
-  --dropdown-background: var(--dropdown-background-disabled);
-  --dropdown-borderColor: var(--salt-editable-borderColor-disabled);
-  --dropdown-color: var(--salt-content-primary-foreground-disabled);
-  --dropdown-cursor: var(--salt-selectable-cursor-disabled);
-  --dropdown-borderWidth: var(--salt-size-border);
-}
-
-.saltDropdown[aria-readonly="true"] {
-  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
-  --dropdown-color: var(--salt-content-primary-foreground);
-  --dropdown-cursor: var(--salt-selectable-cursor-readonly);
-  --dropdown-background: var(--dropdown-background-readonly);
-  --dropdown-borderWidth: var(--salt-size-border);
-}
-
-.saltDropdown[aria-readonly="true"]:hover,
-.saltDropdown[aria-readonly="true"]:focus {
-  --dropdown-background: var(--dropdown-background-readonly);
-  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);
-}
-
-.saltDropdown-error,
-.saltDropdown-error:hover,
-.saltDropdown-error:focus {
+.saltDropdown-error {
   --dropdown-background: var(--salt-status-error-background);
-  --dropdown-borderColor: var(--salt-status-error-borderColor);
   --dropdown-background-active: var(--salt-status-error-background);
   --dropdown-background-hover: var(--salt-status-error-background);
   --dropdown-background-readonly: var(--salt-status-error-background);
-  outline-color: var(--salt-status-error-borderColor);
+  --dropdown-borderColor: var(--salt-status-error-borderColor);
+  --dropdown-borderColor-active: var(--salt-status-error-borderColor);
+  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);
+  --dropdown-borderColor-disabled: var(--salt-status-error-borderColor);
+  --dropdown-borderColor-readonly: var(--salt-status-error-borderColor);
+  --dropdown-outlineColor: var(--salt-status-error-borderColor);
 }
 
-.saltDropdown-warning,
-.saltDropdown-warning:hover,
-.saltDropdown-warning:focus {
+.saltDropdown-warning {
   --dropdown-background: var(--salt-status-warning-background);
-  --dropdown-borderColor: var(--salt-status-warning-borderColor);
   --dropdown-background-active: var(--salt-status-warning-background);
   --dropdown-background-hover: var(--salt-status-warning-background);
   --dropdown-background-readonly: var(--salt-status-warning-background);
-  outline-color: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor-disabled: var(--salt-status-warning-borderColor);
+  --dropdown-borderColor-readonly: var(--salt-status-warning-borderColor);
+  --dropdown-outlineColor: var(--salt-status-warning-borderColor);
 }
 
-.saltDropdown-success,
-.saltDropdown-success:hover,
-.saltDropdown-success:focus {
+.saltDropdown-success {
   --dropdown-background: var(--salt-status-success-background);
-  --dropdown-borderColor: var(--salt-status-success-borderColor);
   --dropdown-background-active: var(--salt-status-success-background);
   --dropdown-background-hover: var(--salt-status-success-background);
   --dropdown-background-readonly: var(--salt-status-success-background);
-  outline-color: var(--salt-status-success-borderColor);
+  --dropdown-borderColor: var(--salt-status-success-borderColor);
+  --dropdown-borderColor-active: var(--salt-status-success-borderColor);
+  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);
+  --dropdown-borderColor-disabled: var(--salt-status-success-borderColor);
+  --dropdown-borderColor-readonly: var(--salt-status-success-borderColor);
+  --dropdown-outlineColor: var(--salt-status-success-borderColor);
 }
 
-.saltDropdown-activationIndicator {
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  position: absolute;
-  border-bottom: var(--dropdown-borderWidth) var(--dropdown-borderStyle) var(--dropdown-borderColor);
+.saltDropdown:focus,
+.saltDropdown:focus:hover {
+  background: var(--dropdown-background-active);
+  cursor: var(--salt-selectable-cursor-hover);
+  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);
 }
 
-.saltDropdown-bordered {
-  --dropdown-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--dropdown-borderColor);
-  --dropdown-borderWidth: 0;
+.saltDropdown.saltDropdown[aria-readonly="true"] {
+  background: var(--dropdown-background-readonly);
+  cursor: var(--salt-selectable-cursor-readonly);
 }
 
-/* Style applied if focused or active when `bordered={true}` */
-.saltDropdown-bordered.saltDropdown:focus,
-.saltDropdown-bordered:active {
-  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);
+.saltDropdown.saltDropdown:disabled,
+.saltDropdown.saltDropdown:disabled:hover {
+  background: var(--dropdown-background-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
 }
 
-/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */
-.saltDropdown-bordered[aria-readonly="true"],
-.saltDropdown-bordered[aria-readonly="true"]:hover,
-.saltDropdown[aria-readonly="true"]:focus,
-.saltDropdown-bordered.saltDropdown:disabled,
-.saltDropdown-bordered.saltDropdown:disabled:hover {
-  --dropdown-borderWidth: 0;
+.saltDropdown-content {
+  flex: 1;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.saltDropdown-placeholder {
+  color: var(--salt-content-secondary-foreground);
+  font-weight: var(--salt-text-fontWeight-small);
 }