a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
APACHE-2.0 License
Bot releases are visible (Hide)
Published by halocline over 3 years ago
General:
textAlign
prop to MaskedInput.date
to accept an array of dates.opacity
to support boolean value.onOrder
allowing for list items to be re-ordered.label
contains truncated text.page
prop changes.Accessibility:
role=”radiogroup”
to RadioButtonGroup and role=”group”
to CheckBoxGroup to improve screen reader interaction.CheckBox:
Grid:
height
and width
to allow easier control of Grid dimensions.columns
capabilities to support a wider range of min-max width values.Grommet:
options
prop to Grommet to provide a way to assign a unique id to a single DOM node.full=”min”
.Meter:
type=”pie”
.direction
to allow Meter of type bar to display in either horizontal or vertical direction.Select:
valueLabel
is used.a11yTitle
was not being applied.Published by halocline over 3 years ago
General:
align
when assigning margin.plain
.ThemeContext.Provider
.options
.options
.defaultValue
.Button:
aria-label
prop on Button.a11yTitle
default value unless otherwise provided.CheckBox:
checkBox.pad
and added pad
prop.fill
prop to CheckBox.DataTable:
groupBy
and onSelect
/select
together.plain
render of column data.onSelect
to accommodate pad on CheckBox.paginate
was used with onClickRow
on DataTable.paginate
on DataTable.DateInput:
[]
, which allows range of dates to start empty.Published by ShimiSun over 3 years ago
Published by ShimiSun over 3 years ago
General:
theme.formField.label.requiredAsterisk
to have a * or custom element appear next to the label on required FormFields.defaultChecked
prop to CheckBox.defaultSuggestion
prop when the input's onChange is triggered.labelKey
is specified.focusIndicator
on TextInput, TextArea, and MaskedInput to only be valid if plain
is also set.hoverIndicator
to accept elevation.theme.menu.drop
to allow theming of Menu's drop alignment.plain
.fill
is set.DataTable:
rowDetails
prop to enable expansion of DataTable rows.Drop:
margin
, round
, background
& elevation
.Form:
onChange
validation option to Form.validate="blur"
.onValidate
in Form to let user know if Form is valid.Layer:
target
scroll behavior to remove scroll lag.DEV:
Published by ShimiSun over 3 years ago
General:
defaultValue
prop to Select.onChild
function to Carousel.pattern
area fill.pad
to be based on the size.DataTable:
onMouseEnter
for hover detection.Form:
onBlur
validation.Layer:
container.elevation
to layer’s theme.onEsc
to be applied to Layer when modal={false}
.layer.border.radius
.Menu:
children
prop to be typed as either a func or node.TextInput:
highlightFirstSuggestion
prop to TextInput.Published by ShimiSun almost 4 years ago
Published by ShimiSun almost 4 years ago
detail
alignment on DataChart.border
prop.textAlign
prop to TextInput.zindex
value of Layer and Drop.DataTable:
pin
on DataTable Footer showing background when it is not pinned.placeholder
prop to DataTable.column
prop in DataTable.Published by ShimiSun almost 4 years ago
General:
tip
prop to button.clear
prop to Select that clears all selections.plain
style when it has children.width
prop on Box.align="end"
.fill
prop to Heading.disabled
prop to Button children.dropProps
and dropHeight
props for Drop customization on MaskedInput.border
on Grid.weight
prop to Anchor.onChange
in Form.extend
for List and List item.background-contrast
to support dark and light more accurately.onClickOutside
for non-modal Layer.checkBoxGroup.container
.Calendar:
range
.activeDate
prop.Clock:
DataChart:
DataTable:
aria-label
.DateInput:
Added support for trimming adjacent days in the 6th row.
Fixed DateInput resetting in Forms.
Dev:
Storybook stories organization by component type.
Published by ShimiSun about 4 years ago
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).radioButton.container.extend
as well.Published by ShimiSun about 4 years ago
General:
replace
and show
are larger than step
.dropProps
functionality for DateInput.active
to pass as a prop to Tab.align
options to Drop's stretch prop.border
.onClick
event for List and handle focus.font.family
to the theme for Paragraph and Text components.theme.global.active
typing.Calendar:
TextInput:
onSuggestionSelect
is used for the suggestion feature instead of onSelect
.onSelect
for listening to select events.plain='full'
option for omitting padding on plain.DataTable:
fill
prop which allows the table to dynamically respond to the available real estate.pin
prop which allows the first column, header, and/or footer to be pinned.sort.external
.icons.sortable
to DataTable theme.select
and onSelect
props.background
prop and background.pinned
theme incompatibilities.Published by ShimiSun about 4 years ago
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:
a11yTitle
support to TextAreamessages
prop to Video to support accessibility standardsSkipLinks:
messages
Form:
onValidate
, allows users to access infos
and errors
when a form validatescontentProps
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:
RadioButton:
background.color
option in RadioButton themefont-weight
of the label from the themeChart:
point
typesanimate
prop to ChartDataChart:
series
prop that encapsulates things previously in chart, xAxis
and yAxis
axis
prop to replace xAxis and yAxisguide
prop to replace the guide from xAxis and yAxisdetail
prop to provide hover interaction details for horizontal bandsgranularity
concept for axis and guidelegend
prop provides a legendTheming:
margin
via themeplain
Buttons active styling for themes that define button.defaultTypeScript:
onChange
to use intrinsic HTML input onChange
typeonChange
to accept a string as an argumentonSubmit
handling of value key of form eventday
in Calendaraction
prop typeonSelect
typePublished by ShimiSun over 4 years ago
General:
a11yTitle
prop as aria-label.rotateLeft
and rotateRight
to Box animation.onKeyDown
event for TextArea.RadioButtonGroup:
Form:
background
and border
options in FormField theme.Accordion:
Menu:
dropProps
in Menu to work with RTL.Select:
onClick
propagation in Select component.onSearch
being called multiple times.Tab/Tabs:
icon
and reverse
props to Tab.responsive
prop to Tabs.alignControls
prop to Tabs.TypeScript:
Hooks:
Dev:
Published by ShimiSun over 4 years ago
NEW Sidebar component.
Improved Form documentation.
Changed Accordion to fix an issue with wrapped children panels.
Changes Select to fix an issue with onChange
value.
Added containerTarget
to Grommet, for enhanced Drop/Layer containers positioning.
Changed InfiniteScroll to address issues with React.StrictMode.
Fixed console warning of List.
Fixed an issue with gap=“none”
on RadioButtonGroup.
Fixed a11yTitle
support of Image.
Added ref
support to Paragraph.
Added ‘size’ option to ‘columns’ prop of DataTable.
Fixed the sort icon switch in DataTable.
Changed TextInput, MaskedInput, and TextArea to work as uncontrolled components.
Enhanced the theme global.input.padding
to accept an object.
Changed CheckBox checked
to default to false as documented.
Changed Form to fire onChange
once per change.
Changed Form to fix caret issue on input fields.
Fixed warning with FormField on react-dom 16.13.1.
Added icon
support for Select to enable icon switches when the drop opens or closes.
Added extensive theme styling for disabled
Button.
Changed Menu to propagate dropProps
to DropButton.
Changed DropButtton to fix an issue with function refs.
Added theme properties for primary and active Button.
TypeScript:
control.open
.Hooks Refactoring:
Published by ShimiSun over 4 years ago
required
Checkbox.range
.Published by ShimiSun over 4 years ago
name
prop for FormField.fill
to be horizontal or vertical.dash
prop to Chart.verticalAlign
under columns.primarykey
false.target
to work for non-modal layers.Hooks:
Published by ShimiSun over 4 years ago
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:
Published by ShimiSun over 4 years ago
Published by ShimiSun over 4 years ago
General
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
.size
prop to Button to support ‘small’, ‘medium’ and ‘large’ sizes.pad
prop to Grid.onClick
to work on ‘bar’ and ‘point’ types.background
prop to Grommet component.direction
of ‘column-reverse’ to calculate gap
height.border=‘between’
to Box.tabIndex
values for outer focus components.onChange
update on Clock.FormField
round
to FormField border theme.status
to FormField validate
.validate
to accept an array and set aria-invalid
when validation fails.Form
validate
prop to Form. touched
attribute for Form onSubmit
event.TextInput
ref
focus issue for TextInput.RadioButtonGroup
disable
prop to RadioButtonGroup.TypeScript
onChange
type of RangeInput.value
type to include object.dependencies
Note: Due to the new color additions of graph-0
, graph-1
, graph-2
, graph-3
, the logic of color calculations on visual components has changed. You wouldn’t tell the difference unless you are using a Meter with an array of more than two default grommet colors.
Published by ShimiSun almost 5 years ago
placeholder
of TextInput.onSelect
.Published by ShimiSun almost 5 years ago
type=‘point’
to Chart.reverse
prop on Menu items.max
prop for Meter.focusIndicator
prop to Box.