Skip to content

Commit 1a417e5

Browse files
aramos-adobearamos-adobe
committed
feat(helptext): update s2 css removing mod
2 parents c9b228b + 884a119 commit 1a417e5

File tree

91 files changed

+1803
-5708
lines changed

Some content is hidden

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

91 files changed

+1803
-5708
lines changed

‎.changeset/angry-needles-behave.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
"@spectrum-css/radio": major
3+
---
4+
5+
# Radio S2 Migration
6+
7+
Updates:
8+
9+
- High contrast tokens have been modified
10+
- Typography tokens modified
11+
12+
## New tokens
13+
14+
`--spectrum-radio-border-width`
15+
`--spectrum-radio-text-font-weight`
16+
`--spectrum-radio-text-font-style`
17+
18+
## Modified tokens
19+
20+
`--spectrum-radio-emphasized-accent-color`
21+
`--spectrum-radio-emphasized-accent-color-hover`
22+
`--spectrum-radio-emphasized-accent-color-down`
23+
`--spectrum-radio-emphasized-accent-color-focus`

‎.changeset/chilled-peaches-enjoy.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
"@spectrum-css/actionbutton": major
3+
---
4+
5+
Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
6+
7+
- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
8+
- Includes the Spectrum 2 down state transform.
9+
- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
10+
- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
11+
- Background and content colors were updated.
12+
- Mod custom properties have been adjusted:
13+
- Renamed:
14+
- `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`.
15+
- `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
16+
- `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
17+
- Removed:
18+
- `--mod-actionbutton-border-color-default`
19+
- `--mod-actionbutton-border-color-disabled`
20+
- `--mod-actionbutton-border-color-down`
21+
- `--mod-actionbutton-border-color-focus`
22+
- `--mod-actionbutton-border-color-hover`
23+
- `--mod-actionbutton-border-width`
24+
- `--mod-actionbutton-static-content-color`
25+
- New:
26+
- `--mod-actionbutton-font-weight`
27+
- `--mod-actionbutton-font-style`

‎.changeset/pre.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,10 @@
9999
"@spectrum-css/infieldprogresscircle": "0.0.0"
100100
},
101101
"changesets": [
102+
"angry-needles-behave",
102103
"beige-dragons-tickle",
103104
"big-beds-care",
105+
"chilled-peaches-enjoy",
104106
"chilly-peaches-sniff",
105107
"clean-oranges-smell",
106108
"few-doors-smile",

‎.changeset/wild-lemons-spend.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,3 @@ The helptext S2 component has some updated spacing and typography tokens. The er
1212
`--spectrum-help-text-top-to-workflow-icon-medium`
1313
`--spectrum-help-text-top-to-workflow-icon-large`
1414
`--spectrum-help-text-top-to-workflow-icon-extra-large`
15-
16-
#### New mod
17-
18-
There is a mod to align the help text label vertically if the message is one line `--mod-helptext-align-text`. The default is `flex-start` which supports multiline wrapped text.

‎.github/workflows/development.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ jobs:
9595
steps:
9696
- name: Get changed files
9797
id: changed-files
98-
uses: tj-actions/changed-files@v45
98+
uses: step-security/changed-files@v45
9999
with:
100100
files_yaml: |
101101
styles:

‎.storybook/CHANGELOG.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# Change Log
22

3+
## 12.0.4
4+
5+
### Patch Changes
6+
7+
- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor dependency updates to align with the larger project.
8+
9+
- Updated dependencies [[`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75)]:
10+
- @spectrum-css/bundle@1.0.1
11+
312
## 12.0.3
413

514
### Patch Changes

‎.storybook/main.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import fs from "fs";
2-
import path from "path";
3-
import remarkGfm from "remark-gfm";
1+
import fs from "node:fs";
2+
import path from "node:path";
3+
import remarkGfm from 'remark-gfm';
44

55
// Get a list of all the folders in the components directory
66
const componentDir = path.resolve(__dirname, "../components");
@@ -109,7 +109,17 @@ export default {
109109
devSourcemap: configType === "DEVELOPMENT",
110110
},
111111
resolve: {
112-
alias: components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
112+
alias: [
113+
...components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
114+
{
115+
find: `@spectrum-css/tokens`,
116+
replacement: path.resolve(__dirname, `../tokens`),
117+
},
118+
{
119+
find: `@spectrum-css/ui-icons`,
120+
replacement: path.resolve(__dirname, `../ui-icons`),
121+
},
122+
],
113123
}
114124
});
115125
},

‎.storybook/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/preview",
3-
"version": "12.0.3",
3+
"version": "12.0.4",
44
"description": "A Spectrum CSS preview",
55
"license": "Apache-2.0",
66
"author": "Adobe",
@@ -40,7 +40,7 @@
4040
},
4141
"dependencies": {
4242
"@adobe/spectrum-css-workflow-icons": "^4.0.0",
43-
"@spectrum-css/bundle": "1.0.0",
43+
"@spectrum-css/bundle": "1.0.1",
4444
"@spectrum-css/tokens": "16.0.1",
4545
"@spectrum-css/ui-icons": "2.0.0-next.0"
4646
},
@@ -69,7 +69,7 @@
6969
"lodash-es": "^4.17.21",
7070
"npm-registry-fetch": "^18.0.2",
7171
"postcss": "^8.5.3",
72-
"prettier": "^3.4.2",
72+
"prettier": "^3.5.3",
7373
"react": "^18.3.1",
7474
"react-dom": "^18.3.1",
7575
"react-syntax-highlighter": "^15.6.1",

‎.storybook/postcss.config.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*!
2+
* Copyright 2024 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+
module.exports = (options) => require("../postcss.config.js")({
15+
...options,
16+
resolveImports: false,
17+
env: "production",
18+
map: false,
19+
lint: false,
20+
additionalPlugins: {
21+
"@csstools/postcss-bundler": {},
22+
},
23+
});

‎components/actionbutton/CHANGELOG.md

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,32 @@
11
# Change log
22

3-
## 7.1.2
4-
5-
### Patch Changes
6-
7-
📝 [#3606](https://github.com/adobe/spectrum-css/pull/3606) [`3ec3b46`](https://github.com/adobe/spectrum-css/commit/3ec3b468313cbeb19298b35a2bd80860b83f4734) Thanks [@jawinn](https://github.com/jawinn)!
3+
## 8.0.0-next.1
84

9-
This updates the colors used in action button for the spectrum two theme, so they are closer aligned with the spectrum 2 spec, per the request in SWC-597. This removes the border by making it transparent and updates the background color tokens that are used.
5+
### Major Changes
106

11-
This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors.
7+
- [#2669](https://github.com/adobe/spectrum-css/pull/2669) [`b2c6357`](https://github.com/adobe/spectrum-css/commit/b2c6357c542737fb996cf8378354f525adde1fc2) Thanks [@mdt2](https://github.com/mdt2)! - Action button now uses Spectrum 2 tokens and design specifications. A few notable changes:
8+
9+
- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed.
10+
- Includes the Spectrum 2 down state transform.
11+
- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility.
12+
- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.
13+
- Background and content colors were updated.
14+
- Mod custom properties have been adjusted:
15+
- Renamed:
16+
- `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`.
17+
- `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`.
18+
- `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`.
19+
- Removed:
20+
- `--mod-actionbutton-border-color-default`
21+
- `--mod-actionbutton-border-color-disabled`
22+
- `--mod-actionbutton-border-color-down`
23+
- `--mod-actionbutton-border-color-focus`
24+
- `--mod-actionbutton-border-color-hover`
25+
- `--mod-actionbutton-border-width`
26+
- `--mod-actionbutton-static-content-color`
27+
- New:
28+
- `--mod-actionbutton-font-weight`
29+
- `--mod-actionbutton-font-style`
1230

1331
## 8.0.0-next.0
1432

@@ -17,6 +35,16 @@ This also includes a forced-colors/high contrast mode fix for the selected + dis
1735
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
1836
- @spectrum-css/icon@10.0.0-next.0
1937

38+
## 7.1.2
39+
40+
### Patch Changes
41+
42+
📝 [#3606](https://github.com/adobe/spectrum-css/pull/3606) [`3ec3b46`](https://github.com/adobe/spectrum-css/commit/3ec3b468313cbeb19298b35a2bd80860b83f4734) Thanks [@jawinn](https://github.com/jawinn)!
43+
44+
This updates the colors used in action button for the spectrum two theme, so they are closer aligned with the spectrum 2 spec, per the request in SWC-597. This removes the border by making it transparent and updates the background color tokens that are used.
45+
46+
This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors.
47+
2048
## 7.1.1
2149

2250
### Patch Changes

0 commit comments

Comments
 (0)