Instructure UI

The <TreeBrowser/> component provides a keyboard-accessible tree structure for browsing hierarchical content. It requires a normalized data structure consisting of collections and items objects, where collections can contain other collections or items.

Best Practices:

• Do: Use for browsing hierarchical content.
• Don't: Use for site navigation.

The @instructure/ui-i18n package provides helper components and utilities designed for internationalization (i18n) tasks.

Components

• ApplyLocale: A component used to apply locale settings.

Utilities

• bidirectional: Handles bidirectional text directionality.
• DateTime: Utilities for date and time formatting and manipulation.
• Decimal: Utilities for decimal number formatting.
• Locale: Utilities for managing and interacting with locale data.

The @instructure/ui-color-picker package provides several specialized components for color manipulation and accessibility:

• ColorPicker: The primary component, featuring an input field that can be customized for various input requirements.
• ColorIndicator: A visual component that displays a color within a circle featuring a checkerboard background.
• ColorMixer: A tool for adjusting colors by setting hue, saturation, luminance, and alpha, or by manually entering an rgba color.
• ColorPreset: Allows users to select from a collection of predefined colors. The list of presets can be dynamically modified (added or removed) by the user.
• ColorContrast: A utility component that calculates, visualizes, and validates the contrast ratio between two colors against WCAG 2.1 standards.

The @instructure/ui-checkbox package exports the following components:

• Checkbox: A single styled checkbox input.
• CheckboxGroup: A component for managing a collection of checkboxes.

<ProgressBar /> is a styled HTML <progress /> element that includes the necessary aria attributes for screen reader support. It is used to visualize the progress of a task by displaying a bar that fills based on valueNow and valueMax props.

<ProgressBar
  screenReaderLabel="Loading completion"
  valueNow={40}
  valueMax={60}
/>

The @instructure/ui-progress package provides the following components:

• ProgressBar: A linear progress indicator.
• ProgressCircle: A circular progress indicator.

The @instructure/ui-svg-images package provides two primary components for handling SVG assets:

• InlineSVG: Used for rendering SVG content directly in the DOM.
• SVGIcon: Used for rendering SVG icons.