How to use the ui-box.position.propTypes function in ui-box

To help you get started, we’ve selected a few ui-box examples, based on popular ways it is used in public projects.

github segmentio / evergreen / src / radio / src / RadioGroup.js View on Github external
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { spacing, position, layout, dimensions } from 'ui-box'
import { Pane } from '../../layers'
import { Text } from '../../typography'
import Radio from './Radio'

let radioCount = 1 // Used for generating unique input names

export default class RadioGroup extends PureComponent {
  static propTypes = {
    /**
     * Composes some Box APIs.
     */
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,
    ...dimensions.propTypes,

    /**
     * The options for the radios of the Radio Group.
     */
    options: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.node.isRequired,
        value: PropTypes.string.isRequired,
        isDisabled: PropTypes.bool
      })
    ).isRequired,

    /**
     * The selected item value when controlled.
github segmentio / evergreen / src / segmented-control / src / SegmentedControl.js View on Github external
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box, { spacing, position, layout, dimensions } from 'ui-box'
import safeInvoke from '../../lib/safe-invoke'
import SegmentedControlRadio from './SegmentedControlRadio'

let radioCount = 1 // Used for generating unique input names

export default class SegmentedControl extends PureComponent {
  static propTypes = {
    /**
     * Composes some Box APIs.
     */
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,
    ...dimensions.propTypes,

    /**
     * The options for the radios of the Segmented Control.
     */
    options: PropTypes.arrayOf(
      PropTypes.shape({
        label: PropTypes.node.isRequired,
        value: PropTypes.oneOfType([
          PropTypes.number,
          PropTypes.string,
          PropTypes.bool
        ]).isRequired
      })
    ).isRequired,
github segmentio / evergreen / src / combobox / src / Combobox.js View on Github external
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Box, { dimensions, spacing, position, layout } from 'ui-box'
import { Autocomplete } from '../../autocomplete'
import { TextInput } from '../../text-input'
import { IconButton } from '../../buttons'
import deprecated from '../../lib/deprecated'

export default class Combobox extends PureComponent {
  static propTypes = {
    /**
     * Implements some APIs from ui-box.
     */
    ...dimensions.propTypes,
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,

    /**
     * The options to show in the menu.
     */
    items: PropTypes.array.isRequired,

    /**
     * The selected item when controlled.
     */
    selectedItem: PropTypes.any,

    /**
     * Function called when value changes.
     */
    onChange: PropTypes.func,
github segmentio / evergreen / src / checkbox / src / Checkbox.js View on Github external
d="M11 7H5c-.55 0-1 .45-1 1s.45 1 1 1h6c.55 0 1-.45 1-1s-.45-1-1-1z"
    />
  </svg>
)

MinusIcon.propTypes = {
  fill: PropTypes.string
}

class Checkbox extends PureComponent {
  static propTypes = {
    /**
     * Composes some Box APIs.
     */
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,
    ...dimensions.propTypes,

    /**
     * The id attribute of the checkbox.
     */
    id: PropTypes.string,

    /**
     * The id attribute of the checkbox.
     */
    name: PropTypes.string,

    /**
     * Label of the checkbox.
     */
github segmentio / evergreen / src / buttons / src / TextDropdownButton.js View on Github external
class TextDropdownButton extends PureComponent {
  static propTypes = {
    /**
     * Composes the dimensions spec from the Box primitivie.
     */
    ...dimensions.propTypes,

    /**
     * Composes the spacing spec from the Box primitivie.
     */
    ...spacing.propTypes,

    /**
     * Composes the position spec from the Box primitivie.
     */
    ...position.propTypes,

    /**
     * Composes the layout spec from the Box primitivie.
     */
    ...layout.propTypes,

    /**
     * Forcefully set the active state of a button.
     * Useful in conjuction with a Popover.
     */
    isActive: PropTypes.bool,

    /**
     * When true, the button is disabled.
     * isLoading also sets the button to disabled.
     */
github segmentio / evergreen / src / switch / src / Switch.js View on Github external
CheckIcon.propTypes = {
  fill: PropTypes.string,
  size: PropTypes.number
}

const isControlled = component => {
  return {}.hasOwnProperty.call(component.props, 'checked')
}

class Switch extends PureComponent {
  static propTypes = {
    /**
     * Composes some Box APIs.
     */
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,

    /**
     * The id attribute of the radio.
     */
    id: PropTypes.string,

    /**
     * The name attribute of the radio.
     */
    name: PropTypes.string,

    /**
     * The value attribute of the radio.
     */
    value: PropTypes.string,
github segmentio / evergreen / src / form-field / src / FormField.js View on Github external
validationMessage: PropTypes.node,

    /**
     * Composes the dimensions spec from the Box primitive.
     */
    ...dimensions.propTypes,

    /**
     * Composes the spacing spec from the Box primitive.
     */
    ...spacing.propTypes,

    /**
     * Composes the position spec from the Box primitive.
     */
    ...position.propTypes,

    /**
     * Composes the layout spec from the Box primitive.
     */
    ...layout.propTypes
  }

  static defaultProps = {
    labelProps: {
      size: 400
    }
  }

  render() {
    const {
      hint,
github segmentio / evergreen / src / alert / src / Alert.js View on Github external
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { spacing, dimensions, position, layout } from 'ui-box'
import { withTheme } from '../../theme'
import { Pane } from '../../layers'
import { Heading, Paragraph } from '../../typography'
import { IconButton } from '../../buttons'
import { Icon } from '../../icon'

class Alert extends PureComponent {
  static propTypes = {
    /**
     * Composes some Box APIs.
     */
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,
    ...dimensions.propTypes,

    /**
     * The content of the alert. When a string is passed it is wrapped in a `<Text size={400} />` component.
     */
    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

    /**
     * The intent of the alert.
     */
    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
      .isRequired,

    /**
     * The title of the alert.
github segmentio / evergreen / src / alert / src / InlineAlert.js View on Github external
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { spacing, dimensions, position, layout } from 'ui-box'
import { withTheme } from '../../theme'
import { Pane } from '../../layers'
import { Text } from '../../typography'
import { Icon } from '../../icon'

class InlineAlert extends PureComponent {
  static propTypes = {
    /**
     * Composes some Box APIs.
     */
    ...spacing.propTypes,
    ...position.propTypes,
    ...layout.propTypes,
    ...dimensions.propTypes,

    /**
     * The content of the alert.
     */
    children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

    /**
     * The intent of the alert. This should always be set explicitly.
     */
    intent: PropTypes.oneOf(['none', 'success', 'warning', 'danger'])
      .isRequired,

    /**
     * When true, show a icon on the left matching the type.
github segmentio / evergreen / src / buttons / src / IconButton.js View on Github external
class IconButton extends PureComponent {
  static propTypes = {
    /**
     * Composes the dimensions spec from the Box primitivie.
     */
    ...dimensions.propTypes,

    /**
     * Composes the spacing spec from the Box primitivie.
     */
    ...spacing.propTypes,

    /**
     * Composes the position spec from the Box primitivie.
     */
    ...position.propTypes,

    /**
     * Composes the layout spec from the Box primitivie.
     */
    ...layout.propTypes,

    /**
     * Name of a Blueprint UI icon, or an icon element, to render.
     * This prop is required because it determines the content of the component, but it can
     * be explicitly set to falsy values to render nothing.
     *
     * - If `null` or `undefined` or `false`, this component will render nothing.
     * - If given an `IconName` (a string literal union of all icon names),
     *   that icon will be rendered as an `<svg>` with `<path>` tags.
     * - If given a `JSX.Element`, that element will be rendered and _all other props on this component are ignored._
     *   This type is supported to simplify usage of this component in other Blueprint components.