Hidden

v33.0.0

Oct 15, 2024

Hidden: Hide content by default.
Hidden will now hide content if no hidden conditions are specified, i.e. if no above, below, or print props are provided. Consumers should review usage of the component without these props to ensure Hidden behaves as expected.
Hidden: Deprecate screen prop.
Deprecate screen prop. To provide content to screen readers without rendering it to the screen, consumers should use HiddenVisually instead.
MIGRATION GUIDE:
- <Hidden screen> + <Hidden>

v31.20.0

Nov 9, 2022

Support data attribute boolean values

The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.

EXAMPLE USAGE:

<Component
  data={{
    'custom-attribute': true,
  }}
/>
// => <div data-custom-attribute="true" />

v29.32.0

May 19, 2021

Add support for data attribute maps on all components.

EXAMPLE USAGE:

<Alert
  data={{
    testId: 'message'
  }}
/>

// => <div data-testId="message" />

v29.24.0

Feb 3, 2021

Hidden: Add component support
You can now customise the DOM element rendered when using Hidden. If no component is specified, it will fall back to the current behaviour — a div by default, or a span when setting inline to true.
EXAMPLE USAGE:
<Hidden component="li"> ... </Hidden>

v27.2.0

May 21, 2020

Hidden: Infer inline prop when nested inside Text or Heading

Currently, if you want to hide content using the Hidden component in an inline context (e.g. hiding part of a sentence), you need to remember to set the inline boolean prop.

Since most usages of this feature are within text, we now infer this for you automatically within the context of a Text or Heading component.

MIGRATION GUIDE

This change is not strictly required, but you can now clean up your code like this:

-<Text>The end of this sentence is... <Hidden inline below="tablet">hidden on mobile.</Hidden>
+<Text>The end of this sentence is... <Hidden below="tablet">hidden on mobile.</Hidden>