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

alert: remove superfluous <div> tag #2544

Closed
pkozlowski-opensource opened this issue Jul 23, 2018 · 2 comments
Closed

alert: remove superfluous <div> tag #2544

pkozlowski-opensource opened this issue Jul 23, 2018 · 2 comments
Labels
component: alert
Milestone
3.0.0

Comments

@pkozlowski-opensource
Copy link
Member

As of today <ngb-alert> doesn't set Bootstrap classes on a host but adds a <div> inside. This is an issue for animations and prevents people from properly styling the alert's host (see https://stackoverflow.com/questions/51450796/apply-classes-to-sub-elements-of-components/51451075 and #2542 as an example).

We should remove this <div> and set classes (and role="alert" directly on the host).
Closed
@pkozlowski-opensource
Copy link
Member Author

Note to self: we might need to set display: block as well (if Bootstrap classes don't do this).

maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Jul 27, 2018
@maxokorokov
refactor(alert): remove intermediate 'div' element
2b4fe7f 
Fixes ng-bootstrap#2544
@maxokorokov maxokorokov mentioned this issue Jul 27, 2018
Merged
@maxokorokov
Copy link
Member

@pkozlowski-opensource, opened a PR to see what it gives. On the one hand more logic because of dynamic css class names, on the other hand it's possible to add a class directly...

@pkozlowski-opensource pkozlowski-opensource added this to the 3.0.0 milestone Jul 27, 2018
maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Aug 3, 2018
@maxokorokov
refactor(alert): remove intermediate 'div' element
9c1c915 
BREAKING CHANGE: markup generated by `<ngb-alert>` was simplified, there is no more intermediate `<div>` element

Before:
```
<ngb-alert>
  <div role="alert" class="alert alert-warning">
    Hello there
  </div>
</ngb-alert>
```

After:
```
<ngb-alert role="alert" class="alert d-block alert-warning">
  Hello there
</ngb-alert>
```

Fixes ng-bootstrap#2544
maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Aug 3, 2018
@maxokorokov
refactor(alert): remove intermediate 'div' element
f223de0 
BREAKING CHANGE: markup generated by `<ngb-alert>` was simplified, there is no more intermediate `<div>` element

Before:
```
<ngb-alert>
  <div role="alert" class="alert alert-warning">
    Hello there
  </div>
</ngb-alert>
```

After:
```
<ngb-alert role="alert" class="alert d-block alert-warning">
  Hello there
</ngb-alert>
```

Fixes ng-bootstrap#2544
maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Aug 3, 2018
@maxokorokov
refactor(alert): remove intermediate 'div' element
217d94c 
BREAKING CHANGE: markup generated by `<ngb-alert>` was simplified, there is no more intermediate `<div>` element

Before:
```
<ngb-alert>
  <div role="alert" class="alert alert-warning">
    Hello there
  </div>
</ngb-alert>
```

After:
```
<ngb-alert role="alert" class="alert alert-warning">
  Hello there
</ngb-alert>
```

Fixes ng-bootstrap#2544
maxokorokov added a commit that referenced this issue Aug 3, 2018
@maxokorokov
refactor(alert): remove intermediate 'div' element
c9c463d 
BREAKING CHANGE: markup generated by `<ngb-alert>` was simplified, there is no more intermediate `<div>` element

Before:
```
<ngb-alert>
  <div role="alert" class="alert alert-warning">
    Hello there
  </div>
</ngb-alert>
```

After:
```
<ngb-alert role="alert" class="alert alert-warning">
  Hello there
</ngb-alert>
```

Fixes #2544
Closes #2552
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: alert
Projects
None yet
Milestone
3.0.0
Development

No branches or pull requests
2 participants
@pkozlowski-opensource @maxokorokov