fix(button)!: normalize compound properties to have kebab-cased attri…

…butes BREAKING_CHANGE: The attributes `trailingicon`, and `hasicon` have been renamed to `trailing-icon` and `has-icon` respectively. PiperOrigin-RevId: 542447334
material-components · Jun 22, 2023 · 1a6fc29 · 1a6fc29
1 parent 34dfcb4
commit 1a6fc29
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/button/demo/stories.ts b/button/demo/stories.ts
@@ -37,7 +37,7 @@ const elevated: MaterialStoryInit<StoryKnobs> = {
         aria-label=${ariaLabelMsg('elevated', linkLabel)}
         href="https://google.com"
         target="_blank"
-        trailingicon
+        trailing-icon
       >
         ${linkLabel}
         <md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
@@ -63,7 +63,7 @@ const filled: MaterialStoryInit<StoryKnobs> = {
         aria-label=${ariaLabelMsg('filled', linkLabel)}
         href="https://google.com"
         target="_blank"
-        trailingicon
+        trailing-icon
       >
         ${linkLabel}
         <md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
@@ -89,7 +89,7 @@ const tonal: MaterialStoryInit<StoryKnobs> = {
         aria-label=${ariaLabelMsg('tonal', linkLabel)}
         href="https://google.com"
         target="_blank"
-        trailingicon
+        trailing-icon
       >
         ${linkLabel}
         <md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
@@ -115,7 +115,7 @@ const outlined: MaterialStoryInit<StoryKnobs> = {
         aria-label=${ariaLabelMsg('outlined', linkLabel)}
         href="https://google.com"
         target="_blank"
-        trailingicon
+        trailing-icon
       >
         ${linkLabel}
         <md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>
@@ -141,7 +141,7 @@ const text: MaterialStoryInit<StoryKnobs> = {
         aria-label=${ariaLabelMsg('text', linkLabel)}
         href="https://google.com"
         target="_blank"
-        trailingicon
+        trailing-icon
       >
         ${linkLabel}
         <md-icon slot="icon" aria-hidden="true">open_in_new</md-icon>

diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -55,12 +55,12 @@ export abstract class Button extends LitElement {
    *
    * _Note:_ Link buttons cannot have trailing icons.
    */
-  @property({type: Boolean, attribute: 'trailingicon'}) trailingIcon = false;
+  @property({type: Boolean, attribute: 'trailing-icon'}) trailingIcon = false;
 
   /**
    * Whether to display the icon or not.
    */
-  @property({type: Boolean}) hasIcon = false;
+  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;
 
   /**
    * Whether `preventDefault()` should be called on the underlying button.