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>
<Layout.Section annotated>
<Layout.SectionTitle>Section Title</Layout.SectionTitle>
Annotated Section Content
</Layout.Section>
<Layout.Section>Main Section Content</Layout.Section>
</Layout>

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>
</Banner>

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.

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

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>
<Modal.Footer>
<Button>Primary Button</Button>
<Button>Secondary Button</Button>
<Button>Tertiary Button</Button>
</Modal.Footer>
</Modal>

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

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

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

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

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

<Table>
<tbody>
<Table.Row>
<Table.Cell>1</Table.Cell>
<Table.Cell>2</Table.Cell>
<Table.Cell>3</Table.Cell>
</Table.Row>
<Table.TotalsRow>
<Table.Cell>Total</Table.Cell>
<Table.Cell></Table.Cell>
<Table.Cell>100000</Table.Cell>
</Table.TotalsRow>
</tbody>
</Table>

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

<RadioCard.Group
collapseBelow="sm"
label="Radio Card Group"
orientation="horizontal"
weight="heavy"
>
<RadioCard id="id1" label="Check Me 1" name="group" defaultChecked>
I am help text
</RadioCard>
<RadioCard id="id2" label="Check Me 2" name="group">
I am help text
</RadioCard>
</RadioCard.Group>

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();
console.log(entry.contentRect);
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'}
</Button>;
)
};