Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 8648b82

Browse files
material-web-copybaracopybara-github
material-web-copybara
authored and
copybara-github
committed
feat(circular-progress): do not require HTML without whitespaces
PiperOrigin-RevId: 342008285
1 parent 7bbfad1 commit 8648b82

File tree

3 files changed

+37
-17
lines changed

3 files changed

+37
-17
lines changed

‎packages/mdc-circular-progress/README.md‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,13 @@ npm install @material/circular-progress
4444
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4545
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
4646
</svg>
47-
</div><div class="mdc-circular-progress__gap-patch">
47+
</div>
48+
<div class="mdc-circular-progress__gap-patch">
4849
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4950
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.2"/>
5051
</svg>
51-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
52+
</div>
53+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
5254
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
5355
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
5456
</svg>
@@ -57,7 +59,6 @@ npm install @material/circular-progress
5759
</div>
5860
</div>
5961
```
60-
> _IMPORTANT_: Do not introduce space between the adjacent `</div><div>` tags above. Doing so will produce unwanted visual artifacts.
6162

6263
### Accessibility
6364

@@ -111,11 +112,13 @@ See [baseline template](#HTML-Structure) above.
111112
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
112113
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="3"/>
113114
</svg>
114-
</div><div class="mdc-circular-progress__gap-patch">
115+
</div>
116+
<div class="mdc-circular-progress__gap-patch">
115117
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
116118
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="2.4"/>
117119
</svg>
118-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
120+
</div>
121+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
119122
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
120123
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27" stroke-width="3"/>
121124
</svg>
@@ -140,11 +143,13 @@ See [baseline template](#HTML-Structure) above.
140143
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
141144
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2.5"/>
142145
</svg>
143-
</div><div class="mdc-circular-progress__gap-patch">
146+
</div>
147+
<div class="mdc-circular-progress__gap-patch">
144148
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
145149
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2"/>
146150
</svg>
147-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
151+
</div>
152+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
148153
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
149154
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489" stroke-width="2.5"/>
150155
</svg>
@@ -172,11 +177,13 @@ This is done instead of animating the color property to reduce browser repaints.
172177
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
173178
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
174179
</svg>
175-
</div><div class="mdc-circular-progress__gap-patch">
180+
</div>
181+
<div class="mdc-circular-progress__gap-patch">
176182
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
177183
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.8"/>
178184
</svg>
179-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
185+
</div>
186+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
180187
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
181188
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
182189
</svg>

‎packages/mdc-circular-progress/_mixins.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@
7979

8080
.mdc-circular-progress__indeterminate-container {
8181
@include feature-targeting.targets($feat-structure) {
82+
// Font size, letter spacing and nowrap are required in order to ignore
83+
// whitespaces between HTML elements.
84+
font-size: 0;
85+
letter-spacing: 0;
86+
white-space: nowrap;
8287
opacity: 0;
8388
}
8489
}

‎packages/mdc-circular-progress/test/component.test.ts‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,13 @@ function getFixture() {
4040
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4141
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
4242
</svg>
43-
</div><div class="mdc-circular-progress__gap-patch">
43+
</div>
44+
<div class="mdc-circular-progress__gap-patch">
4445
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4546
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.8"/>
4647
</svg>
47-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
48+
</div>
49+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
4850
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
4951
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
5052
</svg>
@@ -56,11 +58,13 @@ function getFixture() {
5658
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
5759
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
5860
</svg>
59-
</div><div class="mdc-circular-progress__gap-patch">
61+
</div>
62+
<div class="mdc-circular-progress__gap-patch">
6063
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
6164
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.8"/>
6265
</svg>
63-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
66+
</div>
67+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
6468
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
6569
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
6670
</svg>
@@ -72,11 +76,13 @@ function getFixture() {
7276
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
7377
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
7478
</svg>
75-
</div><div class="mdc-circular-progress__gap-patch">
79+
</div>
80+
<div class="mdc-circular-progress__gap-patch">
7681
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
7782
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.8"/>
7883
</svg>
79-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
84+
</div>
85+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
8086
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
8187
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
8288
</svg>
@@ -88,11 +94,13 @@ function getFixture() {
8894
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
8995
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
9096
</svg>
91-
</div><div class="mdc-circular-progress__gap-patch">
97+
</div>
98+
<div class="mdc-circular-progress__gap-patch">
9299
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
93100
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="3.8"/>
94101
</svg>
95-
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
102+
</div>
103+
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
96104
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
97105
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549" stroke-width="4"/>
98106
</svg>

0 commit comments

Comments
 (0)