Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Allow the select and multiselect filter controls to scroll content #1094

Merged
merged 2 commits into from
Jul 10, 2023

Conversation

sjd78
Copy link
Member

@sjd78 sjd78 commented Jul 5, 2023

Add param isScrollable, and released css, to allow the patternfly Select components at the core of SelectFilterControl and MultiselectFilterControl to scroll its content as needed. This is a replication of the patternfly Menu isScrollable prop[1].

Summary of changes:

  • Add isScrollable (with a default value of false) to SelectFilterControl and MultiselectFilterControl

  • Add select-overrides.css to implement the scrolling for the components

  • Minor tweaks to the filter select controls to mirror code formatting as they are very similar components

Resolves: https://issues.redhat.com/browse/MTA-485
[1]: https://www.patternfly.org/v4/components/menu#scrollable-menus

@sjd78
Copy link
Member Author

sjd78 commented Jul 5, 2023

What it looked like before:
Screenshot from 2023-07-05 19-33-51

What it looks like now:
Screenshot from 2023-07-05 19-29-23

@codecov
Copy link

codecov bot commented Jul 5, 2023

Codecov Report

Patch coverage: 33.33% and project coverage change: -0.01 ⚠️

Comparison is base (573bce2) 44.11% compared to head (b2da3bb) 44.10%.

❗ Current head b2da3bb differs from pull request most recent head 9c97e07. Consider uploading reports for the commit 9c97e07 to get more accurate results

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1094      +/-   ##
==========================================
- Coverage   44.11%   44.10%   -0.01%     
==========================================
  Files         177      177              
  Lines        4477     4487      +10     
  Branches      997     1001       +4     
==========================================
+ Hits         1975     1979       +4     
- Misses       2491     2497       +6     
  Partials       11       11              
Flag Coverage Δ
unitests 44.10% <33.33%> (-0.01%) ⬇️

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

Impacted Files Coverage Δ
.../shared/components/FilterToolbar/FilterControl.tsx 37.50% <ø> (ø)
...d/components/FilterToolbar/SelectFilterControl.tsx 13.63% <28.57%> (+3.11%) ⬆️
...ponents/FilterToolbar/MultiselectFilterControl.tsx 10.93% <40.00%> (+2.60%) ⬆️

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

Copy link
Contributor

@gildub gildub left a comment

Choose a reason for hiding this comment

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

Looks great.
Just waiting to settle PF v5 migration before merging.

@sjd78 sjd78 force-pushed the filter-controls-multiselect branch from 16aaebd to 9a5178e Compare July 6, 2023 15:50
Copy link
Collaborator

@mturley mturley left a comment

Choose a reason for hiding this comment

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

Also LGTM, but yeah I think it would be easier to rebase this on #1078 than vice versa

@sjd78 sjd78 force-pushed the filter-controls-multiselect branch from 9a5178e to adf271d Compare July 6, 2023 21:23
Copy link
Member

@ibolton336 ibolton336 left a comment

Choose a reason for hiding this comment

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

LGTM!

@sjd78 sjd78 force-pushed the filter-controls-multiselect branch 2 times, most recently from b2da3bb to 9c97e07 Compare July 10, 2023 14:02
@sjd78
Copy link
Member Author

sjd78 commented Jul 10, 2023

rebased and updated to work with PF5

@sjd78
Copy link
Member Author

sjd78 commented Jul 10, 2023

The PF5 version of the Select component is built on the Menu component, so the isScrollable prop should work without the CSS overrides in this PR.

Since we're still using the deprecated/PF4 component, the CSS overrides are still needed.

Add param `isScrollable`, and released css, to allow the patternfly
`Select` components at the core of `SelectFilterControl` and
`MultiselectFilterControl` to scroll its content as needed.  This
is a replication of the patternfly Menu `isScrollable` prop[1].

Summary of changes:
  - Add `isScrollable` (with a default value of `false`) to
    `SelectFilterControl` and `MultiselectFilterControl`

  - Add `select-overrides.css` to implement the scrolling for the
    components

  - Minor tweaks to the filter select controls to mirror code
    formatting as they are very similar components

Resolves: https://issues.redhat.com/browse/MTA-485
[1]: https://www.patternfly.org/v4/components/menu#scrollable-menus

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
@sjd78 sjd78 force-pushed the filter-controls-multiselect branch from 9c97e07 to d10c149 Compare July 10, 2023 14:41
@sjd78 sjd78 merged commit 4cdfa66 into konveyor:main Jul 10, 2023
3 checks passed
@sjd78 sjd78 deleted the filter-controls-multiselect branch July 10, 2023 16:03
sjd78 added a commit to sjd78/tackle2-ui that referenced this pull request Jul 11, 2023
Add param `isScrollable`, and released css, to allow the patternfly
`Select` components at the core of `SelectFilterControl` and
`MultiselectFilterControl` to scroll its content as needed. This is a
replication of the patternfly Menu `isScrollable` prop[1].

Summary of changes:
 - Add `isScrollable` (with a default value of `false`) to
   `SelectFilterControl` and `MultiselectFilterControl`

 - Add `select-overrides.css` to implement the scrolling for the
   components

 - Minor tweaks to the filter select controls to mirror code formatting
   as they are very similar components

Backport of konveyor#1094
[1]: https://www.patternfly.org/v4/components/menu#scrollable-menus

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
sjd78 added a commit that referenced this pull request Jul 11, 2023
…rols to scroll content (#1113)

Add param `isScrollable`, and released css, to allow the patternfly
`Select` components at the core of `SelectFilterControl` and
`MultiselectFilterControl` to scroll its content as needed. This is a
replication of the patternfly Menu `isScrollable` prop[1].

Summary of changes:
 - Add `isScrollable` (with a default value of `false`) to
   `SelectFilterControl` and `MultiselectFilterControl`

 - Add `select-overrides.css` to implement the scrolling for the
   components

 - Minor tweaks to the filter select controls to mirror code formatting
   as they are very similar components

Backport of #1094
[1]: https://www.patternfly.org/v4/components/menu#scrollable-menus

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants