@primer/components 31.2.0-rc.c7f73427 → 31.2.1-rc.0e01900c

package/src/stories/NewButton.stories.tsx

@@ -0,0 +1,201 @@
+import React, {useState} from 'react'
+import {NewButton as Button, NewButtonProps as ButtonProps} from '../NewButton'
+import {BaseStyles, ThemeProvider} from '..'
+import {Meta} from '@storybook/react'
+import {XIcon, SearchIcon, EyeIcon, EyeClosedIcon, TriangleDownIcon} from '@primer/octicons-react'
+import Box from '../Box'
+
+export default {
+  title: 'Composite components/New Button',
+
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Story />
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  argTypes: {
+    size: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+} as Meta
+
+export const defaultButton = ({size = 'medium', ...args}: ButtonProps) => {
+  return (
+    <Button size={size} {...args}>
+      Default
+    </Button>
+  )
+}
+
+export const primaryButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="primary">
+      Primary
+    </Button>
+  )
+}
+
+export const dangerButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="danger">
+      Danger
+    </Button>
+  )
+}
+
+export const invisibleButton = (args: ButtonProps) => {
+  return (
+    <Button {...args} variant="invisible">
+      Invisible
+    </Button>
+  )
+}
+
+export const iconBeforeButton = (args: ButtonProps) => {
+  return (
+    <Button leadingIcon={SearchIcon} {...args}>
+      Before
+    </Button>
+  )
+}
+
+export const iconButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args}>
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="invisible">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="danger">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="primary">
+          Close
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button icon={XIcon} {...args} variant="outline">
+          Close
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export const WatchCounterButton = ({...args}: ButtonProps) => {
+  const [count, setCount] = useState(0)
+  return (
+    <>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args}>
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="primary">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="invisible">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="danger">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button onClick={() => setCount(count + 1)} {...args} variant="outline">
+          Watch
+          <Button.Counter>{count}</Button.Counter>
+        </Button>
+      </Box>
+    </>
+  )
+}
+
+export const WatchIconButton = ({...args}: ButtonProps) => {
+  const [watching, setWatching] = useState(false)
+  const icon = watching ? EyeClosedIcon : () => <EyeIcon />
+  return (
+    <Button onClick={() => setWatching(!watching)} trailingIcon={icon} {...args}>
+      Watch
+    </Button>
+  )
+}
+
+export const caretButton = ({...args}: ButtonProps) => {
+  return (
+    <Button trailingIcon={TriangleDownIcon} {...args}>
+      Dropdown
+    </Button>
+  )
+}
+
+export const blockButton = ({...args}: ButtonProps) => {
+  return (
+    <Button {...args} sx={{width: '100%'}}>
+      Block
+    </Button>
+  )
+}
+
+export const disabledButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2}>
+        <Button disabled {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="danger" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="invisible" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="primary" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled variant="outline" {...args}>
+          Disabled
+        </Button>
+      </Box>
+      <Box mb={2}>
+        <Button disabled icon={() => <XIcon />} {...args}></Button>
+      </Box>
+    </>
+  )
+}

package/src/sx.ts

@@ -1,6 +1,7 @@
 import css, {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
 import {ThemeColorPaths, ThemeShadowPaths} from './theme'
 import {ColorProps, ShadowProps} from 'styled-system'
+import merge from 'deepmerge'
 
 export type BetterCssProperties = {
   [K in keyof SystemCssProperties]: K extends keyof ColorProps
@@ -19,3 +20,5 @@ export interface SxProp {
 const sx = (props: SxProp) => css(props.sx)
 
 export default sx
+
+export {merge}

package/src/theme-preval.js

@@ -1,5 +1,6 @@
 // @preval
 // This file needs to be a JavaScript file using CommonJS to be compatiable with preval
+// Cache bust: 2021-11-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 
 const {default: primitives} = require('@primer/primitives')
 const {partitionColors, fontStack, omitScale} = require('./utils/theme')

package/src/utils/create-slots.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {useForceUpdate} from './use-force-update'
+
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
+  type Slots = {
+    [key in SlotNames]?: React.ReactNode
+  }
+
+  type ContextProps = {
+    registerSlot: (name: SlotNames, contents: React.ReactNode) => void
+    unregisterSlot: (name: SlotNames) => void
+    context: Record<string, unknown>
+  }
+  const SlotsContext = React.createContext<ContextProps>({
+    registerSlot: () => null,
+    unregisterSlot: () => null,
+    context: {}
+  })
+
+  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
+   *  Slot registers themself with the Slots parent.
+   *  When all the children have mounted = registered themselves in slot,
+   *  we re-render the parent component to render with slots
+   */
+  const Slots: React.FC<{
+    context?: ContextProps['context']
+    children: (slots: Slots) => React.ReactNode
+  }> = ({context = {}, children}) => {
+    // initialise slots
+    const slotsDefinition: Slots = {}
+    slotNames.map(name => (slotsDefinition[name] = null))
+    const slotsRef = React.useRef<Slots>(slotsDefinition)
+
+    const rerenderWithSlots = useForceUpdate()
+    const [isMounted, setIsMounted] = React.useState(false)
+
+    // fires after all the effects in children
+    React.useEffect(() => {
+      rerenderWithSlots()
+      setIsMounted(true)
+    }, [rerenderWithSlots])
+
+    const registerSlot = React.useCallback(
+      (name: SlotNames, contents: React.ReactNode) => {
+        slotsRef.current[name] = contents
+
+        // don't render until the component mounts = all slots are registered
+        if (isMounted) rerenderWithSlots()
+      },
+      [isMounted, rerenderWithSlots]
+    )
+
+    // Slot can be removed from the tree as well,
+    // we need to unregister them from the slot
+    const unregisterSlot = React.useCallback(
+      (name: SlotNames) => {
+        slotsRef.current[name] = null
+        rerenderWithSlots()
+      },
+      [rerenderWithSlots]
+    )
+
+    /**
+     * Slots uses a render prop API so abstract the
+     * implementation detail of using a context provider.
+     */
+    const slots = slotsRef.current
+
+    return (
+      <SlotsContext.Provider value={{registerSlot, unregisterSlot, context}}>{children(slots)}</SlotsContext.Provider>
+    )
+  }
+
+  const Slot: React.FC<{
+    name: SlotNames
+    children: React.ReactNode
+  }> = ({name, children}) => {
+    const {registerSlot, unregisterSlot, context} = React.useContext(SlotsContext)
+
+    React.useEffect(() => {
+      registerSlot(name, typeof children === 'function' ? children(context) : children)
+      return () => unregisterSlot(name)
+    }, [name, children, registerSlot, unregisterSlot, context])
+
+    return null
+  }
+
+  return {Slots, Slot}
+}
+
+export default createSlots

package/src/utils/use-force-update.ts

@@ -0,0 +1,7 @@
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+import React from 'react'
+
+export const useForceUpdate = () => {
+  const [, rerender] = React.useState({})
+  return React.useCallback(() => rerender({}), [])
+}