chore(chips-combobox): reduced nesting, modified docs, moved chevron …

…into combobox as an icon
eBay · Dec 15, 2023 · 5a81181 · 5a81181
1 parent ab94e2b
commit 5a81181
Show file tree

Hide file tree

Showing 8 changed files with 615 additions and 1,013 deletions.
diff --git a/dist/chips-combobox/chips-combobox.css b/dist/chips-combobox/chips-combobox.css
@@ -1,37 +1,15 @@
-.chips-combobox__container {
+.chips-combobox {
   background-color: var(--color-background-secondary);
   border: 1px solid var(--color-stroke-default);
   border-radius: var(--border-radius-50);
-  display: flex;
-  flex-direction: column;
   padding: var(--spacing-100) var(--spacing-200) var(--spacing-100) var(--spacing-100);
   position: relative;
 }
-.chips-combobox__content {
-  display: flex;
-  flex-direction: row;
-  gap: var(--spacing-100);
-  margin-bottom: var(--spacing-100);
+.chips-combobox__items:empty {
+  display: none;
 }
-.chips-combobox__items {
-  display: flex;
-  flex: auto;
-  flex-wrap: wrap;
-  gap: var(--spacing-100);
-  max-width: 100%;
-}
-.chips-combobox label {
-  display: inline-block;
-  font-size: var(--font-size-default);
-  margin-bottom: var(--spacing-50);
-}
-.chips-combobox__helper-text {
-  color: var(--color-foreground-secondary);
-  font-size: var(--font-size-small);
-  margin-top: var(--spacing-100);
-}
-.chips-combobox button.icon-btn {
-  background-color: transparent;
+.chips-combobox__items:empty ~ .chips-combobox__combobox {
+  margin-top: 0;
 }
 .chips-combobox .combobox__control > input {
   background-color: inherit;
@@ -50,6 +28,12 @@
   margin-top: 8px;
   width: calc(100% + 24px);
 }
+.chips-combobox .combobox svg.icon {
+  pointer-events: none;
+  position: absolute;
+  right: 17px;
+  top: calc(50% - 8px);
+}
 .chips-combobox .combobox__listbox {
   background-color: var(--color-background-elevated);
   border: none;
@@ -60,28 +44,28 @@
 .chips-combobox .combobox__option[role^="option"] {
   border-style: none;
 }
-.chips-combobox__container:focus-within {
+.chips-combobox:focus-within {
   background-color: var(--color-background-primary);
   border-color: var(--color-stroke-strong);
 }
-.chips-combobox--expanded .chips-combobox__list-toggle {
+.chips-combobox__items:empty ~ .combobox--expanded .combobox__listbox {
+  width: calc(100% + 8px);
+}
+.chips-combobox .combobox--expanded svg.icon {
   transform: rotateZ(180deg);
 }
 /** Error State **/
-.chips-combobox--error-state .chips-combobox__container {
+.chips-combobox--error-state {
   border-color: var(--color-stroke-attention);
 }
-.chips-combobox--error-state .chips-combobox__helper-text {
-  color: var(--color-foreground-attention);
+.chips-combobox--error-state:focus-within {
+  border-color: var(--color-stroke-attention);
 }
 /** Disabled State **/
-.chips-combobox[aria-disabled] .chips-combobox__container {
+.chips-combobox[aria-disabled] {
   border-color: var(--color-stroke-disabled);
   pointer-events: none;
 }
-.chips-combobox[aria-disabled] button {
-  background-color: transparent;
-}
 .chips-combobox[aria-disabled] .chip {
   color: var(--color-foreground-disabled);
 }
@@ -95,6 +79,9 @@
 .chips-combobox[aria-disabled] .combobox__control > input::placeholder {
   color: var(--color-foreground-disabled);
 }
+.chips-combobox__items:empty ~ .combobox__control > input:focus {
+  width: calc(100% - 56px);
+}
 [dir="rtl"] .chips-combobox .combobox {
   margin-right: -16px;
 }
diff --git a/docs/_includes/chips-combobox.html b/docs/_includes/chips-combobox.html
diff --git a/docs/src/js/main.js b/docs/src/js/main.js
@@ -527,22 +527,3 @@ document.querySelectorAll('.field').forEach(function(elCharContainer) {
 
     }
 });
-
-// CHIPS COMBOBOX
-document.querySelectorAll('.chips-combobox').forEach(function(elInputChips) {
-    const elBtnListToggle = elInputChips.querySelector('.chips-combobox__list-toggle')
-        , elCombobox = elInputChips.querySelector('.chips-combobox__combobox')
-    ;
-
-    elBtnListToggle.addEventListener('click', function() {
-        const isExpanded = elCombobox.classList.contains('combobox--expanded');
-
-        if (isExpanded) {
-            elInputChips.classList.remove('chips-combobox--expanded');
-            return elCombobox.classList.remove('combobox--expanded');
-        }
-
-        elInputChips.classList.add('chips-combobox--expanded');
-        return elCombobox.classList.add('combobox--expanded');
-    });
-});
diff --git a/docs/static/docs.min.js b/docs/static/docs.min.js
diff --git a/docs/static/docs.min.js.map b/docs/static/docs.min.js.map
diff --git a/src/less/chips-combobox/chips-combobox.less b/src/less/chips-combobox/chips-combobox.less
@@ -1,45 +1,20 @@
 @import "../variables/variables.less";
 
-.chips-combobox__container {
+.chips-combobox {
     background-color: var(--color-background-secondary);
     border: 1px solid var(--color-stroke-default);
     border-radius: var(--border-radius-50);
-    display: flex;
-    flex-direction: column;
     padding: var(--spacing-100) var(--spacing-200) var(--spacing-100)
         var(--spacing-100);
     position: relative;
 }
 
-.chips-combobox__content {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-100);
-    margin-bottom: var(--spacing-100);
+.chips-combobox__items:empty {
+    display: none;
 }
 
-.chips-combobox__items {
-    display: flex;
-    flex: auto;
-    flex-wrap: wrap;
-    gap: var(--spacing-100);
-    max-width: 100%;
-}
-
-.chips-combobox label {
-    display: inline-block;
-    font-size: var(--font-size-default);
-    margin-bottom: var(--spacing-50);
-}
-
-.chips-combobox__helper-text {
-    color: var(--color-foreground-secondary);
-    font-size: var(--font-size-small);
-    margin-top: var(--spacing-100);
-}
-
-.chips-combobox button.icon-btn {
-    background-color: transparent;
+.chips-combobox__items:empty ~ .chips-combobox__combobox {
+    margin-top: 0;
 }
 
 .chips-combobox .combobox__control > input {
@@ -62,6 +37,13 @@
     width: calc(100% + 24px);
 }
 
+.chips-combobox .combobox svg.icon {
+    pointer-events: none;
+    position: absolute;
+    right: 17px;
+    top: calc(50% - 8px);
+}
+
 .chips-combobox .combobox__listbox {
     background-color: var(--color-background-elevated);
     border: none;
@@ -74,34 +56,34 @@
     border-style: none;
 }
 
-.chips-combobox__container:focus-within {
+.chips-combobox:focus-within {
     background-color: var(--color-background-primary);
     border-color: var(--color-stroke-strong);
 }
 
-.chips-combobox--expanded .chips-combobox__list-toggle {
+.chips-combobox__items:empty ~ .combobox--expanded .combobox__listbox {
+    width: calc(100% + 8px);
+}
+
+.chips-combobox .combobox--expanded svg.icon {
     transform: rotateZ(180deg);
 }
 
 /** Error State **/
-.chips-combobox--error-state .chips-combobox__container {
+.chips-combobox--error-state {
     border-color: var(--color-stroke-attention);
 }
 
-.chips-combobox--error-state .chips-combobox__helper-text {
-    color: var(--color-foreground-attention);
+.chips-combobox--error-state:focus-within {
+    border-color: var(--color-stroke-attention);
 }
 
 /** Disabled State **/
-.chips-combobox[aria-disabled] .chips-combobox__container {
+.chips-combobox[aria-disabled] {
     border-color: var(--color-stroke-disabled);
     pointer-events: none;
 }
 
-.chips-combobox[aria-disabled] button {
-    background-color: transparent;
-}
-
 .chips-combobox[aria-disabled] .chip {
     color: var(--color-foreground-disabled);
 }
@@ -119,6 +101,10 @@
     color: var(--color-foreground-disabled);
 }
 
+.chips-combobox__items:empty ~ .combobox__control > input:focus {
+    width: calc(100% - 56px);
+}
+
 [dir="rtl"] .chips-combobox .combobox {
     margin-right: -16px;
 }