feat(ld-button): add parts

emdgroup-liquid · Oct 12, 2021 · 6d16834 · 6d16834
1 parent 60aa3c5
commit 6d16834
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 22 deletions.
diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -116,19 +116,26 @@ export class LdButton implements InnerFocusable {
 
     return (
       <Tag
-        ref={(el: HTMLAnchorElement | HTMLButtonElement) => (this.button = el)}
-        class={cl}
-        disabled={this.disabled}
-        aria-disabled={this.disabled ? 'true' : undefined}
         aria-busy={hasProgress ? 'true' : undefined}
+        aria-disabled={this.disabled ? 'true' : undefined}
         aria-live="polite"
+        class={cl}
+        disabled={this.disabled}
         href={this.href}
+        part="button"
+        ref={(el: HTMLAnchorElement | HTMLButtonElement) => (this.button = el)}
         rel={this.target === '_blank' ? 'noreferrer noopener' : undefined}
         target={this.target}
         {...cloneAttributes(this.el)}
       >
         <slot />
-        {hasProgress && <span class={clProgress} style={styleProgress}></span>}
+        {hasProgress && (
+          <span
+            class={clProgress}
+            part="progress-bar"
+            style={styleProgress}
+          ></span>
+        )}
       </Tag>
     )
   }

diff --git a/src/liquid/components/ld-button/readme.md b/src/liquid/components/ld-button/readme.md
@@ -496,6 +496,13 @@ Type: `Promise<void>`
 
 
 
+## Shadow Parts
+
+| Part             | Description |
+| ---------------- | ----------- |
+| `"progress-bar"` |             |
+
+
 ----------------------------------------------
 
 
diff --git a/src/liquid/components/ld-button/test/__snapshots__/ld-button.spec.ts.snap b/src/liquid/components/ld-button/test/__snapshots__/ld-button.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ld-button align text 1`] = `
 <ld-button align-text="right">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--align-text-right">
+    <button aria-live="polite" class="ld-button ld-button--align-text-right" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -14,7 +14,7 @@ exports[`ld-button align text 1`] = `
 exports[`ld-button as anchor 1`] = `
 <ld-button href="#" target="_blank">
   <mock:shadow-root>
-    <a aria-live="polite" class="ld-button" href="#" rel="noreferrer noopener" target="_blank">
+    <a aria-live="polite" class="ld-button" href="#" part="button" rel="noreferrer noopener" target="_blank">
       <slot></slot>
     </a>
   </mock:shadow-root>
@@ -25,9 +25,9 @@ exports[`ld-button as anchor 1`] = `
 exports[`ld-button as progress button 1`] = `
 <ld-button progress="0.75">
   <mock:shadow-root>
-    <button aria-busy="true" aria-live="polite" class="ld-button">
+    <button aria-busy="true" aria-live="polite" class="ld-button" part="button">
       <slot></slot>
-      <span class="ld-button__progress" style="--ld-button-progress: 0.75;"></span>
+      <span class="ld-button__progress" part="progress-bar" style="--ld-button-progress: 0.75;"></span>
     </button>
   </mock:shadow-root>
   Text
@@ -37,9 +37,9 @@ exports[`ld-button as progress button 1`] = `
 exports[`ld-button as progress button pending 1`] = `
 <ld-button progress="pending">
   <mock:shadow-root>
-    <button aria-busy="true" aria-live="polite" class="ld-button">
+    <button aria-busy="true" aria-live="polite" class="ld-button" part="button">
       <slot></slot>
-      <span class="ld-button__progress ld-button__progress--pending"></span>
+      <span class="ld-button__progress ld-button__progress--pending" part="progress-bar"></span>
     </button>
   </mock:shadow-root>
   Text
@@ -49,7 +49,7 @@ exports[`ld-button as progress button pending 1`] = `
 exports[`ld-button danger 1`] = `
 <ld-button mode="danger">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--danger">
+    <button aria-live="polite" class="ld-button ld-button--danger" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -60,7 +60,7 @@ exports[`ld-button danger 1`] = `
 exports[`ld-button disabled 1`] = `
 <ld-button disabled="">
   <mock:shadow-root>
-    <button aria-disabled="true" aria-live="polite" class="ld-button" disabled="">
+    <button aria-disabled="true" aria-live="polite" class="ld-button" disabled="" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -71,7 +71,7 @@ exports[`ld-button disabled 1`] = `
 exports[`ld-button ghost 1`] = `
 <ld-button mode="ghost">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--ghost">
+    <button aria-live="polite" class="ld-button ld-button--ghost" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -82,7 +82,7 @@ exports[`ld-button ghost 1`] = `
 exports[`ld-button highlight 1`] = `
 <ld-button mode="highlight">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--highlight">
+    <button aria-live="polite" class="ld-button ld-button--highlight" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -93,7 +93,7 @@ exports[`ld-button highlight 1`] = `
 exports[`ld-button justify content 1`] = `
 <ld-button justify-content="end">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--justify-end">
+    <button aria-live="polite" class="ld-button ld-button--justify-end" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -104,7 +104,7 @@ exports[`ld-button justify content 1`] = `
 exports[`ld-button on-brand-color 1`] = `
 <ld-button mode="on-brand-color">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--on-brand-color">
+    <button aria-live="polite" class="ld-button ld-button--on-brand-color" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -115,7 +115,7 @@ exports[`ld-button on-brand-color 1`] = `
 exports[`ld-button renders 1`] = `
 <ld-button>
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button">
+    <button aria-live="polite" class="ld-button" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -126,7 +126,7 @@ exports[`ld-button renders 1`] = `
 exports[`ld-button secondary 1`] = `
 <ld-button mode="secondary">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--secondary">
+    <button aria-live="polite" class="ld-button ld-button--secondary" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -137,7 +137,7 @@ exports[`ld-button secondary 1`] = `
 exports[`ld-button secondary-on-brand-color 1`] = `
 <ld-button mode="secondary-on-brand-color">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--secondary-on-brand-color">
+    <button aria-live="polite" class="ld-button ld-button--secondary-on-brand-color" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>
@@ -148,7 +148,7 @@ exports[`ld-button secondary-on-brand-color 1`] = `
 exports[`ld-button size 1`] = `
 <ld-button size="sm">
   <mock:shadow-root>
-    <button aria-live="polite" class="ld-button ld-button--sm">
+    <button aria-live="polite" class="ld-button ld-button--sm" part="button">
       <slot></slot>
     </button>
   </mock:shadow-root>

diff --git a/src/liquid/utils/e2e-tests.ts b/src/liquid/utils/e2e-tests.ts
@@ -25,7 +25,7 @@ export const getPageWithContent = async (
     content: `body {
   margin: 0;
 }
-*:focus, ld-button >>> *:focus {
+*:focus {
   outline: none;
 }
 .e2e-container {
@@ -36,6 +36,7 @@ export const getPageWithContent = async (
   })
   await page.addStyleTag({ path: './dist/css/liquid.global.css' })
   await page.addStyleTag({ path: './src/docs/utils/fontsBase64.css' })
+
   if (components) {
     await Promise.all(
       [components].flat().map(async (component: Component) => {