Skip to content

Commit 4c4ddb8

Browse files
committed
feat(progresscircle): resolving comments
1 parent de0b23f commit 4c4ddb8

File tree

3 files changed

+20
-32
lines changed

3 files changed

+20
-32
lines changed

components/progresscircle/dist/metadata.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".spectrum-Circle",
54
".spectrum-ProgressCircle",
65
".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill",
76
".spectrum-ProgressCircle--sizeL",
@@ -46,7 +45,6 @@
4645
"passthroughs": [],
4746
"high-contrast": [
4847
"--highcontrast-progress-circle-fill-border-color",
49-
"--highcontrast-progress-circle-fill-border-color-over-background",
50-
"--highcontrast-progressbar-track-color"
48+
"--highcontrast-progress-circle-track-color"
5149
]
5250
}

components/progresscircle/index.css

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -34,30 +34,6 @@ governing permissions and limitations under the License.
3434
--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large);
3535
}
3636

37-
.spectrum-Circle {
38-
fill: none;
39-
}
40-
41-
/* windows high contrast mode */
42-
@media (forced-colors: active) {
43-
.spectrum-ProgressCircle {
44-
/* fill is bright color */
45-
--highcontrast-progress-circle-fill-border-color: Highlight;
46-
}
47-
48-
.spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) {
49-
.spectrum-innerCircle {
50-
stroke: CanvasText;
51-
}
52-
53-
.spectrum-outerCircle {
54-
border: 1px solid;
55-
border-color: CanvasText;
56-
border-radius: 50%;
57-
}
58-
}
59-
}
60-
6137
.spectrum-ProgressCircle {
6238
display: inline-block;
6339
inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size));
@@ -89,7 +65,7 @@ governing permissions and limitations under the License.
8965

9066
.spectrum-ProgressCircle-track {
9167
stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness));
92-
stroke: var(--highcontrast-progressbar-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)));
68+
stroke: var(--highcontrast-progress-circle-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)));
9369
}
9470

9571
/* circle progress filled */
@@ -105,8 +81,8 @@ governing permissions and limitations under the License.
10581
.spectrum-ProgressCircle-fill {
10682
will-change: transform;
10783
animation:
108-
1s cubic-bezier(.6, .1, .3, .9) infinite spectrum-fills-rotate,
109-
1s cubic-bezier(.25, .1, .25, 1.3) infinite spectrum-dashoffset-animation;
84+
1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite spectrum-fills-rotate,
85+
1s cubic-bezier(0.25, 0.1, 0.25, 1.3) infinite spectrum-dashoffset-animation;
11086
transform-origin: center;
11187
}
11288
}
@@ -116,8 +92,18 @@ governing permissions and limitations under the License.
11692
.spectrum-ProgressCircle {
11793
/* fill is bright color */
11894
--highcontrast-progress-circle-fill-border-color: Highlight;
95+
--highcontrast-progress-circle-track-color: Background;
96+
}
97+
98+
.spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) {
99+
.spectrum-innerCircle {
100+
stroke: CanvasText;
101+
}
119102

120-
/* fill over background is bright color */
121-
--highcontrast-progress-circle-fill-border-color-over-background: Highlight;
103+
.spectrum-outerCircle {
104+
border: 1px solid;
105+
border-color: CanvasText;
106+
border-radius: 50%;
107+
}
122108
}
123109
}

components/progresscircle/stories/progresscircle.test.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export const ProgressCircleGroup = Variants({
1111
testHeading: "Static white",
1212
staticColor: "white",
1313
},
14+
{
15+
testHeading: "Static black",
16+
staticColor: "black",
17+
},
1418
],
1519
stateData: [
1620
{

0 commit comments

Comments
 (0)