Skip to content

Commit ce2f3e0

Browse files
aramos-adobecastastrophe
aramos-adobe
authored and
castastrophe
committed
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 8eb6704 commit ce2f3e0

File tree

22 files changed

+362
-74
lines changed

22 files changed

+362
-74
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.

‎.github/QUICK-START.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Spectrum CSS components utilize custom properties in order to change themes and
1616
<html class="spectrum spectrum--medium spectrum--light"></html>
1717
```
1818

19-
Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
19+
Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag:
2020

2121
```html
2222
<head>

‎.storybook/blocks/utilities.js

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json";
21
import spectrum from "@spectrum-css/tokens/dist/json/tokens.json";
32

43
import { useTheme } from "@storybook/theming";
@@ -70,9 +69,8 @@ function fetchTheme({ color, scale, context } = {}) {
7069

7170
// Create a platform context based on the scale (platform used in the token data)
7271
const platform = scale === "medium" ? "desktop" : "mobile";
73-
const tokens = context === "spectrum" ? spectrum : legacy;
7472

75-
return { color, scale, context, platform, tokens };
73+
return { color, scale, context, platform, tokens: spectrum };
7674
}
7775

7876
/**

‎README.md

+1-43
Original file line numberDiff line numberDiff line change
@@ -52,17 +52,6 @@ Spectrum CSS components have build output that is designed to be used in a varie
5252

5353
- `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens).
5454

55-
- This file loads the `.spectrum`, `.spectrum--legacy`, and `.spectrum--express` contexts which are used to toggle components between different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default.
56-
57-
- `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts.
58-
59-
- If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum-two.css` from the `themes` directory to render the default Spectrum visual language.
60-
- The `.spectrum--legacy` context represents the previous version of Spectrum (also known as Spectrum 1). This means if you only want to use the legacy context, you should load `themes/spectrum.css`. **deprecated**
61-
- The `.spectrum--express` context represents the subtheme of Spectrum 1 called Express . This means if you only want to use the Express context, you should load `themes/express.css`. **deprecated**
62-
- This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/spectrum-two.css` assets.
63-
64-
- `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself.
65-
6655
<sup><a name="token-footnote">1</a></sup>: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties.
6756

6857
#### Including assets
@@ -73,29 +62,10 @@ Start by including the base set of variables:
7362
/* Include tokens */
7463
@import "node_modules/@spectrum-css/tokens/dist/index.css";
7564

76-
/*
77-
For components with no other contexts available, load the
78-
index.css file from the component's package. These are components
79-
that do not have a spectrum or express context available.
80-
*/
8165
@import "node_modules/@spectrum-css/page/dist/index.css";
8266
@import "node_modules/@spectrum-css/typography/dist/index.css";
8367
@import "node_modules/@spectrum-css/icon/dist/index.css";
84-
85-
/*
86-
Recommended: For components with multiple contexts available, if you
87-
want access to all contexts, load the index.css file, which includes
88-
all contexts and component variables.
89-
*/
9068
@import "node_modules/@spectrum-css/button/dist/index.css";
91-
92-
/*
93-
If you only need the spectrum visual context: For components with
94-
multiple contexts available, load only the spectrum context by sourcing
95-
index-base.css and the spectrum theme from the themes directory.
96-
*/
97-
@import "node_modules/@spectrum-css/button/dist/index-base.css";
98-
@import "node_modules/@spectrum-css/button/dist/themes/spectrum.css";
9969
```
10070

10171
Tokens values are mapped to context-specific classes which can be applied to the `<html>` element or any place in your DOM where you wish to encapsulate or alter the visual language of your Spectrum components.
@@ -106,9 +76,7 @@ All contexts you want to use must be defined in order to load all the appropriat
10676

10777
##### Visual language
10878

109-
- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 foundations visual language.
110-
- `.spectrum--legacy` - The legacy Spectrum 1 visual language. _This visual language will be deprecated in Spectrum 2_.
111-
- `.spectrum--express` - A variant of the standard visual language. _This visual language will be deprecated in Spectrum 2_.
79+
- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 visual language.
11280

11381
##### Scales
11482

@@ -134,16 +102,6 @@ Put together, we would define the context for our application in the following w
134102
<html class="spectrum spectrum--medium spectrum--light"></html>
135103
```
136104

137-
To switch to Express, **add** the `.spectrum--express` class to the `<html>` element:
138-
139-
```html
140-
<html
141-
class="spectrum spectrum--medium spectrum--light spectrum--express"
142-
></html>
143-
```
144-
145-
Note the `spectrum--legacy` or `spectrum--express` class is added to the existing classes; `spectrum` should always be present to ensure the correct visual language is loaded.
146-
147105
Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context.
148106

149107
### Modifying components

‎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,

‎components/infieldprogresscircle/README.md

+7
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.

‎components/infieldprogresscircle/dist/metadata.json

+25
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+
}

‎components/infieldprogresscircle/index.css

+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+
}

‎components/infieldprogresscircle/package.json

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
"peerDependenciesMeta": {
53+
"@spectrum-css/tokens": {
54+
"optional": true
55+
}
56+
}
57+
}

‎components/infieldprogresscircle/project.json

+17
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+
}

0 commit comments

Comments
 (0)