Skip to content

Commit 5e7cc8f

Browse files
blunteshwarcastastrophe
authored andcommitted
chore(picker): updated border-color for open not hover state of picker (#3607)
Updated border-color for is-open state from `--spectrum-gray-900` to `--spectrum-gray-800`.
1 parent 58ed89e commit 5e7cc8f

File tree

500 files changed

+13781
-39679
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

500 files changed

+13781
-39679
lines changed

.changeset/angry-boats-walk.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/picker": patch
3+
---
4+
5+
Updated border-color for Open not hover state of picker from --spectrum-gray-900 to --spectrum-gray-800 as specified in the spec

.changeset/pre.json

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
{
2+
"mode": "pre",
3+
"tag": "next",
4+
"initialVersions": {
5+
"@spectrum-tools/gh-action-file-diff": "2.2.0",
6+
"@spectrum-css/preview": "12.0.3",
7+
"@spectrum-css/accordion": "7.1.0",
8+
"@spectrum-css/actionbar": "10.1.1",
9+
"@spectrum-css/actionbutton": "7.1.1",
10+
"@spectrum-css/actiongroup": "6.1.0",
11+
"@spectrum-css/actionmenu": "7.1.1",
12+
"@spectrum-css/alertbanner": "3.1.0",
13+
"@spectrum-css/alertdialog": "4.1.0",
14+
"@spectrum-css/asset": "7.1.0",
15+
"@spectrum-css/assetcard": "5.1.0",
16+
"@spectrum-css/assetlist": "8.1.0",
17+
"@spectrum-css/avatar": "9.1.0",
18+
"@spectrum-css/badge": "6.1.0",
19+
"@spectrum-css/breadcrumb": "11.1.0",
20+
"@spectrum-css/button": "14.1.1",
21+
"@spectrum-css/buttongroup": "9.1.0",
22+
"@spectrum-css/calendar": "7.1.0",
23+
"@spectrum-css/card": "11.1.0",
24+
"@spectrum-css/checkbox": "10.1.0",
25+
"@spectrum-css/clearbutton": "7.1.0",
26+
"@spectrum-css/closebutton": "6.1.0",
27+
"@spectrum-css/coachindicator": "4.1.0",
28+
"@spectrum-css/coachmark": "9.1.1",
29+
"@spectrum-css/colorarea": "7.1.0",
30+
"@spectrum-css/colorhandle": "10.1.0",
31+
"@spectrum-css/colorloupe": "7.1.0",
32+
"@spectrum-css/colorslider": "8.1.0",
33+
"@spectrum-css/colorwheel": "6.1.0",
34+
"@spectrum-css/combobox": "4.1.1",
35+
"@spectrum-css/commons": "11.0.0",
36+
"@spectrum-css/contextualhelp": "5.1.2",
37+
"@spectrum-css/datepicker": "4.1.1",
38+
"@spectrum-css/dial": "5.1.0",
39+
"@spectrum-css/dialog": "12.1.0",
40+
"@spectrum-css/divider": "5.1.0",
41+
"@spectrum-css/dropindicator": "7.1.0",
42+
"@spectrum-css/dropzone": "8.1.0",
43+
"@spectrum-css/fieldgroup": "7.1.0",
44+
"@spectrum-css/fieldlabel": "10.1.0",
45+
"@spectrum-css/floatingactionbutton": "4.1.0",
46+
"@spectrum-css/form": "1.1.0",
47+
"@spectrum-css/helptext": "7.1.0",
48+
"@spectrum-css/icon": "9.1.0",
49+
"@spectrum-css/illustratedmessage": "9.1.0",
50+
"@spectrum-css/infieldbutton": "6.1.1",
51+
"@spectrum-css/inlinealert": "10.1.0",
52+
"@spectrum-css/link": "7.1.0",
53+
"@spectrum-css/logicbutton": "6.1.0",
54+
"@spectrum-css/menu": "9.1.0",
55+
"@spectrum-css/meter": "1.1.0",
56+
"@spectrum-css/miller": "8.1.0",
57+
"@spectrum-css/modal": "7.1.0",
58+
"@spectrum-css/opacitycheckerboard": "4.1.0",
59+
"@spectrum-css/page": "9.1.0",
60+
"@spectrum-css/pagination": "10.1.0",
61+
"@spectrum-css/picker": "9.1.2",
62+
"@spectrum-css/pickerbutton": "6.1.1",
63+
"@spectrum-css/popover": "8.2.0",
64+
"@spectrum-css/progressbar": "6.1.0",
65+
"@spectrum-css/progresscircle": "5.1.0",
66+
"@spectrum-css/radio": "10.1.0",
67+
"@spectrum-css/rating": "6.1.0",
68+
"@spectrum-css/search": "8.1.0",
69+
"@spectrum-css/sidenav": "7.1.0",
70+
"@spectrum-css/slider": "6.1.0",
71+
"@spectrum-css/splitview": "7.1.0",
72+
"@spectrum-css/statuslight": "9.1.0",
73+
"@spectrum-css/steplist": "7.1.0",
74+
"@spectrum-css/stepper": "7.1.1",
75+
"@spectrum-css/swatch": "8.1.1",
76+
"@spectrum-css/swatchgroup": "5.1.0",
77+
"@spectrum-css/switch": "6.1.0",
78+
"@spectrum-css/table": "8.1.0",
79+
"@spectrum-css/tabs": "6.1.1",
80+
"@spectrum-css/tag": "10.1.0",
81+
"@spectrum-css/taggroup": "7.1.0",
82+
"@spectrum-css/textfield": "8.1.0",
83+
"@spectrum-css/thumbnail": "8.1.0",
84+
"@spectrum-css/toast": "11.1.0",
85+
"@spectrum-css/tooltip": "7.1.0",
86+
"@spectrum-css/tray": "5.1.0",
87+
"@spectrum-css/treeview": "12.1.0",
88+
"@spectrum-css/typography": "8.1.0",
89+
"@spectrum-css/underlay": "6.1.0",
90+
"@spectrum-css/well": "7.1.0",
91+
"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
92+
"@spectrum-tools/stylelint-no-missing-var": "2.0.1",
93+
"@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2",
94+
"@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.4",
95+
"@spectrum-css/tokens": "16.0.1",
96+
"@spectrum-css/bundle": "1.0.0",
97+
"@spectrum-css/generator": "4.1.0",
98+
"@spectrum-css/ui-icons": "1.1.2"
99+
},
100+
"changesets": []
101+
}

.eslintrc

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,30 @@
144144
]
145145
}
146146
},
147+
{
148+
"files": ["tokens/dist/**/*.json"],
149+
"rules": {
150+
"jsonc/sort-keys": [
151+
"warn",
152+
{
153+
"pathPattern": "^$",
154+
"order": { "type": "asc" }
155+
},
156+
{
157+
"pathPattern": ".*",
158+
"order": [
159+
"prop",
160+
"ref",
161+
"value",
162+
"light",
163+
"dark",
164+
"medium",
165+
"large"
166+
]
167+
}
168+
]
169+
}
170+
},
147171
{
148172
"files": [
149173
"components/*/stories/*.js",

.github/QUICK-START.md

Lines changed: 35 additions & 18 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,61 @@ 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

18-
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:
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/button/dist/index.css"
59+
/>
60+
</head>
61+
<body>
62+
<button
63+
class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"
64+
>
65+
<span class="spectrum-Button-label">Button</span>
66+
</button>
67+
</body>
5268
</html>
5369
```
5470

5571
## Include files from a CDN
72+
5673
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/CHANGELOG.md

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -21,49 +21,37 @@
2121
- [#2775](https://github.com/adobe/spectrum-css/pull/2775) [`2452637`](https://github.com/adobe/spectrum-css/commit/2452637d1179b9b2b025dafeb5834720712413d7) Thanks [@castastrophe](https://github.com/castastrophe)!
2222
- Dependency minor and patch updates to support new features in tools leveraged
2323

24-
<a name="2.0.5"></a>
25-
26-
##2.0.5
24+
## 2.0.5
2725

2826
🗓 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.4...@spectrum-tools/gh-action-file-diff@2.0.5)
2927

3028
**Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
3129

32-
<a name="2.0.4"></a>
33-
34-
##2.0.4
30+
## 2.0.4
3531

3632
🗓 2024-02-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.3...@spectrum-tools/gh-action-file-diff@2.0.4)
3733

3834
**Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
3935

40-
<a name="2.0.3"></a>
36+
## 2.0.3
4137

42-
##2.0.3
43-
44-
🗓 2024-02-06
38+
🗓 2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.2...@spectrum-tools/gh-action-file-diff@2.0.3)
4539

4640
**Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
4741

48-
<a name="2.0.2"></a>
49-
50-
##2.0.2
42+
## 2.0.2
5143

5244
🗓 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.1...@spectrum-tools/gh-action-file-diff@2.0.2)
5345

5446
**Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
5547

56-
<a name="2.0.1"></a>
57-
58-
##2.0.1
48+
## 2.0.1
5949

6050
🗓 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.0...@spectrum-tools/gh-action-file-diff@2.0.1)
6151

6252
**Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
6353

64-
<a name="2.0.0"></a>
65-
66-
#2.0.0
54+
## 2.0.0
6755

6856
🗓 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@1.0.2...@spectrum-tools/gh-action-file-diff@2.0.0)
6957

@@ -75,17 +63,13 @@
7563

7664
- NEW: @spectrum-css/ui-icons package for all SVG icons in the UI set.
7765

78-
<a name="1.0.2"></a>
66+
## 1.0.2
7967

80-
##1.0.2
81-
82-
🗓 2023-11-15
68+
🗓 2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@1.0.1...@spectrum-tools/gh-action-file-diff@1.0.2)
8369

8470
**Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
8571

86-
<a name="1.0.1"></a>
87-
88-
##1.0.1
72+
## 1.0.1
8973

9074
🗓 2023-11-13
9175

.github/workflows/development.yml

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ on:
1313
pull_request:
1414
branches:
1515
- main
16-
- spectrum-two
16+
- spectrum-2
1717
# Allow us to run tests for PRs updating github actions
1818
- chore-*ci*
1919
- chore-*github-actions*
@@ -85,6 +85,8 @@ jobs:
8585
styles_modified_files: ${{ steps.changed-files.outputs.styles_modified_files }}
8686
eslint_added_files: ${{ steps.changed-files.outputs.eslint_added_files }}
8787
eslint_modified_files: ${{ steps.changed-files.outputs.eslint_modified_files }}
88+
mdlint_added_files: ${{ steps.changed-files.outputs.mdlint_added_files }}
89+
mdlint_modified_files: ${{ steps.changed-files.outputs.mdlint_modified_files }}
8890
plugins_modified_files: ${{ steps.changed-files.outputs.plugins_modified_files }}
8991
plugins_added_files: ${{ steps.changed-files.outputs.plugins_added_files }}
9092
permissions:
@@ -98,10 +100,19 @@ jobs:
98100
files_yaml: |
99101
styles:
100102
- components/*/index.css
101-
- components/*/themes/spectrum.css
102-
- components/*/themes/express.css
103103
eslint:
104104
- components/*/stories/*.js
105+
mdlint:
106+
- *.md
107+
- .storybook/*.md
108+
- .storybook/*/*.md
109+
- .storybook/*/*.mdx
110+
- components/*/*.md
111+
- components/*/stories/*.mdx
112+
- plugins/*/*.md
113+
- tokens/*.md
114+
- tools/*/*.md
115+
- ui-icons/*.md
105116
plugins:
106117
- plugins/**/*
107118
@@ -180,7 +191,7 @@ jobs:
180191
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)
181192
uses: ./.github/workflows/vrt.yml
182193
with:
183-
skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
194+
skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
184195
secrets: inherit
185196

186197
# -------------------------------------------------------------

0 commit comments

Comments
 (0)