feat(all): expose focus-ring parts

PiperOrigin-RevId: 548873009
material-components · Jul 18, 2023 · 243e231 · 243e231
1 parent fd28dd1
commit 243e231
Show file tree

Hide file tree

Showing 15 changed files with 16 additions and 15 deletions.
diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -159,7 +159,7 @@ export abstract class Button extends LitElement {
   }
 
   private renderFocusRing() {
-    return html`<md-focus-ring></md-focus-ring>`;
+    return html`<md-focus-ring part="focus-ring"></md-focus-ring>`;
   }
 
   private renderLabel() {

diff --git a/checkbox/lib/checkbox.ts b/checkbox/lib/checkbox.ts
@@ -143,7 +143,7 @@ export class Checkbox extends LitElement {
       <div class="container ${containerClasses}">
         <div class="outline"></div>
         <div class="background"></div>
-        <md-focus-ring for="input"></md-focus-ring>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
         <svg class="icon" viewBox="0 0 18 18">
           <rect class="mark short" />

diff --git a/chips/lib/chip.ts b/chips/lib/chip.ts
@@ -54,7 +54,7 @@ export abstract class Chip extends LitElement {
       <div class="container ${classMap(this.getContainerClasses())}"
           role=${this.containerRole || nothing}>
         ${this.renderOutline()}
-        <md-focus-ring for=${this.primaryId}></md-focus-ring>
+        <md-focus-ring part="focus-ring" for=${this.primaryId}></md-focus-ring>
         <md-ripple for=${this.primaryId}
           ?disabled=${this.rippleDisabled}></md-ripple>
         ${this.renderActions()}

diff --git a/chips/lib/trailing-icons.ts b/chips/lib/trailing-icons.ts
@@ -27,7 +27,7 @@ export function renderRemoveButton(
       tabindex=${!tabbable ? -1 : nothing}
       @click=${handleRemoveClick}
     >
-      <md-focus-ring></md-focus-ring>
+      <md-focus-ring part="trailing-focus-ring"></md-focus-ring>
       <md-ripple></md-ripple>
       <svg class="trailing icon" viewBox="0 96 960 960">
         <path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" />

diff --git a/fab/lib/shared.ts b/fab/lib/shared.ts
@@ -74,7 +74,7 @@ export abstract class SharedFab extends LitElement {
         aria-label=${ariaLabel || nothing}
       >
         <md-elevation></md-elevation>
-        <md-focus-ring></md-focus-ring>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
         <md-ripple class="ripple"></md-ripple>
         ${this.renderTouchTarget()}
         ${this.renderIcon()}

diff --git a/iconbutton/lib/icon-button.ts b/iconbutton/lib/icon-button.ts
@@ -139,7 +139,7 @@ export class IconButton extends LitElement {
   }
 
   private renderFocusRing() {
-    return html`<md-focus-ring for=${
+    return html`<md-focus-ring part="focus-ring" for=${
         this.href ? 'link' : 'button'}></md-focus-ring>`;
   }
 

diff --git a/labs/navigationtab/lib/navigation-tab.ts b/labs/navigationtab/lib/navigation-tab.ts
@@ -47,7 +47,7 @@ export class NavigationTab extends LitElement implements NavigationTabState {
         tabindex="${this.active ? 0 : -1}"
         @click="${this.handleClick}"
       >
-        <md-focus-ring inward></md-focus-ring>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
         <md-ripple ?disabled="${
         this.disabled}" class="md3-navigation-tab__ripple"></md-ripple>
         <span aria-hidden="true" class="md3-navigation-tab__icon-content"

diff --git a/labs/segmentedbutton/lib/segmented-button.ts b/labs/segmentedbutton/lib/segmented-button.ts
@@ -78,7 +78,7 @@ export class SegmentedButton extends LitElement {
         @click="${this.handleClick}"
         class="md3-segmented-button ${classMap(this.getRenderClasses())}"
       >
-        <md-focus-ring class="md3-segmented-button__focus-ring"></md-focus-ring>
+        <md-focus-ring class="md3-segmented-button__focus-ring" part="focus-ring"></md-focus-ring>
         <md-ripple ?disabled="${
         this.disabled}" class="md3-segmented-button__ripple"></md-ripple>
         ${this.renderOutline()}

diff --git a/list/lib/listitem/list-item.ts b/list/lib/listitem/list-item.ts
@@ -161,7 +161,7 @@ export class ListItemEl extends LitElement implements ListItem {
    * Handles rendering of the focus ring.
    */
   protected renderFocusRing(): TemplateResult|typeof nothing {
-    return html`<md-focus-ring class="focus-ring" for="item" inward></md-focus-ring>`;
+    return html`<md-focus-ring class="focus-ring" part="focus-ring" for="item" inward></md-focus-ring>`;
   }
 
   /**

diff --git a/menu/lib/menu.ts b/menu/lib/menu.ts
@@ -298,7 +298,7 @@ export abstract class Menu extends LitElement {
    * Renders the focus ring component.
    */
   private renderFocusRing() {
-    return html`<md-focus-ring for="list"></md-focus-ring>`;
+    return html`<md-focus-ring part="focus-ring" for="list"></md-focus-ring>`;
   }
 
   private getSurfaceClasses() {

diff --git a/radio/lib/radio.ts b/radio/lib/radio.ts
@@ -35,7 +35,7 @@ export class Radio extends LitElement {
   /** @nocollapse */
   static formAssociated = true;
 
-  // Unique maskId is required because of a Safari bug that fail to persist 
+  // Unique maskId is required because of a Safari bug that fail to persist
   // reference to the mask. This should be removed once the bug is fixed.
   private readonly maskId = `cutout${++maskId}`;
 
@@ -125,7 +125,7 @@ export class Radio extends LitElement {
     return html`
       <div class=${classMap(classes)}>
         <md-ripple for="input" ?disabled=${this.disabled}></md-ripple>
-        <md-focus-ring for="input"></md-focus-ring>
+        <md-focus-ring part="focus-ring" for="input"></md-focus-ring>
         <svg class="icon" viewBox="0 0 20 20">
           <mask id="${this.maskId}">
             <rect width="100%" height="100%" fill="white" />

diff --git a/select/lib/select.ts b/select/lib/select.ts
@@ -256,6 +256,7 @@ export abstract class Select extends LitElement {
           type="listbox"
           stay-open-on-focusout
           part="menu"
+          exportparts="focus-ring: menu-focus-ring"
           .anchor=${this.field}
           .open=${this.open}
           .quick=${this.quick}

diff --git a/slider/lib/slider.ts b/slider/lib/slider.ts
@@ -383,7 +383,7 @@ export class Slider extends LitElement {
     })}">
       <div class="handleNub"><md-elevation></md-elevation></div>
       ${when(this.labeled, () => this.renderLabel(label))}
-      <md-focus-ring for=${name}></md-focus-ring>
+      <md-focus-ring part="focus-ring" for=${name}></md-focus-ring>
       <md-ripple for=${name} class=${name} ?disabled=${
         this.disabled}></md-ripple>
     </div>`;

diff --git a/switch/lib/switch.ts b/switch/lib/switch.ts
@@ -128,7 +128,7 @@ export class Switch extends LitElement {
         ?disabled=${this.disabled}
         @click=${this.handleClick}
       >
-        <md-focus-ring></md-focus-ring>
+        <md-focus-ring part="focus-ring"></md-focus-ring>
         <span class="track">
           ${this.renderHandle()}
         </span>

diff --git a/tabs/lib/tab.ts b/tabs/lib/tab.ts
@@ -111,7 +111,7 @@ export class Tab extends LitElement {
         ?disabled=${this.disabled}
         aria-label=${ariaLabel || nothing}
       >
-        <md-focus-ring inward></md-focus-ring>
+        <md-focus-ring part="focus-ring" inward></md-focus-ring>
         <md-elevation></md-elevation>
         <md-ripple ?disabled=${this.disabled}></md-ripple>
         <span class="touch"></span>