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.
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
feat(alert): add plain inline alert #4262
Conversation
Preview: https://patternfly-pr-4262.surge.sh A11y report: https://patternfly-pr-4262-coverage.surge.sh CSS Size Report
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great! Just a nit, but if you set --pf-c-alert--BorderTopWidth: 0
instead of --pf-c-alert--BorderTopColor: transparent
, the border width will not be part of the overall alert height. Currently there is an extra --pf-global--BorderWidth--md
on the top compared to the bottom.
Also from the design, it looks like the padding around it is also removed since there is no longer a box around it, and so that the left/right edges align with the left/right edge of whatever comes before and after it. Can you confirm @mcarrano?
Here is what it looks like now with content above/below it:
And this shows the alert padding creating the space:
This is what it looks like with the padding removed:
And the alert box:
@@ -119,6 +127,16 @@ | |||
--pf-c-alert--BoxShadow: var(--pf-c-alert--m-inline--BoxShadow); | |||
--pf-c-alert--BackgroundColor: var(--pf-c-alert--m-inline--BackgroundColor); | |||
} | |||
|
|||
&.pf-m-plain { | |||
border-top-width: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will this work?
border-top-width: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth); | |
--pf-c-alert--BorderTopWidth: var(--pf-c-alert--m-inline--m-plain--BorderTopWidth); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤪
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good @srambach . Just a couple of questions....
- I assume that the plain styling could be applied to any alert type, i.e. info, warning, etc.
- Does the text pick up the appropriate color per alert level, e.g. red text for an error alert?
If the answer is yes for those, then I think we're good.
@mcarrano Yes, it does apply to any and the color comes along - you can see that it's the blue info color rather than the teal default now. Do you want an example for each? Or is this ok? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!!
Thanks for clarifying @srambach . I don't know if we need examples of all of these or it's fine as is. What do you think @mcoker ? Do you think we should have a new example called "Plain types" that show them all or do you think it is clear enough to just folder this into the Inline types as it is now? |
@mcarrano good question. I don't think we need to show the different status types from a development side, since the plain variation doesn't do anything with those types. Though we could show the types, just to communicate the plain variation works with all types. I do think it gets lost where it is now, I didn't see it the first time I looked at the page. I think "types" with the alert examples are the different status types. I might either expect it to be under variations, or as a new example. I would probably list it as a new example, "Inline plain", with using the success variation, similar to the custom icon example. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like this much better. Thanks @srambach !
🎉 This PR is included in version 4.126.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Adds a plain variation on the inline alert.
Fixes #4220