@planningcenter/tapestry-react 2.0.1-rc.0 → 2.1.1

package/src/Select/OptionGroup.mdx

@@ -0,0 +1,25 @@
+---
+title: Select.OptionGroup
+category: Forms
+summary: Groups and provides a title to a related set of [Select.Option](/select.option) components.
+parent: Select
+---
+
+```jsx live
+render(
+  <Box>
+    <Select multiple>
+      <Select.OptionGroup title="Group 1">
+        <Select.Option value="1">One</Select.Option>
+        <Select.Option value="2">Two</Select.Option>
+        <Select.Option value="3">Three</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup title="Group 2">
+        <Select.Option value="4">Four</Select.Option>
+        <Select.Option value="5">Five</Select.Option>
+        <Select.Option value="6">Six</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  </Box>
+)
+```

package/src/Select/Select.mdx

@@ -1,8 +1,9 @@
 ---
 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).
+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](/input.inputbox) and [Popover](/popover).
 propsSummary: Accepts [InputBox](/input.inputbox) props.
+isParent: true
 ---
 
 ```jsx live
@@ -78,101 +79,3 @@ render(() => {
   )
 })
 ```
-
-```jsx live
-const options = [
-  {
-    title: 'Arrangement Files',
-    options: [
-      {
-        label: 'Chord Chart + → Lyrics & Chords',
-        type: 'TXT',
-      },
-      {
-        label: 'Lead Sheet',
-        type: 'PDF',
-      },
-    ],
-  },
-  {
-    title: 'E (Most Common)',
-    options: [
-      {
-        label: 'E Chord Chart +',
-        type: 'PDF',
-      },
-    ],
-  },
-  {
-    title: 'Ab',
-    options: [
-      {
-        label: 'Ab Chord Chart +',
-        type: 'PDF',
-      },
-    ],
-  },
-]
-render(
-  <Select
-    multiple
-    renderValue={(selectedOptions) => (
-      <Select.Value>
-        {selectedOptions.map((option) => option.value).join(', ')}
-      </Select.Value>
-    )}
-  >
-    {options.map((optgroup) => (
-      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
-        {optgroup.options.map((option) => (
-          <Select.Option key={option.label} value={option.label}>
-            <Text marginRight={2}>{option.label}</Text>
-            <Badge size="xs" marginLeft="auto">
-              {option.type}
-            </Badge>
-          </Select.Option>
-        ))}
-      </Select.OptionGroup>
-    ))}
-  </Select>
-)
-```
-
-```jsx live
-render(
-  <Box>
-    <Select multiple>
-      <Select.OptionGroup title="Group 1">
-        <Select.Option value="1">One</Select.Option>
-        <Select.Option value="2">Two</Select.Option>
-        <Select.Option value="3">Three</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup title="Group 2">
-        <Select.Option value="4">Four</Select.Option>
-        <Select.Option value="5">Five</Select.Option>
-        <Select.Option value="6">Six</Select.Option>
-      </Select.OptionGroup>
-    </Select>
-  </Box>
-)
-```
-
-```jsx live
-render(
-  <Box padding={2} backgroundColor="primary">
-    <Select.Inline light>
-      {generateRange(100).map((number) => (
-        <Select.Option key={number} value={number}>
-          {number}
-        </Select.Option>
-      ))}
-    </Select.Inline>
-    <Input.Inline
-      size="xl"
-      fontSize={0}
-      light
-      defaultValue="Editable Heading"
-    />
-  </Box>
-)
-```

package/src/Select/Value.js

@@ -17,4 +17,6 @@ function Value(props) {
   )
 }
 
+Value.displayName = 'Select.Value'
+
 export default Value

package/src/Select/Value.mdx

@@ -0,0 +1,67 @@
+---
+title: Select.Value
+category: Forms
+summary: Composes [Text](/text) and allows for styling selected values within the [Select](/select). (Out-of-the-box it provides truncation.)
+propsSummary: Accepts [Text](/text) props.
+parent: Select
+---
+
+```jsx live
+const options = [
+  {
+    title: 'Arrangement Files',
+    options: [
+      {
+        label: 'Chord Chart + → Lyrics & Chords',
+        type: 'TXT',
+      },
+      {
+        label: 'Lead Sheet',
+        type: 'PDF',
+      },
+    ],
+  },
+  {
+    title: 'E (Most Common)',
+    options: [
+      {
+        label: 'E Chord Chart +',
+        type: 'PDF',
+      },
+    ],
+  },
+  {
+    title: 'Ab',
+    options: [
+      {
+        label: 'Ab Chord Chart +',
+        type: 'PDF',
+      },
+    ],
+  },
+]
+render(
+  <Select
+    multiple
+    renderValue={(selectedOptions) => (
+      <Select.Value>
+        {selectedOptions.map((option) => option.value).join(', ')}
+      </Select.Value>
+    )}
+    style={{ maxWidth: 400 }}
+  >
+    {options.map((optgroup) => (
+      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
+        {optgroup.options.map((option) => (
+          <Select.Option key={option.label} value={option.label}>
+            <Text marginRight={2}>{option.label}</Text>
+            <Badge size="xs" marginLeft="auto">
+              {option.type}
+            </Badge>
+          </Select.Option>
+        ))}
+      </Select.OptionGroup>
+    ))}
+  </Select>
+)
+```

package/src/Select/constants.js

@@ -1,3 +1,3 @@
 export const SELECT_DISPLAY_NAME = 'Select'
-export const OPTIONGROUP_DISPLAY_NAME = 'OptionGroup'
-export const OPTION_DISPLAY_NAME = 'Option'
+export const OPTIONGROUP_DISPLAY_NAME = 'Select.OptionGroup'
+export const OPTION_DISPLAY_NAME = 'Select.Option'

package/src/Sidebar/Sidebar.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import { Children } from 'react'
 import StickyBox from 'react-sticky-box'
 

package/src/Spinner/Spinner.mdx

@@ -2,6 +2,7 @@
 title: Spinner
 category: Indicators
 propsSummary: Accepts [Box](/box) props.
+themeKey: spinner
 ---
 
 ```jsx live

package/src/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 import { Box } from '../Box'
 import { useThemeProps } from '../system'

package/src/StackView/StackView.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/StepperField/StepperField.mdx

@@ -3,6 +3,7 @@ title: StepperField
 category: Forms
 summary: Number input used to collect numeric information from users with increment/decrement buttons.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: stepperField
 ---
 
 ```jsx live

package/src/StepperProgress/StepperProgress.mdx

@@ -3,6 +3,7 @@ title: StepperProgress
 category: Indicators
 summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
 propsSummary: Accepts [GridView](/gridview) props.
+themeKey: stepperProgress
 ---
 
 ```jsx live

package/src/Table/Table.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { PureComponent, Children, Fragment } from 'react'
-import { Global } from '@emotion/core'
+import { Global } from '@emotion/react'
 import { camelCase, snakeCase } from 'lodash'
 
 import type { PaginationProps } from '../Pagination/Pagination'

package/src/Text/Text.mdx

@@ -3,6 +3,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.
+themeKey: text
 order: 2
 ---
 

package/src/Text/Text.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/ThemeProvider/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useState } from 'react'
-import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
-import { CacheProvider } from '@emotion/core'
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
+import { CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { merge } from 'lodash'
 
@@ -14,17 +14,6 @@ const STORAGE_KEY = 'tapestry-react-theme'
 
 export const cache = createCache({
   key: 'tapestry-react',
-  prefix: (key) => {
-    switch (key) {
-      case 'appearance':
-      case 'user-select':
-      case 'position':
-      case ':placeholder':
-        return true
-      default:
-        return false
-    }
-  },
 })
 
 export const themeStorage = {

package/src/TileView/TileView.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/system/README.md

@@ -41,7 +41,7 @@ function Box(props) {
 
 <small>See the [Box](../Box/Box.tsx) component for an actual implementation.</small>
 
-The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/tapestry-react/responsive) and [Variants](https://ministrycentered.github.io/tapestry-react/variants) for more information and examples.
+The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://planningcenter.github.io/tapestry-react/responsive) and [Variants](https://planningcenter.github.io/tapestry-react/variants) for more information and examples.
 
 ### Plugins
 

package/src/system/box-sizes.js

@@ -18,7 +18,7 @@ export const boxSizes = {
     radius: 3,
   },
   md: {
-    boxSize: 4,
+    boxSize: 4.5,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export const boxSizes = {
     radius: 4,
   },
   lg: {
-    boxSize: 5,
+    boxSize: 6,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export const boxSizes = {
     radius: 5,
   },
   xl: {
-    boxSize: 8,
+    boxSize: 9,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,
@@ -44,6 +44,9 @@ export const boxSizes = {
     paddingVertical: 1.5,
     radius: 6,
   },
+  xxl: {
+    boxSize: 14,
+  },
 }
 
 export function getBoxSize(size = 'md') {

package/src/system/use-css.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { useTheme } from 'emotion-theming'
+import { useTheme } from '@emotion/react'
 
 import css from './cxs'
 import { parseCssStyles } from './parse-styles'

package/src/system/utils.js

@@ -1,5 +1,5 @@
 import { useContext, useCallback } from 'react'
-import { ThemeContext } from '@emotion/core'
+import { ThemeContext } from '@emotion/react'
 import { darken, getLuminance, lighten, parseToRgb } from 'polished'
 import { get } from 'lodash'
 

package/src/Pagination/Pagination.js

@@ -1,145 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import Box from '../Box'
-import Button from '../Button'
-import StackView from '../StackView'
-import { range } from '../utils'
-
-function getVisiblePages(currentPage, totalPages, visiblePages) {
-  const start = Math.max(
-    1,
-    Math.min(totalPages - visiblePages + 1, currentPage - visiblePages / 2 + 1)
-  )
-  const stop = Math.min(totalPages, start + visiblePages - 1)
-  const primaryWindow = range(start, stop + 1)
-  const showFirstPage = start > 1
-  const showLastPage = stop < totalPages
-
-  if (showFirstPage) {
-    primaryWindow.shift()
-    primaryWindow.shift()
-  }
-  if (showLastPage) {
-    primaryWindow.pop()
-    primaryWindow.pop()
-  }
-
-  const first = showFirstPage ? [1, '...'] : []
-  const last = showLastPage ? ['...', totalPages] : []
-  return first.concat(primaryWindow).concat(last)
-}
-
-export type PaginationProps = {
-  /**
-   * Change the color of the active page
-   */
-  activeColor: string,
-
-  /**
-   * Current visible page number
-   */
-  currentPage: number,
-
-  /**
-   * Callback when new page is requested
-   */
-  onPageChange: (nextPage: number) => undefined,
-
-  /**
-   * Total available pages
-   */
-  totalPages: number,
-
-  /**
-   * Amount of visible pages
-   */
-  visiblePages?: number,
-}
-
-class Pagination extends Component<PaginationProps> {
-  static defaultProps = {
-    activeColor: 'primary',
-    onPageChange: () => null,
-    visiblePages: 8,
-    totalPages: 0,
-  }
-
-  renderGap(key) {
-    return <Box key={key} userSelect="none" cursor="default" children="…" />
-  }
-
-  renderPageLink(number) {
-    const isActive = this.props.currentPage === number
-    return (
-      <Button
-        key={number}
-        onClick={this.props.onPageChange.bind(null, number)}
-        theme={isActive ? this.props.activeColor : undefined}
-        variant={isActive ? 'fill' : 'naked'}
-        title={number}
-        shrink={0}
-        square
-      />
-    )
-  }
-
-  renderPageLinks() {
-    const pages = getVisiblePages(
-      this.props.currentPage,
-      this.props.totalPages,
-      this.props.visiblePages
-    )
-    return pages.map((page, index) =>
-      page === '...' ? this.renderGap(page + index) : this.renderPageLink(page)
-    )
-  }
-
-  render() {
-    const {
-      activeColor,
-      currentPage,
-      totalPages,
-      visiblePages,
-      onPageChange,
-      ...restProps
-    } = this.props
-
-    if (totalPages <= 1) {
-      return null
-    }
-
-    return (
-      <StackView
-        axis="horizontal"
-        alignment="center"
-        distribution="center"
-        width="100%"
-        paddingVertical={1}
-        shrink={0}
-        overflow="auto"
-        {...restProps}
-      >
-        <Button
-          onClick={onPageChange.bind(null, currentPage - 1)}
-          disabled={currentPage === 1}
-          icon={{ name: 'general.leftChevron', size: 'xs' }}
-          tooltip={{ title: 'Previous Page' }}
-          variant="naked"
-          shrink={0}
-        />
-        {this.renderPageLinks()}
-        <Button
-          onClick={onPageChange.bind(null, currentPage + 1)}
-          disabled={currentPage === totalPages}
-          icon={{ name: 'general.rightChevron', size: 'xs' }}
-          tooltip={{ title: 'Next Page' }}
-          variant="naked"
-          shrink={0}
-        />
-      </StackView>
-    )
-  }
-}
-
-export default Pagination