Matchbox 4.1.0

2020 August 14th

The new Layout component is built to be used to render the two-column annotated layouts that Hibana uses.

<Layout.Section annotated>
<Layout.SectionTitle>Section Title</Layout.SectionTitle>
Annotated Section Content
<Layout.Section>Main Section Content</Layout.Section>

The Banner component now includes one new component, Banner.Action. The actions and action props will continue to work, but have been deprecated.

<Banner status="info" title="Banner Title">
<p>Banner Content</p>
<Banner.Action>Action Content</Banner.Action>

Panel now includes two new components, Panel.Header, Panel.Action. The deprecated component, Panel.LEGACY, is also available and is identical to the pre 4.1.0 Panel.

Header Title
Section Content
<Panel.Action>View Details</Panel.Action>

Modal has recieved an overhaul and aligns closer to the current Drawer prop interface. Modal now includes a Panel by default. The deprecated component, Modal.LEGACY is also available and is identical to the pre 4.1.0 Modal.

<Modal closeOnEscape closeOnOutsideClick>
<Modal.Header showCloseButton>Modal Title</Modal.Header>
<Modal.Content>Modal Content</Modal.Content>
<Button>Primary Button</Button>
<Button>Secondary Button</Button>
<Button>Tertiary Button</Button>

ActionList now includes two new components ActionList.Section and ActionList.Action. The sections and actions props will continue to work.

<ActionList.Action to="#">Action</ActionList.Action>
<ActionList.Action to="#">Action</ActionList.Action>
<ActionList.Action to="#">Action</ActionList.Action>
<ActionList.Action to="#">Action</ActionList.Action>

Button now includes Button.Icon to help with icon rendering inside buttons.

<Button color="blue">
<Button.Icon as={ArrowDropDown} ml="200" />

Tables now include Table.TotalsRow to assist rendering correct font styles of a totals row.


RadioCard and RadioCard.Group are two new components that render radio inputs as Panels

label="Radio Card Group"
<RadioCard id="id1" label="Check Me 1" name="group" defaultChecked>
I am help text
<RadioCard id="id2" label="Check Me 2" name="group">
I am help text

Gets the rect object of the referenced DOM element and updates it when it is resized.

import { useResizeObserver } from '@sparkpost/matchbox';
function Component() {
const [ref, entry] = useResizeObserver();
return <div ref={ref} />;

SSR friendly hook that copies a string to the clipboard and provides copied state

import { useCopyToClipboard } from '@sparkpost/matchbox';
function Component() {
const { copy, copied } = useCopyToClipboard({ timeout: 2000 });
return (
<Button onClick={() => copy('string')}>
{copied ? 'String has been copied' : 'Copy to clipboard'}