@planningcenter/tapestry-react 1.2.0 → 2.0.0-rc.0

package/src/Sidebar/Sidebar.js

@@ -1,3 +1,4 @@
+// @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
@@ -13,7 +14,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}

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

package/src/Tab/Tab.mdx

@@ -1,6 +1,7 @@
 ---
 title: Tab
 category: General
+propsSummary: Accepts [Text](/text) props.
 ---
 
 ```jsx live

package/src/Table/ColumnPicker.js

@@ -15,7 +15,7 @@ function ColumnPicker({
   return (
     <Dropdown
       variant="outline"
-      icon={{ name: 'columns' }}
+      icon={{ name: 'general.threeVerticalBars' }}
       tooltip={{ title: 'Filter Columns' }}
       placement="bottom-end"
       closeOnSelect={false}

package/src/Table/DragHandle.js

@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from '../Icon'
 
 const DragHandle = () => (
-  <Icon name="drag-handle" size="sm" color="foregroundTertiary" cursor="grab" />
+  <Icon name="general.dragHandle" size="sm" color="foregroundTertiary" cursor="grab" />
 )
 
 export default DragHandle

package/src/Table/NavigationArrow.js

@@ -38,7 +38,7 @@ function NavigationArrow({
     transition: 'all 300ms ease',
   }
   const buttonProps = {
-    icon: { name: `caret-${side}` },
+    icon: { name: `general.${side}Chevron` },
     title: `navigate ${side}`,
     theme: false,
     disabled: direction === 1 ? progress >= 0.99 : progress <= 0,

package/src/Table/SubRowToggleCell.js

@@ -27,7 +27,7 @@ const SubRowToggleCell = ({
         // TODO: expose for better accessibility
         theme={false}
         title="Toggle row"
-        icon={{ name: 'arrow-down' }}
+        icon={{ name: 'general.downCaret' }}
         transform={!toggled && 'rotate(-90deg)'}
         {...restProps}
       />

package/src/Table/Table.js

@@ -265,7 +265,7 @@ class Table extends PureComponent<TableProps> {
   }
 
   static getIconDirection(direction) {
-    return direction === Table.ASC ? 'arrow-up' : 'arrow-down'
+    return direction === Table.ASC ? 'general.upCaret' : 'general.downCaret'
   }
 
   static defaultProps = {

package/src/Table/Table.mdx

@@ -188,7 +188,7 @@ class TableExample extends React.Component {
         marginLeft: 'auto',
         position: 'sticky',
         right: 0,
-        header: <Icon name="person" />,
+        header: <Icon name="general.person" />,
         label: 'Age',
         cell: 'age',
       },
@@ -241,7 +241,7 @@ class TableExample extends React.Component {
             <Button
               title="Compact header"
               iconRight={
-                this.state.compactHeader ? { name: 'checkmark' } : undefined
+                this.state.compactHeader ? { name: 'general.check' } : undefined
               }
               variant="outline"
               onClick={() =>

package/src/Tabs/Tab.js

@@ -45,4 +45,5 @@ function Tab(props: Props) {
   )
 }
 
+Tab.displayName = 'Tabs.Tab'
 export default Tab

package/src/Tabs/Tabs.js

@@ -10,6 +10,11 @@ import TabPanel from './TabPanel'
 import TabPanels, { TABPANELS_DISPLAY_NAME } from './TabPanels'
 
 type Props = {
+  /**
+   * Usually accepts `TabList` and `TabPanel` components.
+   */
+  children?: React.ReactNode,
+
   /**
    * Controls the active `Tab` and `TabPanel`.
    */

package/src/Tabs/Tabs.mdx

@@ -2,6 +2,7 @@
 title: Tabs
 category: General
 summary: A single content area with multiple panels, each associated with a header in a list.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Text/Text.mdx

@@ -2,6 +2,7 @@
 title: Text
 category: Primitives
 summary: Text is a primitive component that typography components build from.
+propsSummary: Accepts all [style props](/style-props) and valid HTML attributes.
 order: 2
 ---
 

package/src/Text/Text.tsx

@@ -58,6 +58,10 @@ const textPlugin = {
 }
 
 export type TextProps = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a `<div>` element).
+   */
+  as?: any
   /**
    * Gain access to the internal ref
    */
@@ -94,6 +98,14 @@ export type TextProps = {
    * Sets `whiteSpace: nowrap` when `false`
    */
   wrap?: boolean
+  /** 
+   * 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> &

package/src/TextArea/TextArea.js

@@ -1,8 +1,14 @@
+// @flow
 import React from 'react'
 
 import InputBox from '../Input/InputBox'
 
-function TextArea(props) {
+export type Props = {
+  /** Provides an initial value to the `textarea`. */
+  defaultValue?: string,
+}
+
+function TextArea(props: Props) {
   return (
     <InputBox
       as="textarea"

package/src/TextArea/TextArea.mdx

@@ -1,6 +1,7 @@
 ---
 title: TextArea
 category: Forms
+propsSummary: Accepts [Input.InputBox](/Input.InputBox) props.
 ---
 
 ```jsx live

package/src/TileView/TileView.mdx

@@ -2,6 +2,7 @@
 title: TileView
 category: Layout
 summary: Auto place children into a grid and let the browser handle columns responsively, showing fewer columns on smaller viewports, and more columns as the viewport increases.
+propsSummary: Accepts all valid HTML attributes.
 ---
 
 ```jsx live

package/src/TileView/TileView.tsx

@@ -17,18 +17,32 @@ const tileViewPlugin = {
       styles.gridTemplateColumns = `repeat(auto-fill, minmax(${parsedMinCellWidth}, 1fr))`
     }
     if (spacing !== undefined) {
-      styles.gridGap = spacingValue(spacing)
+      styles.gap = spacingValue(spacing)
     }
     return styles
   },
 }
 
 export type TileViewProps = {
+  children?: any
+
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element).*/
+  as?: any
+
   /** The minimum width a cell must be. */
   minCellWidth?: number
 
   /** The amount of space between children. */
-  spacing?: number
+  spacing?: number | string
+
+  /** Gain access to the internal ref */
+  innerRef?: any
+
+  /** 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> &
@@ -39,7 +53,7 @@ type Props = React.RefAttributes<any> &
 
 const defaultElement = 'div'
 
-export function TileView({ as, innerRef, ...props }) {
+export function TileView({ as, innerRef, ...props }: Props) {
   const Element: React.ElementType = as || defaultElement
   const variant = useVariant()
   return (

package/src/TimeField/TimeField.mdx

@@ -1,6 +1,7 @@
 ---
 title: TimeField
 category: Forms
+propsSummary: Accepts [Input](/input) props.
 ---
 
 ```jsx live

package/src/TokenInput/DefaultToken.js

@@ -19,7 +19,7 @@ function DefaultToken({
       size="sm"
       renderRight={
         <Icon
-          name="close"
+          name="general.x"
           size="xs"
           cursor="pointer"
           onClick={() => removeToken(false)}

package/src/TokenInput/TokenInput.js

@@ -10,36 +10,42 @@ import DefaultToken from './DefaultToken'
 
 type Props = {
   /**
-   * > `array` | defaults to `null`
+   * `array` | defaults to `null`
    * Controlled set of tokens.
    */
   tokens: Array<any>,
   /**
-   * > `function(event: {
+   * ```js
+   *  function(event: {
    *  added: boolean
    *  token: any,
    *  tokenIndex: number,
    *  tokens: array,
-   * })`
+   * })
+   * ```
    * Callback when a token has been added or removed.
    */
   onChange: Function,
   /**
-   * > `function(token: any, {
+   * ```js
+   *  function(token: any, {
    *  removeToken: func,
    *  selectFirstToken: func,
    *  selectLastToken: func,
    *  selectNextToken: func,
    *  selectPreviousToken: func,
    *  tokenIndex: number
-   * })`
+   * })
+   * ```
    * Control how a token is rendered. As long as this function returns a string,
    * it will use a default badge, otherwise pass any custom component and
    * functionality you need.
    */
   renderToken?: Function,
   /**
-   * > `function(inputProps: object)`
+   * ```js
+   * function(inputProps: object)
+   * ```
    * Control how the internal input is rendered, `inputProps` must be passed
    * through to the rendered input.
    */

package/src/TokenInput/TokenInput.mdx

@@ -2,6 +2,7 @@
 title: TokenInput
 category: Forms
 summary: Allow users to add and delete multiple items, optionally using autocompletion as they type to find each item when paired with [`Combobox.Popover`](/combobox/#comboboxpopover).
+propsSummary: Accepts [WrapView](/wrapview) props.
 ---
 
 ```jsx live

package/src/Toolbar/Toolbar.mdx

@@ -2,6 +2,7 @@
 title: Toolbar
 category: General
 summary: Toolbars are used to help separate content that have a title as well as an optional helper drawer and/or section actions.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Tooltip/Tooltip.js

@@ -6,6 +6,10 @@ import Popover from '../Popover'
 import { composeEvents, pageViewChange } from '../utils'
 
 export type Props = {
+  /**
+   * The child becomes the trigger for the tooltip, unless it is overridden with `popoverProps={{relativeTo: ref}}`.
+   */
+  children?: any,
   /**
    * The amount of time in milliseconds before the tooltip closes.
    */
@@ -36,10 +40,45 @@ export type Props = {
    */
   triggerOnHover: boolean,
 
+  /**
+   * 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 composed 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.
    */
   popoverProps?: object,
+
+  /**
+   * Passes props to [Popover](/popover)'s `anchorElement`.
+   */
+  childProps?: object,
 }
 
 const emitter = mitt()