TextDropdown

v32.18.0

May 24, 2024

Improve virtual touch target positioning for narrow elements
To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area. This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.

v31.21.1

Nov 17, 2022

TextDropdown: Fix a type error affecting consumers on TypeScript versions >=4.9.0

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

v25.3.0

Apr 17, 2020

Add TextDropdown component

An inline dropdown that can be used as part of a sentence or as an alternative to Dropdown, outside of a more structured form.

Inherits its styling from the parent typographic component, and as such must be used nested within either a Text or Heading component.

Example usage:

const [jobTitle, setJobTitle] = useState('Developer');

<Text>
  <TextDropdown
    id="jobTitle"
    label="Job Title"
    value={jobTitle}
    onChange={setJobTitle}
    options={['Developer', 'Designer', 'Product Manager']}
  />
</Text>;

Braid Logo