Bumbag UI Library

The Card component automatically manages ARIA attributes based on the content provided:

• If a title is provided, the aria-labelledby attribute is automatically set on the component.
• If a description is provided, the aria-describedby attribute is automatically set on the component.

By default, responder handlers like onStartShouldSetResponder and onMoveShouldSetResponder use a bubbling pattern where the deepest node is called first. This ensures child controls (like buttons) are usable.

If a parent component needs to intercept a touch before it reaches its children, use the capture phase handlers. Returning true from these handlers allows the parent to become the responder and prevent children from receiving the touch event.

// To prevent children from becoming responders on touch start:
onStartShouldSetResponderCapture: (event: GestureResponderEvent) => boolean;

// To prevent children from becoming responders on move:
onMoveShouldSetResponderCapture: (event: GestureResponderEvent) => boolean;

The <Switch> component follows the WAI ARIA Checkbox Pattern.

Accessibility Rules

• Labeling: The switch must have an accessible label. You should provide a label prop. If label is not provided, you must specify either aria-label or aria-labelledby.

Interaction Patterns

• Role: The component has a role of checkbox.
• Keyboard: When the switch has focus, pressing the Space key changes its state.

To maintain accessibility, every input must have an accessible label. You can achieve this in three ways:

1. Use the <InputField> component with a label prop.
2. Use aria-label or aria-labelledby directly on the <Input>.
3. Use a standard <Label> with htmlFor matching the <Input> id.

Bumbag automatically sets aria-required="true" if an input is required and aria-invalid="true" if it is invalid.

// Via InputField
<InputField label="First name" />

// Via aria-label
<Input aria-label="First name" />

// Via htmlFor/id
<Label htmlFor="firstName">First name</Label>
<Input id="firstName" />

The <Box> component is the fundamental building block of all Bumbag Native components. It serves as a primitive that renders React Native's <View> component at its core. You can use it to create layout containers and styled elements by passing layout and style props directly to it.

<Box>
  <Box width="50px" height="50px" backgroundColor="primary" />
  <Box width="50px" height="50px" backgroundColor="secondary" />
</Box>

Tags are often used in collections. You can use <Set> for spacing between tags or <Group> to wrap them together.

Using Set

<Set spacing="minor-1">
  <Tag>Tag 1</Tag>
  <Tag>Tag 2</Tag>
</Set>

Using Group

<Group>
  <Tag>Default</Tag>
  <Tag palette="textTint">Hello</Tag>
</Group>

<Set spacing="minor-1">
  <Tag>Hello</Tag>
  <Tag>World</Tag>
</Set>

The <Rating> component is built with accessibility in mind using the following patterns:

• It extends the accessibility features of the RadioGroup component.
• Rating.Item has a role="radio".
• The currently selected item has aria-checked="true".
• Each item includes aria-posinset (its position in the set) and aria-setsize (the total number of items in the set).

A Popover is a lightweight dialog that floats beside a disclosure trigger. To use it, you typically compose three parts:

1. <Popover.State>: Manages the open/closed state. It can be used as a wrapper or via render props to provide utilities like hide.
2. <Popover.Disclosure>: The trigger element (e.g., a button) that opens the popover. Use the use prop to specify which component should act as the trigger.
3. <Popover>: The actual floating content container.

For automatic state management, wrap them in <Popover.State>. For manual control, use the Popover.useState() hook or the render prop pattern.

import { Popover } from 'bumbag';

<Popover.State>
  <Popover.Disclosure use={Button}>Open Popover</Popover.Disclosure>
  <Popover hasArrow>
    Popover content goes here.
  </Popover>
</Popover.State>

You can control the visibility of the header in two ways:

1. Using <PageWithHeader.Disclosure>: This component acts as a trigger (e.g., a button) to toggle the header. Use the use prop to specify which component should be used as the trigger.
2. Using the usePage hook: For more manual control, use the usePage hook to access the header object, which contains a toggle method.

Note: The usePage hook must be used within a component that is a child of <PageWithHeader>.

// Option 1: Using Disclosure component
<PageWithHeader.Disclosure use={Button}>
  Toggle header
</PageWithHeader.Disclosure>

// Option 2: Using usePage hook
function Example() {
  const { header } = usePage();
  return (
    <Button onClick={header.toggle}>Toggle header</Button>
  )
}