Skip to content

fix(material/table): switch back to class-based styling for flex tables #23153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+40 −35
Open

fix(material/table): switch back to class-based styling for flex tables #23153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions ...omponents-examples/material/table/table-expandable-rows/table-expandable-rows-example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ table {

tr.example-detail-row {
height: 0;
min-height: 0;
}

tr.example-element-row:not(.example-expanded-row):hover {
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
@use '../mdc-helpers/mdc-helpers';
@use '../../material/table/table-flex-styles';

@include table-flex-styles.private-table-flex-styles('mat-mdc');
@include mdc-data-table.core-styles($query: mdc-helpers.$mat-base-styles-without-animation-query);
@include table-flex-styles.private-table-flex-styles();

.mat-mdc-table-sticky {
// Note that the table can either set this class or an inline style to make something sticky.
Expand All @@ -24,7 +24,7 @@
// MDC table rows are styled with a top border, whereas our legacy flex table styles rows with
// a bottom border. Remove the bottom border style from the rows and let MDC display its top
// border.
mat-row.mat-mdc-row, mat-header-row.mat-mdc-header-row, mat-footer-row.mat-mdc-footer-row {
.mat-mdc-row, .mat-mdc-header-row, .mdc-mdc-footer-row {
border-bottom: none;
}

Expand Down
64 changes: 34 additions & 30 deletions src/material/table/_table-flex-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,54 @@ $header-row-height: 56px;
$row-height: 48px;
$row-horizontal-padding: 24px;

// Only use tag name selectors here since the styles are shared between MDC and non-MDC
@mixin private-table-flex-styles {
mat-table {
@mixin private-table-flex-styles($prefix) {
// These styles are nested under a `:not(table)`, because
// they can break the non-flex table if they leak out.
.#{$prefix}-table:not(table) {
display: block;

.#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell {
display: flex;
}

.#{$prefix}-row, .#{$prefix}-header-row, .#{$prefix}-footer-row {
display: flex;

// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
// element that will stretch the row the correct height. See:
// https://connect.microsoft.com/IE/feedback/details/802625
&::after {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need this workaround for IE 11?

display: inline-block;
min-height: inherit;
content: '';
}
}
}

mat-header-row {
// The remaining styles can leak to the native table without affecting it.
// We keep them outside to lower the specificity.
.#{$prefix}-header-row {
min-height: $header-row-height;
}

mat-row, mat-footer-row {
.#{$prefix}-row, .#{$prefix}-footer-row {
min-height: $row-height;
}

mat-row, mat-header-row, mat-footer-row {
display: flex;
// Define a border style, but then widths default to 3px. Reset them to 0px except the bottom
// which should be 1px;
border-width: 0;
.#{$prefix}-row, .#{$prefix}-header-row, .#{$prefix}-footer-row {
border-bottom-width: 1px;
border-style: solid;
border-bottom-style: solid;
align-items: center;
box-sizing: border-box;

// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
// element that will stretch the row the correct height. See:
// https://connect.microsoft.com/IE/feedback/details/802625
&::after {
display: inline-block;
min-height: inherit;
content: '';
}
}

mat-cell, mat-header-cell, mat-footer-cell {
.#{$prefix}-cell, .#{$prefix}-header-cell, .#{$prefix}-footer-cell {
flex: 1;
overflow: hidden;
word-wrap: break-word;
min-height: inherit;
align-items: center;

// Note: we use `first-of-type`/`last-of-type` here in order to prevent extra
// elements like ripples or badges from throwing off the layout (see #11165).
&:first-of-type {
Expand All @@ -58,13 +71,4 @@ $row-horizontal-padding: 24px;
}
}
}

mat-cell, mat-header-cell, mat-footer-cell {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
word-wrap: break-word;
min-height: inherit;
}
}
4 changes: 2 additions & 2 deletions src/material/table/_table-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@
}

.mat-table thead, .mat-table tbody, .mat-table tfoot,
mat-header-row, mat-row, mat-footer-row,
.mat-header-row, .mat-row, .mat-footer-row,
[mat-header-row], [mat-row], [mat-footer-row],
.mat-table-sticky {
background: inherit;
}

mat-row, mat-header-row, mat-footer-row,
.mat-row, .mat-header-row, .mat-footer-row,
th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
border-bottom-color: theming.get-color-from-palette($foreground, divider);
}
Expand Down
2 changes: 1 addition & 1 deletion src/material/table/table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use '../core/style/vendor-prefixes';
@use './table-flex-styles';

@include table-flex-styles.private-table-flex-styles();
@include table-flex-styles.private-table-flex-styles('mat');

// Native HTML table structure
table.mat-table {
Expand Down