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.

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

Merged
merged 4 commits into from Aug 5, 2021
Merged

feat(alert): add plain inline alert #4262

merged 4 commits into from Aug 5, 2021

Conversation

srambach
Copy link
Member

@srambach srambach commented Aug 3, 2021

Adds a plain variation on the inline alert.

Fixes #4220

@patternfly-build
Copy link

patternfly-build commented Aug 3, 2021

Preview: https://patternfly-pr-4262.surge.sh

A11y report: https://patternfly-pr-4262-coverage.surge.sh

CSS Size Report
NameCurrentPreviousDiff %
components/Alert/alert.css8.4 kB7.5 kB10.15
patternfly-no-reset.css1.2 MB1.2 MB0.07
patternfly.css1.2 MB1.2 MB0.07
patternfly.min.css1.1 MB1.1 MB0.07

Copy link
Contributor

@mcoker mcoker left a 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:

Screen Shot 2021-08-03 at 1 09 07 PM

And this shows the alert padding creating the space:

Screen Shot 2021-08-03 at 1 09 13 PM

This is what it looks like with the padding removed:

Screen Shot 2021-08-03 at 1 08 51 PM

And the alert box:

Screen Shot 2021-08-03 at 1 08 58 PM

@@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will this work?

Suggested change
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);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤪

Copy link
Member

@mcarrano mcarrano left a 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.

@srambach
Copy link
Member Author

srambach commented Aug 3, 2021

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?

Copy link
Contributor

@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!!

@mcarrano
Copy link
Member

mcarrano commented Aug 3, 2021

@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?

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?

@mcoker
Copy link
Contributor

mcoker commented Aug 3, 2021

@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.

Copy link
Member

@mcarrano mcarrano left a 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 !

@mcoker mcoker merged commit 8e628d1 into patternfly:main Aug 5, 2021
@patternfly-build
Copy link

🎉 This PR is included in version 4.126.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Alert: add "plain" variant
4 participants