feat(data-table): use new select + list templates for pagination

PiperOrigin-RevId: 396468684
material-components · Sep 13, 2021 · 08398f8 · 08398f8
1 parent 5533f73
commit 08398f8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 14 deletions.
diff --git a/packages/mdc-data-table/README.md b/packages/mdc-data-table/README.md
@@ -313,15 +313,27 @@ user change the rows per page (page size) and navigate between data table pages.
           </div>
 
           <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
-            <ul class="mdc-deprecated-list">
-              <li class="mdc-deprecated-list-item mdc-deprecated-list-item--selected" aria-selected="true" role="option" data-value="10">
-                <span class="mdc-deprecated-list-item__text">10</span>
+            <ul class="mdc-list">
+              <li class="mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--selected mdc-list-item--with-one-line"
+                  aria-selected="true" role="option" data-value="10">
+                <span class="mdc-list-item__ripple"></span>
+                <span class="mdc-list-item__content">
+                  <span class="mdc-list-item__primary-text">10</span>
+                </span>
               </li>
-              <li class="mdc-deprecated-list-item" role="option" data-value="25">
-                <span class="mdc-deprecated-list-item__text">25</span>
+              <li class="mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--with-one-line"
+                  role="option" data-value="25">
+                <span class="mdc-list-item__ripple"></span>
+                <span class="mdc-list-item__content">
+                  <span class="mdc-list-item__primary-text">25</span>
+                </span>
               </li>
-              <li class="mdc-deprecated-list-item" role="option" data-value="100">
-                <span class="mdc-deprecated-list-item__text">100</span>
+              <li class="mdc-select__option mdc-select__one-line-option mdc-list-item mdc-list-item--with-one-line"
+                  role="option" data-value="100">
+                <span class="mdc-list-item__ripple"></span>
+                <span class="mdc-list-item__content">
+                  <span class="mdc-list-item__primary-text">100</span>
+                </span>
               </li>
             </ul>
           </div>

diff --git a/packages/mdc-data-table/_data-table-pagination.scss b/packages/mdc-data-table/_data-table-pagination.scss
@@ -3,7 +3,7 @@
 @use '@material/rtl/mixins' as rtl;
 @use '@material/icon-button/icon-button-theme';
 @use '@material/select/select-theme';
-@use '@material/list/mixins' as list-theme;
+@use '@material/list/evolution-mixins' as list-theme;
 @use '@material/menu/mixins' as menu-theme;
 @use './data-table-theme';
 
@@ -93,8 +93,8 @@
       data-table-theme.$pagination-rows-per-page-select-height,
       $query: $query
     );
-    .mdc-deprecated-list-item {
-      @include list-theme.deprecated-single-line-height(
+    .mdc-list-item {
+      @include list-theme.one-line-item-height(
         data-table-theme.$pagination-rows-per-page-select-height,
         $query: $query
       );

diff --git a/packages/mdc-data-table/_data-table-theme.scss b/packages/mdc-data-table/_data-table-theme.scss
@@ -29,11 +29,11 @@
 @use 'sass:meta';
 @use '@material/animation/functions';
 @use '@material/checkbox/checkbox-theme';
-@use '@material/density/functions' as density-functions;
-@use '@material/density/variables' as density-variables;
+@use '@material/density/density';
 @use '@material/elevation/mixins';
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/icon-button/icon-button-theme';
+@use '@material/list/evolution-mixins' as list-theme;
 @use '@material/rtl/rtl';
 @use '@material/select/select-theme';
 @use '@material/shape/functions' as shape-functions;
@@ -73,7 +73,7 @@ $cell-trailing-padding: 16px !default;
 
 $minimum-row-height: 36px !default;
 $maximum-row-height: $row-height !default;
-$default-density-scale: density-variables.$default-scale !default;
+$default-density-scale: density.$default-scale !default;
 $density-config: (
   height: (
     maximum: $row-height,
@@ -444,9 +444,10 @@ $pagination-rows-per-page-select-height: 36px;
 @mixin density(
   $density-scale,
   $row-checkbox-density-scale: null,
+  $pagination-select-density-scale: null,
   $query: feature-targeting.all()
 ) {
-  $height: density-functions.prop-value(
+  $height: density.prop-value(
     $density-config: $density-config,
     $density-scale: $density-scale,
     $property-name: height,
@@ -467,6 +468,24 @@ $pagination-rows-per-page-select-height: 36px;
       @include checkbox-theme.density($row-checkbox-density-scale);
     }
   }
+
+  @if $pagination-select-density-scale {
+    @include select-density($pagination-select-density-scale);
+  }
+}
+
+@mixin select-density($density-scale) {
+  @include select-theme.outlined-height(
+    select-theme.$height + density.$interval * $density-scale
+  );
+  .mdc-list-item {
+    @include list-theme.one-line-item-density(
+      $density-scale + 2,
+      $exclude-variants: true
+    );
+  }
+
+  margin: 0;
 }
 
 ///