fix(chips-combobox): made BEM fixes

eBay · Dec 12, 2023 · ab94e2b · ab94e2b
1 parent 2bbdbd6
commit ab94e2b
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 41 deletions.
diff --git a/dist/chips-combobox/chips-combobox.css b/dist/chips-combobox/chips-combobox.css
@@ -13,7 +13,7 @@
   gap: var(--spacing-100);
   margin-bottom: var(--spacing-100);
 }
-.chips-combobox_items {
+.chips-combobox__items {
   display: flex;
   flex: auto;
   flex-wrap: wrap;
@@ -64,7 +64,7 @@
   background-color: var(--color-background-primary);
   border-color: var(--color-stroke-strong);
 }
-.chips-combobox--expanded .chips-combobox_list-toggle {
+.chips-combobox--expanded .chips-combobox__list-toggle {
   transform: rotateZ(180deg);
 }
 /** Error State **/

diff --git a/docs/_includes/chips-combobox.html b/docs/_includes/chips-combobox.html
@@ -11,7 +11,7 @@ <h3>Basic Chips Combobox</h3>
             <div class="chips-combobox">
                 <div class="chips-combobox__container">
                     <div class="chips-combobox__content">
-                        <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-1-heading">
+                        <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-1-heading">
                             <span class="chip">
                                 <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
@@ -37,7 +37,7 @@ <h3>Basic Chips Combobox</h3>
                                 </button>
                             </span>
                         </div>
-                        <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1">
+                        <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1">
                             <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                                 {% include symbol.html name="chevron-down-16" %}
                             </svg>
@@ -79,7 +79,7 @@ <h3>Chips Combobox with a Label</h3>
                 <label id="chips-combobox-2-heading" for="chips-combobox-2-input">My Sports Label</label>
                 <div class="chips-combobox__container">
                     <div class="chips-combobox__content">
-                        <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-2-heading">
+                        <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-2-heading">
                             <span class="chip">
                                 <span id="chip-interactive-2-1-text" class="chip__text">Football</span>
                                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-2-1-text">
@@ -105,7 +105,7 @@ <h3>Chips Combobox with a Label</h3>
                                 </button>
                             </span>
                         </div>
-                        <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-2">
+                        <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-2">
                             <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                                 {% include symbol.html name="chevron-down-16" %}
                             </svg>
@@ -147,7 +147,7 @@ <h3>Chips Combobox with Helper Text</h3>
                 <label id="chips-combobox-3-heading" for="chips-combobox-3-input">Sports</label>
                 <div class="chips-combobox__container">
                     <div class="chips-combobox__content">
-                        <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-3-heading">
+                        <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-3-heading">
                             <span class="chip">
                                 <span id="chip-interactive-3-1-text" class="chip__text">Football</span>
                                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-1-text">
@@ -173,7 +173,7 @@ <h3>Chips Combobox with Helper Text</h3>
                                 </button>
                             </span>
                         </div>
-                        <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
+                        <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
                             <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                                 {% include symbol.html name="chevron-down-16" %}
                             </svg>
@@ -218,7 +218,7 @@ <h3>Chips Combobox in Disabled State</h3>
                 <label id="chips-combobox-4-heading" for="chips-combobox-4-input">Sports</label>
                 <div class="chips-combobox__container">
                     <div class="chips-combobox__content">
-                        <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-4-heading">
+                        <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-4-heading">
                             <span class="chip">
                                 <span id="chip-interactive-4-1-text" class="chip__text">Football</span>
                                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-4-text" disabled>
@@ -244,7 +244,7 @@ <h3>Chips Combobox in Disabled State</h3>
                                 </button>
                             </span>
                         </div>
-                        <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" disabled>
+                        <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" disabled>
                             <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                                 {% include symbol.html name="chevron-down-16" %}
                             </svg>
@@ -286,7 +286,7 @@ <h3>Chips Combobox in Error State </h3>
                 <label id="chips-combobox-5-heading" for="chips-combobox-5-input">Sports</label>
                 <div class="chips-combobox__container">
                     <div class="chips-combobox__content">
-                        <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-5-heading">
+                        <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-5-heading">
                             <span class="chip">
                                 <span id="chip-interactive-5-1-text" class="chip__text">Football</span>
                                 <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-5-1-text">
@@ -312,7 +312,7 @@ <h3>Chips Combobox in Error State </h3>
                                 </button>
                             </span>
                         </div>
-                        <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-5">
+                        <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-5">
                             <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                                 {% include symbol.html name="chevron-down-16" %}
                             </svg>

diff --git a/docs/src/js/main.js b/docs/src/js/main.js
@@ -530,7 +530,7 @@ document.querySelectorAll('.field').forEach(function(elCharContainer) {
 
 // CHIPS COMBOBOX
 document.querySelectorAll('.chips-combobox').forEach(function(elInputChips) {
-    const elBtnListToggle = elInputChips.querySelector('.chips-combobox_list-toggle')
+    const elBtnListToggle = elInputChips.querySelector('.chips-combobox__list-toggle')
         , elCombobox = elInputChips.querySelector('.chips-combobox__combobox')
     ;
 

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
@@ -18,7 +18,7 @@
     margin-bottom: var(--spacing-100);
 }
 
-.chips-combobox_items {
+.chips-combobox__items {
     display: flex;
     flex: auto;
     flex-wrap: wrap;
@@ -79,7 +79,7 @@
     border-color: var(--color-stroke-strong);
 }
 
-.chips-combobox--expanded .chips-combobox_list-toggle {
+.chips-combobox--expanded .chips-combobox__list-toggle {
     transform: rotateZ(180deg);
 }
 

diff --git a/src/less/chips-combobox/stories/chips-combobox.stories.js b/src/less/chips-combobox/stories/chips-combobox.stories.js
@@ -4,7 +4,7 @@ export const simple = () => `
 <div class="chips-combobox">
     <div class="chips-combobox__container">
         <div class="chips-combobox__content">
-            <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-1-heading">
+            <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-1-heading">
                 <span class="chip">
                     <span id="chip-interactive-1-1-text" class="chip__text">Football</span>
                     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-1-1-text">
@@ -30,7 +30,7 @@ export const simple = () => `
                     </button>
                 </span>
             </div>
-            <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1">
+            <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1">
                 <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                     <use href="#icon-chevron-down-16"></use>
                 </svg>
@@ -62,7 +62,7 @@ export const expanded = () => `
 <div class="chips-combobox chips-combobox--expanded">
     <div class="chips-combobox__container">
         <div class="chips-combobox__content">
-            <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-3-heading">
+            <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-3-heading">
                 <span class="chip">
                     <span id="chip-interactive-3-1-text" class="chip__text">Football</span>
                     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-1-text">
@@ -88,7 +88,7 @@ export const expanded = () => `
                     </button>
                 </span>
             </div>
-            <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
+            <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
                 <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                     <use href="#icon-chevron-down-16"></use>
                 </svg>
@@ -121,7 +121,7 @@ export const withLabel = () => `
     <label id="chips-combobox-3-heading" for="chips-combobox-3-input">Sports</label>
     <div class="chips-combobox__container">
         <div class="chips-combobox__content">
-            <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-3-heading">
+            <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-3-heading">
                 <span class="chip">
                     <span id="chip-interactive-3-1-text" class="chip__text">Football</span>
                     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-1-text">
@@ -147,7 +147,7 @@ export const withLabel = () => `
                     </button>
                 </span>
             </div>
-            <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
+            <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
                 <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                     <use href="#icon-chevron-down-16"></use>
                 </svg>
@@ -180,7 +180,7 @@ export const withHelperText = () => `
     <label id="chips-combobox-3-heading" for="chips-combobox-3-input">Sports</label>
     <div class="chips-combobox__container">
         <div class="chips-combobox__content">
-            <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-3-heading">
+            <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-3-heading">
                 <span class="chip">
                     <span id="chip-interactive-3-1-text" class="chip__text">Football</span>
                     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-1-text">
@@ -206,7 +206,7 @@ export const withHelperText = () => `
                     </button>
                 </span>
             </div>
-            <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
+            <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
                 <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                     <use href="#icon-chevron-down-16"></use>
                 </svg>
@@ -240,7 +240,7 @@ export const disabledState = () => `
     <label id="chips-combobox-3-heading" for="chips-combobox-3-input">Sports</label>
     <div class="chips-combobox__container">
         <div class="chips-combobox__content">
-            <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-3-heading">
+            <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-3-heading">
                 <span class="chip">
                     <span id="chip-interactive-3-1-text" class="chip__text">Football</span>
                     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-1-text">
@@ -266,7 +266,7 @@ export const disabledState = () => `
                     </button>
                 </span>
             </div>
-            <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3" disabled>
+            <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3" disabled>
                 <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                     <use href="#icon-chevron-down-16"></use>
                 </svg>
@@ -300,7 +300,7 @@ export const errorState = () => `
     <label id="chips-combobox-3-heading" for="chips-combobox-3-input">Sports</label>
     <div class="chips-combobox__container">
         <div class="chips-combobox__content">
-            <div class="chips-combobox_items" role="group" aria-describedby="chips-combobox-3-heading">
+            <div class="chips-combobox__items" role="group" aria-describedby="chips-combobox-3-heading">
                 <span class="chip">
                     <span id="chip-interactive-3-1-text" class="chip__text">Football</span>
                     <button class="chip__button" type="button" aria-label="Remove" aria-describedby="chip-interactive-3-1-text">
@@ -326,7 +326,7 @@ export const errorState = () => `
                     </button>
                 </span>
             </div>
-            <button type="button" class="icon-btn icon-btn--small chips-combobox_list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
+            <button type="button" class="icon-btn icon-btn--small chips-combobox__list-toggle" aria-label="Toggle options list" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-3">
                 <svg class="icon icon--chevron-down-16" focusable="false" height="16" width="16" aria-hidden="true">
                     <use href="#icon-chevron-down-16"></use>
                 </svg>