Allow app to configure nimble-dialog size CSS attributes

[jattasNI]

😯 Problem to Solve

As discussed in #1102, the nimble-dialog currently has a fixed size and applications can only change it by setting internal styles. This prevents apps from using it for use cases like a full-screen wizard.

💁 Proposed Solution

We don't have clear guidance about pre-set sizes we want to support yet, so we'd like to allow apps to set an arbitrary size to begin with. This would be via normal CSS attributes like width and height. This is similar to the approach taken by the spinner.

As part of this we should revisit the SLE dialog which is currently setting its size by digging into the Nimble dialog shadow root.

📋 Tasks

• [ ] Update dialog styles.ts to respect width and height set by clients
• [ ] Figure out what to do about other size attributes like min-width, max-height
• [ ] Add design tokens for the known pre-set sizes (the current default size plus the sizes in the PR linked above)
• [ ] Add storybook documentation that shows how to set the size
• [ ] Add a storybook matrix test for each pre-set size

[jattasNI]

This came up again in an SLE HLD about a modal over the software grid. That team is hoping to contribute a fix.

[jattasNI]

This came up again in a request from an NI partner developing SystemLink plugins using Nimble. Their use case was for a wizard-style dialog. I believe the current proposal would meet their needs.

[kroeschl]

I would also like to see this feature (or at least a workaround). My use case is a simple dialog with a single text area and a couple of controls where users sometimes want to enter large amounts of text. In that case, I'd like to allow them to resize the text area and the containing dialog by setting

width: revert;
min-width: 400px;
max-height: revert;