Matchbox 4.0.0
2020 May 20th
@sparkpost/matchbox 4.0.0
New Components
- Box
- Text
- ThemeProvider
- Columns & Column
- Stack
- Inline
- Drawer
- DatePicker
- Spinner
New Hooks
- useDrawer
- useTabs
- useWindowEvent
- useWindowSize
General Changes
- All Sass including global styles, functions and mixin are no longer provided by matchbox
- Certain helper functions and token accessors are available through
design-tokens
- ThemeProvider provides global CSS and the exported
styles.css
should no longer be used
- Certain helper functions and token accessors are available through
matchbox
now listsreact
,react-dom
,react-day-picker
andstyled-components
as peer dependenciesmatchbox-icons
now listsreact
andreact-dom
as peer dependencies
Component Changes
Note: System prop APIs are not provided in this list.
ActionList
- Removes ActionList
groupByKey
default prop - Adds Action proptypes, used internally by ActionList
- ActionList actions now accept a new
is
prop, and accept eitherlink
button
orcheckbox
Banner
- Banner component dismiss button is now a
button
, and handles correct keyboard events - Banner component dismiss button is now screen reader accessible
- Banner with a status of
default
now defaults toinfo
- Links within the Banner component overwrite color and hover color to be accessible
default
banners have been removed and the option renders aninfo
banner
Button
- Buttons no longer automatically blur on click
- External buttons now add a default title, and allow custom titles through a new
title
prop - New style option
outlineBorder
- Deprecates
primary
,plain
andComponent
props
Checkbox
- Checkbox
id
prop is now required - Checkbox now properly hides a screen reader accessible label
- Checkbox now properly uses aria-describedby to link to its helptext and error
- Checkbox.Group now properly uses a
fieldset
andlegend
elements
CodeBlock
- No Changes
ComboBox
- ComboBox now properly renders its menu after the text field
- ComboBoxTextField prop
id
is now required - ComboBoxTextField now properly hides a screen reader accessible label
- ComboBoxTextField now properly uses aria-describedby to link to its helptext and error
- ComboBoxMenu now renders a message if it is open and there are no items through the
emptyMessage
prop, which defaults to 'No Results'
EmptyState
- No changes
Expandable
- Toggle button button is now a
button
, and handles correct keyboard events
Grid
- No changes
Label
- Label component with labelHidden prop now properly hides a screen reader accessible label
<Label/>
now renders nothing when nolabel
is provided
Modal
Modal
now acceptspadding
andmaxWidth
system props, and sets new defaults- Adds React Portal to the
<Modal/>
component with a newportalId
prop to handle rendering
ProgressBar
- Default props changed to support new design and added size:
normal
- Deprecates
color
as only one color is supported
Panel
- No changes
Radio
- Radio
id
prop is now required - Radio now properly hides a screen reader accessible label
- Radio now properly uses aria-describedby to link to its helptext and error
- Radio.Group now properly uses a
fieldset
andlegend
elements
Slider
- No changes
Pagination
- Pagination next and previous buttons are now screen reader accessible with screen reader only content
- Deprecates Pagination prop
selectedColor
- Deprecates Pagination prop
flat
Page
- Removes the default prop
empty
- Page secondary action popover now use the correct accessibility attributes
Pager
- No changes
Popover
- Adds new
id
prop forPopover
- Adds new
as
prop forPopover
, functions the same way aswrapper
- Removes the
portalId
prop fromPopover
- Removes the
fixed
prop fromPopover
, since popover content no longer uses portals - Deprecates
sectioned
andwrapper
props
ScreenReaderOnly
- No changes
Select
- Select now properly uses aria-describedby to link to its helptext and error
- Select with the required prop now applies the required HTML attribute to the input
Snackbar
- Snackbar dismiss button is now a
button
, and handles correct keyboard events
Tab
- Tab
connectBelow
is removed in favor of margin system props - Tabs now specify
type="button"
and support long text content Tabs
are now responsive for both fitted and non-fitted variationsTab
now uses apointer
cursor on hoverTabs
now accept theborderBottom
system prop- Deprecates
color
as only one color is supported
Table
- Tables now support configurable padding on table components
Tag
- Tag component close button is now a
button
, and handles correct keyboard events - New tag colors:
orange
blue
yellow
red
navy
purple
green
magenta
teal
lightGray
darkGray
Tooltip
- Adds a Tooltip
as
prop, defaults tospan
- Fixes tooltip positioning by reverting to portals,
portalId
is available again - Tooltips are now visible if trigger is focused
- Tooltips
id
is now required - Deprecates the
dark
prop on Tooltip - Tooltips no longer accept the prop
debounceEvent
TextField
- TextField now properly hides a screen reader accessible label
- TextField now properly uses aria-describedby to link to its helptext and error
- TextField
id
prop is now required
Toggle
- Restyles the Toggle component
- Deprecates Toggle prop
compact
- Adds new Toggle prop
label
- Toggle
id
prop is now required - Add defaultChecked prop to Toggle
UnstyledLink
- Deprecates
Component
prop