Combobox: 💄 tweak the visibility of chevron (#3187)

* Combobox: 💄 tweak the visibility of chevron * Combobox: 💄 dim visibility of icons for readonly datepicker, select, and combobox * Combobox: 💄 dim visibility of icons for readonly datepicker, select, and combobox * changeset
navikt · Oct 1, 2024 · 73b2bca · 73b2bca
1 parent 01411dc
commit 73b2bca
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/.changeset/ninety-gifts-thank.md b/.changeset/ninety-gifts-thank.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+Datepicker/Select: :lipstick: dim non-interactable icons when readonly is set.
diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
@@ -281,6 +281,7 @@
 /* Readonly */
 .navds-date__field--readonly .navds-date__field-button {
   cursor: default;
+  color: var(--a-gray-500);
 }
 
 .navds-date__caption-button {

diff --git a/@navikt/core/css/form/combobox.css b/@navikt/core/css/form/combobox.css
@@ -40,6 +40,10 @@
   pointer-events: none;
 }
 
+.navds-combobox--readonly .navds-combobox__button-toggle-list {
+  color: var(--a-gray-500);
+}
+
 .navds-combobox--readonly .navds-text-field__input,
 .navds-combobox--readonly .navds-combobox__input {
   background-color: var(--a-surface-subtle);

diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css
@@ -109,3 +109,7 @@
   border-color: var(--a-border-subtle);
   cursor: default;
 }
+
+.navds-select--readonly .navds-select__chevron {
+  color: var(--a-gray-500);
+}