Skip to content

chore: merge branch 'main' into spectrum-two #3633

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
castastrophe merged 19 commits into from
Mar 20, 2025
Merged

chore: merge branch 'main' into spectrum-two #3633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
3ec3b46
feat(actionbutton): use s2 colors in spectrum-two theme (#3606)
jawinn Mar 11, 2025
7e2624a
fix(search): update disabled state in spectrum two (#3593)
TarunAdobe Mar 12, 2025
fee01ea
chore(deps): bump the npm_and_yarn group with 2 updates (#3618)
dependabot[bot] Mar 12, 2025
c351c45
chore: update release script install settings
castastrophe Mar 12, 2025
d2272ea
fix(button): adjust s2 static colors [SWC-496] (#3613)
rise-erpelding Mar 12, 2025
968cb1e
chore: release (#3619)
github-actions[bot] Mar 12, 2025
ae8a126
fix(slider): corrects contrast bug caused by template default arg (#3…
cdransf Mar 12, 2025
3aec28a
fix(stepper): fast follows for focus/focus+hover/keyboardFocus border…
marissahuysentruyt Mar 14, 2025
8cb98c6
fix(slider): offset variant border radius bug fix (#3611)
aramos-adobe Mar 14, 2025
851be13
fix(combobox): border color fast follows swc-582 (#3609)
marissahuysentruyt Mar 14, 2025
5c10d48
chore: release (#3623)
github-actions[bot] Mar 14, 2025
f56399f
chore: patch tj-actions vulnerability (#3626)
castastrophe Mar 16, 2025
754f99a
fix(alertbanner): change system variable from spectrum to legacy (#3624)
marissahuysentruyt Mar 19, 2025
183450f
test(checkbox): add more coverage for checkbox (#3625)
marissahuysentruyt Mar 19, 2025
6448f37
chore: release (#3631)
github-actions[bot] Mar 19, 2025
a02f1d1
fix(checkbox): add invalid+checked+hover checkbox styles (#3617)
marissahuysentruyt Mar 19, 2025
e676eb5
chore: release (#3632)
github-actions[bot] Mar 19, 2025
3968090
Merge branch 'main' into spectrum-two
jawinn Mar 19, 2025
966487d
fix: undefined and duplicated variable after merging main
jawinn Mar 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/development.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ jobs:
steps:
- name: Get changed files
id: changed-files
uses: tj-actions/changed-files@v45
uses: step-security/changed-files@v45
with:
files_yaml: |
styles:
Expand Down
14 changes: 7 additions & 7 deletions components/actionbutton/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# Change log

## 8.0.0-next.0

### Patch Changes

- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
- @spectrum-css/icon@10.0.0-next.0

## 7.1.2

### Patch Changes
Expand All @@ -10,13 +17,6 @@ This updates the colors used in action button for the spectrum two theme, so the

This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors.

## 8.0.0-next.0

### Patch Changes

- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
- @spectrum-css/icon@10.0.0-next.0

## 7.1.1

### Patch Changes
Expand Down
6 changes: 6 additions & 0 deletions components/alertbanner/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,12 @@
- @spectrum-css/button@15.0.0-next.0
- @spectrum-css/closebutton@7.0.0-next.0

## 3.1.1

### Patch Changes

- [#3624](https://github.com/adobe/spectrum-css/pull/3624) [`754f99a`](https://github.com/adobe/spectrum-css/commit/754f99afc3c1918cdc0d173150989bcc1e6a7d2f) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - In the alert banner spectrum.css (the S1 stylesheet), --system: legacy was corrected in the container query.

## 3.1.0

### Minor Changes
Expand Down
8 changes: 8 additions & 0 deletions components/checkbox/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
- @spectrum-css/icon@10.0.0-next.0

## 10.1.2

### Patch Changes

📝 [#3617](https://github.com/adobe/spectrum-css/pull/3617) [`a02f1d1`](https://github.com/adobe/spectrum-css/commit/a02f1d13d07106465a3236c5bfe3d029f3e64426) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)!

Adds a `::before` pseudo element to properly target the `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box` element. The selector update, specifically in the invalid+checked+hover state should now get the proper error background color, as opposed to the default background color.

## 10.1.1

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion components/checkbox/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label",
".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box",
".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before",
".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label",
Expand Down
3 changes: 2 additions & 1 deletion components/checkbox/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@
}

&:hover {
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box,
.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before,
.spectrum-Checkbox-box::before {
border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover)));
}
Expand Down Expand Up @@ -297,6 +297,7 @@
}
}

/* TODO: Because this selector was moved to the default variant's styles, this selector block can be deleted when it is safe to make changes to selectors. */
/* Invalid Hover States */
&.is-invalid:hover {
&.is-indeterminate .spectrum-Checkbox-box,
Expand Down
4 changes: 3 additions & 1 deletion components/checkbox/stories/checkbox.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { CheckboxGroup } from "./checkbox.test.js";
Expand Down Expand Up @@ -30,6 +30,7 @@ export default {
control: { type: "text" },
},
isEmphasized,
isHovered,
isInvalid,
isDisabled,
isChecked,
Expand All @@ -43,6 +44,7 @@ export default {
isChecked: false,
isDisabled: false,
isEmphasized: false,
isHovered: false,
isIndeterminate: false,
isInvalid: false,
isReadOnly: false,
Expand Down
22 changes: 22 additions & 0 deletions components/checkbox/stories/checkbox.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ export const CheckboxGroup = Variants({
testHeading: "Checked",
isChecked: true,
},
{
testHeading: "Checked, hovered",
isChecked: true,
isHovered: true,
},
{
testHeading: "Indeterminate",
isIndeterminate: true,
Expand All @@ -40,6 +45,12 @@ export const CheckboxGroup = Variants({
isInvalid: true,
isChecked: true,
},
{
testHeading: "Invalid, checked, hovered",
isInvalid: true,
isChecked: true,
isHovered: true,
},
{
testHeading: "Invalid, indeterminate",
isInvalid: true,
Expand All @@ -54,6 +65,11 @@ export const CheckboxGroup = Variants({
isDisabled: true,
isChecked: true,
},
{
testHeading: "Disabled, checked, hovered",
isDisabled: true,
isChecked: true,
},
{
testHeading: "Disabled, indeterminate",
isDisabled: true,
Expand All @@ -68,6 +84,12 @@ export const CheckboxGroup = Variants({
isReadOnly: true,
isChecked: true,
},
{
testHeading: "Read-only, checked, hovered",
isReadOnly: true,
isChecked: true,
isHovered: true,
},
{
testHeading: "Read-only, indeterminate",
isReadOnly: true,
Expand Down
2 changes: 2 additions & 0 deletions components/checkbox/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const Template = ({
label,
isChecked = false,
isEmphasized = false,
isHovered = false,
isIndeterminate = false,
isDisabled = false,
isInvalid = false,
Expand Down Expand Up @@ -52,6 +53,7 @@ export const Template = ({
["is-indeterminate"]: isIndeterminate,
["is-disabled"]: isDisabled,
["is-invalid"]: isInvalid,
["is-hover"]: isHovered && !isDisabled,
["is-readOnly"]: isReadOnly,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
Expand Down
10 changes: 10 additions & 0 deletions components/combobox/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,16 @@
- @spectrum-css/popover@9.0.0-next.0
- @spectrum-css/textfield@9.0.0-next.0

## 4.1.2

### Patch Changes

- [#3609](https://github.com/adobe/spectrum-css/pull/3609) [`851be13`](https://github.com/adobe/spectrum-css/commit/851be13295f9d42d548894fee6626009f053de61) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Fast follow fixes for combobox

- corrects container query for the `--system` reference to "legacy" in the combobox/themes/spectrum.css file
- corrects the border colors for several combobox states including focus, keyboardFocus, focus+hover, disabled, read-only for all themes
- adds `--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400);` to express.css theme so that the default border and read-only border colors are the same

## 4.1.1

### Patch Changes
Expand Down
3 changes: 3 additions & 0 deletions components/combobox/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@
"--mod-combobox-inline-size",
"--mod-combobox-line-height",
"--mod-combobox-min-inline-size",
"--mod-combobox-readonly-border-color-disabled",
"--mod-combobox-readonly-input-border-color",
"--mod-combobox-spacing-block-end-edge-to-text",
"--mod-combobox-spacing-block-start-edge-to-text",
Expand Down Expand Up @@ -170,6 +171,7 @@
"--spectrum-combobox-line-height",
"--spectrum-combobox-min-inline-size",
"--spectrum-combobox-readonly-background-color-disabled",
"--spectrum-combobox-readonly-border-color-disabled",
"--spectrum-combobox-readonly-border-color-invalid-default",
"--spectrum-combobox-readonly-input-background-color",
"--spectrum-combobox-readonly-input-border-color",
Expand Down Expand Up @@ -253,6 +255,7 @@
"--mod-picker-button-background-color-disabled",
"--mod-picker-button-background-color-quiet",
"--mod-picker-button-border-color",
"--mod-picker-button-border-color-disabled",
"--mod-picker-button-border-color-quiet",
"--mod-picker-button-border-width",
"--mod-picker-button-font-color-disabled",
Expand Down
19 changes: 6 additions & 13 deletions components/combobox/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,6 @@
*/

.spectrum-Combobox {
--spectrum-combobox-border-color-default: var(--spectrum-gray-500);
--spectrum-combobox-border-color-hover: var(--spectrum-gray-600);
--spectrum-combobox-border-color-focus: var(--spectrum-gray-800);
--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);

--spectrum-combobox-background-color-disabled: var(--spectrum-gray-25);

--spectrum-combobox-block-size: var(--spectrum-component-height-100);
--spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100);
--spectrum-combobox-font-size: var(--spectrum-font-size-100);
Expand Down Expand Up @@ -56,6 +48,7 @@
--spectrum-combobox-border-color-focus: var(--spectrum-gray-800);
--spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900);
--spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800);
--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
Copy link
Copy Markdown
Collaborator Author

@jawinn jawinn Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was undefined post-merge and needed to be brought over from the spectrum-two theme.

Copy link
Copy Markdown
Contributor

@castastrophe castastrophe Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this wasn't coming from main - I'd rather we not try to add it in this PR now. We know there are lint issues on spectrum-two but that's not really a problem until we're ready to release.

Copy link
Copy Markdown
Collaborator

@marissahuysentruyt marissahuysentruyt Mar 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it was defined, but we had only been using it for the read-only combobox. I repurposed it for that most recent combobox release, when we needed to use it for all 3 themes (since the disabled border color changes).


--spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default);
--spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover);
Expand Down Expand Up @@ -83,7 +76,7 @@

--mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width));
--mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default));
--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, transparent);
--mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
--mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus));
--mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover));
--mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover));
Expand All @@ -104,15 +97,15 @@
--mod-picker-button-background-color: var(--mod-combobox-background-color-default);
--mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled);
--mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled);
--mod-picker-button-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
/* @passthroughs end -- settings for nested Picker Button component */

/*** Read-only Colors ***/
--spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50);
--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500);
--spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default);
--spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color);
--spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color);
--spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color);
--spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color);
}

.spectrum-Combobox--sizeS {
Expand Down Expand Up @@ -248,7 +241,7 @@

&.is-disabled .spectrum-Combobox-input:read-only {
background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled));
border-color: transparent;
border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent));
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));

&:hover {
Expand Down Expand Up @@ -435,7 +428,7 @@

&.is-disabled .spectrum-Combobox-input:read-only {
color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled)));
border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled));
border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled));
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions components/form/stories/form.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js";
import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js";
import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
Expand Down Expand Up @@ -80,18 +79,19 @@ export default {
content: [
(passthroughs, context) => Fieldgroup({
layout: "horizontal",
inputType: "checkbox",
items: [
Checkbox({
{
...passthroughs,
label: "Kittens",
customClasses: ["spectrum-FieldGroup-item"],
}, context),
Checkbox({
},
{
...passthroughs,
label: "Puppies",
customClasses: ["spectrum-FieldGroup-item"],
}, context),]
}),
}]
}, context),
],
},{
label: "Age",
Expand Down
18 changes: 9 additions & 9 deletions components/search/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
# Change log

## 9.0.0-next.0

### Patch Changes

- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
- @spectrum-css/icon@10.0.0-next.0
- @spectrum-css/clearbutton@8.0.0-next.0
- @spectrum-css/textfield@9.0.0-next.0

## 8.1.1

### Patch Changes
Expand All @@ -10,15 +19,6 @@ Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` an

Also defines disabled quiet border and background colors (`--system-search-quiet-background-color-disabled` and `--system-search-quiet-border-color-disabled`) in order to maintain disabled quiet styling.

## 9.0.0-next.0

### Patch Changes

- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]:
- @spectrum-css/icon@10.0.0-next.0
- @spectrum-css/clearbutton@8.0.0-next.0
- @spectrum-css/textfield@9.0.0-next.0

## 8.1.0

### Minor Changes
Expand Down
10 changes: 10 additions & 0 deletions components/slider/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@
- Updated dependencies []:
- @spectrum-css/stepper@8.0.0-next.0

## 6.2.0

### Minor Changes

- [#3611](https://github.com/adobe/spectrum-css/pull/3611) [`8cb98c6`](https://github.com/adobe/spectrum-css/commit/8cb98c6127a91f902f305faeb800e3c787e97e66) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - # Slider: offset variant track fix

The border radius styles were not being applied to the second instance of the `spectrum-Slider-track` when the offset variant is activated. The reason for this bug is because when the `offset` is selected, the template structure changes as `spectrum-Slider-fill` gets added to the slider.

Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue.

## 6.1.0

### Minor Changes
Expand Down
4 changes: 1 addition & 3 deletions components/slider/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle",
".spectrum-Slider-track",
".spectrum-Slider-track ~ .spectrum-Slider-track",
".spectrum-Slider-track ~ .spectrum-Slider-track:before",
".spectrum-Slider-track:before",
".spectrum-Slider-track:first-of-type:before",
".spectrum-Slider-track:last-of-type:before",
Expand All @@ -83,9 +84,6 @@
".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
".spectrum-Slider.spectrum-Slider--sizeL",
".spectrum-Slider.spectrum-Slider--sizeS",
".spectrum-Slider.spectrum-Slider--sizeXL",
".spectrum-Slider:dir(rtl)",
".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused",
Expand Down
Loading