UI: Update banner and popup alerts #5672
Conversation
| @@ -1,3 +1,4 @@ | |||
| .login-form { | |||
| box-shadow: $box-shadow, $box-shadow-high; | |||
| overflow: auto; | |||
There was a problem hiding this comment.
Would this cause scrolling? Just curious what this change was for.
| {{/message-in-page}} | ||
| <AlertBanner | ||
| @type="warning" | ||
| @message="{{warning}}" |
There was a problem hiding this comment.
This won't eval the string so we'll end up with "{{warning}}" in the output.
There was a problem hiding this comment.
nm this is fine - it's HTML in the strings we can't have unless we do {{{message}}} in AlertBanner
| <AlertBanner | ||
| @type="warning" | ||
| @class="is-marginless" | ||
| @message="You are creating a new version based on data from Version {{model.selectedVersion.version}}. The current version for {{model.id}} is Version {{model.currentVersion}}." |
There was a problem hiding this comment.
OK, I take it back because it totally works 🤯 - this must be a new thing with angle bracket components, but that's awesome.
| @type="warning" | ||
| @title="Attention" | ||
| @message="This {{model.identityType}} is disabled. All associated tokens cannot be used, but are not revoked." | ||
| yieldWithoutColumn |
There was a problem hiding this comment.
I think this should be:
| yieldWithoutColumn | |
| @yieldWithoutColumn={{true}} |
| <div class="message is-{{flash.type}}"> | ||
| <div class="columns is-mobile is-variable is-1"> | ||
| <div class="column is-narrow message-icon"> | ||
| <ICon @glyph="{{get (message-types flash.type) "glyph"}}" @size="20" @excludeIconClass="true" /> |
There was a problem hiding this comment.
| <ICon @glyph="{{get (message-types flash.type) "glyph"}}" @size="20" @excludeIconClass="true" /> | |
| <ICon @glyph="{{get (message-types flash.type) "glyph"}}" @size="20" @excludeIconClass={{true}} /> |
I think it'll work either way (since it's truthy), but with bools we normally want curlies around them.
|
Thanks! I've got those last couple of properties fixed in my upcoming empty states PR |
| <h5 class="title is-5 has-text-{{if (eq flash.type 'warning') 'dark-yellow' flash.type}}"> | ||
| {{get (message-types flash.type) "text"}} | ||
| </h5> | ||
| <span data-test-flash-message-body=true> |
There was a problem hiding this comment.
Oh ha, didn't catch this one - we use that data-test selector for a lot of the acceptance tests.
There was a problem hiding this comment.
Oh, oops. I had been trying to use the component here and it's already in there, but I somehow missed including it again after I switched back. Got it fixed in the empty states branch
Warning alert banner:
Error alert banner:
Success Popup:
Full width banner on Unseal
