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

A11y report: https://patternfly-pr-6614-a11y.surge.sh

@mcoker @andrew-ronaldson This doesn't include any update for the "double border" comment mentioned in the original React issue. I wasn't sure what the consensus was on that. We could remove the native focus outline on the text input group's text input when it's inside of a typeahead, expanded MenuToggle, which should work with how this sort of variant is setup in React for typeaheads (the input itself never loses actual focus). Something along the lines of this:

I see a little thing when in RTL. I haven't dug in to see what it's coming from.

Discussed offline, the text input group borders were changed in a way that the .pf-m-plain modifier is no longer working as expected. Also noticed that there is no border change on focus. A proposal for an update that could address this is:

• Move the border from .pf-[v]-text-input-group::before back to .pf-[v]-text-input-group__text::before
• Remove any references to .pf-[v]-text-input-group__text::after (no longer needed)

2 more nice-to-haves for text input group would be:

• Add an example for the .pf-m-plain variation
• Focus styles aren't working correctly. I would probably group some focus styles with the existing :hover styles
  • Something that mimics the v5 styling, maybe something like this?

    @at-root .#{$text-input-group}__text:focus-within,
    &:hover {
      --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
     }
    

@mcoker addressed comments above, however:

Focus styles aren't working correctly

If we would want the focus styles to match hover style, we'd probably need to focus-within both the TextInputGroup and MenuToggle (though maybe just for typeahead variant). Using just focus works when the text input element receives focus to change the outer pf-m-c-text-input-group border color, but focusing any utilities in a text input group results in the border color not changing still. Same goes for the typeahead menu toggle.

Could be a question for design. If it's any consolation, while it may look odd to not have the outermost border color change, it also may not be necessary since everything else (should) have its own focus styles.

🎉 This PR is included in version 6.0.0-alpha.158 🎉

The release is available on:

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

Your semantic-release bot 📦🚀