Widgets 7 Plan

[tomdye]

Widgets 7 Plan

Epic for all the planned/desired enhancements to be released alongside Dojo v7.

Note: Issue creation in progress across these

High Level Goals

• Widgets to be built and tested using the Dojo CLI exclusively
• Complete the Material theme
• Align and improve upon API of existing widgets
• Expansion of Widget library
• Create high-level layout / app widgets

Use of CLI

Widgets currently use a fragmented dev toolchain. We should convert to using the dojo cli tooling consistently and ensure it has capability to build both @dojo/widgets and our user's third party component libraries.

• Use the dojo cli to test widgets
• Use the dojo cli to build and run widget examples

Theme

The goal here is to create a material theme for our entire widget library. The structure for this was started in widgets 6 but not completed. The epic below links to the themes repo.

• Material Theme
• Upgrade build-theme to webpack 4

Example / Test changes

Our existing functional tests are known to be flakey and to absorb large quantities of developer time both writing and fixing them. The framework itself is well tested across a range of browsers so there is little need to do this here also. We should ensure that adequate manual testing / usable examples are created when widgets are worked on.

• Drop existing functional tests
• Use codesandbox example approach to demonstrate widget functionality

Existing widget improvements

This will be partly hangovers that did not get fully completed for dojo-6.0. This will make our existing widgets more compatible with the base / reusability direction we intend to take for dojo-7.0.

• Align onValue / value / onKey apis
• Align mouse / pointer events
• Change invalid -> valid properties
• Add helperText where appropriate
• Select / Combobox property alignment / menu usage
• Dialog improvements
• custom validator helpers

Split apart existing generic widgets

We have several overloaded widgets; checkbox, text-input, select etc. We should split them into smaller more focused widgets that work with a common base. The following list may not be extensive:

• email input
• number input
• telephone input
• constrained input
• password input
• date input
• type ahead
• switch (take out of checkbox)
• Add native select

New Base Widgets

Creating new base widgets will give us a larger library to build more complex widgets on top of. This will help bulk out our offering and fill in the gaps required to build applications.

• Checkbox group
• Radio group
• Chip
• List
• Item
• Expansion panel (rework of title-pane?)
• Form (middleware?)
• Menu (to be used in dropdown / context / select / typeahead etc)
• Paginated-menu

New Composite / Layout widgets

These widgets will use our existing base widgets to create highly re-usable and effecting application building blocks. These will be highly opinionated but fully themeable.

• Context menu
• Snackbar manager
• Sticky header
• Login Widget
• Multi select typeahead (using chips and typeahead)
• Confirmation dialog
• Stepped wizard
• 2 column layout
• 3 column layout
• list variants (tbd)
  • DND List

Advice/guidelines for working on official widgets

• Use (new) official CLI toolchain
• Prefer function-based
• Prefer TSX
• Prefer simplicity and single, consistent ways of doing A Thing
• Use assertion template for testing
• Add examples in defined location & use these as 'integration' tests
• Document widget API in appropriate locations to allow auto-generation of portions of the widget docs on site