Add FormatSetSelector, FormatSetPanel, make UI more consistent

[hl662]

• Adds new FormatSetSelector, FormatSetPanel components to @itwin/quantity-formatting-react. FormatSetPanel component can set an editable boolean flag to allow users to edit a format set.

FormatSetSelector and FormatSetPanel, shown in use in one modal:

• Updated the README for the package, includes an example of editing a format set
• Update FormatPanel, QuantityFormatPanel to be more consistent UI-wise. Includes changing many labels and buttons to be of size small.

FormatPanel before:

FormatPanel after:

• Sort imports, run prettier across the quantity-formatting-react package

Also introduces enhancements to quantity formatting feature in the test-viewer app, focusing on improved property formatting customization, better management of format sets, and updates to dependencies. New tab panels are introduced, separating customizing a format and a format set from each other.

Quantity Formatting Feature Enhancements:

• Added CustomizeFormatPropertyContextMenuItem and related dialog components to allow users to customize the formatting of individual property values directly from the property grid context menu.
• Introduced the FormatSetsTabPanel component, providing a tab panel UI for selecting, editing, and managing format sets, including support for test format sets and integration with the FormatManager.

Code Organization and Refactoring:

• Moved and renamed quantity formatting components (FormatManager, QuantityFormatButton, etc.) into the quantity-formatting directory for better code organization and maintainability.

Format Manager Improvements:

• Enhanced the logic in FormatManager to auto-generate format sets from the opened iModel, including improved event handling for unit system changes and format set management.
  Dependency Updates:

• Updated numerous @itwin dependencies in package.json to their latest 5.2.0 (and related) versions to ensure compatibility and access to new features, including support for unitSystem and description properties of a FormatSet.

UI and Styling Adjustments:

• Updated CSS classes and styles to support the new tab panel layout for format sets and improve the appearance of quantity formatting components.

[aruniverse]

Should that dialog implementation move to this package so consumers wouldn't need to reimplement whole dialog themselves?

This is strictly for the test-viewer, I don't know what the value of moving the dialog into the package would be yet. Talking to UX designers they feel like the configuration of formats and format sets will be in a backstage, in a dedicated settings page. This dialog is an easy way to show users how to surface formats configuration in their viewer.

The UX you've talked to is for desktop apps right? for web apps, are UX also suggesting a backstage? werent there also concerns or requests to not need to do a full pg transition to see changes ?

There is def value in exporting some components for now to get feedback so not everything is baked into our test app

[hl662]

There is def value in exporting some components for now to get feedback so not everything is baked into our test app

I will do this in a separate issue #1470
I don't want this PR to get bulkier

[Copilot]

Pull Request Overview

Copilot reviewed 42 out of 52 changed files in this pull request and generated 1 comment.

Files not reviewed (2)

• apps/learning-snippets/pnpm-lock.yaml: Language not supported
• packages/itwin/quantity-formatting/pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

packages/itwin/quantity-formatting/src/components/quantityformat/FormatSample.tsx:1

• There's an extra closing </div> tag that was removed but the structure suggests it should have been moved rather than removed. The component now has an unbalanced div structure - there are 4 opening div tags but only 3 closing div tags.

/*---------------------------------------------------------------------------------------------

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[aruniverse]

please left align the input fields as mentioned previously in other channels

[hl662]

The input fields are left aligned, they just didn't appear so because iTwinUI's inline labels adds left margins to each component within, leaving it feel unbalanced. I edited the styling for the labels to remove that margin, now it looks more balanced:

[hl662]

Edit: fixed the alignment of the labels so it has a fixed width, and with input fields being stretched to occupy the rest of the row, the input fields will be left aligned

[hl662]

@grigasp @saskliutas I updated test viewer to use 5.2.0 core pkgs, some of the e2e test snapshots are failing, looking at the test artifact, seems like some of the tree node's texts aren't truncated, causing small diffs, is that okay to update the snapshots?

[grigasp]

I updated test viewer to use 5.2.0 core pkgs, some of the e2e test snapshots are failing, looking at the test artifact, seems like some of the tree node's texts aren't truncated, causing small diffs, is that okay to update the snapshots?

Something's not right - it looks like layout of the action buttons is off and labels aren't getting truncated to accommodate them. For example, see the result of Models tree › Density: enlarged > shows outlines when focused using keyboard:

[grigasp]

The screenshots changed due to recent addition of horizontal scroll to virtualized trees. The reason it wasn't rendering as it should was twofold:

1. You didn't bump the version of iTwinUI, so only part of the changes from presentation-hierarchies-react got applied.
2. There was a bug in presentation-hierarchies-react causing the background color of action button to be incorrect. @saskliutas fixed this in [hierarchies-react] Tree actions background color presentation#1079.

I set up a separate PR that only bumps the versions in test-app and updates the screenshots: #1475. Let's merge that in, then you can merge your PR with master and avoid all the unrelated changes.