refactor(focusring): Simplify focus ring to just use host element

PiperOrigin-RevId: 500837060
material-components · Jan 10, 2023 · f3383cd · f3383cd
1 parent a539286
commit f3383cd
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 25 deletions.
diff --git a/focus/lib/_focus-ring.scss b/focus/lib/_focus-ring.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use 'sass:map';
 @use '../../sass/theme';
 @use '../../sass/shape';
@@ -32,13 +29,10 @@ $_custom-property-prefix: 'focus-ring';
       --_#{$token}: #{$value};
     }
 
-    pointer-events: none;
-  }
-
-  .md3-focus-ring {
     display: none;
     position: absolute;
     box-sizing: border-box;
+    pointer-events: none;
     border: var(--_width) solid var(--_color);
     border-start-start-radius: var(--_shape-start-start);
     border-start-end-radius: var(--_shape-start-end);
@@ -49,12 +43,11 @@ $_custom-property-prefix: 'focus-ring';
     // and touch target.
     $vertical-inset: calc(-1 * (var(--_offset-vertical) + var(--_width)));
     $horizontal-inset: calc(-1 * (var(--_offset-horizontal) + var(--_width)));
-
     inset: $vertical-inset $horizontal-inset;
   }
 
-  .md3-focus-ring--visible {
-    display: block;
+  :host([visible]) {
+    display: flex;
   }
 }
 

diff --git a/focus/lib/focus-ring.ts b/focus/lib/focus-ring.ts
@@ -4,9 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {html, LitElement, TemplateResult} from 'lit';
+import {LitElement} from 'lit';
 import {property} from 'lit/decorators.js';
-import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 
 /**
  * @summary An accessible, themable ring designed to be shown on
@@ -25,16 +24,5 @@ export class FocusRing extends LitElement {
   /**
    * Makes the focus ring visible.
    */
-  @property({type: Boolean}) visible = false;
-
-  protected override render(): TemplateResult {
-    return html`<span class="md3-focus-ring ${
-        classMap(this.getRenderClasses())}"></span>`;
-  }
-
-  protected getRenderClasses(): ClassInfo {
-    return {
-      'md3-focus-ring--visible': this.visible,
-    };
-  }
+  @property({type: Boolean, reflect: true}) visible = false;
 }
diff --git a/radio/lib/_radio.scss b/radio/lib/_radio.scss
@@ -72,7 +72,6 @@ $_md-sys-motion: tokens.md-sys-motion-values();
 
   input,
   md-ripple,
-  md-focus-ring,
   .icon {
     inset: 0;
     margin: auto;