diff --git a/src/dev-app/main.ts b/src/dev-app/main.ts index 55dc303a8408..19e8d61e4d6f 100644 --- a/src/dev-app/main.ts +++ b/src/dev-app/main.ts @@ -16,6 +16,7 @@ import { } from '@angular/core'; import {bootstrapApplication} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import {provideHttpClient} from '@angular/common/http'; import {RouterModule} from '@angular/router'; import {Directionality} from '@angular/cdk/bidi'; @@ -51,6 +52,7 @@ function bootstrap(): void { RouterModule.forRoot(DEV_APP_ROUTES), ), provideNativeDateAdapter(), + provideHttpClient(), {provide: OverlayContainer, useClass: FullscreenOverlayContainer}, {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: DevAppRippleOptions}, {provide: Directionality, useClass: DevAppDirectionality}, diff --git a/src/material/core/style/_vendor-prefixes.scss b/src/material/core/style/_vendor-prefixes.scss index 298f582a52a0..ee0d67e3e6a1 100644 --- a/src/material/core/style/_vendor-prefixes.scss +++ b/src/material/core/style/_vendor-prefixes.scss @@ -43,4 +43,9 @@ -webkit-clip-path: $value; clip-path: $value; } + +@mixin smooth-font { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} // stylelint-enable diff --git a/src/material/table/table.scss b/src/material/table/table.scss index e45134a8dae3..42e05e907c3f 100644 --- a/src/material/table/table.scss +++ b/src/material/table/table.scss @@ -1,11 +1,7 @@ -@use '@material/data-table/data-table' as mdc-data-table; -@use '@material/data-table/data-table-cell' as mdc-data-table-cell; -@use '@material/data-table/data-table-header-cell' as mdc-data-table-header-cell; -@use '@material/data-table' as mdc-data-table-theme; -@use '@material/typography/typography' as mdc-typography; @use '../core/mdc-helpers/mdc-helpers'; @use '../core/tokens/token-utils'; @use '../core/tokens/m2/mat/table' as tokens-mat-table; +@use '../core/style/vendor-prefixes'; @use './table-flex-styles'; .mat-mdc-table-sticky { @@ -21,25 +17,13 @@ border-bottom-style: solid; } -@include mdc-data-table.static-styles($query: mdc-helpers.$mdc-base-styles-query); -@include mdc-data-table-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query); -@include mdc-data-table-header-cell.static-styles($query: mdc-helpers.$mdc-base-styles-query); -@include mdc-data-table-theme.cell-padding( - $leading-padding: mdc-data-table-theme.$cell-leading-padding, - $trailing-padding: mdc-data-table-theme.$cell-trailing-padding, - $query: mdc-helpers.$mdc-base-styles-query -); @include table-flex-styles.private-table-flex-styles(); .mat-mdc-table { - // MDC Table applies `table-layout: fixed`, but this is a backwards incompatible - // change since the table did not previously apply it. - // TODO: Add a mixin to MDC to set the layout instead of including this override, - // see this issue: https://github.com/material-components/material-components-web/issues/6412 + min-width: 100%; + border: 0; + border-spacing: 0; table-layout: auto; - - // The MDC table does not allow text to wrap within the cell. This allows for text to - // wrap when the cell reaches its maximum width. white-space: normal; @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) { @@ -47,12 +31,28 @@ } } +.mdc-data-table__cell { + box-sizing: border-box; + overflow: hidden; + text-align: left; + text-overflow: ellipsis; + + [dir='rtl'] & { + text-align: right; + } +} + +.mdc-data-table__cell, +.mdc-data-table__header-cell { + padding: 0 16px; +} + @include mdc-helpers.disable-mdc-fallback-declarations { @include token-utils.use-tokens(tokens-mat-table.$prefix, tokens-mat-table.get-token-slots()) { // TODO(crisbeto): these tokens have default values in order to make the initial token // work easier to land in g3. Eventually we should remove them. .mat-mdc-header-row { - @include mdc-typography.smooth-font(); + @include vendor-prefixes.smooth-font; @include token-utils.create-token-slot(height, header-container-height, 56px); @include token-utils.create-token-slot(color, header-headline-color, true); @include token-utils.create-token-slot(font-family, header-headline-font, true); @@ -72,7 +72,7 @@ // letter spacing which leads to a lot of internal screenshot diffs. .mat-mdc-row, .mdc-data-table__content { - @include mdc-typography.smooth-font(); + @include vendor-prefixes.smooth-font; @include token-utils.create-token-slot(font-family, row-item-label-text-font, true); @include token-utils.create-token-slot(line-height, row-item-label-text-line-height); @include token-utils.create-token-slot(font-size, row-item-label-text-size, 14px); @@ -80,7 +80,7 @@ } .mat-mdc-footer-row { - @include mdc-typography.smooth-font(); + @include vendor-prefixes.smooth-font; @include token-utils.create-token-slot(height, footer-container-height, 52px); @include token-utils.create-token-slot(color, row-item-label-text-color, true); @include token-utils.create-token-slot(font-family, footer-supporting-text-font, true); @@ -95,6 +95,15 @@ @include token-utils.create-token-slot(letter-spacing, header-headline-tracking); font-weight: inherit; line-height: inherit; + box-sizing: border-box; + text-overflow: ellipsis; + overflow: hidden; + outline: none; + text-align: left; + + [dir='rtl'] & { + text-align: right; + } } .mat-mdc-cell {