grommet 2.11.0

v2.11.0

on Node.js Yarn

General

• Added new colors to theme: background-contrast, background-front, background-back, text-weak, text-strong, text-xweak, active-background, selected-background, selected-text, graph-0, graph-1, graph-2, graph-3.
• Added RTL support by adding pad, margin, and border ‘start’ and ‘end’.
• Added size prop to Button to support ‘small’, ‘medium’ and ‘large’ sizes.
• Removed unmounted Layer component from the DOM.
• Added pad prop to Grid.
• Changed Chart to allow onClick to work on ‘bar’ and ‘point’ types.
• Added background prop to Grommet component.
• Fixed Box direction of ‘column-reverse’ to calculate gap height.
• Changed Select and RangeInput to fix an issue with setting value.
• Added border=‘between’ to Box.
• Fixed restoration of tabIndex values for outer focus components.
• Fixed onChange update on Clock.

FormField

• Added round to FormField border theme.
• Added status to FormField validate.
• Changed FormField validate to accept an array and set aria-invalid when validation fails.
• Changed FormField to support background styling tied to error and disabled states.
• Changed FormField to associate rest props with container when not used to automatically render input element.

Form

• Added validate prop to Form. 
• Added touched attribute for Form onSubmit event.
• Changed Form to re-run all failed validations on any field update.

TextInput

• Fixed ref focus issue for TextInput.
• Improved TextInput suggestions keyboard accessibility.
• Fixed TextInput cursor positioning.

RadioButtonGroup

• Changed RadioButtonGroup to forward props.
• Added disable prop to RadioButtonGroup.

TypeScript

• Fixed type of Diagram connections.
• Fixed Menu icon type.
• Fixed onChange type of RangeInput.
• Extend RadioButtonGroup value type to include object.

dependencies

• Upgraded ‘styled-components’ to 5.0.1 and more packages with minor changes (make sure you have a clean installation and updated npm version).
• Changed webpack loaders to work on both windows and *nix on dev mode.
   

Note: Due to the new color additions of  graph-0, graph-1, graph-2, graph-3, the logic of color calculations on visual components has changed. You wouldn’t tell the difference unless you are using a Meter with an array of more than two default grommet colors.