Material 3 components for Slint

[NigelBreslaw]

This is a tracking issue for implementing the Material components in Slint.

Aims

Keep it as close to the Material 3 spec as possible. So people can reuse the existing Figma Material Design Kit, theme builder, etc.

Have a new complete component set for the Slint MPU/MCU platforms that unlike desktop, iOS or Android have no standard components. Material 3 was chosen as it's well known and has excellent touch support.

Deliver a full component set and a GALLERY that showcases them all.

The Material Components for Web Shows a much more detailed set of components. These might be useful for examples as opposed to actual extra components which might have an unreasonable maintenance burden?

Open Questions:

Support the Material theme builder? It has a JSON export option that could be converted to a Slint palette?

Meta questions

Theme support?

Layer / portal support. In React components have the ability to 'portal'. This is where they draw all or part of the UI to another layer. For example a snack bar shows over most content. A context menu may be activated by a button in VerticalLayout, but you want the menu to overlap all app content, not run under the next item in the container.

'Elevation'. This is the Android/Material property names to manage drop shadows. React Native is confusing here because it supports both systems, but only elevation works on Android. Maybe we can avoid some pain here e.g. we keep the Slint 'shadow' properties but provide a Material helper function you can use to map elevation to shadow?

Material Icons can be found here. It's a sizeable file. Anything needed to reduce it to only items the project uses, convert to bitmap on low end devices, etc?

Phase 1 Independent components

Badges

Button (common)

Floating Action Button (FAB)

Extended FAB

Icon button

Segmented Button

Switch

Radio Button

Checkbox

Chips

Divider

Progress Indicator

Sliders

Phase 2 Complex components

Text Fie

lds

Dialog

Alert

Simple

Confirmation

Scrollable

Snack Bar (NOTE: High priority? Gets used a lot, even for debugging and has some tricky issues that need solving (drawing above all other content)

Tooltips

Cards

Date picker

Time picker

Lists

Search

Menus

Data Table

Phase 3 View components

Carousel

Navigation Bar (similar to Tabs?)

Tabs (sim

ilar to Nav Bar?)

Navigation Drawer

Navigation Rail

Bottom Sheet

Side Sheet

Phase 4 Critical components that are not part of the spec, but expected anyway? i.e. pull to refresh.