Change Log - grommet/grommet Wiki












  • Added focus to the Video progress bar. #6195
  • Fixed CheckBox aria-label to be directly on input. #6215
  • Fixed Image onLoad. #6217
  • Fixed Form validation for added/removed inputs. #6227
  • Fixed FormField debounce function to not execute if the FormField is unmounted. #6226
  • Fixed rendering of Tab header in a fixed height container. #6239
  • Fixed Calendar and DateInput timezone/daylight savings bugs. #6214


  • Added digital Clock type. #6220
  • Added support for string to theme.focus.shadow. #6234
  • Fixed TypeScript definition on Menu items. #6237
  • Fixed TypeScript definition for Card. #6203


  • Fixed detail pad. #6206
  • Fixed support of negative values. #6246
  • Removed IE11 specific support.#6240


  • Fixed cursor behavior. #6154
  • Fixed scroll behavior when pressing space. #6194



  • Enhanced Menu items to allow for grouped items (#6162).
  • Enhanced FileInput to include in onRemove (#6136).
  • Added reverse to DateInput to allow control of icon placement (#6160).
  • Added accordion.hover.background to theme (#6177).
  • Added new responsive behavior for Tabs (#6137).
  • Added maxLines prop to Paragraph (#6207).
  • Added info as status type on Notification (#6211).
  • Improved DataChart rendering of swatches for detail and legend (#6173).
  • Changed MaskedInput to restore to prior value when mask does not match (#6174).
  • Changed Meter to handle floating point precision issues better (#6191).
  • Fixed PageHeader typescript export (#6180)
  • Fixed Button to allow as to accept elementType (#6172).
  • Fixed incorrect row highlight behavior in DataTable (#6189).



  • NEW PageHeader Component. #6071
  • Enhanced TextInput accessibility by adding combobox and listbox ARIA roles. #6079
  • Enhanced Anchor theme with 6114
  • Enhanced Video to support audio description track. #6080
  • Fixed Notifications to pass additional properties. #6139
  • Fixed Tip to respect onMouseEnter, onMouseLeave onFocus and onBlurfunctions from its child. #6109
  • Fixed DataTable layout in Firefox to not set the table-layout to fixed by default. #6108
  • Fixed Layer and Drop onClickOutside so that click location is properly registered in shadow DOM. #6120
  • Fixed onChange type for FileInput. #6145



  • Fixed bug so search term persists after an option is selected when closeOnChange={false}. #6147
  • Fixed keyboard navigation in Select with search. #6101



  • Added support for React 18. (#6066)
  • Dropped support for Node 12. (#6069)
  • Added ability to pass in a11yTitle or aria-label for List. (#6048)
  • Added ability to pass in a11yTitle in dropProps for Menu. (#6033)
  • Added sticky prop to Header. (#6024)
  • Fixed RTL support for CheckBox when toggle={true}. (#6074)
  • Fixed as prop on Box to accept any React element. (#6038)


  • Added offset gap. (#6041)
  • Fixed an issue when there is only one datum. (#6082)


  • Enhanced to allow both onClickRow and onSelect. (#6084)
  • Added verticalAlign prop. (#6076)
  • Added disabled prop. (#6070)
  • Changed sortable icon to appear after the column units. (#6063)
  • Fixed hover indicator to fill header cell. (#6086)


  • Fixed clear button filling vertically on Firefox. (#6095)
  • Fixed search to handle fast typing. (#6030)
  • Fixed clear button to only show when Select has a value. (#6042)


  • Enhanced to allow moving along Video timeline with keyboard. (#6035)
  • Fixed captions to correctly display. (#6072)
  • Fixed pause control to be disabled if Video is already paused or disable play if Video is already playing. (#6037)



  • NEW! Page and PageContent components. (#5960)
  • Fixed DataTable placeholder to be visible. (#5987)
  • Fixed typescript typing for radioButton.check.color. (#6014)
  • Fixed issue where a RangeInput within a FormField received double focus. (#6004)
  • Changed Box to fix an issue with desired height using an object. (#5996)
  • Changed Tip to not crash without children. (#5969)
  • Changed Drop to add container inline. (#6034)
  • Allow for TableCell to receive an array of objects as border prop. (#5774)
  • Added restrictToOptions to mask object in MaskedInput to restrict continued invalid typing. (#5894)
  • Improved how Calendar handles daylight savings time. (#5997)
  • Improved Select accessibility by allowing keyboard access to clear button. (#5972)
  • Improved Menu accessibility through defining ARIA roles and attributes. (#5982)


  • Changed DateInput to prevent it from scrolling down the page when opening with space. (#6022)
  • Improved logic for when to normalize the date in DateInput. (#5942)


  • Fixed name prop in Select component when using valueLabel. (#6031)
  • Enhanced valueLabel in Select to accept a function. (#6020)
  • Fixed display of selected option when labelKey is a function. (#6020)


  • Changed Notification to include event in onClose. (#5975)
  • Enhanced Notification to support onClick, href, truncation, and directional layout of title/message. (#5958)
  • Added global prop. (#5958)
  • Fixed position of toast Notification when viewed on a small screen. (#6008)


  • Changed DataChart to add placeholder prop. (#5977)
  • Changed DataChart to insure guide for the y-dimension encompasses thickness. (#5980)
  • Changed DataChart to align placeholder styling with DataTable. (#5981)



  • Added itemKey prop to List to allow users to specify a key for list items. (#5872)
  • Added size prop to Tag. (#5914)
  • Added the ability to change the gap between an icon and label in a Button through in the theme. (#5906)
  • Fixed TextInput jumping scroll behavior. (#5927)
  • Fixed Markdown options.wrapper so it is not overridden as a Fragment. (#5946)
  • Enhanced RangeInput to handle an undefined value. (#5931)
  • Enabled onClick prop in Tab. (#5937)
  • Added arrow key functionality to Menu. (#5944)


  • Added ‘lines’ option to chart.type. (#5953)
  • Added ‘areas’ option to chart.type. (#5932)
  • Added offset prop. (#5941)
  • Fixed an issue when using areas and passing chart props per property. (#5951)
  • Fixed an issue with x-axis alignment. (#5959)
  • Enhanced DataChart to be more resilient to an empty property array. (#5957)


  • Added icon prop. (#5911)
  • Fixed an issue with setting the icon through inputProps. (#5911)


  • Enhanced toast prop to allow a position object to be passed in. (#5926)
  • Enhanced toast prop to allow setting autoClose. (#5730)


  • Fixed screenreader behavior to read out correct number of options. (#5924)
  • Improved the screenreader and keyboard navigation experience. (#5934)


  • Fixed double focus on FormField with Select and search. (#5895)
  • Fixed DateInput bug with "yyyy/mm/dd" format. (#5893)
  • Fixed Button icon alignment. (#5892 and #5885)
  • Fixed TextInput suggestions styling. (#5880)
  • Added Form validation onMount for controlled input forms. (#5881)



  • NEW Tag component. (#5778)
  • Enhanced Form to support an array of field values. (#5630)
  • Enhanced Carousel to have a smooth transition. (#5839)
  • Enhanced Video to be able to customize controls. (#5658)
  • Enhanced DateInput to open when Calendar icon is clicked. (#5838)
  • Fixed Anchor’s as prop type. (#5823)
  • Fixed Select to clear search content when drop closes. (#5866)
  • Fixed Text to show Tip when truncated and observe resize. (#5855)
  • Fixed Button icon alignment while using small icon size. (#5856)
  • Fixed TextInput suggestions closing incorrectly. (#5860)
  • Fixed Clock to handle when the hour is not given. (#5850)


  • Enhanced Calendar to handle changes with time zones.(#5837)
  • Enhanced Calendar accessibility for screen readers. (#5849)
  • Fixed Typescript definition for Calendar messages prop. (#5836)



  • Fixed DateTable onSelect bug.



  • NEW NameValueList component. (#5626)
  • Enhanced DataTable lazy loading with onUpdate. (#5716)
  • Enhanced Text to accept dropProps when truncate=”tip”. (#5637)
  • Enhanced WorldMap to improve placement of places. (#5712)
  • Added value types on Anchor weight propTypes. (#5484)
  • Added theme.card.hover.container.elevation to Card. (#5736)
  • Added a11yTitle Typescript support on MaskedInput. (#5751)
  • Fixed Calendar hover behavior and active day styling. (#5784)
  • Fixed Carousel transition bug. (#5678)
  • Fixed Pagination to account for changing data. (#5683)
  • Fixed Spinner to allow color prop to override theme. (#5631)
  • Fixed Video volumeDown Typescript definition. (#5760)
  • Fixed InfiniteScroll last page calculation. (#5806)


  • Added hasLabel and hasIcon prop to Button. (#5628)
  • Fixed TypeScript support for Button. (#5651)


  • Fixed theme.checkBox.label.align to apply only when label is string. (#5800)
  • Fixed focus state to not apply when disabled. (#5658)


  • Enhanced behavior to align with native HTML. (#5667)
  • Added size to TypeScript definitions. (#5687)
  • Added checks for leap year. (#5717)
  • Fixed value bug. (#5632)


  • Added confirmRemove prop. (#5711)
  • Fixed maxSize conversion factor. (#5775)


  • Added option to remove required indicator for individual FormField. (#5713)
  • Fixed theme styling on required indicator. (#5709)


  • Added theme.rangeInput.pad. (#5666)
  • Added disabled prop. (#5660)
  • Enhanced RangeInput to be controlled by mouse wheel. (#5693)



  • NEW Notification component. (#5450)
  • Added gap prop to Anchor. (#5541)
  • Added defaultItemProps prop to List to allow styling of list item layouts. (#5573)
  • Added color prop to RangeInput allowing track color to be specified. (#5275)
  • Changed zIndex for RangeSelector’s edge controls. (#5564)
  • Enhanced weight values supported by Text. (#5606)
  • Fixed InfiniteScroll bug related to passing an empty array when using onMore callback. (#5636)
  • Fixed missing TypeScript type for Grid. (#5561)
  • Fixed RadioButton theme radioButton.check.background.color to accept symbolic colors. (#5621)
  • Fixed Table TableCell rowSpan so that it is applied to the proper DOM element. (#5489)
  • Fixed TextInput placeholder value not clearing when value is a JSX.Element. (#5571)


  • Added justify prop to Button. (#5591)
  • Fixed missing TypeScript type rel on Button. (#5582)


  • Fixed Calendar to properly announce selected dates and date ranges and to screen readers. (#5575)
  • Fixed Calendar keyboard behavior to properly keep active date in view when using arrow keys. (#5588)


  • Fixed Carousel keyboard accessibility by limiting focus to only visible children. (#5552)
  • Fixed Carousel animation direction when set to autoplay. (#5603)


  • Added messages prop to DateInput to allow for accessibility announcements to be read by screen readers. (#5471)
  • Enhanced DateInput keyboard behavior to align with native HTML input. (#5550)
  • Fixed missing TypeScript type className on DateInput. (#5561)


  • Fixed missing defaultProps on DataTable. (#5572)
  • Fixed DataTable footer to allow rendering of a custom node. (#5563)
  • Fixed DataTable to properly pin the checkbox column when using onSelect. (#5547)


  • Added maxSize prop to FileInput to limit allowed file size. (#5457)
  • Enhanced FileInput to limit the allowed number of files to be uploaded. (#5218)


  • Enhanced Markdown to support refs. (#5587)
  • Fixed unintentional line break when italics were used in Markdown. (#5581)
  • Fixed Markdown to properly support onClick. (#5614)


  • Fixed Meter size=”full” bug. (#5597)
  • Fixed missing TypeScript semicircle type on Meter. (#5601)


  • Fixed missing support for onBlur and onFocus on Select. (#5590)
  • Fixed missing TypeScript type className on Select. (#5561)



  • Component documentation has moved to Grommet-Site. All doc.js files have been deprecated. Documentation pull requests can now be submitted to the Grommet-Site repository.
  • Enhanced CheckBox to accept children.
  • Enhanced CheckBoxGroup to accept children.
  • Enhanced Meter to accept type=”semicircle”.
  • Enhanced Select emptySearchMessage to accept JSX elements.
  • Fixed missing TypeScript type for Button kind.
  • Fixed missing TypeScript type for Markdown options.
  • Fixed Form validation to exclude disabled inputs from validation results.
  • Fixed Menu to exclude extraneous Button when drop direction is flipped vertically.


  • Fixed Calendar accessibility issue by properly traversing cells with populated dates.
  • Fixed Carousel accessibility issue by clearly labeling the currently displayed slide.
  • Fixed RangeInput accessibility issue by properly placing focus on the input’s thumb control.
  • Fixed RangeSelector accessibility issue by properly specifying role=”slider”.


  • Fixed ability to reset DateInput value with ” ” or [ ].
  • Fixed situation where DateInput calendar would not open properly.


  • Fixed missing extend for ThemeType layer.container.extend.
  • Fixed bug where Layer could not be used outside of Grommet block.



  • Added animation prop to Diagram.
  • Added onChange to FileInput.
  • Added support for textAlign=“justify” to Heading.
  • Added selected styling to custom child in Select.
  • Enhanced support for aria-label in all components where a11yTitle is accepted.
  • Enhanced Grid align and alignContent to support any valid CSS align-items and align-content strings.
  • Enhanced MaskedInput size to accept additional t-shirt sizes.
  • Enhanced TextArea size to accept additional t-shirt sizes.
  • Enhanced TextInput size to accept additional t-shirt sizes.
  • Fixed styling for Button hover state.
  • Fixed initial image displayed in Carousel.
  • Fixed DataChart detail display when rendering large data sets.
  • Fixed values retained in uncontrolled Form when inputs are dynamically removed.
  • Fixed active style for List so that the style is retained when a user is interacting with other components on the page.
  • Fixed RadioButtonGroup to properly pass focus state to children.
  • Fixed TableCell rendering performance when theme background is changed.
  • Fixed theme to accept custom pixel values when specifying input font sizes.


  • Enhanced align and alignContent to support any valid CSS align-items and align-content strings.
  • Fixed Box rendering performance when theme background is changed.


  • Enhanced Calendar accessibility by announcing the selected date upon selection.
  • Fixed Calendar accessibility to properly read only the active date as a user tabs through calendar dates.
  • Fixed Enter key behavior for Calendar.


  • Enhanced DataTable to apply case-insensitive sorting.
  • Enhanced DataTable groupBy to leverage InfiniteScroll.
  • Fixed DataTable cell styling to better support custom styling of grouped rows.
  • Fixed active style for DataTable so that the style is retained when a user is interacting with other components on the page.


  • Added size prop to DateInput.
  • Fixed DateInput to set value properly when implemented as a controlled component.


  • Fixed FormField theme property to use error.border.color.
  • Fixed FormField validation when supplied an empty array as value.


  • Added global messages prop to Grommet.
  • Added ability to pass dynamic values to messages.


  • Added support for textAlign=“justify” to Paragraph.
  • Fixed ability of size to accept a custom pixel value.


  • Added tip and smart aria-label default to Text.
  • Added truncate=“tip” to display the entirety of truncated text within a Tip.
  • Added support for textAlign=“justify” to Text.



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


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


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


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


  • 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”.


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


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



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


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


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


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


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



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


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


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


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


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


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


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


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


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


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


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


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



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


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


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


  • 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'.


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



  • 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


  • 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


  • 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


  • 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


  • Fixed show prop behavior
  • Fixed InfiniteScroll duplicate key


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


  • 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


  • 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


  • 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


  • 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



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


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


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


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


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


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


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


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


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


  • 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 a11yTitle support of Image.
  • Added ref support to Paragraph.
  • Added ‘size’ option to ‘columns’ prop of DataTable.
  • Fixed the sort icon switch in DataTable.
  • Enhanced global.input.padding on the theme to accept an object.
  • Changed CheckBox checked to default to false as documented.
  • Changed TextInput, MaskedInput, and TextArea to work as uncontrolled components.
  • 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.
  • Fixed an issue with gap=“none” on RadioButtonGroup.
  • 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.


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

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.


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



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


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


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


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


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


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


  • 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 had 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.


  • Fixed overflow of search on DataTable.
  • Fixed gap of Menu items.
  • Fixed onClickItem on List.
  • Added a11yTitle prop to Menu.
  • Added onClick to Box.
  • Changed DataTable to pass index to onClickRow.
  • Changed RadioButton to add children rendering. Changed RadioButtonGroup to support children rendering.
  • Improved TypeScript support
  • Added fill prop to Image


  • Added new List component.
  • Improved TypeScript support.
  • Fixed caption behavior for Table.
  • Add hoverIndicator for Menu.
  • Fixed color calculations.
  • Changed Chart to add auto width and gap.
  • Added themeMode prop to Grommet.
  • Changed DataTable to fix header layout.
  • Added a11ytitle support for Grid.
  • Note: Deployed typescript in Grommet for storybook tsx files.
  • Note: More refactoring of Class components to use react hooks.


  • Fixed theme typing.


  • Fixed RangeSelector step issue.
  • Improved TypeScript support for theme, props, and events.
  • Added the prop fill to WorldMap.
  • Fixed Menu onClick for Firefox.


  • Improved TypeScript support.
  • Added Keyboard accessibility for Menu.
  • Removed padding for a plain Menu.
  • Added custom Heading styling for Calendar.
  • Added ref support for Image.
  • Added DataTable virtualization with a replace prop.
  • Fixed RangeSelector mouse events on Edge.
  • Added custom individual borders for Box.


  • Added min & max support for Box height and width.
  • Changed Layer to fix an issue with animating close.
  • Improved Typescript support.
  • Added margin prop to FormField.
  • Added expansion of group keys on DataTable.
  • Changed DataTable to add background, border, pad, and rowProps.


  • Improved TypeScript support.
  • Fixed false responsive for Box.
  • Added ability to hide Carousel controls.
  • Improved keyboard accessibility on MaskedInput.
  • Fixed Calendar rendering when the first day of the month is Sunday and firstDayOfWeek is Monday.
  • Improved Grid areas prop to receive an array of rows.
  • Added fill support for Paragraph.
  • Added animation to Layer on close.
  • Added onClickRow to DataTable.
  • Changed DataTable to allow columns properties to traverse data object properties.
  • Applied Button transitions to act only on Button color styling (color, background-color, border-color, box-shadow). Note that in case you have an extensive custom theme that relies on Button transitions of non-color properties, you might be required to add these extensions to your custom theme manually. For more info see issue #3145 and feel free to reach out.


  • Fixed TypeScript issue.


  • Improved and Refactored TypeScript support.
  • Added initialChild prop to Carousel.
  • Fixed fill on Carousel.
  • Fixed event handler issue of RangeSelector.
  • Improved consistent hover functionality across the components.
  • Fixed custom style support of gap for Grid.
  • Improved IE support.


  • Improved TypeScript support.
  • Improved focus on DataTable search.
  • Added theme customization for Select on open.
  • Improved Esc handling for TextInput.
  • Improved blur and focus handling for MaskedInput.
  • Added animation property to Layer.
  • Changed Select to allow more types of options.


  • Fixed focus behavior on Layer


  • Improved TypeScript support.
  • Fixed MaskedInput theme support.
  • Fixed MaskedInput props to be available.
  • Added size prop to TextArea.
  • Added onMore and replace props to Select.
  • Enhanced Carousel behavior to support icon colors and animation.
  • Changed DropButton to allow the caller to pass onClick.
  • Changed Menu to pass more items properties through to Button.
  • Changed color parsing to be more resilient.
  • Improved DataTable groupby and search functionality.
  • Improved Layer support on Gatsby.js.


  • Increased TypeScript support
  • Added step prop support to DataTable
  • Improved extend support for input components
  • Fixed arbitrary size support for Meter, Heading
  • Fixed onChange issue on Form
  • Fixed controlled open state on Select
  • Fixed Form race condition issue


  • Increased TypeScript support
  • Improved accessibility of TextInput
  • Allowed Select icon prop to accept a node
  • Improved Drop and Table height calculations
  • Added gap customization for Button
  • Fixed styling of font-family on inputs
  • Added support for hsl() background color
  • Added customization for Button color on plain
  • Added open support in Menu
  • Added edge-control customization for RangeSelector
  • Fixed InfiniteScroll behavior on IE
  • Added wordBreak support for Text
  • Improved fill support for Button
  • Changed FormField to handle required with an initial value


  • Increased TypeScript support
  • Added deprecation warnings on the usage of Routed components
  • Fixed theme issue on grommet button
  • Fixed DataTable overflow issue
  • Improved Search functionality for multi options Select
  • Improved active support on the theme
  • Added wrap-reverse flex support for Box
  • Fixed FormContext update on FormField onChange


  • Bundle size improvements.
  • Enabled ParcelJS.
  • Improved Calendar daylight saving calculations.
  • Added daysOfWeek prop to Calendar.
  • Added fallback prop to Image.
  • Added opacity prop to Image.
  • Added cssVars prop to Grommet component.
  • Added onReset prop to Form.
  • Added disable styling for TextArea & TextInput.
  • Added theme Heading customization to Accordion.
  • Added support for custom drop overflow.
  • Added open prop for Select.
  • Added icon prop for Select.
  • Removed padding of Button icon on plain.
  • Improved CheckBox styling.
  • Improved TypeScript support.
  • Changed Chart to add pad to calcs.
  • Fixed overflow issue on Accordion.
  • Fixed dark theme issues.


  • Increased TypeScript support
  • Improved scrolling of Accordion
  • Improved elevation of Box
  • Added extend support for RangeInput
  • Added extend support for FormField
  • Added theme support for Select
  • Added size and repeat support for Box background
  • Added child render function to Menu
  • Added disabled option to Menu items prop
  • Added size support for Chart
  • Added InfinteScroll handling for multi-column Grid
  • Fixed onMore with InfinteScroll of Grid
  • Fixed initial load of InfinteScroll
  • Changed Button to pass interactive state to children render function
  • Fixed CheckBox toggling and shrinking.
  • Fixed Select hover Button
  • Fixed alignment of an icon within Button
  • Fixed propagation of events with Drop


  • Increased TypeScript support
  • Added RadioButtonGroup component
  • Added extend support for TextInput
  • Added around and evenly support for the Box justify prop
  • Added style support for the Box gap prop
  • Added colspan support for TableCell
  • Added justifyContent prop to
  • Added onBlur prop to MaskedInput
  • Added interactiveChild prop to Stack
  • Added id prop to Select
  • Added real-time support for Diagram updates
  • Improved accessibility for TextInput, FormField, MaskedInput, TextArea
  • Improved responsive for Grid columns
  • Added non-shaking-tree support
  • Fixed Form validation for values
  • Fixed Extend on ThemeContext
  • Fixed scrubber for Video


  • Fixed typescript definitions for Form


  • Fixed accessibility for Select
  • Increased TypeScript support
  • Added dropHeight prop to TextInput
  • Updated Grommet component to remove browser default margin when full is true
  • Added pixel size support for the Box round prop
  • Added style support to for the Box border prop
  • Added grow and shrink support to Box flex prop
  • Allowing thickness size in Meter
  • Added custom font weight for each level support to Heading
  • Added levels 5 and 6 to Heading
  • Added animate prop and corner options to position prop on Layer
  • Added Form component
  • Added extend support for Calendar day
  • Added primaryKey, resize, sortable props to DataTable
  • Added HTML tags support to Markdown


  • Fixed Select onChange not triggering for multiple with custom options
  • Fixed Select dropHeight to use max-height instead of height
  • Added withTheme proxy inside grommet to avoid libraries breaking after remove withTheme in Grommet


  • Fix Anchor style inside markdown
  • Added dropHeight, emptySearchMessage props to Select
  • Fix target object inside Select onChange
  • Fixed accessibility and keyboard operability for Select
  • Fixed accessibility for CheckBox
  • Updated base theme colors
  • Integration with grommet-icons v4
  • Moved grommet-icons and grommet-styles from peerDependency to dependency
  • Added MaskedInput
  • Fixed SkipLinks not showing when pressing tabs


  • Fix regression with Layer margin with centered position
  • Fix Typescript support to allow for intrinsic elements


  • DataTable now allows falsey values
  • Select now allows ‘extend’ for container
  • Removed Firefox outline from focused elements.
  • Added ability to scroll tabs independently
  • Theme font object now allows weight
  • Improved accessibility for Layer, Select, TextArea and TextInput  
  • Add replace prop to InfiniteScroll
  • Add labelKey, disabledKey, valueLabel, valueKey props to Select
  • Add tag prop to Button
  • Theme now allows custom debounce time
  • Fixed drop container height
  • Deprecate tag prop in favor of styled component as
  • Heading theme allows font object in every level
  • Flexible zIndex for Drop and Layer.
  • Add indeterminate state for checkbox 
  • Add elevation and plain props to Drop
  • Select uses InfiniteScroll replace
  • Fix margin on Layer
  • Better Server-Side Rendering support for Grommet
  • Grommet leverages styled-components ThemeContext
  • Improved typescript support
  • Better boundary conditions for RangeSelector


  • Allowing pixel value padding on margins
  • Added xlarge size to Paragraph and Heading
  • Updated to use system-ui font in the Grommet theme
  • Added size prop to Anchor
  • Added fill to TextArea
  • Changed base theme elevation values
  • Fixed daylight savings in Calendar
  • Fixed RangeSelect to fix an issue with step
  • Add plain prop to Grommet
  • Fixed Layer on mobile
  • Changed base theming for Tabs
  • Fixed TextInput and TextArea to not close the Layer on pressing esc
  • Fixed performance on Select and preventing scrolling to the top when selecting an option


  • remove keyboard handlers when unmounting
  • Allow default messages for Intl util
  • Menu allow a custom DOM element to be the parent
  • Infinite scrolling with support for moreAbove
  • Allow a custom message to be passed to Notification


  • Enhanced Components: Accordion, Layer, Header
  • Header: fixed z-index to make sure body goes behind float
  • Accordion: fix conditionally render of AccordionPanels
    • Layer: fix bug where keyboard events would not be triggered
  • Added DXC minified to Grommet bundle


  • Enhanced Components: Select, Toast, Video
  • Fixed Select drop placement and styling issues
  • Fixed Toast console warning and improved test coverage
  • Fixed an issue with Video event property propagation
  • Fixed an SCSS selector issue related to animation


  • Enhanced Components: Chart, DateTime, FormField, Layer, Menu, Toast, WorldMap
  • Added overlayClose to Layer
  • Fixed WorldMap IE11 styling issues
  • Fixed Chart single value rendering issue
  • Restyled FormField input elements to simplify
  • Improved Menu drop layout when not overlapping control
  • Fixed a Toast status styling issue
  • Localized DateTimeDrop


  • Enhanced Components: Card, FormField, Form, Layer, Search, Select, Toast
  • Added duration prop to Toast
  • Fixed font issue inside Toast content
  • Added hebrew language support
  • Removed Card markdown dependency
  • Added initial DXC theme
  • Fix status icons in dark context
  • Skipped processing tab if Layer is hidden
  • Fixed inline Select height problem inside FormField
  • Fixed Search console warning in mobile


  • Allow Tiles to be used conditionally


  • Removing react-dom from dependencies to avoid duplicate react copies


  • Hot fix for drop what would not render in the right location


  • Enhanced Components: Anchor, Animate, Carousel, FormField, LoginForm, Markdown, Menu, Meter, Select, Spinning, Table, TextInput, Tile
  • Welcome React 16 (now as a peerDependency) 🎉
  • Fixed double border issue with text input
  • Fixed problem with Meter cropping
  • IE11 Spinning fix
  • Carousel fixed autoplay
  • Fixed suggestions for TextInput when array is empty
  • Deprecate Card description with Markdown support
  • Fixed accessibility issue with LoginForm
  • Fixed mirror click for Table


  • Enhanced Components: Animate, Box, Button, TableHeader, TextInput, Tiles, Toast, WorldMap
  • Fixed animation inside Split
  • Added justify=around for Box
  • Changed TableHeader to allow columns to be individually sorted
  • Added type=text to TextInput
  • Fixed input border


  • New Components: PasswordInput
  • Enhanced Components: Anchor, Animate, CheckBox, Chart, Distribution, Layer, Menu, RadioButton, Range, Select, Table, TextInput, Toast
  • Added Russian translation
  • Added Accessibility and touch events to Chart Range
  • Enhanced Accessibility for both RadionButton and CheckBox
  • Fixed erroneous warning on Table regarding mismatch cells
  • Added searchPlaceholder prop to Select that allows to change the default search placeholder
  • Added onAppear and onLeave for Animate component
  • Anchor now does invoke onClick if disabled is passed


  • Enhanced Components: Anchor, Box, Button, Carousel, CheckBox, DateTime, Distribution, Header, Image, LoginForm, Menu, Notification, Search, Select, SVGIcon, Table, TextInput, Timestamp, WorldMap, Value
  • Allow Anchor and Button links to be opened in a new tab with CMD + Click
  • Removed whitespace trimming from LoginForm password
  • Changed LoginForm to allow error to be any JSX element
  • Changed LoginForm to disabled submit button if onSubmit is not defined
  • Added support for reverse in Value component
  • Updated CheckBox to have full clickable area
  • Updated Carousel to animate transition only after first load
  • Fixed infinite scroll problems when having multiple scroll parents
  • Reverted Select to use value instead of label as the selected value
  • Changed Image component to set full to true if fit is defined
  • Allow TextInput to accept copy from clipboard in IE11
  • Replaced react-addons-transition-group with react-transition-group
  • Better IE11 support
  • Added colorIndex support to input placeholder


  • Table: Added error message for cell header mismatch
  • Added localization keys for Form
  • Timestamp: added IE 11 support
  • Box: added responsive flag for full option
  • Fix backward compatibility issues with Chart import statements


  • Enhanced Components: Anchor, Box, Button, DateTime, Distribution, Menu, Meter, Search, Select, Split, SunBurst, Toast.
  • Make Button compatible with React Router v4
  • Enable reset/submit Button even without onClick
  • Added hover support for Button
  • Added support for Critical status Button
  • Added support for box prop on Button
  • Search now allows to override autoComplete option
  • Allow custom icon with label inside Menu
  • Removed double margin inside CheckBox and Radio buttons
  • Fix DateTime format issue
  • Migrated to React 15.5 with support for prop-types as a separate module
  • Updated react-intl to latest version


  • Fixed ES6 imports
  • Fixed TextInput with empty suggestions (thanks @monte-hayward for the contribution)
  • Search now correctly invokes onSelect callback when pressing enter (thanks @raphi011 for the contribution)


  • Added support for React Router 4
  • Removed Icon suffix from Icons for backward compatibility
  • Updated markdown-to-jsx to version 5
  • Fixed animationIcon inconsistencies with Anchor
  • Fixed scroll to top problem on Article


  • Fixed problem with Table where multiple rows does not render
  • Added the right support for import Grommet from 'grommet' and import { Icon } from 'grommet'


  • Better localization support
  • Fixed icon warning for xsmall size
  • Fixed Grommet import to be backwards compatible
  • Fixed issue with dark color context on Menu drop
  • Added support for colSpan on Tables


  • Enhanced Components: Anchor, Box, Button, Calendar, Carousel, Chart, CheckBox, Columns, Distribution, Drop, Image, Grid, Label, Legend, Menu, Meter, Notification, RadioButton, Search, Select, Spinning, Status, Tab, Table, Tiles, Timestamp, Tip, Toast, Topology
  • Added !default to a number of SCSS variables
  • Added responsive flag to Table and Legend
  • Added size support to Spinning and Toast
  • Added new style for Spinning icon
  • Added align support to Label
  • Added id support to CheckBox
  • Added Dutch translation for messages and icons
  • Added onActive support to Carousel
  • Added xsmall and medium size to Grommet icons
  • Improved the way we identify scroll parents
  • Better word wrapping for CheckBox and RadioButton
  • Better scroll support for Select


  • Updated Aruba brand colors
  • TextInput: fixed focus jump between multiple elements.
  • Changed Layer to not close when the user clicks outside it
  • Changed Meter and Bar to not have a minimum bar thickness
  • Refactored Drop to handle better initial focus
  • Sidebar: fixed IE11 problem with fill option
  • Added plain prop to Form component
  • Updated en-US icon keys
  • Table: fixed IE11 problem where onMore is not invoked


  • Enhanced Components: Anchor, Animate, Article, Box, DateTime, Drop, Header, Hero, Legend, Menu, Meter, Notification, Search, SearchInput, Select, TextInput, Tiles,
  • Added 'jiggle' animation
  • Using Vanilla theme for bower distribution
  • Moved Gulp to devDependencies so that people not using it don't have to install
  • Anchor and Button now pass onClick arguments


New components: TableHeader Enhanced Components: Accordion, Anchor, Box, Button, Chart, Checkbox, Columns, Distribution, Drop, Footer, Form, Header, Layer, LoginForm, Menu, Notification, Search, Select, Split, Tabs, TextInput, Tiles, Timestamp, Tip, Topology

  • Added xxsmall size for Chart
  • Changed the small padding breakpoint for Graph in Chart
  • Added xsmall size to Sidebar
  • IE11 Fixes
  • Added a delay on Box background color check to avoid issues with color index
  • Removed deprecated icons from 1.0.0 release
  • Fixed Drop position issues in Firefox
  • Added truncate property to Title, Heading, and Label
  • Switch Vanilla theme to use Work Sans font
  • Improved algorithm for checking dark background context
  • Fixed race condition issue with Drop component
  • Fixed width issues with Forms inside Layer in IE11
  • Updated original colors for social and brand icons
  • Better support for dark context
  • Added fill option to Menu
  • Removed Header and Footer dependency from Sidebar (Use Menu fill)
  • Added align option to Anchor
  • Removed 'max' size option for Box
  • Fixed Button border color on dark and light context
  • Added Black as a dark color for all themes
  • Enhanced accessibility for Layer
  • Changed default size of Hero to medium
  • Deprecated Hero properties: backgroundImage, backgroundPosition, backgroundVideo, colorIndex, flush, image, justify, responsiveBackgroundPosition, separator
  • Added fit option to Video
  • Added align option to Image and Video


  • Enhanced components: Anchor, Box, Button, Card, Chart, CheckBox, DateTime, Drop, Footer, Heading, Hero, HotSpots, Label, Layer, List, Map, MarkerLabel, Menu, Meter, Notification, Pulse, Quote, RadioButton, Select, SunBurst, Table, Tiles, Toast
  • Added few missing components to the main index.js file
  • Few new icons added to the set
  • Added more locales to the i18n set
  • Updated Table minimum cell width from 96px to 120px


  • New Components: Select, TextInput
  • Deprecated Components: SearchInput
  • Refactored all components to be accessible
  • Removed deprecated code
  • Refactored all components to work well in dark mode
  • Include new icon set that are pixel perfect


  • Enhanced components: Accordion, AccordionPanel, Animate, App, Box, Card, Carousel, Chart, CheckBox, Columns, DateTime, Distribution, Footer, Header, Headline, Image, Layer, Legend, List, ListItem, Markdown, Menu, Meter, Notification, Quote, SocialShare, Split, Table, Tabs, Tile, Tiles, Timestamp, Tip, Title, Value, Video
  • New Components: Pulse, Toast
  • Deprecated Components: Attribute, Brick, Bricks, Calendar, Chart (v1)
  • Enhanced Box, Tiles, and Columns layout capabilities
  • Aligned sizing across Box, Tile, Columns, Image, Video, Quote, Chart, Meter, Distribution
  • Added support for markdown in Card
  • Added many tests
  • Fixed some Meter drawing issues
  • Fixed some infinite scroll issues
  • IE 11 fixes
  • Added deprecation warnings in preparation for release 1.0


  • Enhanced components: Anchor, App, Article, Box, Calendar, Carousel, CheckBox, DateTime, Drop, FormField, Hero, Label, Layer, Legend, List, Map, Menu, Meter, Notification, NumberInput, Search, Tabs, Tiles, Topology, Value, Video
  • New Components: Accordion, Animate, Announcer, Chart, Card, Range, SunBurst, Tip
  • IE fixes
  • Improved Accessibility
  • Deprecated init command. Use grommet-cli to create new projects.
  • New site live using pages
  • Updated Aruba theme
  • Propagate props and context for existing constructors
  • Added more tests to existing components


  • Enhanced Components: Article, Anchor, Box, Checkbox, Header, InfinityScroll, Layer, Notification, Search, Split, StatusIcon, Tile, Tiles,
  • IE Fixes
  • Added babel-runtime
  • Accessibility Enhancements
  • Added Stop icon


  • Enhanced Components: Box, Button, Columns, Date, DateTime, Footer, Header, Menu, Meters, NumberInput, SearchInput, Table, Title, Value
  • New Component: SVGIcon
  • Important IE11 and Edge fixes
  • Added grommetux- css namespace to avoid conflict with existing styles
  • Improved CLI to be more resilient with non-existing tasks


  • Enhanced Components: Anchor, Article, Box, Button, Chart, DOMUtils, Footer, Header, KeyboardAccelerator, Layer, Meter, SearchInput, Tile
  • New Component: ImageField
  • Important IE11 and Edge fixes
  • Proper use of console.warn
  • Deprecated superagent in favor of fetch api
  • Added Brick and Bricks to Bower


  • Fixed blocking issue with grommet init command


  • Enhanced Components: Article, Box, Chart, Distribution, Footer, Header, Image, Layer, List, Markdown, Menu, Meter, Selection, Status, Table, Tile, Video
  • Important IE11 and Edge fixes
  • Welcome React 15!


  • Enhanced Components: Article, Box, Button, Chart, CheckBox, Distribution, FormField, Header, Image, Label, Layer, Menu, Meter, Paragraph, SkipLinks, Tags, Tile, Video
  • New Components: Markdown, WorldMap, SocialShare, Quote, Value
  • New set of icons
  • Removed deprecated features
  • Added support for grommet-toolbox
  • Accessibility improvements to Icons
  • Added tint (t) option to colored box

See grommet-toolbox documentation for reference on how to migrate.


Fixed issues with missing icons for NPM release.


  • Enhanced Components: Anchor, Attribute, Box, Brick, Button, Calendar, Carousel, Drop, Footer, Heading, Headline, Image, Label, Layer, ListItem, Locale, LoginForm, Menu, Notification, Paragraph, RadioButton, Search, SearchInput, Section, Sidebar, SkipLinkAnchor, Table, TableRow, Tag, Video
  • New Components: Columns
  • Added support for huge icons
  • Updated Metric font
  • Performance improvements: Removal of lodash, optimized Uglify code.


  • Enhanced Components: Button, Chart, CheckBox, Distribution, Label, Legend, LoginForm, Menu, Meter, NumberInput, Tile, Tiles
  • New Component: Article, Brick, Tag/Tags,
  • Initial Right to Left (RTL) support


  • Enhanced Components: Box, Distribution, ListItem, Meter, Notification, SkipLinkAnchor, SkipLinks, StatusIcon


  • Added padding to SkipLink container
  • Fixed a11y issues with Chart and Meter


Welcome Babel 6! Follow these instructions to update your project to Grommet 0.5.0.


  • Enhanced components: Anchor, Article, Box, Button, Chart, Distribution, FormFields, Icons, Layer, List, Locale, Meter, Search, SearchInput, Status, Table, Tiles, Menu
  • New components: Image, NumberInput,
  • [DEPRECATED] ListItem component
  • Fixed issue with Hot Reload
  • Updated Grommet code base to ES6
  • Added more tests


  • Enhanced components: LoginForm, Meter, Legend, Icons, Anchor, Box, Menu, Calendar, Gravatar, Carousel, Split, Layer, Form, Table, Nav, Search, Layer, Button, Article, Footer, Notification, Chart
  • New components: Video and CarouselControls
  • Added a11y support for Chart and MenuDrop
  • Enhanced styling for different themes
  • Improved Infinite Scroll behavior for mobile
  • Fixed blocking issue with Tabs in 0.4.0 (see


Follow instructions here to update your project to Grommet 0.4.0


  • Enhanced components: Box, List, Sidebar, Menu, Anchor, Layer, LoginForm, Tiles,
  • Added Icons as React components: see Icons Documentation
  • Styling updates for base elements like: h1-h5 and paragraphs
  • Updated Design assets
  • Enhanced documentation
  • Moved all example apps to separate repositories
  • Removed support for grommet export command-line
  • Added support to run Grommet as a library
  • If you are using Grommet Developer environment you can have your package.json like this now:
 "name": "sample-app",
 "version": "0.0.1",
 "main": "src/js/index.js",
 "dependencies": {
   "grommet": "0.3.8",
   "gulp": "^3.9.0"
 "engines": {
   "node": ">= 0.10",
   "npm": ">= 1.4"

Webpack and Grommet will take care of loading all the other dependencies for you, such as: React, Gulp libraries, Intl, Inuit, and many others...


  • New components: tab bar
  • Enhanced components: Title, Menu, Table, Header, Article, Anchor, Meter, Login, Clear
  • Enhanced examples apps: medium-app, people-finder, sample-app, todo-app-modular
  • Added more unit tests to Grommet
  • Added server-side rendering to
  • Removed node-uuid from Grommet to better support server-side rendering
  • Better path resolving for Grommet global installation
  • Removed react-time dependency in favor of Grommet i18n formatted date
  • Fixed outdated eslint rules that prevented errors to show up
  • Better a11y support for Meter, Clear Icon, and Layer
  • Better accessibility support for SkipLinks
  • Enhanced documentation
  • Refactored sticker sheet for HPE


  • Enhanced examples apps: cabler, medium-app
  • Enhanced components: Topology, Textarea, Button, FormField, Split, Layer, Meter, CheckBox, RadioButton, Chart, Box, Distribution, Table
  • Added node-clean to remove node_modules
  • Removed deprecated react-tools (using Babel now)
  • Added version check for Node and NPM.
  • Added multi-select support for Table
  • Enhanced overall experience for
  • Add error logs for Grommet NODE_PATH issues
  • Added the ability to add extra eslint rules
  • Added theme for Aruba
  • Enhanced experience for Firefox, Internet Explorer
  • Added better theme detection using IP range
  • Added id to button for better automation support
  • Updated HPE theme
  • Enhanced documentation
  • Better accessibility support for SkipLinks


  • Enhanced examples apps: Cabler, People Finder,
  • Enhanced components: SkipLink, Distribution, Menu, Box, Topology, Meter, Tile, Footer, Split, Chart, SearchInput, Calendar, List, ListItem, FormField, Anchor, Button
  • Fixed version of Grommet for grommet init task
  • Added float support for the Footer
  • Updated NPM dependencies and added integration with David
  • Refactored the design assets structure (separate files for icons, general, and templates)
  • Enhanced documentation
  • Added Accessibility Documentation


  • New example app: cabler
  • New components: Distribution, Carousel, Topology
  • Enhanced components: Split, Header, Box, Chart, Menu, Tiles, Table, List, Meter, DropCaret
  • Added PDF version of Grommet for Adobe Illustrator
  • Added better support for server-side rendering and isomorphic react
  • Added Skip-To link
  • Optimized images for Grommet using TinyPNG
  • Refactored Grommet source code for better separation of responsibilities
  • Better accessibility support
  • Enhanced all sample apps
  • Enhanced Documentation
  • Enhanced design assets


  • New components: ConfirmationForm, Calendar,
  • Enhanced components: RadioButton, CheckBox, input, Button, FormField, Menu, Table, Status, Layer, Meter, Form, Chart, Header, Split
  • New sample applications: todo-app-modular, people-finder
  • Added the fonts as CDN
  • Added lang attribute to Grommet for better Accessibility support
  • Added accessibility navigation to the Calendar
  • Added accessibility to icon
  • New website published
  • Integrated with Sauce Labs
  • Added Integration Tests for Grommet
  • Better compatibility with Node 0.10
  • Moved from jsdom to jsdom-no-contextify
  • Moved from blanket to instabul from code coverage
  • Added devServerHost key to gulpfile.js options to allow remote development
  • Added HP Software showcase examples
  • Added tests for Calendar
  • Enhanced Documentation
  • Enhanced design assets


  • Enhanced components: FormField, RadioButton
  • IMPORTANT: Fixing blocking issue after Webpack released version 1.9.11.
  • Added Slackin integration
  • Added version check from Grommet as in grommet --version
  • Enhanced documentation
  • Added --skipMinify option to gulp dist to avoid minifying Javascript files.
  • Enhanced design assets


  • New components: Button, Distribution
  • Enhanced components: Meter, Legend, Chart, Menu
  • Added todo-app-modular as an example app
  • Added for example apps
  • Improvements for examples apps
  • Performance Optimization for the Server (added gzip compression)
  • Performance Optimization for Images (via ImageOptim)
  • Fixed some reports for static code analysis in Code Climate
  • Added Code Climate support
  • Added new Grommet logo
  • Added more tests for existing components
  • Enhancements for mobile experience
  • Added more examples to the grommet server
  • Enhancements in documentation


  • New components: IndexList, RestWatch, Meter (now Donut has been deprecated)
  • Added documentation for: Split, Sidebar, Status, Map
  • Enhanced components: Left, Right, Split, Sidebar, Donut, Chart, Tile, Menu, Search, Legend, ResourceNotifications, CheckBox, RadioButton, FormField, Documentation, Section
  • Replaced JSHint with ESLint (now we validate code format issues)
  • Added more tests to Grommet
  • Added feature to export example app from Grommet (e.g. medium-app)
  • Renamed tour to medium-app and added enhancements to it
  • Added the cto-app-tuner sample application
  • Added i18n support
  • Enhanced Illustrator Sticker Sheet


  • Enhancements in the following components: Title, Donut, Menu, Chart, and gulp-tasks
  • New components: Split, Map, and Sidebar
  • New version of the FormField component
  • Refactored folder structure of gulp-tasks and test files
  • Enhanced Documentation
  • Adjustments in the HPInc theme


  • Added HPInc Theme
  • Added the initial testing framework for Grommet core
  • Enhanced Documentation
  • Enhanced Forms
  • Hot fixes for Windows environment
  • Reduced the number of NPM dependencies
  • Enhanced version of the Tour
  • Refactored Header component


  • Fixes for loading fonts


  • First version for initial feedback