mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

feat: Spin token (#44334)

Browse Source 
* feat: Spin token

* chore: code clean
This commit is contained in:
MadCcc 2023-08-22 11:47:07 +08:00 committed by GitHub
parent d1d3b57dcb
commit 820a9213c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
components/spin/style/index.tsx
View File

@ -10,13 +10,25 @@ export interface ComponentToken {
* @descEN Height of content area
*/
contentHeight: number;
/**
* @desc 加载图标尺寸
* @descEN Loading icon size
*/
dotSize: number;
/**
* @desc 小号加载图标尺寸
* @descEN Small loading icon size
*/
dotSizeSM: number;
/**
* @desc 大号加载图标尺寸
* @descEN Large loading icon size
*/
dotSizeLG: number;
}
interface SpinToken extends FullToken<'Spin'> {
spinDotDefault: string;
spinDotSize: number;
spinDotSizeSM: number;
spinDotSizeLG: number;
}
const antSpinMove = new Keyframes('antSpinMove', {
@ -61,43 +73,43 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
position: 'absolute',
top: '50%',
insetInlineStart: '50%',
margin: -token.spinDotSize / 2,
margin: -token.dotSize / 2,
},
[`${token.componentCls}-text`]: {
position: 'absolute',
top: '50%',
width: '100%',
paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
paddingTop: (token.dotSize - token.fontSize) / 2 + 2,
textShadow: `0 1px 2px ${token.colorBgContainer}`, // FIXME: shadow
fontSize: token.fontSize,
},
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
marginTop: -(token.spinDotSize / 2) - 10,
marginTop: -(token.dotSize / 2) - 10,
},
'&-sm': {
[`${token.componentCls}-dot`]: {
margin: -token.spinDotSizeSM / 2,
margin: -token.dotSizeSM / 2,
},
[`${token.componentCls}-text`]: {
paddingTop: (token.spinDotSizeSM - token.fontSize) / 2 + 2,
paddingTop: (token.dotSizeSM - token.fontSize) / 2 + 2,
},
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
marginTop: -(token.spinDotSizeSM / 2) - 10,
marginTop: -(token.dotSizeSM / 2) - 10,
},
},
'&-lg': {
[`${token.componentCls}-dot`]: {
margin: -(token.spinDotSizeLG / 2),
margin: -(token.dotSizeLG / 2),
},
[`${token.componentCls}-text`]: {
paddingTop: (token.spinDotSizeLG - token.fontSize) / 2 + 2,
paddingTop: (token.dotSizeLG - token.fontSize) / 2 + 2,
},
[`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
marginTop: -(token.spinDotSizeLG / 2) - 10,
marginTop: -(token.dotSizeLG / 2) - 10,
},
},
},
@ -147,15 +159,15 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
[`${token.componentCls}-dot`]: {
position: 'relative',
display: 'inline-block',
fontSize: token.spinDotSize,
fontSize: token.dotSize,
width: '1em',
height: '1em',
'&-item': {
position: 'absolute',
display: 'block',
width: (token.spinDotSize - token.marginXXS / 2) / 2,
height: (token.spinDotSize - token.marginXXS / 2) / 2,
width: (token.dotSize - token.marginXXS / 2) / 2,
height: (token.dotSize - token.marginXXS / 2) / 2,
backgroundColor: token.colorPrimary,
borderRadius: '100%',
transform: 'scale(0.75)',
@ -205,21 +217,21 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
// small
[`&-sm ${token.componentCls}-dot`]: {
fontSize: token.spinDotSizeSM,
fontSize: token.dotSizeSM,
i: {
width: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
height: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
width: (token.dotSizeSM - token.marginXXS / 2) / 2,
height: (token.dotSizeSM - token.marginXXS / 2) / 2,
},
},
// large
[`&-lg ${token.componentCls}-dot`]: {
fontSize: token.spinDotSizeLG,
fontSize: token.dotSizeLG,
i: {
width: (token.spinDotSizeLG - token.marginXXS) / 2,
height: (token.spinDotSizeLG - token.marginXXS) / 2,
width: (token.dotSizeLG - token.marginXXS) / 2,
height: (token.dotSizeLG - token.marginXXS) / 2,
},
},
@ -235,13 +247,13 @@ export default genComponentStyleHook(
(token) => {
const spinToken = mergeToken<SpinToken>(token, {
spinDotDefault: token.colorTextDescription,
spinDotSize: token.controlHeightLG / 2,
spinDotSizeSM: token.controlHeightLG * 0.35,
spinDotSizeLG: token.controlHeight,
});
return [genSpinStyle(spinToken)];
},
{
(token) => ({
contentHeight: 400,
},
dotSize: token.controlHeightLG / 2,
dotSizeSM: token.controlHeightLG * 0.35,
dotSizeLG: token.controlHeight,
}),
);

11
docs/react/migrate-less-variables.en-US.md
View File

@ -14,8 +14,8 @@ This document contains the correspondence between all the less variables related
We could configure global token and component token for each component through the `theme` property of ConfigProvider.
```tsx
import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -670,6 +670,15 @@ export default App;
| `@slider-disabled-color` | `trackBgDisabled` | - |
| `@slider-disabled-background-color` | - | Deprecated |
### Spin
<!-- prettier-ignore -->
| Less variables | Component Token | Note |
| --- | --- | --- |
| `@spin-dot-size-sm` | `dotSizeSM` | - |
| `@spin-dot-size` | `dotSize` | - |
| `@spin-dot-size-lg` | `dotSizeLG` | - |
### Statistic
<!-- prettier-ignore -->

11
docs/react/migrate-less-variables.zh-CN.md
View File

@ -14,8 +14,8 @@ title: 从 Less 变量到 Design Token
通过 ConfigProvider 的 `theme` 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token
```tsx
import { Checkbox, ConfigProvider, Radio } from 'antd';
import React from 'react';
import { Checkbox, ConfigProvider, Radio } from 'antd';
const App: React.FC = () => (
<ConfigProvider
@ -668,6 +668,15 @@ Mentions 提及
| `@slider-disabled-color` | `trackBgDisabled` | - |
| `@slider-disabled-background-color` | - | 已废弃 |
### Spin 加载中
<!-- prettier-ignore -->
| Less 变量 | Component Token | 备注 |
| --- | --- | --- |
| `@spin-dot-size-sm` | `dotSizeSM` | - |
| `@spin-dot-size` | `dotSize` | - |
| `@spin-dot-size-lg` | `dotSizeLG` | - |
### Statistic 统计数值
<!-- prettier-ignore -->