Fix NotAuthorized default actions and clean the code

[fhlavac]

• fixed NotAuthorized default primary actions variant to primary
• cleaned the CloseButton props
• Updated docs to contain reference to the parent components props

[nicolethoen]

couple questions about the style overrides in the CloseButton. They could be turned into follow up issues if need be.

[nicolethoen]

@jessiehuff does removing the padding on this component keep the click area large enough to meet a11y standards?

And I think that in general, to keep these components compatible with right-to-left languages, we might want to avoid using float:right. I think there is a float:end or something like that we should be using. I'm also curious though if there's a PF modifier we could use rather than this custom styling. @mcoker WDYT?

[mcoker]

@nicolethoen good call on the RTL support. There are logical values for float - "inline-end" (used instead of "right" - what you'd use here) and "inline-start" (used instead of "left").

I'm also curious though if there's a PF modifier we could use rather than this custom styling

We don't have a global modifier for this. We do have float utility classes though, and that utility stylesheet is lightweight (https://unpkg.com/browse/@patternfly/patternfly@latest/utilities/Float/float.css) if that's an option, though it's worth noting that our utility classes are not using logical values when they probably should. I opened an issue for that here patternfly/patternfly#6273.

[jessiehuff]

Based on WCAG guidelines, the clickable area should be 44 x 44 pixels. It looks like removing the padding makes it 48 x 36 so we should probably at least increase the height to 44 pixels.

[dlabaj]

i think we are going to need a designer to step in at some point to commit a review once or twice a months of new components. with the changes in v6 I can see this giving us headaches. Fortunately we are small enough right now w can fix stuff.

[edonehoo]

A couple of additional phrasing changes (I've already made the changes in the text below):

in errorstate.md

Custom footer

To override the default action button, specify your own using customFooter.

in warningmodal.md (I can't preview the interactive example, so I may be wrong about the functionality - lmk if so or if I could better expand)

Warning modal with a danger button

You can apply danger styling to a warning modal's confirmation button, so that a user is aware that an action is risky.

Warning modal with a checkbox

To confirm that a user wishes to initiate a selected action, you can add a checkbox to a warning modal.

[fhlavac]

@nicolethoen @edonehoo thank you, the comments should be addressed. I've also changed type of the confirmButtonVariant property for the CloseButton to accept ButtonVariant instead of boolean - I've somehow missed that when reviewing that component before

[fhlavac]

@edonehoo updated, thank you 🙂

[github-actions]

🎉 This PR is included in version 5.1.0-prerelease.5 🎉

The release is available on:

• GitHub release
• npm package (@prerelease dist-tag)

Your semantic-release bot 📦🚀