Skip to content

Commit e3ad856

Browse files
kovsukovsu
authored
fix(badge): dot with processing status (#6874)
* fix(badge): dot with processing status * tests: update snapshot
1 parent 61df5e6 commit e3ad856

File tree

2 files changed

+155
-126
lines changed

2 files changed

+155
-126
lines changed

‎components/badge/__tests__/__snapshots__/demo.test.js.snap‎

Lines changed: 154 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,19 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
3333
exports[`renders ./components/badge/demo/colors.vue correctly 1`] = `
3434
<h4 style="margin-bottom: 16px;">Presets:</h4>
3535
<div>
36-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-pink"></span><span class="ant-badge-status-text">pink</span></span></div>
37-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-red"></span><span class="ant-badge-status-text">red</span></span></div>
38-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-yellow"></span><span class="ant-badge-status-text">yellow</span></span></div>
39-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-orange"></span><span class="ant-badge-status-text">orange</span></span></div>
40-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-cyan"></span><span class="ant-badge-status-text">cyan</span></span></div>
41-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-green"></span><span class="ant-badge-status-text">green</span></span></div>
42-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-blue"></span><span class="ant-badge-status-text">blue</span></span></div>
43-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-purple"></span><span class="ant-badge-status-text">purple</span></span></div>
44-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-geekblue"></span><span class="ant-badge-status-text">geekblue</span></span></div>
45-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-magenta"></span><span class="ant-badge-status-text">magenta</span></span></div>
46-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-volcano"></span><span class="ant-badge-status-text">volcano</span></span></div>
47-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
48-
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
36+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-pink"></span><span class="ant-badge-status-text">pink</span></span></div>
37+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-red"></span><span class="ant-badge-status-text">red</span></span></div>
38+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-yellow"></span><span class="ant-badge-status-text">yellow</span></span></div>
39+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-orange"></span><span class="ant-badge-status-text">orange</span></span></div>
40+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-cyan"></span><span class="ant-badge-status-text">cyan</span></span></div>
41+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-green"></span><span class="ant-badge-status-text">green</span></span></div>
42+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-blue"></span><span class="ant-badge-status-text">blue</span></span></div>
43+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-purple"></span><span class="ant-badge-status-text">purple</span></span></div>
44+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-geekblue"></span><span class="ant-badge-status-text">geekblue</span></span></div>
45+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-magenta"></span><span class="ant-badge-status-text">magenta</span></span></div>
46+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-volcano"></span><span class="ant-badge-status-text">volcano</span></span></div>
47+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-gold"></span><span class="ant-badge-status-text">gold</span></span></div>
48+
<div><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-color-lime"></span><span class="ant-badge-status-text">lime</span></span></div>
4949
</div>
5050
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Custom</span></div>
5151
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot" style="background: rgb(255, 85, 0); color: rgb(255, 85, 0);"></span><span class="ant-badge-status-text">#f50</span></span>
@@ -89,141 +89,167 @@ exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
8989
`;
9090
9191
exports[`renders ./components/badge/demo/ribbon.vue correctly 1`] = `
92-
<div class="ant-ribbon-wrapper ">
93-
<div class="ant-card ant-card-bordered ant-card-small">
94-
<div class="ant-card-head">
95-
<div class="ant-card-head-wrapper">
96-
<div class="ant-card-head-title">Pushes open the window</div>
92+
<div style="width: 100%;" class="ant-space ant-space-vertical">
93+
<div class="ant-space-item" style="margin-bottom: 8px;">
94+
<div class="ant-ribbon-wrapper ">
95+
<div class="ant-card ant-card-bordered ant-card-small">
96+
<div class="ant-card-head">
97+
<div class="ant-card-head-wrapper">
98+
<div class="ant-card-head-title">Pushes open the window</div>
99+
<!---->
100+
</div>
101+
<!---->
102+
</div>
97103
<!---->
104+
<div class="ant-card-body">and raises the spyglass.</div>
105+
<!---->
106+
</div>
107+
<div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
108+
<div class="ant-ribbon-corner"></div>
98109
</div>
99-
<!---->
100110
</div>
101-
<!---->
102-
<div class="ant-card-body">and raises the spyglass.</div>
103-
<!---->
104-
</div>
105-
<div class="ant-ribbon ant-ribbon-placement-end"><span class="ant-ribbon-text">Hippies</span>
106-
<div class="ant-ribbon-corner"></div>
107111
</div>
108-
</div>
109-
<div class="ant-ribbon-wrapper ">
110-
<div class="ant-card ant-card-bordered ant-card-small">
111-
<div class="ant-card-head">
112-
<div class="ant-card-head-wrapper">
113-
<div class="ant-card-head-title">Pushes open the window</div>
112+
<!---->
113+
<div class="ant-space-item" style="margin-bottom: 8px;">
114+
<div class="ant-ribbon-wrapper ">
115+
<div class="ant-card ant-card-bordered ant-card-small">
116+
<div class="ant-card-head">
117+
<div class="ant-card-head-wrapper">
118+
<div class="ant-card-head-title">Pushes open the window</div>
119+
<!---->
120+
</div>
121+
<!---->
122+
</div>
114123
<!---->
124+
<div class="ant-card-body">and raises the spyglass.</div>
125+
<!---->
126+
</div>
127+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
128+
<div class="ant-ribbon-corner"></div>
115129
</div>
116-
<!---->
117130
</div>
118-
<!---->
119-
<div class="ant-card-body">and raises the spyglass.</div>
120-
<!---->
121131
</div>
122-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"><span class="ant-ribbon-text">Hippies</span>
123-
<div class="ant-ribbon-corner"></div>
124-
</div>
125-
</div>
126-
<div class="ant-ribbon-wrapper ">
127-
<div class="ant-card ant-card-bordered ant-card-small">
128-
<div class="ant-card-head">
129-
<div class="ant-card-head-wrapper">
130-
<div class="ant-card-head-title">Pushes open the window</div>
132+
<!---->
133+
<div class="ant-space-item" style="margin-bottom: 8px;">
134+
<div class="ant-ribbon-wrapper ">
135+
<div class="ant-card ant-card-bordered ant-card-small">
136+
<div class="ant-card-head">
137+
<div class="ant-card-head-wrapper">
138+
<div class="ant-card-head-title">Pushes open the window</div>
139+
<!---->
140+
</div>
141+
<!---->
142+
</div>
143+
<!---->
144+
<div class="ant-card-body">and raises the spyglass.</div>
131145
<!---->
132146
</div>
133-
<!---->
147+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
148+
<div class="ant-ribbon-corner"></div>
149+
</div>
134150
</div>
135-
<!---->
136-
<div class="ant-card-body">and raises the spyglass.</div>
137-
<!---->
138-
</div>
139-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"><span class="ant-ribbon-text">Hippies</span>
140-
<div class="ant-ribbon-corner"></div>
141151
</div>
142-
</div>
143-
<div class="ant-ribbon-wrapper ">
144-
<div class="ant-card ant-card-bordered ant-card-small">
145-
<div class="ant-card-head">
146-
<div class="ant-card-head-wrapper">
147-
<div class="ant-card-head-title">Pushes open the window</div>
152+
<!---->
153+
<div class="ant-space-item" style="margin-bottom: 8px;">
154+
<div class="ant-ribbon-wrapper ">
155+
<div class="ant-card ant-card-bordered ant-card-small">
156+
<div class="ant-card-head">
157+
<div class="ant-card-head-wrapper">
158+
<div class="ant-card-head-title">Pushes open the window</div>
159+
<!---->
160+
</div>
161+
<!---->
162+
</div>
148163
<!---->
164+
<div class="ant-card-body">and raises the spyglass.</div>
165+
<!---->
166+
</div>
167+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
168+
<div class="ant-ribbon-corner"></div>
149169
</div>
150-
<!---->
151170
</div>
152-
<!---->
153-
<div class="ant-card-body">and raises the spyglass.</div>
154-
<!---->
155171
</div>
156-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"><span class="ant-ribbon-text">Hippies</span>
157-
<div class="ant-ribbon-corner"></div>
158-
</div>
159-
</div>
160-
<div class="ant-ribbon-wrapper ">
161-
<div class="ant-card ant-card-bordered ant-card-small">
162-
<div class="ant-card-head">
163-
<div class="ant-card-head-wrapper">
164-
<div class="ant-card-head-title">Pushes open the window</div>
172+
<!---->
173+
<div class="ant-space-item" style="margin-bottom: 8px;">
174+
<div class="ant-ribbon-wrapper ">
175+
<div class="ant-card ant-card-bordered ant-card-small">
176+
<div class="ant-card-head">
177+
<div class="ant-card-head-wrapper">
178+
<div class="ant-card-head-title">Pushes open the window</div>
179+
<!---->
180+
</div>
181+
<!---->
182+
</div>
183+
<!---->
184+
<div class="ant-card-body">and raises the spyglass.</div>
165185
<!---->
166186
</div>
167-
<!---->
187+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
188+
<div class="ant-ribbon-corner"></div>
189+
</div>
168190
</div>
169-
<!---->
170-
<div class="ant-card-body">and raises the spyglass.</div>
171-
<!---->
172-
</div>
173-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"><span class="ant-ribbon-text">Hippies</span>
174-
<div class="ant-ribbon-corner"></div>
175191
</div>
176-
</div>
177-
<div class="ant-ribbon-wrapper ">
178-
<div class="ant-card ant-card-bordered ant-card-small">
179-
<div class="ant-card-head">
180-
<div class="ant-card-head-wrapper">
181-
<div class="ant-card-head-title">Pushes open the window</div>
192+
<!---->
193+
<div class="ant-space-item" style="margin-bottom: 8px;">
194+
<div class="ant-ribbon-wrapper ">
195+
<div class="ant-card ant-card-bordered ant-card-small">
196+
<div class="ant-card-head">
197+
<div class="ant-card-head-wrapper">
198+
<div class="ant-card-head-title">Pushes open the window</div>
199+
<!---->
200+
</div>
201+
<!---->
202+
</div>
182203
<!---->
204+
<div class="ant-card-body">and raises the spyglass.</div>
205+
<!---->
206+
</div>
207+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
208+
<div class="ant-ribbon-corner"></div>
183209
</div>
184-
<!---->
185210
</div>
186-
<!---->
187-
<div class="ant-card-body">and raises the spyglass.</div>
188-
<!---->
189211
</div>
190-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"><span class="ant-ribbon-text">Hippies</span>
191-
<div class="ant-ribbon-corner"></div>
192-
</div>
193-
</div>
194-
<div class="ant-ribbon-wrapper ">
195-
<div class="ant-card ant-card-bordered ant-card-small">
196-
<div class="ant-card-head">
197-
<div class="ant-card-head-wrapper">
198-
<div class="ant-card-head-title">Pushes open the window</div>
212+
<!---->
213+
<div class="ant-space-item" style="margin-bottom: 8px;">
214+
<div class="ant-ribbon-wrapper ">
215+
<div class="ant-card ant-card-bordered ant-card-small">
216+
<div class="ant-card-head">
217+
<div class="ant-card-head-wrapper">
218+
<div class="ant-card-head-title">Pushes open the window</div>
219+
<!---->
220+
</div>
221+
<!---->
222+
</div>
223+
<!---->
224+
<div class="ant-card-body">and raises the spyglass.</div>
199225
<!---->
200226
</div>
201-
<!---->
227+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
228+
<div class="ant-ribbon-corner"></div>
229+
</div>
202230
</div>
203-
<!---->
204-
<div class="ant-card-body">and raises the spyglass.</div>
205-
<!---->
206-
</div>
207-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"><span class="ant-ribbon-text">Hippies</span>
208-
<div class="ant-ribbon-corner"></div>
209231
</div>
210-
</div>
211-
<div class="ant-ribbon-wrapper ">
212-
<div class="ant-card ant-card-bordered ant-card-small">
213-
<div class="ant-card-head">
214-
<div class="ant-card-head-wrapper">
215-
<div class="ant-card-head-title">Pushes open the window</div>
232+
<!---->
233+
<div class="ant-space-item">
234+
<div class="ant-ribbon-wrapper ">
235+
<div class="ant-card ant-card-bordered ant-card-small">
236+
<div class="ant-card-head">
237+
<div class="ant-card-head-wrapper">
238+
<div class="ant-card-head-title">Pushes open the window</div>
239+
<!---->
240+
</div>
241+
<!---->
242+
</div>
216243
<!---->
244+
<div class="ant-card-body">and raises the spyglass.</div>
245+
<!---->
246+
</div>
247+
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
248+
<div class="ant-ribbon-corner"></div>
217249
</div>
218-
<!---->
219250
</div>
220-
<!---->
221-
<div class="ant-card-body">and raises the spyglass.</div>
222-
<!---->
223-
</div>
224-
<div class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"><span class="ant-ribbon-text">Hippies</span>
225-
<div class="ant-ribbon-corner"></div>
226251
</div>
252+
<!---->
227253
</div>
228254
`;
229255
@@ -234,15 +260,18 @@ exports[`renders ./components/badge/demo/status.vue correctly 1`] = `
234260
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text"><!----></span></span>
235261
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text"><!----></span></span>
236262
<br>
237-
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span>
238-
<br>
239-
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span>
240-
<br>
241-
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span>
242-
<br>
243-
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span>
244-
<br>
245-
<span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span>
263+
<div class="ant-space ant-space-vertical">
264+
<div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-success"></span><span class="ant-badge-status-text">Success</span></span></div>
265+
<!---->
266+
<div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-error"></span><span class="ant-badge-status-text">Error</span></span></div>
267+
<!---->
268+
<div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-default"></span><span class="ant-badge-status-text">Default</span></span></div>
269+
<!---->
270+
<div class="ant-space-item" style="margin-bottom: 8px;"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Processing</span></span></div>
271+
<!---->
272+
<div class="ant-space-item"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-warning"></span><span class="ant-badge-status-text">warning</span></span></div>
273+
<!---->
274+
</div>
246275
`;
247276
248277
exports[`renders ./components/badge/demo/title.vue correctly 1`] = `

‎components/badge/style/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
178178
backgroundColor: token.colorSuccess,
179179
},
180180
[`${componentCls}-status-processing`]: {
181-
position: 'relative',
181+
overflow: 'visible',
182182
color: token.colorPrimary,
183183
backgroundColor: token.colorPrimary,
184184

0 commit comments

Comments
 (0)