search

patternfly / patternfly-react

A set of React components for the PatternFly project.
https://react-staging.patternfly.org/
MIT License
793 stars 356 forks source link

Bug - v5 alpha testing - InputGroupItem layout #9234

Closed dlabrecq closed 1 year ago

dlabrecq commented 1 year ago

While testing the Cost management UI, we encountered the InputGroupItem layout / padding.

Before Screenshot 2023-06-02 at 3 46 17 PM

After Screenshot 2023-06-02 at 3 47 45 PM

Code Screenshot 2023-06-02 at 3 48 21 PM

HTML Screenshot 2023-06-02 at 3 53 26 PM

dlabrecq commented 1 year ago

This also effects the text input used as our toolbar filter.

Before Screenshot 2023-06-02 at 4 09 20 PM

After Screenshot 2023-06-02 at 4 08 00 PM

dlabrecq commented 1 year ago

More examples

Before Screenshot 2023-06-02 at 4 11 42 PM

After Screenshot 2023-06-02 at 4 11 24 PM

dlabrecq commented 1 year ago

Apparently, the codemods replaced InputGroupText with InputGroupItem isBox.

Screenshot 2023-06-02 at 9 51 47 PM

tlabaj commented 1 year ago

@thatblindgeye do you know if the code mod was updated after the last updated to inputGroup?

thatblindgeye commented 1 year ago

The codemod should be up to date with the latest updates made to InputGroup.

Our test file for the codemod shows that InputGroupText doesn't get wrapped in InputGroupItem anymore, and running the --fix flag on our test.tsx file ends up with InputGroupText not being wrapped as well for me. The only way I'm able to get the Item wrapper around the Text is if I omit the InputGroupText import, but even then the isBox prop isn't applied.

@gitdallas are you able to reproduce the above issue where InputGroupText is wrapped inside of <InputGroupItem isBox>?

gitdallas commented 1 year ago

@thatblindgeye - it appears that dan was using an old version of codemods - likely the npx cached in the ide.

codemods as of about 6 days ago should not have this issue, and i didn't when running it on koku a few days ago with @latest