Update FilterBuilder UI according to UX team's new specs

morganadrales commented 1 month ago

Changes

Updated FilterBuilder UI with the following changes:

made the logical operator always visible
- set width to 128 px
made the add button on each rule always visible (previously was only shown on last rule)
- also made the button the default style with border rather than borderless
- separated the add and delete button where the add button is left-aligned and the delete is right-aligned
removed borders around each rule to prevent too many horizontal lines

These changes are based on the UX specifications created by Dan Abney here.

Testing

Tested with the presentation test app: Before:

After:

Note: the removal of the borders/adjustment of spacing may require CSS changes in the InstanceFilterDialog component

saskliutas commented 1 month ago

Changes looks good to me. I just noticed that some value inputs and toolbar buttons are smaller than property and operator selectors. This results in misaligned UI. As you are updating styles could you fix this as well?

I think value input should have same height as property and operator selectors. Toolbar buttons can be smaller but should be aligned to the middle of rule row.

You can check this in AppUI storybook. Property and operator selectors have heigh of 26px, while value input and toolbar buttons have height of 24px. All components are aligned to the row top.

GerardasB commented 1 month ago

@Mergifyio backport release/4.17.x

mergify[bot] commented 1 month ago

backport release/4.17.x

✅ Backports have been created

* [#1070 Update FilterBuilder UI according to UX team's new specs (backport #1059)](https://github.com/iTwin/appui/pull/1070) has been created for branch `release/4.17.x` but encountered conflicts

iTwin / appui