v1.5.2

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

v1.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 Style 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).

v1.4.1

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

v1.3.3

Fixes Drawer content pane height.

v1.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 Style 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

Themes are becoming 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/Style 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

v1.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

v1.1.1

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