@planningcenter/tapestry-react 2.6.0-rc.0 → 2.6.0-rc.10

package/src/Button/Button.test.tsx

@@ -2,12 +2,42 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { Button } from './Button'
 
+it(`should render as <button> with type="button" by default`, () => {
+  const { container } = render(<Button />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('button')
+})
+
+it(`should render as <button> with type="submit"`, () => {
+  const { container } = render(<Button type='submit' />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('submit')
+})
+
 it(`should render title`, () => {
   const title = 'Hello'
   const { getByText } = render(<Button title={title} />)
   getByText(title)
 })
 
+it(`should render <a> without a type if "to" is provided`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> without a type if "href" is provided`, () => {
+  const { container } = render(<Button href='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> with "href" if "to" is specifed`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('href')).toEqual('#')
+})
+
 it(`should render href and external link values`, () => {
   const title = 'Hello'
   const { getByText } = render(

package/src/Button/Button.tsx

@@ -86,6 +86,11 @@ type ButtonProps = {
    */
   to?: string
 
+  /**
+   * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
+   */
+  href?: string
+
   /**
    * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
    */
@@ -287,6 +292,14 @@ export function Button({
     restProps['href'] = to
   }
 
+  // remove `type` if either `to` or `href` is specified
+  if (to || (restProps as any).href) {
+    buttonProps = {
+      ...buttonProps,
+      type: null,
+    }
+  }
+
   // apply stroke defaults and higher z-index when hovering to show outline in group properly
   if (variant === 'outline') {
     buttonProps = {
@@ -342,7 +355,7 @@ export function Button({
     }
 
     if (
-      type &&
+      buttonProps.type &&
       (restProps as any).as &&
       (restProps as any).as !== "button"
     ) {

package/src/DataTable/DataTable.js

@@ -242,7 +242,7 @@ export type Props = {
   onColumnSort?: Function,
 
   /**
-   * `(rowData: any, rowIndex: number) => void`
+   * `(rowData: any, rowIndex: number, event: React.SyntheticEvent) => void`
    *
    * Callback when a row has been clicked.
    */

package/src/DataTable/components/BodyRow.js

@@ -19,7 +19,7 @@ function BodyRow({
   } = useKeyboardShortcuts(keyboardShortcuts, { rowData, rowIndex })
   const props = {
     ref: innerRef,
-    onClick: onRowClick && (() => onRowClick(rowData, rowIndex)),
+    onClick: (event) => onRowClick && onRowClick(rowData, rowIndex, event),
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,
     style: {

package/src/DataTable/components/BodyRows.js

@@ -38,7 +38,10 @@ function BodyRows({
             key={columnIndex}
             ref={getColumnRef(`${columnIndex}.${rowIndex + 1}`)} // offset by 1 to account for header row
             role="cell"
-            className={`tapestry-react-reset ${css([...cellVariantStyles, column.css])}`}
+            className={`tapestry-react-reset ${css([
+              ...cellVariantStyles,
+              column.css,
+            ])}`}
           >
             {getCell(column.cell, {
               columnIndex,

package/src/DataTable/components/CheckboxCell.js

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react'
 
 import Icon from '../../Icon'
 
-
 const iconPaths = {
   fill: 'tapestry.checkbox0',
   minus: 'tapestry.checkbox1',
@@ -99,7 +98,7 @@ function CheckboxCell({
       />
       <Icon.Path
         name={iconPaths.minus}
-        className="tapestry-react-reset tapestry-react-Checkbox-Minus"
+        className="tapestry-react-reset tapestry-react-Checkbox-Fill"
       />
       <Icon.Path
         name={iconPaths.checked}

package/src/DataTable/hooks/useCollapsibleRows.js

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect } from 'react'
 import useConstant from '../../hooks/useConstant'
-import create from 'zustand'
+import { create } from 'zustand'
 
 import { range } from '../../utils'
 

package/src/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box from '../Box'
-import { BoxProps, ColorProp } from '../index'
+import { BoxProps, ColorProp, StyleProps } from '../index'
 
 export type DividerProps = {
   /**
@@ -23,7 +23,7 @@ export type DividerProps = {
    * The size of the line in pixels
    */
   size?: number
-}
+} & StyleProps
 
 /**
  * Used to break up content

package/src/DragDrop/DragDrop.js

@@ -9,6 +9,8 @@ import React, {
 import { createPortal } from 'react-dom'
 import * as RBDND from '@planningcenter/react-beautiful-dnd'
 import mitt from 'mitt'
+import { getThemeDataAttribute } from '../ThemeProvider/styles'
+import { useThemeValue } from '../system'
 
 import StackView from '../StackView'
 
@@ -33,9 +35,12 @@ function useDragDrop() {
 
 function Provider({ onDragStart, onDragEnd, ...props }) {
   const hasParentDragDrop = useDragDrop()
+  const themeId = useThemeValue('id')
   if (typeof document !== 'undefined' && portalNode === null) {
     portalNode = document.createElement('div')
     portalNode.id = 'rbd-portal'
+    portalNode.className = 'tapestry-react-reset'
+    portalNode.setAttribute(getThemeDataAttribute(themeId), 'true')
     document.body.appendChild(portalNode)
   }
   useEffect(() => {

package/src/Dropdown/Dropdown.js

@@ -9,7 +9,7 @@ import Popover from '../Popover'
 import { cloneChildren, generateId } from '../utils'
 
 import Item, { ITEM_DISPLAY_NAME } from './Item'
-import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link'
+import Link, { LINK_DISPLAY_NAME } from './Link'
 
 type Props = {
   children?: React.ReactNode,
@@ -125,7 +125,7 @@ class Dropdown extends Component<Props> {
       this.closePopover()
       this.popover.focusAnchor()
     }
-    if (data === LINK_DATA) {
+    if (node.tagName === 'A' && event.type !== 'click') {
       node.click()
     } else if (this.props.onSelect) {
       this.props.onSelect(data)
@@ -215,18 +215,21 @@ class Dropdown extends Component<Props> {
                         'aria-haspopup': true,
                         'aria-expanded': isPopoverOpen,
                         [arrowIconOnly ? 'icon' : 'iconRight']: {
-                          name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
+                          name: isPopoverOpen
+                            ? 'general.upCaret'
+                            : 'general.downCaret',
                           size: 'sm',
                         },
                         title: arrowIconOnly ? 'arrow down' : restProps.title,
                         tabIndex: 0,
                         cursor: 'pointer',
                         onBlur: requestBlur,
-                        onClick: () => {
+                        onClick: (event) => {
                           this.togglePopover()
                           if (!isPopoverOpen) {
                             this.popover.focusAnchor()
                           }
+                          onClick && onClick(event)
                         },
                         onKeyDown: (event) => {
                           anchorProps.onKeyDown(event)

package/src/Dropdown/Dropdown.mdx

@@ -26,10 +26,10 @@ render(
 render(
   <Dropdown title="Links" size="sm" variant="outline">
     <Dropdown.Link to="http://planning.center" external>
-      Planning Center
+      Planning Center (external)
     </Dropdown.Link>
-    <Dropdown.Link to="https://reactjs.org" external>
-      React Docs
+    <Dropdown.Link to="/button">
+      Tapestry React Button
     </Dropdown.Link>
   </Dropdown>
 )

package/src/Dropdown/Link.js

@@ -4,7 +4,6 @@ import { ItemListItem } from '../ItemList'
 import Menu from '../Menu'
 
 export const LINK_DISPLAY_NAME = 'Dropdown.Link'
-export const LINK_DATA = 'link'
 
 class Link extends Component {
   // Graphql wasn't picking up the correct displayName when this was
@@ -17,12 +16,7 @@ class Link extends Component {
       restProps.target = '_blank'
     }
     return (
-      <ItemListItem
-        data={LINK_DATA}
-        text={text}
-        disabled={disabled}
-        index={index}
-      >
+      <ItemListItem data="link" text={text} disabled={disabled} index={index}>
         {({ id, highlight, highlighted, clearHighlight, select }) => (
           <Menu.Item
             as="a"

package/src/Icon/Icon.mdx

@@ -29,35 +29,35 @@ An "icon set" groups product-specific icon paths together. By default, `tapestry
 Additional icon sets can be imported from [libraries like `@planningcenter/icons`](https://github.com/planningcenter/icons) and exported through your app's [ThemeProvider](/theming#themeprovider). (You can import all exports [by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents).)
 
 ```jsx
+{/* import icon sets in local theme definition */}
 import * as calendar from '@planningcenter/icons/paths/calendar'
 import * as giving from '@planningcenter/icons/paths/giving'
 import * as people from '@planningcenter/icons/paths/people'
 
 const theme = {
+  ...themeOptions,
   icons: {
     calendar,
     giving,
-    people
+    people,
+    ...designSystem.defaultTheme.icons
   },
 }
 
-<ThemeProvider theme={theme}>
-  <Icon name="calendar.reservationBlock" />
-  <Icon name="giving.clockCircleO" />
-  <Icon name="people.photoOutline" />
-</ThemeProvider>
+{/* prefix Icon instance in component */}
+<Icon name="calendar.reservationBlock" />
+<Icon name="giving.clockCircleO" />
+<Icon name="people.photoOutline" />
 ```
 
 ```jsx live
 render(() => {
   return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView axis="horizontal" spacing={2}>
-        <Icon name="calendar.reservationBlock" size="xl" />
-        <Icon name="giving.clockCircleO" size="xl" />
-        <Icon name="people.photoOutline" size="xl" />
-      </StackView>
-    </ThemeProvider>
+    <StackView axis="horizontal" spacing={2}>
+      <Icon name="calendar.reservationBlock" size="xl" />
+      <Icon name="giving.clockCircleO" size="xl" />
+      <Icon name="people.photoOutline" size="xl" />
+    </StackView>
   )
 })
 ```
@@ -72,42 +72,40 @@ render(() => {
   const [appName, setAppName] = React.useState('general')
 
   return (
-    <ThemeProvider theme={{ icons }}>
-      <StackView grow={1}>
-        <StackView axis="horizontal" spacing={2}>
-          <Select
-            basis={26}
-            emptyValue="Choose icon set"
-            onChange={(event) => setAppName(event.value)}
-            defaultValue={appName}
-          >
-            {appNames.map((appName) => (
-              <Select.Option key={appName} value={appName}>
-                {appName}
-              </Select.Option>
-            ))}
-          </Select>
-          <Input
-            grow={1}
-            autoFocus
-            renderLeft={<Icon name="general.search" />}
-            placeholder="Search by icon name"
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-          />
-        </StackView>
-        <TileView minCellWidth={16} spacing={4} margin={4}>
-          {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
-            <StackView key={iconName} alignment="center" spacing={1}>
-              <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
-              <Text fontSize={5} color="foregroundSecondary">
-                {iconName}
-              </Text>
-            </StackView>
+    <StackView grow={1}>
+      <StackView axis="horizontal" spacing={2}>
+        <Select
+          basis={26}
+          emptyValue="Choose icon set"
+          onChange={(event) => setAppName(event.value)}
+          defaultValue={appName}
+        >
+          {appNames.map((appName) => (
+            <Select.Option key={appName} value={appName}>
+              {appName}
+            </Select.Option>
           ))}
-        </TileView>
+        </Select>
+        <Input
+          grow={1}
+          autoFocus
+          renderLeft={<Icon name="general.search" />}
+          placeholder="Search by icon name"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
       </StackView>
-    </ThemeProvider>
+      <TileView minCellWidth={16} spacing={4} margin={4}>
+        {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
+          <StackView key={iconName} alignment="center" spacing={1}>
+            <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
+            <Text fontSize={5} color="foregroundSecondary">
+              {iconName}
+            </Text>
+          </StackView>
+        ))}
+      </TileView>
+    </StackView> 
   )
 })
 ```

package/src/Input/InputLabel.js

@@ -1,8 +1,9 @@
 // @flow
-import React, { Component } from 'react'
+import React, { useCallback, useRef, useEffect } from 'react'
 
 import { getColor } from '../system'
 import Text from '../Text'
+import { useThemeProps } from '../system'
 
 import { inputs, inputLabels } from './utils'
 
@@ -10,54 +11,56 @@ export type InputLabelProps = {
   /**
    * The `id` of the input to control. Compatible with all Tapestry-React form components.
    */
-  controls: string,
+  controls?: string,
 
   /**
    * The current state of the label. Should match corresponding `Input`'s state prop.
    */
-  state: 'warning' | 'error' | 'success',
+  state?: 'warning' | 'error' | 'success',
 }
 
-class InputLabel extends Component<InputLabelProps> {
-  componentDidMount() {
-    this.input = inputs[this.props.controls]
-    inputLabels[this.props.controls] = true
-  }
+function InputLabel({ controls, state, ...restProps }: InputLabelProps) {
+  const { ...themeProps } = useThemeProps('inputLabel', restProps)
 
-  componentWillUnmount() {
-    delete inputLabels[this.props.controls]
-  }
+  const input = useRef(null)
 
-  focusInput = () => {
-    this.input && this.input.focus()
+  if (controls) {
+    themeProps.id = `${controls}-label`
   }
-
-  handleMouseOver = () => {
-    this.input && this.input.setState({ isHovered: true })
+  if (state) {
+    themeProps.color = getColor(state)
   }
 
-  handleMouseOut = () => {
-    this.input && this.input.setState({ isHovered: false })
-  }
+  useEffect(() => {
+    input.current = inputs[controls]
+    inputLabels[controls] = true
 
-  render() {
-    const { controls, state, ...restProps } = this.props
-    if (controls) {
-      restProps.id = `${controls}-label`
-    }
-    if (state) {
-      restProps.color = getColor(state)
+    return () => {
+      delete inputLabels[controls]
     }
-    return (
-      <Text
-        as="label"
-        onMouseOver={this.handleMouseOver}
-        onMouseOut={this.handleMouseOut}
-        onClick={this.focusInput}
-        {...restProps}
-      />
-    )
-  }
+  }, [])
+
+  const focusInput = useCallback(() => {
+    input.current && input.current.focus()
+  }, [input])
+
+  const handleMouseOver = useCallback(() => {
+    input.current && input.current.setState({ isHovered: true })
+  }, [input])
+
+  const handleMouseOut = useCallback(() => {
+    input.current && input.current.setState({ isHovered: false })
+  }, [input])
+
+  return (
+    <Text
+      as="label"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onClick={focusInput}
+      {...themeProps}
+    />
+  )
 }
 
 InputLabel.displayName = 'Input.InputLabel'

package/src/Input/InputLabel.mdx

@@ -4,6 +4,7 @@ category: Forms
 summary: Provides accessibility as well as usability improvements for mouse users by allowing the user to click the <InputLabel/> component to focus the respective control. This mimics the browsers native label tag, but allows use with custom components like <Select/>.
 propsSummary: Accepts [Text](/text) props.
 parent: Input
+themeKey: inputLabel
 ---
 
 ```jsx live

package/src/Modal/Modal.js

@@ -5,6 +5,7 @@ import Box from '../Box'
 import Scrim from '../Scrim'
 import { useDocumentEvent } from '../hooks'
 import { trapFocus } from '../utils'
+import { useThemeProps } from '../system'
 
 export type ModalProps = {
   children?: any,
@@ -23,6 +24,11 @@ export type ModalProps = {
    * Determines whether the modal is open or not.
    */
   open: boolean,
+
+  /**
+   * Props passed to the internal [`<Scrim/>`](/scrim) component.
+   */
+  scrimProps?: object,
 }
 
 function Modal({
@@ -32,6 +38,7 @@ function Modal({
   open,
   ...restProps
 }: ModalProps) {
+  const { scrimProps = {}, ...themeProps } = useThemeProps('modal', restProps)
   const modalRef = useRef(null)
 
   useLayoutEffect(() => {
@@ -58,16 +65,19 @@ function Modal({
           onRequestClose()
         }
       }}
+      {...scrimProps}
     >
       <Box
+        backgroundColor="surface"
+        boxShadow="0 0 20px rgba(0, 0, 0, 0.15)"
         innerRef={modalRef}
-        width="100%"
-        maxWidth={60}
-        padding={2}
         margin={4}
-        backgroundColor="surface"
-        radius={3}
-        {...restProps}
+        maxWidth={60}
+        padding={4}
+        paddingBottom={3}
+        radius={8}
+        width="100%"
+        {...themeProps}
       >
         {children}
       </Box>

package/src/Modal/Modal.mdx

@@ -2,6 +2,7 @@
 title: Modal
 category: Overlays
 propsSummary: Accepts [Box](/box) props.
+themeKey: modal
 ---
 
 ```jsx live
@@ -16,7 +17,7 @@ function MyModal(props) {
     return () => setLazyComponent(null)
   }, [props.open])
   return (
-    <Modal id="modal" closeOnOutsideClick height={200} {...props}>
+    <Modal id="modal" closeOnOutsideClick height={25} {...props}>
       <StackView spacing={2}>
         {lazyComponent || <Text>Loading lazy component...</Text>}
         <Select

package/src/Popover/Popover.mdx

@@ -1,6 +1,7 @@
 ---
 title: Popover
 category: Overlays
+themeKey: popover
 ---
 
 ```jsx live

package/src/Popover/Popover.tsx

@@ -7,6 +7,8 @@ import { lockScroll } from '../utils'
 
 import rewireTabOrder from './rewireTabOrder'
 import { getFixedParent, getModifiers } from './utils'
+import { useThemeProps } from '../system'
+import { useTheme } from '@emotion/react'
 
 type anchorCallbackProps = {
   innerRef(node: HTMLElement): void
@@ -116,6 +118,10 @@ export const Popover = React.forwardRef(
     }: PopoverProps,
     ref
   ) => {
+    const { zIndex = 10000, ...themeProps } = useThemeProps(
+      'popover',
+      restProps
+    )
     const anchorRef = React.useRef(null)
     const popperRef = React.useRef(null)
     const unlockScroll = React.useRef(null)
@@ -253,8 +259,8 @@ export const Popover = React.forwardRef(
                 }
               },
               // ideally this should be pulled out to something like ThemeProvider for predictable z indices
-              style: { zIndex: 10000 },
-              ...restProps,
+              style: { zIndex },
+              ...themeProps,
             })
           : null}
       </Portal>

package/src/Portal/Portal.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react'
 import { createPortal } from 'react-dom'
+import { getThemeDataAttribute } from '../ThemeProvider/styles'
+import { ThemeContext } from '@emotion/react'
+import { Theme } from '../index'
 
 export type PortalProps = {
   children: any
@@ -27,6 +30,9 @@ class Portal extends React.Component<PortalProps> {
     renderTo: null,
   }
 
+  static contextType = ThemeContext
+  context: React.ContextType<React.Context<Theme>>
+
   _portalNode: HTMLElement = null
   _needsUpdate = false
   _updated = false
@@ -105,6 +111,14 @@ class Portal extends React.Component<PortalProps> {
     Object.keys(restProps).forEach((key) => {
       this._portalNode.setAttribute(key, restProps[key])
     })
+
+    this._portalNode.classList.add('tapestry-react-reset')
+
+    this._portalNode.setAttribute(
+      getThemeDataAttribute(this.context.id),
+      'true'
+    )
+
     if (style) {
       Object.keys(style).forEach((key) => {
         this._portalNode.style[key] = style[key]