feat(data-table): Add support for applying row checkbox density

Use `$row-checkbox-density-scale` param of data table's `density()` mixin
to automatically set checkbox's density and also automatically align
row checkbox within a cell.

PiperOrigin-RevId: 339489587

packages/mdc-checkbox/_checkbox-theme.scss

@@ -157,18 +157,27 @@ $light-theme: (
   }
 }
 
+///
+/// @param {Number | String} $density-scale - Density scale value for component.
+///     Supported density scale values `-3`, `-2`, `-1`, `0`.
+/// @return Returns ripple size of checkbox for given density scale.
+///
+@function get-ripple-size($density-scale) {
+  @return density-functions.prop-value(
+    $density-config: $density-config,
+    $density-scale: $density-scale,
+    $property-name: size
+  );
+}
+
 ///
 /// Sets density scale for checkbox.
 ///
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values
 ///     `-3`, `-2`, `-1`, `0`.
 ///
 @mixin density($density-scale, $query: feature-targeting.all()) {
-  $size: density-functions.prop-value(
-    $density-config: $density-config,
-    $density-scale: $density-scale,
-    $property-name: size,
-  );
+  $size: get-ripple-size($density-scale);
 
   @include ripple-size($size, $query: $query);
 }

packages/mdc-data-table/_data-table-theme.scss

@@ -27,19 +27,20 @@
 @use 'sass:list';
 @use 'sass:meta';
 @use '@material/animation/functions';
-@use '@material/checkbox/mixins' as checkbox-mixins;
+@use '@material/checkbox/checkbox-theme';
 @use '@material/density/functions' as density-functions;
+@use '@material/density/variables' as density-variables;
 @use '@material/elevation/mixins';
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/icon-button/mixins' as icon-button-mixins;
 @use '@material/rtl/mixins' as rtl-mixins;
-@use '@material/shape/mixins' as shape-mixins;
+@use '@material/select/select-theme';
 @use '@material/shape/functions' as shape-functions;
+@use '@material/shape/mixins' as shape-mixins;
 @use '@material/theme/theme';
-@use '@material/typography/typography';
 @use '@material/theme/theme-color';
-@use '@material/density/variables' as density-variables;
-@use '@material/select/select-theme';
+@use '@material/touch-target/touch-target';
+@use '@material/typography/typography';
 
 $fill-color: surface !default;
 $header-row-fill-color: surface !default;
@@ -49,7 +50,6 @@ $checked-icon-color: primary !default;
 $divider-color: rgba(theme-color.prop-value(on-surface), 0.12) !default;
 $divider-size: 1px !default;
 $row-hover-fill-color: rgba(theme-color.prop-value(on-surface), 0.04) !default;
-$checkbox-touch-size: 48px !default;
 
 $header-row-text-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;
 $row-text-color: rgba(theme-color.prop-value(on-surface), 0.87) !default;
@@ -149,8 +149,8 @@ $pagination-rows-per-page-select-height: 36px;
 @mixin checked-icon-color($color, $query: feature-targeting.all()) {
   .mdc-data-table__header-row-checkbox,
   .mdc-data-table__row-checkbox {
-    @include checkbox-mixins.focus-indicator-color($color, $query: $query);
-    @include checkbox-mixins.container-colors(
+    @include checkbox-theme.focus-indicator-color($color, $query: $query);
+    @include checkbox-theme.container-colors(
       $marked-stroke-color: $color,
       $marked-fill-color: $color,
       $query: $query
@@ -344,11 +344,15 @@ $pagination-rows-per-page-select-height: 36px;
 /// @param {Number} $checkbox-touch-size [$checkbox-touch-size] Checkbox Touch
 ///     Size. Use this to adjust row checkbox cell leading padding based on
 ///     checkbox density scale.
+/// @param {Number} $row-checkbox-density-scale [null] Density scale of row
+///     checkbox. Use this to adjust alignment of row checkbox within a cell.
+///     Ignore if data table's density scale is 0.
+///     See `checkbox-theme.density()` mixin for supported density scales.
 ///
 @mixin cell-padding(
   $leading-padding: $cell-leading-padding,
   $trailing-padding: $cell-trailing-padding,
-  $checkbox-touch-size: $checkbox-touch-size,
+  $row-checkbox-density-scale: null,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -363,7 +367,7 @@ $pagination-rows-per-page-select-height: 36px;
 
   @include checkbox-cell-padding(
     $leading-padding: $leading-padding,
-    $checkbox-touch-size: $checkbox-touch-size,
+    $row-checkbox-density-scale: $row-checkbox-density-scale,
     $query: $query
   );
 }
@@ -375,10 +379,14 @@ $pagination-rows-per-page-select-height: 36px;
 /// @param {Number} $checkbox-touch-size [$checkbox-touch-size] Checkbox Touch
 ///     Size. Use this to adjust row checkbox cell leading padding based on
 ///     checkbox density scale.
+/// @param {Number} $row-checkbox-density-scale [null] Density scale of row
+///     checkbox. Use this to adjust alignment of row checkbox within a cell.
+///     Ignore if data table's density scale is 0.
+///     See `checkbox-theme.density()` mixin for supported density scales.
 ///
 @mixin checkbox-cell-padding(
   $leading-padding: $cell-leading-padding,
-  $checkbox-touch-size: $checkbox-touch-size,
+  $row-checkbox-density-scale: null,
   $query: feature-targeting.all()
 ) {
   $feat-structure: feature-targeting.create-target($query, structure);
@@ -390,6 +398,12 @@ $pagination-rows-per-page-select-height: 36px;
       // 16dp (`$leading-padding`). Calculate required padding excluding
       // checkbox bounds.
       $checkbox-icon-size: 24px;
+      $checkbox-touch-size: touch-target.$height;
+      @if $row-checkbox-density-scale and $row-checkbox-density-scale < 0 {
+        $checkbox-touch-size: checkbox-theme.get-ripple-size(
+          $row-checkbox-density-scale
+        );
+      }
       $leading-padding: $leading-padding -
         ($checkbox-touch-size - $checkbox-icon-size) / 2;
       @include rtl-mixins.reflexive-property(padding, $leading-padding, 0);
@@ -415,8 +429,16 @@ $pagination-rows-per-page-select-height: 36px;
 ///
 /// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
 ///     `-3`, `-2`, `-1`, `0`.
+/// @param {Number} $row-checkbox-density-scale [null] Density scale of row
+///     checkbox. Use this to set density of row checkbox and also
+///     automatically adjust the alignment of row checkbox within a cell.
+///     See `checkbox.density()` mixin for supported density scales.
 ///
-@mixin density($density-scale, $query: feature-targeting.all()) {
+@mixin density(
+  $density-scale,
+  $row-checkbox-density-scale: null,
+  $query: feature-targeting.all()
+) {
   $height: density-functions.prop-value(
     $density-config: $density-config,
     $density-scale: $density-scale,
@@ -425,6 +447,19 @@ $pagination-rows-per-page-select-height: 36px;
 
   @include cell-height($height, $query: $query);
   @include header-cell-height(get-header-cell-height($height), $query: $query);
+
+  @if $row-checkbox-density-scale {
+    @include checkbox-cell-padding(
+      $leading-padding: $cell-leading-padding,
+      $row-checkbox-density-scale: $row-checkbox-density-scale,
+      $query: $query
+    );
+
+    .mdc-data-table__header-row-checkbox,
+    .mdc-data-table__row-checkbox {
+      @include checkbox-theme.density($row-checkbox-density-scale);
+    }
+  }
 }
 
 ///

packages/mdc-data-table/package.json

@@ -32,6 +32,7 @@
     "@material/select": "^7.0.0",
     "@material/shape": "^7.0.0",
     "@material/theme": "^7.0.0",
+    "@material/touch-target": "^7.0.0",
     "@material/typography": "^7.0.0",
     "tslib": "^1.10.0"
   },