Skip to content

Commit 6314d15

Browse files
devversionjelbourn
authored andcommitted
fix(toolbar): deprecate unused landscape row-height variable (#12129)
* Deprecates the unused landscape row-height variable. The logic for this has been removed a long time ago, and the SCSS variable should be removed at some point. * Makes the host bindings more clear by expanding the truthy and falsy check.
1 parent 330176d commit 6314d15

File tree

2 files changed

+11
-8
lines changed

2 files changed

+11
-8
lines changed

src/lib/toolbar/toolbar.scss

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,14 @@
22
@import '../../cdk/a11y/a11y';
33

44
$mat-toolbar-height-desktop: 64px !default;
5+
$mat-toolbar-height-mobile: 56px !default;
6+
$mat-toolbar-row-padding: 16px !default;
7+
8+
/** @deprecated @deletion-target 8.0.0 */
59
$mat-toolbar-height-mobile-portrait: 56px !default;
10+
/** @deprecated @deletion-target 8.0.0 */
611
$mat-toolbar-height-mobile-landscape: 48px !default;
712

8-
$mat-toolbar-row-padding: 16px !default;
913

1014

1115
@mixin mat-toolbar-height($height) {
@@ -49,10 +53,9 @@ $mat-toolbar-row-padding: 16px !default;
4953
// Set the default height for the toolbar.
5054
@include mat-toolbar-height($mat-toolbar-height-desktop);
5155

52-
// As per specs, mobile devices will use a different height for toolbars than for desktop.
53-
// The height for mobile landscape devices has been ignored since relying on `@media orientation`
54-
// is causing issues on devices with a soft-keyboard.
55-
// See: https://material.io/guidelines/layout/structure.html#structure-app-bar
56+
// As per specs, toolbars should have a different height in mobile devices. This has been
57+
// specified in the old guidelines and is still observable in the new specifications by looking at
58+
// the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
5659
@media ($mat-xsmall) {
57-
@include mat-toolbar-height($mat-toolbar-height-mobile-portrait);
60+
@include mat-toolbar-height($mat-toolbar-height-mobile);
5861
}

src/lib/toolbar/toolbar.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@ export class MatToolbarRow {}
4545
inputs: ['color'],
4646
host: {
4747
'class': 'mat-toolbar',
48-
'[class.mat-toolbar-multiple-rows]': 'this._toolbarRows.length',
49-
'[class.mat-toolbar-single-row]': '!this._toolbarRows.length'
48+
'[class.mat-toolbar-multiple-rows]': '_toolbarRows.length > 0',
49+
'[class.mat-toolbar-single-row]': '_toolbarRows.length === 0',
5050
},
5151
changeDetection: ChangeDetectionStrategy.OnPush,
5252
encapsulation: ViewEncapsulation.None,

0 commit comments

Comments
 (0)