From fcd42f17001149ca06e214acd423ad6676d3971e Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sun, 10 May 2020 23:39:00 +0800
Subject: [PATCH 1/5] feat(button-group): add component

feat(button-group): buttons arranged vertically
---
 .../button-group/button-group-context.ts      |  20 +++
 components/button-group/button-group.tsx      | 116 ++++++++++++++++++
 components/button-group/index.ts              |   3 +
 components/button/button.tsx                  |  79 +++++-------
 components/button/utils.tsx                   |  56 +++++++++
 components/index.ts                           |   1 +
 lib/data/metadata-en-us.json                  |   2 +-
 pages/en-us/components/button-group.mdx       |  47 +++++++
 8 files changed, 278 insertions(+), 46 deletions(-)
 create mode 100644 components/button-group/button-group-context.ts
 create mode 100644 components/button-group/button-group.tsx
 create mode 100644 components/button-group/index.ts
 create mode 100644 components/button/utils.tsx
 create mode 100644 pages/en-us/components/button-group.mdx

diff --git a/components/button-group/button-group-context.ts b/components/button-group/button-group-context.ts
new file mode 100644
index 0000000..a9c9329
--- /dev/null
+++ b/components/button-group/button-group-context.ts
@@ -0,0 +1,20 @@
+import React from 'react'
+import { NormalSizes, ButtonTypes } from '../utils/prop-types'
+
+export interface ButtonGroupConfig {
+  size?: NormalSizes
+  type?: ButtonTypes
+  ghost?: boolean
+  disabled?: boolean
+  isButtonGroup: boolean
+}
+
+const defaultContext = {
+  isButtonGroup: false,
+  disabled: false,
+}
+
+export const ButtonGroupContext = React.createContext<ButtonGroupConfig>(defaultContext)
+
+export const useButtonGroupContext = (): ButtonGroupConfig =>
+  React.useContext<ButtonGroupConfig>(ButtonGroupContext)
diff --git a/components/button-group/button-group.tsx b/components/button-group/button-group.tsx
new file mode 100644
index 0000000..867ebda
--- /dev/null
+++ b/components/button-group/button-group.tsx
@@ -0,0 +1,116 @@
+import React, { useMemo } from 'react'
+import useTheme from '../styles/use-theme'
+import withDefaults from '../utils/with-defaults'
+import { NormalSizes, ButtonTypes } from '../utils/prop-types'
+import { ButtonGroupContext, ButtonGroupConfig } from './button-group-context'
+import { getButtonColors } from '../button/styles'
+
+interface Props {
+  disabled?: boolean
+  vertical?: boolean
+  ghost?: boolean
+  size?: NormalSizes
+  type?: ButtonTypes
+  className?: string
+}
+
+const defaultProps = {
+  disabled: false,
+  vertical: false,
+  ghost: false,
+  size: 'medium' as NormalSizes,
+  type: 'default' as ButtonTypes,
+  className: '',
+}
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
+export type ButtonGroupProps = Props & typeof defaultProps & NativeAttrs
+
+const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = ({
+  disabled,
+  size,
+  type,
+  ghost,
+  vertical,
+  children,
+  className,
+}) => {
+  const theme = useTheme()
+  const initialValue = useMemo<ButtonGroupConfig>(
+    () => ({
+      disabled,
+      size,
+      type,
+      ghost,
+      isButtonGroup: true,
+    }),
+    [disabled, size, type],
+  )
+
+  const { border } = useMemo(() => {
+    const results = getButtonColors(theme, type, disabled, ghost)
+    if (!ghost && type !== 'default')
+      return {
+        ...results,
+        border: theme.palette.background,
+      }
+    return results
+  }, [theme, type, disabled, ghost])
+
+  return (
+    <ButtonGroupContext.Provider value={initialValue}>
+      <div className={`btn-group ${vertical ? 'vertical' : 'horizontal'} ${className}`}>
+        {children}
+        <style jsx>{`
+          .btn-group {
+            display: inline-flex;
+            border-radius: ${theme.layout.radius};
+            margin: ${theme.layout.gapQuarter};
+            border: 1px solid ${border};
+            background-color: transparent;
+            overflow: hidden;
+            height: min-content;
+          }
+
+          .vertical {
+            flex-direction: column;
+          }
+
+          .btn-group :global(.btn) {
+            border: none;
+          }
+
+          .btn-group :global(.btn .text) {
+            top: 0;
+          }
+
+          .horizontal :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 1px solid ${border};
+          }
+
+          .horizontal :global(.btn:not(:last-child)) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          .vertical :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-top: 1px solid ${border};
+          }
+
+          .vertical :global(.btn:not(:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        `}</style>
+      </div>
+    </ButtonGroupContext.Provider>
+  )
+}
+
+const MemoButtonGroup = React.memo(ButtonGroup)
+
+export default withDefaults(MemoButtonGroup, defaultProps)
diff --git a/components/button-group/index.ts b/components/button-group/index.ts
new file mode 100644
index 0000000..cc398ed
--- /dev/null
+++ b/components/button-group/index.ts
@@ -0,0 +1,3 @@
+import ButtonGroup from './button-group'
+
+export default ButtonGroup
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 3817103..9f2f0b9 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -1,10 +1,11 @@
 import React, { useRef, useState, MouseEvent, useMemo } from 'react'
-import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
-import { ButtonTypes, NormalSizes } from '../utils/prop-types'
+import withDefaults from '../utils/with-defaults'
 import ButtonDrip from './button.drip'
 import ButtonLoading from '../loading'
-import ButtonIcon from './button-icon'
+import { ButtonTypes, NormalSizes } from '../utils/prop-types'
+import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils'
+import { useButtonGroupContext } from '../button-group/button-group-context'
 import { getButtonColors, getButtonCursor, getButtonHoverColors, getButtonSize } from './styles'
 
 interface Props {
@@ -37,27 +38,30 @@ const defaultProps = {
 type NativeAttrs = Omit<React.ButtonHTMLAttributes<any>, keyof Props>
 export type ButtonProps = Props & typeof defaultProps & NativeAttrs
 
-const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
-  children,
-  disabled,
-  type,
-  loading,
-  shadow,
-  ghost,
-  effect,
-  onClick,
-  auto,
-  size,
-  icon,
-  iconRight,
-  className,
-  ...props
-}) => {
+const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps }) => {
   const theme = useTheme()
   const buttonRef = useRef<HTMLButtonElement>(null)
   const [dripShow, setDripShow] = useState<boolean>(false)
   const [dripX, setDripX] = useState<number>(0)
   const [dripY, setDripY] = useState<number>(0)
+  const groupConfig = useButtonGroupContext()
+  const {
+    children,
+    disabled,
+    type,
+    loading,
+    shadow,
+    ghost,
+    effect,
+    onClick,
+    auto,
+    size,
+    icon,
+    iconRight,
+    className,
+    ...props
+  } = filterPropsWithGroup(btnProps, groupConfig)
+
   const { bg, border, color } = useMemo(() => getButtonColors(theme, type, disabled, ghost), [
     theme,
     type,
@@ -99,35 +103,19 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
     onClick && onClick(event)
   }
 
-  const childrenWithIcon = useMemo(() => {
-    const hasIcon = icon || iconRight
-    const isRight = Boolean(iconRight)
-    const paddingForAutoMode =
-      auto || size === 'mini'
-        ? `calc(var(--zeit-ui-button-height) / 2 + var(--zeit-ui-button-padding) * .5)`
-        : 0
-    if (!hasIcon) return <div className="text">{children}</div>
-    return (
-      <>
-        <ButtonIcon isRight={isRight}>{hasIcon}</ButtonIcon>
-        <div className={`text ${isRight ? 'right' : 'left'}`}>
-          {children}
-          <style jsx>{`
-            .left {
-              padding-left: ${paddingForAutoMode};
-            }
-            .right {
-              padding-right: ${paddingForAutoMode};
-            }
-          `}</style>
-        </div>
-      </>
-    )
-  }, [children, icon, auto, size])
+  const childrenWithIcon = useMemo(
+    () =>
+      getButtonChildrenWithIcon(auto, size, children, {
+        icon,
+        iconRight,
+      }),
+    [auto, size, children, icon, iconRight],
+  )
 
   return (
     <button
       ref={buttonRef}
+      type="button"
       className={`btn ${className}`}
       disabled={disabled}
       onClick={clickHandler}
@@ -159,7 +147,8 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({
           justify-content: center;
           text-align: center;
           white-space: nowrap;
-          transition: all 0.2s ease 0s;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: ${color};
diff --git a/components/button/utils.tsx b/components/button/utils.tsx
new file mode 100644
index 0000000..94d7ed1
--- /dev/null
+++ b/components/button/utils.tsx
@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react'
+import { NormalSizes } from '../utils/prop-types'
+import ButtonIcon from './button-icon'
+import { ButtonProps } from 'components/button/button'
+import { ButtonGroupConfig } from 'components/button-group/button-group-context'
+
+export const getButtonChildrenWithIcon = (
+  auto: boolean,
+  size: NormalSizes,
+  children: ReactNode,
+  icons: {
+    icon?: React.ReactNode
+    iconRight?: React.ReactNode
+  } = {},
+) => {
+  const { icon, iconRight } = icons
+  const hasIcon = icon || iconRight
+  const isRight = Boolean(iconRight)
+  const paddingForAutoMode =
+    auto || size === 'mini'
+      ? `calc(var(--zeit-ui-button-height) / 2 + var(--zeit-ui-button-padding) * .5)`
+      : 0
+  if (!hasIcon) return <div className="text">{children}</div>
+  return (
+    <>
+      <ButtonIcon isRight={isRight}>{hasIcon}</ButtonIcon>
+      <div className={`text ${isRight ? 'right' : 'left'}`}>
+        {children}
+        <style jsx>{`
+          .left {
+            padding-left: ${paddingForAutoMode};
+          }
+          .right {
+            padding-right: ${paddingForAutoMode};
+          }
+        `}</style>
+      </div>
+    </>
+  )
+}
+
+export const filterPropsWithGroup = (
+  props: React.PropsWithChildren<ButtonProps>,
+  config: ButtonGroupConfig,
+): ButtonProps => {
+  if (!config.isButtonGroup) return props
+  return {
+    ...props,
+    auto: true,
+    shadow: false,
+    ghost: config.ghost || props.ghost,
+    size: config.size || props.size,
+    type: config.type || props.type,
+    disabled: config.disabled || props.disabled,
+  }
+}
diff --git a/components/index.ts b/components/index.ts
index 9e364d6..d721655 100644
--- a/components/index.ts
+++ b/components/index.ts
@@ -53,3 +53,4 @@ export { default as Divider } from './divider'
 export { default as User } from './user'
 export { default as Page } from './page'
 export { default as Grid } from './grid'
+export { default as ButtonGroup } from './button-group'
diff --git a/lib/data/metadata-en-us.json b/lib/data/metadata-en-us.json
index aa6d116..eafd5aa 100644
--- a/lib/data/metadata-en-us.json
+++ b/lib/data/metadata-en-us.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"layout"},{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
+[{"name":"guide","children":[{"name":"getting-started","children":[{"name":"introduction","url":"/en-us/guide/introduction","index":5,"group":"getting-started"},{"name":"installation","url":"/en-us/guide/installation","index":10,"group":"getting-started"},{"name":"Server Render","url":"/en-us/guide/server-render","index":15,"group":"getting-started"}]},{"name":"customization","children":[{"name":"Colors","url":"/en-us/guide/colors","index":100,"group":"customization"},{"name":"Themes","url":"/en-us/guide/themes","index":100,"group":"customization"}]}]},{"name":"components","children":[{"name":"General","children":[{"name":"text","url":"/en-us/components/text","index":10,"group":"General"},{"name":"button","url":"/en-us/components/button","index":100,"group":"General"},{"name":"Code","url":"/en-us/components/code","index":100,"group":"General"},{"name":"Icons","url":"/en-us/components/icons","index":100,"group":"General"}]},{"name":"layout","children":[{"name":"Grid","url":"/en-us/components/grid","index":100,"group":"layout"},{"name":"layout","url":"/en-us/components/layout","index":100,"group":"layout"},{"name":"Page","url":"/en-us/components/page","index":100,"group":"layout"},{"name":"Spacer","url":"/en-us/components/spacer","index":100,"group":"layout"}]},{"name":"Surfaces","children":[{"name":"card","url":"/en-us/components/card","index":100,"group":"Surfaces"},{"name":"collapse","url":"/en-us/components/collapse","index":100,"group":"Surfaces"},{"name":"fieldset","url":"/en-us/components/fieldset","index":100,"group":"Surfaces"}]},{"name":"Data Entry","children":[{"name":"Auto-Complete","url":"/en-us/components/auto-complete","index":100,"group":"Data Entry"},{"name":"Button-Group","url":"/en-us/components/button-group","index":100,"group":"Data Entry"},{"name":"checkbox","url":"/en-us/components/checkbox","index":100,"group":"Data Entry"},{"name":"Input","url":"/en-us/components/input","index":100,"group":"Data Entry"},{"name":"radio","url":"/en-us/components/radio","index":100,"group":"Data Entry"},{"name":"select","url":"/en-us/components/select","index":100,"group":"Data Entry"},{"name":"Slider","url":"/en-us/components/slider","index":100,"group":"Data Entry"},{"name":"textarea","url":"/en-us/components/textarea","index":100,"group":"Data Entry"},{"name":"Toggle","url":"/en-us/components/toggle","index":100,"group":"Data Entry"}]},{"name":"Data Display","children":[{"name":"avatar","url":"/en-us/components/avatar","index":100,"group":"Data Display"},{"name":"Badge","url":"/en-us/components/badge","index":100,"group":"Data Display"},{"name":"Capacity","url":"/en-us/components/capacity","index":100,"group":"Data Display"},{"name":"Description","url":"/en-us/components/description","index":100,"group":"Data Display"},{"name":"Display","url":"/en-us/components/display","index":100,"group":"Data Display"},{"name":"Dot","url":"/en-us/components/dot","index":100,"group":"Data Display"},{"name":"File-Tree","url":"/en-us/components/file-tree","index":100,"group":"Data Display"},{"name":"Image","url":"/en-us/components/image","index":100,"group":"Data Display"},{"name":"keyboard","url":"/en-us/components/keyboard","index":100,"group":"Data Display"},{"name":"Popover","url":"/en-us/components/popover","index":100,"group":"Data Display"},{"name":"Table","url":"/en-us/components/table","index":100,"group":"Data Display"},{"name":"Tag","url":"/en-us/components/tag","index":100,"group":"Data Display"},{"name":"Tooltip","url":"/en-us/components/tooltip","index":100,"group":"Data Display"},{"name":"User","url":"/en-us/components/user","index":100,"group":"Data Display"}]},{"name":"Feedback","children":[{"name":"Loading","url":"/en-us/components/loading","index":100,"group":"Feedback"},{"name":"modal","url":"/en-us/components/modal","index":100,"group":"Feedback"},{"name":"note","url":"/en-us/components/note","index":100,"group":"Feedback"},{"name":"Progress","url":"/en-us/components/progress","index":100,"group":"Feedback"},{"name":"Spinner","url":"/en-us/components/spinner","index":100,"group":"Feedback"},{"name":"toast","url":"/en-us/components/toast","index":100,"group":"Feedback"}]},{"name":"Navigation","children":[{"name":"link","url":"/en-us/components/link","index":100,"group":"Navigation"},{"name":"tabs","url":"/en-us/components/tabs","index":100,"group":"Navigation"},{"name":"button-dropdown","url":"/en-us/components/button-dropdown","index":101,"group":"Navigation"}]},{"name":"Others","children":[{"name":"Divider","url":"/en-us/components/divider","index":100,"group":"Others"},{"name":"Snippet","url":"/en-us/components/snippet","index":100,"group":"Others"}]},{"name":"Utils","children":[{"name":"use-body-scroll","url":"/en-us/components/use-body-scroll","index":100,"group":"Utils"},{"name":"use-click-away","url":"/en-us/components/use-click-away","index":100,"group":"Utils"},{"name":"use-clipboard","url":"/en-us/components/use-clipboard","index":100,"group":"Utils"},{"name":"use-current-state","url":"/en-us/components/use-current-state","index":100,"group":"Utils"}]}]},{"name":"customization","children":[]}]
diff --git a/pages/en-us/components/button-group.mdx b/pages/en-us/components/button-group.mdx
new file mode 100644
index 0000000..2416f91
--- /dev/null
+++ b/pages/en-us/components/button-group.mdx
@@ -0,0 +1,47 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Button, Spacer, ButtonGroup } from 'components'
+
+export const meta = {
+  title: 'Button-Group',
+  group: 'Data Entry',
+}
+
+## Button Group
+
+A set of related buttons.
+
+<Playground
+  title="Basic"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<ButtonGroup ghost type="success">
+  <Button >Action</Button>
+  <span />
+  <Button >Action</Button>
+</ButtonGroup>
+`} />
+
+<Attributes edit="/pages/en-us/components/button-group.mdx">
+<Attributes.Title>Button.Props</Attributes.Title>
+
+| Attribute | Description | Type | Accepted values | Default
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **type** | button type | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
+| **size** | button size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
+| ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>ButtonTypes</Attributes.Title>
+
+```ts
+type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
+```
+
+<Attributes.Title>NormalSizes</Attributes.Title>
+
+```ts
+type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

From 3dce6beefa39befabf12e5110357cb4e359d142b Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 11 May 2020 18:36:25 +0800
Subject: [PATCH 2/5] docs(button-group): add docs for button-group

docs: add docs
---
 lib/data/metadata-zh-cn.json            |   2 +-
 pages/en-us/components/button-group.mdx |  79 +++++++++++++++-
 pages/zh-cn/components/button-group.mdx | 116 ++++++++++++++++++++++++
 3 files changed, 191 insertions(+), 6 deletions(-)
 create mode 100644 pages/zh-cn/components/button-group.mdx

diff --git a/lib/data/metadata-zh-cn.json b/lib/data/metadata-zh-cn.json
index 3004f31..a2be0e6 100644
--- a/lib/data/metadata-zh-cn.json
+++ b/lib/data/metadata-zh-cn.json
@@ -1 +1 @@
-[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"栅格 Grid","url":"/zh-cn/components/grid","index":100,"group":"布局"},{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
+[{"name":"guide","children":[{"name":"快速上手","children":[{"name":"什么是 ZEIT UI","url":"/zh-cn/guide/introduction","index":5,"group":"快速上手"},{"name":"安装","url":"/zh-cn/guide/installation","index":10,"group":"快速上手"},{"name":"服务端渲染","url":"/zh-cn/guide/server-render","index":15,"group":"快速上手"}]},{"name":"定制化","children":[{"name":"色彩","url":"/zh-cn/guide/colors","index":100,"group":"定制化"},{"name":"主题","url":"/zh-cn/guide/themes","index":100,"group":"定制化"}]}],"localeName":"上手指南"},{"name":"components","children":[{"name":"通用","children":[{"name":"文本 Text","url":"/zh-cn/components/text","index":10,"group":"通用"},{"name":"按钮 Button","url":"/zh-cn/components/button","index":100,"group":"通用"},{"name":"代码 Code","url":"/zh-cn/components/code","index":100,"group":"通用"},{"name":"图标 Icons","url":"/zh-cn/components/icons","index":100,"group":"通用"}]},{"name":"布局","children":[{"name":"栅格 Grid","url":"/zh-cn/components/grid","index":100,"group":"布局"},{"name":"布局 Layout","url":"/zh-cn/components/layout","index":100,"group":"布局"},{"name":"页面 Page","url":"/zh-cn/components/page","index":100,"group":"布局"},{"name":"间距 Spacer","url":"/zh-cn/components/spacer","index":100,"group":"布局"}]},{"name":"表面","children":[{"name":"卡片 Card","url":"/zh-cn/components/card","index":100,"group":"表面"},{"name":"折叠框 Collapse","url":"/zh-cn/components/collapse","index":100,"group":"表面"},{"name":"控件组 Fieldset","url":"/zh-cn/components/fieldset","index":100,"group":"表面"}]},{"name":"数据录入","children":[{"name":"按钮组 Button-Group","url":"/zh-cn/components/button-group","index":100,"group":"数据录入"},{"name":"复选框 Checkbox","url":"/zh-cn/components/checkbox","index":100,"group":"数据录入"},{"name":"输入框 Input","url":"/zh-cn/components/input","index":100,"group":"数据录入"},{"name":"单选框 Radio","url":"/zh-cn/components/radio","index":100,"group":"数据录入"},{"name":"选择器 Select","url":"/zh-cn/components/select","index":100,"group":"数据录入"},{"name":"滑动输入 Slider","url":"/zh-cn/components/slider","index":100,"group":"数据录入"},{"name":"文本输入框 Textarea","url":"/zh-cn/components/textarea","index":100,"group":"数据录入"},{"name":"开关 Toggle","url":"/zh-cn/components/toggle","index":100,"group":"数据录入"},{"name":"自动完成 Auto-Complete","url":"/zh-cn/components/auto-complete","index":104,"group":"数据录入"}]},{"name":"数据展示","children":[{"name":"头像 Avatar","url":"/zh-cn/components/avatar","index":100,"group":"数据展示"},{"name":"徽章 Badge","url":"/zh-cn/components/badge","index":100,"group":"数据展示"},{"name":"容量 Capacity","url":"/zh-cn/components/capacity","index":100,"group":"数据展示"},{"name":"描述 Description","url":"/zh-cn/components/description","index":100,"group":"数据展示"},{"name":"陈列框 Display","url":"/zh-cn/components/display","index":100,"group":"数据展示"},{"name":"点 Dot","url":"/zh-cn/components/dot","index":100,"group":"数据展示"},{"name":"文件树 File Tree","url":"/zh-cn/components/file-tree","index":100,"group":"数据展示"},{"name":"图片 Image","url":"/zh-cn/components/image","index":100,"group":"数据展示"},{"name":"键盘 keyboard","url":"/zh-cn/components/keyboard","index":100,"group":"数据展示"},{"name":"气泡卡片 Popover","url":"/zh-cn/components/popover","index":100,"group":"数据展示"},{"name":"表格 Table","url":"/zh-cn/components/table","index":100,"group":"数据展示"},{"name":"标签 Tag","url":"/zh-cn/components/tag","index":100,"group":"数据展示"},{"name":"文字提示 Tooltip","url":"/zh-cn/components/tooltip","index":100,"group":"数据展示"},{"name":"用户 User","url":"/zh-cn/components/user","index":100,"group":"数据展示"}]},{"name":"反馈","children":[{"name":"加载中 Loading","url":"/zh-cn/components/loading","index":100,"group":"反馈"},{"name":"对话框 Modal","url":"/zh-cn/components/modal","index":100,"group":"反馈"},{"name":"提示 Note","url":"/zh-cn/components/note","index":100,"group":"反馈"},{"name":"进度条 Progress","url":"/zh-cn/components/progress","index":100,"group":"反馈"},{"name":"指示器 Spinner","url":"/zh-cn/components/spinner","index":100,"group":"反馈"},{"name":"通知 Toast","url":"/zh-cn/components/toast","index":100,"group":"反馈"}]},{"name":"导航","children":[{"name":"链接 Link","url":"/zh-cn/components/link","index":100,"group":"导航"},{"name":"选项卡 Tabs","url":"/zh-cn/components/tabs","index":100,"group":"导航"},{"name":"下拉按钮 Btn Dropdown","url":"/zh-cn/components/button-dropdown","index":105,"group":"导航"}]},{"name":"其他","children":[{"name":"分割线 Divider","url":"/zh-cn/components/divider","index":100,"group":"其他"},{"name":"片段 Snippet","url":"/zh-cn/components/snippet","index":100,"group":"其他"}]},{"name":"工具包","children":[{"name":"锁定滚动 useBodyScroll","url":"/zh-cn/components/use-body-scroll","index":100,"group":"工具包"},{"name":"点击他处 useClickAway","url":"/zh-cn/components/use-click-away","index":100,"group":"工具包"},{"name":"剪切板 useClipboard","url":"/zh-cn/components/use-clipboard","index":100,"group":"工具包"},{"name":" 当前值 useCurrentState","url":"/zh-cn/components/use-current-state","index":100,"group":"工具包"}]}],"localeName":"所有组件"},{"name":"customization","children":[],"localeName":"定制化"}]
diff --git a/pages/en-us/components/button-group.mdx b/pages/en-us/components/button-group.mdx
index 2416f91..d4a969b 100644
--- a/pages/en-us/components/button-group.mdx
+++ b/pages/en-us/components/button-group.mdx
@@ -14,20 +14,89 @@ A set of related buttons.
   title="Basic"
   scope={{ Button, ButtonGroup }}
   code={`
-<ButtonGroup ghost type="success">
-  <Button >Action</Button>
-  <span />
-  <Button >Action</Button>
+<ButtonGroup>
+  <Button>One</Button>
+  <Button>Two</Button>
+  <Button>Three</Button>
 </ButtonGroup>
 `} />
 
+<Playground
+  title="Variant"
+  desc="set the type or styles of all buttons in the group."
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup type="success">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+  <ButtonGroup type="abort">
+    <Button>Action1</Button>
+    <Button>Action2</Button>
+  </ButtonGroup>
+  <ButtonGroup type="warning" ghost>
+    <Button>Action1</Button>
+    <Button>Action2</Button>
+  </ButtonGroup>
+</>
+`} />
+
+<Playground
+  title="Sizes"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup size="small">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+  <ButtonGroup size="mini">
+    <Button>Action1</Button>
+    <Button>Action2</Button>
+  </ButtonGroup>
+</>
+`} />
+
+<Playground
+  title="Vertical"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup size="small" vertical>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+    <Button>Four</Button>
+  </ButtonGroup>
+</>
+`} />
+
+<Playground
+  title="Disabled"
+  desc="disable all buttons in the group."
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup size="small" disabled>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+</>
+`} />
 <Attributes edit="/pages/en-us/components/button-group.mdx">
-<Attributes.Title>Button.Props</Attributes.Title>
+<Attributes.Title>ButtonGroup.Props</Attributes.Title>
 
 | Attribute | Description | Type | Accepted values | Default
 | ---------- | ---------- | ---- |  -------------- | ------ |
 | **type** | button type | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
 | **size** | button size | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
+| **ghost** | the opposite color | `boolean` | - | `false` |
+| **vertical** | show all buttons vertically | `boolean` | - | `false` |
+| **disabled** | disable all buttons | `boolean` | - | `false` |
 | ... | native props | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
 
 <Attributes.Title>ButtonTypes</Attributes.Title>
diff --git a/pages/zh-cn/components/button-group.mdx b/pages/zh-cn/components/button-group.mdx
new file mode 100644
index 0000000..0ee4b2e
--- /dev/null
+++ b/pages/zh-cn/components/button-group.mdx
@@ -0,0 +1,116 @@
+import { Layout, Playground, Attributes } from 'lib/components'
+import { Button, Spacer, ButtonGroup } from 'components'
+
+export const meta = {
+  title: '按钮组 Button-Group',
+  group: '数据录入',
+}
+
+## Button Group / 按钮组
+
+展示一组具备相关性的按钮。
+
+<Playground
+  title="基础"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<ButtonGroup>
+  <Button>One</Button>
+  <Button>Two</Button>
+  <Button>Three</Button>
+</ButtonGroup>
+`} />
+
+<Playground
+  title="变体"
+  desc="设置组内所有按钮的类型或样式。"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup type="success">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+  <ButtonGroup type="abort">
+    <Button>Action1</Button>
+    <Button>Action2</Button>
+  </ButtonGroup>
+  <ButtonGroup type="warning" ghost>
+    <Button>Action1</Button>
+    <Button>Action2</Button>
+  </ButtonGroup>
+</>
+`} />
+
+<Playground
+  title="大小"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup size="small">
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+  <ButtonGroup size="mini">
+    <Button>Action1</Button>
+    <Button>Action2</Button>
+  </ButtonGroup>
+</>
+`} />
+
+<Playground
+  title="垂直的"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup size="small" vertical>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+    <Button>Four</Button>
+  </ButtonGroup>
+</>
+`} />
+
+<Playground
+  title="禁用"
+  desc="禁用组内所有的按钮。"
+  scope={{ Button, ButtonGroup }}
+  code={`
+<>
+  <ButtonGroup size="small" disabled>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+  </ButtonGroup>
+</>
+`} />
+<Attributes edit="/pages/zh-cn/components/button-group.mdx">
+<Attributes.Title>ButtonGroup.Props</Attributes.Title>
+
+| 属性 | 描述 | 类型 | 推荐值 | 默认
+| ---------- | ---------- | ---- |  -------------- | ------ |
+| **type** |  按钮类型 | `ButtonTypes` | [ButtonTypes](#buttontypes) | `default` |
+| **size** | 按钮大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `medium` |
+| **ghost** | 相反色彩模式的按钮 | `boolean` | - | `false` |
+| **vertical** | 以垂直方式显示所有按钮 | `boolean` | - | `false` |
+| **disabled** | 是否禁用所有按钮 | `boolean` | - | `false` |
+| ... | 原生属性 | `ButtonHTMLAttributes` | `'id', 'className', ...` | - |
+
+<Attributes.Title>ButtonTypes</Attributes.Title>
+
+```ts
+type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
+```
+
+<Attributes.Title>NormalSizes</Attributes.Title>
+
+```ts
+type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
+```
+
+</Attributes>
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

From eb596f4592ebc69186f9fa4fe214770cc3c69973 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 11 May 2020 18:36:58 +0800
Subject: [PATCH 3/5] test(button-group): add testcase

test: update snapshots
---
 .../__snapshots__/index.test.tsx.snap         | 493 ++++++++++++++++++
 .../button-group/__tests__/index.test.tsx     |  53 ++
 .../__snapshots__/icon.test.tsx.snap          |  38 +-
 .../__snapshots__/index.test.tsx.snap         |  10 +-
 4 files changed, 572 insertions(+), 22 deletions(-)
 create mode 100644 components/button-group/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 components/button-group/__tests__/index.test.tsx

diff --git a/components/button-group/__tests__/__snapshots__/index.test.tsx.snap b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..ae8ca85
--- /dev/null
+++ b/components/button-group/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,493 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonGroup buttons should be displayed vertically 1`] = `
+"<div class=\\"btn-group vertical \\"><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">action1</div><style>
+        .btn {
+          box-sizing: border-box;
+          display: inline-block;
+          padding: 0 1.25rem;
+          height: 2.5rem;
+          line-height: 2.5rem;
+          min-width: min-content;
+          width: auto;
+          border-radius: 5px;
+          font-weight: 400;
+          font-size: .875rem;
+          user-select: none;
+          outline: none;
+          text-transform: capitalize;
+          justify-content: center;
+          text-align: center;
+          white-space: nowrap;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
+          position: relative;
+          overflow: hidden;
+          color: #666;
+          background-color: #fff;
+          border: 1px solid #eaeaea;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          --zeit-ui-button-padding: 1.25rem;
+          --zeit-ui-button-height: 2.5rem;
+          --zeit-ui-button-color: #666;
+        }
+
+        .btn:hover {
+          color: #000;
+          --zeit-ui-button-color: #000;
+          background-color: #fff;
+          border-color: #000;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          transform: translate3d(0px, 0px, 0px);
+        }
+
+        .btn :global(.text) {
+          position: relative;
+          z-index: 1;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          line-height: inherit;
+          top: -1px;
+        }
+
+        .btn :global(.text p),
+        .btn :global(.text pre),
+        .btn :global(.text div) {
+          margin: 0;
+        }
+      </style></button><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">action2</div><style>
+        .btn {
+          box-sizing: border-box;
+          display: inline-block;
+          padding: 0 1.25rem;
+          height: 2.5rem;
+          line-height: 2.5rem;
+          min-width: min-content;
+          width: auto;
+          border-radius: 5px;
+          font-weight: 400;
+          font-size: .875rem;
+          user-select: none;
+          outline: none;
+          text-transform: capitalize;
+          justify-content: center;
+          text-align: center;
+          white-space: nowrap;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
+          position: relative;
+          overflow: hidden;
+          color: #666;
+          background-color: #fff;
+          border: 1px solid #eaeaea;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          --zeit-ui-button-padding: 1.25rem;
+          --zeit-ui-button-height: 2.5rem;
+          --zeit-ui-button-color: #666;
+        }
+
+        .btn:hover {
+          color: #000;
+          --zeit-ui-button-color: #000;
+          background-color: #fff;
+          border-color: #000;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          transform: translate3d(0px, 0px, 0px);
+        }
+
+        .btn :global(.text) {
+          position: relative;
+          z-index: 1;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          line-height: inherit;
+          top: -1px;
+        }
+
+        .btn :global(.text p),
+        .btn :global(.text pre),
+        .btn :global(.text div) {
+          margin: 0;
+        }
+      </style></button><style>
+          .btn-group {
+            display: inline-flex;
+            border-radius: 5px;
+            margin: 4pt;
+            border: 1px solid #eaeaea;
+            background-color: transparent;
+            overflow: hidden;
+            height: min-content;
+          }
+
+          .vertical {
+            flex-direction: column;
+          }
+
+          .btn-group :global(.btn) {
+            border: none;
+          }
+
+          .btn-group :global(.btn .text) {
+            top: 0;
+          }
+
+          .horizontal :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 1px solid #eaeaea;
+          }
+
+          .horizontal :global(.btn:not(:last-child)) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          .vertical :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-top: 1px solid #eaeaea;
+          }
+
+          .vertical :global(.btn:not(:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        </style></div>"
+`;
+
+exports[`ButtonGroup props should be passed to each button 1`] = `
+"<div class=\\"btn-group horizontal \\"><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">action</div><style>
+        .btn {
+          box-sizing: border-box;
+          display: inline-block;
+          padding: 0 0.625rem;
+          height: 1.5rem;
+          line-height: 1.5rem;
+          min-width: min-content;
+          width: auto;
+          border-radius: 5px;
+          font-weight: 400;
+          font-size: .75rem;
+          user-select: none;
+          outline: none;
+          text-transform: capitalize;
+          justify-content: center;
+          text-align: center;
+          white-space: nowrap;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
+          position: relative;
+          overflow: hidden;
+          color: #fff;
+          background-color: #0070f3;
+          border: 1px solid #0070f3;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          --zeit-ui-button-padding: 0.625rem;
+          --zeit-ui-button-height: 1.5rem;
+          --zeit-ui-button-color: #fff;
+        }
+
+        .btn:hover {
+          color: #0070f3;
+          --zeit-ui-button-color: #0070f3;
+          background-color: #fff;
+          border-color: #0070f3;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          transform: translate3d(0px, 0px, 0px);
+        }
+
+        .btn :global(.text) {
+          position: relative;
+          z-index: 1;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          line-height: inherit;
+          top: -1px;
+        }
+
+        .btn :global(.text p),
+        .btn :global(.text pre),
+        .btn :global(.text div) {
+          margin: 0;
+        }
+      </style></button><style>
+          .btn-group {
+            display: inline-flex;
+            border-radius: 5px;
+            margin: 4pt;
+            border: 1px solid #fff;
+            background-color: transparent;
+            overflow: hidden;
+            height: min-content;
+          }
+
+          .vertical {
+            flex-direction: column;
+          }
+
+          .btn-group :global(.btn) {
+            border: none;
+          }
+
+          .btn-group :global(.btn .text) {
+            top: 0;
+          }
+
+          .horizontal :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 1px solid #fff;
+          }
+
+          .horizontal :global(.btn:not(:last-child)) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          .vertical :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-top: 1px solid #fff;
+          }
+
+          .vertical :global(.btn:not(:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        </style></div>"
+`;
+
+exports[`ButtonGroup props should be passed to each button 2`] = `
+"<div class=\\"btn-group horizontal \\"><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">action</div><style>
+        .btn {
+          box-sizing: border-box;
+          display: inline-block;
+          padding: 0 0.625rem;
+          height: 1.5rem;
+          line-height: 1.5rem;
+          min-width: min-content;
+          width: auto;
+          border-radius: 5px;
+          font-weight: 400;
+          font-size: .75rem;
+          user-select: none;
+          outline: none;
+          text-transform: capitalize;
+          justify-content: center;
+          text-align: center;
+          white-space: nowrap;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
+          position: relative;
+          overflow: hidden;
+          color: #fff;
+          background-color: #0070f3;
+          border: 1px solid #0070f3;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          --zeit-ui-button-padding: 0.625rem;
+          --zeit-ui-button-height: 1.5rem;
+          --zeit-ui-button-color: #fff;
+        }
+
+        .btn:hover {
+          color: #0070f3;
+          --zeit-ui-button-color: #0070f3;
+          background-color: #fff;
+          border-color: #0070f3;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          transform: translate3d(0px, 0px, 0px);
+        }
+
+        .btn :global(.text) {
+          position: relative;
+          z-index: 1;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          line-height: inherit;
+          top: -1px;
+        }
+
+        .btn :global(.text p),
+        .btn :global(.text pre),
+        .btn :global(.text div) {
+          margin: 0;
+        }
+      </style></button><style>
+          .btn-group {
+            display: inline-flex;
+            border-radius: 5px;
+            margin: 4pt;
+            border: 1px solid #0070f3;
+            background-color: transparent;
+            overflow: hidden;
+            height: min-content;
+          }
+
+          .vertical {
+            flex-direction: column;
+          }
+
+          .btn-group :global(.btn) {
+            border: none;
+          }
+
+          .btn-group :global(.btn .text) {
+            top: 0;
+          }
+
+          .horizontal :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 1px solid #0070f3;
+          }
+
+          .horizontal :global(.btn:not(:last-child)) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          .vertical :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-top: 1px solid #0070f3;
+          }
+
+          .vertical :global(.btn:not(:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        </style></div>"
+`;
+
+exports[`ButtonGroup should render correctly 1`] = `
+"<div class=\\"btn-group horizontal \\"><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">action</div><style>
+        .btn {
+          box-sizing: border-box;
+          display: inline-block;
+          padding: 0 1.25rem;
+          height: 2.5rem;
+          line-height: 2.5rem;
+          min-width: min-content;
+          width: auto;
+          border-radius: 5px;
+          font-weight: 400;
+          font-size: .875rem;
+          user-select: none;
+          outline: none;
+          text-transform: capitalize;
+          justify-content: center;
+          text-align: center;
+          white-space: nowrap;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
+          position: relative;
+          overflow: hidden;
+          color: #666;
+          background-color: #fff;
+          border: 1px solid #eaeaea;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          --zeit-ui-button-padding: 1.25rem;
+          --zeit-ui-button-height: 2.5rem;
+          --zeit-ui-button-color: #666;
+        }
+
+        .btn:hover {
+          color: #000;
+          --zeit-ui-button-color: #000;
+          background-color: #fff;
+          border-color: #000;
+          cursor: pointer;
+          pointer-events: auto;
+          box-shadow: none;
+          transform: translate3d(0px, 0px, 0px);
+        }
+
+        .btn :global(.text) {
+          position: relative;
+          z-index: 1;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+          text-align: center;
+          line-height: inherit;
+          top: -1px;
+        }
+
+        .btn :global(.text p),
+        .btn :global(.text pre),
+        .btn :global(.text div) {
+          margin: 0;
+        }
+      </style></button><style>
+          .btn-group {
+            display: inline-flex;
+            border-radius: 5px;
+            margin: 4pt;
+            border: 1px solid #eaeaea;
+            background-color: transparent;
+            overflow: hidden;
+            height: min-content;
+          }
+
+          .vertical {
+            flex-direction: column;
+          }
+
+          .btn-group :global(.btn) {
+            border: none;
+          }
+
+          .btn-group :global(.btn .text) {
+            top: 0;
+          }
+
+          .horizontal :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-left: 1px solid #eaeaea;
+          }
+
+          .horizontal :global(.btn:not(:last-child)) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+
+          .vertical :global(.btn:not(:first-child)) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border-top: 1px solid #eaeaea;
+          }
+
+          .vertical :global(.btn:not(:last-child)) {
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
+          }
+        </style></div>"
+`;
diff --git a/components/button-group/__tests__/index.test.tsx b/components/button-group/__tests__/index.test.tsx
new file mode 100644
index 0000000..d85eda9
--- /dev/null
+++ b/components/button-group/__tests__/index.test.tsx
@@ -0,0 +1,53 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { ButtonGroup, Button } from 'components'
+import { nativeEvent } from 'tests/utils'
+
+describe('ButtonGroup', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(
+      <ButtonGroup>
+        <Button>action</Button>
+      </ButtonGroup>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('props should be passed to each button', () => {
+    const wrapper = mount(
+      <ButtonGroup size="mini" type="success">
+        <Button>action</Button>
+      </ButtonGroup>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    wrapper.setProps({ ghost: true })
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
+  it('should ignore events when group disabled', () => {
+    const handler = jest.fn()
+    const wrapper = mount(
+      <ButtonGroup>
+        <Button onClick={handler}>action</Button>
+      </ButtonGroup>,
+    )
+    wrapper.find('button').simulate('click', nativeEvent)
+    expect(handler).toHaveBeenCalledTimes(1)
+    wrapper.setProps({ disabled: true })
+    wrapper.find('button').simulate('click', nativeEvent)
+    expect(handler).toHaveBeenCalledTimes(1)
+  })
+
+  it('buttons should be displayed vertically', () => {
+    const wrapper = mount(
+      <ButtonGroup vertical>
+        <Button>action1</Button>
+        <Button>action2</Button>
+      </ButtonGroup>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+})
diff --git a/components/button/__tests__/__snapshots__/icon.test.tsx.snap b/components/button/__tests__/__snapshots__/icon.test.tsx.snap
index 07c3288..cdaf903 100644
--- a/components/button/__tests__/__snapshots__/icon.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/icon.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ButtonIcon should render correctly 1`] = `
-"<button class=\\"btn \\"><span class=\\"icon  \\"><svg></svg><style>
+"<button type=\\"button\\" class=\\"btn \\"><span class=\\"icon  \\"><svg></svg><style>
         .icon {
           position: absolute;
           left: var(--zeit-ui-button-padding);
@@ -26,13 +26,13 @@ exports[`ButtonIcon should render correctly 1`] = `
           width: calc(var(--zeit-ui-button-height) / 2.35);
         }
       </style></span><div class=\\"text left\\">action<style>
-            .left {
-              padding-left: 0;
-            }
-            .right {
-              padding-right: 0;
-            }
-          </style></div><style>
+          .left {
+            padding-left: 0;
+          }
+          .right {
+            padding-right: 0;
+          }
+        </style></div><style>
         .btn {
           box-sizing: border-box;
           display: inline-block;
@@ -50,7 +50,8 @@ exports[`ButtonIcon should render correctly 1`] = `
           justify-content: center;
           text-align: center;
           white-space: nowrap;
-          transition: all 0.2s ease 0s;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;
@@ -95,7 +96,7 @@ exports[`ButtonIcon should render correctly 1`] = `
 `;
 
 exports[`ButtonIcon should work with right 1`] = `
-"<button class=\\"btn \\"><span class=\\"icon right \\"><svg></svg><style>
+"<button type=\\"button\\" class=\\"btn \\"><span class=\\"icon right \\"><svg></svg><style>
         .icon {
           position: absolute;
           left: var(--zeit-ui-button-padding);
@@ -120,13 +121,13 @@ exports[`ButtonIcon should work with right 1`] = `
           width: calc(var(--zeit-ui-button-height) / 2.35);
         }
       </style></span><div class=\\"text right\\">action<style>
-            .left {
-              padding-left: 0;
-            }
-            .right {
-              padding-right: 0;
-            }
-          </style></div><style>
+          .left {
+            padding-left: 0;
+          }
+          .right {
+            padding-right: 0;
+          }
+        </style></div><style>
         .btn {
           box-sizing: border-box;
           display: inline-block;
@@ -144,7 +145,8 @@ exports[`ButtonIcon should work with right 1`] = `
           justify-content: center;
           text-align: center;
           white-space: nowrap;
-          transition: all 0.2s ease 0s;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;
diff --git a/components/toast/__tests__/__snapshots__/index.test.tsx.snap b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
index b35324e..1ee999c 100644
--- a/components/toast/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UseToast should render different actions 1`] = `
-"<div class=\\"toast-container \\"><div class=\\"toast  \\"><div class=\\"message\\">hello</div><div class=\\"action\\"><button class=\\"btn \\"><div class=\\"text\\">remove</div><style>
+"<div class=\\"toast-container \\"><div class=\\"toast  \\"><div class=\\"message\\">hello</div><div class=\\"action\\"><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">remove</div><style>
         .btn {
           box-sizing: border-box;
           display: inline-block;
@@ -19,7 +19,8 @@ exports[`UseToast should render different actions 1`] = `
           justify-content: center;
           text-align: center;
           white-space: nowrap;
-          transition: all 0.2s ease 0s;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #fff;
@@ -60,7 +61,7 @@ exports[`UseToast should render different actions 1`] = `
         .btn :global(.text div) {
           margin: 0;
         }
-      </style></button><button class=\\"btn \\"><div class=\\"text\\">remove</div><style>
+      </style></button><button type=\\"button\\" class=\\"btn \\"><div class=\\"text\\">remove</div><style>
         .btn {
           box-sizing: border-box;
           display: inline-block;
@@ -78,7 +79,8 @@ exports[`UseToast should render different actions 1`] = `
           justify-content: center;
           text-align: center;
           white-space: nowrap;
-          transition: all 0.2s ease 0s;
+          transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
+            border 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: #666;

From e3ba8aed41f25e07060e9d232bd8cb0bab0ac367 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 11 May 2020 20:05:25 +0800
Subject: [PATCH 4/5] perf(toast): improve toast component performance

test(toast): update spanshots

style(button): remove unused
---
 components/button/utils.tsx                    |  2 +-
 .../__snapshots__/index.test.tsx.snap          | 14 +++++++-------
 components/toast/__tests__/index.test.tsx      |  2 +-
 components/toast/toast-container.tsx           |  8 +-------
 components/toast/toast-item.tsx                | 18 +++++++++++-------
 components/toast/use-toast.tsx                 | 13 +++++--------
 6 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/components/button/utils.tsx b/components/button/utils.tsx
index 94d7ed1..9df5c29 100644
--- a/components/button/utils.tsx
+++ b/components/button/utils.tsx
@@ -11,7 +11,7 @@ export const getButtonChildrenWithIcon = (
   icons: {
     icon?: React.ReactNode
     iconRight?: React.ReactNode
-  } = {},
+  },
 ) => {
   const { icon, iconRight } = icons
   const hasIcon = icon || iconRight
diff --git a/components/toast/__tests__/__snapshots__/index.test.tsx.snap b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
index 1ee999c..5f217c9 100644
--- a/components/toast/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/toast/__tests__/__snapshots__/index.test.tsx.snap
@@ -135,13 +135,13 @@ exports[`UseToast should render different actions 1`] = `
           border: 0;
           border-radius: 5px;
           padding: 16pt;
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
           position: absolute;
           bottom: 0;
           right: 0;
-          opacity: 0;
+          opacity: 1;
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
           transform: translate3d(0, 100%, 0px) scale(1);
-          transition: all 400ms ease;
+          transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;
         }
 
         .toast.visible {
@@ -193,7 +193,7 @@ exports[`UseToast should render different actions 1`] = `
 `;
 
 exports[`UseToast should work with different types 1`] = `
-"<div class=\\"toast-container \\"><div class=\\"toast  \\"><div class=\\"message\\">hello</div><div class=\\"action\\"></div><style>
+"<div class=\\"toast-container \\"><div class=\\"toast visible \\"><div class=\\"message\\">hello</div><div class=\\"action\\"></div><style>
         .toast {
           width: 420px;
           max-width: 90vw;
@@ -207,13 +207,13 @@ exports[`UseToast should work with different types 1`] = `
           border: 0;
           border-radius: 5px;
           padding: 16pt;
-          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
           position: absolute;
           bottom: 0;
           right: 0;
-          opacity: 0;
+          opacity: 1;
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
           transform: translate3d(0, 100%, 0px) scale(1);
-          transition: all 400ms ease;
+          transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;
         }
 
         .toast.visible {
diff --git a/components/toast/__tests__/index.test.tsx b/components/toast/__tests__/index.test.tsx
index 0dba30c..778f8e5 100644
--- a/components/toast/__tests__/index.test.tsx
+++ b/components/toast/__tests__/index.test.tsx
@@ -61,7 +61,7 @@ describe('UseToast', () => {
 
     expectToastIsHidden(wrapper)
     triggerToast(wrapper, { type: 'success', text: 'hello' })
-    await updateWrapper(wrapper)
+    await updateWrapper(wrapper, 100)
     expectToastIsShow(wrapper)
     expect(wrapper.find('.toast-container').html()).toMatchSnapshot()
   })
diff --git a/components/toast/toast-container.tsx b/components/toast/toast-container.tsx
index 9485c6f..7fd5678 100644
--- a/components/toast/toast-container.tsx
+++ b/components/toast/toast-container.tsx
@@ -21,13 +21,7 @@ const ToastContainer: React.FC<React.PropsWithChildren<{}>> = () => {
   const toastElements = useMemo(
     () =>
       toasts.map((t, i) => (
-        <ToastItem
-          index={i}
-          total={toasts.length}
-          toast={t}
-          onHover={hover}
-          key={`toast-${t.id}-${i}`}
-        />
+        <ToastItem index={i} total={toasts.length} toast={t} onHover={hover} key={`toast-${i}`} />
       )),
     [toasts, hover],
   )
diff --git a/components/toast/toast-item.tsx b/components/toast/toast-item.tsx
index e7c7911..4c73a1d 100644
--- a/components/toast/toast-item.tsx
+++ b/components/toast/toast-item.tsx
@@ -61,21 +61,23 @@ const getColors = (palette: ZeitUIThemesPalette, type?: NormalTypes) => {
 
 const ToastItem: React.FC<ToatItemProps> = React.memo(({ index, total, toast, onHover }) => {
   const theme = useTheme()
-  const { color, bgColor } = getColors(theme.palette, toast.type)
+  const { color, bgColor } = useMemo(() => getColors(theme.palette, toast.type), [
+    theme.palette,
+    toast.type,
+  ])
   const [visible, setVisible] = useState<boolean>(false)
   const [hide, setHide] = useState<boolean>(false)
-
   const reverseIndex = useMemo(() => total - (index + 1), [total, index])
   const translate = useMemo(() => {
     const calc = `100% + -75px + -${20 * reverseIndex}px`
-    if (reverseIndex > 5) return `translate3d(0, -75px, -${reverseIndex}px) scale(.01)`
+    if (reverseIndex >= 4) return `translate3d(0, -75px, -${reverseIndex}px) scale(.7)`
     if (onHover) {
       return `translate3d(0, ${reverseIndex * -75}px, -${reverseIndex}px) scale(${
         total === 1 ? 1 : 0.98205
       })`
     }
     return `translate3d(0, calc(${calc}), -${reverseIndex}px) scale(${1 - 0.05 * reverseIndex})`
-  }, [onHover, index, total])
+  }, [onHover, index, total, reverseIndex])
 
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -98,6 +100,8 @@ const ToastItem: React.FC<ToatItemProps> = React.memo(({ index, total, toast, on
       clearTimeout(timer)
     }
   }, [reverseIndex, toast.willBeDestroy])
+  /* istanbul ignore next */
+  if (reverseIndex > 10) return null
 
   return (
     <div
@@ -119,13 +123,13 @@ const ToastItem: React.FC<ToatItemProps> = React.memo(({ index, total, toast, on
           border: 0;
           border-radius: ${theme.layout.radius};
           padding: ${theme.layout.gap};
-          box-shadow: ${theme.expressiveness.shadowSmall};
           position: absolute;
           bottom: 0;
           right: 0;
-          opacity: 0;
+          opacity: ${reverseIndex > 4 ? 0 : 1};
+          box-shadow: ${reverseIndex > 4 ? 'none' : theme.expressiveness.shadowSmall};
           transform: translate3d(0, 100%, 0px) scale(1);
-          transition: all 400ms ease;
+          transition: transform 400ms ease 0ms, visibility 200ms ease 0ms, opacity 200ms ease 0ms;
         }
 
         .toast.visible {
diff --git a/components/toast/use-toast.tsx b/components/toast/use-toast.tsx
index 3777ddd..91c9e2b 100644
--- a/components/toast/use-toast.tsx
+++ b/components/toast/use-toast.tsx
@@ -31,14 +31,11 @@ const useToasts = (): [Array<Toast>, (t: Toast) => void] => {
 
   useEffect(() => setHovering(toastHovering), [toastHovering])
 
-  const destoryAll = (delay: number) => {
-    // Wait for all components to display before destroying
-    // The destory means direct remove all element, whether in animation or not.
-    const nextDestoryTime = delay + 500
+  const destoryAll = (delay: number, time: number) => {
     /* istanbul ignore next */
-    if (nextDestoryTime < maxDestoryTime.current) return
+    if (time <= maxDestoryTime.current) return
     clearTimeout(destoryTimer.current)
-    maxDestoryTime.current = nextDestoryTime
+    maxDestoryTime.current = time
 
     destoryTimer.current = window.setTimeout(() => {
       /* istanbul ignore next */
@@ -50,7 +47,7 @@ const useToasts = (): [Array<Toast>, (t: Toast) => void] => {
         return []
       })
       clearTimeout(destoryTimer.current)
-    }, maxDestoryTime.current)
+    }, delay + 350)
   }
 
   const setToast = (toast: Toast): void => {
@@ -65,7 +62,7 @@ const useToasts = (): [Array<Toast>, (t: Toast) => void] => {
         })
       })
       destoryStack.current.push(id)
-      destoryAll(delay)
+      destoryAll(delay, performance.now())
     }
 
     updateToasts((currentToasts: Array<ToastWithID>) => {

From c34544f40e8d3a9758ebe9ee5a4ecb821213b210 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Mon, 11 May 2020 20:35:25 +0800
Subject: [PATCH 5/5] fix(toast): fix toasts destroying each other in different
 instances

---
 components/toast/use-toast.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/components/toast/use-toast.tsx b/components/toast/use-toast.tsx
index 91c9e2b..135eccf 100644
--- a/components/toast/use-toast.tsx
+++ b/components/toast/use-toast.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect } from 'react'
 import { NormalTypes } from '../utils/prop-types'
 import useCurrentState from '../utils/use-current-state'
 import { useZEITUIContext } from '../utils/use-zeit-ui-context'
@@ -22,31 +22,32 @@ const defaultToast = {
   delay: 2000,
 }
 
+let destoryStack: Array<string> = []
+let maxDestoryTime: number = 0
+let destoryTimer: number | undefined
+
 const useToasts = (): [Array<Toast>, (t: Toast) => void] => {
   const { updateToasts, toastHovering, toasts } = useZEITUIContext()
-  const destoryStack = useRef<Array<string>>([])
-  const destoryTimer = useRef<number | undefined>()
-  const maxDestoryTime = useRef<number>(0)
   const [, setHovering, hoveringRef] = useCurrentState<boolean>(toastHovering)
 
   useEffect(() => setHovering(toastHovering), [toastHovering])
 
   const destoryAll = (delay: number, time: number) => {
     /* istanbul ignore next */
-    if (time <= maxDestoryTime.current) return
-    clearTimeout(destoryTimer.current)
-    maxDestoryTime.current = time
+    if (time <= maxDestoryTime) return
+    clearTimeout(destoryTimer)
+    maxDestoryTime = time
 
-    destoryTimer.current = window.setTimeout(() => {
+    destoryTimer = window.setTimeout(() => {
       /* istanbul ignore next */
       updateToasts((currentToasts: Array<ToastWithID>) => {
-        if (destoryStack.current.length < currentToasts.length) {
+        if (destoryStack.length < currentToasts.length) {
           return currentToasts
         }
-        destoryStack.current = []
+        destoryStack = []
         return []
       })
-      clearTimeout(destoryTimer.current)
+      clearTimeout(destoryTimer)
     }, delay + 350)
   }
 
@@ -61,7 +62,7 @@ const useToasts = (): [Array<Toast>, (t: Toast) => void] => {
           return { ...item, willBeDestroy: true }
         })
       })
-      destoryStack.current.push(id)
+      destoryStack.push(id)
       destoryAll(delay, performance.now())
     }