@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/src/RangeSlider/RangeSlider.js

@@ -4,6 +4,7 @@ import { clamp, snap } from '@popmotion/popcorn'
 
 import Box from '../Box'
 import { useMeasure } from '../hooks'
+import { useThemeProps } from '../system'
 
 export type Props = {
   /**
@@ -34,6 +35,10 @@ export type Props = {
     progress?: Object,
     thumb?: Object,
   },
+  /**
+   * Prevents the slider from being used and lowers its opacity.
+   */
+  disabled?: boolean,
 }
 
 function RangeSlider(props: Props) {
@@ -44,10 +49,14 @@ function RangeSlider(props: Props) {
     disabled,
     value,
     onChange,
-    variant = {},
     ...restProps
   } = props
 
+  const { variant = {}, ...themeProps } = useThemeProps(
+    'rangeSlider',
+    restProps
+  )
+
   const snapTo = snap(step)
   const sliderRef = useRef()
   const trackRef = useRef()
@@ -185,7 +194,7 @@ function RangeSlider(props: Props) {
       opacity={disabled ? 0.65 : undefined}
       onMouseDown={disabled ? undefined : handleTrackPointerDown}
       onTouchStart={disabled ? undefined : handleTrackPointerDown}
-      {...restProps}
+      {...themeProps}
     >
       <Box
         innerRef={trackRef}

package/src/RangeSlider/RangeSlider.mdx

@@ -2,6 +2,7 @@
 title: RangeSlider
 category: Forms
 summary: Allow the user to specify a numeric value which must be no less than a minimum value and no more than a maximum value. Composes [Box](/box).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live
@@ -9,16 +10,18 @@ render(() => {
   const [volume, setVolume] = React.useState(50)
   const muted = volume === 0
   return (
-    <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
-      <Icon>
-        <Icon.Path name="volume-0" />
-        <Icon.Path name="volume-1" visible={muted} />
-        <Icon.Path name="volume-2" visible={!muted} />
-        <Icon.Path name="volume-3" visible={!muted && volume > 50} />
-      </Icon>
-      <RangeSlider value={volume} onChange={setVolume} />
-      <Text>{volume}</Text>
-    </StackView>
+    <ThemeProvider theme={{ icons }}>
+      <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
+        <Icon>
+          <Icon.Path name="services.volume0" />
+          <Icon.Path name="services.volume1" visible={muted} />
+          <Icon.Path name="services.volume2" visible={!muted} />
+          <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
+        </Icon>
+        <RangeSlider value={volume} onChange={setVolume} />
+        <Text>{volume}</Text>
+      </StackView>
+    </ThemeProvider>
   )
 })
 ```

package/src/ScreenReader/ScreenReader.js

@@ -1,8 +1,13 @@
+// @flow
 import React from 'react'
 
 import Box from '../Box'
 
-function ScreenReader(props) {
+export type Props = {
+  children?: any,
+}
+
+function ScreenReader(props: Props) {
   return (
     <Box
       css={{

package/src/ScreenReader/ScreenReader.mdx

@@ -2,6 +2,7 @@
 title: ScreenReader
 category: General
 summary: Use to display screen reader only content.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Scrim/Scrim.mdx

@@ -2,6 +2,7 @@
 title: Scrim
 category: Overlays
 summary: Scrims are used to display focused content like alerts, modals, or media previews.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Scrim/Scrim.tsx

@@ -2,7 +2,13 @@ import * as React from 'react'
 
 import StackView from '../StackView'
 
-const Scrim = React.forwardRef(function (props, ref) {
+type ScrimProps = {
+  /** Gain access to the internal ref. */
+  ref?: any,
+  children?: any,
+}
+
+const Scrim = React.forwardRef(function (props: ScrimProps,) {
   React.useLayoutEffect(() => {
     document.body.style.overflow = 'hidden'
     return () => {
@@ -11,7 +17,7 @@ const Scrim = React.forwardRef(function (props, ref) {
   }, [])
   return (
     <StackView
-      innerRef={ref}
+      innerRef={props.ref}
       position="fixed"
       top={0}
       right={0}

package/src/Section/Section.js

@@ -5,6 +5,7 @@ import type { ChildrenArray } from 'react'
 import Heading from '../Heading'
 import Toolbar from '../Toolbar'
 import StackView from '../StackView'
+import { useThemeProps } from '../system'
 
 import type { ToolbarProps } from '../Toolbar'
 
@@ -16,17 +17,27 @@ function Section({
   actions = [],
   children,
   count,
-  countColor,
   helpContent,
   onStatusClearRequest,
   status,
   title,
   ...restProps
 }: SectionProps) {
+  const {
+    countColor,
+    headingProps,
+    toolbarProps,
+    ...themeProps
+  } = useThemeProps('section', restProps)
+
   return (
-    <StackView as="section" {...restProps}>
+    <StackView as="section" {...themeProps}>
       <Toolbar
-        title={<Heading level={3}>{title}</Heading>}
+        title={
+          <Heading level={3} {...headingProps}>
+            {title}
+          </Heading>
+        }
         helpContent={helpContent}
         actions={actions}
         count={count}
@@ -34,6 +45,7 @@ function Section({
         status={status}
         onStatusClearRequest={onStatusClearRequest}
         marginBottom={2}
+        {...toolbarProps}
       />
       {children}
     </StackView>

package/src/Section/Section.mdx

@@ -2,6 +2,7 @@
 title: Section
 category: General
 summary: Sections are used within `Page` components to break up content into sections that always display a `Toolbar` at the top.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/SegmentedControl/SegmentedControl.mdx

@@ -1,6 +1,7 @@
 ---
 title: SegmentedControl
 category: General
+propsSummary: Accepts [Input.Inputbox](/input.inputbox) props.
 ---
 
 ```jsx live
@@ -61,8 +62,8 @@ render(
   <SegmentedControl
     color="default"
     segments={[
-      { title: 'Table', icon: { name: 'menu' }, tooltip: { title: 'Table' } },
-      { title: 'Grid', icon: { name: 'layout' }, tooltip: { title: 'Grid' } },
+      { title: 'Table', icon: { name: 'general.showEye' }, tooltip: { title: 'Show' } },
+      { title: 'Grid', icon: { name: 'general.hideEye' }, tooltip: { title: 'Hide' } },
     ]}
     onChange={(selected) => console.log(selected)}
   />

package/src/SegmentedTabs/SegmentedTabs.js

@@ -33,6 +33,8 @@ type Props = {
   getTabLabel?: Function,
   onChange: Function,
   tabs: Array<any>,
+  /** Passes props to the composed [Tab](/tab) component. */
+  tabProps: object,
 }
 
 class SegmentedTabs extends Component<Props> {

package/src/SegmentedTabs/SegmentedTabs.mdx

@@ -1,6 +1,7 @@
 ---
 title: SegmentedTabs
 category: General
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Select/Option.js

@@ -64,7 +64,7 @@ class Option extends Component<Props> {
                       onChange={noop}
                     />
                   ) : selected ? (
-                    <Icon name="checkmark" size="sm" />
+                    <Icon name="general.check" size="sm" />
                   ) : (
                     <Box width={2.5} height={2.5} />
                   )

package/src/Select/Select.js

@@ -27,6 +27,14 @@ type Props = {
    * The value to show when nothing is selected
    */
   emptyValue?: any,
+  /**
+   * Disables the select.
+   */
+  disabled?: boolean,
+  /**
+   * Gain access to the internal ref
+   */
+  innerRef?: any,
   /**
    * Controls the initial Popover state: open or closed (default).
    */
@@ -46,6 +54,24 @@ type Props = {
    * returns { value, selectedValue }
    */
   onChange?: Function,
+  /**
+   * Maps to the select's `onFocus` prop.
+   */
+  onFocus?: () => null,
+
+  /**
+   * Maps to the select's `onBlur` prop.
+   */
+  onBlur?: () => null,
+  onClick?: Function,
+  onMouseUp?: Funtion,
+  onMouseDown?: Funtion,
+  onKeyUp?: Funtion,
+  onKeyDown?: Funtion,
+  /**
+   * Usually accepts `Select.OptionGroup` and `Select.Option`.
+   */
+  children?: any,
   /**
    * Pass an object instead of `children` for use when rendering in a non React environment.
    */
@@ -74,6 +100,41 @@ type Props = {
    * Initial `value` when component is uncontrolled.
    */
   defaultValue?: boolean | string | number | Array<any> | Function,
+  /**
+   * Locks external scrollbars when open.
+   */
+  lockScrollWhileOpen?: boolean,
+  /**
+   * Matches anchor and popover widths.
+   */
+  matchWidths?: boolean | 'minimum',
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean,
+  /** 
+   * `'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end'`
+
+   * Where to place the popover. 
+  */
+  placement?: string,
+  /**
+   * Where to render the popover into. Accepts an HTML element or selector.
+   * Uses the closest fixed parent or `document.body` by default. This will only
+   * be computed once on initial render.
+   */
+  renderTo?: HTMLElement | string,
   /**
    * Accepts any valid [Popover](/popover) props.
    */
@@ -386,6 +447,12 @@ class Select extends Component<Props> {
                         selectHighlightedItem()
                       }
                       break
+                    case 'Escape':
+                      if (isPopoverOpen && !isPopoverVisible) {
+                        event.preventDefault()
+                        this.closePopover()
+                      }
+                      break
                     case ' ':
                       event.preventDefault()
                       if (getHighlightedIndex() === null) {
@@ -521,8 +588,8 @@ class Select extends Component<Props> {
                                   <Icon
                                     name={
                                       isPopoverVisible
-                                        ? 'arrow-up'
-                                        : 'arrow-down'
+                                        ? 'general.upCaret'
+                                        : 'general.downCaret'
                                     }
                                   />
                                 }

package/src/Select/Select.mdx

@@ -2,6 +2,7 @@
 title: Select
 category: Forms
 summary: Provide a list of options that can be selected. Replaces native select menus by using aria roles to enhance accessibility while allowing full customization of the options and what is used in the select popover. Composes [InputBox](/inputbox) and [Popover](/popover).
+propsSummary: Accepts [InputBox](/input.inputbox) props.
 ---
 
 ```jsx live

package/src/Sidebar/Sidebar.js

@@ -1,9 +1,9 @@
+// @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
 import { Children } from 'react'
 import StickyBox from 'react-sticky-box'
-import warning from 'warning'
 
 import { css } from '../system'
 import StackView from '../StackView'
@@ -13,7 +13,12 @@ import SidebarItem from './SidebarItem'
 
 const flexColumnCss = css({ display: 'flex', flexDirection: 'column' })
 
-function Sidebar({ children, ...restProps }) {
+type Props = {
+  /** Only accepts `Sidebar.List` and `Sidebar.Item` components. */
+  children?: React.ReactNode,
+}
+
+function Sidebar({ children, ...restProps }: Props) {
   return (
     <StackView
       grow={1}
@@ -24,11 +29,14 @@ function Sidebar({ children, ...restProps }) {
     >
       <StickyBox css={flexColumnCss}>
         {Children.map(children, (child) => {
-          warning(
+          if (
             (child && child.type !== Sidebar.List) ||
-              (child && child.type !== Sidebar.Item),
-            `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`
-          )
+            (child && child.type !== Sidebar.Item)
+          ) {
+            console.warn(
+              `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`
+            )
+          }
           return child
         })}
       </StickyBox>

package/src/Sidebar/Sidebar.mdx

@@ -1,6 +1,7 @@
 ---
 title: Sidebar
 category: General
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Sortable/SortableItem.js

@@ -42,7 +42,7 @@ function SortableItem({
         >
           {!readOnly && (
             <Box {...provided.dragHandleProps} marginRight={1}>
-              <Icon name="drag-handle" size="sm" color="foregroundTertiary" />
+              <Icon name="general.dragHandle" size="sm" color="foregroundTertiary" />
             </Box>
           )}
           {children}

package/src/Spinner/Spinner.mdx

@@ -1,6 +1,7 @@
 ---
 title: Spinner
 category: Indicators
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/StackView/StackView.mdx

@@ -2,6 +2,7 @@
 title: StackView
 category: Layout
 summary: Lay out children in either a column or row. Wraps flexbox styles in a simple API inspired by Apple's UIStackView.
+propsSummary: Accepts all valid HTML attributes.
 ---
 
 ```jsx live
@@ -65,7 +66,7 @@ render(() => {
           <Button
             size="xs"
             title="Add item"
-            icon="add"
+            icon="general.plus"
             onClick={() => setItems([...items, defaultItem])}
           />
         </StackView>
@@ -137,3 +138,18 @@ render(
   </StackView>
 )
 ```
+
+## Setting Axis, Alignment and Distribution
+
+The standard way of defining these flex settings is via props, but they can appear as:
+
+- `StackView.BASELINE`
+- `StackView.CENTER`
+- `StackView.END`
+- `StackView.FILL`
+- `StackView.HORIZONTAL`
+- `StackView.SPACE_BETWEEN`
+- `StackView.SPACE_EVENLY`
+- `StackView.START`
+- `StackView.STRETCH`
+- `StackView.VERTICAL`

package/src/StackView/StackView.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 
 import { BoxProps } from '../Box'
 import splitStyles from '../system/split-styles'
+import { spacingValue } from '../system'
 import { MediaQueries, Variants } from '../index'
 import { joinChildren } from '../utils'
 import { useVariant } from '../VariantProvider'
@@ -34,17 +35,19 @@ const stackViewPlugin = {
     } else if (styles.justifyContent === undefined) {
       styles.justifyContent = distribution
     }
-    if (typeof spacing === 'number') {
-      styles['& > *:not(:last-child)'] = {
-        [`margin${axis === HORIZONTAL ? 'Right' : 'Bottom'}`]: spacing * 8,
-        [`margin${axis === HORIZONTAL ? 'Bottom' : 'Right'}`]: 0,
-      }
+    if (typeof spacing === 'number' || typeof spacing === 'string') {
+      styles.gap = spacingValue(spacing)
     }
     return styles
   },
 }
 
 export type StackViewProps = {
+  children?: any
+  
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
+  as?: any
+
   /** The axis along which children are laid out. */
   axis?: 'horizontal' | 'vertical'
 
@@ -60,8 +63,20 @@ export type StackViewProps = {
     | 'space-between'
     | 'space-evenly'
 
+  /**  If true, sets `display: inline-flex`, otherwise it defaults to `display: flex` */
+  inline?: boolean
+
+  /** Gain access to the internal ref */
+  innerRef?: any
+
   /** The amount of space or element that is inserted between each child. */
   spacing?: number | string | React.ReactNode
+
+  /** Describes styles at various points in time. [Read about variants](/variants). */
+  variants?: object
+
+  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+  mediaQueries?: object
 } & BoxProps
 
 type Props = React.RefAttributes<any> &
@@ -78,9 +93,9 @@ export function StackView({ as, children, inline, innerRef, ...props }: Props) {
   const childrenToRender =
     Element === 'textarea'
       ? undefined
-      : typeof props.spacing === 'number' || props.spacing === undefined
-      ? children
-      : joinChildren(children, props.spacing)
+      : typeof props.spacing === 'object'
+      ? joinChildren(children, props.spacing)
+      : children
   return (
     <Element
       ref={innerRef}

package/src/StepperField/StepperField.js

@@ -1,26 +1,55 @@
+// @flow
 import React from 'react'
 
 import Button from '../Button'
-import { useBoxSize } from '../system'
+import { useBoxSize, useThemeProps } from '../system'
 import NumberField from '../NumberField'
 import StackView from '../StackView'
 
+type Props = {
+  /**
+   * The current value of the stepper.
+   */
+  value?: number,
+  /**
+   * Minimum number that can be selected.
+   */
+  min?: number,
+  /**
+   * Maximum number that can be selected.
+   */
+  max?: number,
+  /**
+   * Specifies the size of each movement when incrementing/decrementing the value. Defaults to `1`.
+   */
+  step?: number,
+  /**
+   * Called when incrementing/decrementing the value.
+   */
+  onChange?: Function,
+}
+
 function StepperField({
   min = -Infinity,
   max = Infinity,
   onChange,
-  size = 'md',
   step = 1,
   value,
   ...restProps
-}) {
+}: Props) {
+  const { size = 'md', ...themeProps } = useThemeProps(
+    'stepperField',
+    restProps
+  )
+
   const { fontSize, paddingHorizontal, navigateSize } = useBoxSize(size)
+
   return (
-    <StackView axis="horizontal" fontSize={fontSize} {...restProps}>
+    <StackView axis="horizontal" fontSize={fontSize} {...themeProps}>
       <Button
         size={size}
         title={`Decrement by ${step}`}
-        icon={{ name: 'remove', size: navigateSize(size, -1) }}
+        icon={{ name: 'general.minus', size: navigateSize(size, -1) }}
         disabled={value <= min}
         onClick={() => onChange(Math.max(value - step, min))}
       />
@@ -37,7 +66,7 @@ function StepperField({
       <Button
         size={size}
         title={`Increment by ${step}`}
-        icon={{ name: 'add', size: navigateSize(size, -1) }}
+        icon={{ name: 'general.plus', size: navigateSize(size, -1) }}
         disabled={value >= max}
         onClick={() => onChange(Math.min(value + step), max)}
       />

package/src/StepperField/StepperField.mdx

@@ -1,8 +1,8 @@
 ---
 title: StepperField
 category: Forms
-summary: Number input used to collect numeric information from users with
-  increment/decrement buttons.
+summary: Number input used to collect numeric information from users with increment/decrement buttons.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/StepperProgress/StepperProgress.js

@@ -2,30 +2,29 @@
 import React, { Children } from 'react'
 
 import GridView from '../GridView'
-
 import StepperProgressContext from './Context'
-
-const ACTIVE_COLOR = 'primary-light'
+import { useThemeProps } from '../system'
 
 export type Props = {
+  /** Often accepts `StepperProgress.Step` component. */
+  children?: React.ReactNode,
   /** Highlighted steps from the first step to this step index. */
   activeStepIndex?: number,
   /** Active color for each step indicator and line. Defaults to `primary-light`. */
   activeColor?: string,
 }
 
-function StepperProgress({
-  activeStepIndex,
-  activeColor = ACTIVE_COLOR,
-  children,
-  ...restProps
-}: Props) {
+function StepperProgress({ activeStepIndex, children, ...restProps }: Props) {
+  const { activeColor = 'primary-light', ...themeProps } = useThemeProps(
+    'stepperProgress',
+    restProps
+  )
   return (
     <GridView
       autoFlow="column"
       autoColumns="1fr"
       alignment="center"
-      {...restProps}
+      {...themeProps}
     >
       {Children.map(children, (child, stepIndex) => (
         <StepperProgressContext.Provider

package/src/StepperProgress/StepperProgress.mdx

@@ -2,6 +2,7 @@
 title: StepperProgress
 category: Indicators
 summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
+propsSummary: Accepts [GridView](/gridview) props.
 ---
 
 ```jsx live

package/src/Summary/Summary.mdx

@@ -1,6 +1,7 @@
 ---
 title: Summary
 category: General
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live