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

package/src/Menu/Item.js

@@ -20,7 +20,7 @@ function Item({
     minHeight: 4,
     fontSize: '14px',
     paddingVertical: 0.75,
-    paddingHorizontal: 1,
+    paddingHorizontal: 2,
     whiteSpace: 'nowrap',
     position: 'relative',
     userSelect: 'none',
@@ -28,11 +28,11 @@ function Item({
   }
 
   if (renderLeft) {
-    css.paddingLeft = 4
+    css.paddingLeft = 5
   }
 
   if (renderRight) {
-    css.paddingRight = 4
+    css.paddingRight = 5
   }
 
   if (isHighlighted) {
@@ -62,7 +62,7 @@ function Item({
           height="100%"
           position="absolute"
           top={0}
-          left="-1px"
+          left={0.5}
         >
           {typeof renderLeft === 'function'
             ? renderRight()
@@ -83,7 +83,7 @@ function Item({
           height="100%"
           position="absolute"
           top={0}
-          right="-1px"
+          right={0.5}
         >
           {typeof renderRight === 'function'
             ? renderRight()

package/src/Menu/Menu.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import Card from '../Card'
@@ -5,7 +6,12 @@ import Card from '../Card'
 import Heading from './Heading'
 import Item from './Item'
 
-function Menu(props) {
+export type Props = {
+  /** Often wraps `Menu.Item` and `Menu.Heading` components. */
+  children?: any,
+}
+
+function Menu(props: Props) {
   return (
     <Card
       paddingVertical={0.5}

package/src/Menu/Menu.mdx

@@ -1,6 +1,7 @@
 ---
 title: Menu
 category: General
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live
@@ -19,7 +20,7 @@ render(
     <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
     <Menu.Item>Should be used as a child of Menu</Menu.Item>
     <Menu.Item>
-      <Icon name="person" marginRight={1} /> Add icons and other things
+      <Icon name="general.person" marginRight={1} /> Add icons and other things
     </Menu.Item>
   </Menu>
 )

package/src/Modal/Modal.js

@@ -7,6 +7,7 @@ import { useDocumentEvent } from '../hooks'
 import { trapFocus } from '../utils'
 
 export type ModalProps = {
+  children?: any,
   /**
    * Close the modal when clicking outside of it.
    */

package/src/Modal/Modal.mdx

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

package/src/NumberField/NumberField.js

@@ -5,6 +5,10 @@ import InputField from '../Input/InputField'
 import { padNumber, getTabbableSiblings } from '../utils'
 
 type Props = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
+  as?: any,
+
   /**
    * An array of keys to ignore when pushed.
    * ex: ["ArrowUp", "ArrowDown"].
@@ -29,11 +33,23 @@ type Props = {
    */
   onChange: (value: string) => null,
 
+  /**
+   * Maps to the input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+
+  onKeyDown?: Function,
+
   /**
    * The amount of 0s to pad the value with.
    */
   pad: number,
 
+  /**
+   * Forces the input text to stay fully selected while interacting with it.
+   */
+  highlightOnInteraction: boolean,
+
   /**
    * String to display when value is empty.
    */
@@ -49,6 +65,9 @@ type Props = {
    * The value of the input.
    */
   value: number,
+
+  autoWidth: boolean,
+  moveFocusOnMax: boolean,
 }
 
 const MIN_VALUE = -Infinity

package/src/Page/Page.mdx

@@ -102,7 +102,7 @@ render(
       }
     >
       <StackView axis="horizontal" alignment="center" spacing={2}>
-        <Icon name="person" size="xxl" color="white" />
+        <Icon name="general.person" size="xxl" color="white" />
         <StackView>
           <Heading level={5} color="light-7">
             Steingard Tests > Sunday

package/src/PagerView/PagerView.js

@@ -48,6 +48,7 @@ function parseTrackValue(value) {
 const PageViewContext = createContext({})
 
 export type Props = {
+  children?: any,
   /**
    * Which axis the track moves on. Defaults to `horizontal`.
    */

package/src/PagerView/PagerView.mdx

@@ -1,7 +1,8 @@
 ---
 title: PagerView
 category: Layout
-summary: Allows paging between views. Use with the `useRovingIndex` hook to control the [activeViewIndex](#activeViewIndex).
+summary: Allows paging between views. Use with the [useRovingIndex](https://github.com/ministrycentered/tapestry-react/blob/next/packages/tapestry-react/src/hooks/use-roving-index.js) hook to control the [activeViewIndex](#activeViewIndex).
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -45,14 +46,14 @@ render(() => {
       <StackView axis="horizontal" distribution="center" spacing={1}>
         <Button
           title="Prev"
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'sm' }}
           radius="circle"
           disabled={moveBackwardDisabled}
           onClick={() => moveActiveIndex(-1)}
         />
         <Button
           title="Next"
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'sm' }}
           radius="circle"
           disabled={moveForwardDisabled}
           onClick={() => moveActiveIndex(1)}
@@ -83,7 +84,7 @@ function Arrangement({ expanded, expandOrShrink }) {
         actions={
           <Button
             title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'caret-shrink' : 'caret-grow' }}
+            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
             variant="naked"
             onClick={expandOrShrink}
           />
@@ -99,10 +100,10 @@ function Key({ name, expanded, expandOrShrink }) {
       <Toolbar
         title={name}
         actions={[
-          <Button title="edit" icon={{ name: 'pencil' }} variant="naked" />,
+          <Button title="edit" icon={{ name: 'general.pencil' }} variant="naked" />,
           <Button
             title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'caret-shrink' : 'caret-grow' }}
+            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
             variant="naked"
             onClick={expandOrShrink}
           />,
@@ -157,7 +158,7 @@ render(() => {
       <GridView columns="auto 1fr auto" spacing={1}>
         <Button
           title="Prev"
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'sm' }}
           radius="circle"
           disabled={moveBackwardDisabled}
           onClick={() => moveActiveIndex(-1)}
@@ -187,7 +188,7 @@ render(() => {
         </StackView>
         <Button
           title="Next"
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'sm' }}
           radius="circle"
           disabled={moveForwardDisabled}
           onClick={() => moveActiveIndex(1)}

package/src/Pagination/Pagination.js

@@ -123,7 +123,7 @@ class Pagination extends Component<PaginationProps> {
         <Button
           onClick={onPageChange.bind(null, currentPage - 1)}
           disabled={currentPage === 1}
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'xs' }}
           tooltip={{ title: 'Previous Page' }}
           variant="naked"
           shrink={0}
@@ -132,7 +132,7 @@ class Pagination extends Component<PaginationProps> {
         <Button
           onClick={onPageChange.bind(null, currentPage + 1)}
           disabled={currentPage === totalPages}
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'xs' }}
           tooltip={{ title: 'Next Page' }}
           variant="naked"
           shrink={0}

package/src/Pagination/Pagination.mdx

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

package/src/Progress/Progress.js

@@ -2,6 +2,7 @@
 import React from 'react'
 
 import Box from '../Box'
+import { useThemeProps } from '../system'
 
 export type Props = {
   /**
@@ -14,8 +15,12 @@ export type Props = {
   activeColor?: string,
 }
 
-function Progress(props: Props) {
-  const { value, activeColor = 'primary', ...restProps } = props
+function Progress({ value, ...restProps }: Props) {
+  const { activeColor = 'primary', ...themeProps } = useThemeProps(
+    'progress',
+    restProps
+  )
+
   return (
     <Box
       role="progressbar"
@@ -26,7 +31,7 @@ function Progress(props: Props) {
       position="relative"
       overflow="hidden"
       backgroundColor="grey-3"
-      {...restProps}
+      {...themeProps}
     >
       <Box
         position="absolute"

package/src/Progress/Progress.mdx

@@ -2,6 +2,7 @@
 title: Progress
 category: Indicators
 summary: Display progress towards the completion of a task. Composes [Box](/box).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Radio/Radio.js

@@ -10,8 +10,8 @@ import VariantProvider from '../VariantProvider'
 import { useThemeValue } from '../system'
 
 const iconPaths = {
-  fill: 'radio-0',
-  checked: 'radio-1',
+  fill: 'tapestry.radio0',
+  checked: 'tapestry.radio1',
 }
 
 export type Props = {
@@ -25,6 +25,8 @@ export type Props = {
    */
   label?: string,
 
+  id?: string | number,
+
   /**
    * Checks the radio.
    */

package/src/Radio/Radio.mdx

@@ -2,6 +2,7 @@
 title: Radio
 category: Forms
 summary: Use radios to present a list of options where users can only make a single selection.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

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.
    */
@@ -521,8 +582,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