Skip to content

Commit 4ce8d19

Browse files
committed
chore: merge remote-tracking branch 'origin' into spectrum-two
2 parents 0687447 + 16d14dd commit 4ce8d19

39 files changed

+135
-76
lines changed

.changeset/angry-needles-behave.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
"@spectrum-css/radio": major
33
---
44

5-
# Radio S2 Migration
5+
### Spectrum 2 migration
66

77
Updates:
88

99
- High contrast tokens have been modified
1010
- Typography tokens modified
1111

12-
## New tokens
12+
#### New tokens
1313

1414
`--spectrum-radio-border-width`
1515
`--spectrum-radio-text-font-weight`
1616
`--spectrum-radio-text-font-style`
1717

18-
## Modified tokens
18+
#### Modified tokens
1919

2020
`--spectrum-radio-emphasized-accent-color`
2121
`--spectrum-radio-emphasized-accent-color-hover`

.changeset/beige-dragons-tickle.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
"@spectrum-css/dropzone": major
44
---
55

6-
# S2 Illustrated Message Migration
6+
### S2 Illustrated Message Migration
77

88
This migration contains new tokens for t-shirt sizes (S, M, L), vertical and horizontal orientation along with their maximum width, illustration sizes, and content spacing. Dropzone `--mod` names are renamed to match the semantic tokens in illustrated message.
99

10-
## Illustrated Message
10+
#### Illustrated Message
1111

1212
New properties
1313
`--spectrum-illustrated-message-heading-to-description`
@@ -35,13 +35,13 @@ Removed properties
3535
`--mod-illustrated-message-illustration-accent-color`
3636
`--highcontrast-illustrated-message-illustration-accent-color`
3737

38-
## Dropzone
38+
#### Dropzone
3939

4040
New mods
4141
`--mod-drop-zone-body-to-action`
4242
`--mod-drop-zone-illustration-to-title`
4343

44-
## Dropzone nested mods
44+
#### Dropzone nested mods
4545

4646
Renamed mods
4747
`--mod-illustrated-message-title-to-heading` > `--mod-illustrated-message-illustration-to-heading`

.changeset/big-beds-care.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22
"@spectrum-css/dropzone": major
33
---
44

5-
## Dropzone S2 Migration
5+
### Spectrum 2 migration
66

77
Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed.
88

99
The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap.
1010

11-
### SVG Border
11+
#### SVG Border
1212

1313
To support the intention of the design, an SVG element is used. There are custom `--mod` tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property.
1414

15-
### New mods
15+
#### New mods
1616

1717
`--mod-drop-zone-content-height`
1818
`--mod-drop-zone-edge-to-text`
1919
`--mod-drop-zone-title-line-height`
2020
`--mod-drop-zone-border-dash-length`
2121
`--mod-drop-zone-border-dash-gap`
2222

23-
### Removed mods
23+
#### Removed mods
2424

2525
`--mod-drop-zone-body-color`
2626
`--mod-drop-zone-body-font-family`

.changeset/big-jars-pump.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
`@spectrum-css/inlinealert`: major
2+
"@spectrum-css/inlinealert": major
33
---
44

5-
#### S2 migration in-line alert
5+
#### Spectrum 2 migration
66

77
This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification.
88

.changeset/chilly-peaches-sniff.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/statuslight": major
33
---
44

5-
## Spectrum 2 migration
5+
#### Spectrum 2 migration
66

77
New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight.
88

.changeset/eighty-terms-lead.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/rating": major
33
---
44

5-
#### S2 migration rating
5+
#### Spectrum 2 migration
66

77
This migrates the `rating` component to S2. Custom properties have been remapped and added per the design specification.
88

.changeset/flat-snails-admire.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
"@spectrum-css/infieldprogresscircle": major
33
---
44

5-
## Infield Progresscircle S2 Migration
5+
#### Spectrum 2 migration
66

77
In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness.

.changeset/fresh-crabs-deliver.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/breadcrumb": major
33
---
44

5-
#### Spectrum 2 Migration
5+
#### Spectrum 2 Breadcrumbs migration
66

77
The breadcrumbs component is now updated to use the S2 specs and tokens. This includes updated spacing, heights, colors, font sizes, etc.
88

.changeset/fresh-seahorses-join.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"@spectrum-css/button": patch
33
---
44

5-
#### refactor: remove spectrum-ButtonWithFocusRing placeholder class extend
5+
#### Remove spectrum-ButtonWithFocusRing placeholder class extend
66

77
Removes the need for the extend from this placeholder class, as the styles it provides have diverged slightly from what is in button and it was causing some unnecessary CSS to override.
8-
This should not result in any changed visuals or behavior, as the same CSS has been integrated.
8+
9+
This should not result in any changed visuals or behavior, as the same CSS has been integrated.

.changeset/giant-windows-smoke.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/colorwheel": major
33
---
44

5-
# colorwheel S2 migration
5+
#### Spectrum 2 migration
66

77
This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function.
88

.changeset/healthy-chicken-clap.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/textfield": major
33
---
44

5-
Migrate to Spectrum 2
5+
#### Migrate to Spectrum 2
66

77
- Default styles are used for medium
88
- Removal of quiet variant

.changeset/itchy-kids-travel.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@
22
"@spectrum-css/progresscircle": major
33
---
44

5-
## Progress circle S2 migration
5+
#### Spectrum 2 migration
66

7-
This is the S2 migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL`
7+
This is the Spectrum 2 styles migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL`
88

9-
### Animation
9+
##### Animation
1010

1111
`@keyframes spectrum-dashoffset-animation`:
1212
This animation was created by React Spectrum and used to keep the same speed and bezier curve.
1313

14-
### Added tokens
14+
##### Added tokens
1515

16-
### Removed styles & mods
16+
##### Removed styles & mods
1717

1818
`--spectrum-progress-circle-track-border-color-over-background`
1919
`--spectrum-progress-circle-fill-border-color-over-background`

.changeset/light-years-speak.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/tooltip": major
33
---
44

5-
## Spectrum 2 migration
5+
#### Spectrum 2 migration
66

77
This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed.
88

.changeset/mean-eggs-learn.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
"@spectrum-css/thumbnail": minor
33
---
44

5-
Replaces corner-radius-75 with thumbnail-corner-radius.
5+
Replaces `corner-radius-75` with `thumbnail-corner-radius`.

.changeset/metal-fireants-switch.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"@spectrum-css/underlay": patch
55
---
66

7-
## Spectrum 2 Standard Dialog Migration
7+
#### Spectrum 2 Standard dialog migration
88

99
This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area.
1010

.changeset/modern-chairs-sit.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"@spectrum-css/modal": minor
44
---
55

6-
## S2 Takeover dialog
6+
#### S2 Takeover dialog
77

88
This is the migration for the fullscreen/fullscreenTakeover dialog stories (these stories correspond to the "takeover dialog" in Figma). The Divider component support was removed in S2 standard dialog migration ([#2860](https://github.com/adobe/spectrum-css/pull/2860)). New and updated tokens are in place to update fullscreen/fullscreenTakeover dialog sizing, grid spacing, spacing in the header, and font sizes. Fullscreen/fullscreenTakeover dialogs do not support additional footer content or checkboxes (in comparison to the standard dialog).
99

@@ -18,6 +18,6 @@ _New Mods_
1818
`--mod-takeover-dialog-spacing-header-content-gap`
1919
`--mod-takeover-dialog-title-font-size`
2020

21-
Modal updates
21+
#### Modal updates
2222

2323
- Modal component now uses the updated margin token (`window-to-edge`) found in the takeover dialog design specs. This work also introduced `--spectrum-modal-takeover-window-to-edge`

.changeset/nine-kings-repair.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/button": major
33
---
44

5-
#### Spectrum 2 migration
5+
#### S2 Button migration
66

77
Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes:
88

.changeset/olive-tools-hang.md

-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
"@spectrum-css/ui-icons": major
33
---
44

5-
# Breaking change
6-
75
Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG asset that included both versions to be toggled with classes via CSS (found in folder`combined`). Icons in v2 no longer have multiple sizes and all assets are sourced from a single folder`svg` which can be found in the `dist` directory of this workspace. **Raw SVG assets can no longer be sourced from the top-level of the workspace and must be loaded from `@spectrum-css/ui-icons/dist/svg/*.svg` instead.** Please find below an outline of the new, deprecated, and unchanged icons.
86

97
| Icon name | Migration notes |

.changeset/proud-jokes-rule.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
"@spectrum-css/progressbar": major
33
---
44

5-
## S2 migration
5+
#### Spectrum 2 migration
66

77
Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).

.changeset/rotten-meals-share.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/popover": major
33
---
44

5-
## S2 Popover Migration
5+
#### S2 Popover Migration
66

77
The S2 popover using new tokens for border color, padding, corner radius and elevation/drop shadows.
88

.changeset/serious-clouds-jam.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/colorslider": minor
33
---
44

5-
## S2 colorslider migration
5+
#### S2 colorslider migration
66

77
This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec.
88

.changeset/shaggy-schools-sing.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/search": major
33
---
44

5-
#### Search S2 migration
5+
#### Spectrum 2 migration
66

77
Search now uses Spectrum 2 tokens and specifications. The following items have been adjusted:
88

.changeset/six-donuts-march.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
"@spectrum-css/checkbox": major
33
---
44

5-
#### Checkbox S2 Migration
5+
#### Spectrum 2 migration
66

77
Checkbox's control and color tokens have been updated by the latest S2 tokens:
88

9-
**Updates**
9+
##### Updates
1010

1111
- Checkbox has a background color token: `--spectrum-checkbox-background-color`
1212
- New typography additions: line-height, font-weight, and font style

.changeset/slow-eyes-lay.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22
"@spectrum-css/divider": major
33
---
44

5-
# S2 divider migration
5+
#### Spectrum 2 migration
66

77
This migrates the `divider` component to S2. Custom properties have been remapped and updated per the design spec.
88

9-
### New properties
9+
##### New properties
1010

1111
```css
1212
--spectrum-divider-horizontal-minimum-width
1313
--spectrum-divider-vertical-minimum-height
1414
```
1515

16-
### New mods
16+
##### New mods
1717

1818
```css
1919
--mod-divider-inline-minimum-size
2020
--mod-divider-block-minimum-size
2121
```
2222

23-
### Removed mods
23+
##### Removed mods
2424

2525
```css
2626
--mod-divider-background-color-large-static-black
@@ -31,7 +31,7 @@ This migrates the `divider` component to S2. Custom properties have been remappe
3131
--mod-divider-background-color-small-static-white
3232
```
3333

34-
### Additions
34+
##### Additions
3535

3636
This adds new minimum width and height tokens for the divider and the `minDimensionValues` arg has been removed in favor of these tokens and the rules with which they're applied.
3737

.changeset/spotty-onions-study.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
"@spectrum-css/colorarea": major
33
---
44

5-
# S2 migration
5+
#### Spectrum 2 migration
66

77
This change migrates the `colorarea` component to S2. It leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values.

.changeset/strange-glasses-allow.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
"@spectrum-css/colorloupe": major
33
---
44

5-
## Spectrum 2 migration
5+
#### Spectrum 2 migration
66

77
Migrates color loupe to Spectrum 2 tokens. Color loupe now uses the new drop shadow tokens `--spectrum-drop-shadow-elevated-x`, `--spectrum-drop-shadow-elevated-y`, `--spectrum-drop-shadow-elevated-blur`, and `--spectrum-drop-shadow-elevated-color` rather than specific color loupe tokens.

.changeset/tame-bobcats-beam.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"@spectrum-css/alertbanner": major
33
---
44

5-
## Spectrum 2 migration
5+
#### Spectrum 2 migration
66

77
Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed.
88

.changeset/tasty-eagles-draw.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22
"@spectrum-css/link": major
33
---
44

5-
### Link S2 migration
5+
#### Spectrum 2 migration
66

77
The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant.
88

9-
#### Note
9+
##### Note
1010

1111
- Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear
1212
- `--mod-spectrum-link-font-weight` can be used to adjust inline variant to match surrounding text. Apply font weights to this mod `inherit` does not apply.
1313

14-
## New tokens
14+
#### New tokens
1515

16-
### Color
16+
##### Color
1717

1818
`spectrum-link-focus-indicator-color`
1919
`spectrum-link-focus-indicator-thickness`
2020
`spectrum-link-focus-indicator-gap`
2121
`spectrum-link-corner-radius`
2222

23-
### Typography
23+
##### Typography
2424

2525
`spectrum-link-line-height`
2626
`spectrum-link-line-height-cjk-100`

.changeset/thick-ears-win.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@spectrum-css/slider": minor
77
---
88

9-
### Including the touch action rule for draggable content
9+
#### Including the touch action rule for draggable content
1010

1111
The slider, color slider, color area, color wheel, color handle all deserve to have their touch-action property managed so that trying to set the value of those interfaces doesn't cause page scrolling in touch context.
1212

0 commit comments

Comments
 (0)