Skip to content

fix(material-experimental/mdc-tabs): update theming api #23855

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

Merged
merged 1 commit into from
Nov 2, 2021
Merged

fix(material-experimental/mdc-tabs): update theming api #23855

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
96 changes: 48 additions & 48 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"@types/google.maps": "^3.45.6",
"@types/youtube": "^0.0.42",
"core-js-bundle": "^3.8.2",
"material-components-web": "14.0.0-canary.c78ff0429.0",
"material-components-web": "14.0.0-canary.1af7c1c4a.0",
"rxjs": "^6.6.7",
"rxjs-tslint-rules": "^4.33.1",
"tslib": "^2.3.0",
Expand Down Expand Up @@ -92,53 +92,53 @@
"@bazel/terser": "4.3.0",
"@bazel/typescript": "4.3.0",
"@firebase/app-types": "^0.6.1",
"@material/animation": "14.0.0-canary.c78ff0429.0",
"@material/auto-init": "14.0.0-canary.c78ff0429.0",
"@material/banner": "14.0.0-canary.c78ff0429.0",
"@material/base": "14.0.0-canary.c78ff0429.0",
"@material/button": "14.0.0-canary.c78ff0429.0",
"@material/card": "14.0.0-canary.c78ff0429.0",
"@material/checkbox": "14.0.0-canary.c78ff0429.0",
"@material/chips": "14.0.0-canary.c78ff0429.0",
"@material/circular-progress": "14.0.0-canary.c78ff0429.0",
"@material/data-table": "14.0.0-canary.c78ff0429.0",
"@material/density": "14.0.0-canary.c78ff0429.0",
"@material/dialog": "14.0.0-canary.c78ff0429.0",
"@material/dom": "14.0.0-canary.c78ff0429.0",
"@material/drawer": "14.0.0-canary.c78ff0429.0",
"@material/elevation": "14.0.0-canary.c78ff0429.0",
"@material/fab": "14.0.0-canary.c78ff0429.0",
"@material/feature-targeting": "14.0.0-canary.c78ff0429.0",
"@material/floating-label": "14.0.0-canary.c78ff0429.0",
"@material/form-field": "14.0.0-canary.c78ff0429.0",
"@material/icon-button": "14.0.0-canary.c78ff0429.0",
"@material/image-list": "14.0.0-canary.c78ff0429.0",
"@material/layout-grid": "14.0.0-canary.c78ff0429.0",
"@material/line-ripple": "14.0.0-canary.c78ff0429.0",
"@material/linear-progress": "14.0.0-canary.c78ff0429.0",
"@material/list": "14.0.0-canary.c78ff0429.0",
"@material/menu": "14.0.0-canary.c78ff0429.0",
"@material/menu-surface": "14.0.0-canary.c78ff0429.0",
"@material/notched-outline": "14.0.0-canary.c78ff0429.0",
"@material/radio": "14.0.0-canary.c78ff0429.0",
"@material/ripple": "14.0.0-canary.c78ff0429.0",
"@material/rtl": "14.0.0-canary.c78ff0429.0",
"@material/segmented-button": "14.0.0-canary.c78ff0429.0",
"@material/select": "14.0.0-canary.c78ff0429.0",
"@material/shape": "14.0.0-canary.c78ff0429.0",
"@material/slider": "14.0.0-canary.c78ff0429.0",
"@material/snackbar": "14.0.0-canary.c78ff0429.0",
"@material/switch": "14.0.0-canary.c78ff0429.0",
"@material/tab": "14.0.0-canary.c78ff0429.0",
"@material/tab-bar": "14.0.0-canary.c78ff0429.0",
"@material/tab-indicator": "14.0.0-canary.c78ff0429.0",
"@material/tab-scroller": "14.0.0-canary.c78ff0429.0",
"@material/textfield": "14.0.0-canary.c78ff0429.0",
"@material/theme": "14.0.0-canary.c78ff0429.0",
"@material/tooltip": "14.0.0-canary.c78ff0429.0",
"@material/top-app-bar": "14.0.0-canary.c78ff0429.0",
"@material/touch-target": "14.0.0-canary.c78ff0429.0",
"@material/typography": "14.0.0-canary.c78ff0429.0",
"@material/animation": "14.0.0-canary.1af7c1c4a.0",
"@material/auto-init": "14.0.0-canary.1af7c1c4a.0",
"@material/banner": "14.0.0-canary.1af7c1c4a.0",
"@material/base": "14.0.0-canary.1af7c1c4a.0",
"@material/button": "14.0.0-canary.1af7c1c4a.0",
"@material/card": "14.0.0-canary.1af7c1c4a.0",
"@material/checkbox": "14.0.0-canary.1af7c1c4a.0",
"@material/chips": "14.0.0-canary.1af7c1c4a.0",
"@material/circular-progress": "14.0.0-canary.1af7c1c4a.0",
"@material/data-table": "14.0.0-canary.1af7c1c4a.0",
"@material/density": "14.0.0-canary.1af7c1c4a.0",
"@material/dialog": "14.0.0-canary.1af7c1c4a.0",
"@material/dom": "14.0.0-canary.1af7c1c4a.0",
"@material/drawer": "14.0.0-canary.1af7c1c4a.0",
"@material/elevation": "14.0.0-canary.1af7c1c4a.0",
"@material/fab": "14.0.0-canary.1af7c1c4a.0",
"@material/feature-targeting": "14.0.0-canary.1af7c1c4a.0",
"@material/floating-label": "14.0.0-canary.1af7c1c4a.0",
"@material/form-field": "14.0.0-canary.1af7c1c4a.0",
"@material/icon-button": "14.0.0-canary.1af7c1c4a.0",
"@material/image-list": "14.0.0-canary.1af7c1c4a.0",
"@material/layout-grid": "14.0.0-canary.1af7c1c4a.0",
"@material/line-ripple": "14.0.0-canary.1af7c1c4a.0",
"@material/linear-progress": "14.0.0-canary.1af7c1c4a.0",
"@material/list": "14.0.0-canary.1af7c1c4a.0",
"@material/menu": "14.0.0-canary.1af7c1c4a.0",
"@material/menu-surface": "14.0.0-canary.1af7c1c4a.0",
"@material/notched-outline": "14.0.0-canary.1af7c1c4a.0",
"@material/radio": "14.0.0-canary.1af7c1c4a.0",
"@material/ripple": "14.0.0-canary.1af7c1c4a.0",
"@material/rtl": "14.0.0-canary.1af7c1c4a.0",
"@material/segmented-button": "14.0.0-canary.1af7c1c4a.0",
"@material/select": "14.0.0-canary.1af7c1c4a.0",
"@material/shape": "14.0.0-canary.1af7c1c4a.0",
"@material/slider": "14.0.0-canary.1af7c1c4a.0",
"@material/snackbar": "14.0.0-canary.1af7c1c4a.0",
"@material/switch": "14.0.0-canary.1af7c1c4a.0",
"@material/tab": "14.0.0-canary.1af7c1c4a.0",
"@material/tab-bar": "14.0.0-canary.1af7c1c4a.0",
"@material/tab-indicator": "14.0.0-canary.1af7c1c4a.0",
"@material/tab-scroller": "14.0.0-canary.1af7c1c4a.0",
"@material/textfield": "14.0.0-canary.1af7c1c4a.0",
"@material/theme": "14.0.0-canary.1af7c1c4a.0",
"@material/tooltip": "14.0.0-canary.1af7c1c4a.0",
"@material/top-app-bar": "14.0.0-canary.1af7c1c4a.0",
"@material/touch-target": "14.0.0-canary.1af7c1c4a.0",
"@material/typography": "14.0.0-canary.1af7c1c4a.0",
"@octokit/rest": "18.3.5",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^20.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
# version for the placeholders.
ANGULAR_PACKAGE_VERSION = "^13.0.0-0 || ^14.0.0-0"
MDC_PACKAGE_VERSION = "14.0.0-canary.c78ff0429.0"
MDC_PACKAGE_VERSION = "14.0.0-canary.1af7c1c4a.0"
TSLIB_PACKAGE_VERSION = "^2.3.0"
RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.0.0"

Expand Down
52 changes: 27 additions & 25 deletions src/material-experimental/mdc-tabs/_tabs-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,30 +25,32 @@
// `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
// they are not, because `theme-styles` outputs the token values directly, rather than
// generating CSS variables.
@include mdc-tab-theme.theme-styles(map.merge(mdc-tab-theme.$light-theme, (
container-color: $surface,
inactive-focus-state-layer-color: $on-surface,
inactive-hover-state-layer-color: $on-surface,
inactive-pressed-state-layer-color: $on-surface,
with-icon-inactive-focus-icon-color: $on-surface,
with-icon-inactive-hover-icon-color: $on-surface,
with-icon-inactive-icon-color: $on-surface,
with-icon-inactive-pressed-icon-color: $on-surface,
with-label-text-inactive-focus-label-text-color: $on-surface,
with-label-text-inactive-hover-label-text-color: $on-surface,
with-label-text-inactive-label-text-color: $on-surface,
with-label-text-inactive-pressed-label-text-color: $on-surface,

// TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
// `font-size` at the root of the tab while the text size of the tab is set on
// `.mdc-tab__text-label` which overrides the one from the root. The problem is that the
// `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's code which
// in turn causes no text label styles to be emitted and for the icon size to be applied to
// the entire tab. Since we don't support icons inside the tab anyway, we can temporarily
// work around it by preventing MDC from emitting icon styles. The correct label typography
// will be applied by our theme instead.
with-icon-icon-size: null
)));
@include mdc-tab-theme.primary-navigation-tab-theme-styles(map.merge(
mdc-tab-theme.$primary-light-theme,
(
container-color: $surface,
inactive-focus-state-layer-color: $on-surface,
inactive-hover-state-layer-color: $on-surface,
inactive-pressed-state-layer-color: $on-surface,
with-icon-inactive-focus-icon-color: $on-surface,
with-icon-inactive-hover-icon-color: $on-surface,
with-icon-inactive-icon-color: $on-surface,
with-icon-inactive-pressed-icon-color: $on-surface,
with-label-text-inactive-focus-label-text-color: $on-surface,
with-label-text-inactive-hover-label-text-color: $on-surface,
with-label-text-inactive-label-text-color: $on-surface,
with-label-text-inactive-pressed-label-text-color: $on-surface,

// TODO(crisbeto): MDC's styles are set up so that the icon size is set through a
// `font-size` at the root of the tab while the text size of the tab is set on
// `.mdc-tab__text-label` which overrides the one from the root. The problem is that
// the `$light-theme` is looking for a `subhead2` level which doesn't exist in MDC's
// code which in turn causes no text label styles to be emitted and for the icon size
// to be applied to the entire tab. Since we don't support icons inside the tab
// anyway, we can temporarily work around it by preventing MDC from emitting icon
// styles. The correct label typography will be applied by our theme instead.
with-icon-icon-size: null
)));

// MDC seems to include a background color on tabs which only stands out on dark themes.
// Disable for now for backwards compatibility. These styles are inside the theme in order
Expand Down Expand Up @@ -127,7 +129,7 @@
// `theme-styles` are included in the `tab` mixin inside `_tabs-common.scss`. Currently
// they are not, because `theme-styles` outputs the token values directly, rather than
// generating CSS variables.
@include mdc-tab-theme.theme-styles((
@include mdc-tab-theme.primary-navigation-tab-theme-styles((
active-focus-state-layer-color: $color,
active-hover-state-layer-color: $color,
active-pressed-state-layer-color: $color,
Expand Down
Loading