kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-02-09 22:50:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(button): add document about light types

Browse Source 
fix(button): fix animation shadow too large
This commit is contained in:
unix
2020-05-15 20:18:14 +08:00
parent c79c030f3e
commit 7a7e0da692
4 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/button/button.drip.tsx
View File

@@ -54,10 +54,10 @@ const ButtonDrip: React.FC<ButtonDrip> = ({ x, y, color, onCompleted }) => {
svg {
position: absolute;
animation: 400ms ease-in expand;
animation: 350ms ease-in expand;
animation-fill-mode: forwards;
width: 20px;
height: 20px;
width: 1rem;
height: 1rem;
}
@keyframes expand {
@@ -72,7 +72,7 @@ const ButtonDrip: React.FC<ButtonDrip> = ({ x, y, color, onCompleted }) => {
opacity: 0.5;
}
100% {
transform: scale(25);
transform: scale(28);
opacity: 0;
}
}

2
components/button/styles.ts
View File

@@ -287,5 +287,5 @@ export const getButtonDripColor = (palette: ZeitUIThemesPalette, props: ButtonPr
const { type } = props
const isLightHover = type.endsWith('light')
const hoverColors = getButtonHoverColors(palette, props)
return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : palette.accents_2
return isLightHover ? addColorAlpha(hoverColors.bg, 0.65) : addColorAlpha(palette.accents_2, 0.65)
}

24
pages/en-us/components/button.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer } from 'components'
import { Button, Spacer, Grid } from 'components'
import Router from 'next/router'
import Settings from '@zeit-ui/react-icons/settings'
import UserX from '@zeit-ui/react-icons/userX'
@@ -50,15 +50,19 @@ Used to trigger an operation.
<Playground
title="Types"
desc="Different state."
scope={{ Button, Spacer }}
scope={{ Button, Spacer, Grid }}
code={`
<>
<Button type="secondary">Secondary</Button> <Spacer y={.5} />
<Button type="success">Success</Button> <Spacer y={.5} />
<Button type="warning">Warning</Button> <Spacer y={.5} />
<Button type="error">Error</Button> <Spacer y={.5} />
<Button type="abort">Abort</Button>
</>
<Grid.Container gap={2}>
<Grid><Button auto type="secondary">Secondary</Button></Grid>
<Grid><Button auto type="success">Success</Button></Grid>
<Grid><Button auto type="warning">Warning</Button></Grid>
<Grid><Button auto type="error">Error</Button></Grid>
<Grid><Button auto type="abort">Abort</Button></Grid>
<Grid><Button auto type="secondary-light">Secondary Ligth</Button></Grid>
<Grid><Button auto type="success-light">Success Ligth</Button></Grid>
<Grid><Button auto type="warning-light">Warning Ligth</Button></Grid>
<Grid><Button auto type="error-light">Error Ligth</Button></Grid>
</Grid.Container>
`} />
<Playground
@@ -74,7 +78,6 @@ Used to trigger an operation.
</>
`} />
<Playground
title="Sizes"
desc="Buttons of different sizes."
@@ -132,6 +135,7 @@ Used to trigger an operation.
```ts
type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
| 'secondary-light' | 'success-light' | 'warning-light' | 'error-light'
```
<Attributes.Title>NormalSizes</Attributes.Title>

23
pages/zh-cn/components/button.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Button, Spacer } from 'components'
import { Button, Spacer, Grid } from 'components'
import Router from 'next/router'
import Settings from '@zeit-ui/react-icons/settings'
import UserX from '@zeit-ui/react-icons/userX'
@@ -49,15 +49,19 @@ export const meta = {
<Playground
title="类型"
desc="不同状态下的按钮。"
scope={{ Button, Spacer }}
scope={{ Button, Grid }}
code={`
<>
<Button type="secondary">次要的</Button> <Spacer y={.5} />
<Button type="success">成功</Button> <Spacer y={.5} />
<Button type="warning">警告</Button> <Spacer y={.5} />
<Button type="error">错误</Button> <Spacer y={.5} />
<Button type="abort">中止</Button>
</>
<Grid.Container gap={2}>
<Grid><Button auto type="secondary">次要的</Button></Grid>
<Grid><Button auto type="success">成功</Button></Grid>
<Grid><Button auto type="warning">警告</Button></Grid>
<Grid><Button auto type="error">错误</Button></Grid>
<Grid><Button auto type="abort">中止</Button></Grid>
<Grid><Button auto type="secondary-light">次要的 浅色</Button></Grid>
<Grid><Button auto type="success-light">成功 浅色</Button></Grid>
<Grid><Button auto type="warning-light">警告 浅色</Button></Grid>
<Grid><Button auto type="error-light">错误 浅色</Button></Grid>
</Grid.Container>
`} />
<Playground
@@ -131,6 +135,7 @@ export const meta = {
```ts
type ButtonTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'abort'
| 'secondary-light' | 'success-light' | 'warning-light' | 'error-light'
```
<Attributes.Title>NormalSizes</Attributes.Title>