feat(combobox): adding shadow parts

packages/carbon-web-components/src/components/combo-box/combo-box.ts

@@ -26,6 +26,8 @@ export { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';
  * Combo box.
  *
  * @element cds-combo-box
+ * @csspart text-input - The text input. Usage `cds-combo-box::part(text-input)`
+ * @csspart list-box - The list box. Usage `cds-combo-box::part(list-box)`
  * @fires cds-combo-box-beingselected
  *   The custom event fired before a combo box item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
@@ -239,6 +241,7 @@ class CDSComboBox extends CDSDropdown {
 
     return html`
       <input
+        part="text-input"
         id="trigger-button"
         class="${inputClasses}"
         ?disabled=${disabled}
@@ -271,6 +274,7 @@ class CDSComboBox extends CDSDropdown {
       ? undefined
       : html`
           <div
+            part="list-box"
             id="selection-button"
             role="button"
             class="${prefix}--list-box__selection"

packages/carbon-web-components/tests/snapshots/cds-checkbox.md

@@ -19,14 +19,20 @@
   part="label"
   title=""
 >
-  <span class="cds--checkbox-label-text">
+  <span
+    class="cds--checkbox-label-text"
+    part="label-text"
+  >
     <slot>
     </slot>
   </span>
 </label>
 <slot name="slug">
 </slot>
-<div class="cds--checkbox__validation-msg">
+<div
+  class="cds--checkbox__validation-msg"
+  part="validation-msg"
+>
 </div>
 
 ```
@@ -49,14 +55,20 @@
   part="label"
   title=""
 >
-  <span class="cds--checkbox-label-text">
+  <span
+    class="cds--checkbox-label-text"
+    part="label-text"
+  >
     <slot>
     </slot>
   </span>
 </label>
 <slot name="slug">
 </slot>
-<div class="cds--checkbox__validation-msg">
+<div
+  class="cds--checkbox__validation-msg"
+  part="validation-msg"
+>
 </div>
 
 ```

packages/carbon-web-components/tests/snapshots/cds-code-snippet.md

@@ -10,23 +10,28 @@
   aria-multiline=""
   aria-readonly="true"
   class="cds--snippet-container"
+  part="container container--single"
   role="textbox"
   style=""
   tabindex="0"
 >
-  <pre>
-    <code>
+  <pre part="pre pre--single">
+    <code part="content content--single">
       <slot>
       </slot>
     </code>
   </pre>
 </div>
-<div class="cds--snippet__overflow-indicator--right">
+<div
+  class="cds--snippet__overflow-indicator--right"
+  part="oveflow-indicator-right"
+>
 </div>
 <cds-copy-button
   button-class-name=""
   feedback="Copied!"
   feedback-timeout="2000"
+  part="copy-button"
 >
   Copy to Clipboard
 </cds-copy-button>
@@ -41,12 +46,13 @@
   aria-multiline="true"
   aria-readonly="true"
   class="cds--snippet-container"
+  part="container container--multi"
   role="textbox"
   style="max-height:240px;min-height:48px;"
   tabindex="0"
 >
-  <pre>
-    <code>
+  <pre part="pre pre--multi">
+    <code part="content content--multi">
       <slot>
       </slot>
     </code>
@@ -56,6 +62,7 @@
   button-class-name=""
   feedback="Copied!"
   feedback-timeout="2000"
+  part="copy-button"
 >
   Copy to Clipboard
 </cds-copy-button>
@@ -65,12 +72,21 @@
 ####   `Should render with minimum attributes for inline mode`
 
 ```
-<cds-copy button-class-name="cds--snippet cds--snippet--inline">
-  <code slot="icon">
+<cds-copy
+  button-class-name="cds--snippet cds--snippet--inline"
+  part="inline-copy"
+>
+  <code
+    part="content content--inline"
+    slot="icon"
+  >
     <slot>
     </slot>
   </code>
-  <span slot="tooltip-content">
+  <span
+    part="tooltip tooltip--inline"
+    slot="tooltip-content"
+  >
     Copy to Clipboard
   </span>
 </cds-copy>
@@ -85,23 +101,28 @@
   aria-multiline=""
   aria-readonly="true"
   class="cds--snippet-container"
+  part="container container--single"
   role="textbox"
   style=""
   tabindex="0"
 >
-  <pre>
-    <code>
+  <pre part="pre pre--single">
+    <code part="content content--single">
       <slot>
       </slot>
     </code>
   </pre>
 </div>
-<div class="cds--snippet__overflow-indicator--right">
+<div
+  class="cds--snippet__overflow-indicator--right"
+  part="oveflow-indicator-right"
+>
 </div>
 <cds-copy-button
   button-class-name=""
   feedback="Copied!"
   feedback-timeout="2000"
+  part="copy-button"
 >
   Copy to Clipboard
 </cds-copy-button>
@@ -116,12 +137,13 @@
   aria-multiline="true"
   aria-readonly="true"
   class="cds--snippet-container"
+  part="container container--multi"
   role="textbox"
   style="max-height:240px;min-height:48px;"
   tabindex="0"
 >
-  <pre>
-    <code>
+  <pre part="pre pre--multi">
+    <code part="content content--multi">
       <slot>
       </slot>
     </code>
@@ -131,6 +153,7 @@
   button-class-name=""
   feedback="Copied!"
   feedback-timeout="2000"
+  part="copy-button"
 >
   Copy to Clipboard
 </cds-copy-button>
@@ -140,12 +163,21 @@
 ####   `Should render with various attributes for inline mode`
 
 ```
-<cds-copy button-class-name="cds--snippet cds--snippet--inline">
-  <code slot="icon">
+<cds-copy
+  button-class-name="cds--snippet cds--snippet--inline"
+  part="inline-copy"
+>
+  <code
+    part="content content--inline"
+    slot="icon"
+  >
     <slot>
     </slot>
   </code>
-  <span slot="tooltip-content">
+  <span
+    part="tooltip tooltip--inline"
+    slot="tooltip-content"
+  >
     Copy to Clipboard
   </span>
 </cds-copy>

packages/carbon-web-components/tests/snapshots/cds-combo-box.md

@@ -28,6 +28,7 @@
       aria-haspopup="listbox"
       class="cds--text-input cds--text-input--empty"
       id="trigger-button"
+      part="text-input"
       placeholder=""
       role="combobox"
     >
@@ -96,6 +97,7 @@
       class="cds--text-input"
       disabled=""
       id="trigger-button"
+      part="text-input"
       placeholder=""
       role="combobox"
     >