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

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

@ -288,57 +288,209 @@ 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-spin-nested-loading"
class="ant-space ant-space-vertical"
style="width:100%"
>
<div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning ant-spin-show-text"
class="ant-space ant-space-horizontal ant-space-align-center"
>
<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"
class="ant-space-item"
style="margin-right:8px"
>
Loading...
<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-spin-container ant-spin-blur"
class="ant-space-item"
>
<div
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
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-alert-content"
class="ant-spin-container ant-spin-blur"
>
<div
class="ant-alert-message"
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
>
Alert message title
</div>
<div
class="ant-alert-description"
>
Further details about the context of this alert.
<div
class="ant-alert-content"
>
<div
class="ant-alert-message"
>
Alert message title
</div>
<div
class="ant-alert-description"
>
Further details about the context of this alert.
</div>
</div>
</div>
</div>
</div>

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

@ -288,57 +288,209 @@ exports[`renders ./components/spin/demo/size.tsx correctly 1`] = `
exports[`renders ./components/spin/demo/tip.tsx correctly 1`] = `
<div
class="ant-spin-nested-loading"
class="ant-space ant-space-vertical"
style="width:100%"
>
<div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning ant-spin-show-text"
class="ant-space ant-space-horizontal ant-space-align-center"
>
<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"
class="ant-space-item"
style="margin-right:8px"
>
Loading...
<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-spin-container ant-spin-blur"
class="ant-space-item"
>
<div
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
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-alert-content"
class="ant-spin-container ant-spin-blur"
>
<div
class="ant-alert-message"
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
>
Alert message title
</div>
<div
class="ant-alert-description"
>
Further details about the context of this alert.
<div
class="ant-alert-content"
>
<div
class="ant-alert-message"
>
Alert message title
</div>
<div
class="ant-alert-description"
>
Further details about the context of this alert.
</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;
}
```

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

@ -1,14 +1,28 @@
import React from 'react';
import { Alert, Spin } from 'antd';
import { Alert, Space, Spin } from 'antd';
const App: React.FC = () => (
<Spin tip="Loading...">
<Alert
message="Alert message title"
description="Further details about the context of this alert."
type="info"
/>
</Spin>
<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"
description="Further details about the context of this alert."
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),
},