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