Skip to content

Commit 7f6b095

Browse files
aramos-adobearamos-adobe
committed
Merge branch 'main' into aramos-adobe/css868-combobox-readonly
2 parents c226f6b + 50372e0 commit 7f6b095

File tree

10 files changed

+320
-132
lines changed

10 files changed

+320
-132
lines changed

‎.storybook/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@
5858
"chromatic": "^11.12.5",
5959
"lit": "^3.2.0",
6060
"lodash-es": "^4.17.21",
61-
"npm-registry-fetch": "^17.0.1",
61+
"npm-registry-fetch": "^18.0.1",
6262
"postcss": "^8.4.45",
6363
"prettier": "^3.2.5",
6464
"react": "^18.3.1",
6565
"react-dom": "^18.3.1",
6666
"react-syntax-highlighter": "^15.5.0",
6767
"rollup-plugin-postcss-lit": "^2.1.0",
6868
"storybook": "^8.3.5",
69-
"vite": "^5.4.6"
69+
"vite": "^5.4.9"
7070
}
7171
}

‎.vscode/extensions.json

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
{
22
"recommendations": [
3-
"rajdeepchandra.spectrum-design-tokens-for-vscode",
4-
"gruntfuggly.todo-tree",
5-
"nrwl.angular-console",
6-
"esbenp.prettier-vscode",
7-
"dbaeumer.vscode-eslint",
8-
"vunguyentuan.vscode-postcss",
9-
"mariusschulz.yarn-lock-syntax",
10-
"stylelint.vscode-stylelint",
11-
"joshbolduc.story-explorer",
12-
"bierner.lit-html",
133
"atlassian.atlascode",
14-
"github.vscode-pull-request-github",
15-
"me-dutour-mathieu.vscode-github-actions",
4+
"bierner.color-info",
5+
"bierner.lit-html",
6+
"dbaeumer.vscode-eslint",
7+
"esbenp.prettier-vscode",
8+
"figma.figma-vscode-extension",
9+
"github.copilot",
10+
"github.copilot-chat",
1611
"github.vscode-github-actions",
12+
"github.vscode-pull-request-github",
13+
"gruntfuggly.todo-tree",
14+
"joshbolduc.story-explorer",
1715
"kisstkondoros.csstriggers",
18-
"vunguyentuan.vscode-css-variables"
16+
"mariusschulz.yarn-lock-syntax",
17+
"me-dutour-mathieu.vscode-github-actions",
18+
"nrwl.angular-console",
19+
"oouo-diogo-perdigao.docthis",
20+
"rajdeepchandra.spectrum-design-tokens-for-vscode",
21+
"stylelint.vscode-stylelint",
22+
"vunguyentuan.vscode-css-variables",
23+
"vunguyentuan.vscode-postcss"
1924
]
2025
}

‎.vscode/settings.json

Lines changed: 92 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
2-
"js/ts.implicitProjectConfig.experimentalDecorators": true,
32
"[css]": {
3+
"editor.codeActionsOnSave": {
4+
"source.fixAll.stylelint": "explicit"
5+
},
46
"editor.defaultFormatter": "stylelint.vscode-stylelint"
57
},
68
"[javascript]": {
@@ -48,17 +50,89 @@
4850
"atlascode.jira.workingSite": {
4951
"baseUrlSuffix": "jira.corp.adobe.com"
5052
},
53+
"colorInfo.languages": [
54+
{
55+
"colors": "css",
56+
"selector": "css"
57+
},
58+
{
59+
"colors": "css",
60+
"selector": "postcss"
61+
},
62+
{
63+
"colors": "css",
64+
"selector": "javascript"
65+
},
66+
{
67+
"colors": "css",
68+
"selector": "js"
69+
},
70+
{
71+
"colors": "css",
72+
"selector": "jsx"
73+
},
74+
{
75+
"colors": "css",
76+
"selector": "json"
77+
},
78+
{
79+
"colors": "css",
80+
"selector": "svg"
81+
},
82+
{
83+
"colors": "css",
84+
"selector": "markdown"
85+
},
86+
{
87+
"colors": "css",
88+
"selector": "md"
89+
},
90+
{
91+
"colors": "css",
92+
"selector": "mdx"
93+
},
94+
{
95+
"colors": "css",
96+
"selector": "html"
97+
},
98+
{
99+
"colors": "css",
100+
"selector": "yaml"
101+
}
102+
],
103+
"cssVariables.lookupFiles": [
104+
"${workspaceFolder}/tokens/dist/index.css",
105+
"${workspaceFolder}/tokens/**/*.css",
106+
"${workspaceFolder}/components/*/index.css",
107+
"${workspaceFolder}/components/*/themes/*.css"
108+
],
109+
"docthis.includeDescriptionTag": true,
110+
"docthis.inferTypesFromNames": true,
111+
"docthis.returnsTag": true,
51112
"editor.defaultFormatter": "esbenp.prettier-vscode",
113+
"editor.largeFileOptimizations": true,
114+
"editor.renderControlCharacters": true,
52115
"emmet.includeLanguages": {
53116
"postcss": "css"
54117
},
55118
"emmet.syntaxProfiles": {
56119
"postcss": "css"
57120
},
121+
"eslint.format.enable": true,
58122
"eslint.packageManager": "yarn",
123+
"eslint.useESLintClass": true,
59124
"files.associations": {
60125
"*.css": "postcss"
61126
},
127+
"files.insertFinalNewline": true,
128+
"files.trimFinalNewlines": true,
129+
"files.trimTrailingWhitespace": true,
130+
"github.copilot.enable": {
131+
"*": true,
132+
"plaintext": false,
133+
"scminput": false
134+
},
135+
"githubIssues.createIssueTriggers": ["TODO", "todo", "FIXME", "ISSUE", "BUG"],
62136
"githubIssues.issueBranchTitle": "${author}/${sanitizedIssueTitle}-gh-${issueNumber}",
63137
"githubIssues.queries": [
64138
{
@@ -92,14 +166,27 @@
92166
"query": "is:open mentions:${user}"
93167
}
94168
],
169+
"js/ts.implicitProjectConfig.experimentalDecorators": true,
95170
"prettier.configPath": ".prettierrc",
96171
"prettier.ignorePath": ".prettierignore",
97-
"prettier.prettierPath": "./node_modules/prettier",
172+
"prettier.prettierPath": "node_modules/prettier",
173+
"stylelint.enable": true,
98174
"stylelint.packageManager": "yarn",
175+
"stylelint.reportDescriptionlessDisables": true,
176+
"stylelint.reportInvalidScopeDisables": true,
99177
"stylelint.reportNeedlessDisables": true,
100178
"stylelint.validate": ["css", "postcss"],
101179
"yaml.schemas": {
102-
"~/.vscode/extensions/atlassian.atlascode-3.0.4/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml",
103-
"./schemas/documentation.schema.json": ["/metadata/*.yml", "/metadata/*.yaml"]
104-
}
180+
"./schemas/documentation.schema.json": [
181+
"/metadata/*.yml",
182+
"/metadata/*.yaml"
183+
],
184+
"~/.vscode/extensions/atlassian.atlascode-3.0.4/resources/schemas/pipelines-schema.json": "bitbucket-pipelines.yml"
185+
},
186+
"storyExplorer.storiesGlobs": [
187+
".storybook/deprecated/*/*.stories.js",
188+
".storybook/deprecated/*/*.mdx",
189+
"components/*/stories/*.stories.js",
190+
"components/*/stories/*.mdx"
191+
]
105192
}

‎components/fieldgroup/stories/fieldgroup.stories.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { disableDefaultModes } from "@spectrum-css/preview/modes";
22
import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types";
33
import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js";
4-
import { Template as Radio } from "@spectrum-css/radio/stories/template.js";
54
import metadata from "../metadata/metadata.json";
65
import packageJson from "../package.json";
76
import { FieldGroupSet } from "./fieldgroup.test.js";
@@ -21,6 +20,11 @@ export default {
2120
title: "Field group",
2221
component: "FieldGroup",
2322
argTypes: {
23+
label: {
24+
name: "Label",
25+
description: "The label for the field group component.",
26+
type: { name: "string" },
27+
},
2428
inputType: {
2529
name: "Input type",
2630
type: { name: "string" },
@@ -63,26 +67,24 @@ export default {
6367
inputType: "radio",
6468
labelPosition: "top",
6569
layout: "vertical",
66-
label: "Select one of the following options:",
70+
label: "Field group label",
71+
helpText: "Select an option.",
6772
items: [
68-
(passthroughs, context) => Radio({
69-
...passthroughs,
73+
{
7074
id: "apple",
7175
label: "Apples are best",
7276
customClasses: ["spectrum-FieldGroup-item"],
73-
}, context),
74-
(passthroughs, context) => Radio({
75-
...passthroughs,
77+
},
78+
{
7679
id: "banana",
7780
label: "Bananas forever",
7881
customClasses: ["spectrum-FieldGroup-item"],
79-
}, context),
80-
(passthroughs, context) => Radio({
81-
...passthroughs,
82+
},
83+
{
8284
id: "pear",
8385
label: "Pears or bust",
8486
customClasses: ["spectrum-FieldGroup-item"],
85-
}, context),
87+
}
8688
],
8789
isInvalid: false,
8890
isRequired: false,

‎components/fieldgroup/stories/template.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { Template as CheckBox } from "@spectrum-css/checkbox/stories/template.js";
12
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
23
import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js";
3-
import { renderContent } from "@spectrum-css/preview/decorators";
4+
import { Template as Radio } from "@spectrum-css/radio/stories/template.js";
45
import { html } from "lit";
56
import { classMap } from "lit/directives/class-map.js";
67
import { ifDefined } from "lit/directives/if-defined.js";
@@ -43,6 +44,7 @@ export const Template = (
4344
{
4445
size: "m",
4546
label,
47+
isRequired,
4648
alignment: labelPosition === "side" ? "right" : "top",
4749
},
4850
context,
@@ -53,7 +55,23 @@ export const Template = (
5355
[`${rootClass}InputLayout`]: true,
5456
})}
5557
>
56-
${renderContent(items, { args: { isReadOnly, isRequired }, context })}
58+
${inputType === "radio" ?
59+
items.map((item) =>
60+
Radio({
61+
...item,
62+
isReadOnly,
63+
isRequired,
64+
name: "field-group-example",
65+
customClasses: [`${rootClass}-item`],
66+
}, context))
67+
: items.map((item) =>
68+
CheckBox({
69+
...item,
70+
isReadOnly,
71+
isRequired,
72+
customClasses: [`${rootClass}-item`],
73+
}, context)
74+
)}
5775
${when(helpText, () =>
5876
HelpText(
5977
{

‎components/progressbar/stories/meter.stories.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export default {
3636
},
3737
args: {
3838
...ProgressBar.args,
39+
rootClass: "spectrum-Meter",
3940
size: "l",
4041
label: "Storage space",
4142
},

‎components/progressbar/stories/meter.template.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
11
import { Container } from "@spectrum-css/preview/decorators";
2-
import { Template as ProgressBar } from "./template.js";
32
import { html } from "lit";
3+
import { capitalize } from "lodash-es";
4+
import { Template as ProgressBar } from "./template.js";
45

56
import "../index.css";
67

78
export const Template = ({
89
customClasses = [],
910
fill,
1011
size = "s",
12+
rootClass = "spectrum-Meter",
13+
staticColor,
1114
...item
1215
} = {}, context = {}) => ProgressBar({
1316
customClasses: [
14-
...customClasses,
15-
"spectrum-Meter",
16-
typeof size !== "undefined" ? `spectrum-Meter--size${size.toUpperCase()}` : null,
17+
rootClass,
18+
typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null,
1719
typeof fill !== "undefined" ? `is-${fill}` : null,
20+
/*
21+
* The `spectrum-Meter--staticWhite` class is not present in the Meter CSS, as it makes use of
22+
* `spectrum-ProgressBar--staticWhite`, but having this allows for simpler detection of static
23+
* colors when looking at the element using its `rootClass` in our decorators.
24+
*/
25+
typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null,
26+
...customClasses,
1827
].filter(Boolean),
1928
size,
29+
staticColor,
2030
...item,
2131
}, context);
2232

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,13 @@
8080
"eslint-plugin-jsonc": "^2.16.0",
8181
"eslint-plugin-prettier": "^5.1.3",
8282
"fast-glob": "^3.3.2",
83-
"gh-pages": "^6.1.1",
83+
"gh-pages": "^6.2.0",
8484
"husky": "^9.1.6",
8585
"jsonc-eslint-parser": "^2.4.0",
8686
"lint-staged": "^15.2.10",
8787
"lodash": "^4.17.21",
8888
"node-gyp": "^10.1.0",
89-
"npm-registry-fetch": "^17.0.1",
89+
"npm-registry-fetch": "^18.0.1",
9090
"nunjucks": "^3.2.4",
9191
"nx": "^19.8.2",
9292
"open": "^10.1.0",

‎site/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"markdown-it-anchor": "^8.6.7",
3333
"markdown-it-attrs": "^4.1.6",
3434
"markdown-it-prism": "^2.3.0",
35-
"npm-registry-fetch": "^17.0.1",
35+
"npm-registry-fetch": "^18.0.1",
3636
"prismjs": "^1.29.0",
3737
"pug": "^3.0.2",
3838
"rimraf": "^6.0.1",

0 commit comments

Comments
 (0)