grommet v2.11.0 Release Notes

Release Date: 2020-02-21 // about 4 years ago
  • 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.
       

    0️⃣ 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.