Link

v31.20.0

Nov 9, 2022

Link: Support custom data prop format for attributes
While Link already supports the native HTML syntax for data attributes, e.g. data-testid="123", it now supports the data prop too. This allows data attributes to be provided consistently to all components.
EXAMPLE USAGE:
<Link + data={{ testId: 'myComponent' }} />
The above example results in the following HTML attribute being set on the element: data-testId="myComponent".

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>
);

Link: Fixed types for className prop to support the full classnames API

You can now pass arrays and objects to the className prop on Link without type errors.

For example:

<Link
  href="#"
  className={[
    'someClass',
    ['anotherClass', 'yetAnotherClass'],
    { someConditionalClass: someBoolean }
  ]}>
  ...
</Link>

Braid Logo