GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

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

* doc: add sized tip examples to Spin docs

* test: update spin component snapshots
pull/39083/head
sribich 2 years ago
committed by GitHub
parent
fc1e818e99
commit
8cca17f5ce
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 401 additions and 77 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 218
      components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
  2. 218
      components/spin/__tests__/__snapshots__/demo.test.ts.snap
  3. 8
      components/spin/demo/tip.md
  4. 30
      components/spin/demo/tip.tsx
  5. 4
      components/spin/style/index.tsx

218
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"
<div
class="ant-space-item"
style="margin-right:8px"
>
<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-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-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-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
class="ant-alert-content"
>
<div>
<div
class="ant-alert-message"
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning ant-spin-show-text"
>
Alert message title
<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="ant-alert-description"
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
>
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>

218
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"
<div
class="ant-space-item"
style="margin-right:8px"
>
<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-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-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-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
class="ant-alert-content"
>
<div>
<div
class="ant-alert-message"
aria-busy="true"
aria-live="polite"
class="ant-spin ant-spin-spinning ant-spin-show-text"
>
Alert message title
<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="ant-alert-description"
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true"
role="alert"
>
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),
},

Write Preview
Loading…
Cancel
Save