Skip to content

Commit

Permalink
fix(material-experimental/mdc-tabs): update theming api (#23855)
Browse files Browse the repository at this point in the history 
(cherry picked from commit 8f167ec)
  • Loading branch information
@andrewseguin @jelbourn
andrewseguin authored and jelbourn committed Nov 2, 2021
1 parent 15f0ff0 commit e7a77ed
Show file tree
Hide file tree
Showing 4 changed files with 677 additions and 675 deletions.
96 changes: 48 additions & 48 deletions package.json
View file
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
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
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

0 comments on commit e7a77ed

Please sign in to comment.