How to use @instructure/ui-prop-types - 10 common examples

---
parent: Select
id: Select.Group
---
@module Group
**/
class Group extends Component {
  static propTypes = {
    /**
    * The label associated with the group options.
    */
    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
    /**
    * Children of type `` that will be considered part of the group.
    */
    children: ChildrenPropTypes.oneOf([Option]),
  }

  static defaultProps = {
    children: null
  }

  /* istanbul ignore next */
  render () {
    // this component is only used for prop validation. Select.Group children
    // are parsed in Select and rendered as Options components
    return null
  }
}

export default Group
export { Group }

parent: Menu
id: Menu.Item
---
**/
@testable()
@themeable(theme, styles)
class MenuItem extends Component {
  static propTypes = {
    /* the menu item label */
    children: PropTypes.node.isRequired,
    /* whether to set the menu item state to selected or not on initial render */
    defaultSelected: PropTypes.bool,
    /**
    * whether the menu item is selected or not (must be accompanied by an `onSelect` prop)
    */
    selected: controllable(PropTypes.bool, 'onSelect', 'defaultSelected'),
    /**
    * when used with the `selected` prop, the component will not control its own state
    */
    onSelect: PropTypes.func,
    onClick: PropTypes.func,
    onKeyDown: PropTypes.func,
    onKeyUp: PropTypes.func,
    onMouseOver: PropTypes.func,
    /**
    * the id of the element that the menu item will act upon
    */
    controls: PropTypes.string,
    disabled: PropTypes.bool,
    /**
    * the element type to render as (will default to `<a>` if href is provided)
    */</a>

import theme from './theme'

/**
---
category: components
---
**/

@testable()
@themeable(theme, styles)
class Breadcrumb extends Component {
  static propTypes = {
    /**
    * children of type Breadcrumb.Link
    */
    children: Children.oneOf([BreadcrumbLink]),
    /**
    * An accessible label for the navigation
    */
    label: PropTypes.string.isRequired,
    /**
    * Sets the font-size of the breadcrumb text
    */
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing
  }

* Element type to render as
    */
    as: PropTypes.elementType,
    /**
    * The aria role of the element
    */
    role: PropTypes.string,
    /**
    * The the actual list element
    */
    elementRef: PropTypes.func,
    /**
    * Content to render as a label. Mostly for when the component is nested
    */
    renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    children: ChildrenPropTypes.oneOf(['Options', 'Item', 'Separator'])
  }

  static defaultProps = {
    as: 'span',
    role: 'list',
    elementRef: (node) => {},
    renderLabel: null,
    children: null
  }

  _labelId = uid('Options-label')

  get childAs () {
    const { as } = this.props
    if (as === 'ul' || as === 'ol') {
      return 'li'

* when used with the `value` prop, the component will not control its own state
    */
    onChange: PropTypes.func,
    disabled: PropTypes.bool,
    readOnly: PropTypes.bool,
    /**
    * object with shape: `{
    text: PropTypes.string,
    type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
      }`
    */
    messages: PropTypes.arrayOf(FormPropTypes.message),
    /**
    * children of type `Checkbox`
    */
    children: ChildrenPropTypes.oneOf([Checkbox]),
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    layout: PropTypes.oneOf([
      'stacked',
      'columns',
      'inline'
    ])
  }

  static defaultProps = {
    disabled: false,
    readOnly: false,
    size: 'medium',
    layout: 'stacked',
    defaultValue: undefined,
    messages: undefined,
    value: undefined,

/**
---
parent: Menu
id: Menu.Group
---
**/
@testable()
@themeable(theme, styles)
class MenuItemGroup extends Component {
  static propTypes = {
    label: PropTypes.node.isRequired,
    allowMultiple: PropTypes.bool,
    /**
    * children of type `Menu.Item`, `Menu.Separator`
    */
    children: ChildrenPropTypes.oneOf([MenuItem, MenuItemSeparator]),
    /**
    * an array of the values (or indeces by default) for the selected items
    */
    selected: controllable(PropTypes.array, 'onSelect', 'defaultSelected'),
    /**
    * an array of the values (or indeces by default) for the selected items on initial render
    */
    defaultSelected: PropTypes.array,
    /**
    * call this function when a menu item is selected
    */
    onSelect: PropTypes.func,
    onMouseOver: PropTypes.func,
    onKeyDown: PropTypes.func,
    /**
    * the id of the element that the menu items will act upon

import theme from './theme'

/**
---
category: components
---
**/

@testable()
@themeable(theme, styles)
export default class TabList extends Component {
  static propTypes = {
    /**
    * children of type `TabPanel`
    */
    children: Children.oneOf([TabPanel, null]),

    variant: PropTypes.oneOf(['simple', 'minimal']),
    /**
    * the index (zero based) of the panel that should be selected on initial render
    */
    defaultSelectedIndex: PropTypes.number,
    /**
    * the index (zero based) of the panel that should be selected (should be accompanied by `onChange`)
    */
    selectedIndex: controllable(PropTypes.number, 'onChange', 'defaultSelectedIndex'),
    /**
    * Call this function when the selected tab changes. When used with `selectedIndex`,
    * the component will not control its own state.
    */
    onChange: PropTypes.func,
    /**

import styles from './styles.css'
import theme from './theme'

/**
---
category: components
---
**/
@testable()
@themeable(theme, styles)
class List extends Component {
  static propTypes = {
    /**
    * Only accepts `` as a child
    */
    children: ChildrenPropTypes.oneOf([ListItem]),
    as: PropTypes.oneOf(['ul', 'ol']),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing,
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    variant: PropTypes.oneOf(['default', 'unstyled', 'inline']),
    delimiter: PropTypes.oneOf(['none', 'pipe', 'slash', 'arrow', 'dashed', 'solid']),
    /**
    * Sets the margin separating each ListItem.
    */
    itemSpacing: PropTypes.oneOf([
      'none',
      'xxx-small',

---
category: components
---
**/
@testable()
@themeable(theme, styles)
class AppNav extends Component {
  static propTypes = {
    /**
    * Screenreader label for the overall navigation
    */
    screenReaderLabel: PropTypes.string.isRequired,
    /**
     * Only accepts `AppNav.Item` as children
     */
    children: ChildrenPropTypes.oneOf([Item]),
    /**
    * The rate (in ms) the component responds to container resizing or
    * an update to one of its child items
    */
    debounce: PropTypes.number,
    /**
    * Content to display before the navigation items, such as a logo
    */
    renderBeforeItems: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    /**
    * Content to display after the navigation items, aligned to the far end
    * of the navigation
    */
    renderAfterItems: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,

import theme from './theme'

/**
---
category: components
---
**/

@testable()
@themeable(theme, styles)
class Breadcrumb extends Component {
  static propTypes = {
    /**
    * children of type Breadcrumb.Link
    */
    children: Children.oneOf([BreadcrumbLink]),
    /**
    * An accessible label for the navigation
    */
    label: PropTypes.string.isRequired,
    /**
    * Sets the font-size of the breadcrumb text
    */
    size: PropTypes.oneOf(['small', 'medium', 'large']),
    /**
    * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
    * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
    * familiar CSS-like shorthand. For example: `margin="small auto large"`.
    */
    margin: ThemeablePropTypes.spacing
  }