a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

grommet

Last update: Jan 5, 2023

Overview

Grommet: focus on the essential experience

Documentation

Visit the Grommet website for more information.

Support / Contributing

Before opening an issue or pull request, please read the Contributing guide.

Install

You can install Grommet using either of the methods given below.

For npm users:

  $ npm install grommet styled-components --save

For Yarn users:

  $ yarn add grommet styled-components

There are more detailed instructions in the Grommet Starter app tutorial for new apps. For incorporating Grommet into an existing app, see the Existing App version.

Explore

Storybook examples per component, you can create them locally by running:
```
  $ npm run storybook
```
or
```
  $ yarn storybook
```
Basic code-sandbox playgrounds for each component.
Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.
End-to-end project examples from our community in the #i-made-this Slack channel.
Read more from the Grommet team on Medium.

Stable

grommet is also available on a stable branch that is built with the content of the 'master' branch. From your package.json point to stable.

"grommet": "https://github.com/grommet/grommet/tarball/stable",

For more info, read the stable wiki.

Release History

See the Change Log.

Tools Behind Grommet

Grommet is produced using this great tool:

BrowserStack for browser emulators and simulators.
Circle CI for continuous integration.

Comments

Use grommet as a library

First of all guys: I :heart: your UI!

I trying to use it as a dependent library of my project: var Dashboard = require('grommet').Dashboard. But right now it's impossible, you do not provide a compiled version of the source in the npm package.

Is it possible to distribute builded source with your next (or next next) release?

The SCSS files will to be compiled to CSS too.

opened by armandabric 64
Responsive Tabs
What does this PR do?

Changes the responsive behavior for Tabs. Previously tabs would wrap if there is not enough room. This PR changes the behavior so if there isn't enough room to show the tabs, only the tabs that fit will be displayed and left and right arrows will be displayed on either side of the Tabs header and can be used to view additional tabs. A number can be passed to the step prop to define the number of tabs the left and right arrows will move by. The default step is 1.

Notes:

I reduced the jest coverage threshold. Testing the responsive tabs is better suited for an end to end environment since it is dependent on screen size. I made note of this in our end-to-end tracking issue.

Where should the reviewer start?

What testing has been done on this PR?

Tested with Tabs/Responsive story

How should this be manually tested?

Do Jest tests follow these best practices?

[ ] screen is used for querying.

[ ] The correct query is used. (Refer to this list of queries)

[ ] userEvent is used in place of fireEvent.

[ ] asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Closes https://github.com/grommet/grommet/issues/6117

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Yes, need to add step prop to docs

Should this PR be mentioned in the release notes?

Yes

Is this change backwards compatible or is it a breaking change?

Backwards compatible
opened by jcfilben 29
InfiniteScroll stops intermittently

The pageHeight is calculated at the beginning of the rendered component but pageHeight is kept constant. A page can have varying content as a user scrolls and pageHeight is still kept the same and can cause the InfiniteScroll to miscalculate the nextEndPage. Rather than using pageHeight, I am proposing the usage of scrollHeight to determine when to call the onMore() function.

Although this works, the scrollHeight doesn't play well with the replace feature, I left a conditional statement for nextEndPage to use the original pageHeight if replace is set to true.

Feedback is very much appreciated.

What does this PR do?

Introduce using scrollHeight rather than using the pageHeight as a user scrolls.

Where should the reviewer start?

src/js/components/InfiniteScroll/InfiniteScroll.js

What testing has been done on this PR?

Before using InfiniteScroll from master: https://codesandbox.io/s/green-water-n7e21?file=/src/App.js

After using InfiniteScroll from this PR: https://codesandbox.io/s/blue-tree-q4d1o?file=/src/App.js

How should this be manually tested?

Scroll through the contents of the table until you are no longer able to. The maximum index number to be reached at is 999.

What are the relevant issues?

https://github.com/grommet/grommet/issues/4337 & https://github.com/grommet/grommet/issues/3106

Do the grommet docs need to be updated?

No

opened by nnbrandon 27
How to create customized themes?

I read from https://github.com/grommet/grommet/issues/684 that you can create a customized theme. I cloned _hpe.defaults.scss and modified some of the colors. Can you tell me how to apply it to grommet?
help wanted

opened by laukaichung 27
Adding Applitools Storybook Visual Testing in a React-base Application

Grommet is a React-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package. During test cases, you can run into some complicated task like: code breakage. I decided to test the changes to the existing E2E test, also include visual testing in the React-based framework, Grommet. Applitools has a Eyes Storybook SDK does not require for you to change any code. Applitools is so great, you only need to add Applitools SDK as a dependency and run the CLI command.

Testing Grommet, I had to change the name of the commands to “test-visual”, so “eyes-storybook”: “eyes-storybook” would become “test-visual” : “eyes-storybook”. To keep it clean, I kept the test command with the other test commands inside the correct script box. I had to remember, scripts are what you run, dependencies are what you install. You should never manually edit dependencies.

Applitools gladly provided SDK https://applitools.com/tutorials/storybook-react.html, that simply opens up different stories from your project and upload the DOM to our Visual grid servers. It uploads multiple DOMs concurrently. The visual grid receives these DOMs and renders them in parallel using real browsers. Then it take pictures of each story. And finally, these pictures are then sent to our AI servers to check for differences.

To run Applitools: Create an Applitools Account Go to the menu in the top right corner and click the profile icon on the far right.. Click on "My API Key" and copy your key Go to your terminal and paste export APPLITOOLS_API_KEY=Your_API_Key_Here Go to your directory and run: npm run test-visual In your Applitools dashboard you should see the results of your test
discussion

opened by ghost 24
Using Anchor with Link from react-router

I'm trying to create links using the Anchor component with the Link component from react-router. I read in the docs that the tag prop can be used for this:

The DOM tag to use for the element. The default is . This should be used in conjunction with components like Link from React Router. In this case, Link controls the navigation while Anchor controls the styling.

However I can't seem to get it working since tag is expecting a String and not another component. I tried <Anchor tag="Link"> but it attempted to render a stylesheet style <link> instead.

Uncaught Invariant Violation: link is a void element tag and must not have children or use props.dangerouslySetInnerHTML. Check the render method of Anchor.

There's also the issue of passing props (like to) to the Link tag.

Any help appreciated!

opened by jameswyse 23

NEW Pagination component

Storybook preview

What does this PR do?

Provides a first pass proposal and prototype examples for <Pagination />.

Demonstrates proof of concept:

Pagination applied to <List /> and <DataTable />

<List data={data} paginationProps={{ border: { side: 'top', color: 'border' }, show: 6, step: 15, pad: { top: 'small' }, }} />

<DataTable columns={columns} data={[...DATA]} step={10} paginationProps={{ margin: { top: 'small' }, pad: { vertical: 'small' }, round: 'xsmall', step: 4, }} />

Pagination as a parent which renders its children

<Pagination items={data}> {item => <Text key={item.entry}>{item.entry}</Text>} </Pagination>

Proposed API Surface:

export interface PaginationProps { a11yTitle?: string, items: number | (string | number | React.ReactElement)[ ], /* Either array of items if called directly, or number of items if called indirectly via another component */ numEdgePages?: number, /* number page indices to display at indices bounds */ numMiddlePages?: number, /* number page indices to display pre/post current page index */ onChange?: function, page?: number, /* current page */ show?: number, /* initial page index to show, defaultPage? */ showFirst?: boolean, /* show button for jump to first page index */ showLast?: boolean, /* show button for jump to last page index */ step?: number, /* number of items to show per page, itemsPerPage? */ children?: function, /* function to be called when each item is rendered */ boxProps?: BoxTypes, /* any box props */ }

Functionality brainstorm: For users:

Should allow user to progress to next step of results

Should allow user to return to the previous step of results

Should provide an easy mechanism for the user to jump to the first page of results

Should provide an easy mechanism for the user to jump to the last page of results

Should provide an indicator for the total number of pages

Should provide an indicator for the current page

For callers:

Should provide simple/minimalistic implementation, but allow for opt-in added functionality

Should be able to paginate the following layouts / visualizations:

Grid of results

List of results

Rows in a Table (?)

Rows in a DataTable

Others? (e.g. Drop?)

Should allow caller to specify the number of items per page

Should automatically calculate the number of pages so the caller does not have to

Should allow the caller to call directly (?)

Should allow caller to provide an array of items

Should allow caller to specify how each item is rendered

Should allow the caller to use Pagination indirectly via other components such as List, Table (?), DataTable, and Grid.

Should allow the caller to specify Pagination props via the calling component

TODOs:

Gather feedback on interface and approach

Documentation

Unit tests

Stories

Where should the reviewer start?

Pagination.js & Pagination stories

What testing has been done on this PR?

Storybook

TODOS:

Unit tests & snapshots

Clean up and elaborate stories

How should this be manually tested?

Storybook

Any background context you want to provide?

What are the relevant issues?

https://github.com/grommet/grommet/issues/4617 https://github.com/grommet/grommet/issues/4647

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Eventually.

Should this PR be mentioned in the release notes?

Eventually.

Is this change backwards compatible or is it a breaking change?

opened by halocline 22
Update ExtendType to support styled-components interpolations
What does this PR do?

Adds TypeScript support for using styled-components interpolations as extend values in the ThemeType, fixing #3578.

Where should the reviewer start?

src/js/themes/base.d.ts src/js/all/stories/typescript/ExtendTheme.tsx

What testing has been done on this PR?

Created a TypeScript story to type-check various usages of extend in a custom theme.

Updated my own project using locally linked grommet and confirmed our custom theme now passed type-checking

How should this be manually tested?

Ensure that yarn tsc --project . reports no type-checking errors for the ExtendTheme story.

Any background context you want to provide?

I added a utility type called PropsOf which makes use of a TypeScript 2.8 feature called conditional types. This means that TypeScript Grommet users should be using TypeScript >= 2.8, which I think is a reasonable tradeoff. If one of the goals of Grommet's TypeScript support is to be compatible with TypeScript pre-2.8 let me know and I can come up with another solution to cover what that utility type does.

I spent some time also investigating the possibility of adding more types for the extend props, which could be convenient for TypeScript users since they would get intellisense about what props are available when extending the theme; however, I couldn't see a 100% reliable way of determining which props would be passed to the styled version of the component, so most of the extend props will be typed as Record<string, any> instead. It should be possible to progressively type more of the props given the new definition of ExtendType, but if you have any suggestions on how to tell with accuracy which props will be available in extend I'd be happy to look into adding more of them.

One other thing to note is that there is an open issue for conflicting react / react-native types at https://github.com/DefinitelyTyped/DefinitelyTyped/issues/33311/. To work around this I've added a .yarnclean to remove @types/react-native post-install. There are a few other alternatives to work around this problem suggested in that issue, and if desired we can take another approach:

Fix @types/styled-components version to an older version

Declare types explicitly in tsconfig.json

Overall I thought the .yarnclean seemed like the most straightforward way, so long as this project is not planning to make use of @types/react-native at this time

What are the relevant issues?

#3578

Do the grommet docs need to be updated?

I don't believe any updates are necessary.

Should this PR be mentioned in the release notes?

Potentially worth mentioning as a bug fix, but probably not worth drawing a large amount of attention to it or anything :)

Is this change backwards compatible or is it a breaking change?

Backward compatible for TypeScript >= 2.8.
opened by jasnross 22
Grommet fails to run with snowpack
I have a pretty simple application with Grommet, Styled Components and Snowpack installed But when I start the app I'm getting the following message:

I tried to install a different version of styled-components (above 5.1) but it also doesn't work. Snowpack with styled-components alone seems to work fine though.

Expected Behavior

The application should launch without any issues.

Actual Behavior

I get a Uncaught TypeError: (0 , _styledComponents.default) is not a function error message

URL, screen shot, or Codepen exhibiting the issue

Codesandbox: https://codesandbox.io/s/grommet-snowpack-repro-o3zks

Your Environment

Grommet version: 2.16.2

Browser Name and version: Microsoft Edge 87

Operating System and version (desktop or mobile): Desktop Windows 10

bug
opened by jeferson-sb 21
Creating image links #3186

Signed-off-by: Ayush Poddar [email protected]

What does this PR do?

Images within Anchor acquire the size of the container

Where should the reviewer start?

What testing has been done on this PR?

Storybook

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

#3186

Screenshots (if appropriate)

Do the grommet docs need to be updated?

Maybe

Should this PR be mentioned in the release notes?

NA

Is this change backwards compatible or is it a breaking change?

NA
waiting discussion

opened by Mr-Magnificent 21
Add ability for hiding Carousel controls

≈

What does this PR do?

Add addition properties for hiding Carousel controls.

Where should the reviewer start?

#3174

What testing has been done on this PR?

How should this be manually tested?

use the storybook

Any background context you want to provide?

#3174

What are the relevant issues?

Screenshots (if appropriate)

Do the grommet docs need to be updated?

yes

Should this PR be mentioned in the release notes?

yes

Is this change backwards compatible or is it a breaking change?

non-breaking

opened by YuriyKovalcuk 21
Fix Image no alternative text
What does this PR do?

Fixes accessibility violation by adding a missing alt to the image input in the Image/Fallback storybook

Where should the reviewer start?

Image/Fallback storybook

What testing has been done on this PR?

yarn test was run before committing

How should this be manually tested?

Check the accessibility tab in the Image/Fallback storybook

Do Jest tests follow these best practices?

[ ] screen is used for querying.

[ ] The correct query is used. (Refer to this list of queries)

[ ] userEvent is used in place of fireEvent.

[ ] asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

https://github.com/grommet/grommet/issues/6124

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No

Should this PR be mentioned in the release notes?

No

Is this change backwards compatible or is it a breaking change?

No
opened by hwdsjtu97 0
possible incorrect typing in onSearch for datatable

onSearch in a datatable sends an object, not a string, but in index.d.ts for datatable, this is the declaration:

onSearch?: (search: string) => void;

opened by mrmagcore 0
typescript declaration for valueKey doesn't match docs.

The select and selectmultiple components have documentation for ValueKey that says:

{ key: "string", reduce: boolean }

but the typescript declaration is this:

valueKey?: | string | { property: string; reduce?: boolean } | ((...args: any[]) => string);

which is it, key or property?

opened by mrmagcore 0
[TS] Migrate DataTable tests to tsx. Update DataTable typings
What does this PR do?

DataTable tests are migrated to TypeScript. DataTable type definitions are slightly fixed.

Where should the reviewer start?

No specific place for start.

What testing has been done on this PR?

Test run using yarn test. Results:

Test Suites: 2 passed, 2 total Tests: 90 passed, 90 total Snapshots: 83 passed, 83 total Time: 22.044 s

How should this be manually tested?

yarn test

Do Jest tests follow these best practices?

[x] screen is used for querying.

[x] The correct query is used. (Refer to this list of queries)

[ ] userEvent is used in place of fireEvent.

[x] asFragment() is used for snapshot testing.

Any background context you want to provide?

Nothing in addition.

What are the relevant issues?

https://github.com/grommet/grommet/issues/5599

Screenshots (if appropriate)

Not appropriate.

Do the grommet docs need to be updated?

No need.

Should this PR be mentioned in the release notes?

This might make sense since DataTable typings are affected.

Is this change backwards compatible or is it a breaking change?

No functionality change.
opened by undeletable 0
Meter Grommet component doesn't accept linear gradient as color value
Expected Behavior

Meter component should accept linear gradient as color value.

Actual Behavior

Meter component is not accepting linear gradient as color value.

Your Environment

Grommet version: 2.21.0

Browser Name and version: Chrome Version 108.0.5359.124 (Official Build) (arm64)

Operating System and version (desktop or mobile): MacOS Monterey v12.3.1
opened by japebo 5
useForwardedRef incorrectly updates the ref during the render phase

In #5462 the function useForwardedRef was changed so that now the ref is mutated during the render phase of React. This violates React’s expected invariant that render functions have no side-effects and conflicts with Concurrent React.

In some cases React warns about that in the console with: “Cannot update a component while rendering a different component. To locate the bad setState() ...”

In the latest master, notice how one updateRef is correctly in an effect, and the other is outside of an effect:

https://github.com/grommet/grommet/blob/7c45cc933a67c02688eee584086f372f857118e2/src/js/utils/refs.js#L15-L21

PR change.

Expected Behavior

useForwardedRef should only mutate ref in the useEffect.

Actual Behavior

useForwardedRef mutates ref outside of an effect.

opened by denis-sokolov 0

Releases(v2.28.0)

v2.28.0(Nov 22, 2022)
General:

NEW Skeleton component. (#6318)

Added auto as option for Grommet’s themeMode prop. (#6397)

Added baseline as an accepted value for the alignSelf prop. (#6413)

Enhanced FileInput to recognize user operating system for maxSize calculation. (#6427)

Changed DataChart to better align legend style with chart style. (#6411)

Changed Table to accept a ref. (#6416)

Changed SelectMultiple’s select all and clear all buttons to show when searching. (#6456)

Changed Select to fix an issue with null value. (#6479)

Fixed SkipLinks to filter out undefined children. (#6402)

Fixed issues with itemKey being a function when ordering in List. (#6478)

Fixed an issue with Layer when using a custom containerTarget. (#6457)

Fixed issue where RangeInput within a FormField was off-center. (#6494)

Fixed an issue when using border=‘between’ and gap size in pixels on Box. (#6490)

Fixed an issue with Drop when using a custom containerTarget. (#6450)

Fixed DataTable with pinned header and paginate. (#6501)

Calendar:

Fixed issue where the incorrect timezone offset was being applied. (#6424)

Fixed onBlur validation. (#6436)

Fixed next/back arrows disabled when date is out of bounds. (#6156)

DateInput:

Fixed issue with range format and no value. (#6408)

Fixed issue where bounds were not respected. (#6438)

Fixed issue where the incorrect timezone offset was being applied. (#6424)

Notification:

Added time prop. (#6462)

Added icon prop. (#6389)

Typescript:

Fixed typescript definition of zIndex theme property of Drop. (#6472)

Fixed typescript definition for rowDetails in DataTable. (#6486)

Fixed typescript definition for Tip’s dropProps. (#6431)

Fixed typescript definition for FileInput’s onChange prop. (#6418)

Fixed typescript definition of dropProps in various components. (#6463)

Source code(tar.gz)
Source code(zip)
grommet-2.28.0-licenses.json(349 bytes)
grommet-2.28.0-src-with-dependecies.tgz(41.64 MB)
v2.27.0(Oct 7, 2022)
General:

Updated to Webpack 5. (#6329)

Added global.font.variant to theme. (#6327)

Added a11yTitle prop to Avatar. (#6353)

Enhanced Notification to accept a node type for message prop. (#6320)

Enhanced CheckBox to accept theme.checkBox.hover. (#6355)

Enhanced DateInput to accept theme.dateInput.container.round to control rounding. (#6385)

Fixed RadioButton to accept a custom theme icon. (#6263)

Fixed Select bug when valueKey is not specified. (#6392)

Fixed DataChart to not show detail for missing value. (#6404)

SelectMultiple:

Fixed object comparison. (#6403)

Fixed behavior when providing array of objects to options. (#6359)

List:

Fixed layout when action and onOrder are defined. (#6350)

Fixed onOrder dragging behavior bug. (#6386)

TypeScript:

Fixed DataTable groupBy keys to optional. (#6400)

Source code(tar.gz)
Source code(zip)
grommet-2.27.0-licenses.json(349 bytes)
grommet-2.27.0-src-with-dependecies.tgz(41.63 MB)
v2.26.0(Sep 23, 2022)
General:

NEW SelectMultiple component. (#6275)

Added global.backgrounds to the theme allowing theme-defined backgrounds. (#6310)

Added defaultValue prop to CheckBoxGroup. (#6331)

Added pinned prop to List allowing list items to be pinned in place when reordering. (#6249)

Fixed Heading text to wrap by default. (#6296)

Fixed Notification theme’s default to have proper background. (#6336)

Select:

Fixed Select to trigger validation when value is an array. (#6316)

Fixed Select to allow initial value to be null. (#6324)

Source code(tar.gz)
Source code(zip)
grommet-2.26.0-licenses.json(715 bytes)
grommet-2.26.0-src-with-dependecies.tgz(43.08 MB)
v2.25.3(Sep 1, 2022)
Moved TestCafe dependencies into devDependencies. (#3612)

Source code(tar.gz)
Source code(zip)
grommet-2.25.3-licenses.json(349 bytes)
grommet-2.25.3-src-with-dependecies.tgz(41.59 MB)
v2.25.2(Aug 31, 2022)
General:

Added formField.checkBox.pad as a theme option to add pad to CheckBox when wrapped in FormField. (#6300)

Added weight prop to Heading. (#6294)

Added size to PageHeader. (#6279)

Fixed Menu types and added menu.item prop for Menu theme. (#6241)

Fixed Spinner to obtain the correct size on different screen sizes. (#6277)

Fixed circle Meter angle calculation for larger values. (#6293)

Enhanced Tab to be resilient to not be contained in Tabs. (#6274)

Button:

Enhanced Button to allow the user to specify icon for kind in theme. (#6297)

Fixed TypeScript theme type for Button. (#6298)

DataTable:

Fixed TS error for border in DataTable. (#6253)

Fixed DataTable sort when some attributes are null. (#6282)

Fixed sort icon to update on re-render. (#6307)

Select:

Fixed an issue when options are set to objects and no labelKey or valueKey is provided. (#6299)

Fixed an issue where all the options were not being loaded when clear={true}. (#6285)

9/15 Note: An issue with this release has been identified. Passing a null value to Select causes an error. In previous versions, passing a null value was accepted. A fix for this has been merged and will be available in the next release which is planned for next week (if needed sooner consider using the stable branch or an older version of Grommet).
Source code(tar.gz)
Source code(zip)
grommet-2.25.2-licenses.json(349 bytes)
grommet-2.25.2-src-with-dependecies.tgz(41.59 MB)
v2.25.1(Jul 27, 2022)
General:

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)

Typescript:

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)

DataChart:

Fixed detail pad. (#6206)

Fixed support of negative values. (#6246)

Removed IE11 specific support.(#6240)

FileInput:

Fixed cursor behavior. (#6154)

Fixed scroll behavior when pressing space. (#6194)

Source code(tar.gz)
Source code(zip)
grommet-2.25.1-licenses.json(349 bytes)
grommet-2.25.1-src-with-dependecies.tgz(41.58 MB)
v2.25.0(Jun 29, 2022)
General:

Enhanced Menu items to allow for grouped items (#6162).

Enhanced FileInput to include event.target.files 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).

Source code(tar.gz)
Source code(zip)
grommet-2.25.0-licenses.json(349 bytes)
grommet-2.25.0-src-with-dependecies.tgz(41.58 MB)
v2.24.0(Jun 2, 2022)
General:

NEW PageHeader Component. #6071

Enhanced TextInput accessibility by adding combobox and listbox ARIA roles. #6079

Enhanced Anchor theme with anchor.gap. #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. #6101

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

List:

Added onActive. #6103

Added disabled. #6111

Select:

Fixed bug so search term persists after an option is selected when closeOnChange={false}.#6147

Fixed keyboard navigation in Select with search. #6101

Source code(tar.gz)
Source code(zip)
grommet-2.24.0-licenses.json(349 bytes)
grommet-2.24.0-src-with-dependecies.tgz(41.61 MB)
v2.23.0(Apr 28, 2022)
General:

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)

DataChart:

Added offset gap. (#6041)

Fixed an issue when there is only one datum. (#6082)

DataTable:

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)

Select:

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)

Video:

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)

Source code(tar.gz)
Source code(zip)
grommet-2.23.0-licenses.json(349 bytes)
grommet-2.23.0-src-with-dependecies.tgz(41.57 MB)
v2.22.0(Apr 1, 2022)
General:

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)

DateInput:

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)

Select:

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)

Notification:

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)

DataChart:

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)

Source code(tar.gz)
Source code(zip)
grommet-2.22.0-licenses.json(349 bytes)
grommet-2.22.0-src-with-dependecies.tgz(41.56 MB)
v2.21.0(Feb 23, 2022)
General:

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 button.gap 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)

DataChart:

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)

DateInput:

Added icon prop. (#5911)

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

Notification:

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

Enhanced toast prop to allow setting autoClose. (#5730)

Select:

Fixed screenreader behavior to read out correct number of options. (#5924)

Improved the screenreader and keyboard navigation experience. (#5934)

Source code(tar.gz)
Source code(zip)
grommet-2.21.0-licenses.json(349 bytes)
grommet-2.21.0-src-with-dependecies.tgz(41.55 MB)
v2.20.1(Jan 27, 2022)
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)

Source code(tar.gz)
Source code(zip)
grommet-2.20.1-licenses.json(349 bytes)
grommet-2.20.1-src-with-dependecies.tgz(41.54 MB)
v2.20.0(Jan 6, 2022)
General:

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 a small icon size. (#5856)

Fixed TextInput suggestions closing incorrectly. (#5860)

Fixed Clock to handle when the hour is not given. (#5850)

Calendar:

Enhanced Calendar to handle changes with time zones. (#5837)

Enhanced Calendar accessibility for screen readers. (#5849)

Fixed Typescript definition for Calendar messages prop. (#5836)

Source code(tar.gz)
Source code(zip)
grommet-2.20.0-licenses.json(349 bytes)
grommet-2.20.0-src-with-dependecies.tgz(41.54 MB)
v2.19.1(Nov 19, 2021)
Fixed DataTable onSelect bug.

Source code(tar.gz)
Source code(zip)
grommet-2.19.1-licenses.json(349 bytes)
grommet-2.19.1-src-with-dependecies.tgz(2.19 MB)
v2.19.0(Nov 17, 2021)
General:

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)

Button:

Added hasLabel and hasIcon prop to Button. (#5628)

Fixed TypeScript support for Button. (#5651)

CheckBox:

Fixed theme.checkBox.label.align to apply only when label is string. (#5800)

Fixed focus state to not apply when disabled. (#5658)

DateInput:

Enhanced behavior to align with native HTML. (#5667)

Added size to TypeScript definitions. (#5687)

Added checks for leap year. (#5717)

Fixed value bug. (#5632)

FileInput:

Added confirmRemove prop. (#5711)

Fixed maxSize conversion factor. (#5775)

FormField:

Added option to remove required indicator for individual FormField. (#5713)

Fixed theme styling on required indicator. (#5709)

RangeInput:

Added theme.rangeInput.pad. (#5666)

Added disabled prop. (#5660)

Enhanced RangeInput to be controlled by mouse wheel. (#5693)

Source code(tar.gz)
Source code(zip)
grommet-2.19.0-licenses.json(349 bytes)
grommet-2.19.0-src-with-dependecies.tgz(2.19 MB)
v2.18.0(Sep 29, 2021)
General:

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)

Button:

Added justify prop to Button. (#5591)

Fixed missing TypeScript type rel on Button. (#5582)

Calendar:

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)

Carousel:

Fixed Carousel keyboard accessibility by limiting focus to only visible children. (#5552)

Fixed Carousel animation direction when set to autoplay. (#5603)

DateInput:

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)

DataTable:

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)

FileInput:

Added maxSize prop to FileInput to limit allowed file size. (#5457)

Enhanced FileInput to limit the allowed number of files to be uploaded. (#5218)

Markdown:

Enhanced Markdown to support refs. (#5587)

Fixed unintentional line break when italics were used in Markdown. (#5581)

Fixed Markdown to properly support onClick. (#5614)

Meter:

Fixed Meter size=”full” bug. (#5597)

Fixed missing TypeScript semicircle type on Meter. (#5601)

Select:

Fixed missing support for onBlur and onFocus on Select. (#5590)

Fixed missing TypeScript type className on Select. (#5561)

Source code(tar.gz)
Source code(zip)
grommet-2.18.0-licenses.json(349 bytes)
grommet-2.18.0-src-with-dependecies.tgz(2.17 MB)
v2.17.5(Aug 25, 2021)
General:

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. #5513

Enhanced CheckBox to accept children. #5460

Enhanced CheckBoxGroup to accept children. #5460

Enhanced Meter to accept type=”semicircle”. #5463

Enhanced Select emptySearchMessage to accept JSX elements. #5525

Fixed missing TypeScript type for Button kind. #5529

Fixed missing TypeScript type for Markdown options. #5534

Fixed Form validation to exclude disabled inputs from validation results. #5530

Fixed Menu to exclude extraneous Button when drop direction is flipped vertically. #5497

Accessibility:

Fixed Calendar accessibility issue by properly traversing cells with populated dates. #5474

Fixed Carousel accessibility issue by clearly labeling the currently displayed slide. #5254

Fixed RangeInput accessibility issue by properly placing focus on the input’s thumb control. #5254

Fixed RangeSelector accessibility issue by properly specifying role=”slider”. #5533

DateInput:

Fixed ability to reset DateInput value with ” ” or [ ]. #5517

Fixed situation where DateInput calendar would not open properly. #5491

Layer:

Fixed missing extend for ThemeType layer.container.extend. #5520

Fixed bug where Layer could not be used outside of Grommet block.. #5524

Source code(tar.gz)
Source code(zip)
grommet-2.17.5-licenses.json(349 bytes)
grommet-2.17.5-src-with-dependecies.tgz(2.11 MB)
v2.17.4(Jul 27, 2021)
General:

Added animation prop to Diagram. #5267

Added onChange to FileInput. #5028

Added support for textAlign=“justify” to Heading. #5374

Added selected styling to custom child in Select. #5296

Enhanced support for aria-label in all components where a11yTitle is accepted. #5444

Enhanced Grid align and alignContent to support any valid CSS align-items and align-content strings. #5037

Enhanced MaskedInput size to accept additional t-shirt sizes. #5405

Enhanced TextArea size to accept additional t-shirt sizes. #5405

Enhanced TextInput size to accept additional t-shirt sizes. #5405

Fixed styling for Button hover state. #5314

Fixed initial image displayed in Carousel. #5326

Fixed DataChart detail display when rendering large data sets. #5331

Fixed values retained in uncontrolled Form when inputs are dynamically removed. #5414

Fixed active style for List so that the style is retained when a user is interacting with other components on the page. #5371

Fixed RadioButtonGroup to properly pass focus state to children. #5473

Fixed TableCell rendering performance when theme background is changed. #5407

Fixed theme to accept custom pixel values when specifying input font sizes. #5399

Box:

Enhanced align and alignContent to support any valid CSS align-items and align-content strings. #5037

Fixed Box rendering performance when theme background is changed. #5407

Calendar:

Enhanced Calendar accessibility by announcing the selected date upon selection. #5458

Fixed Calendar accessibility to properly read only the active date as a user tabs through calendar dates. #5319

Fixed Enter key behavior for Calendar. #5367

DataTable:

Enhanced DataTable to apply case-insensitive sorting. #5307

Enhanced DataTable groupBy to leverage InfiniteScroll. #5452

Fixed DataTable cell styling to better support custom styling of grouped rows. #5355

Fixed active style for DataTable so that the style is retained when a user is interacting with other components on the page. #5371

DateInput:

Added size prop to DateInput. #5405

Fixed DateInput to set value properly when implemented as a controlled component. #5330

FormField:

Fixed FormField theme property to use error.border.color. #5252

Fixed FormField validation when supplied an empty array as value. #5349

Grommet:

Added global messages prop to Grommet. #5356

Added ability to pass dynamic values to messages. #5468

Paragraph:

Added support for textAlign=“justify” to Paragraph. #5374

Fixed ability of size to accept a custom pixel value. #5465

Text:

Added tip and smart aria-label default to Text. #5138

Added truncate=“tip” to display the entirety of truncated text within a Tip.

Added support for textAlign=“justify” to Text. #5374

Source code(tar.gz)
Source code(zip)
grommet-2.17.4-licenses.json(381 bytes)
grommet-2.17.4-src-with-dependecies.tgz(2.27 MB)
v2.17.3(Jun 8, 2021)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.17.3-licenses.json(403 bytes)
grommet-2.17.3-src-with-dependecies.tgz(2.46 MB)
v2.17.2(Apr 29, 2021)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.17.2-licenses.json(460 bytes)
grommet-2.17.2-src-with-dependecies.tgz(3.84 MB)
v2.17.1(Mar 26, 2021)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.17.1-licenses.json(460 bytes)
grommet-2.17.1-src-with-dependecies.tgz(3.83 MB)
v2.17.0(Mar 23, 2021)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.17.0-licenses.json(460 bytes)
grommet-2.17.0-src-with-dependecies.tgz(3.83 MB)
v2.16.3(Feb 4, 2021)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.16.3-licenses.json(460 bytes)
grommet-2.16.3-src-with-dependecies.tgz(3.79 MB)
v2.16.2(Dec 15, 2020)
Fixed Select selection when using search

Source code(tar.gz)
Source code(zip)
grommet-2.16.2-licenses.json(460 bytes)
grommet-2.16.2-src-with-dependecies.tgz(4.11 MB)
v2.16.1(Dec 14, 2020)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.16.1-licenses.json(460 bytes)
grommet-2.16.1-src-with-dependecies.tgz(4.11 MB)
v2.16.0(Nov 25, 2020)
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.
Source code(tar.gz)
Source code(zip)
grommet-2.16.0-licenses.json(460 bytes)
grommet-2.16.0-src-with-dependecies.tgz(4.10 MB)
v2.15.2(Oct 8, 2020)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.15.2-licenses.json(460 bytes)
grommet-2.15.2-src-with-dependecies.tgz(4.03 MB)
v2.15.1(Oct 8, 2020)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.15.1-licenses.json(460 bytes)
grommet-2.15.1-src-with-dependecies.tgz(4.03 MB)
v2.15.0(Aug 20, 2020)
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

Source code(tar.gz)
Source code(zip)
grommet-2.15.0-licenses.json(460 bytes)
grommet-2.15.0-src-with-dependecies.tgz(4.02 MB)
v2.14.0(Jun 12, 2020)
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.

Source code(tar.gz)
Source code(zip)
grommet-2.14.0-licenses.json(460 bytes)
grommet-2.14.0-src-with-dependecies.tgz(3.55 MB)