chore: release (next)

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to spectrum-two, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

spectrum-two is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on spectrum-two.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@spectrum-css/breadcrumb@12.0.0-next.0

Major Changes

• #2352 2bf6512 Thanks @pfulton! - #### Spectrum 2 Migration

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

  There has been a major design change to the variant classes related to density and sizing, to align their terminology better with t-shirt sizes:

  • The "compact" variant no longer exists. The spectrum-Breadcrumbs--compact class and associated custom properties are removed. The default (medium) breadcrumbs are now sized similar to what was previously called compact.
  • There is a new "large" variant, which uses the spectrum-Breadcrumbs--sizeL class. This is sized similarly to what was previously the default.

  In the multiline variant, the size of the title item can optionally be customized using an additional child heading element that applies one of the
  typography component's spectrum-Heading--size* classes. The preferred sizes specified in the design spec are small, medium, large (default), and
  extra-large. If an additional heading element is not used within the title item, the text will still be sized correctly to the default.

@spectrum-css/dialog@13.0.0-next.0

Major Changes

• #2352 8a4ab84 Thanks @pfulton! - S2 Takeover dialog

  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). 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).

  Takeover dialogs also support replacing text in the header and body areas with other components. This required an additional .spectrum-Dialog-headerContentWrapper element that should center whatever component/content within.

  Class names updated to match naming convention (remove hyphens and capitalize second word):
  .spectrum-Dialog-header-content > .spectrum-Dialog-headerContent
.spectrum-Dialog-footer-content > .spectrum-Dialog-footerContent

  New Mods
  --mod-takeover-dialog-grid-spacing
--mod-takeover-dialog-spacing-header-content-gap
--mod-takeover-dialog-title-font-size

  Modal updates

  • 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

Patch Changes

• Updated dependencies [8a4ab84]:
  • @spectrum-css/modal@7.1.0-next.0

@spectrum-css/dropzone@9.0.0-next.0

Major Changes

• #2352 b50d038 Thanks @pfulton! - # S2 Illustrated Message Migration

  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.

  Illustrated Message

  New properties
  --spectrum-illustrated-message-heading-to-description
--spectrum-illustrated-message-illustration-to-heading
--spectrum-illustrated-message-illustration-to-content
--spectrum-illustrated-message-description-to-action
--spectrum-illustrated-message-illustration-color
--spectrum-illustrated-message-illustration-size
--spectrum-illustrated-message-small-cjk-title-font-size
--spectrum-illustrated-message-large-cjk-title-font-size
--spectrum-illustrated-message-large-body-font-size
--spectrum-illustrated-message-horizontal-maximum-width

  New mods
  --mod-illustrated-message-description-to-action
--mod-illustrated-message-heading-to-description
--mod-illustrated-message-illustration-to-content
--mod-illustrated-message-horizontal-maximum-width

  Removed properties
  --spectrum-illustrated-message-title-to-heading
--spectrum-illustrated-message-description-max-inline-size
--spectrum-illustrated-message-heading-max-inline-size
--spectrum-illustrated-message-illustration-accent-color
--mod-illustrated-message-illustration-accent-color
--highcontrast-illustrated-message-illustration-accent-color

  Dropzone

  New mods
  --mod-drop-zone-body-to-action
--mod-drop-zone-illustration-to-title

  Dropzone nested mods

  Renamed mods
  --mod-illustrated-message-title-to-heading > --mod-illustrated-message-illustration-to-heading
--mod-illustrated-message-heading-to-body > --mod-illustrated-message-heading-to-description
--mod-illustrated-message-content-maximum-width > --mod-illustrated-message-vertical-maximum-width

Patch Changes

• Updated dependencies [b50d038]:
  • @spectrum-css/illustratedmessage@10.0.0-next.0

@spectrum-css/illustratedmessage@10.0.0-next.0

Major Changes

• #2352 b50d038 Thanks @pfulton! - # S2 Illustrated Message Migration

  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.

  Illustrated Message

  New properties
  --spectrum-illustrated-message-heading-to-description
--spectrum-illustrated-message-illustration-to-heading
--spectrum-illustrated-message-illustration-to-content
--spectrum-illustrated-message-description-to-action
--spectrum-illustrated-message-illustration-color
--spectrum-illustrated-message-illustration-size
--spectrum-illustrated-message-small-cjk-title-font-size
--spectrum-illustrated-message-large-cjk-title-font-size
--spectrum-illustrated-message-large-body-font-size
--spectrum-illustrated-message-horizontal-maximum-width

  New mods
  --mod-illustrated-message-description-to-action
--mod-illustrated-message-heading-to-description
--mod-illustrated-message-illustration-to-content
--mod-illustrated-message-horizontal-maximum-width

  Removed properties
  --spectrum-illustrated-message-title-to-heading
--spectrum-illustrated-message-description-max-inline-size
--spectrum-illustrated-message-heading-max-inline-size
--spectrum-illustrated-message-illustration-accent-color
--mod-illustrated-message-illustration-accent-color
--highcontrast-illustrated-message-illustration-accent-color

  Dropzone

  New mods
  --mod-drop-zone-body-to-action
--mod-drop-zone-illustration-to-title

  Dropzone nested mods

  Renamed mods
  --mod-illustrated-message-title-to-heading > --mod-illustrated-message-illustration-to-heading
--mod-illustrated-message-heading-to-body > --mod-illustrated-message-heading-to-description
--mod-illustrated-message-content-maximum-width > --mod-illustrated-message-vertical-maximum-width

@spectrum-css/popover@9.0.0-next.0

Major Changes

• #2352 f158499 Thanks @pfulton! - S2 Popover Migration

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

  Renamed Mods

  Old mod	New mod
  --mod-popover-shadow-blur	--mod-popover-drop-shadow-blur
  --mod-popover-shadow-color	--mod-popover-drop-shadow-color
  --mod-popover-shadow-horizontal	--mod-popover-drop-shadow-x
  --mod-popover-shadow-vertical	--mod-popover-drop-shadow-y
  --mod-popover-content-area-spacing-vertical	--mod-popover-content-area-spacing

Patch Changes

• Updated dependencies [8a4ab84]:
  • @spectrum-css/dialog@13.0.0-next.0

@spectrum-css/progresscircle@6.0.0-next.0

Major Changes

• #2352 e911854 Thanks @pfulton! - ## Progress circle S2 migration

  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

  Animation

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

  Added tokens

  Removed styles & mods

  --spectrum-progress-circle-track-border-color-over-background
--spectrum-progress-circle-fill-border-color-over-background
--spectrum-progress-circle-track-border-style
--spectrum-progress-circle-track-border-style
--highcontrast-progress-circle-track-border-style
--mod-progress-circle-track-border-style
--spectrum-progress-circle-track-border-style

@spectrum-css/coachmark@9.1.0-next.0

Minor Changes

• #2352 f158499 Thanks @pfulton! - CSS references to popover custom properties/tokens were updated to reflect some mod name changes in the S2 popover (feat(popover): migrate s2 popover #3365). The corner radius token was updated to correspond to the new S2 popover corner radius, as well as some updated popover mod names:

  • --mod-popover-content-area-spacing-vertical was updated to --mod-popover-content-area-spacing.
  • --spectrum-border-width-100 was updated to --spectrum-corner-radius-large-default

Patch Changes

• Updated dependencies [f158499]:
  • @spectrum-css/popover@9.0.0-next.0

@spectrum-css/colorslider@8.1.0-next.0

Minor Changes

• #2352 8381dd0 Thanks @pfulton! - # S2 colorslider migration

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

  Before	After
  --spectrum-gray-900-rgb	--spectrum-gray-1000-rgb

@spectrum-css/modal@7.1.0-next.0

Minor Changes

• #2352 8a4ab84 Thanks @pfulton! - S2 Takeover dialog

  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). 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).

  Takeover dialogs also support replacing text in the header and body areas with other components. This required an additional .spectrum-Dialog-headerContentWrapper element that should center whatever component/content within.

  Class names updated to match naming convention (remove hyphens and capitalize second word):
  .spectrum-Dialog-header-content > .spectrum-Dialog-headerContent
.spectrum-Dialog-footer-content > .spectrum-Dialog-footerContent

  New Mods
  --mod-takeover-dialog-grid-spacing
--mod-takeover-dialog-spacing-header-content-gap
--mod-takeover-dialog-title-font-size

  Modal updates

  • 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

@spectrum-css/picker@9.0.2-next.0

Patch Changes

• #2352 f158499 Thanks @pfulton! - S2 Popover has an updated default position, bottom-start. The correct .spectrum-Popover--bottom-start class was added to the open popover selector blocks for picker so that the spacing from the picker to the popover is correctly adjusted.

• Updated dependencies [e911854, f158499]:

  • @spectrum-css/progresscircle@6.0.0-next.0
  • @spectrum-css/popover@9.0.0-next.0