Skip to content

Commit bc10505

Browse files
castastrophecastastrophe
authored
chore: align build with s2 branch (#4108)
1 parent 56581b0 commit bc10505

File tree

9 files changed

+257
-102
lines changed

9 files changed

+257
-102
lines changed

‎.github/QUICK-START.md

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
This guide will show you how to quickly install Spectrum CSS and use it to display the Button component.
44

55
## Install using Node/yarn
6+
67
Install the components you want along with their dependencies. Here's an example:
78

89
```shell
@@ -12,45 +13,65 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s
1213
Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme:
1314

1415
```html
15-
<html class="spectrum spectrum--medium spectrum--light">
16+
<html class="spectrum spectrum--medium spectrum--light"></html>
1617
```
1718

1819
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:
1920

2021
```html
2122
<head>
22-
<!-- Include global tokens depedency first -->
23-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
23+
<!-- Include global tokens depedency first -->
24+
<link
25+
rel="stylesheet"
26+
href="node_modules/@spectrum-css/tokens/dist/index.css"
27+
/>
2428

25-
<!-- Include index.css for the components you're using -->
26-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/>
29+
<!-- Include index.css for the components you're using -->
30+
<link
31+
rel="stylesheet"
32+
href="node_modules/@spectrum-css/button/dist/index.css"
33+
/>
2734
</head>
2835
```
2936

3037
Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant:
3138

3239
```html
33-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
34-
<span class="spectrum-Button-label">Button</span>
40+
<button
41+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
42+
>
43+
<span class="spectrum-Button-label">Button</span>
3544
</button>
3645
```
3746

3847
To put it all together, your final html file will look like this:
3948

4049
```html
4150
<html class="spectrum spectrum--light spectrum--medium">
42-
<head>
43-
<link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/>
44-
<link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css">
45-
<link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
46-
</head>
47-
<body>
48-
<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
49-
<span class="spectrum-Button-label">Button</span>
50-
</button>
51-
</body>
51+
<head>
52+
<link
53+
rel="stylesheet"
54+
href="node_modules/@spectrum-css/tokens/dist/index.css"
55+
/>
56+
<link
57+
rel="stylesheet"
58+
href="node_modules/@spectrum-css/page/dist/index-vars.css"
59+
/>
60+
<link
61+
rel="stylesheet"
62+
href="node_modules/@spectrum-css/button/dist/index-vars.css"
63+
/>
64+
</head>
65+
<body>
66+
<button
67+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
68+
>
69+
<span class="spectrum-Button-label">Button</span>
70+
</button>
71+
</body>
5272
</html>
5373
```
5474

5575
## Include files from a CDN
76+
5677
Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment.

‎.github/actions/file-diff/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ Total size of all files for this branch in bytes.
4444
name: Compare compiled output file size
4545
uses: "spectrum-tools/gh-action-file-diff"
4646
with:
47-
head-path: ${{ github.workspace }}/pull-request
48-
base-path: ${{ github.workspace }}/base-branch
49-
file-glob-pattern: |
50-
components/*/dist/*.{css,json}
51-
components/*/dist/themes/*.css
47+
head-path: ${{ github.workspace }}/pull-request
48+
base-path: ${{ github.workspace }}/base-branch
49+
file-glob-pattern: |
50+
components/*/dist/*.{css,json}
51+
components/*/dist/themes/*.css
5252
```

‎.github/scripts/build-preview-urls-comment.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
#!/usr/bin/env node
2+
3+
/*!
4+
* Copyright 2025 Adobe. All rights reserved.
5+
*
6+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License. You may obtain a copy
8+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
9+
*
10+
* Unless required by applicable law or agreed to in writing, software distributed under
11+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
12+
* OF ANY KIND, either express or implied. See the License for the specific language
13+
* governing permissions and limitations under the License.
14+
*/
15+
16+
export const buildPreviewURLComment = (prNumber) => {
17+
const prHash = `pr-${prNumber}`;
18+
const baseUrl = 'https://spectrumcss.z13.web.core.windows.net';
19+
20+
return `## 📚 Branch preview
21+
22+
PR #${prNumber} has been deployed to Azure Blob Storage: [${baseUrl}/${prHash}/index.html](${baseUrl}/${prHash}/index.html).`;
23+
24+
};

‎.github/scripts/comment-or-update.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*!
2+
* Copyright 2025 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
export const commentOrUpdate = (github, context, title, body) => {
15+
github.rest.issues
16+
.listComments({
17+
owner: context.repo.owner,
18+
repo: context.repo.repo,
19+
issue_number: context.issue.number,
20+
})
21+
.then(({ data }) => {
22+
const priorComment = data.find((comment) =>
23+
comment.body.startsWith(title)
24+
);
25+
if (priorComment) {
26+
github.rest.issues.updateComment({
27+
owner: context.repo.owner,
28+
repo: context.repo.repo,
29+
comment_id: priorComment.id,
30+
body,
31+
});
32+
} else {
33+
github.rest.issues.createComment({
34+
owner: context.repo.owner,
35+
repo: context.repo.repo,
36+
issue_number: context.issue.number,
37+
body,
38+
});
39+
}
40+
});
41+
};

‎.github/workflows/development.yml

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,12 +203,14 @@ jobs:
203203
if: ${{ contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true) }}
204204
uses: ./.github/workflows/vrt.yml
205205
with:
206-
skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
206+
skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
207+
ref: ${{ github.event.pull_request.head.ref || github.ref_name }}
208+
sha: ${{ github.event.pull_request.head.sha || github.ref }}
207209
secrets: inherit
208210

209211
# -------------------------------------------------------------
210-
# PUBLISH TO NETLIFY --- #
211-
# Publish to netlify by leveraging the previous build and then building the site as well
212+
# PUBLISH TO AZURE --- #
213+
# Publish to azure by leveraging the previous build and then building the site as well
212214
# -------------------------------------------------------------
213215
publish_site:
214216
name: Publish

‎.github/workflows/lint.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ jobs:
105105
# stylelint_input: "components/*/index.css components/*/themes/*.css"
106106
stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
107107
stylelint_config: "${{ github.workspace }}/stylelint.config.js"
108+
packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical'
108109

109110
- name: Run eslint on packages and stories
110111
uses: reviewdog/[email protected]

‎.github/workflows/production.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ jobs:
5353
uses: ./.github/workflows/vrt.yml
5454
with:
5555
skip: ${{ github.base_ref != 'main' }}
56+
ref: ${{ github.ref_name }}
57+
sha: ${{ github.ref }}
5658
secrets: inherit
5759

5860
# -------------------------------------------------------------

0 commit comments

Comments
 (0)