Skip to content

fix(ui): Fix layout of toolbar and use consistent components#18787

Merged
dvail merged 1 commit intodv/ROX-28622-pf-6from
dv/search-filter-toolbar-consistency
Feb 3, 2026
Merged

fix(ui): Fix layout of toolbar and use consistent components#18787
dvail merged 1 commit intodv/ROX-28622-pf-6from
dv/search-filter-toolbar-consistency

Conversation

@dvail
Copy link
Contributor

@dvail dvail commented Jan 30, 2026 •
edited
Loading

Description

This change is small, but a lot of indentation changes inflate the line count. If ever there was a "hide whitespace" PR...

Not strictly related to PF6, but becomes more of an issue due to the upgrade. This PR make the layout of our CompoundSearchFilter component more consistent with the following changes:

  1. All wrappers of ToolbarGroup and ToolbarItem are removed from parent components
  2. The top level CompoundSearchFilter component is wrapped in a ToolbarGroup internally
  3. All children of the CompoundSearchFilter component are wrapped in ToolbarItem
  4. A CSS override is added to deal with unequal heights of form controls due to a Tailwind conflict (fixed by Brad's CSS loading fix previously, but new PF styles have caused this to issue return)

Thanks @pedrottimark for recent refactors in this area regarding layout next to pagination, which made this change much cleaner to implement.

Benefits:

  1. Spacing is clean and consistent
  2. Removes most className layout props used to deal with this component
  3. Removes internal custom CSS
  4. Removes the need for the calling component to deal with or think about layout

User-facing documentation

Testing and quality

  • the change is production ready: the change is GA, or otherwise the functionality is gated by a feature flag
  • CI results are inspected

Automated testing

  • added unit tests
  • added e2e tests
  • added regression tests
  • added compatibility tests
  • modified existing tests

How I validated my change

Previously:
image

After - manual testing of subcomponent layouts. Manual testing of parent component layout across all other pages.

image image image image image

@dvail
Copy link
Contributor Author

dvail commented Jan 30, 2026 •
edited
Loading

This change is part of the following stack:

Change managed by git-spice.

@openshift-ci
Copy link

openshift-ci bot commented Jan 30, 2026

Skipping CI for Draft Pull Request.
If you want CI signal for your change, please convert it to an actual PR.
You can still manually trigger a test run with /test all

@dvail dvail force-pushed the dv/search-filter-toolbar-consistency branch from 6a11a23 to 9ed3a79 Compare January 30, 2026 21:24
@codecov
Copy link

codecov bot commented Jan 30, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 49.34%. Comparing base (63e3116) to head (9ed3a79).
⚠️ Report is 2 commits behind head on dv/ROX-28622-pf-6.

Additional details and impacted files 
@@                  Coverage Diff                  @@
##           dv/ROX-28622-pf-6   #18787      +/-   ##
=====================================================
- Coverage              49.36%   49.34%   -0.03%     
=====================================================
  Files                   2659     2659              
  Lines                 200649   200572      -77     
=====================================================
- Hits                   99058    98974      -84     
- Misses                 94153    94157       +4     
- Partials                7438     7441       +3
Flag Coverage Δ
go-unit-tests 49.34% <ø> (-0.03%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dvail dvail marked this pull request as ready for review February 2, 2026 13:41
@dvail dvail requested a review from a team as a code owner February 2, 2026 13:42
pedrottimark
pedrottimark approved these changes Feb 2, 2026
View reviewed changes
Copy link
Contributor

@pedrottimark pedrottimark left a comment

Choose a reason for hiding this comment

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

Super head start on layout simplification! Can you put on agenda for office hours?

@dvail dvail merged commit c312405 into dv/ROX-28622-pf-6 Feb 3, 2026
128 of 162 checks passed
@dvail dvail deleted the dv/search-filter-toolbar-consistency branch February 3, 2026 13:16
dvail added a commit that referenced this pull request Feb 3, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
731e227
dvail added a commit that referenced this pull request Feb 6, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
bfe45e3
dvail added a commit that referenced this pull request Feb 10, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
6e1a2e9
dvail added a commit that referenced this pull request Feb 11, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
87e5e77
dvail added a commit that referenced this pull request Feb 12, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
e1f4a44
dvail added a commit that referenced this pull request Feb 13, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
c2679b0
dvail added a commit that referenced this pull request Feb 27, 2026
@dvail
fix(ui): Fix layout of toolbar and use consistent components (#18787)
adc148f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pedrottimark pedrottimark pedrottimark approved these changes

Assignees

No one assigned

Labels

area/ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dvail @pedrottimark