@spectrum-css/[email protected]

Minor Changes

• #3656 911c390 Thanks @aramos-adobe! - #### Including the touch action rule for draggable content

  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.

  Adding touch-action: none to a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming from interfering with the component's intended interaction.

  These components also include user-select: none to prevent selection or highlighting of any text elements.

@spectrum-css/[email protected]

Minor Changes

• #3656 911c390 Thanks @aramos-adobe! - #### Including the touch action rule for draggable content

  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.

  Adding touch-action: none to a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming from interfering with the component's intended interaction.

  These components also include user-select: none to prevent selection or highlighting of any text elements.

@spectrum-css/[email protected]

Minor Changes

• #3656 911c390 Thanks @aramos-adobe! - #### Including the touch action rule for draggable content

  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.

  Adding touch-action: none to a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming from interfering with the component's intended interaction.

  These components also include user-select: none to prevent selection or highlighting of any text elements.

@spectrum-css/[email protected]

Minor Changes

• #3656 911c390 Thanks @aramos-adobe! - #### Including the touch action rule for draggable content

  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.

  Adding touch-action: none to a slider or any draggable component is necessary to prevent the browser's default touch behaviors—such as scrolling, pinch-zooming, or double-tap zooming from interfering with the component's intended interaction.

  These components also include user-select: none to prevent selection or highlighting of any text elements.

@spectrum-css/[email protected]

Major Changes

• #3531 e4556f1 Thanks @aramos-adobe!

Spectrum 2 migration

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

Updates

• Checkbox has a background color token: --spectrum-checkbox-background-color
• New typography additions: line-height, font-weight, and font style
• spectrum-Checkbox--sizeM is now the default style settings of the component.
• Fixed typo in --mod-focus-indicator-thickness
• Removed interactive state selectors in --emphasized variant that was overriding other variants
• Refactored WHCM settings for read-only and disabled states
• --mod-checkbox-spacing has been renamed to --mod-checkbox-margin-block

New tokens

--spectrum-component-size-width-ratio-down
--spectrum-checkbox-bottom-to-text
--spectrum-checkbox-top-to-control
--spectrum-accent-content-color-default
--spectrum-accent-content-color-hover
--spectrum-accent-content-color-down
--spectrum-accent-content-color-key-focus

Modified tokens

--spectrum-checkbox-checkmark-color
--spectrum-checkbox-invalid-color-down
--spectrum-checkbox-control-color-default
--spectrum-checkbox-control-color-hover
--spectrum-checkbox-control-color-down
--spectrum-checkbox-control-color-focus

@spectrum-css/[email protected]

Patch Changes

• #3687 53d1e5e Thanks @marissahuysentruyt! - ### S2 button fixes

  This work addresses some regressions noticed in the migrated S2 button. Mainly, the borders were gray where they were not supposed to be. Most of the changes are to ensure that the correct S2 tokens are being used appropriately in the styles and button follows the S2 design specs.

  Additionally, there was some missing style support for the .spectrum-Button--noWrap option, so this work reimplements a "no wrapping" option for button components, and removes some of the repetitiveness in the no wrap test cases and story.

  PRs used as reference:

  • S2 button migration
  • Add text wrapping option
  • PostCSS plugin updates/fixes

@spectrum-css/[email protected]

Major Changes

• Release bundle with the latest styles on the S2 feature branch.

@spectrum-css/[email protected]

Major Changes

• #3740 075fc91 Thanks @5t3ph! - This migrates the base Badge component to S2 designs, but does not include the "Notification" or "Highlight" types.

  • New semantic color: "notice"
  • Updated/expanded non-semantic colors
    • New colors:
      • pink
      • turquoise
      • brown
      • cinnamon
      • silver
  • New "styles" to be used alongside a color choice, such as spectrum-Badge--accent spectrum-Badge--style-subtle
    • subtle (lighter version of bg color)
    • outline (border color, only semantic colors)
  • Updated border-radius per size
  • Updated border-width
    • updated related padding/margin definitions to account for border-width

  New mods

  New mods added for each new color, as well as for the style-related application of each valid color, ex. --mod-badge-subtle-background-color-accent and --mod-badge-outline-border-color-informative. See the full diff of updates.

  Also added for the default --mod-badge-border-color and --mod-badge-border-width

@spectrum-css/[email protected]

Major Changes

• #3725 f977e60 Thanks @cdransf!

S2 migration

This migrates the alert dialog component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

The icon in the dialog header has been moved from the right side to the left.

The dialog divider has been removed.

Primary button style has been updated to filled.

The following variants remain supported:

• Confirmation
• Information
• Destructive
• Warning (with AlertDiamond icon)
• Error (with AlertTriangle icon)

Dialog buttons may be displayed either horizontally or vertically.

Removed custom properties

--spectrum-alert-dialog-description-to-buttons
--spectrum-alert-dialog-divider-to-description
--spectrum-alert-dialog-padding
--spectrum-alert-dialog-title-size
--spectrum-alert-dialog-title-to-divider
--spectrum-alert-dialog-title-to-icon

New custom properties

--spectrum-alert-dialog-background-color
--spectrum-alert-dialog-corner-radius
--spectrum-alert-dialog-description-font-size
--spectrum-alert-dialog-description-to-button-group
--spectrum-alert-dialog-edge-to-content
--spectrum-alert-dialog-heading-size
--spectrum-alert-dialog-title-to-description

Removed mods

--mod-alert-dialog-body-font-size
--mod-alert-dialog-description-to-buttons
--mod-alert-dialog-divider-to-description
--mod-alert-dialog-padding
--mod-alert-dialog-title-to-divider
--mod-alert-dialog-title-to-icon

New mods

--mod-alert-dialog-background-color
--mod-alert-dialog-corner-radius
--mod-alert-dialog-description-content-size
--mod-alert-dialog-description-to-button-group
--mod-alert-dialog-edge-to-content
--mod-alert-dialog-heading-size
--mod-alert-dialog-minimum-title-to-icon
--mod-alert-dialog-title-to-description

@spectrum-css/[email protected]

Major Changes

• #3657 c06e995 Thanks @aramos-adobe!

Action bar S2 migration

Action bar now has some updated colors, corner radius, and icons. There's a new look to the default and emphasized variants.

The emphasized has changed from an accent background color to a neutral background color. In light mode, the clear button and action buttons are staticWhite and in dark mode they are staticBlack.

New tokens

--spectrum-actionbar-emphasized-actionbutton-label-color
--spectrum-actionbar-emphasized-icon-color
--spectrum-actionbar-minimum-width
--spectrum-actionbar-spacing-label-to-action-group
--spectrum-actionbar-spacing-action-group-edge
--spectrum-actionbar-close-button-to-counter

New modifiers

--mod-actionbar-minimum-width
--mod-actionbar-spacing-action-group-edge
--mod-actionbar-spacing-label-to-action-group