[proposal] improve responsive design

[samrichardsontylertech]

Proposal

We should give more attention to responsive design across Forge components in the upcoming release. Most components adapt well to different container sizes, but some of the larger ones like the paginator and toolbar can be difficult to work with when space is constrained. Container queries might help here once they're widely available. Before that we can still find ways to make designing and coding responsively easier

We should also consider the dialog component in this. The way it's implemented right now discourages responsive design, almost requiring it to be opened in full or partial screen mode and remain that way for its lifetime. I've seen a lot of questionable usage stemming from this. With smarter CSS we could default to an auto-switching full screen mode without hurting customization. Other modal components might be worth taking a look at also.

The precision of the user's input device and its ability to hover have an effect on the usability of certain components that should also be evaluated. Many interactive components already have density properties that can help account for this — we should expand that where it makes sense and provide consistent guidance about when and where to use it.

Affected components

All components that do not display or interact well in smaller containers or window sizes or with certain input types (cursor, touch, stylus, etc). Some identified examples include:

• Toolbar
• Paginator
• Text field
• Select
• Dialog
• Tooltip

Benefits

• Reduces burden on consumers to adapt Forge components to responsive scenarios
• Standardizes how those adaptations look and behave
• Makes it easier to use Forge components on mobile and touch-based apps
• Improves accessibility

Caveats

• May increase complexity and performance overhead in simple components
• Could result in overly opinionated components