feat(chips): add label slot

PiperOrigin-RevId: 648883417

chips/demo/stories.ts

@@ -50,28 +50,22 @@ const assist: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Assist chips">
-        <md-assist-chip
-          label=${label || 'Assist chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-assist-chip>
-        <md-assist-chip
-          label=${label || 'Assist chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
+        <md-assist-chip ?disabled=${disabled} ?elevated=${elevated}>
+          ${label || 'Assist chip'}
+        </md-assist-chip>
+        <md-assist-chip ?disabled=${disabled} ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Assist chip with icon'}
         </md-assist-chip>
         <md-assist-chip
-          label=${label || 'Assist link chip'}
           ?elevated=${elevated}
           href="https://google.com"
-          target="_blank"
-          >${GOOGLE_LOGO}</md-assist-chip
-        >
-        <md-assist-chip
-          label=${label || 'Disabled assist chip (focusable)'}
-          disabled
-          always-focusable
-          ?elevated=${elevated}></md-assist-chip>
+          target="_blank">
+          ${GOOGLE_LOGO} ${label || 'Assist link chip'}
+        </md-assist-chip>
+        <md-assist-chip disabled always-focusable ?elevated=${elevated}>
+          ${label || 'Disabled assist chip (focusable)'}
+        </md-assist-chip>
       </md-chip-set>
     `;
   },
@@ -84,27 +78,23 @@ const filters: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Filter chips">
-        <md-filter-chip
-          label=${label || 'Filter chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-filter-chip>
-        <md-filter-chip
-          label=${label || 'Filter chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
+        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated}>
+          ${label || 'Filter chip'}
+        </md-filter-chip>
+        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Filter chip with icon'}
+        </md-filter-chip>
+        <md-filter-chip ?disabled=${disabled} ?elevated=${elevated} removable>
+          ${label || 'Removable filter chip'}
         </md-filter-chip>
         <md-filter-chip
-          label=${label || 'Removable filter chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}
-          removable></md-filter-chip>
-        <md-filter-chip
-          label=${label || 'Disabled filter chip (focusable)'}
           disabled
           always-focusable
           ?elevated=${elevated}
-          removable></md-filter-chip>
+          removable>
+          ${label || 'Disabled filter chip (focusable)'}
+        </md-filter-chip>
       </md-chip-set>
     `;
   },
@@ -117,36 +107,28 @@ const inputs: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Input chips">
-        <md-input-chip
-          label=${label || 'Input chip'}
-          ?disabled=${disabled}></md-input-chip>
-        <md-input-chip
-          label=${label || 'Input chip with icon'}
-          ?disabled=${disabled}>
-          <md-icon slot="icon">local_laundry_service</md-icon>
+        <md-input-chip ?disabled=${disabled}>
+          ${label || 'Input chip'}
         </md-input-chip>
-        <md-input-chip
-          label=${label || 'Input chip with avatar'}
-          ?disabled=${disabled}
-          avatar>
+        <md-input-chip ?disabled=${disabled}>
+          <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Input chip with icon'}
+        </md-input-chip>
+        <md-input-chip ?disabled=${disabled} avatar>
           <img
             slot="icon"
             src="https://lh3.googleusercontent.com/a/default-user=s48" />
+          ${label || 'Input chip with avatar'}
         </md-input-chip>
-        <md-input-chip
-          label=${label || 'Input link chip'}
-          href="https://google.com"
-          target="_blank"
-          >${GOOGLE_LOGO}</md-input-chip
+        <md-input-chip href="https://google.com" target="_blank"
+          >${GOOGLE_LOGO} ${label || 'Input link chip'}</md-input-chip
         >
-        <md-input-chip
-          label=${label || 'Remove-only input chip'}
-          ?disabled=${disabled}
-          remove-only></md-input-chip>
-        <md-input-chip
-          label=${label || 'Disabled input chip (focusable)'}
-          disabled
-          always-focusable></md-input-chip>
+        <md-input-chip ?disabled=${disabled} remove-only>
+          ${label || 'Remove-only input chip'}
+        </md-input-chip>
+        <md-input-chip disabled always-focusable>
+          ${label || 'Disabled input chip (focusable)'}
+        </md-input-chip>
       </md-chip-set>
     `;
   },
@@ -159,28 +141,22 @@ const suggestions: MaterialStoryInit<StoryKnobs> = {
     const classes = {'scrolling': scrolling};
     return html`
       <md-chip-set class=${classMap(classes)} aria-label="Suggestion chips">
-        <md-suggestion-chip
-          label=${label || 'Suggestion chip'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}></md-suggestion-chip>
-        <md-suggestion-chip
-          label=${label || 'Suggestion chip with icon'}
-          ?disabled=${disabled}
-          ?elevated=${elevated}>
+        <md-suggestion-chip ?disabled=${disabled} ?elevated=${elevated}>
+          ${label || 'Suggestion chip'}
+        </md-suggestion-chip>
+        <md-suggestion-chip ?disabled=${disabled} ?elevated=${elevated}>
           <md-icon slot="icon">local_laundry_service</md-icon>
+          ${label || 'Suggestion chip with icon'}
         </md-suggestion-chip>
         <md-suggestion-chip
-          label=${label || 'Suggestion link chip'}
           ?elevated=${elevated}
           href="https://google.com"
           target="_blank"
-          >${GOOGLE_LOGO}</md-suggestion-chip
+          >${GOOGLE_LOGO} ${label || 'Suggestion link chip'}</md-suggestion-chip
         >
-        <md-suggestion-chip
-          label=${label || 'Disabled suggestion chip (focusable)'}
-          disabled
-          always-focusable
-          ?elevated=${elevated}></md-suggestion-chip>
+        <md-suggestion-chip disabled always-focusable ?elevated=${elevated}>
+          ${label || 'Disabled suggestion chip (focusable)'}
+        </md-suggestion-chip>
       </md-chip-set>
     `;
   },

chips/internal/chip.ts

@@ -45,8 +45,11 @@ export abstract class Chip extends chipBaseClass {
   @property({type: Boolean, attribute: 'always-focusable'})
   alwaysFocusable = false;
 
+  // TODO(b/350810013): remove the label property.
   /**
    * The label of the chip.
+   *
+   * @deprecated Set text as content of the chip instead.
    */
   @property() label = '';
 
@@ -124,12 +127,15 @@ export abstract class Chip extends chipBaseClass {
   protected abstract renderPrimaryAction(content: unknown): unknown;
 
   private renderPrimaryContent() {
+    // TODO(http://b/350810013): remove ternary when label property is removed.
     return html`
       <span class="leading icon" aria-hidden="true">
         ${this.renderLeadingIcon()}
       </span>
       <span class="label">
-        <span class="label-text">${this.label}</span>
+        <span class="label-text">
+          ${this.label ? this.label : html`<slot></slot>`}
+        </span>
       </span>
       <span class="touch"></span>
     `;

chips/internal/multi-action-chip.ts

@@ -22,6 +22,7 @@ export abstract class MultiActionChip extends Chip {
     }
 
     const {ariaLabel} = this as ARIAMixinStrict;
+    // TODO(b/350810013): remove the label property.
     return `Remove ${ariaLabel || this.label}`;
   }
   set ariaLabelRemove(ariaLabel: string | null) {

chips/internal/multi-action-chip_test.ts

@@ -223,6 +223,7 @@ describe('Multi-action chips', () => {
 
     it('should provide a default "ariaLabelRemove" value', async () => {
       const chip = await setupTest();
+      // TODO(b/350810013): remove the label property.
       chip.label = 'Label';
 
       expect(chip.ariaLabelRemove).toEqual(`Remove ${chip.label}`);
@@ -230,6 +231,7 @@ describe('Multi-action chips', () => {
 
     it('should provide a default "ariaLabelRemove" when "ariaLabel" is provided', async () => {
       const chip = await setupTest();
+      // TODO(b/350810013): remove the label property.
       chip.label = 'Label';
       chip.ariaLabel = 'Descriptive label';
 
@@ -238,6 +240,7 @@ describe('Multi-action chips', () => {
 
     it('should allow setting a custom "ariaLabelRemove"', async () => {
       const chip = await setupTest();
+      // TODO(b/350810013): remove the label property.
       chip.label = 'Label';
       chip.ariaLabel = 'Descriptive label';
       const customAriaLabelRemove = 'Remove custom label';