Skip to content

Commit db2a5dd

Browse files
aramos-adobecastastrophe
authored andcommitted
feat(infield-progress-cirlce): new component, sharing tokens from progress circle (#3430)
* feat(infieldprogress): add new component feat(infieldcircle): new component feat(ifpc): updating template and vrts chore(ifpc): updating story changes chore(ifpc): cleaning up build files feat(ifpc): add infield loader to components feat(infieldprogress): add new component feat(ifpc): updating template and vrts feat(ifpc): updating package, story, template chore(ifpc): spectrum two updates chore(ifpc): adding dist files chore(ifpc): changing button id chore(ifpc): updating bundle chore(ifpc): updating package chore(ifpc): testing out files chore(ifpc): adding missing dist files chore(ifpc): removing index css in dist fix(ifpc): fixing typos fix(ifpc): update mods in changeset chore(ifpc): removing mods from ifpc components in changeset * chore(ifpc): update package json)
1 parent ea870a1 commit db2a5dd

File tree

17 files changed

+350
-21
lines changed

17 files changed

+350
-21
lines changed

.changeset/flat-snails-admire.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@spectrum-css/infieldprogresscircle": major
3+
---
4+
5+
## Infield Progresscircle S2 Migration
6+
7+
In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness.

components/button/stories/template.js

+7-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
2+
import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js";
23
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
3-
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
44
import { html } from "lit";
55
import { classMap } from "lit/directives/class-map.js";
66
import { ifDefined } from "lit/directives/if-defined.js";
@@ -89,15 +89,12 @@ export const Template = ({
8989
Icon({ iconName, setName: iconSet, size }, context)
9090
)}
9191
${when(isPending, () =>
92-
ProgressCircle(
93-
{
94-
size: "s",
95-
testId: "progress-circle",
96-
staticColor,
97-
isIndeterminate: true,
98-
},
99-
context
100-
)
92+
InfieldProgressCircle({
93+
size: size,
94+
staticColor,
95+
isIndeterminate: true,
96+
testId: "infield-progress-circle"
97+
}, context)
10198
)}
10299
</button>
103100
`;

components/combobox/stories/template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const Combobox = ({
6363
],
6464
customInputClasses: [`${rootClass}-input`],
6565
isLoading,
66-
customProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
66+
customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"],
6767
name: "field",
6868
isReadOnly,
6969
value,
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# @spectrum-css/infieldprogresscircle
2+
3+
> The Spectrum CSS infield progress circle component
4+
5+
This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css).
6+
7+
See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"sourceFile": "index.css",
3+
"selectors": [
4+
".spectrum-InfieldProgressCircle",
5+
".spectrum-InfieldProgressCircle .spectrum-ProgressCircle-fill",
6+
".spectrum-InfieldProgressCircle--sizeL",
7+
".spectrum-InfieldProgressCircle--sizeS",
8+
".spectrum-InfieldProgressCircle--sizeXL"
9+
],
10+
"modifiers": [],
11+
"component": [
12+
"--spectrum-in-field-progress-circle-edge-to-fill",
13+
"--spectrum-in-field-progress-circle-size-100",
14+
"--spectrum-in-field-progress-circle-size-200",
15+
"--spectrum-in-field-progress-circle-size-300",
16+
"--spectrum-in-field-progress-circle-size-75",
17+
"--spectrum-infieldprogresscircle-padding-block"
18+
],
19+
"global": ["--spectrum-progress-circle-thickness-small"],
20+
"passthroughs": [
21+
"--mod-progress-circle-size",
22+
"--mod-progress-circle-thickness"
23+
],
24+
"high-contrast": []
25+
}
+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*!
2+
Copyright 2025 Adobe. All rights reserved.
3+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License. You may obtain a copy
5+
of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
7+
Unless required by applicable law or agreed to in writing, software distributed under
8+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
OF ANY KIND, either express or implied. See the License for the specific language
10+
governing permissions and limitations under the License.
11+
*/
12+
13+
.spectrum-InfieldProgressCircle {
14+
--mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
15+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100);
16+
--spectrum-infieldprogresscircle-padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill);
17+
}
18+
19+
.spectrum-InfieldProgressCircle--sizeS {
20+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75);
21+
}
22+
23+
.spectrum-InfieldProgressCircle--sizeL {
24+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200);
25+
}
26+
27+
.spectrum-InfieldProgressCircle--sizeXL {
28+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300);
29+
}
30+
31+
.spectrum-InfieldProgressCircle {
32+
padding-block: var(--spectrum-infieldprogresscircle-padding-block);
33+
34+
.spectrum-ProgressCircle-fill {
35+
stroke-linecap: square;
36+
}
37+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"name": "@spectrum-css/infieldprogresscircle",
3+
"version": "0.0.0",
4+
"description": "The Spectrum CSS infieldprogresscircle component",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-in-field-progress-circle--docs",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-css.git",
11+
"directory": "components/infieldprogresscircle"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"exports": {
17+
".": "./dist/index.css",
18+
"./*.md": "./*.md",
19+
"./dist/*": "./dist/*",
20+
"./index-*.css": "./dist/index-*.css",
21+
"./index.css": "./dist/index.css",
22+
"./metadata.json": "./dist/metadata.json",
23+
"./package.json": "./package.json",
24+
"./stories/*": "./stories/*"
25+
},
26+
"main": "dist/index.css",
27+
"peerDependencies": {
28+
"@spectrum-css/tokens": ">=16"
29+
},
30+
"devDependencies": {
31+
"@spectrum-css/tokens": "16.0.0"
32+
},
33+
"keywords": [
34+
"design-system",
35+
"spectrum",
36+
"spectrum-css",
37+
"adobe",
38+
"adobe-spectrum",
39+
"component",
40+
"css"
41+
],
42+
"publishConfig": {
43+
"access": "public"
44+
},
45+
"spectrum": [
46+
{
47+
"guidelines": "https://spectrum.adobe.com/page/progress-circle",
48+
"rootClass": "spectrum-InfieldProgressCircle",
49+
"swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/"
50+
}
51+
]
52+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
3+
"name": "infieldprogresscircle",
4+
"tags": ["component"],
5+
"targets": {
6+
"build": {},
7+
"clean": {},
8+
"compare": {},
9+
"format": {},
10+
"lint": {},
11+
"report": {},
12+
"test": {
13+
"defaultConfiguration": "scope"
14+
},
15+
"validate": {}
16+
}
17+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import { Sizes } from "@spectrum-css/preview/decorators";
2+
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3+
import { size } from "@spectrum-css/preview/types";
4+
import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js";
5+
import metadata from "../dist/metadata.json";
6+
import packageJson from "../package.json";
7+
import { InfieldProgressCircleGroup } from "./infieldprogresscircle.test.js";
8+
import { Template } from "./template.js";
9+
10+
/**
11+
* In-field progress circles are used in t-shirt size components such as [buttons](/docs/components-button--docs), [combo boxes](/docs/components-combobox--docs), and [pickers](/docs/components-picker--docs). The in-field progress circle can be used in place of an icon or in tight spaces when space is limited both vertically and horizontally.
12+
*/
13+
14+
export default {
15+
title: "In-field progress circle",
16+
component: "InfieldProgressCircle",
17+
argTypes: {
18+
...ProgressCircle.argTypes,
19+
size: size(["s", "m", "l", "xl"]),
20+
},
21+
args: {
22+
...ProgressCircle.args,
23+
rootClass: "spectrum-InfieldProgressCircle",
24+
},
25+
parameters: {
26+
...ProgressCircle.parameters,
27+
design: {
28+
type: "figma",
29+
url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=14970-6050",
30+
},
31+
packageJson,
32+
metadata,
33+
}
34+
};
35+
36+
export const Default = InfieldProgressCircleGroup.bind({});
37+
Default.args = {};
38+
39+
// ********* VRT ONLY ********* //
40+
export const WithForcedColors = InfieldProgressCircleGroup.bind({});
41+
WithForcedColors.args = Default.args;
42+
WithForcedColors.tags = ["!autodocs", "!dev"];
43+
WithForcedColors.parameters = {
44+
chromatic: {
45+
forcedColors: "active",
46+
modes: disableDefaultModes,
47+
},
48+
};
49+
50+
// ********* DOCS ONLY ********* //
51+
52+
export const Sizing = (args, context) => Sizes({
53+
Template,
54+
withHeading: false,
55+
withBorder: false,
56+
...args,
57+
}, context);
58+
Sizing.args = {};
59+
Sizing.tags = ["!dev"];
60+
Sizing.parameters = {
61+
chromatic: { disableSnapshot: true },
62+
};
63+
64+
/**
65+
* The indeterminate progress circle displays a repeating animation for the inner fill.
66+
*/
67+
export const Indeterminate = (args, context) => Sizes({
68+
Template,
69+
withHeading: false,
70+
withBorder: false,
71+
...args,
72+
}, context);
73+
Indeterminate.args = {
74+
isIndeterminate: true,
75+
};
76+
Indeterminate.tags = ["!dev"];
77+
Indeterminate.parameters = {
78+
chromatic: { disableSnapshot: true },
79+
};
80+
81+
export const StaticWhiteDeterminate = Sizing.bind({});
82+
StaticWhiteDeterminate.tags = ["!dev"];
83+
StaticWhiteDeterminate.storyName = "Static white, default";
84+
StaticWhiteDeterminate.args = {
85+
staticColor: "white",
86+
};
87+
StaticWhiteDeterminate.parameters = {
88+
chromatic: { disableSnapshot: true },
89+
};
90+
91+
export const StaticWhiteIndeterminate = Sizing.bind({});
92+
StaticWhiteIndeterminate.tags = ["!dev"];
93+
StaticWhiteIndeterminate.storyName = "Static white, indeterminate";
94+
StaticWhiteIndeterminate.args = {
95+
staticColor: "white",
96+
isIndeterminate: true,
97+
};
98+
StaticWhiteIndeterminate.parameters = {
99+
chromatic: { disableSnapshot: true },
100+
};
101+
102+
export const StaticBlackDeterminate = Sizing.bind({});
103+
StaticBlackDeterminate.tags = ["!dev"];
104+
StaticBlackDeterminate.storyName = "Static black, default";
105+
StaticBlackDeterminate.args = {
106+
staticColor: "black",
107+
};
108+
StaticBlackDeterminate.parameters = {
109+
chromatic: { disableSnapshot: true },
110+
};
111+
112+
export const StaticBlackIndeterminate = Sizing.bind({});
113+
StaticBlackIndeterminate.tags = ["!dev"];
114+
StaticBlackIndeterminate.storyName = "Static black, indeterminate";
115+
StaticBlackIndeterminate.args = {
116+
staticColor: "black",
117+
isIndeterminate: true,
118+
};
119+
StaticBlackIndeterminate.parameters = {
120+
chromatic: { disableSnapshot: true },
121+
};
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Variants } from "@spectrum-css/preview/decorators";
2+
import { Template } from "./template.js";
3+
4+
export const InfieldProgressCircleGroup = Variants({
5+
Template,
6+
testData: [
7+
{
8+
testHeading: "Default",
9+
},
10+
{
11+
testHeading: "Static white",
12+
staticColor: "white",
13+
},
14+
{
15+
testHeading: "Static black",
16+
staticColor: "black",
17+
},
18+
],
19+
stateData: [
20+
{
21+
testHeading: "Indeterminate",
22+
isIndeterminate: true,
23+
}
24+
]
25+
});
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
2+
import { capitalize } from "lodash-es";
3+
import "../index.css";
4+
5+
export const Template = ({
6+
customClasses = [],
7+
rootClass = "spectrum-InfieldProgressCircle",
8+
size = "m",
9+
staticColor,
10+
...item
11+
} = {}, context = {}) => ProgressCircle({
12+
customClasses: [
13+
rootClass,
14+
typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
15+
typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
16+
...customClasses
17+
].filter(Boolean),
18+
size,
19+
staticColor,
20+
...item
21+
}, context );

components/picker/stories/template.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
22
import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
33
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
4+
import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js";
45
import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
56
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
6-
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
77
import { Template as Switch } from "@spectrum-css/switch/stories/template.js";
88
import { html } from "lit";
99
import { classMap } from "lit/directives/class-map.js";
@@ -78,8 +78,8 @@ export const Picker = ({
7878
}
7979
<span class="${rootClass}-label is-placeholder">${placeholder}</span>
8080
${when(isLoading, () =>
81-
ProgressCircle({
82-
size: "s",
81+
InfieldProgressCircle({
82+
size: size,
8383
isIndeterminate: true,
8484
}, context)
8585
)}

0 commit comments

Comments
 (0)