Change log

March 23, 2020 ยท View on GitHub

1.7

1.7.4

Added typing for Mithril 1.x (Button and ListTile).

1.7.3

Bug fix:

  • Added 2 missing index.d.ts entries.

1.7.2

Fixes a bug in TextField where event options were overwritten.

1.7.1

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

1.7.0

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: m.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.

1.6

1.6.5

  • 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

1.6.4

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.

1.6.3

Bug fixes:

  • Drawer: fix responsive drawer.

1.6.2

Bug fixes:

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

1.6.1

Bug fixes:

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

1.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. NOTE: writeCSS has been replaced in 1.7.1 with an standalone library.

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.

1.5

1.5.4

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

1.5.2

  • Fixes for Mithril 2
  • Button: Removed Button variable padding_h_border: use padding_h
  • Documentation: Styling with variables - added section about performance
  • Other bug fixes

1.5.0

Bundle size

All packages now contain sideEffects: false as hint to Webpack to perform tree shaking when creating a production build. This means that bundles created with Webpack are now significantly smaller.

For example, the bundle size from package "tests-bundle-mithril-all" went from 320 KB to 182 KB (including Mithril), a reduction of 57 percent. With gzip compression the size is further reduced to 71 KB.

TypeScript type definitions

All components now contain TypeScript type definitions. This makes it easier to use in TypeScript projects and helps to ensure to select valid component options. Read more in TypeScript.

CSS

Functions addStyle and getStyle now accept a parameter scope to restrict a theme style to a CSS scope, for example a specific page. See Styling with variables for an example.

Components

  • Card:
    • Option content is now restricted to contain only the list of option objects for distinct card areas. To pass other content, use children.
  • Drawer:
    • A drawer now uses a div as wrapping element instead of form.
  • List Tile:
    • Added options inset (further specialised with insetH and insetV) and rounded for the creation of Drawer "destination labels". Both options are themeable.
  • TextField:
    • Additional DOM properties such as autocapitalize (autoCapitalize for React) can be passed with option domAttributes.
  • Toolbar:
    • Better aligned title and first icon to the grid, differentiating whitespace on mobile and tablet.
    • Increased font size to 20px (which can be overridden by theming).

1.4

1.4.2

Fixes and improvements for Radio Group:

  • New option checkedValue: checks the Radio Button that has this value. It is ignored when one of the group's Radio Buttons uses option checked. This is useful when you maintain the state of the value yourself.
  • Added examples for state management:
  • defaultSelectedValue is deprecated; use defaultCheckedValue

1.4.1

  • Various fixes for IE 11.

1.4.0

  • Updated dependencies (Babel 7, React 16.7.0, preparation for Mithril v.2).
  • Smaller transpiled files
  • Bug fixes

1.3

1.3.2

Material Design version 2 -- first small changes

Google has updated their Material Design specs ("Version 2"). A couple of the changes have been included in this release; more will follow in next releases.

CSS

CSS creation has been optimized, specifically when creating themed CSS. Instead of recreating the entire CSS, now only a minimal subset is created based on the passed variables (see Styling with variables how to use it).

In terms of internal organisation, CSS variable files have been moved to each component's CSS package, which is a more logical location.

Themes and behavior

Theming has become more powerful. Next to setting dimensions and colors, a number of components can now change behavior by setting a theme "switch" variable in addStyle.

For example:

  • Change a Text Button to a Contained Button using contained: true
  • Set a Drawer to cover behavior using cover: true
  • Make a Dialog appear full screen using full_screen: true
  • Add a backdrop to a Menu with backdrop: true

The switch variable may trigger one or more variables, or changes JavaScript behavior under the hood. For example, a full screen Dialog also disables the ESCAPE key.

While this seems to duplicate component options, it makes sense when components need to appear and behave differently based on the available screen size.

Themes and media queries

With an additional argument to addStyle it is now possible to restrict a theme style by media query.

Conceptually, this is very close to writing CSS with media queries, but it has the benefit that you don't need to know the internal component structure - you still work with style variables.

Some examples:

  • Have a normal Dialog but make it full screen on small screen sizes
  • Have a normal local Menu but make it full width on small screen sizes
  • Create a Drawer that behaves differently on different screen sizes: Mithril example, React example
  • Change the image size on a Card, without changing the component options

See CSS/Styling with variables how to use this feature.

Components

  • New component
    • Button Group - container for a row of buttons; use this to create toggle buttons or split buttons
  • Button
    • New options for varying the width and height: extraWide and highLabel (useful in Button Group)
    • New option dropdown that adds a dropdown triangle
    • New option contained to create a Contained Button appearance
    • New option raised to create a Raised Button appearance
      • A raised button is automatically a Contained Button, and adds an interactive shadow depth when tapped
    • Added default letter spacing (which can be overridden with CSS style variable letter_spacing)
    • MD2: the border radius is now set to 4
    • Bordered button has a default medium gray border color
  • Dialog
    • Style option full_screen can be used to make a Dialog appear full screen, without having to set the component option fullScreen. This is useful when the full screen appearance should be limited to specific screen dimensions.
  • Menu
    • Reworked to support dropdown menus - this includes the new Button Group and Button's dropdown option
    • MD2: the menu is now positioned below its target (instead of covering the target), unless explicitly overridden with offsetV: 0
    • Added scaling effect for menus with origin set (with corresponding CSS vars animation_show_origin_effect_css and animation_hide_origin_effect_css)
    • New option scrollTarget (to scroll a menu element into view)
    • New option height (pixel or percentage value, or "max" to use the maximum available height within the parent element)
    • New option backdrop to make a menu stand out more
    • Long lists are now scrollable
  • Radio Group
    • Added option defaultSelectedValue
  • Shadow
    • CSS style variables have been renamed: z has been changed to shadow_depth
  • Slider
    • Added CSS style variables color_[tint]_tick_value, color_[tint]_pin_label and color_[tint]_pin_background
  • Spinners and Tabs
    • CSS style variables for animation durations/delays have been changed to strings that include the unit ("ms" or "s")
  • Added RTL support for TextField, Search, Icon, Icon Button, FAB
    • Supporting CSS class pe-rtl--flip can be used to flip directional icons or buttons

Deprecations

  • Card, Dialog, Drawer, Menu, Shadow, Spinner, Toolbar:
    • z is deprecated; use shadowDepth
  • Menu
    • offset is deprecated; use offsetH
    • size is deprecated; use width
  • Raised Button has been deprecated; use Button with option raised: true
  • Switch
    • zOff is deprecated; use shadowDepthOff
    • zOn is deprecated; use shadowDepthOn

Other

  • webfontloader
    • Aligned configuration to upstream library
    • Now emits loading status callbacks
  • Various bug fixes

1.2

1.2.0

Components

  • Card
    • It is now possible to embed a video using the media item
    • The image dimmer element is now only created when option showDimmer is passed
  • Icon Button
    • Icon Button can now have an optional label; visually consistent with a Checkbox with a custom icon.
  • List Tile
    • Added CSS style variable title_line_count to make the line count of the title configurable
  • Tabs
    • Option selectedTab is deprecated in favor of selectedTabIndex
    • CSS style variable label_opacity has been removed in favor of setting the transparency in the label color (using rgba); this creates a better color transition when selecting the tab
  • Hover styles: Button, Raised Button and Icon Button have optional hover CSS variables to generate hover styles

Other

  • Various bug fixes

1.1

1.1.0

Core

  • Updates to transition code:
    • The API of option transitions has changed - see Transitions documentation and a from 1.0 to 1.1 change list
    • Transitions now read existing CSS styles (so you can define some or all transition properties in CSS too)
    • It is now possible to set transition duration and delay in a component theme (using component style variables)
    • Added options showTimingFunction and hideTimingFunction

Components

  • New component
    • Drawer to create side navigation
  • Harmonisation of border options:
    • Button, Card and List: options borders and bordered are deprecated; use border instead
    • List: option indentedBorders is deprecated; use indentedBorder instead
    • Dialog: option borders is unchanged (the option refers to top and bottom border)
  • List Tile
    • Added style variables for for titles and the front element: font size, weight and color
    • Added option navigation to use a Material Design navigation style, as specified in navigation drawers
  • Toolbar
    • Added option z to add a shadow
    • Added option fullbleed to remove side padding
    • Added option border to set a bottom border
  • Button
    • Removed onmouseover listener
  • Added RTL support for Card, Checkbox, Dialog, List Tile, List, Radio Button, Switch, Toolbar

Example code

  • Updated Text Field form validation to match Powerform v3
  • Tabs:
    • Added nested Tabs example
    • Added "hide all selection indicators"

Tooling

  • Webpack 4 support

Other

  • Various bug fixes

1.0

1.0.0

Equal to rc.11.

Pre-releases

See: Change log (pre-releases)