Polythene Versions Save

Fixes a bug in TextField where event options were overwritten.

Fixes TS typings for Mithril's m.route.Link.

Mithril 2.x

Polythene is now compatible with the recent release of Mithril 2.x. Mithril 2 offers better stability and performance and is recommended for Polythene apps with Mithril.

Mithril's API change may have some implications for code written with Polythene:

1. Link building. The m.route.link function has been removed in favor of the m.route.Link component. This leads to a small code change for Polythene component option url:

   Mithril 1.x code:

   h(Button, {
     label: "Update",
     element: "a", // this is the default, so can be omitted
     url: {
       href: route.path,
       oncreate: m.route.link
     }
   })
   

   Mithril 2.x code:

   h(Button, {
     label: "Update",
     element: h.route.Link, // Note the capital L
     url: {
       selector: "a", // this is the default, so can be omitted
       href: route.path,
     }
   })
   

2. Mithril 2.x is much stricter when to use keys in arrays; when a mix of keyed and unkeyed fragments are encountered, the program will bail with an error. Mithril has an elaborate page on keys that helps to solve issues.

Other changes related to Mithril code can be found in the Mithril release notes.

Regular updates

Bug fixes:

• Card: Images did not load properly in some cases. This is now fixed.

Documentation:

• The TextField documentation contained some examples that set the field value programmatically. This led to unexpected behavior in Safari (where the cursor jumps to the end with each change). The documentation was a bit misleading - it is not required to pass the value back to the component. Documentation and demos have been updated.

• Reset CSS has moved from polythene-css-typography to polythene-css-core. This ensures layout consistency without having to force to use polythene-css-typography.

Bug fixes:

• Ripple: multiple ripples were allowed without passing multi.
• Switch: restore style option.

Bug fixes:

• Button: use click area to trigger ripple. This fixes an issue where the content element was not available when the button ripple component was created.

Bug fixes:

• Drawer: fix responsive drawer.

Bug fixes:

• Transitions: prevent appearing when a hiding transition has been canceled.

Bug fixes:

• CSS: fixes too rigorous tree shaking when building with Rollup.
• Dialog: fixes option element.

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.

Includes a fix to allow events on List Tile secondary content.