Matchbox 4.8.0

2021 February 4th

For a full list of updates, view the release notes on Github.

A new hook that returns the user's preferred color scheme.

import { usePrefersColorScheme } from '@sparkpost/matchbox';
export const ExampleUsage = () => {
// Returns 'dark' | 'light'
const prefersColorScheme = usePrefersColorScheme();
return <>{prefersColorScheme}</>;

Headers now support as and looksLike. And a new component, EmptyState.Media, has been added that supports both Video and Picture components, and is meant to replace EmptyState.Image.

import { EmptyState, Video } from '@sparkpost/matchbox';
<EmptyState.Header as="h2" looksLike="h3">Title</><EmptyState.Header>
<Video loop>
<Video.Source src={Webm} type="video/webm" />
<Video.Source src={Mp4} type="video/mp4" />
  • The Error component now hardcodes data-id="error-message".
  • Checkbox, Radio, Select, Textfield, and ListBox now automatically set aria-invalid when an error is present.
  • Panel Table and borderless Expandable padding has been decreased.
  • Button and UnstyledLink now support as and have deprecated component.
  • Modals will now return focus to the triggered element when closing.
  • Chevrons in Page breadcrumbs are now vertically aligned.
  • Pagination component no longer emits deprecated prop warnings.
  • Resolves a nunmber of security vulnerabilities.