Resolve height issue in workspace preview

[matthewcarleton]

The workspace preview could use an option to set the height of the preview container. @srambach suggested something similar to how we approach full screen only.

[jgiardino]

FYI, for the dropdowns, I added a class and used it like this:
<Example className="is-expanded-dropdown" heading="Dropdown Expanded">{dropdownExpanded}</Example>

Also, I needed additional styles when the dropdown menu was right-aligned, so I used two classes:
<Example className="is-expanded-dropdown is-right-aligned" heading="Right Aligned">{dropdownRightAligned}</Example>

[matthewcarleton]

I don't know the best way to do it but should we think about documenting this? This came up for me because the fixed height that was applied to the body was causing issues.

[jgiardino]

+1

The classes I added specifically for the dropdown component might come in handy for other components. I'm all for documenting the preview classes and explaining what they do so that they can be reused for other components. I think we would just create these classes as needed for new component examples.

For the fixed height class I added, that value is specific to the dropdown height. Maybe we can use custom css variables applied to the example to set the height based on the component example? Or we could have a range of fixed sizes, like sm, md, lg?

[dgutride]

Agree to not add fixed height on the preview, it will be obvious if somebody does add it back.
Add minHeight="5000rem" (or something similar to Example component in react for use by devs)