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

package/src/Dropdown/Dropdown.js

@@ -12,21 +12,67 @@ import Item, { ITEM_DISPLAY_NAME } from './Item'
 import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link'
 
 type Props = {
-  /** Allows specifying a type or custom element that will be cloned and provided `Dropdown` trigger props. */
+  children?: React.ReactNode,
+
+  /** Allows specifying a type or custom element that will be cloned and provided `Dropdown` trigger props. (Defaults to a [Button](/button).) */
   triggerElement?: React.ElementType | React.ReactNode,
+
+  /** Gain access to the internal ref. */
+  innerRef?: any,
+
   /** Closes Popover upon selecting a `Dropdown.Item`. */
   closeOnSelect?: boolean,
+
   /** Forces Popover open for testing purposes. */
   forceOpen?: boolean,
+
   /** Externally control Popover open state on initial render. */
   defaultOpen?: boolean,
+
   /** Callback when Popover is opened. */
   onOpen?: boolean,
+
   /** Callback when Popover is closed. */
   onClose?: boolean,
+
   /** Overrides the default search function for selecting a dropdown item via keyboard. */
   onSearch?: func,
-  /** * Accepts any valid [Popover](/popover) props. */
+
+  /** Attempts to keep popover in view clipping edges if too large. */
+  keepInView?: boolean,
+
+  /** Locks external scrollbars when open. */
+  lockScrollWhileOpen?: boolean,
+
+  /** Matches anchor and popover widths. */
+  matchWidths?: boolean | 'minimum',
+
+  /** 
+   * `'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. */
   popoverProps?: object,
 }
 
@@ -169,7 +215,7 @@ class Dropdown extends Component<Props> {
                         'aria-haspopup': true,
                         'aria-expanded': isPopoverOpen,
                         [arrowIconOnly ? 'icon' : 'iconRight']: {
-                          name: isPopoverOpen ? 'arrow-up' : 'arrow-down',
+                          name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                           size: 'sm',
                         },
                         title: arrowIconOnly ? 'arrow down' : restProps.title,

package/src/Dropdown/Dropdown.mdx

@@ -1,14 +1,15 @@
 ---
 title: Dropdown
 category: General
-summary: A compact way of displaying content or actionable items in a popover. Use [Select](/select) for selectable options if needed. Composes [Button](/button) and [Popover](/popover) components.
+summary: A compact way of displaying content or actionable items in a popover. Use [Select](/select) for selectable options if needed.
+propsSummary: Accepts [Button](/button) and [Popover](/popover) props.
 ---
 
 ### Items
 
 ```jsx live
 render(
-  <Dropdown icon={{ name: 'cog' }} title="Folder settings" variant="outline">
+  <Dropdown icon={{ name: 'general.cog' }} title="Folder settings" variant="outline">
     <Dropdown.Item onSelect={() => console.log('edit folder')}>
       Edit Folder
     </Dropdown.Item>

package/src/Dropdown/Link.js

@@ -7,7 +7,9 @@ export const LINK_DISPLAY_NAME = 'Dropdown.Link'
 export const LINK_DATA = 'link'
 
 class Link extends Component {
-  static displayName = LINK_DISPLAY_NAME
+  // Graphql wasn't picking up the correct displayName when this was
+  // assigned to LINK_DISPLAY_NAME, but using a string works
+  static displayName = 'Dropdown.Link'
 
   render() {
     const { disabled, external, index, text, to, ...restProps } = this.props

package/src/EditActions/EditActions.js

@@ -1,15 +1,29 @@
+// @flow
 import React, { Children, useEffect, useState } from 'react'
 
 import Button from '../Button'
 import StackView from '../StackView'
 import { useDocumentEvent, useFocus, useHover } from '../hooks'
+import { useThemeProps } from '../system'
 
-function EditActions({ display, edit, loading, ...restProps }) {
+type Props = {
+  /** Renders any custom component or HTML element when not in the edit state.  */
+  display?: React.ReactNode,
+
+  /** Renders any custom component or HTML element, usually form elments to capture user values. */
+  edit?: React.ReactNode,
+
+  /** Shows a spinner if true and then optimistically shows a checkmark when false again. */
+  loading?: boolean,
+}
+
+function EditActions({ display, edit, loading, ...restProps }: Props) {
   const { focus, focusProps } = useFocus()
   const { hover, hoverProps } = useHover()
   const [on, setOn] = useState(false)
   const [showCheck, setShowCheck] = useState(false)
   const toggle = () => setOn((bool) => !bool)
+  const { buttonProps, ...themeProps } = useThemeProps('editActions', restProps)
 
   useEffect(() => {
     if (loading === false) {
@@ -35,14 +49,14 @@ function EditActions({ display, edit, loading, ...restProps }) {
       onClick={on ? undefined : () => setOn(true)}
       {...focusProps}
       {...hoverProps}
-      {...restProps}
+      {...themeProps}
     >
       {Children.toArray(on ? edit : display)}
       <Button
         grow={0}
         title={on ? 'Close' : 'Edit'}
         icon={{
-          name: showCheck ? 'checkmark' : on ? 'close' : 'pencil',
+          name: showCheck ? 'general.check' : on ? 'general.x' : 'general.pencil',
           color: showCheck ? 'green' : undefined,
         }}
         tooltip={{
@@ -53,6 +67,7 @@ function EditActions({ display, edit, loading, ...restProps }) {
         onClick={focus || on ? toggle : () => setOn(true)}
         opacity={focus || hover || on ? 1 : 0}
         spinner={on && loading ? { color: 'primary' } : undefined}
+        {...buttonProps}
       />
     </StackView>
   )

package/src/EditActions/EditActions.mdx

@@ -2,6 +2,7 @@
 title: EditActions
 category: General
 summary: Helper component that manages switching between initial and editing states of inline forms. It uses an optimisitic save that will render a checkmark after the loading prop has been set to `false`.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Field/Field.js

@@ -9,6 +9,12 @@ import StackView from '../StackView'
 import { cloneChildren, generateId } from '../utils'
 
 type Props = {
+  /** Usually accepts form fields, such as `input` or `select`. */
+  children?: any,
+
+  /** Gain access to the internal ref. */
+  innerRef?: any,
+
   /** Label that describes field[s]. */
   label?: string | React.ReactNode,
 
@@ -24,6 +30,9 @@ type Props = {
   /** Renders label and field[s] inline. */
   inline?: boolean,
 
+  /** Renders label and field[s] smaller. */
+  compact?: boolean,
+
   /** Renders content into a [HelperDrawer](/helperdrawer) next to label. */
   helpContent?: string | React.ReactNode,
 
@@ -33,8 +42,14 @@ type Props = {
   /** Controls spacing between fields. */
   spacing?: number,
 
+  /** Controls distribution between fields, by [passing this prop to StackView](/stackview#distribution). (Defaults to "fill".) */
+  distribution?: number,
+
   /** State of field[s]. */
   state?: 'success' | 'error',
+
+  /** Places an icon to the left of the label. */
+  icon?: any,
 }
 
 class Field extends Component<Props> {
@@ -113,6 +128,7 @@ class Field extends Component<Props> {
             order={inline ? 0 : 1}
             grow={1}
             marginTop={inline || !label ? undefined : 1}
+            maxWidth="100%"
             spacing={spacing}
           >
             {cloneChildren(children, (child, { firstChild }) =>

package/src/Field/Field.mdx

@@ -2,6 +2,7 @@
 title: Field
 category: Forms
 summary: Composes [InputLabel](/inputlabel) and passes an `id` to the first child to pair labels and controls automatically.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/FieldSet/FieldSet.js

@@ -5,8 +5,16 @@ import Heading from '../Heading'
 import StackView from '../StackView'
 import TileView from '../TileView'
 import Toolbar from '../Toolbar'
+import { useThemeProps } from '../system'
 
 type Props = {
+  children?: any,
+
+  /**
+   * Accepts any valid [Heading](/heading) props.
+   */
+  headingProps?: object,
+
   /**
    * Maps to internal `Toolbar` prop.
    */
@@ -26,28 +34,44 @@ type Props = {
    * Maps to internal `TileView` prop.
    */
   spacing: number,
+
+  /**
+   * Accepts any valid [TileView](/tileview) props.
+   */
+  tileViewProps?: object,
 }
 
-function FieldSet({
-  children,
-  minCellWidth = 16,
-  spacing = 1,
-  helpContent,
-  legend,
-  ...restProps
-}: Props) {
+function FieldSet({ children, helpContent, legend, ...restProps }: Props) {
+  const {
+    headingProps,
+    tileViewProps,
+    spacing = 1,
+    minCellWidth = 16,
+    ...themeProps
+  } = useThemeProps('fieldset', { ...restProps })
+
   return (
-    <StackView as="fieldset" padding={0} margin={2} {...restProps}>
+    <StackView
+      as="fieldset"
+      padding={0}
+      margin={2}
+      {...themeProps}
+      {...restProps}
+    >
       <Toolbar
         title={
-          <Heading as="legend" level={4}>
+          <Heading as="legend" level={4} {...headingProps}>
             {legend}
           </Heading>
         }
         helpContent={helpContent}
         marginBottom={1}
       />
-      <TileView minCellWidth={minCellWidth} spacing={spacing}>
+      <TileView
+        minCellWidth={minCellWidth}
+        spacing={spacing}
+        {...tileViewProps}
+      >
         {children}
       </TileView>
     </StackView>

package/src/FieldSet/FieldSet.mdx

@@ -2,6 +2,7 @@
 title: FieldSet
 category: Forms
 summary: Used to group several controls as well as labels within a web form.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/FilterLayout/FilterLayout.mdx

@@ -2,6 +2,7 @@
 title: FilterLayout
 category: General
 summary: Used to display a filterable content area. Use with [DataTable](/datatable).
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live

package/src/FilterLayout/FilterLayout.tsx

@@ -59,7 +59,10 @@ export function FilterLayout(props: Props) {
           radius={0}
           title="Filter"
           aria-label={sidebarOpen ? 'close filter' : 'open filter'}
-          iconRight={{ name: sidebarOpen ? 'caret-left' : 'filter' }}
+          iconRight={{ 
+            name: sidebarOpen ? 'general.leftChevron' : 'general.threeReducingHorizontalBars',
+            size: sidebarOpen ? 'xs' : 'md'
+          }}
           onClick={toggleSidebar}
         />
         <Box visible={!(sidebarOpen && fill)} grow={1} shrink={1}>

package/src/Form/Form.js

@@ -130,7 +130,7 @@ class Form extends React.Component<Props> {
       ...this.state,
       editButtonProps: {
         disabled: isSubmitting,
-        icon: isEditing ? undefined : { name: 'pencil' },
+        icon: isEditing ? undefined : { name: 'general.pencil' },
         onClick: () => {
           // bail out if we've already triggered a submit in onBlur
           if (this.submitTimeoutId === null) {

package/src/Form/Form.mdx

@@ -7,31 +7,33 @@ category: Forms
 render(() => {
   const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
   return (
-    <Form
-      initialPayload={value}
-      onSubmit={(payload, complete) => {
-        setTimeout(() => {
-          setValue(payload)
-          complete()
-        }, 1600)
-      }}
-    >
-      {({ editButtonProps, getFieldProps }) => (
-        <StackView
-          minWidth={64}
-          padding={2}
-          spacing={1}
-          backgroundColor="primary-light"
-        >
-          <StackView axis="horizontal" alignment="center" spacing={1}>
-            <Input.Inline fontSize={0} light {...getFieldProps('name')} />
-            <Button size="xs" theme="light" {...editButtonProps} />
-            <Icon name="split" size="md" color="light-6" />
-            <Icon name="tag" size="md" color="light-6" />
+    <ThemeProvider theme={{ icons }}>
+      <Form
+        initialPayload={value}
+        onSubmit={(payload, complete) => {
+          setTimeout(() => {
+            setValue(payload)
+            complete()
+          }, 1600)
+        }}
+      >
+        {({ editButtonProps, getFieldProps }) => (
+          <StackView
+            minWidth={64}
+            padding={2}
+            spacing={1}
+            backgroundColor="primary-light"
+          >
+            <StackView axis="horizontal" alignment="center" spacing={1}>
+              <Input.Inline fontSize={0} light {...getFieldProps('name')} />
+              <Button size="xs" theme="light" {...editButtonProps} />
+              <Icon name="services.split" size="md" color="light-6" />
+              <Icon name="services.tag" size="md" color="light-6" />
+            </StackView>
           </StackView>
-        </StackView>
-      )}
-    </Form>
+        )}
+      </Form>
+    </ThemeProvider>
   )
 })
 ```

package/src/GridView/GridView.mdx

@@ -1,7 +1,8 @@
 ---
 title: GridView
 category: Layout
-summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/system-props#css-grid) to place themselves on the grid. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
+summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
+propsSummary: Accepts all valid HTML attributes.
 ---
 
 ```jsx live

package/src/GridView/GridView.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 { useVariant } from '../VariantProvider'
 
@@ -64,19 +65,25 @@ const gridViewPlugin = {
       styles.justifyItems = distribution
     }
     if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
-      styles.gridColumnGap = columnSpacing * 8
+      styles.gridColumnGap = spacingValue(columnSpacing)
     }
     if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
-      styles.gridRowGap = rowSpacing * 8
+      styles.gridRowGap = spacingValue(rowSpacing)
     }
-    if (spacing !== undefined && styles.gridGap === undefined) {
-      styles.gridGap = spacing * 8
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = spacingValue(spacing)
     }
     return styles
   },
 }
 
 export type GridViewProps = {
+  /** Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/style-props#grid) to place themselves on the grid. */
+  children?: any
+
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
+  as?: any
+
   /** The algorithm used to implicitly place grid items. Maps to CSS [gridAutoFlow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) property. */
   autoFlow?: 'column' | 'row' | 'dense'
 
@@ -89,20 +96,32 @@ export type GridViewProps = {
   /** The columns of the grid. Maps to CSS [gridTemplateColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) property. */
   columns?: Array<any> | string
 
+  /**  If true, sets `display: inline-grid`, otherwise it defaults to `display: grid` */
+  inline?: boolean
+
+  /** Gain access to the internal ref */
+  innerRef?: any
+
   /** The rows of the grid. Maps to CSS [gridTemplateRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) property. */
   rows?: Array<any> | string
 
   /** Aligns content in a grid item along the column axis. Maps to CSS [alignItems](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property. */
   alignment?: 'start' | 'end' | 'center' | 'stretch'
 
-  /** The amount of space between children. Maps to CSS [gridGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) property. */
-  spacing?: number
+  /** The amount of space between children. Maps to CSS [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property. */
+  spacing?: number | string
 
   /** The amount of space between columns. Maps to CSS [gridColumnGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap) property. */
-  columnSpacing?: number
+  columnSpacing?: number | string
 
   /** The amount of space between rows. Maps to CSS [gridRowGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap) property. */
-  rowSpacing?: number
+  rowSpacing?: number | string
+
+  /** 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/Group/Group.mdx

@@ -2,24 +2,25 @@
 title: Group
 category: General
 summary: Used to lay out groups of elements like cards, buttons, and/or inputs.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
 render(
   <Group>
     <Button
-      icon={{ name: 'email' }}
+      icon={{ name: 'general.envelope' }}
       tooltip={{ title: 'Email' }}
       variant="outline"
     />
     <Button
-      icon={{ name: 'print' }}
+      icon={{ name: 'general.printer' }}
       tooltip={{ title: 'Print' }}
       variant="outline"
     />
     <Button
-      icon={{ name: 'csv-export' }}
-      tooltip={{ title: 'CSV Export' }}
+      icon={{ name: 'general.thickToBottomArrow' }}
+      tooltip={{ title: 'Download' }}
       variant="outline"
     />
   </Group>
@@ -40,7 +41,7 @@ render(
       color="grey-8"
       subdued
     >
-      <Icon name="info" size="sm" color="grey-6" marginRight={2} />
+      <Icon name="general.outlinedInfoCircle" size="sm" color="grey-6" marginRight={2} />
       <Text>
         David is an <Link to="#">Organization Administrator</Link> with full
         Administrator permission everywhere.
@@ -60,7 +61,7 @@ render(
     <Group size="md">
       <Button title="Email" variant="outline" />
       <Button
-        icon={{ name: 'print', color: 'foregroundSecondary' }}
+        icon={{ name: 'general.printer', color: 'foregroundSecondary' }}
         tooltip={{ title: 'Print' }}
       />
     </Group>
@@ -72,7 +73,7 @@ render(
 render(
   <Group radius={0} size="lg">
     <Input placeholder="Search things..." />
-    <Button icon={{ name: 'search' }} tooltip={{ title: 'Search' }} />
+    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'Search' }} />
   </Group>
 )
 ```

package/src/Group/Group.tsx

@@ -40,12 +40,17 @@ export function Group({
   const startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop'
   const endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom'
 
+  const marginBottom = isHorizontalLayout ? 0 : '-1px'
+  const marginRight = isHorizontalLayout ? '-1px' : 0
+
   return (
-    <StackView axis={axis} spacing={-0.125} {...restProps}>
+    <StackView axis={axis} {...restProps}>
       {cloneChildren(children, (child, { firstChild, lastChild }) => ({
         ...childProps,
         [startRadius]: firstChild ? radiusValue : 0,
         [endRadius]: lastChild ? radiusValue : 0,
+        ...(!lastChild && { marginBottom }),
+        ...(!lastChild && { marginRight }),
       }))}
     </StackView>
   )

package/src/Heading/Heading.js

@@ -5,8 +5,12 @@ import Text from '../Text'
 import { useThemeValue } from '../system'
 
 type Props = {
-  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes` */
-  level?: 1 | 2 | 3 | 4 | 5 | 6,
+  children?: any,
+
+  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes`
+   * `1 | 2 | 3 | 4 | 5 | 6`
+   */
+  level?: number,
 }
 
 function Heading({ level = 1, ...restProps }: Props) {

package/src/Heading/Heading.mdx

@@ -2,6 +2,7 @@
 title: Heading
 category: General
 summary: Headings communicate the hierarchy of content to users and assistive technologies.
+propsSummary: Accepts [Text](/text) props.
 ---
 
 ```jsx live

package/src/HeadingUppercase/HeadingUppercase.js

@@ -1,10 +1,15 @@
+// @flow
 import React from 'react'
 
 import Text from '../Text'
-import { useThemeValue } from '../system'
+import { useThemeProps } from '../system'
 
-function HeadingUppercase({ children, ...restProps }) {
-  const themedProps = useThemeValue('HeadingUppercase')
+type Props = {
+  children?: any,
+}
+
+function HeadingUppercase({ children, ...restProps }: Props) {
+  const themeProps = useThemeProps('HeadingUppercase', restProps)
   return (
     <Text
       as="span"
@@ -15,8 +20,7 @@ function HeadingUppercase({ children, ...restProps }) {
       color="foregroundSecondary"
       shrink={0}
       margin={0}
-      {...themedProps}
-      {...restProps}
+      {...themeProps}
     >
       {children}
     </Text>

package/src/HeadingUppercase/HeadingUppercase.mdx

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

package/src/HelperDrawer/HelperDrawer.js

@@ -1,3 +1,4 @@
+// @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
@@ -22,7 +23,7 @@ function Toggle({ drawerId, ...restProps }) {
   )
   return (
     <Button
-      icon={{ name: 'info' }}
+      icon={{ name: 'general.outlinedInfoCircle' }}
       tooltip={{ title: 'More info' }}
       size="xs"
       theme={false}
@@ -35,7 +36,14 @@ function Toggle({ drawerId, ...restProps }) {
   )
 }
 
-function HelperDrawer({ children, id, ...restProps }) {
+type Props = {
+  children?: any,
+
+  /** Used by the `HelperDrawer.Toggle` to connect to.  */
+  id?: string | number,
+}
+
+function HelperDrawer({ children, id, ...restProps }: Props) {
   const [open, setOpen] = useState(false)
   useEffect(() => {
     drawerToggles[id] = () => setOpen((open) => !open)

package/src/HelperDrawer/HelperDrawer.mdx

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