refactor(iconbutton): Refactor static styles into shared file, in pre…

…paration for adding icon button variants, which will share the `static-styles` mixin. PiperOrigin-RevId: 447538482
material-components · May 9, 2022 · 06b516b · 06b516b
1 parent 87e4f81
commit 06b516b
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 17 deletions.
diff --git a/components/icon-button/icon-button-toggle.ts b/components/icon-button/icon-button-toggle.ts
@@ -9,8 +9,9 @@ import '../icon/icon.js';
 import {html, TemplateResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {IconButtonToggle} from './lib/icon-button-toggle.js';
+import {styles} from './lib/standard-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,7 +21,7 @@ declare global {
 
 @customElement('md-icon-button-toggle')
 export class MdIconButtonToggle extends IconButtonToggle {
-  static override styles = [styles];
+  static override styles = [sharedStyles, styles];
 
   /** @soyTemplate */
   protected override renderIcon(icon: string): TemplateResult|string {

diff --git a/components/icon-button/icon-button.ts b/components/icon-button/icon-button.ts
@@ -10,7 +10,8 @@ import {html, TemplateResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
 import {IconButton} from './lib/icon-button.js';
-import {styles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
+import {styles} from './lib/standard-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,7 +21,7 @@ declare global {
 
 @customElement('md-icon-button')
 export class MdIconButton extends IconButton {
-  static override styles = [styles];
+  static override styles = [sharedStyles, styles];
 
   /** @soyTemplate */
   protected override renderIcon(icon: string): TemplateResult|string {

diff --git a/components/icon-button/lib/_icon-button.scss b/components/icon-button/lib/_icon-button.scss
@@ -1,5 +1,5 @@
 //
-// Copyright 2021 Google LLC
+// Copyright 2022 Google LLC
 // SPDX-License-Identifier: Apache-2.0
 //
 
@@ -27,7 +27,6 @@
     background-color: transparent;
     border: none;
     box-sizing: border-box;
-    color: inherit;
     cursor: pointer;
     display: flex;
     fill: currentColor;

diff --git a/...s/icon-button/lib/_icon-button-theme.scss → ...tton/lib/_standard-icon-button-theme.scss b/...s/icon-button/lib/_icon-button-theme.scss → ...tton/lib/_standard-icon-button-theme.scss
diff --git a/components/icon-button/lib/_standard-icon-button.scss b/components/icon-button/lib/_standard-icon-button.scss
@@ -0,0 +1,8 @@
+//
+// Copyright 2021 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin static-styles() {
+  // Intentionally blank for future-proofing.
+}
diff --git a/components/icon-button/lib/icon-button-styles.scss b/components/icon-button/lib/icon-button-styles.scss
@@ -3,14 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @use './icon-button';
-@use './icon-button-theme';
-
-@include icon-button.static-styles();
 
-.md3-icon-button {
-  @include icon-button-theme.theme-styles(icon-button-theme.$light-theme);
-}
+@include icon-button.static-styles;
diff --git a/components/icon-button/lib/standard-styles.scss b/components/icon-button/lib/standard-styles.scss
@@ -0,0 +1,18 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+@use './standard-icon-button';
+@use './standard-icon-button-theme';
+
+@include standard-icon-button.static-styles();
+
+.md3-icon-button {
+  @include standard-icon-button-theme.theme-styles(
+    standard-icon-button-theme.$light-theme
+  );
+}
diff --git a/components/icon-button/link-icon-button.ts b/components/icon-button/link-icon-button.ts
@@ -9,8 +9,9 @@ import '../icon/icon.js';
 import {html, TemplateResult} from 'lit';
 import {customElement} from 'lit/decorators.js';
 
-import {styles} from './lib/icon-button-styles.css.js';
+import {styles as sharedStyles} from './lib/icon-button-styles.css.js';
 import {LinkIconButton} from './lib/link-icon-button.js';
+import {styles} from './lib/standard-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -20,7 +21,7 @@ declare global {
 
 @customElement('md-link-icon-button')
 export class MdLinkIconButton extends LinkIconButton {
-  static override styles = [styles];
+  static override styles = [sharedStyles, styles];
 
   /** @soyTemplate */
   protected override renderIcon(icon: string): TemplateResult|string {