main - 103ac7c refactor(multiple): switch button selectors

Author: crisbeto

docs-content/api-docs/material-button-testing.html

@@ -57,8 +57,9 @@ <h4 id="MatButtonHarness" class="docs-header-link docs-api-h4 docs-api-class-nam
 
 <tr class="docs-api-properties-row">
   <td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
-      <code>static&nbsp;hostSelector: `[mat-button], [mat-raised-button], [mat-flat-button],
-                         [mat-icon-button], [mat-stroked-button], [mat-fab], [mat-mini-fab]`</code>
+      <code>static&nbsp;hostSelector: `[matButton], [mat-button], [matIconButton], [matFab], [matMiniFab],
+    [mat-raised-button], [mat-flat-button], [mat-icon-button], [mat-stroked-button], [mat-fab],
+    [mat-mini-fab]`</code>
     </p>
   </td>
   <td class="docs-api-property-description"></td>
@@ -386,6 +387,39 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
 
 
 
+<table class="docs-api-method-table">
+  <thead>
+    <tr class="docs-api-method-name-row">
+      <th colspan="2" class="docs-api-method-name-cell"><div class="docs-api-modifier-method-marker">
+          async
+        </div>getAppearance
+      </th>
+    </tr>
+  </thead><tr class="docs-api-method-description-row">
+    <td colspan="2" class="docs-api-method-description-cell">
+      <p>Gets the appearance of the button.</p>
+
+    </td>
+  </tr><thead>
+    <tr class="docs-api-method-returns-header-row">
+      <th colspan="2" class="docs-api-method-returns-header-cell">Returns</th>
+    </tr>
+  </thead>
+  <tr>
+    <td class="docs-api-method-returns-type-cell">
+      <code class="docs-api-method-returns-type">Promise&lt;ButtonAppearance | null&gt;</code>
+    </td>
+    <td class="docs-api-method-returns-description-cell">
+      <p class="docs-api-method-returns-description">
+        
+      </p>
+    </td>
+  </tr></table>
+
+
+  
+    
+
 <table class="docs-api-method-table">
   <thead>
     <tr class="docs-api-method-name-row">
@@ -767,6 +801,7 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
 <li><code>selector</code> finds a button whose host element matches the given selector.</li>
 <li><code>text</code> finds a button with specific text content.</li>
 <li><code>variant</code> finds buttons matching a specific variant.</li>
+<li><code>appearance</code> finds buttons matching a specific appearance.</li>
 </ul>
 
       </p>
@@ -814,6 +849,19 @@ <h4 id="ButtonHarnessFilters" class="docs-header-link docs-api-h4 docs-api-inter
 
 
 
+<tr class="docs-api-properties-row">
+  <td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
+      <code>appearance: ButtonAppearance</code>
+    </p>
+  </td>
+  <td class="docs-api-property-description"><p>Only find instances with a specific appearance.</p>
+</td>
+</tr>
+
+
+    
+      
+
 <tr class="docs-api-properties-row">
   <td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
       <code>disabled: boolean</code>
@@ -868,10 +916,24 @@ <h3 id="material-button-testing-type_aliases" class="docs-header-link docs-api-h
 <h4 id="ButtonVariant" class="docs-header-link docs-api-h4 docs-api-type-alias-name">
   <span header-link="ButtonVariant"></span>
   <code>ButtonVariant</code>
+</h4><p class="docs-api-type-alias-description"><p>Possible button variants.</p>
+</p><div class="docs-markdown">
+<pre class="docs-markdown-pre">
+<code class="docs-markdown-code"><span class="hljs-keyword">type</span> ButtonVariant = <span class="hljs-string">&#x27;basic&#x27;</span> | <span class="hljs-string">&#x27;icon&#x27;</span> | <span class="hljs-string">&#x27;fab&#x27;</span> | <span class="hljs-string">&#x27;mini-fab&#x27;</span>;</code>
+</pre>
+</div>
+
+
+    
+      
+
+<h4 id="ButtonAppearance" class="docs-header-link docs-api-h4 docs-api-type-alias-name">
+  <span header-link="ButtonAppearance"></span>
+  <code>ButtonAppearance</code>
 </h4><p class="docs-api-type-alias-description"><p>Possible button appearances.</p>
 </p><div class="docs-markdown">
 <pre class="docs-markdown-pre">
-<code class="docs-markdown-code"><span class="hljs-keyword">type</span> ButtonVariant = <span class="hljs-string">&#x27;basic&#x27;</span> | <span class="hljs-string">&#x27;raised&#x27;</span> | <span class="hljs-string">&#x27;flat&#x27;</span> | <span class="hljs-string">&#x27;icon&#x27;</span> | <span class="hljs-string">&#x27;stroked&#x27;</span> | <span class="hljs-string">&#x27;fab&#x27;</span> | <span class="hljs-string">&#x27;mini-fab&#x27;</span>;</code>
+<code class="docs-markdown-code"><span class="hljs-keyword">type</span> ButtonAppearance = <span class="hljs-string">&#x27;text&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span> | <span class="hljs-string">&#x27;elevated&#x27;</span> | <span class="hljs-string">&#x27;outlined&#x27;</span>;</code>
 </pre>
 </div>
 

docs-content/api-docs/material-button.html

@@ -39,15 +39,15 @@ <h4 id="MatButton" class="docs-header-link docs-api-h4 docs-api-class-name">
   <code>MatButton</code>
 
 </h4><p class="docs-api-class-description"><p>Material Design button component. Users interact with a button to perform an action.
-See <a href="https://material.io/components/buttons">https://material.io/components/buttons</a></p>
-<p>The <code>MatButton</code> class applies to native button elements and captures the appearances for
-&quot;text button&quot;, &quot;outlined button&quot;, and &quot;contained button&quot; per the Material Design
-specification. <code>MatButton</code> additionally captures an additional &quot;flat&quot; appearance, which matches
-&quot;contained&quot; but without elevation.</p>
+See <a href="https://m3.material.io/components/buttons/overview">https://m3.material.io/components/buttons/overview</a></p>
 </p><p class="docs-api-directive-selectors">
   <span class="docs-api-class-selector-label">Selector:</span>
 
-    <span class="docs-api-class-selector-name">    button[mat-button]</span>
+    <span class="docs-api-class-selector-name">    button[matButton]</span>
+  
+    <span class="docs-api-class-selector-name">a[matButton]</span>
+  
+    <span class="docs-api-class-selector-name">button[mat-button]</span>
 
     <span class="docs-api-class-selector-name">button[mat-raised-button]</span>
 
@@ -73,6 +73,20 @@ <h4 id="MatButton" class="docs-header-link docs-api-h4 docs-api-class-name">
 
 
 
+<tr class="docs-api-properties-row">
+  <td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">&#39;matButton&#39;</span>)
+        </div><p class="docs-api-property-name">
+      <code>appearance: MatButtonAppearance | null</code>
+    </p>
+  </td>
+  <td class="docs-api-property-description"><p>Appearance of the button.</p>
+</td>
+</tr>
+
+
+    
+      
+
 <tr class="docs-api-properties-row">
   <td class="docs-api-properties-name-cell"><div class="docs-api-input-marker">@Input(<span class="docs-api-input-alias">{ transform: booleanAttribute, alias: &#39;aria-disabled&#39; }</span>)
         </div><p class="docs-api-property-name">
@@ -203,6 +217,41 @@ <h5 class="docs-api-h5 docs-api-method-header">Methods</h5>
 
 
 
+    
+
+<table class="docs-api-method-table">
+  <thead>
+    <tr class="docs-api-method-name-row">
+      <th colspan="2" class="docs-api-method-name-cell">setAppearance
+      </th>
+    </tr>
+  </thead><tr class="docs-api-method-description-row">
+    <td colspan="2" class="docs-api-method-description-cell">
+      <p>Programmatically sets the appearance of the button.</p>
+
+    </td>
+  </tr><thead>
+    <tr class="docs-api-method-parameters-header-row">
+      <th colspan="2" class="docs-api-method-parameters-header-cell">Parameters</th>
+    </tr>
+  </thead>
+  
+  <tr class="docs-api-method-parameter-row">
+    <td class="docs-api-method-parameter-cell">
+      <p class="docs-api-method-parameter-name">
+        appearance</p>
+      <code class="docs-api-method-parameter-type">MatButtonAppearance</code>
+    </td>
+    <td class="docs-api-method-parameter-description-cell">
+      <p class="docs-api-method-parameter-description">
+        
+      </p>
+    </td>
+  </tr>
+  </table>
+
+
+  
 
 
 
@@ -215,7 +264,7 @@ <h4 id="MatFabButton" class="docs-header-link docs-api-h4 docs-api-class-name">
 
 </h4><p class="docs-api-class-description"><p>Material Design floating action button (FAB) component. These buttons represent the primary
 or most common action for users to interact with.
-See <a href="https://material.io/components/buttons-floating-action-button/">https://material.io/components/buttons-floating-action-button/</a></p>
+See <a href="https://m3.material.io/components/floating-action-button/overview">https://m3.material.io/components/floating-action-button/overview</a></p>
 <p>The <code>MatFabButton</code> class has two appearances: normal and extended.</p>
 </p><p class="docs-api-directive-selectors">
   <span class="docs-api-class-selector-label">Selector:</span>
@@ -224,6 +273,10 @@ <h4 id="MatFabButton" class="docs-header-link docs-api-h4 docs-api-class-name">
 
     <span class="docs-api-class-selector-name">a[mat-fab]</span>
 
+    <span class="docs-api-class-selector-name">button[matFab]</span>
+  
+    <span class="docs-api-class-selector-name">a[matFab]</span>
+  
 </p><span class="docs-api-class-export-label">Exported as:</span>
 <span class="docs-api-class-export-name">matButton, matAnchor</span><h5 class="docs-api-h5 docs-api-method-header">Properties</h5>
   <table class="docs-api-properties-table">
@@ -389,14 +442,18 @@ <h4 id="MatMiniFabButton" class="docs-header-link docs-api-h4 docs-api-class-nam
 
 </h4><p class="docs-api-class-description"><p>Material Design mini floating action button (FAB) component. These buttons represent the primary
 or most common action for users to interact with.
-See <a href="https://material.io/components/buttons-floating-action-button/">https://material.io/components/buttons-floating-action-button/</a></p>
+See <a href="https://m3.material.io/components/floating-action-button/overview">https://m3.material.io/components/floating-action-button/overview</a></p>
 </p><p class="docs-api-directive-selectors">
   <span class="docs-api-class-selector-label">Selector:</span>
 
     <span class="docs-api-class-selector-name">button[mat-mini-fab]</span>
 
     <span class="docs-api-class-selector-name">a[mat-mini-fab]</span>
 
+    <span class="docs-api-class-selector-name">button[matMiniFab]</span>
+  
+    <span class="docs-api-class-selector-name">a[matMiniFab]</span>
+  
 </p><span class="docs-api-class-export-label">Exported as:</span>
 <span class="docs-api-class-export-name">matButton, matAnchor</span><h5 class="docs-api-h5 docs-api-method-header">Properties</h5>
   <table class="docs-api-properties-table">
@@ -557,6 +614,10 @@ <h4 id="MatIconButton" class="docs-header-link docs-api-h4 docs-api-class-name">
 
     <span class="docs-api-class-selector-name">a[mat-icon-button]</span>
 
+    <span class="docs-api-class-selector-name">button[matIconButton]</span>
+  
+    <span class="docs-api-class-selector-name">a[matIconButton]</span>
+  
 </p><span class="docs-api-class-export-label">Exported as:</span>
 <span class="docs-api-class-export-name">matButton, matAnchor</span><h5 class="docs-api-h5 docs-api-method-header">Properties</h5>
   <table class="docs-api-properties-table">
@@ -733,6 +794,19 @@ <h4 id="MatButtonConfig" class="docs-header-link docs-api-h4 docs-api-interface-
 
 
 
+<tr class="docs-api-properties-row">
+  <td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
+      <code>defaultAppearance: MatButtonAppearance</code>
+    </p>
+  </td>
+  <td class="docs-api-property-description"><p>Default appearance for plain buttons (not icon buttons or FABs).</p>
+</td>
+</tr>
+
+
+    
+      
+
 <tr class="docs-api-properties-row">
   <td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
       <code>disabledInteractive: boolean</code>
@@ -795,6 +869,21 @@ <h3 id="material-button-type_aliases" class="docs-header-link docs-api-h3">
 
 
 
+<h4 id="MatButtonAppearance" class="docs-header-link docs-api-h4 docs-api-type-alias-name">
+  <span header-link="MatButtonAppearance"></span>
+  <code>MatButtonAppearance</code>
+</h4><p class="docs-api-type-alias-description"><p>Possible appearances for a <code>MatButton</code>.
+See <a href="https://m3.material.io/components/buttons/overview">https://m3.material.io/components/buttons/overview</a></p>
+</p><div class="docs-markdown">
+<pre class="docs-markdown-pre">
+<code class="docs-markdown-code"><span class="hljs-keyword">type</span> MatButtonAppearance = <span class="hljs-string">&#x27;text&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span> | <span class="hljs-string">&#x27;elevated&#x27;</span> | <span class="hljs-string">&#x27;outlined&#x27;</span>;</code>
+</pre>
+</div>
+
+
+    
+      
+
 <h4 id="MatAnchor" class="docs-header-link docs-api-h4 docs-api-type-alias-name">
   <span header-link="MatAnchor"></span>
   <code>MatAnchor</code>

docs-content/examples-highlighted/cdk/text-field/text-field-autofill-directive/text-field-autofill-directive-example-html.html

@@ -13,5 +13,5 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-hint</span>&gt;</span>Autofilled!<span class="hljs-tag">&lt;/<span class="hljs-name">mat-hint</span>&gt;</span>
     }
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-raised-button</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matButton</span>=<span class="hljs-string">&quot;elevated&quot;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>

docs-content/examples-highlighted/cdk/text-field/text-field-autofill-monitor/text-field-autofill-monitor-example-html.html

@@ -13,5 +13,5 @@
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-hint</span>&gt;</span>Autofilled!<span class="hljs-tag">&lt;/<span class="hljs-name">mat-hint</span>&gt;</span>
     }
   <span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-raised-button</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matButton</span>=<span class="hljs-string">&quot;elevated&quot;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span>

docs-content/examples-highlighted/cdk/tree/cdk-tree-complex/cdk-tree-complex-example-html.html

@@ -20,7 +20,7 @@
 
       @if (!node.areChildrenLoading() && node.isExpandable()) {
         <span class="hljs-tag">&lt;<span class="hljs-name">button</span>
-            <span class="hljs-attr">mat-icon-button</span>
+            <span class="hljs-attr">matIconButton</span>
             <span class="hljs-attr">cdkTreeNodeToggle</span>
             [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.raw.name&quot;</span>&gt;</span>
           <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>

docs-content/examples-highlighted/cdk/tree/cdk-tree-custom-key-manager/cdk-tree-custom-key-manager-example-html.html

@@ -5,7 +5,7 @@
                  [<span class="hljs-attr">isDisabled</span>]=<span class="hljs-string">&quot;!shouldRender(node)&quot;</span>
                  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
     <span class="hljs-comment">&lt;!-- use a disabled button to provide padding for tree leaf --&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
     {{node.name}}
   <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
@@ -17,7 +17,7 @@
                  (<span class="hljs-attr">expandedChange</span>)=<span class="hljs-string">&quot;node.isExpanded = $event&quot;</span>
                  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>
                  <span class="hljs-attr">tabindex</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">cdkTreeNodeToggle</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">cdkTreeNodeToggle</span>
             [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>
             [<span class="hljs-attr">style.visibility</span>]=<span class="hljs-string">&quot;node.expandable ? &#x27;visible&#x27; : &#x27;hidden&#x27;&quot;</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>

docs-content/examples-highlighted/cdk/tree/cdk-tree-flat-children-accessor/cdk-tree-flat-children-accessor-example-html.html

@@ -5,7 +5,7 @@
                  [<span class="hljs-attr">isDisabled</span>]=<span class="hljs-string">&quot;!shouldRender(node)&quot;</span>
                  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
     <span class="hljs-comment">&lt;!-- use a disabled button to provide padding for tree leaf --&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
     {{node.name}}
   <span class="hljs-tag">&lt;/<span class="hljs-name">cdk-tree-node</span>&gt;</span>
   <span class="hljs-comment">&lt;!-- This is the tree node template for expandable nodes --&gt;</span>
@@ -16,7 +16,7 @@
                  [<span class="hljs-attr">isDisabled</span>]=<span class="hljs-string">&quot;!shouldRender(node)&quot;</span>
                  [<span class="hljs-attr">isExpandable</span>]=<span class="hljs-string">&quot;true&quot;</span>
                  <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-tree-node&quot;</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-icon-button</span> <span class="hljs-attr">cdkTreeNodeToggle</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matIconButton</span> <span class="hljs-attr">cdkTreeNodeToggle</span> [<span class="hljs-attr">attr.aria-label</span>]=<span class="hljs-string">&quot;&#x27;Toggle &#x27; + node.name&quot;</span>&gt;</span>
       <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;mat-icon-rtl-mirror&quot;</span>&gt;</span>
         {{tree.isExpanded(node) ? &#x27;expand_more&#x27; : &#x27;chevron_right&#x27;}}
       <span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>