User tests: Successful: Unsuccessful:
Pull Request for Issue #43708 .
This PR will adjust the styling of the alert boxes. Overrides are done using css custom properties instead of overriding css attributes.
I've used the following html to test alert boxes
<div class="alert" role="alert">
class="alert"<br/>
A simple primary alert—check it out! <a href="#" class="btn btn-primary">button</a>
</div>
<div class="alert alert-primary" role="alert">
class="alert alert-primary"<br/>
A simple primary alert—check it out! <a href="#" class="btn btn-primary">button</a>
</div>
<div class="alert alert-secondary" role="alert">
class="alert alert-secondary"<br/>
A simple secondary alert—check it out! <a href="#" class="btn btn-secondary">button</a>
</div>
<div class="alert alert-success" role="alert">
class="alert alert-success"<br/>
A simple success alert—check it out! <a href="#" class="btn btn-success">button</a>
</div>
<div class="alert alert-danger" role="alert">
class="alert alert-danger"<br/>
A simple danger alert—check it out! <a href="#" class="btn btn-danger">button</a>
</div>
<div class="alert alert-warning" role="alert">
class="alert alert-warning"<br/>
A simple warning alert—check it out! <a href="#" class="btn btn-warning">button</a>
</div>
<div class="alert alert-info" role="alert">
class="alert alert-info"<br/>
A simple info alert—check it out! <a href="#" class="btn btn-info">button</a>
</div>
<div class="alert alert-light" role="alert">
class="alert alert-light"<br/>
A simple light alert—check it out! <a href="#" class="btn btn-light">button</a>
</div>
<div class="alert alert-dark" role="alert">
class="alert alert-dark"<br/>
A simple dark alert—check it out! <a href="#" class="btn btn-dark">button</a>
</div>
Please select:
Documentation link for docs.joomla.org:
No documentation changes for docs.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
Status | New | ⇒ | Pending |
Category | ⇒ | Repository NPM Change |
Why are you overriding the native bootstrap alert classes. It is doing this sort of thing that causes problems in the first place,
I do agree with you. I am going to refactor .alert and joomlaalert.
Less overrides means less maintenance.
I convert this PR as draft
This pull request has been automatically rebased to 5.2-dev.
Title |
|
@Hackwar @brianteeman refactor the joomla-alert as I wrote in my comment implies a PR on https://github.com/joomla-projects/custom-elements/tree/c1f118a5c96f382a43b735b46eb7e04e888987ed/src
A PR on that repo will not make it to 5.2.x I guess... :-)
Hope to get some time this weekend to fix current colors in joomla/joomla-cms repo and refactor the joomla-alert another time
Labels |
Added:
NPM Resource Changed
bug
PR-5.2-dev
|
@Hackwar I leave the PR as is without further changes.
I do agree with @brianteeman to embrace Bootstrap implementation of alert. This requires a change to https://github.com/joomla-projects/custom-elements/tree/c1f118a5c96f382a43b735b46eb7e04e888987ed/src which is out of scope of this PR.
The longer I'm looking at this, the more I think this would be a PR for 5.3. It isn't exactly a broken feature, but an improvement, so I would suggest to put this into 5.3 and there you can definitely also update the custom-elements package. Would that be okay for you?
Why are you overriding the native bootstrap alert classes. It is doing this sort of thing that causes problems in the first place,