Skip to content
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

Jump to bottom

MdToolbarModule generates extra toolbar row component #6004

Closed
denver-HJS opened this issue Jul 24, 2017 · 1 comment · Fixed by #6661
Closed

MdToolbarModule generates extra toolbar row component #6004

denver-HJS opened this issue Jul 24, 2017 · 1 comment · Fixed by #6661
Assignees
@devversion

Comments

@denver-HJS
Copy link

denver-HJS commented Jul 24, 2017 •
edited
Loading

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Encapsulating all content within <md-toolbar> tag should not trigger an extra <md-toolbar-row> tag when there's no top level content/elements present
i.e.

<md-toolbar color="primary">
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>

What is the current behavior?

When using only nested <md-toolbar-row> components there is an extra top row produced
e.g.

<md-toolbar class="mat-toolbar mat-primary" color="primary" role="toolbar" ng-reflect-color="primary">
  <div class="mat-toolbar-layout">
    <md-toolbar-row class="mat-toolbar-row">


    </md-toolbar-row>
    <md-toolbar-row class="mat-toolbar-row">First Row</md-toolbar-row>
    <md-toolbar-row class="mat-toolbar-row">Second Row</md-toolbar-row>
  </div>
</md-toolbar>

What are the steps to reproduce?

Create an <md-toolbar> component containing one or more nested <md-toolbar-row> tags and no other markup as siblings.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/NMqusqAvplj0eJzqKdk5?p=preview

What is the use-case or motivation for changing an existing behavior?

I would like to custom style the first (or top) toolbar and none of my styles are applied (I'm assuming since the SASS is precompiled at build time and the generated component is not matching the CSS targeting). My work around is wrapping all toolbar content in <md-toolbar-row> tags and providing my own CSS classes

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/core: 4.3.1
@angular/material: 2.0.0-beta.8
typescript: 2.3.4
devversion added a commit to devversion/material2 that referenced this issue Aug 27, 2017
@devversion
fix(toolbar): don't auto-generate first row if first row would be empty
6520e9b 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the first toolbar row will be only auto-generated if there is user content that can be projected into the default first row. This means that developers can now do the following:

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

Fixes angular#6004. Fixes angular#1718.
@devversion devversion mentioned this issue Aug 27, 2017
Merged
devversion added a commit to devversion/material2 that referenced this issue Aug 31, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
89e9243 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Sep 1, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
564d41b 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Sep 6, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
8e8aa4b 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Sep 16, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
aead062 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Sep 21, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
af61632 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Sep 22, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
caee86a 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Sep 29, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
ccc2608 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes angular#6004. Fixes angular#1718.
devversion added a commit to devversion/material2 that referenced this issue Oct 5, 2017
@devversion
fix(toolbar): no longer auto-generate toolbar rows
aeb3bd0 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes angular#6004. Fixes angular#1718.
andrewseguin pushed a commit that referenced this issue Oct 31, 2017
@devversion @andrewseguin
fix(toolbar): no longer auto-generate toolbar rows (#6661)
c3405aa 
Currently the toolbar always generates the first `<md-toolbar-row>`. This means that developers have no opportunity to set directives/attributes/classes on the first toolbar row (e.g with flex-layout).

With this change, the toolbar won't auto-generate any `<md-toolbar-row>` element.

The toolbar will have two different row modes:

_Single row toolbar_

```html
<md-toolbar>
  First Tow
</md-toolbar>
```

_Multiple rows toolbar_

```html
<md-toolbar>
  <md-toolbar-row>First Row</md-toolbar-row>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

This means that mixing those two row modes is no longer possible and allowed

```html
<md-toolbar>
  <span>First Row</span>
  <md-toolbar-row>Second Row</md-toolbar-row>
</md-toolbar>
```

BREAKING CHANGE: `<md-toolbar-row>` elements will be no longer auto-generated for the first row. Meaning that custom styling for the first `<md-toolbar-row>` is no longer working as before. Since no toolbar-row is auto-generated anymore, there are two different modes for the toolbar now. Either place content directly inside of the `<md-toolbar>` or place multiple `<md-toolbar-row>` elements.

Fixes #6004. Fixes #1718.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(toolbar): no longer auto-generate toolbar rows devversion/material2
2 participants
@denver-HJS @devversion