Skip to content

Commit fc21fc0

Browse files
aramos-adobearamos-adobe
committed
feat(infieldprogress): add new component
1 parent e0732b6 commit fc21fc0

File tree

13 files changed

+189
-42
lines changed

13 files changed

+189
-42
lines changed

‎components/infieldprogresscircle/README.md

Lines changed: 7 additions & 0 deletions
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/infieldprogresscircle).

‎components/infieldprogresscircle/index.css

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*!
2+
Copyright 2023 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+
@import "./themes/express.css";
14+
15+
.spectrum-InfieldProgresscircle {
16+
--mod-progress-circle-thickness: var(--mod-progress-cirlce-stroke-width, 2px);
17+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100);
18+
}
19+
20+
.spectrum-InfieldProgresscircle--sizeS {
21+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75);
22+
}
23+
24+
.spectrum-InfieldProgresscircle--sizeL {
25+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200);
26+
}
27+
28+
.spectrum-InfieldProgresscircle--sizeXL {
29+
--mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300);
30+
}
31+
32+
.spectrum-InfieldProgresscircle {
33+
padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill);
34+
35+
.spectrum-ProgressCircle-fill {
36+
stroke-linecap: square;
37+
}
38+
}
39+
40+
@media (forced-colors: active) {
41+
.spectrum-InfieldProgresscircle {
42+
--highcontrast-infieldprogresscircle-content-color-default: CanvasText;
43+
44+
forced-color-adjust: none;
45+
}
46+
}

‎components/infieldprogresscircle/metadata/infieldprogresscircle.yml

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: infield progress circle
2+
status: Verified
3+
SpectrumSiteSlug: https://spectrum.adobe.com/page/infield-progress-circle/
4+
examples:
5+
- id: infieldprogresscircle-sizing
6+
name: Sizing
7+
markup: |
8+
<div class="spectrum-Examples">
9+
<div class="spectrum-Examples-item">
10+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
11+
<!-- Component mark-up goes here -->
12+
</div>
13+
<div class="spectrum-Examples-item">
14+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>
15+
<!-- Component mark-up goes here -->
16+
</div>
17+
<div class="spectrum-Examples-item">
18+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
19+
<!-- Component mark-up goes here -->
20+
</div>
21+
<div class="spectrum-Examples-item">
22+
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
23+
<!-- Component mark-up goes here -->
24+
</div>
25+
</div>

‎components/infieldprogresscircle/metadata/mods.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
| Modifiable custom properties |
2+
| ------------------------------------ |
3+
| `--mod-progress-cirlce-stroke-width` |

‎components/infieldprogresscircle/package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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/infieldprogresscircle",
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+
"main": "dist/index.css",
17+
"files": [
18+
"dist/*",
19+
"CHANGELOG.md",
20+
"package.json",
21+
"stories/template.js",
22+
"metadata/mods.md"
23+
],
24+
"keywords": [
25+
"spectrum",
26+
"css",
27+
"design system",
28+
"adobe"
29+
],
30+
"peerDependencies": {
31+
"@spectrum-css/tokens": ">=14"
32+
},
33+
"publishConfig": {
34+
"access": "public"
35+
}
36+
}

‎components/infieldprogresscircle/project.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
"test": {
12+
"defaultConfiguration": "scope"
13+
},
14+
"validate": {}
15+
}
16+
}

‎components/progresscircle/stories/infield-progresscirlce.stories.js renamed to ‎components/infieldprogresscircle/stories/infieldprogresscircle.stories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Template } from "./infield-progresscirlce.template.js";
2-
import { default as ProgressCircle } from "./progresscircle.stories.js";
1+
import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js";
2+
import { Template } from "./template.js";
33

44
/**
55
* 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.

‎components/infieldprogresscircle/stories/template.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js";
2+
import "../index.css";
3+
4+
export const Template = ({
5+
customClasses = [],
6+
rootClass,
7+
size = "m",
8+
...item
9+
} = {}, context = {}) => ProgressCircle({
10+
customClasses: [
11+
rootClass = "spectrum-InfieldProgresscircle",
12+
typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
13+
...customClasses
14+
].filter(Boolean),
15+
size,
16+
...item
17+
}, context );
18+

‎components/infieldprogresscircle/themes/express.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/*!
2+
Copyright 2023 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+
@import "./spectrum.css";
14+
15+
@container (--system: express) {}

‎components/infieldprogresscircle/themes/spectrum.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*!
2+
Copyright 2023 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+
@container (--system: spectrum) {}

‎components/progresscircle/index.css

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -95,28 +95,6 @@ governing permissions and limitations under the License.
9595
}
9696
}
9797

98-
.spectrum-ProgressCircle--infield {
99-
--spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small);
100-
--spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100);
101-
padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill);
102-
103-
&.spectrum-ProgressCircle--sizeS {
104-
--spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75);
105-
}
106-
107-
&.spectrum-ProgressCircle--sizeL {
108-
--spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200);
109-
}
110-
111-
&.spectrum-ProgressCircle--sizeXL {
112-
--spectrum-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300);
113-
}
114-
115-
.spectrum-ProgressCircle-fill {
116-
stroke-linecap: square;
117-
}
118-
}
119-
12098
/* windows high contrast mode */
12199
@media (forced-colors: active) {
122100
.spectrum-ProgressCircle {

‎components/progresscircle/stories/infield-progresscirlce.template.js

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎yarn.lock

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3629,6 +3629,14 @@ __metadata:
36293629
languageName: unknown
36303630
linkType: soft
36313631

3632+
"@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle":
3633+
version: 0.0.0-use.local
3634+
resolution: "@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle"
3635+
peerDependencies:
3636+
"@spectrum-css/tokens": ">=14"
3637+
languageName: unknown
3638+
linkType: soft
3639+
36323640
"@spectrum-css/inlinealert@workspace:components/inlinealert":
36333641
version: 0.0.0-use.local
36343642
resolution: "@spectrum-css/inlinealert@workspace:components/inlinealert"

0 commit comments

Comments
 (0)