Skip to content

Commit 01e9f00

Browse files
authored
Change to facilitate Angular Material theming API update (#6514)
We're in the process of adding design tokens to the button toggle component in angular/components#27509. This involves moving styles from the theme into the component's base styles. The changes revealed an unsupported configuration that is being used by Tensorboard: a `mat-button-toggle-group` is used without `mat-button-togle`. Previously this looked okay, because the border of the group came from the theme. Now that the border is in the component styles and because `mat-button-toggle` is the one responsible for pulling in the button toggle group's styles, it ends up without a border. These changes add a temporary patch to unblock the change in Angular Material. **Note:** these changes may require some screenshot updates, because the border generated by `tb-theme-foreground-prop` isn't exactly the same as the one coming from Angular Material. Previously it was `#595959` and now it's `#555` which is not exactly the same.
1 parent d143d58 commit 01e9f00

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

tensorboard/webapp/metrics/views/main_view/main_view_component.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,15 @@ limitations under the License.
4242
}
4343
}
4444

45+
// TODO(tensorboard-team): this component currently uses `mat-button-toggle-group` without
46+
// projecting `mat-button-toggle` into it. This is an unsupported configuration that breaks
47+
// with some upcoming Angular Material changes. The following patch aims to preserve the old
48+
// appearance. Either the buttons should be replaced with `mat-button-toggle` or the
49+
// `mat-button-toggle-group` should be removed.
50+
mat-button-toggle-group.filter-view {
51+
@include tb-theme-foreground-prop(border, border, 1px solid);
52+
}
53+
4554
.filter-view {
4655
border-radius: 4px;
4756
flex: none;

0 commit comments

Comments
 (0)