fix(alerts): update styling for better accessibility #2921

christiemolloy · 2020-04-03T15:37:13Z

closes #2659
closes #2114

Breaking Changes

Updates the global info color - $pf-global--info-color--100 from $pf-color-blue-200 to $pf-color-blue-300. This is a visual breaking change only. No further changes are needed to consume this change. If you were using the global info color in your application this change will visually effect your UI.
The variable name --pf-c-alert--grid-template-columns changed to --pf-c-alert--GridTemplateColumns. Any instance of --pf-c-alert--grid-template-columns should be replaced with --pf-c-alert--GridTemplateColumns
The icon used in the alert is fas fa-fw fa-[alert-icon-name] as it controls the width of the icon.
The only action that should go in .pf-c-alert__action is the close button. All other actions should be in a new element with the class pf-c-alert__action-group that should be appended to .pf-c-alert

*Removed these variables:

--pf-c-alert--grid-template-rows
--pf-c-alert__icon--Padding
--pf-c-alert__icon--BackgroundColor
--pf-c-alert__title--FontSize
--pf-c-alert__title--PaddingTop
--pf-c-alert__title--PaddingRight
--pf-c-alert__title--PaddingBottom
--pf-c-alert__title--PaddingLeft
--pf-c-alert__description--PaddingRight
--pf-c-alert__description--PaddingBottom
--pf-c-alert__description--PaddingLeft
--pf-c-alert__description--MarginTop
--pf-c-alert__action--PaddingTop
--pf-c-alert__action--PaddingRight
--pf-c-alert--m-success__icon--BackgroundColor
--pf-c-alert--m-danger__icon--BackgroundColor
--pf-c-alert--m-warning__icon--BackgroundColor
--pf-c-alert--m-warning__icon--FontSize
--pf-c-alert--m-info__icon--BackgroundColor
--pf-c-alert--m-inline--BorderColor
--pf-c-alert--m-inline--BorderStyle
--pf-c-alert--m-inline--BorderTopWidth
--pf-c-alert--m-inline--BorderRightWidth
--pf-c-alert--m-inline--BorderBottomWidth
--pf-c-alert--m-inline--BorderLeftWidth
--pf-c-alert--m-inline--before--Width
--pf-c-alert--m-inline--before--Top
--pf-c-alert--m-inline--before--Bottom
--pf-c-alert--m-inline--before--BackgroundColor
--pf-c-alert--m-inline__icon--FontSize
--pf-c-alert--m-inline__icon--Color
--pf-c-alert--m-inline__icon--BackgroundColor
--pf-c-alert--m-inline__icon--PaddingTop
--pf-c-alert--m-inline__icon--PaddingRight
--pf-c-alert--m-inline__icon--PaddingBottom
--pf-c-alert--m-inline__icon--PaddingLeft
--pf-c-alert--m-inline--m-warning__icon--FontSize
--pf-c-alert--m-inline--m-success__icon--Color
--pf-c-alert--m-inline--m-success--before--BackgroundColor
--pf-c-alert--m-inline--m-danger__icon--Color
--pf-c-alert--m-inline--m-danger--before--BackgroundColor
--pf-c-alert--m-inline--m-warning__icon--Color
--pf-c-alert--m-inline--m-warning--before--BackgroundColor
--pf-c-alert--m-inline--m-info__icon--Color
--pf-c-alert--m-inline--m-info--before--BackgroundColor

patternfly-build · 2020-04-03T15:45:36Z

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

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

mcarrano

The styling looks good @christiemolloy , but I will defer to @mceledonia for the final word on that. But just a couple of things with these examples:

I think that the actions at the bottom should be link style buttons and not just text links.
There should no longer ever be actions on the right except for the close button so the third example under variations in invalid.
I still think it's worth showing an example of an inline link in the alert body like in the first variation here: https://www.patternfly.org/v4/documentation/core/components/alert#variations

mcoker · 2020-04-03T23:37:49Z

src/patternfly/components/Alert/alert.scss

@@ -3,215 +3,174 @@
  --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-alert--grid-template-columns: max-content 1fr max-content;
-  --pf-c-alert--grid-template-rows: 1fr auto;
+  --pf-c-alert--grid-template-rows: var(--pf-global--spacer--lg) auto auto;


I don't think you need to specify rows. Giving it a fixed height creates issues if you change the size of anything in that row. Looks like maybe it's there to keep the close button from making that row so tall? The way the alert currently does it works pretty well.

mcoker · 2020-04-03T23:46:39Z

src/patternfly/components/Alert/alert.scss


  // Action
-  --pf-c-alert__action--PaddingTop: #{pf-size-prem(11px)}; // one off spacer to align properly.
-  --pf-c-alert__action--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-alert__action--MarginTop: #{pf-size-prem(-6px)};


You can use var(--pf-global--spacer--form-element) or var(--pf-c-button--PaddingTop) here.

mcoker · 2020-04-03T23:49:47Z

src/patternfly/components/Alert/alert.scss

 }

 .pf-c-alert__title {
+  display: flex;


why make this flex? If you put word word it will read wordword

yeah not sure why that is there , removed

mcoker · 2020-04-03T23:52:22Z

src/patternfly/components/Alert/alert.scss

+  padding-top: var(--pf-c-alert__description--PaddingTop);
+
+  + .pf-c-alert__action-group {
+    padding-top: var(--pf-c-alert__description--action-group--PaddingTop);


Suggested change

padding-top: var(--pf-c-alert__description--action-group--PaddingTop);

--pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);

mcoker · 2020-04-03T23:59:06Z

src/patternfly/components/Alert/alert.scss

-  padding: var(--pf-c-alert__icon--Padding);
+  grid-row: 1 / span 1;
+  grid-column: 1 / span 1;
+  margin-top: var(--pf-c-alert__icon--MarginTop);


Since this is a flex container, what if you used align-items: center; instead of a margin? Then everything is still centered if you change the height of the icon/text

mcoker · 2020-04-04T00:00:07Z

src/patternfly/components/Alert/alert.scss

-  grid-area: icon;
-  padding: var(--pf-c-alert__icon--Padding);
+  grid-row: 1 / span 1;
+  grid-column: 1 / span 1;


Is there a reason you don't want it to use the icon grid area? Since it's defined and the rest of the sections use grid-area, you could modify the template areas and use . for the 2nd and 3rd column icon areas currently.

oh good point didn't realize you can do . nice!

mcoker · 2020-04-04T00:00:48Z

src/patternfly/components/Alert/alert.scss

+  padding-top: var(--pf-c-alert__action-group--PaddingTop);
+
+  > .pf-c-button {
+    font-weight: var(--pf-c-alert__action-group--c-button--FontWeight);


Suggested change

font-weight: var(--pf-c-alert__action-group--c-button--FontWeight);

font-weight: var(--pf-c-alert__action-group__c-button--FontWeight);

same for all of the vars that reference __c-button as a child

mcoker · 2020-04-04T00:02:50Z

src/patternfly/components/Alert/alert.scss

+    left: 0;
+    content: "";
+    border: var(--pf-c-alert--before--BorderTopWidth) solid;
+    border-color: var(--pf-c-alert--before--BorderTopColor);


Since you have a single border color declaration, this can all be declared in the border shorthand.

mcoker

Lookin good @christiemolloy! I love how tidy the stylesheet is now that the designs are more consolidated. Left some comments for review!

christiemolloy · 2020-04-06T20:47:26Z

I think that the actions at the bottom should be link style buttons and not just text links.

@mcarrano I used link style buttons, they are .pf-c-button.pf-m-link.pf-m-inline. The main difference is that they have a bold font-weight.

mcoker · 2020-04-06T21:25:04Z

src/patternfly/components/Alert/alert.scss

@@ -3,215 +3,166 @@
  --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-alert--grid-template-columns: max-content 1fr max-content;
-  --pf-c-alert--grid-template-rows: 1fr auto;
+  --pf-c-alert--grid-template-rows: 1fr auto auto;


What's the reasoning for 1fr on the first row?

Agree, I don't think it needs to be defined.

mcoker · 2020-04-06T21:57:43Z

The presence of the close button makes the title area larger than it needs to be, and also changes the space between the title and whatever is below it when you add/remove the close button.

mattnolting

Looking good, left a couple comments 👍

mattnolting · 2020-04-07T13:36:45Z

src/patternfly/components/Alert/alert.scss

@@ -3,215 +3,166 @@
  --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-alert--grid-template-columns: max-content 1fr max-content;


We try to avoid this where we can, but I think in this case you should set a width on the first column definition because icon widths vary. See alignment specifically on Warning and Danger.

Maybe try

--pf-c-alert--grid-template-columns: minmax(var(--pf-global--icon--FontSize--lg), max-content) 1fr max-content; --pf-c-alert--grid-column-gap: var(--pf-global--spacer--xs); ... grid-column-gap: var(--pf-c-alert--grid-column-gap);

Results in this

That will work until a point. It's also only specific to core. I did a little digging and looks like FA offers a utility class for fixed width icons with this use case.

Nice, you could do same thing as .fa-fw without creating a dependency by setting a width on i, which would make it themeable.

--pf-c-alert__icon--icon--Width: 1.25em .pf-c-alert__icon { ... i { width: var(--pf-c-alert__icon--icon--Width); text-align: center; } }

The downside to that is we're shipping code just to style a core element. And the utility comes with patternfly, so users should have it by default. If they don't have it, it degrades gracefully as the alignment difference is really slight.

What if FA doesn't support requirements and the application needs to use custom iconography?

I would say at that point it's on them to make sure their icons work for this kind of layout. We can't assume they'll be using  elements, or that this fixed width would work the same way with whatever icons they're using if they are using . That said, the .fa-fw styles seem generic enough that they likely would work, but we don't know for sure.

And to my earlier point, I think we should avoid core specific styles in the components if at all possible, and it doesn't seem necessary to include this. That said, react and core use different icon systems, so in some cases we will need to account for that, and this is a small utility so it's not a big deal to include it.

mattnolting · 2020-04-07T14:08:49Z

src/patternfly/components/Alert/alert.scss

-  background-color: var(--pf-c-alert--BackgroundColor);
-  box-shadow: var(--pf-c-alert--BoxShadow);
-
+    ". content content"


Icon should span the rows. If icon font-size is increased, spanning all rows will prevent vertical misalignment.

"icon title action" "icon content content" "icon actiongroup actiongroup"

Before

After

mattnolting · 2020-04-07T14:10:55Z

src/patternfly/components/Alert/alert.scss

@@ -3,215 +3,166 @@
  --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-alert--grid-template-columns: max-content 1fr max-content;
-  --pf-c-alert--grid-template-rows: 1fr auto;
+  --pf-c-alert--grid-template-rows: 1fr auto auto;


Agree, I don't think it needs to be defined.

src/patternfly/components/Alert/alert.scss

-  --pf-c-alert__icon--BackgroundColor: var(--pf-global--default-color--100);
-  --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--lg);
+  --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
+  --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--sm);


christiemolloy · 2020-04-07T15:38:18Z

The presence of the close button makes the title area larger than it needs to be, and also changes the space between the title and whatever is below it when you add/remove the close button.

That's why I added a height to the first row in the grid. I updated it so that it is based on the font-size * line-height of the alert title so that it would adjust as the font-size changes. Let me know if you think thats a viable option?

mcoker · 2020-04-08T00:51:07Z

I don't think we want to limit the height of the title row, or we'll end up with this, unless we set the text to truncate.

Also if you use height to define the row, I don't think you'll want to base off of line-height as someone may just leave that and modify the font-size var we have (var(--pf-c-alert__title--FontSize)) and then you end up with:

mcoker · 2020-04-08T01:02:44Z

Also float on the icon will let the title text wrap underneath the icon, which we don't want. It's a pattern in other components that if text is positioned adjacent to a close icon, the text doesn't wrap underneath (popover, tooltip, modal, etc).

mcoker · 2020-04-08T22:21:15Z

src/patternfly/components/Alert/alert.scss


  @include pf-t-light; // This component always needs to be light

  position: relative;
  display: grid;
+  padding: var(--pf-c-alert--PaddingTop) var(--pf-c-alert--PaddingRight) var(--pf-c-alert--PaddingBottom) var(--pf-c-alert--PaddingLeft);
+  background-color: var(--pf-c-alert--BackgroundColor);
+  box-shadow: var(--pf-c-alert--BoxShadow);
  grid-template-columns: var(--pf-c-alert--grid-template-columns);


Just noticed these var names are wrong. We could also specify vars for the column widths the way I did with the form component PR, so users don't have to override all of grid-template-columns just to change a column width. And that allows us to update grid-template-columns with less likelihood of it being breaking.

Suggested change

grid-template-columns: var(--pf-c-alert--grid-template-columns);

grid-template-columns: var(--pf-c-alert--GridTemplateColumns);

mcoker · 2020-04-08T22:21:31Z

src/patternfly/components/Alert/alert.scss

-
+    "icon description description"
+    "icon actiongroup actiongroup";
+  grid-column-gap: var(--pf-c-alert--grid-column-gap);


Suggested change

grid-column-gap: var(--pf-c-alert--grid-column-gap);

grid-column-gap: var(--pf-c-alert--GridColumnGap);

mcoker · 2020-04-08T22:23:48Z

src/patternfly/components/Alert/alert.scss

@@ -3,215 +3,171 @@
  --pf-c-alert--BoxShadow: var(--pf-global--BoxShadow--lg);
  --pf-c-alert--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-alert--grid-template-columns: max-content 1fr max-content;


Suggested change

--pf-c-alert--grid-template-columns: max-content 1fr max-content;

--pf-c-alert--GridTemplateColumns: max-content 1fr max-content;

Or --pf-c-alert__icon--GridColumnWidth, --pf-c-alert__title--GridColumnWidth, --pf-c-alert__action--GridColumnWidth

mcoker · 2020-04-09T23:43:15Z

src/patternfly/components/Alert/alert.scss

+  --pf-c-alert__icon--Color: var(--pf-global--default-color--200);
+  --pf-c-alert__icon--MarginTop: calc(var(--pf-global--spacer--xs) / 2);
+  --pf-c-alert__icon--MarginRight: var(--pf-global--spacer--xs);
+  --pf-c-alert__icon--FontSize: var(--pf-global--icon--FontSize--md);

  // Title
  --pf-c-alert__title--FontSize: var(--pf-global--FontSize--md);


Can you think of a reason to set this if it's the default font size?

I was using it to calculate the height, i dont need anymore good pick up

mcoker · 2020-04-09T23:43:23Z

src/patternfly/components/Alert/alert.scss


  // Title
  --pf-c-alert__title--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-alert__title--LineHeight: var(--pf-global--LineHeight--md);


looks like this isn't in use.

mcoker

LPTM!!! Great work!!

mattnolting

Great!

mcoker

@christiemolloy made a couple of updates. Let me know if it looks OK.

christiemolloy · 2020-04-24T13:21:27Z

Yep, looks good! @mcoker

* setup v4 prerelease * fix(about-modal): add a comment to test v4 release (#2764) * chore(build): only release from v4 branch * build(semantic-release): add git tag so we start on 4.0.0 * fix(readme): test semantic-release * fix upload preview url and semantic release config * tweak semantic release deploy * semantic release branches * fix(nothing): semantic release debugging * debugging * more debugging * fix(semantic-release): i think i finally got it * add back tests * fix(test): remove unused file (#2771) * Merge remote-tracking branch 'upstream/master' into v4 (#2791) * fix(notificationdrawer): updated dropdowns so they dont overflow parent (#2767) * fix(fileupload): change border for drag hover outside of psuedo selector (#2776) * fix(fileupload): change border for drag hover outside of psuedo selector * feat(divider): added vertical divider variation (#2734) * feat(nothing): try a minor version bump (#2784) * fix(release-notes): updated release notes for 2020.03 release (#2785) * chore(flex): scoped flex layout workspace styles to layout examples (#2787) * fix(nav): fixed divider positioning and color declarations (#2788) * fix(release-notes): updated release notes for 2020.03 release (#2789) * chore(a11y): fix a11y upload report (#2790) Co-authored-by: Matt Nolting <matthew.nolting@gmail.com> Co-authored-by: zallen <47335686+redallen@users.noreply.github.com> * feat(divider): added vertical divider variation (#2734) * chore(flex): scoped flex layout workspace styles to layout examples (#2787) * Chore(build) - remove IE11 support from build (#2806) * feat(divider): added vertical divider variation (#2734) * chore(build): removed ie11 support from build (#2751) * chore(build): removed IE11 text from README (#2751) * chore(build): reverted flex css updates pulled in during rebase (#2751) Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> * fix(color): updated success-100, success-200, green-500 global vars (#2817) * fix(chipgroup): modified max width for chip label (#2823) * fix(wizard): made active step bold, fixed in-page workspace example (#2805) * fix(radio, check): fixed radio left margin overflow, error in selector (#2799) * fix(radio, check): fixed radio left margin overflow, error in selector * fix(color): updated black global and background global/component vars (#2818) * fix(color): updated black global and background global/component vars * chore(workspace): updated workspace backgroundcolor--300 to --200 * fix(table): updated table font var (#2831) * fix(file-upload): removed message container, added form to error example (#2807) (#2833) * fix(file-upload): removed message container, added form to error example * chore(fileupload): updated examples to be a div instead of form * fix(colors): updated cyan-600 cyan-700 blue-600 and blue-700 (#2832) * chore(v4): prevent merging in github from triggering a release (#2835) * feat(dropdown): added dropdown toggle image and text item modifier (#2803) * fix(tooltip): reduced space around component (#2763) * fix(popover): reduced space between/around elements (#2762) * fix(popover): reduced space between/around elements * fix(popover): decrease component font-size and title size variation * fix(popover): decrease space above footer * fix(datalist): updated compact font-size (#2777) * fix(table): updated compact spacing (#2775) * fix(select/contextselector): updated name for menu search element (#2826) * fix(page): removed margin-top/bottom from header tools (#2821) * fix(accordion): updated spacing, removed box shadow and shadow variation (#2760) * fix(modal): reduced spacing (#2761) * fix(modal): reduced spacing * Merge remote-tracking branch 'upstream/master' into v4 (#2844) * fix(file-upload): removed message container, added form to error example (#2807) * fix(file-upload): removed message container, added form to error example * chore(fileupload): updated examples to be a div instead of form * feat(docs): publish docs to NPM (#2839) * fix(md): add example css to dist (#2840) * chore(lint): dont lint example CSS (#2841) Co-authored-by: zallen <47335686+redallen@users.noreply.github.com> * refactor(tabs): updated to new tab design (#2757) * fix(page): reduced space between tertiary nav, breadcrumbs, main section (#2837) * fix(card): renamed vars, updated docs (#2759) * chore(button-icon): added pre-config option (#2863) * fix(form-control): enabled success/invalid states for readonly controls (#2753) * fix(table): replaced expanded content box shadow with border (#2861) * fix(tooltip): added box shadow (#2855) * fix(sass-utilities): made bs-variables optional include (#2871) * fix(box-shadow): update global shadows, add xl, update shadow utility (#2854) * fix(box-shadow): update global shadows, add xl, update shadow utility * fix(shadows): update small directional blur, alpha * feat(base): made shield styles optional by default (#2769) (#2872) * fix(wizard): updates to shadows and borders (#2860) * fix(modal): updated box shadow size (#2859) * fix(clipboard-copy): replaced expandable box-shadow with border (#2856) * fix(modal): left aligned footer actions, removed pf-m-align-left (#2881) * fix(components): changed component media queries to be mobile first (#2816) * fix(page): updated page and page header background colors (#2883) * fix(table-td-wrapping): added to overflow-wrap (#2868) * fix(table-td-word-break): updated word-break * feat(card): added flat variation (#2886) * fix(v4): merge master for 2020.04 release (#2888) * fix(empty-state): center content, fix vars, adjust secondary margin (#2866) * fix(empty-state): center content, fix vars, adjust secondary margin * fix(emptystate): applied margin to children of secondary element * fix(empty-state): centered empty state contents vertically * fix(empty-state): added full-height modifier * fix(drawer): removed m-border, enabled m-no-border on inline/static (#2887) * fix(button): added modifiers to position icon in button (#2828) * fix(data-list): changed expanded content shadow to a border (#2885) * fix(repo): merge master for 2020.04 release (#2901) * fix(file-upload): removed message container, added form to error example (#2807) * fix(file-upload): removed message container, added form to error example * chore(fileupload): updated examples to be a div instead of form * feat(docs): publish docs to NPM (#2839) * fix(md): add example css to dist (#2840) * chore(lint): dont lint example CSS (#2841) * feat(base): made shield styles optional by default (#2769) * Revert "feat(base): made shield styles optional by default (#2769)" (#2867) This reverts commit 0b32834. * fix(table): updated text in column management demo modal (#2875) * feat(infrastructure): parse hbs files (#2865) * feat(infrastructure): parse hbs files * fix(select): fixed attribute issue with select-menu-fieldset * fix(select): update aria-label usage on select-menu-fieldset * for non-group menus, use aria-label="Select input" * for grouped menus, use aria-labelled by on fieldset, labeled by the group title * updates match the react select component examples Co-authored-by: Michael Coker <mcoker@redhat.com> * chore(repo): replaced 288 occurences of patternfly-next with patternfly (#2880) * fix(repo): update release notes (#2900) Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Joachim <jschuler@redhat.com> Co-authored-by: Michael Coker <mcoker@redhat.com> * chore(page): made roles on header and main elements optional (#2899) * fix(radio): fixed issue where radio is cut off when comes after label (#2912) * fix(app launcher): applied external link icon class to icon wrapper (#2904) * fix(dev-lite): created titles from path on disk rather than frontmatter (#2895) * feat(colors): added new cyan, gold, green, red colors, updated blue (#2906) * fix(datalist): remove margin bottom for action (#2923) * fix(login): keeps login from shrinking based on content size (#2917) * fix(wizard): move modifier to body (#2924) * fix(tabs): Updates class name for tabs button to be tabs link (#2919) * Fix inline drawer panel left border (#2897) * fix(drawer-panel): add panel border, rm aria-expanded * style(vertical-nav): refactored css structure (#2884) * style(vertical-nav): refactored css structure * fix(clipboardcopy): updated buttons to use button component (#2922) * fix(breadcrumb): add word-break, display link and icon inline, move divider (#2916) * fix(breadcrumb): add word-break, display link and icon inline * fix(breadcrumb): include divider before link instead of after * fix(breadcrumb): dont let item text wrap under separator * chore(breadcrumb): rewrote breadcrumb divider hbs * fix(input group): replaced Dropdown with Select (#2934) * chore(v4): merged master into v4 (#2933) * fix(file-upload): removed message container, added form to error example (#2807) * fix(file-upload): removed message container, added form to error example * chore(fileupload): updated examples to be a div instead of form * feat(docs): publish docs to NPM (#2839) * fix(md): add example css to dist (#2840) * chore(lint): dont lint example CSS (#2841) * feat(base): made shield styles optional by default (#2769) * Revert "feat(base): made shield styles optional by default (#2769)" (#2867) This reverts commit 0b32834. * fix(table): updated text in column management demo modal (#2875) * feat(infrastructure): parse hbs files (#2865) * feat(infrastructure): parse hbs files * fix(select): fixed attribute issue with select-menu-fieldset * fix(select): update aria-label usage on select-menu-fieldset * for non-group menus, use aria-label="Select input" * for grouped menus, use aria-labelled by on fieldset, labeled by the group title * updates match the react select component examples Co-authored-by: Michael Coker <mcoker@redhat.com> * chore(repo): replaced 288 occurences of patternfly-next with patternfly (#2880) * fix(repo): update release notes (#2900) * chore(snippets): gulpify snippets, add html validation (#2894) * chore(snippets): gulpify snippets, reduce build time to 5s * fix scripts * fix(demos): publish demos to NPM (#2908) * fix(release-notes): fix formatting of release notes (#2909) * fix(release-notes): fix formatting of release notes * fix closing parentheses * chore(copyclipboard): resolve merge conflict * fix(package.json): updates Co-authored-by: zallen <47335686+redallen@users.noreply.github.com> Co-authored-by: Joachim <jschuler@redhat.com> * fix(optionsmenu): added color declaration to menu items (#2938) * feat(example): add select-disabled-typeahead-example.hbs (#2882) * docs(select): added disabled typeahead select example * fix(form): moved helper text icon from login to form component (#2928) * fix(global vars): updated pf-color-green-50 (#2940) * fix(chip): refactor styles (#2941) * fix(chip): refactor styles * fix(chips): add changes to chip group * fix(inputgroup): remove legacy button styles (#2935) * fix(expandable): renamed expandable to expandable section (#2937) * fix(expandablesection): renamed expandable to expandable section * fix(wizard): made desktop nav 250px, remove compact modifier (#2936) * fix(alerts): updated styling for better accessibility (#2921) * fix(global): hid vertical nav at 1200px, updated component spacing (#2962) * fix(global): hid vertical nav at 1200px, updated component spacing * Moving some top level scss files into directory structure" (#2960) * chore(scss): moved files to base dir(part one) * chore(scss): scss cleanup added 'addons' directory fixed gulp files to handle new directory layout fixed gatsby files to handle new directory layout removed patternfly-imports.scss file * chore(scss): remove addons directory * chore(scss): remove addons directory from gulp.js file * chore(scss): added .scss suffix where needed Also added a check to build step * refactor(separators-dividers): removed component separators, added dividers (#2944) * fix(components): removed transparent borders (#2963) * fix(modal): added header, moved padding from container to elements (#2969) * fix(modal-box): added header, moved padding from container to elements * fix(nav-scroll): updated nav buttons to inline (#2942) * fix(content): margin should not be on first-child or last-child (#2930) * fix(content): removed margin-top from first-child, removed margin-bottom from last-child * feat(label): refactored label component (#2943) * feat(label): refactored label component * fix(components): removed presentational hover/active/focus/disabedl classes (#2975) * fix(components): added BEM elements that wrap icons (#2927) * fix(form): refactored label/control sections, added label help (#2766) * fix(form): create label/action section of form group, refactor css * fix(chipgroup): updated chip group behavior, structure (#2961) * fix(wizard): reworked wizard so it can be used in modal (#2964) * refactor(nav-and-sidebar-theme): updated nav to dark theme (#2978) * chore(v4): merge master (#3000) * fix(file-upload): removed message container, added form to error example (#2807) * fix(file-upload): removed message container, added form to error example * chore(fileupload): updated examples to be a div instead of form * feat(docs): publish docs to NPM (#2839) * fix(md): add example css to dist (#2840) * chore(lint): dont lint example CSS (#2841) * feat(base): made shield styles optional by default (#2769) * Revert "feat(base): made shield styles optional by default (#2769)" (#2867) This reverts commit 0b32834. * fix(table): updated text in column management demo modal (#2875) * feat(infrastructure): parse hbs files (#2865) * feat(infrastructure): parse hbs files * fix(select): fixed attribute issue with select-menu-fieldset * fix(select): update aria-label usage on select-menu-fieldset * for non-group menus, use aria-label="Select input" * for grouped menus, use aria-labelled by on fieldset, labeled by the group title * updates match the react select component examples Co-authored-by: Michael Coker <mcoker@redhat.com> * chore(repo): replaced 288 occurences of patternfly-next with patternfly (#2880) * fix(repo): update release notes (#2900) * chore(snippets): gulpify snippets, add html validation (#2894) * chore(snippets): gulpify snippets, reduce build time to 5s * fix scripts * fix(demos): publish demos to NPM (#2908) * fix(release-notes): fix formatting of release notes (#2909) * fix(release-notes): fix formatting of release notes * fix closing parentheses * docs(conduct): add missing code of conduct (#2945) * fix(bug): updated steps to be used for dev env (#2952) * Readme fix 2947 (#2957) * fix(bug): updated steps to be used for dev env * fix(bug): have both dev setups documented * fix(bug): have both dev setups documented * fix(bug): readme changes added back in the cli step also removed the dev:lite config for now This is something that we can share when talking with end user's * fix(bug): readme changes added back in the cli step also removed the dev:lite config for now This is something that we can share when talking with end user's * fix(release-notes): updated release notes for 2020.05 release (#2970) * chore(dev-lite): remove examples and components on delete (#2984) Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Joachim <jschuler@redhat.com> Co-authored-by: Michael Coker <mcoker@redhat.com> Co-authored-by: Dana Gutride <dgutride@gmail.com> Co-authored-by: Doug Donahue <57504257+ddonahue007@users.noreply.github.com> * fix(v4): force bump (#3001) * fix(table-row-height): fixed borders, row height, focus (#2965) * feat(global): made redhat font default, add opt-in for overpass (#2955) * feat(global): made redhat font default, add opt-in for overpass * fix(card): increase header specificity * fix(nav): made nav__list a flex parent (#3006) * fix(docs): bump gatsby-theme to fix nav (#3017) * fix(global): replaced use of RHD with RHT, remove RHD (#3023) * fix(global): replaced use of RHD with RHT, remove RHD * chore(table): changed column management modal demo button to link (#3036) * fix(docs): bump theme to fix top nav (#3029) * fix(docs): bump theme to fix top nav * upgrade gatsby * bump react as well * fix(components): added pf-m-active to toggles (#3038) * fix(card): moved __header to __title, __head to __header (#3035) * fix(card): moved __header to __title, __head to __header * fix(toolbar): removes pf-c-toolbar component (#3039) * fix(toolbar): removed pf-c-toolbar component * fix(toolbar): removed toolbar layout (#3045) * fix(data-toolbar): renamed data-toolbar to toolbar (#3046) * fix(aboutmodalbox): increased specificity of close button selector (#3008) * fix(backdrop): removed blur, renamed var (#3009) * fix(applauncher): cleanupvariables (#3012) * fix(optionsmenu): cleaned up vars (#3018) * fix(vars): removed golden ratio var (#3014) * fix(wizard): removed unnecessary property declaration and var (#3013) * feat(spacer): added 80px spacer (#3027) * feat(spacer): added 80px spacer * fix(tabs-box-border-top): fixed box vertical border top (#3051) * fix(pagination): removed options menu per page text styling (#3047) * fix(chip-group): refactored structure so chip-group no longer nests (#3058) * fix(chip-group): refactored structure so chip-group no longer nests * fix(dropdown): cleaned up vars (#3020) * fix(pagination): updated bottom pagination design (#3050) * fix(pagination): updated bottom pagination design * fix(datalist): cleaned up vars (#3025) * fix(switch): cleaned up vars (#3026) * fix(components): split out transform variables (#3037) * refactor(nav-structure): removed __simple-list, added support for -m-horizontal/-m-tertiary at root (#3062) * refactor(nav-structure): removed __list-tertiary * fix(table-modifier-bugs): fixed truncate and wrap mod bugs (#3031) * fix(table-modifier-bugs): fixed truncate and wrap mod bugs * fix(select): adjusted chip group margin in toggle (#3070) * fix(button): updated control variation disabled state (#3049) * fix(button): updated control variation disabled state * fix(page): removed unnecessary vars (#3066) * fix(button): clean up vars (#3028) * fix(button): clean up vars Co-authored-by: Michael Coker <mcoker@redhat.com> * build(deps): bump minimist from 1.2.0 to 1.2.3 in /build/patternfly-cli (#2925) Bumps [minimist](https://github.com/substack/minimist) from 1.2.0 to 1.2.3. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.0...1.2.3) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(modal-box): added __header element (#3084) * fix(modal-box): added __header element * fix(chip): adjusted chip top/bottom padding, chip group margin in select (#3079) * fix(datalist): fixed shadows on selected rows (#3068) * fix(accordion): cleaned up vars (#3016) * fix(select): cleaned up vars (#3019) * fix(nav-vars): added missing padding--xl vars (#3090) * fix(page): removed pf-m-mobile/icon/user, added hidden/visible (#3091) * fix(table-vars): updated min-width vars, removed unused (#3074) * fix(table-vars): updated min-width vars, removed unused * fix(emptystate): split single padding var to top/right/bottom/left (#3092) * chore(master): change release stream to v4 Co-authored-by: Matt Nolting <matthew.nolting@gmail.com> Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com> Co-authored-by: Christie Molloy <cmolloy@redhat.com> Co-authored-by: Evan <evan.wilkinson@gmail.com> Co-authored-by: Joachim <jschuler@redhat.com> Co-authored-by: Michael Coker <mcoker@redhat.com> Co-authored-by: VA Kenyon <35377991+ValerieKenyon@users.noreply.github.com> Co-authored-by: Doug Donahue <57504257+ddonahue007@users.noreply.github.com> Co-authored-by: Dana Gutride <dgutride@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

mattnolting · 2020-05-14T18:19:13Z

Release notes verified

christiemolloy added 4 commits April 2, 2020 15:44

fix(alert): visual style updates

394ffe5

Merge branch 'v4' into bc-iss-2659

dc4e7f4

fix(alert): more updates

9811e3a

fix(alert): fix visuals

4dcfb9a

christiemolloy requested review from mcoker, mattnolting, mcarrano and mceledonia April 3, 2020 15:37

mcarrano requested changes Apr 3, 2020

View reviewed changes

mcoker reviewed Apr 3, 2020

View reviewed changes

mcoker reviewed Apr 4, 2020

View reviewed changes

mcoker requested changes Apr 4, 2020

View reviewed changes

fix(alert): add feedback

47b0257

mcoker reviewed Apr 6, 2020

View reviewed changes

mattnolting reviewed Apr 7, 2020

View reviewed changes

fix(alert): lots of feedback

bf8f472

fix(alert): float button right

1ffcc95

fix(alert): rework close button

96ada9e

mcoker reviewed Apr 8, 2020

View reviewed changes

christiemolloy added 2 commits April 9, 2020 16:18

fix(alert): update margin

349a64d

Merge branch 'v4' into bc-iss-2659

6dd2d11

mcoker reviewed Apr 9, 2020

View reviewed changes

christiemolloy added 3 commits April 13, 2020 09:15

fix(alert): feedback

d7e63ed

fix(alert): use border instead of pseudo

18a60a3

fix(alert): update margin right for icon

ceebf04

mcoker approved these changes Apr 15, 2020

View reviewed changes

mattnolting self-requested a review April 15, 2020 20:40

mattnolting approved these changes Apr 15, 2020

View reviewed changes

mcoker merged commit 00bbf5d into patternfly:v4 Apr 15, 2020

mcoker mentioned this pull request Apr 15, 2020

Alert - updates to support new design patternfly/patternfly-react#4082

Closed

christiemolloy requested review from mattnolting and mcoker April 23, 2020 18:05

mcoker reviewed Apr 24, 2020

View reviewed changes

mattnolting mentioned this pull request May 5, 2020

Rename alert grid vars #2114

Closed

mattnolting added the Release notes reviewed and approved label May 14, 2020

mcoker mentioned this pull request May 18, 2020

alert: Actionable alerts are cramped in mobile views. #3125

Closed

This was referenced Jul 2, 2020

Validate all URLs cockpit-project/cockpit#14299

Closed

Validate all URLs cockpit-project/cockpit#14300

Closed

This was referenced Sep 25, 2020

Validate all URLs cockpit-project/cockpit#14670

Closed

Validate all URLs cockpit-project/cockpit#14671

Closed

Validate all URLs cockpit-project/cockpit#14672

Closed

jelly mentioned this pull request Sep 12, 2024

PatternFly 6 upgrade preparation work cockpit-project/cockpit#20973

Open

23 tasks

	padding-top: var(--pf-c-alert__description--action-group--PaddingTop);
	--pf-c-alert__action-group--PaddingTop: var(--pf-c-alert__description--action-group--PaddingTop);

	font-weight: var(--pf-c-alert__action-group--c-button--FontWeight);
	font-weight: var(--pf-c-alert__action-group__c-button--FontWeight);

	grid-template-columns: var(--pf-c-alert--grid-template-columns);
	grid-template-columns: var(--pf-c-alert--GridTemplateColumns);

	grid-column-gap: var(--pf-c-alert--grid-column-gap);
	grid-column-gap: var(--pf-c-alert--GridColumnGap);

	--pf-c-alert--grid-template-columns: max-content 1fr max-content;
	--pf-c-alert--GridTemplateColumns: max-content 1fr max-content;

fix(alerts): update styling for better accessibility #2921

fix(alerts): update styling for better accessibility #2921

Conversation

christiemolloy commented Apr 3, 2020 • edited by mattnolting Loading

Breaking Changes

patternfly-build commented Apr 3, 2020 • edited Loading

mcarrano left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker Apr 4, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

christiemolloy commented Apr 6, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker commented Apr 6, 2020

mattnolting left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattnolting Apr 8, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as outdated.

christiemolloy commented Apr 7, 2020

mcoker commented Apr 8, 2020

mcoker commented Apr 8, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker Apr 8, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

mattnolting left a comment

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

christiemolloy commented Apr 24, 2020

mattnolting commented May 14, 2020

christiemolloy commented Apr 3, 2020 •

edited by mattnolting

Loading

patternfly-build commented Apr 3, 2020 •

edited

Loading

mcoker Apr 4, 2020 •

edited

Loading

mattnolting Apr 8, 2020 •

edited

Loading

mcoker Apr 8, 2020 •

edited

Loading