grommet

General:

• Specified Node engine >=12 in preparation for future project enhancements.
• Added textAlign prop to MaskedInput.
• Enhanced Carousel so that it may be implemented as a controlled component.
• Enhanced DateInput to create smarter masks for MaskedInput.
• Enhanced Calendar date to accept an array of dates.
• Enhanced Chart opacity to support boolean value.
• Enhanced List to add onOrder allowing for list items to be re-ordered.
• Enhanced DataTable to support pinning multiple columns.
• Fixed AccordionPanel icon position when label contains truncated text.
• Fixed bug in Collapsible where content would not render smoothly.
• Fixed Layer component animation bug when at mobile width.
• Fixed Pagination to update active page when page prop changes.
• Fixed RangeSelector to respond to mobile touch gestures.
• Fixed SkipLinks to support having just a single SkipLink.

Accessibility:

• Added role=”radiogroup” to RadioButtonGroup and role=”group” to CheckBoxGroup to improve screen reader interaction.
• Fixed RadioButtonGroup keyboard interaction to align with WCAG standards.
• Fixed focus behavior on Button-reliant components so focus outline only appears in response to keyboard interaction.

CheckBox:

• Fixed theme property for CheckBox’s toggle color.
• Fixed CheckBox/CheckBoxGroup duplicate focus styling when contained within a FormField.

Grid:

• Added height and width to allow easier control of Grid dimensions.
• Enhanced Grid’s columns capabilities to support a wider range of min-max width values.

Grommet:

• Added options prop to Grommet to provide a way to assign a unique id to a single DOM node.
• Enhanced Grommet to support full=”min”.

Meter:

• Added type=”pie”.
• Added direction to allow Meter of type bar to display in either horizontal or vertical direction.

Select:

• Enhanced Select event handling to support Preact.
• Fixed issue where change event not called when valueLabel is used.
• Fixed issue where a11yTitle was not being applied.
• Fixed scroll behavior of Select’s drop options when using the keyboard.

General:

• Enhanced Drop to account for align when assigning margin.
• Fixed Layer elevation styling, should not apply when plain.
• Fixed Box to always render ThemeContext.Provider.
• Fixed Typescript definition for CheckBoxGroup options.
• Fixed server side rendering warnings.
• Fixed bug with Select when JSX is passed to options.
• Changed RadioButtonGroup to add defaultValue.
• Changed Form to run validations when component mounts.

Button:

• Allowed use of aria-label prop on Button.
• Changed Button to use tip string for a11yTitle default value unless otherwise provided.

CheckBox:

• Enhanced CheckBox theming to allow checkBox.pad and added pad prop.
• Added new fill prop to CheckBox.
• Changed React events to apply on Checkbox container level.

DataTable:

• Enhanced DataTable to support use of groupBy and onSelect/select together.
• Enhanced DataTable columns to allow for plain render of column data.
• Improved DataTable rendering of CheckBox with onSelect to accommodate pad on CheckBox.
• Fixed error that occurred when paginate was used with onClickRow on DataTable.
• Fixed Typescript for paginate on DataTable.

DateInput:

• Fixed bug in DateInput to allow value to be initialized as [], which allows range of dates to start empty.
• Changed DateInput to allow for a leading zero and a 2 digit year in the display format.

• Fixed issue where Layer was not animating on exit.
• Fixed InfiniteScroll functionality when the length of the data changes.
• Added additional Typescript extended props interfaces to Box, Button, Calendar, DataTable, Drop, Grid, Grommet, Spinner, and
  MaskedInput.
• Fixed Anchor props that are leaking to Dom when using styled-components.

General:

• NEW FileInput component.
• NEW Pagination component.
• NEW Spinner component.
• Added ability to use theme.formField.label.requiredAsterisk to have a * or custom element appear next to the label on required FormFields.
• Added defaultChecked prop to CheckBox.
• Changed DataChart to be more resilient to empty properties.
• Ensured that TextInput respects the defaultSuggestion prop when the input's onChange is triggered.
• Fixed Keypress functionality in Select when labelKey is specified.
• Fixed ResponsiveContext device breakpoints to determine viewport size without scrollbars and borders.
• Fixed focusIndicator on TextInput, TextArea, and MaskedInput to only be valid if plain is also set.
• Changed Box hoverIndicator to accept elevation.
• Added theme.menu.drop to allow theming of Menu's drop alignment.
• Changed Tip to use explicit props setting of Drop instead of using plain.
• Added additional sizes to Avatar (2xl, 3xl, 4xl, 5xl).
• Fixed Calendar right side border to display when fill is set.
• Fixed FormField to only set focus when it also has focus in the DOM.

DataTable:

• Changed DataTable to allow setting the pinned background from the background context.
• Added rowDetails prop to enable expansion of DataTable rows.

Drop:

• Added Drop props and theme support for margin, round, background & elevation.
• Fixes scroll bug where Drop would not always scroll with its target.

Form:

• Added onChange validation option to Form.
• Fixed timing on Form when validate="blur".
• Added valid to onValidate in Form to let user know if Form is valid.
• Changed Form to fix blur validation and dynamic fields.

Layer:

• Fixed Layer responsive positioning.
• Enhanced Layer target scroll behavior to remove scroll lag.

DEV:

• Upgraded to React 17 add added peer-dependency support.
• Typescript is now supported for component Extended props.

General:

• Changed Calendar to fix an issue with disabling kind Buttons and with bounds without timezones.
• Added defaultValue prop to Select.
• Added onChild function to Carousel.
• Changed Grid to restrict repeated column minimum size to not exceed total width.
• Changed Text to add more sizes.
• Changed Chart to support pattern area fill.
• Changed Distribution to fix an issue with undefined values.
• Fixed Button pad to be based on the size.

DataTable:

• Fixed DataTable Header/Footer to adjust on body overflow.
• Changed DataTable to use onMouseEnter for hover detection.

Form:

• Improved Form onBlur validation.
• Fixed component update behavior when used inside an uncontrolled Form.

Layer:

• Added container.elevation to layer’s theme.
• Allow onEsc to be applied to Layer when modal={false}.
• Enhanced Layer to accept background prop and grommet sizes for layer.border.radius.

Menu:

• Fixed Menu’s drop positioning.
• Changed the Menu children prop to be typed as either a func or node.

TextInput:

• Removed custom JSX placeholder from TextInput when input has a value.
• Added highlightFirstSuggestion prop to TextInput.

• Fixed Select selection when using search

• Fixed Select on lazy loading
• Fixed typescript export of Tip.
• Fixed detail alignment on DataChart.
• Changed List to consider false border prop.
• Added textAlign prop to TextInput.
• Fixed uncontrolled input values to reset properly when Form is reset.
• Aligned the zindex value of Layer and Drop.

DataTable:

• Fixed issue with pin on DataTable Footer showing background when it is not pinned.
• Added placeholder prop to DataTable.
• Added a 'units' string to the column prop in DataTable.
• [Typescript] Fixed type of onSelect.

General:

• NEW Tip component.
• Added tip prop to button.
• Added clear prop to Select that clears all selections.
• Button kind automatically set to plain style when it has children.
• Added support for width object on width prop on Box.
• Fixed Text truncation when align="end".
• Added fill prop to Heading.
• Accessibility fix for AnnounceContext default id.
• Added disabled prop to Button children.
• Added dropProps and dropHeight props for Drop customization on MaskedInput.
• Added support for border on Grid.
• Fixed rgb and rgba linear-gradient backgrounds.
• Added weight prop to Anchor.
• Added touched option for onChange in Form.
• Added new theme extend for List and List item.
• Fixed background-contrast to support dark and light more accurately.
• Changed InfiniteScroll to handle variable item heights.
• Added support for dark and light mode to Drop and Layer.
• Fixed keyboard focus when Layer is a modal.
• Fixed onClickOutside for non-modal Layer.
• Enhanced CheckBoxGroup theming with checkBoxGroup.container.
• Fixed issue with TextInput when there is a non-string placeholder.
• Fixed Select allow multiple values to be selected when using search.

Calendar:

• Enhanced Calendar logic when using range.
• Fixed timezone handling.
• Added activeDate prop.

Clock:

• Added more theme sizes to analog Clock.
• Fixed Clock when size prop is undefined or incomplete.

DataChart:

• Fixed a color issue when type: 'bars' and the color is set in a property.
• Changed DataChart to be more resilient to invalid properties when using type: 'bars'.

DataTable:

• Fixed generation of medium granularity x-axis labels.
• Accessibility fix of aria-label.
• Added support for hover styling on DataTable when resizing.

DateInput:
Added support for trimming adjacent days in the 6th row.
Fixed DateInput resetting in Forms.

Dev:
Storybook stories organization by component type.

• Only relevant for users that use radioButton.extend on the theme. Fixed RadioButton theme, so that radioButton.extend is not applied to two DOM elements. Previously radioButton.extend applied to the radio button itself and to the container around the radio button that includes the label. From now on, radioButton.extend only applies to the styling of the radio button itself, and radioButton.container.extend applies to the whole container (including the label).
  To maintain any previous styling done with radioButton.extend, add your styling to radioButton.container.extend as well.

General:

• Reduced bundle size of grommet.min.js.
• Fixed bug on InfiniteScroll when replace and show are larger than step.
• Added icon and styling for FormField error or info messages.
• Fixed dropProps functionality for DateInput.
• Allow active to pass as a prop to Tab.
• Added align options to Drop's stretch prop.
• Fixed issue on Box with row-responsive between border.
• Fixed onClick event for List and handle focus.
• Fix ability to customize text size for Avatar on the theme.
• Added font.family to the theme for Paragraph and Text components.
• Updated theme.global.active typing.

Calendar:

• Fixes incorrect month display on Calendar when switching months.
• Added support for customizing calendar dates and sizing.
• Fixes incorrect date display when selecting a date more than a year apart.

TextInput:

• TextInput onSuggestionSelect is used for the suggestion feature instead of onSelect.
• Allowed TextInput the use of onSelect for listening to select events.
• Added plain='full' option for omitting padding on plain.

DataTable:

• Added fill prop which allows the table to dynamically respond to the available real estate.
• Added pin prop which allows the first column, header, and/or footer to be pinned.
• Fixed calculation of minimum value in DataTable when there are negative values.
• Changed DataTable to add sort.external.
• Added icons.sortable to DataTable theme.
• Changed DataTable to have select and onSelect props.
• Added support to nested object in sort and aggregate.
• Updated theme to add more options for header cells of DataTable.
• Fix background prop and background.pinned theme incompatibilities.
• Allows DataTable footer to be pinned on Safari.

General:

• NEW Card component

• NEW DateInput component

• Updated Box to allow opacity to impact background image

• Fixed bug with Select where onOpen was being called twice

• Added a default mask to MaskedInput

• Changed ResponsiveContext to address breakpoint issue

• Added option to Menu to allow different icons for open and close

• Updated Text, Grid, and Heading to accept React ref prop

• Added new prop trapFocus to Drop and DropButton

• Added theming for RadioButtonGroup container under radioButtonGroup.container

Accessibility:

• Added a11yTitle support to TextArea
• Added messages prop to Video to support accessibility standards
• Improved List focus behavior with keyboard to align with WCAG accessibility guidelines
• Improved SkiplLinks component

SkipLinks:

• Allows SkipLinks layer to open with a keyboard tab
• Allows users to skip SkipLinks layer and tab to header
• Allows users to edit SkipLinks messages
• Allows cyclic navigation of page with keyboard
• Enables access to rest of interactive elements when the SkipLinks layer is shown
• Changed DOM behavior to prepend Layer to DOM so tabIndex order will behave correctly

Form:

• Added onValidate, allows users to access infos and errors when a form validates
• contentProps prop added to FromField which allows props to be set directly on content Box. When present, overrides props from theme or pad prop. overflow="hidden" will no longer be passed in but can be added in contentProps

InfiniteScroll:

• Fixed show prop behavior
• Fixed InfiniteScroll duplicate key

RadioButton:

• Added background.color option in RadioButton theme
• Added ability to set the font-weight of the label from the theme

Chart:

• Updated Chart to add per-value color and thickness for bar and point types
• Changed Chart to add point types
• Added animate prop to Chart

DataChart:

• Added a series prop that encapsulates things previously in chart, xAxis and yAxis
• Added axis prop to replace xAxis and yAxis
• Added guide prop to replace the guide from xAxis and yAxis
• Added detail prop to provide hover interaction details for horizontal bands
• Added granularity concept for axis and guide
• New legend prop provides a legend

Theming:

• Allowed users to specify FormField margin via theme
• Allowed for disabled tab state to be styled via theme
• Fixed plain Buttons active styling for themes that define button.default

TypeScript:

• Updated RangeInput onChange to use intrinsic HTML input onChange type
• Fixed Clock onChange to accept a string as an argument
• Improved Form onSubmit handling of value key of form event
• Added type definitions for day in Calendar
• Defined missing action prop type
• Fixed Calendar onSelect type

General:

• New CheckBoxGroup component.
• New DataChart component.
• Changed Button to have kind behavior for default and secondary kind.
• Fixed Preact Compatibility.
• Allowed theme to specify the size, height, and weight of an input.
• Fixed Clock countdown timer.
• Fixed missing forwardRef for DataTable, Diagram, Image, Menu, TableBody, TableCell, and Tabs.
• Enhanced focus theme styling to have outline and shadow props.
• Added disabled theme styling to MaskedInput.
• Fixed scrolling issues with TextInput.
• Changed Select and TextInput to accept a11yTitle prop as aria-label.
• Fixed an issue with caller controlling state in DropButton.
• Added rotateLeft and rotateRight to Box animation.
• Changed RangeInput to support bounds.
• Fixed onKeyDown event for TextArea.

RadioButtonGroup:

• Changed RadioButtonGroup to support numeric and boolean values.
• Fix the responsive behavior of RadioButtonGroup.

Form:

• Changed Form and FormField to fix some issues with state and events.
• Updated FormField to allow for disabled state styling via the theme.
• Added background and border options in FormField theme.

Accordion:

• Changed hover, focus, and border in Accordion theme.
• Added hover color theming for Accordion.

Menu:

• Added color theme styling for Menu icons.
• Fixed dropProps in Menu to work with RTL.

Select:

• Fixed onClick propagation in Select component.
• Fixed display of Select value when equal to zero.
• Fixed an issue with Select multiple.
• Fixed console error thrown by Select component.
• Fixed an issue with onSearch being called multiple times.

Tab/Tabs:

• Added icon and reverse props to Tab.
• Fixed focus toggling on Tab.
• Added responsive prop to Tabs.
• Added alignControls prop to Tabs.
• Added tabs header border theming to Tabs.

TypeScript:

• Fixed AnnounceContext to accept timeout as a parameter.
• Fixed TypeScript declaration of onChange in Form.
• Improved DataTable types.
• Added extend type to Text.

Hooks:

• Removing HOC from List.
• Changed SelectContainer to use hooks.
• Changed Collapsible to use hooks.
• Removed higher-order components.
• Changed Video to use hooks.
• Changed Select to fix an issue with callback hooks.

Dev:

• Replaced css package with PostCSS.
• Remove recompose dependency.
• Fixed security warning from the markdown-to-jsx package by updating to 6.11.4.
• Add jest-axe library for advanced accessibility testing.
• Fixed and cleaned code coverage references.

• NEW Sidebar component.

• Improved Form documentation.

• Changed Accordion to fix an issue with wrapped children panels.

• Changes Select to fix an issue with onChange value.

• Added containerTarget to Grommet, for enhanced Drop/Layer containers positioning.

• Changed InfiniteScroll to address issues with React.StrictMode.

• Fixed console warning of List.

• Fixed an issue with gap=“none” on RadioButtonGroup.

• Fixed a11yTitle support of Image.

• Added ref support to Paragraph.

• Added ‘size’ option to ‘columns’ prop of DataTable.

• Fixed the sort icon switch in DataTable.

• Changed TextInput, MaskedInput, and TextArea to work as uncontrolled components.

• Enhanced the theme global.input.padding to accept an object.

• Changed CheckBox checked to default to false as documented.

• Changed Form to fire onChange once per change.

• Changed Form to fix caret issue on input fields.

• Fixed warning with FormField on react-dom 16.13.1.

• Added icon support for Select to enable icon switches when the drop opens or closes.

• Added extensive theme styling for disabled Button.

• Changed Menu to propagate dropProps to DropButton.

• Changed DropButtton to fix an issue with function refs.

• Added theme properties for primary and active Button.

TypeScript:

• Fixed types of Border style.
• Fixed types of Avatar to include IntrinsicElements.
• Fixed theme property type for Select control.open.

Hooks Refactoring:

• WorldMap to use hooks.

• New Avatar component.
• Changed Form to fix some issues with various control patterns.
• Changed Form to fix an issue with required Checkbox.
• Changed Select to fix an issue with clearing multiple
• Fixed Calendar issues with selecting multiple dates and selecting a date with range.

• Added name prop for FormField.
• Changed Image to allow fill to be horizontal or vertical.
• Added dash prop to Chart.
• Changed DataTable to add verticalAlign under columns.
• Added DataTable support for primarykey false.
• Changed Layer to enable the target to work for non-modal layers.
• Changed Form to fix an issue with controlled components.
• Changed Select to fix an issue with value propagation.
• Changed Grid to fix an issue with flex columns and numeric count.
• Fixed an issue with dark mode color of Box.
• Fixed Form FormContext to fix an issue with caret positioning.
• Changed TextInput to fix an issue with drop opening (fix requires TextInput suggestions to not change on every render, and should be placed on the state or useMemo instead)
   
  TypeScript:
• Fix type error in theme breakpoints.
• Development - Fix TypeScript errors on Storybook.

Hooks:

• Refactor Class Children story to functional components.
• Changed Accordion and AccordionPanel to use hooks.
• Refactor DataTable Resizer to use hooks.

• Added margin prop to List.

• Added target prop to Layer.

• Added icon and reverse props to TextInput and MaskedInput.

• Added responsive prop for Grid.

• Added sort and onSort to DataTable.

• Added transition styling to the Button theme.

• Changed DataTable to handle an empty column definition.

• Fixed an issue with border=“between”.

• Fixed Drop issue with onSuggestionOpen/Close.

• Fixed Layer background issue on IE11.

• Fixed mask enforcement on MaskedInput.

• Fixed issue with Select InfiniteScroll when reaching to the end of the container.

• Changed FormField to propagate disabled and required to a created input element.

• Changed FormField to remove validation when unmounted.

• Changed Form to fix an issue with setting value from a component.

• Changed FormField to allow react nodes for help, error, and info.

• Refactoring Drop, Layer, Carousel class components to use React hooks.

TypeScript support:

• Improved types for theme breakpoints.

• Fixed issue with Select setValue.

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.

• Added Nav Component.
• Fixed clickable area for CheckBox and RadioButton.
• Fixed Box background issue on dark mode.
• Changed RadioButtonGroup to set option ids based on group id.
• Fixed non-modal Layer accessibly issue.
• Fixed issue with placeholder of TextInput.
• Removed styled-components from being included in the grommet package and is now a peer dependency.
  As indicated in the getting started documentation, styled-components should be included in your
  package.json, just like react and react-dom.
   
  TypeScript:
• Fixed Calendar type of onSelect.
• Fixed type of Menu component to include all Button props.
• Extended type of color and size styles on the theme.
   
  Hooks:
• Refactor Searcher and DataTable components.

• New Header component.
• New Main component.
• New Footer component.
• Added type=‘point’ to Chart.
• Fixed an issue with Chart re-rendering when no values are provided.
• Changed Chart to take a color array to describe a gradient.
• Fixed reverse prop on Menu items.
• Improved TypeScript for DataTable, Distribution, FormField, and List.
• Added max prop for Meter.
• Fixed an issue with dark background detection when using alpha.
• Added focusIndicator prop to Box.