mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

fix: adjust spin styles to support sm/lg variants (#38923)

Browse Source 
* fix: adjust spin styles to support sm/lg variants

* doc: add sized tip examples to Spin docs

* test: update spin component snapshots
This commit is contained in:
sribich 2022-11-29 01:09:58 -05:00 committed by GitHub
parent fc1e818e99
commit 8cca17f5ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 405 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -287,6 +287,156 @@ exports[`renders ./components/spin/demo/size.tsx extend context correctly 1`] =
`;
exports[`renders ./components/spin/demo/tip.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"
>
Loading
</div>
</div>
</div>
<div
class="ant-spin-container ant-spin-blur"
>
<div
class="content"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"
>
Loading
</div>
</div>
</div>
<div
class="ant-spin-container ant-spin-blur"
>
<div
class="content"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"
>
Loading
</div>
</div>
</div>
<div
class="ant-spin-container ant-spin-blur"
>
<div
class="content"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-spin-nested-loading"
>
@ -344,4 +494,6 @@ exports[`renders ./components/spin/demo/tip.tsx extend context correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
`;

152
components/spin/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -287,6 +287,156 @@ exports[`renders ./components/spin/demo/size.tsx correctly 1`] = `
`;
exports[`renders ./components/spin/demo/tip.tsx correctly 1`] = `
<div
class="ant-space ant-space-vertical"
style="width:100%"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-sm ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"
>
Loading
</div>
</div>
</div>
<div
class="ant-spin-container ant-spin-blur"
>
<div
class="content"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"
>
Loading
</div>
</div>
</div>
<div
class="ant-spin-container ant-spin-blur"
>
<div
class="content"
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-spin-nested-loading"
>
<div>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-lg ant-spin-spinning ant-spin-show-text"
>
<span
class="ant-spin-dot ant-spin-dot-spin"
>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
<i
class="ant-spin-dot-item"
/>
</span>
<div
class="ant-spin-text"
>
Loading
</div>
</div>
</div>
<div
class="ant-spin-container ant-spin-blur"
>
<div
class="content"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-spin-nested-loading"
>
@ -344,4 +494,6 @@ exports[`renders ./components/spin/demo/tip.tsx correctly 1`] = `
</div>
</div>
</div>
</div>
</div>
`;

8
components/spin/demo/tip.md
View File

@ -4,4 +4,10 @@
## en-US
Customized description content.
```css
.content {
padding: 50px;
background: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
```

16
components/spin/demo/tip.tsx
View File

@ -1,7 +1,20 @@
import React from 'react';
import { Alert, Spin } from 'antd';
import { Alert, Space, Spin } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Space>
<Spin tip="Loading" size="small">
<div className="content" />
</Spin>
<Spin tip="Loading">
<div className="content" />
</Spin>
<Spin tip="Loading" size="large">
<div className="content" />
</Spin>
</Space>
<Spin tip="Loading...">
<Alert
message="Alert message title"
@ -9,6 +22,7 @@ const App: React.FC = () => (
type="info"
/>
</Spin>
</Space>
);
export default App;

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

@ -71,7 +71,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
marginTop: -(token.spinDotSize / 2) - 10,
},
[`> div > ${token.componentCls}-sm`]: {
'&-sm': {
[`${token.componentCls}-dot`]: {
margin: -token.spinDotSizeSM / 2,
},
@ -83,7 +83,7 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
},
},
[`> div > ${token.componentCls}-lg`]: {
'&-lg': {
[`${token.componentCls}-dot`]: {
margin: -(token.spinDotSizeLG / 2),
},