Matchbox 4.6.0

2020 November 16th

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

A hook that returns the prefers-reduced-motion OS level accessibility option

import { usePrefersReducedMotion } from '@sparkpost/matchbox';
const motion = usePrefersReducedMotion();
console.log(motion); // 'reduce' or 'no-preference'

A hook that detects if a DOM element is visible within the browsers viewport

import { useInView } from '@sparkpost/matchbox';
const [ref, inView] = useInView();
return <div ref={ref}>{inView ? 'In View' : 'Not In View'}</div>;

A new component that correctly styles inline code.

import { InlineCode } from '@sparkpost/matchbox';
return (
  <p>
    This is a regular paragraph with some <InlineCode>inline code</InlineCode>
  </p>
);

LabelValue has been reworked to be composable

import { LabelValue } from '@sparkpost/matchbox';
return (
  <LabelValue>
    <LabelValue.Label>Label</LabelValue.Label>
    <LabelValue.Value>Just a LabelValue</LabelValue.Value>
  </LabelValue>
);

A TON of new icons have been added to matchbox-icons. This one is for the designers! See Material's documentation for more information.

• All images have been replaced with cropped versions
• Banner warning icon has been updated to differentiate from the error Banner
• Empty State responsive behavior has been updated
• Layout components now all accept a data-id prop
• Modals now focus on its contained Panel when opening

• ListBox does not break when option values are numbers
• TextField prefix and suffix size calculation now uses ResizeObserver