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

package/src/DateField/DateField.js

@@ -46,6 +46,16 @@ export type DateFieldProps = {
    */
   value: Date,
 
+  /**
+   * Locks external scrollbars when open.
+   */
+  lockScrollWhileOpen?: boolean,
+
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean,
+
   /**
    * Accepts any valid [Popover](/popover) props.
    */
@@ -140,7 +150,7 @@ class DateField extends Component<DateFieldProps> {
                 readOnly
                 value={value ? format(value, formatValue) : ''}
                 renderRight={
-                  <Icon name="calendar" color="foregroundTertiary" />
+                  <Icon name="general.calendar" color="foregroundTertiary" />
                 }
                 onClick={this.togglePopover}
                 onBlur={requestBlur}

package/src/DateField/DateField.mdx

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

package/src/Divider/Divider.mdx

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

package/src/DragDrop/DragDrop.mdx

@@ -6,12 +6,12 @@ summary: Custom components that wrap [react-beautiful-dnd](https://github.com/at
 
 ```jsx live
 const navigationItems = [
-  { icon: 'house', name: 'Home' },
-  { icon: 'person', name: 'Profile' },
-  { icon: 'checkmark-circle-filled', name: 'Check-In' },
-  { icon: 'people', name: 'Groups' },
-  { icon: 'calendar', name: 'Events' },
-  { icon: 'search', name: 'Search' },
+  { icon: 'general.outlinedLocationPin', name: 'Home' },
+  { icon: 'general.person', name: 'Profile' },
+  { icon: 'general.checkCircle', name: 'Check-In' },
+  { icon: 'general.twoPeople', name: 'Groups' },
+  { icon: 'general.calendar', name: 'Events' },
+  { icon: 'general.search', name: 'Search' },
 ]
 function Item({
   icon,
@@ -24,6 +24,20 @@ function Item({
   ...restProps
 }) {
   const { hover, hoverProps } = hooks.useHover()
+  
+  const actions = {
+    add: {
+      icon: "general.plusCircle",
+      color: "success",
+      label: "Add",
+    },
+    remove: {
+      icon: "general.minusCircle",
+      color: "error",
+      label: "Remove",
+    }
+  }
+
   return (
     <Card
       axis="horizontal"
@@ -40,10 +54,10 @@ function Item({
       <Icon name={icon} color="grey-7" />
       <Text grow={1}>{name}</Text>
       <Button
-        title={type === 'remove' ? 'Remove' : 'Add'}
+        title={actions.[type].label}
         icon={{
-          name: `${type}-circle-filled`,
-          color: type === 'remove' ? 'error' : 'success',
+          name: actions.[type].icon,
+          color: actions.[type].color,
         }}
         variant="naked"
         opacity={hover && hoverEnabled ? 1 : 0}

package/src/Drawer/Drawer.js

@@ -8,8 +8,10 @@ import React, {
 } from 'react'
 
 import StackView from '../StackView'
+import { useThemeValue } from '../system'
 
 function DrawerContents({ shouldClose, onClose, ...restProps }) {
+  const themeProps = useThemeValue('drawer')
   const ref = useRef(null)
   const [show, setShow] = useState(false)
 
@@ -51,6 +53,7 @@ function DrawerContents({ shouldClose, onClose, ...restProps }) {
       boxShadow="-6px 0px 6px -4px rgba(150,150,150,0.25)"
       backgroundColor="surfaceTertiary"
       transition="transform 240ms ease-out"
+      {...themeProps}
       {...restProps}
     />
   )

package/src/Drawer/Drawer.mdx

@@ -2,6 +2,7 @@
 title: Drawer
 category: General
 summary: Use to add collapsible navigation items or content anchored to the right side of the screen.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -26,7 +27,7 @@ render(() => {
         >
           <Button
             title="close drawer"
-            icon={{ name: 'close', color: 'primary' }}
+            icon={{ name: 'general.x', color: 'primary' }}
             variant="naked"
             onClick={() => setOpen(false)}
           />

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> {

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> &