feat(list,menu,select): add slots for specific slotted variants

PiperOrigin-RevId: 565253637
material-components · Sep 15, 2023 · 6c6b9c4 · 6c6b9c4
1 parent d446315
commit 6c6b9c4
Show file tree

Hide file tree

Showing 18 changed files with 157 additions and 138 deletions.
diff --git a/docs/components/figures/list/theming-avatar.html b/docs/components/figures/list/theming-avatar.html
@@ -17,13 +17,13 @@
     </style>
     <md-list>
       <md-list-item headline="Elliott Marquez">
-        <span data-variant="avatar" slot="start">EM</span>
+        <span slot="start-avatar">EM</span>
       </md-list-item>
       <md-list-item headline="Elizabeth Mitchell">
-        <span data-variant="avatar" slot="start">LM</span>
+        <span slot="start-avatar">LM</span>
       </md-list-item>
       <md-list-item headline="Andrew Jakubowicz">
-        <span data-variant="avatar" slot="start">AJ</span>
+        <span slot="start-avatar">AJ</span>
       </md-list-item>
     </md-list>
   </figure>

diff --git a/docs/components/figures/list/theming-icon.html b/docs/components/figures/list/theming-icon.html
@@ -18,16 +18,16 @@
     </style>
     <md-list>
       <md-list-item headline="Eggs">
-        <md-icon slot="start" data-variant="icon">egg</md-icon>
-        <md-icon slot="end" data-variant="icon">recommend</md-icon>
+        <md-icon slot="start-icon">egg</md-icon>
+        <md-icon slot="end-icon">recommend</md-icon>
       </md-list-item>
       <md-list-item headline="Ice cream" class="unhealthy">
-        <md-icon slot="start" data-variant="icon">icecream</md-icon>
-        <md-icon slot="end" data-variant="icon">dangerous</md-icon>
+        <md-icon slot="start-icon">icecream</md-icon>
+        <md-icon slot="end-icon">dangerous</md-icon>
       </md-list-item>
       <md-list-item headline="Orange">
-        <md-icon slot="start" data-variant="icon">nutrition</md-icon>
-        <md-icon slot="end" data-variant="icon">recommend</md-icon>
+        <md-icon slot="start-icon">nutrition</md-icon>
+        <md-icon slot="end-icon">recommend</md-icon>
       </md-list-item>
     </md-list>
   </figure>

diff --git a/docs/components/figures/list/theming-image.html b/docs/components/figures/list/theming-image.html
@@ -15,13 +15,13 @@
     </style>
     <md-list>
       <md-list-item headline="Wide Cat">
-        <img loading="lazy" slot="start" data-variant="image" src="https://placekitten.com/200/100">
+        <img loading="lazy" slot="start-image" src="https://placekitten.com/200/100">
       </md-list-item>
       <md-list-item headline="Round kitty cat">
-        <img loading="lazy" slot="start" data-variant="image" src="https://placekitten.com/202/101">
+        <img loading="lazy" slot="start-image" src="https://placekitten.com/202/101">
       </md-list-item>
       <md-list-item headline="Softe cate">
-        <img loading="lazy" slot="start" data-variant="image" src="https://placekitten.com/212/106">
+        <img loading="lazy" slot="start-image" src="https://placekitten.com/212/106">
       </md-list-item>
     </md-list>
   </figure>

diff --git a/docs/components/figures/list/theming-video.html b/docs/components/figures/list/theming-video.html
@@ -16,8 +16,7 @@
     <md-list>
       <md-list-item headline="Expressiveness">
         <video
-          slot="start"
-          data-variant="video"
+          slot="start-video"
           playsinline
           muted
           autoplay
@@ -28,8 +27,7 @@
       <md-divider></md-divider>
       <md-list-item headline="Personalization">
         <video
-          slot="start"
-          data-variant="video"
+          slot="start-video"
           playsinline
           muted
           autoplay
@@ -40,8 +38,7 @@
       <md-divider></md-divider>
       <md-list-item headline="Accessible">
         <video
-          slot="start"
-          data-variant="video"
+          slot="start-video"
           playsinline
           muted
           autoplay

diff --git a/docs/components/figures/list/usage-avatar.html b/docs/components/figures/list/usage-avatar.html
@@ -4,13 +4,12 @@
   >
     <md-list style="max-width: 300px">
       <md-list-item headline="User 1">
-        <span slot="start" data-variant="avatar">EM</span>
+        <span slot="start-avatar">EM</span>
       </md-list-item>
       <md-divider></md-divider>
       <md-list-item headline="User 2">
         <img
-          slot="start"
-          data-variant="avatar"
+          slot="start-avatar"
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII="
         />
       </md-list-item>

diff --git a/docs/components/figures/list/usage-icon.html b/docs/components/figures/list/usage-icon.html
@@ -2,7 +2,7 @@
   <figure aria-label="A list with three items and dividers separating each item. The first item has the Lit logo and the text Lit. The second item has the Polymer logo and the text Polymer. The third item has the Angular logo and the text Angular.">
     <md-list style="max-width: 300px">
       <md-list-item headline="Lit">
-        <svg  slot="start" data-variant="icon" viewBox="0 0 160 200">
+        <svg  slot="start-icon" viewBox="0 0 160 200">
           <path
             fill="currentColor"
             d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"
@@ -11,11 +11,11 @@
       </md-list-item>
       <md-divider></md-divider>
       <md-list-item headline="Polymer">
-        <md-icon slot="start" data-variant="icon">polymer</md-icon>
+        <md-icon slot="start-icon">polymer</md-icon>
       </md-list-item>
       <md-divider></md-divider>
       <md-list-item headline="Angular">
-        <svg slot="start" data-variant="icon" viewBox="0 0 250 250">
+        <svg slot="start-icon" viewBox="0 0 250 250">
           <polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 	" />
           <path
             d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0

diff --git a/docs/components/figures/list/usage-image.html b/docs/components/figures/list/usage-image.html
@@ -4,15 +4,15 @@
   >
     <md-list style="max-width: 300px">
       <md-list-item headline="Cat">
-        <img slot="start" data-variant="image" loading="lazy" src="https://placekitten.com/112/112" />
+        <img slot="start-image" loading="lazy" src="https://placekitten.com/112/112" />
       </md-list-item>
       <md-divider></md-divider>
       <md-list-item headline="Kitty Cat">
-        <img slot="start" data-variant="image" loading="lazy" src="https://placekitten.com/114/114" />
+        <img slot="start-image" loading="lazy" src="https://placekitten.com/114/114" />
       </md-list-item>
       <md-divider></md-divider>
       <md-list-item headline="Cate">
-        <img slot="start" data-variant="image" loading="lazy" src="https://placekitten.com/118/118" />
+        <img slot="start-image" loading="lazy" src="https://placekitten.com/118/118" />
       </md-list-item>
     </md-list>
   </figure>

diff --git a/docs/components/figures/list/usage-video.html b/docs/components/figures/list/usage-video.html
@@ -5,8 +5,7 @@
     <md-list style="max-width: 300px">
       <md-list-item headline="Expressiveness">
         <video
-          slot="start"
-          data-variant="video"
+          slot="start-video"
           playsinline
           muted
           autoplay
@@ -17,8 +16,7 @@
       <md-divider></md-divider>
       <md-list-item headline="Personalization">
         <video
-          slot="start"
-          data-variant="video"
+          slot="start-video"
           playsinline
           muted
           autoplay
@@ -29,8 +27,7 @@
       <md-divider></md-divider>
       <md-list-item headline="Accessible">
         <video
-          slot="start"
-          data-variant="video"
+          slot="start-video"
           playsinline
           muted
           autoplay

diff --git a/docs/components/figures/list/usage.html b/docs/components/figures/list/usage.html
@@ -19,7 +19,7 @@
         href="https://google.com/search?q=buy+kiwis&tbm=shop"
         target="_blank"
       >
-        <md-icon slot="end" data-variant="icon">open_in_new</md-icon>
+        <md-icon slot="end-icon">open_in_new</md-icon>
       </md-list-item>
     </md-list>
   </figure>

diff --git a/docs/components/figures/menu/usage-submenu.html b/docs/components/figures/menu/usage-submenu.html
@@ -17,7 +17,7 @@
                 <md-menu-item headline="Granny Smith"></md-menu-item>
                 <md-menu-item headline="Red Delicious"></md-menu-item>
               </md-menu>
-              <md-icon slot="start" data-variant="icon" style="font-size: 24px;height:24px;">arrow_left</md-icon>
+              <md-icon slot="start-icon" style="font-size: 24px;height:24px;">arrow_left</md-icon>
             </md-sub-menu-item>
           </md-menu>
           <md-icon slot="end">arrow_right</md-icon>