BraidProvider

v31.2.2

Dec 9, 2021

BraidProvider: Add backgroundColor to html node when styleBody is set (defaults to true)

v29.2.0

Aug 14, 2020

Added support for refs on Link

Forwarding refs is necessary for certain accessibility patterns (e.g. managing focus states), but the Link component wasn't doing this correctly.

Please note that, if you're passing a custom linkComponent implementation to BraidProvider, you'll need to ensure that you're using the new makeLinkComponent helper function to forward refs, otherwise any attempt to pass a ref to Link will throw an error.

MIGRATION GUIDE

-import { BraidProvider, LinkComponent } from 'braid-design-system';
+import { BraidProvider, makeLinkComponent } from 'braid-design-system';

-const CustomLink: LinkComponent = ({ href, ...restProps }) =>
+const CustomLink = makeLinkComponent({ href, ...restProps }, ref) =>
  href[0] === '/' ? (
-    <ReactRouterLink to={href} {...restProps} />
+    <ReactRouterLink to={href} {...restProps} ref={ref} />
  ) : (
-    <a href={href} {...restProps} />
+    <a href={href} {...restProps} ref={ref} />
  );

export const App = () => (
  <BraidProvider linkComponent={CustomLink} {...rest}>
    ...
  </BraidProvider>
);

v29.0.1

Aug 5, 2020

Throw meaningful error when using 'BraidProvider' in unit tests

v25.0.0

Apr 1, 2020

BraidProvider: Add linkComponent prop to customise link rendering.

If you'd like to customise the technical implementation of all Link and TextLink components from Braid, you can now pass a custom component to the linkComponent prop on BraidProvider. For example, if you wanted to ensure that all relative links are React Router links:

import React from 'react';
import { Link as ReactRouterLink } from 'react-router-dom';
import { BraidProvider, LinkComponent } from 'braid-design-system';
import wireframe from 'braid-design-system/themes/wireframe';

// First create the custom link implementation:
const CustomLink: LinkComponent = ({ href, ...restProps }) =>
  href[0] === '/' ? (
    <ReactRouterLink to={href} {...restProps} />
  ) : (
    <a href={href} {...restProps} />
  );

// Then pass it to BraidProvider:
export const App = () => (
  <BraidProvider theme={wireframe} linkComponent={CustomLink}>
    ...
  </BraidProvider>
);

In order to make your custom link component available for any type of link (not just usages of TextLink), this release introduces a new Link component which renders an unstyled a tag by default.

BREAKING CHANGES

TextLink now requires an href prop. Even though this is unlikely to affect anyone (a TextLink without an href isn't terribly useful), this is still technically a breaking change.
However, if you find an instance of TextLink that you think shouldn't have an href, this is a sign that it's not actually a link and you should use a TextLinkRenderer instead. Unfortunately, because there's no way for us to know the semantics of your usage ahead of time, we're unable to provide a migration guide, so you'll need to be mindful of how this might impact accessibility.
The props for TextLink now extend React's AnchorHTMLAttributes<HTMLAnchorElement> type rather than AllHTMLAttributes<HTMLAnchorElement>. While highly unlikely, this may cause type errors if you've passed props to TextLink that aren't considered to be valid anchor props.

Braid Logo