v1.6.0

Under the hood

Integration of Cyano (which includes the React Hooks API for Mithril). This has resulted in more coherent (and also slighly smaller) code.

CSS

Function writeCSS in polythene-scripts can be used to write themed CSS to a file. The function accepts new option wrapInGlobal to use with CSS Modules: set to true to wrap the generated css inside a :global { ... } tag.

Focus indication

Keyboard TAB navigation now highlights components that have focus. Pressing ENTER executes the equivalent of a click.

Affected components: Button, Icon Button, FAB, List Tile, Checkbox, Radio Button, Switch, Tabs.

The highlight is created by element with className pe-button__wash. The color can be themed with variables:

• color_light_wash_background and color_dark_wash_background
• color_light_wash_opacity and color_dark_wash_opacity

Raised Buttons also show an extra shadow on focus.

Closing dialogs and drawers with ESCAPE

To improve accessibility, all dialogs and drawers (including modal and fullscreen dialogs) can now be closed by pressing ESCAPE.

Use new option disableEscape to prevent ESCAPE from closing the dialog or drawer.

Bug fixes

• ButtonGroup: fixes a layout issue with arrow button.
• TextField: fixes a bug where large numbers of Text Field instances on the page caused a delay due to excessive redrawing.
• Fixes a bug where Webpack's production build (using treeshaking) caused JS-in-CSS functions to drop, resulting in missing styles in the document head.

Removed

• renderer is no longer exported from polythene-mithril and polythene-react.
  • For Mithril: use m.
  • For React with JSX: no change.
  • For React with hyperscript: use react-hyperscript or ReactDOM.render.
• Most deprecation warnings have been removed.

Other changes

• Raised Button styles are now defined by CSS only. Shadow component contains a couple of extra hepler classes for this purpose.