feat(dotcom-components): add shadowparts (#11812)

### Related Ticket(s) Closes #11673 ### Description This PR updates all component-internal in dotcom-web-components markup to include `part` attributes in the shadow roots allowing global stylesheets to override internal styles. ### Changelog **Changed** - Add CSS Shadowparts to `@carbon/ibmdotcom-web-components` components
carbon-design-system · Aug 13, 2024 · b8983f2 · b8983f2
1 parent 1480031
commit b8983f2
Show file tree

Hide file tree

Showing 153 changed files with 2,733 additions and 754 deletions.
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.ts b/packages/carbon-web-components/src/components/copy-button/copy-button.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/carbon-web-components/src/components/copy/copy.ts b/packages/carbon-web-components/src/components/copy/copy.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

diff --git a/packages/carbon-web-components/tests/snapshots/cds-combo-box.md b/packages/carbon-web-components/tests/snapshots/cds-combo-box.md
@@ -7,31 +7,27 @@
 ```
 <label
   class="cds--label"
+  for="trigger-button"
   hidden=""
+  id="dropdown-label"
   part="title-text"
 >
   <slot name="title-text">
   </slot>
 </label>
-<div
-  class="cds--combo-box cds--dropdown cds--list-box cds--list-box--md"
-  role="listbox"
->
+<div class="cds--combo-box cds--dropdown cds--list-box cds--list-box--md">
   <div
-    aria-controls="menu-body"
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
     class="cds--list-box__field"
     part="trigger-button"
   >
     <input
+      aria-activedescendant=""
       aria-autocomplete="list"
       aria-controls="menu-body"
-      aria-label=""
+      aria-expanded="false"
+      aria-haspopup="listbox"
       class="cds--text-input cds--text-input--empty"
-      id="trigger-label"
+      id="trigger-button"
       placeholder=""
       role="combobox"
     >
@@ -41,8 +37,23 @@
     >
     </div>
   </div>
-  <slot name="slug">
+  <slot
+    class="cds--slug--revert"
+    name="slug"
+  >
   </slot>
+  <div
+    aria-labelledby="dropdown-label"
+    class="cds--list-box__menu"
+    hidden=""
+    id="menu-body"
+    part="menu-body"
+    role="listbox"
+    tabindex="-1"
+  >
+    <slot>
+    </slot>
+  </div>
 </div>
 <div
   class="cds--form__helper-text"
@@ -52,13 +63,6 @@
   <slot name="helper-text">
   </slot>
 </div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="cds--assistive-text"
-  role="status"
->
-</div>
 
 ```
 
@@ -67,7 +71,9 @@
 ```
 <label
   class="cds--label cds--label--disabled"
+  for="trigger-button"
   hidden=""
+  id="dropdown-label"
   part="title-text"
 >
   <slot name="title-text">
@@ -76,24 +82,20 @@
 <div
   class="cds--combo-box cds--dropdown cds--dropdown--invalid cds--list-box cds--list-box--disabled cds--list-box--md"
   data-invalid=""
-  role="listbox"
 >
   <div
-    aria-controls="menu-body"
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
     class="cds--list-box__field"
     part="trigger-button"
   >
     <input
+      aria-activedescendant=""
       aria-autocomplete="list"
       aria-controls="menu-body"
-      aria-label=""
+      aria-expanded="false"
+      aria-haspopup="listbox"
       class="cds--text-input"
       disabled=""
-      id="trigger-label"
+      id="trigger-button"
       placeholder=""
       role="combobox"
     >
@@ -103,8 +105,23 @@
     >
     </div>
   </div>
-  <slot name="slug">
+  <slot
+    class="cds--slug--revert"
+    name="slug"
+  >
   </slot>
+  <div
+    aria-labelledby="dropdown-label"
+    class="cds--list-box__menu"
+    hidden=""
+    id="menu-body"
+    part="menu-body"
+    role="listbox"
+    tabindex="-1"
+  >
+    <slot>
+    </slot>
+  </div>
 </div>
 <div
   class="cds--form__helper-text cds--form__helper-text--disabled"
@@ -113,13 +130,6 @@
   <slot name="helper-text">
   </slot>
 </div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="cds--assistive-text"
-  role="status"
->
-</div>
 
 ```
 
diff --git a/packages/carbon-web-components/tests/snapshots/cds-dropdown.md b/packages/carbon-web-components/tests/snapshots/cds-dropdown.md
@@ -7,25 +7,25 @@
 ```
 <label
   class="cds--label"
+  for="trigger-button"
   hidden=""
+  id="dropdown-label"
   part="title-text"
 >
   <slot name="title-text">
   </slot>
 </label>
-<div
-  class="cds--dropdown cds--list-box cds--list-box--md"
-  role="listbox"
->
+<div class="cds--dropdown cds--list-box cds--list-box--md">
   <div
+    aria-activedescendant=""
     aria-controls="menu-body"
     aria-expanded="false"
     aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
+    aria-labelledby="dropdown-label"
     class="cds--list-box__field"
+    id="trigger-button"
     part="trigger-button"
-    role="button"
+    role="combobox"
     tabindex="0"
   >
     <span
@@ -39,8 +39,23 @@
     >
     </div>
   </div>
-  <slot name="slug">
+  <slot
+    class="cds--slug--revert"
+    name="slug"
+  >
   </slot>
+  <div
+    aria-labelledby="dropdown-label"
+    class="cds--list-box__menu"
+    hidden=""
+    id="menu-body"
+    part="menu-body"
+    role="listbox"
+    tabindex="-1"
+  >
+    <slot>
+    </slot>
+  </div>
 </div>
 <div
   class="cds--form__helper-text"
@@ -50,13 +65,6 @@
   <slot name="helper-text">
   </slot>
 </div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="cds--assistive-text"
-  role="status"
->
-</div>
 
 ```
 
@@ -65,25 +73,25 @@
 ```
 <label
   class="cds--label cds--label--disabled"
+  for="trigger-button"
   hidden=""
+  id="dropdown-label"
   part="title-text"
 >
   <slot name="title-text">
   </slot>
 </label>
-<div
-  class="cds--dropdown cds--list-box cds--list-box--disabled cds--list-box--expanded cds--list-box--md"
-  role="listbox"
->
+<div class="cds--dropdown cds--list-box cds--list-box--disabled cds--list-box--expanded cds--list-box--md">
   <div
+    aria-activedescendant="cds-dropdown-item-6"
     aria-controls="menu-body"
     aria-expanded="true"
     aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
+    aria-labelledby="dropdown-label"
     class="cds--list-box__field"
+    id="trigger-button"
     part="trigger-button"
-    role="button"
+    role="combobox"
     tabindex="0"
   >
     <span
@@ -97,10 +105,13 @@
     >
     </div>
   </div>
-  <slot name="slug">
+  <slot
+    class="cds--slug--revert"
+    name="slug"
+  >
   </slot>
   <div
-    aria-label=""
+    aria-labelledby="dropdown-label"
     class="cds--list-box__menu"
     id="menu-body"
     part="menu-body"
@@ -119,13 +130,6 @@
     helper-text-foo
   </slot>
 </div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="cds--assistive-text"
-  role="status"
->
-</div>
 
 ```