diff --git a/.changeset/angry-needles-behave.md b/.changeset/angry-needles-behave.md new file mode 100644 index 00000000000..ff2b31a96dc --- /dev/null +++ b/.changeset/angry-needles-behave.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/radio": major +--- + +### Spectrum 2 migration + +Updates: + +- High contrast tokens have been modified +- Typography tokens modified + +#### New tokens + +`--spectrum-radio-border-width` +`--spectrum-radio-text-font-weight` +`--spectrum-radio-text-font-style` + +#### Modified tokens + +`--spectrum-radio-emphasized-accent-color` +`--spectrum-radio-emphasized-accent-color-hover` +`--spectrum-radio-emphasized-accent-color-down` +`--spectrum-radio-emphasized-accent-color-focus` diff --git a/.changeset/beige-dragons-tickle.md b/.changeset/beige-dragons-tickle.md new file mode 100644 index 00000000000..a9603d574fe --- /dev/null +++ b/.changeset/beige-dragons-tickle.md @@ -0,0 +1,49 @@ +--- +"@spectrum-css/illustratedmessage": major +"@spectrum-css/dropzone": major +--- + +### 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` diff --git a/.changeset/big-beds-care.md b/.changeset/big-beds-care.md new file mode 100644 index 00000000000..6b296b0347d --- /dev/null +++ b/.changeset/big-beds-care.md @@ -0,0 +1,39 @@ +--- +"@spectrum-css/dropzone": major +--- + +### Spectrum 2 migration + +Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed. + +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. + +#### SVG Border + +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. + +#### New mods + +`--mod-drop-zone-content-height` +`--mod-drop-zone-edge-to-text` +`--mod-drop-zone-title-line-height` +`--mod-drop-zone-border-dash-length` +`--mod-drop-zone-border-dash-gap` + +#### Removed mods + +`--mod-drop-zone-body-color` +`--mod-drop-zone-body-font-family` +`--mod-drop-zone-body-font-style` +`--mod-drop-zone-body-font-weight` +`--mod-drop-zone-body-line-height` +`--mod-drop-zone-content-color` +`--mod-drop-zone-content-edge-to-text` +`--mod-drop-zone-content-font-size` +`--mod-drop-zone-heading-color` +`--mod-drop-zone-heading-font-family` +`--mod-drop-zone-heading-font-size` +`--mod-drop-zone-heading-font-style` +`--mod-drop-zone-heading-font-weight` +`--mod-drop-zone-heading-line-height` +`--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title` diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md new file mode 100644 index 00000000000..debc67c7479 --- /dev/null +++ b/.changeset/big-jars-pump.md @@ -0,0 +1,82 @@ +--- +"@spectrum-css/inlinealert": major +--- + +#### Spectrum 2 migration + +This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification. + +Subtle and bold treatments have been added for each badge variant. + +To use the subtle treatment, you will need to apply the `spectrum-InLineAlert--subtle` class: + +```html +
+
+ Info variant with subtle fill + +
+
This is an alert.
+
+``` + +To use the bold treatment (which is reserved for high-attention alerts only), you will need to apply the `spectrum-InLineAlert--bold` class: + +```html +
+
+ Info variant with bold fill + +
+
This is an alert.
+
+``` + +Because subtle and bold treatments draw a similar level of attention you should choose only one to use consistently within a single product. + +##### New mods + +`--mod-inlinealert-border-and-icon-color-neutral` +`--mod-inlinealert-min-spacing-header-to-icon` +`--mod-inlinealert-spacing-content-link-button` +`--mod-inlinealert-spacing-header-content` + +##### Removed mods + +`--mod-inlinealert-spacing-header-content-button` +`--mod-inlinealert-spacing-header-to-icon` + +##### New custom properties + +`--spectrum-inlinealert-min-spacing-header-to-icon` +`--spectrum-inlinealert-spacing-content-link-button` +`--spectrum-inlinealert-spacing-header-content` + +##### Removed custom properties + +`--spectrum-inlinealert-spacing-header-content-button` +`--spectrum-inlinealert-spacing-header-to-icon` diff --git a/.changeset/breezy-impalas-push.md b/.changeset/breezy-impalas-push.md new file mode 100644 index 00000000000..e39b5117aec --- /dev/null +++ b/.changeset/breezy-impalas-push.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/switch": patch +--- + +### S2 switch fixes + +This work addresses minor regressions in the Switch component. Animation tokens are reimplemented and their usage updated within the style definitions. + +Reference: + +- [S2 switch migration](https://github.com/adobe/spectrum-css/pull/2651) diff --git a/.changeset/calm-hats-sleep.md b/.changeset/calm-hats-sleep.md new file mode 100644 index 00000000000..8b357dbd180 --- /dev/null +++ b/.changeset/calm-hats-sleep.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/bundle": major +--- + +Release bundle with the latest styles on the S2 feature branch. diff --git a/.changeset/chatty-lands-attack.md b/.changeset/chatty-lands-attack.md new file mode 100644 index 00000000000..5780ab4adbb --- /dev/null +++ b/.changeset/chatty-lands-attack.md @@ -0,0 +1,44 @@ +--- +"@spectrum-css/accordion": major +--- + +### Spectrum 2 migration + +Accordion now uses Spectrum 2 tokens and specifications. + +New sized tokens are used for corner rounding, the spacing around the disclosure icon, and +the spacing around the content area. + +#### New features + +- Adds the optional "quiet" style, which does not show dividers between accordion items. +- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and + collapsing the accordion item. +- Adds no inline padding variant (`.spectrum-Accordion--noInlinePadding`) in which the item + header does not have padding. +- Per design spec, accordion items have a min-width and default width. Default width can be + overridden with `--mod-accordion-item-width` but should not be smaller than + `--spectrum-accordion-item-minimum-width`. + +#### Markup changes + +The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved +from outside the button (`spectrum-Accordion-itemHeader`), to within the button. The extra +element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has +been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading +text. + +#### Mod changes + +The following `--mod` custom properties have been renamed to better reflect how they are used: + +- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height` +- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size` +- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline` + +New mods: + +- `--mod-accordion-animation-duration` +- `--mod-accordion-edge-to-content-area` +- `--mod-accordion-item-minimum-width` +- `--mod-accordion-top-to-disclosure-indicator` diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md new file mode 100644 index 00000000000..f7a8def296a --- /dev/null +++ b/.changeset/chilled-peaches-enjoy.md @@ -0,0 +1,27 @@ +--- +"@spectrum-css/actionbutton": major +--- + +Action button now uses Spectrum 2 tokens and design specifications. A few notable changes: + +- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed. +- Includes the Spectrum 2 down state transform. +- 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. +- 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. +- Background and content colors were updated. +- Mod custom properties have been adjusted: + - Renamed: + - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`. + - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`. + - Removed: + - `--mod-actionbutton-border-color-default` + - `--mod-actionbutton-border-color-disabled` + - `--mod-actionbutton-border-color-down` + - `--mod-actionbutton-border-color-focus` + - `--mod-actionbutton-border-color-hover` + - `--mod-actionbutton-border-width` + - `--mod-actionbutton-static-content-color` + - New: + - `--mod-actionbutton-font-weight` + - `--mod-actionbutton-font-style` diff --git a/.changeset/chilly-peaches-sniff.md b/.changeset/chilly-peaches-sniff.md new file mode 100644 index 00000000000..ff068af2dd2 --- /dev/null +++ b/.changeset/chilly-peaches-sniff.md @@ -0,0 +1,21 @@ +--- +"@spectrum-css/statuslight": major +--- + +#### Spectrum 2 migration + +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. + +New mods added: + +- `--mod-statuslight-font-family` +- `--mod-statuslight-font-style` +- `--mod-statuslight-nonsemantic-brown-color` +- `--mod-statuslight-nonsemantic-cinnamon-color` +- `--mod-statuslight-nonsemantic-pink-color` +- `--mod-statuslight-nonsemantic-silver-color` +- `--mod-statuslight-nonsemantic-turquoise-color` + +Removed mods: + +- `--mod-statuslight-semantic-accent-color` diff --git a/.changeset/clean-oranges-smell.md b/.changeset/clean-oranges-smell.md new file mode 100644 index 00000000000..3deb7bdb737 --- /dev/null +++ b/.changeset/clean-oranges-smell.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/preview": major +--- + +Updates Storybook to use the latest icon sets for Spectrum 2. Includes changes to the directories that +are used for loading in the sprite sheet and the individual icons, as they have moved. + +The global Icon Loader has been updated to apply the existing key name renaming from file names to icon +names. This is now done once at the loader step, rather than each time within the Icon component template. +The loader also now excludes the handful of 22x20 workflow icons, as these are not yet handled within the +design system. diff --git a/.changeset/cute-pillows-stand.md b/.changeset/cute-pillows-stand.md new file mode 100644 index 00000000000..99bfac2be60 --- /dev/null +++ b/.changeset/cute-pillows-stand.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/statuslight": patch +--- + +### S2 status light fix + +This work removes the reference to `default-font-family` in favor for `sans-font-family-stack` to ensure the status light's font renders appropriately for web. diff --git a/.changeset/cute-windows-unite.md b/.changeset/cute-windows-unite.md new file mode 100644 index 00000000000..a32d9caff7b --- /dev/null +++ b/.changeset/cute-windows-unite.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/ui-icons": minor +--- + +Updates ui-icons to include linkout-75 icon. diff --git a/.changeset/deep-sloths-fetch.md b/.changeset/deep-sloths-fetch.md new file mode 100644 index 00000000000..6187473f470 --- /dev/null +++ b/.changeset/deep-sloths-fetch.md @@ -0,0 +1,24 @@ +--- +"@spectrum-css/actionbar": major +--- + +### Actionbar 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 mods + +`--mod-actionbar-minimum-width` +`--mod-actionbar-spacing-action-group-edge` +`--mod-actionbar-spacing-label-to-action-group` diff --git a/.changeset/dirty-melons-look.md b/.changeset/dirty-melons-look.md new file mode 100644 index 00000000000..790dd58227b --- /dev/null +++ b/.changeset/dirty-melons-look.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/swatch": patch +--- + +Updates the add swatch icon to use the ui rather than workflow icon diff --git a/.changeset/early-ends-fail.md b/.changeset/early-ends-fail.md new file mode 100644 index 00000000000..f37d0e64b3f --- /dev/null +++ b/.changeset/early-ends-fail.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/icon": minor +--- + +Adds icon class for link out 75 icon diff --git a/.changeset/eighty-terms-lead.md b/.changeset/eighty-terms-lead.md new file mode 100644 index 00000000000..659876812b8 --- /dev/null +++ b/.changeset/eighty-terms-lead.md @@ -0,0 +1,61 @@ +--- +"@spectrum-css/rating": major +--- + +#### Spectrum 2 migration + +This migrates the `rating` component to S2. Custom properties have been remapped and added per the design specification. + +##### Additions + +The medium component variation is the default and a t-shirt size medium variation has been added. + +A tooltip may be displayed to a user indicating whether interacting with the component will clear or edit the rating. A control and documentation example have been added. + +A rating may have a partially filled star. The width and fill of this star is controlled by adding `.is-partial` to the parent `span` with classes of `spectrum-Rating-icon` and `is-selected` and then setting `--mod-rating-icon-fill` to the necessary fill percentage (e.g. `50%`). + +##### New mods + +`--mod-rating-width` +`--mod-rating-height` +`--mod-rating-bottom-to-content-area` +`--mod-rating-edge-to-content-area` +`--mod-rating-top-to-content-area` +`--mod-rating-icon-fill` + +##### Removed mods + +`--mod-rating-icon-spacing-vertical-top` +`--mod-rating-icon-count` +`--mod-rating-indicator-border-radius` +`--mod-rating-indicator-height` +`--mod-rating-icon-color-key-focus` + +##### New custom properties + +`--spectrum-rating-width` +`--spectrum-component-size-difference-down` +`--spectrum-component-size-minimum-perspective-down` +`--spectrum-corner-radius-medium-size-medium` +`--spectrum-corner-radius-medium-size-small` +`--spectrum-neutral-content-color-default` +`--spectrum-neutral-content-color-down` +`--spectrum-neutral-content-color-hover` +`--spectrum-spacing-75` +`--spectrum-workflow-icon-size-75` + +##### Removed custom properties + +`--spectrum-rating-indicator-width` +`--spectrum-rating-icon-color-key-focus` +`--spectrum-rating-icon-spacing-vertical-top` +`--spectrum-rating-indicator-height` +`--spectrum-rating-indicator-border-radius` +`--spectrum-accent-content-color-key-focus` +`--spectrum-border-width-200` +`--spectrum-component-top-to-workflow-icon-100` +`--spectrum-corner-radius-100` +`--spectrum-neutral-subdued-content-color-default` +`--spectrum-neutral-subdued-content-color-down` +`--spectrum-neutral-subdued-content-color-hover` +`--spectrum-neutral-subdued-content-color-key-focus` diff --git a/.changeset/fair-coins-buy.md b/.changeset/fair-coins-buy.md new file mode 100644 index 00000000000..8971c89f310 --- /dev/null +++ b/.changeset/fair-coins-buy.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/link": patch +--- + +### S2 link fix + +This work adds the static color focus ring tokens to links (so that static white and static black links do _not_ have the usual blue focus ring). diff --git a/.changeset/few-doors-smile.md b/.changeset/few-doors-smile.md new file mode 100644 index 00000000000..872a7c98e6d --- /dev/null +++ b/.changeset/few-doors-smile.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/buttongroup": patch +--- + +Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property. diff --git a/.changeset/flat-snails-admire.md b/.changeset/flat-snails-admire.md new file mode 100644 index 00000000000..eeaa8dde839 --- /dev/null +++ b/.changeset/flat-snails-admire.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/infieldprogresscircle": major +--- + +#### Spectrum 2 migration + +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. diff --git a/.changeset/fluffy-hands-appear.md b/.changeset/fluffy-hands-appear.md new file mode 100644 index 00000000000..9ab1060e135 --- /dev/null +++ b/.changeset/fluffy-hands-appear.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/switch": patch +--- + +Fix active down state specificity by increasing the specificity of the active state selector. This change was necessary because the `postcss-hover-media-feature` plugin converts hover styles into a media query for devices that support hover. Without this adjustment, the hover styles could override the active down state styles due to the way CSS specificity and order are handled. By adding the additional `.spectrum-Switch` class in the active state selector, we ensure that the active state takes precedence over the hover state, maintaining the correct visual behavior of the switch component across different interaction states. diff --git a/.changeset/four-lemons-warn.md b/.changeset/four-lemons-warn.md new file mode 100644 index 00000000000..5f55065100f --- /dev/null +++ b/.changeset/four-lemons-warn.md @@ -0,0 +1,30 @@ +--- +"@spectrum-css/combobox": major +"@spectrum-css/helptext": minor +--- + +### Combobox S2 Migration + +#### New Changes + +- Removed quiet styling variant +- Updated corner radius to match S2 specifications +- Changed outline thickness for better visibility +- Replaced picker button with in-field button component +- Added help text along with invalid state +- Modified the WHCM invalid/error state in help text + +### New tokens + +`--spectrum-combobox-font-weight` +`--spectrum-combobox-line-height-cjk` +`--spectrum-combobox-spacing-alert-icon-to-text` +`--spectrum-combobox-spacing-to-help-text` + +### New mods + +`--mod-combobox-line-height-cjk` +`--mod-combobox-popover-animation-distance` +`--mod-combobox-spacing-alert-icon-to-text` +`--mod-combobox-spacing-to-help-text` +`--mod-combobox-textfield-background-color` diff --git a/.changeset/fresh-crabs-deliver.md b/.changeset/fresh-crabs-deliver.md new file mode 100644 index 00000000000..faec2d41674 --- /dev/null +++ b/.changeset/fresh-crabs-deliver.md @@ -0,0 +1,16 @@ +--- +"@spectrum-css/breadcrumb": major +--- + +#### Spectrum 2 Breadcrumbs 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. diff --git a/.changeset/fresh-seahorses-join.md b/.changeset/fresh-seahorses-join.md new file mode 100644 index 00000000000..c61e578bd5b --- /dev/null +++ b/.changeset/fresh-seahorses-join.md @@ -0,0 +1,9 @@ +--- +"@spectrum-css/button": patch +--- + +#### Remove spectrum-ButtonWithFocusRing placeholder class extend + +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. + +This should not result in any changed visuals or behavior, as the same CSS has been integrated. diff --git a/.changeset/fresh-spoons-try.md b/.changeset/fresh-spoons-try.md new file mode 100644 index 00000000000..39f9d2e0885 --- /dev/null +++ b/.changeset/fresh-spoons-try.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/logicbutton": patch +--- + +### S2 logic button fix + +Adds `border-style: solid` to the styles to avoid a 3D effect on the border. diff --git a/.changeset/friendly-dolls-raise.md b/.changeset/friendly-dolls-raise.md new file mode 100644 index 00000000000..e8504c217f4 --- /dev/null +++ b/.changeset/friendly-dolls-raise.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/avatar": major +--- + +Adds support for new avatar-size tokens (avatar-size-800 to avatar-size-1500). Updates avatar component story to support new sizes. Adds support for avatar-border-color and avatar-border-thickness. diff --git a/.changeset/giant-windows-smoke.md b/.changeset/giant-windows-smoke.md new file mode 100644 index 00000000000..da6f755a334 --- /dev/null +++ b/.changeset/giant-windows-smoke.md @@ -0,0 +1,26 @@ +--- +"@spectrum-css/colorwheel": major +--- + +#### Spectrum 2 migration + +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. + +This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs. `::before` and `::after` pseudo elements are now used to draw the exterior and interior borders that overlay the exterior and interior edges of the color wheel. + +Support is provided for the `240px` and `192px` sizes outlined in the design requirements. + +The `forced-colors` media query has been moved to the bottom of the file consistent with our other component implementations. + +Stories, tests and documentation have been updated to be consistent with these changes. + +The following mods have been removed: + +```css +--mod-colorwheel-height +--mod-colorwheel-width +--mod-colorwheel-min-width +--mod-colorwheel-path-borders +--mod-colorwheel-colorarea-margin +--mod-colorwheel-border-width +``` diff --git a/.changeset/gold-cats-hide.md b/.changeset/gold-cats-hide.md new file mode 100644 index 00000000000..e99c3ae0940 --- /dev/null +++ b/.changeset/gold-cats-hide.md @@ -0,0 +1,13 @@ +--- +"@spectrum-css/popover": minor +--- + +Restores drop shadow for nested popovers. This is done by moving the default popover to `box-shadow` and using `filter` for popovers with tip. This allows for visual consistency across all popovers. + +##### New mods + +`--mod-popover-box-shadow` + +##### New custom properties + +`--spectrum-popover-box-shadow` diff --git a/.changeset/healthy-chicken-clap.md b/.changeset/healthy-chicken-clap.md new file mode 100644 index 00000000000..e0364a1a8a7 --- /dev/null +++ b/.changeset/healthy-chicken-clap.md @@ -0,0 +1,48 @@ +--- +"@spectrum-css/textfield": major +--- + +#### Migrate to Spectrum 2 + +- Default styles are used for medium +- Removal of quiet variant +- Style adjustments to match design spec: + - Spacing start/end edge to value for XL component should use `component-edge-to-text-300`, not `-200` + - Spacing top edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-top-to-text-75`, `-100`, `-200`, and `-300`) + - Spacing bottom edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-bottom-to-text-75`, `-100`, `-200`, and `-300`) + - Border thickness has been increased to 2px, and border colors have been updated to match spec + - Adjust side label inline spacing to field, should be `spacing-200` for all tshirt sizes + - Change disabled background color to `gray-25` + - Change disabled-border-color from transparent to `disabled-border-color` +- Use new and updated tokens: + - use tokens for textfield width (`field-default-width-small`, `-medium`, `-large`, `-extra-large`) + - use updated corner radius tokens + - use different component-bottom-to-text tokens for character-count-spacing-block + - update tokens for alert icon block spacing + - update tokens for alert and invalid inline-start spacing + - update font tokens + +Adds mods: + +- `--mod-textfield-character-count-color` +- `--mod-textfield-character-count-font-style` +- `--mod-textfield-character-count-line-height` +- `--mod-textfield-character-count-line-height-cjk` +- `--mod-textfield-font-style` +- `--mod-textfield-line-height` (used for multiline only) +- `--mod-textfield-line-height-cjk` + +Removes mods: + +- `--mod-text-area-min-block-size-quiet` +- `--mod-textfield-character-count-spacing-block-quiet` +- `--mod-textfield-icon-spacing-inline-end-quiet-invalid` +- `--mod-textfield-icon-spacing-inline-end-quiet-valid` +- `--mod-textfield-label-spacing-block-quiet` +- `--mod-textfield-spacing-block-quiet` +- `--mod-textfield-spacing-inline-quiet` + +Changed mods: + +- `--mod-texfield-animation-duration` --> `--mod-textfield-animation-duration` +- `--mod-texfield-placeholder-font-size` --> `--mod-texfield-placeholder-font-size` diff --git a/.changeset/hip-shoes-listen.md b/.changeset/hip-shoes-listen.md new file mode 100644 index 00000000000..5fb94d03452 --- /dev/null +++ b/.changeset/hip-shoes-listen.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/tokens": patch +--- + +Adds `--spectrum-table-selected-row-background-color-rgb` to `light-vars.css` and `dark-vars.css` for custom tokens. diff --git a/.changeset/honest-animals-stop.md b/.changeset/honest-animals-stop.md new file mode 100644 index 00000000000..b0ed21b7a14 --- /dev/null +++ b/.changeset/honest-animals-stop.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/fieldlabel": patch +--- + +#### Fix fieldlabel required icon wrapping + +Addresses case where fieldlabel required icon could appear on its own line when wrapping by applying text-wrap: pretty; to the parent label class and adding a non-breaking space character between the label content and required marker. diff --git a/.changeset/hot-books-fail.md b/.changeset/hot-books-fail.md new file mode 100644 index 00000000000..4c71ab8b722 --- /dev/null +++ b/.changeset/hot-books-fail.md @@ -0,0 +1,13 @@ +--- +"@spectrum-css/picker": major +--- + +#### Spectrum 2 migration + +Picker now uses Spectrum 2 tokens and specifications. A few notable changes: + +- The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. +- The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. +- The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. +- The mod custom property `--mod-picker-spacing-text-to-alert-icon-inline-start` has been renamed to `--mod-picker-spacing-text-to-icon-inline-end`. This removed the fallback that was marked as deprecated in a previous version. +- The mod custom property `--mod-picker-spacing-text-to-icon` has been removed. Use `--mod-picker-spacing-text-to-icon-inline-end` for the spacing between text and visual (indicator or disclosure), or `--mod-picker-spacing-starting-icon-to-text` for the space between the optional workflow icon and the text. diff --git a/.changeset/itchy-kids-travel.md b/.changeset/itchy-kids-travel.md new file mode 100644 index 00000000000..06d6804752b --- /dev/null +++ b/.changeset/itchy-kids-travel.md @@ -0,0 +1,24 @@ +--- +"@spectrum-css/progresscircle": major +--- + +#### Spectrum 2 migration + +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` + +##### 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` diff --git a/.changeset/itchy-shrimps-help.md b/.changeset/itchy-shrimps-help.md new file mode 100644 index 00000000000..68598dd4f7c --- /dev/null +++ b/.changeset/itchy-shrimps-help.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/picker": patch +--- + +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. diff --git a/.changeset/itchy-waves-work.md b/.changeset/itchy-waves-work.md new file mode 100644 index 00000000000..296143885ff --- /dev/null +++ b/.changeset/itchy-waves-work.md @@ -0,0 +1,82 @@ +--- +"@spectrum-css/stepper": major +--- + +### Number field S2 Migration + +This work migrations the stepper/number field component to Spectrum 2! 🎉 The S1 stepper was very minimal, and didn't align with SWC or React's implementation. This migration should bring parity to the CSS component. New features include: + +- the display name for this component has changed from `stepper` to `number field` (based on design's, React's and SWC's naming conventions.) + - _**Note:**_ The NPM package name has remained as "stepper," and hasn't yet changed to "number field."" +- an error state with alert icon +- optional help text +- embedded field label & optional positions + +#### Quick overview + +Because of all the new features and to align more with design, SWC and React, below is a quick recap of the following tokens & classes that have been renamed in the CSS: + +- All `.spectrum-Stepper*` class names have been converted to `.spectrum-NumberField*` +- The `.hide-stepper` class has been converted to `.spectrum-NumberField--hiddenStepper` +- Custom properties have been renamed from `--spectrum-stepper*` to `--spectrum-numberfield*` +- Modifiable custom properties have been renamed from `--mod-stepper*` to `--mod-numberfield*` +- Markup has changed +- Styling lives on different elements +- Lots more Chromatic test coverage + +#### Markup + +Following React's lead, the markup of the number field has changed. More obviously, help text and field label components are embedded into `.spectrum-NumberField`, instead of necessitating separate components. The number field now incorporates an error state that better reflects the embedded textfield's error state, so there is now an alert icon within the markup in an invalid number field. Additionally, a new `.spectrum-NumberField-inputs` containing wrapper was introduced to encapsulate the textfield element and infield button elements. This container allowed for some extra alignment styles for those 2 elements and then freed up the opportunity to introduced an "unstyled" `input` (as described more below). Custom classes were also added to the nested textfield and input elements to ensure styles for number field were passed correctly to the correct elements (`.spectrum-NumberField-textfield` and `.spectrum-NumberField-input`). + +Stemming from the infield button S2 migration, there is also an extra container for the inline (previously "stacked") stepper buttons. + +#### Styling + +The `.spectrum-NumberField-textfield` div is where the S2 design language lives (instead of on the input element), while the actual `input` (`.spectrum-NumberField-input`) is unstyled and incorporated more subtly. Breaking changes were introduced in all previous custom properties, where any `--spectrum-stepper-*` or `--mod-stepper-*` properties were renamed to `--spectrum-numberfield-*`or `--mod-numberfield-*`. This also applied to class names, where `.spectrum-Stepper` changed to `.spectrum-NumberField`. The `hide-stepper` class has also been updated to match our class naming conventions (`.spectrum-NumberField--hiddenStepper`). + +#### Mods + +Modifiable custom properties have been renamed from `--mod-stepper*` to `--mod-numberfield`. + +##### Removed custom properties include + +--mod-stepper-animation-duration +--mod-stepper-button-border-width +--mod-stepper-button-width +--mod-stepper-button-width-quiet +--mod-stepper-buttons-background-color +--mod-stepper-buttons-border-color +--mod-stepper-buttons-border-color-focus +--mod-stepper-buttons-border-color-focus-hover +--mod-stepper-buttons-border-color-hover +--mod-stepper-buttons-border-color-keyboard-focus +--mod-stepper-buttons-border-style +--mod-stepper-buttons-border-width +--mod-stepper-focus-indicator-visibility +--mod-stepper-height (renamed to --mod-numberfield-block-size) +--mod-stepper-width (renamed to --mod-numberfield-inline-size) + +##### New custom properties include + +--mod-numberfield-background-color +--mod-numberfield-background-color-disabled +--mod-numberfield-block-size (renamed from --mod-stepper-height) +--mod-numberfield-border-color-disabled +--mod-numberfield-border-color-invalid-default +--mod-numberfield-border-color-invalid-focus +--mod-numberfield-border-color-invalid-focus-hover +--mod-numberfield-border-color-invalid-hover +--mod-numberfield-border-color-invalid-keyboard-focus +--mod-numberfield-button-inline-offset +--mod-numberfield-font-family +--mod-numberfield-font-size +--mod-numberfield-font-style +--mod-numberfield-font-weight +--mod-numberfield-hidden-stepper-min-inline-size +--mod-numberfield-inline-size (renamed from --mod-stepper-width) +--mod-numberfield-label-to-field +--mod-numberfield-line-height +--mod-numberfield-min-inline-size +--mod-numberfield-spacing-block-end-edge-to-text +--mod-numberfield-spacing-block-start-edge-to-text +--mod-numberfield-spacing-field-to-helptext diff --git a/.changeset/khaki-icons-hammer.md b/.changeset/khaki-icons-hammer.md new file mode 100644 index 00000000000..7a84d651601 --- /dev/null +++ b/.changeset/khaki-icons-hammer.md @@ -0,0 +1,62 @@ +--- +"@spectrum-css/tag": major +--- + +Tag now uses Spectrum 2 tokens and specifications: + +- The invalid variant has been removed, tag errors are now displayed with help text within the tag group only. +- Borders remain in high contrast but are otherwise transparent. +- Thumbnail has been added as a visual option. +- Tag now has a max-inline-size. +- Read-only tags are now supported. +- Passthroughs for clear button have been updated to match the current spec. +- Default t-shirt size for tag is small. +- Clear button has accessibly sized target. +- Emphasized tags have accent coloring only when they are selected. + +Changed mods: + +- "--mod-tag-avatar-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end", +- "--mod-tag-icon-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end", +- "--mod-tag-spacing-inline-start" --> "--mod-tag-label-spacing-inline", +- "--mod-tag-label-spacing-inline-end" --> "--mod-tag-label-spacing-inline" +- "--mod-tag-clear-button-spacing-inline-start" --> "--mod-tag-label-to-clear-icon", +- "--mod-tag-clear-button-spacing-inline-end" --> "--mod-tag-edge-to-clear-icon" + +Added mods: + +- "--mod-tag-avatar-size", +- "--mod-tag-clear-button-size", +- "--mod-tag-label-font-family", +- "--mod-tag-label-font-style", +- "--mod-tag-label-line-height-cjk", +- "--mod-tag-maximum-width-multiplier", +- "--mod-tag-min-inline-size", +- "--mod-tag-thumbnail-size", +- "--mod-tag-visual-spacing-inline-start" + +Removed mods: + +- "--mod-tag-background-color-invalid-selected", +- "--mod-tag-background-color-invalid-selected-active", +- "--mod-tag-background-color-invalid-selected-focus", +- "--mod-tag-background-color-invalid-selected-hover", +- "--mod-tag-border-color-emphasized-active", +- "--mod-tag-border-color-emphasized-focus", +- "--mod-tag-border-color-emphasized-hover", +- "--mod-tag-border-color-invalid", +- "--mod-tag-border-color-invalid-active", +- "--mod-tag-border-color-invalid-focus", +- "--mod-tag-border-color-invalid-hover", +- "--mod-tag-border-color-invalid-selected", +- "--mod-tag-border-color-invalid-selected-active", +- "--mod-tag-border-color-invalid-selected-focus", +- "--mod-tag-border-color-invalid-selected-hover", +- "--mod-tag-border-color-selected-active", +- "--mod-tag-border-color-selected-focus", +- "--mod-tag-border-color-selected-hover", +- "--mod-tag-content-color-invalid", +- "--mod-tag-content-color-invalid-active", +- "--mod-tag-content-color-invalid-focus", +- "--mod-tag-content-color-invalid-hover", +- "--mod-tag-content-color-invalid-selected", diff --git a/.changeset/late-worms-reply.md b/.changeset/late-worms-reply.md new file mode 100644 index 00000000000..145328d49ca --- /dev/null +++ b/.changeset/late-worms-reply.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/floatingactionbutton": patch +--- + +## S2 floating action button fix + +Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. diff --git a/.changeset/legal-lands-warn.md b/.changeset/legal-lands-warn.md new file mode 100644 index 00000000000..63e5aac327d --- /dev/null +++ b/.changeset/legal-lands-warn.md @@ -0,0 +1,54 @@ +--- +"@spectrum-css/contextualhelp": major +--- + +#### S2 migration for contextual help + +This migrates the contextual help component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification. + +Typographic and color tokens have been updated per design specifications. + +All existing popover positioning variations are supported. + +##### New custom properties + +`--spectrum-contextual-help-body-color` +`--spectrum-contextual-help-body-line-height` +`--spectrum-contextual-help-body-sans-serif-font-family` +`--spectrum-contextual-help-body-sans-serif-font-style` +`--spectrum-contextual-help-body-sans-serif-font-weight` +`--spectrum-contextual-help-title-color` +`--spectrum-contextual-help-title-font-style` +`--spectrum-contextual-help-title-font-weight` +`--spectrum-contextual-help-title-line-height` +`--spectrum-contextual-help-title-sans-serif-font-family` + +##### New mods + +`--mod-contextual-help-body-line-height` +`--mod-contextual-help-body-sans-serif-font-family` +`--mod-contextual-help-body-sans-serif-font-style` +`--mod-contextual-help-body-sans-serif-font-weight` +`--mod-contextual-help-body-size` +`--mod-contextual-help-title-color` +`--mod-contextual-help-title-font-style` +`--mod-contextual-help-title-font-weight` +`--mod-contextual-help-title-line-height` +`--mod-contextual-help-title-sans-serif-font-family` +`--mod-contextual-help-content-spacing` +`--mod-contextual-help-heading-size` +`--mod-contextual-help-link-spacing` +`--mod-contextual-help-min-inline-size` +`--mod-contextual-help-padding` +`--mod-contextual-help-popover-maximum-width` + +##### Removed mods + +`--mod-contextual-help-title-sans-serif-font-family` +`--mod-spectrum-contextual-help-body-size` +`--mod-spectrum-contextual-help-content-spacing` +`--mod-spectrum-contextual-help-heading-size` +`--mod-spectrum-contextual-help-link-spacing` +`--mod-spectrum-contextual-help-minimum-width` +`--mod-spectrum-contextual-help-padding` +`--mod-spectrum-contextual-help-popover-maximum-width` diff --git a/.changeset/lemon-flowers-poke.md b/.changeset/lemon-flowers-poke.md new file mode 100644 index 00000000000..34307255d04 --- /dev/null +++ b/.changeset/lemon-flowers-poke.md @@ -0,0 +1,62 @@ +--- +"@spectrum-css/alertdialog": major +--- + +#### S2 migration for alert dialog + +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` diff --git a/.changeset/lemon-weeks-work.md b/.changeset/lemon-weeks-work.md new file mode 100644 index 00000000000..3ac5745d3eb --- /dev/null +++ b/.changeset/lemon-weeks-work.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/tokens": minor +--- + +#### Tokens + +Adds custom vars for coachmark action menu vertical spacing. These help provide consistent spacing between states when the action menu is and is not visible. + +In `tokens/custom/large-vars.css`: `--spectrum-coachmark-action-menu-vertical-offset`. + +In `tokens/custom/medium-vars.css`: `--spectrum-coachmark-action-menu-vertical-offset`. diff --git a/.changeset/light-years-speak.md b/.changeset/light-years-speak.md new file mode 100644 index 00000000000..71ecddca62f --- /dev/null +++ b/.changeset/light-years-speak.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/tooltip": major +--- + +#### Spectrum 2 migration + +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. + +The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform. + +Some custom property mods have been removed: + +- `--mod-tooltip-background-color-informative` +- `--mod-tooltip-background-color-negative` +- `--mod-tooltip-background-color-positive` +- `--mod-tooltip-icon-spacing-block-start` +- `--mod-tooltip-icon-spacing-inline-end` +- `--mod-tooltip-icon-spacing-inline-start` +- `--mod-tooltip-icon-width` + +And one mod has been added: + +- `--mod-tooltip-tip-corner-radius` diff --git a/.changeset/lovely-geckos-hammer.md b/.changeset/lovely-geckos-hammer.md new file mode 100644 index 00000000000..00550a17385 --- /dev/null +++ b/.changeset/lovely-geckos-hammer.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/link": minor +--- + +Fixes keyboard focus shift by changing padding to outline-offset diff --git a/.changeset/mean-eggs-learn.md b/.changeset/mean-eggs-learn.md new file mode 100644 index 00000000000..7df3bbecb4c --- /dev/null +++ b/.changeset/mean-eggs-learn.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/thumbnail": minor +--- + +Replaces `corner-radius-75` with `thumbnail-corner-radius`. diff --git a/.changeset/metal-fireants-switch.md b/.changeset/metal-fireants-switch.md new file mode 100644 index 00000000000..df127153dc4 --- /dev/null +++ b/.changeset/metal-fireants-switch.md @@ -0,0 +1,52 @@ +--- +"@spectrum-css/dialog": major +"@spectrum-css/modal": patch +"@spectrum-css/underlay": patch +--- + +#### Spectrum 2 Standard dialog migration + +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. + +The `.spectrum-Dialog--small`, `.spectrum-Dialog--medium`, and `.spectrum-Dialog--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes. Additionally, the spelling of the `.spectrum-Dialog--dismissable` class was corrected to `.spectrum-Dialog--dismissible`. + +Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed: + +_New Mods_ +`--mod-standard-dialog-spacing-title-to-header-content` +`--mod-standard-dialog-spacing-title-to-description` +`--mod-standard-dialog-header-content-font-size` + +_Renamed Mods_ +`--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small` +`--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width` +`--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large` +`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius` +`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size` +`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height` +`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color` +`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight` +`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight` +`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height` +`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color` +`--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size` +`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size` +`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size` +`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding` +`--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer` +`--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button` +`--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group` + +_Removed Mods_ +`--mod-dialog-confirm-buttongroup-padding-top` +`--mod-dialog-confirm-close-button-size` +`--mod-dialog-confirm-description-margin` +`--mod-dialog-confirm-description-padding` +`--mod-dialog-confirm-divider-block-spacing-end` +`--mod-dialog-confirm-divider-block-spacing-start` +`--mod-dialog-confirm-divider-height` + +Modal and underlay updates + +- Modal component now uses the updated corner rounding. +- Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens. diff --git a/.changeset/mighty-pigs-accept.md b/.changeset/mighty-pigs-accept.md new file mode 100644 index 00000000000..83be0beb618 --- /dev/null +++ b/.changeset/mighty-pigs-accept.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/progressbar": minor +"@spectrum-css/meter": minor +--- + +Adjust progressbar styles, story and template to support proper width token and sizes for medium (desktop) and large (mobile) platforms. + +- Progress bar and meter now use the same tokens to control their width. +- Progress bar and meter now have a set width regardless of t-shirt size. + +Removed mods +`--mod-meter-inline-size` + +New mods +`--mod-progressbar-inline-size` diff --git a/.changeset/modern-chairs-sit.md b/.changeset/modern-chairs-sit.md new file mode 100644 index 00000000000..efb2d950b1c --- /dev/null +++ b/.changeset/modern-chairs-sit.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/dialog": major +"@spectrum-css/modal": minor +--- + +#### 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](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). + +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` diff --git a/.changeset/nasty-rats-rhyme.md b/.changeset/nasty-rats-rhyme.md new file mode 100644 index 00000000000..f1cd0b500bd --- /dev/null +++ b/.changeset/nasty-rats-rhyme.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/bundle": major +--- + +Updated picker and table changes brought into the released bundle. diff --git a/.changeset/nice-cows-shout.md b/.changeset/nice-cows-shout.md new file mode 100644 index 00000000000..fbbcb96fb06 --- /dev/null +++ b/.changeset/nice-cows-shout.md @@ -0,0 +1,62 @@ +--- +"@spectrum-css/coachmark": major +--- + +#### S2 coachmark migration + +This migrates the `coachmark` component to S2. Custom properties have been remapped per the design spec. + +| Before | After | +| ------------------------------------------ | ----------------------------------------------- | +| --spectrum-heading-sans-serif-font-weight | --spectrum-title-sans-serif-font-weight | +| --spectrum-coach-mark-title-size | --spectrum-coach-mark-title-font-size | +| --spectrum-heading-line-height | --spectrum-title-line-height | +| --spectrum-heading-serif-font-style | --spectrum-title-serif-font-style | +| --spectrum-coach-mark-body-size | --spectrum-coach-mark-body-font-size | +| --spectrum-body-sans-serif-font-style | --spectrum-body-serif-font-style | +| --spectrum-coach-mark-pagination-body-size | --spectrum-coach-mark-pagination-body-font-size | + +### New properties + +```css +--spectrum-coach-mark-edge-to-content +--spectrum-coach-mark-maximum-width +--spectrum-coach-mark-media-height +--spectrum-coach-mark-media-minimum-height +--spectrum-coach-mark-minimum-width +--spectrum-coach-mark-pagination-color +--spectrum-coach-mark-pagination-text-to-bottom-edge +--spectrum-coach-mark-width +--spectrum-coachmark-body-to-footer +--spectrum-coachmark-border-radius +--spectrum-coachmark-border-size +--spectrum-coachmark-buttongroup-display +--spectrum-coachmark-buttongroup-mobile-display +--spectrum-coachmark-content-font-size +--spectrum-coachmark-content-font-weight +--spectrum-coachmark-header-to-body +--spectrum-coachmark-heading-to-action-button +--spectrum-coachmark-max-width +--spectrum-coachmark-media-fixed-height +--spectrum-coachmark-media-min-height +--spectrum-coachmark-menu-display +--spectrum-coachmark-menu-mobile-display +--spectrum-coachmark-min-width +--spectrum-coachmark-padding +--spectrum-coachmark-step-color +--spectrum-coachmark-step-font-size +--spectrum-coachmark-step-font-style +--spectrum-coachmark-step-text-font-weight +--spectrum-coachmark-step-text-line-height +--spectrum-coachmark-step-to-bottom +--spectrum-coachmark-title-color +--spectrum-coachmark-title-font-family +--spectrum-coachmark-title-font-size +--spectrum-coachmark-title-font-style +--spectrum-coachmark-title-text-font-weight +--spectrum-coachmark-title-text-line-height +``` + +## Additions + +Adds `--spectrum-coachmark-media-fixed-height` for fixed `4:3` image variant and an accompanying `--mod-coachmark-media-fixed-height` mod. This variation has been added to the `coachmark` component story as a boolean control labeled as `Fixed image height`. The class is conditionally added within the `hasImage` block and, as such, will only impact rendering when `hasImage` is also `true`. diff --git a/.changeset/nine-kings-repair.md b/.changeset/nine-kings-repair.md new file mode 100644 index 00000000000..de6461f105a --- /dev/null +++ b/.changeset/nine-kings-repair.md @@ -0,0 +1,18 @@ +--- +"@spectrum-css/button": major +--- + +#### S2 Button migration + +Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + +- Outline buttons are no longer available in accent and negative options — use the filled variant instead. +- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. +- The `.spectrum-Button--fill` class is no longer needed and has been removed. + +The following `--mod` custom properties have been renamed: + +- `--mod-line-height-100` has been renamed to `--mod-button-line-height` +- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family` +- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration` +- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight` diff --git a/.changeset/old-goats-chew.md b/.changeset/old-goats-chew.md new file mode 100644 index 00000000000..92074ba5f71 --- /dev/null +++ b/.changeset/old-goats-chew.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/tokens": patch +--- + +Adds `--spectrum-corner-radius-1000: 9999px;` to global-vars.css to override value of 0.5. This should ensure our components that use this custom property are properly rounded (i.e. the fully rounded swatch or search field) diff --git a/.changeset/olive-tools-hang.md b/.changeset/olive-tools-hang.md new file mode 100644 index 00000000000..4f8a291984d --- /dev/null +++ b/.changeset/olive-tools-hang.md @@ -0,0 +1,57 @@ +--- +"@spectrum-css/ui-icons": major +--- + +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. + +| Icon name | Migration notes | +| ----------------- | --------------- | +| Arrow75 | Deprecated | +| Arrow100 | - | +| Arrow200 | Deprecated | +| Arrow300 | Deprecated | +| Arrow400 | - | +| Arrow500 | Deprecated | +| Arrow600 | Deprecated | +| Asterisk75 | Deprecated | +| Asterisk100 | - | +| Asterisk200 | - | +| Asterisk300 | - | +| Checkmark50 | - | +| Checkmark75 | - | +| Checkmark100 | - | +| Checkmark200 | - | +| Checkmark300 | - | +| Checkmark400 | - | +| Checkmark500 | Deprecated | +| Checkmark600 | Deprecated | +| Chevron50 | - | +| Chevron75 | - | +| Chevron100 | - | +| Chevron200 | - | +| Chevron300 | - | +| Chevron400 | - | +| Chevron500 | Deprecated | +| Chevron600 | Deprecated | +| CornerTriangle75 | - | +| CornerTriangle100 | - | +| CornerTriangle200 | - | +| CornerTriangle300 | - | +| Cross75 | - | +| Cross100 | - | +| Cross200 | - | +| Cross300 | - | +| Cross400 | - | +| Cross500 | - | +| Cross600 | - | +| Dash50 | - | +| Dash75 | - | +| Dash100 | - | +| Dash200 | - | +| Dash300 | - | +| Dash400 | Deprecated | +| Dash500 | Deprecated | +| Dash600 | Deprecated | +| SingleGripper | Deprecated | +| DoubleGripper | Deprecated | +| TripleGripper | Deprecated | diff --git a/.changeset/open-squids-refuse.md b/.changeset/open-squids-refuse.md new file mode 100644 index 00000000000..e63c2bfcf56 --- /dev/null +++ b/.changeset/open-squids-refuse.md @@ -0,0 +1,20 @@ +--- +"@spectrum-css/picker": major +--- + +### S2 Picker component refactor + +- Refactors Picker component to use proper custom property naming conventions +- Adds size-specific animation distances for Popover component +- Improves component structure with proper class by renaming `spectrum-Picker` to `spectrum-Picker-button` +- `spectrum-Picker` now encapsulates help text, label, and popover components +- Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible +- Updates Popover animation distance to use `spectrum-Picker` custom properties + +#### New token + +`--spectrum-picker-popover-animation-distance` + +#### Renamed tokens + +`spectrum-picker-spacing-picker-to-popover` --> `--spectrum-picker-popover-animation-distance` diff --git a/.changeset/petite-toys-greet.md b/.changeset/petite-toys-greet.md new file mode 100644 index 00000000000..11c8cae1034 --- /dev/null +++ b/.changeset/petite-toys-greet.md @@ -0,0 +1,87 @@ +--- +"@spectrum-css/table": major +--- + +### S2 table migration + +Compared to the S1 table, this component has updated corner rounding, updated color tokens, some updated spacing, and an overall refreshed look. + +#### Net-new features + +- The S2 table supports an empty state, rendering an illustrated message component. +- As data is loading to the table, this component will render a progress circle during the loading state. +- There are 2 selection modes: single-select and multi-select. Multi-select tables (`selectionMode: "multiple"`) render an indeterminate checkbox in the `thead`/`div` equivalent. Single-select tables (`selectionMode: "single"`) do not render the indeterminate checkbox in the header row. (Note: the `selectionMode` arg is disabled and will not render in the Storybook control table.) +- For tables with sortable column, there are three new S2 icons used: `Sort` to indicate "general" sorting, `SortUp` for ascending sort direction, `SortDown` for descending sort direction. +- Tables support thumbnail, avatar, and icon components as content within a cell. +- Focus indicators for entire rows have been updated for rows to include a side focus indicator. + +#### Description of other S2 table work + +T-shirt sizing for tables is not technically supported, so t-shirt size classes (i.e. `.spectrum-Table--sizeS`), have been removed across all density variants. + +The `.spectrum-Table-cell--alignRight` class has been renamed to `.spectrum-Table-cell--alignEnd` to reflect the preference for "logical" positioning. The `.spectrum-Table-cell--alignCenter` class has been refactored to `.spectrum-Table-cell--alignStart`. + +In S1, the CSS table component only supported thumbnails. Because the S2 table supports thumbnails, as well as avatars and icons, most of the language regarding thumbnails has also changed. For instance, the `showThumbnail` storybook arg was refactored to `visualElement`. The following CSS classes have been removed or refactored to remove the thumbnail language in favor of "visual" instead: + +- `.spectrum-Table-thumbnailInner` >> `.spectrum-Table-visualInner` + +- `.spectrum-Table-row--thumbnail` >> **removed** +- `.spectrum-Table-cell--thumbnail` >> **removed** +- `.spectrum-Table-thumbnailInner` >> **removed** +- `.spectrum-Table-thumbnailContent` >> **removed** +- `.spectrum-Table-thumbnailInner` >> **removed** + +The drop zones have been refactored to approach the drop zone indicators as pseudo elements, as opposed to `outline` properties. + +Because there are multiple sort icons in the S2 table, `.spectrum-Table-sortedIcon` has been renamed to `.spectrum-Table-sortIcon`. + +Individual cell focus rings have rounded corners. + +The outer table border extends all the way around the `thead`/`div` equivalent. + +In Storybook, several new stories have been added to the docs page and the testing grid for Chromatic. These stories include `EmptyState`, `LoadingState`, `SingleSelect`, `NumericalData`, `TableStates`, `Sortable`. Documentation has been added for each of these stories, as well as expanded in other stories. + +#### Mods + +##### Renamed Modifiers + +| Old Modifier | New modifier | +| -------------------------------------------------- | ------------------------------------------------- | +| `--mod-table-border-radius--quiet` | `--mod-table-border-radius-quiet` | +| `--mod-table-header-top-to-text` | `--mod-table-header-row-top-to-text` | +| `--mod-table-header-bottom-to-text` | `--mod-table-header-row-bottom-to-text` | +| `--mod-table-cell-inline-space` | `--mod-table-cell-inline-spacing` | +| `--mod-table-checkbox-to-text` | `--mod-table-checkbox-to-cell-content` | +| `--mod-table-header-background-color--quiet` | `--mod-table-header-background-color-quiet` | +| `--mod-table-header-bottom-to-text` | `--mod-table-header-row-bottom-to-text` | +| `--mod-table-header-top-to-text` | `--mod-table-header-row-top-to-text` | +| `--mod-table-min-row-height--compact` | `--mod-table-min-row-height-compact` | +| `--mod-table-min-row-height--spacious` | `--mod-table-min-row-height-spacious` | +| `--mod-table-outer-border-inline-width--quiet` | `--mod-table-outer-border-inline-width-quiet` | +| `--mod-table-row-background-color--quiet` | `--mod-table-row-background-color-quiet` | +| `--mod-table-row-checkbox-block-spacing--compact` | `--mod-table-row-checkbox-block-spacing-compact` | +| `--mod-table-row-checkbox-block-spacing--spacious` | `--mod-table-row-checkbox-block-spacing-spacious` | +| `--mod-table-thumbnail-to-text` | `--mod-table-visual-to-text` | + +##### New Modifiers + +- `--mod-table-avatar-size` +- `--mod-table-avatar-size-compact` +- `--mod-table-avatar-size-spacious` +- `--mod-table-section-header-inline-start-spacing` +- `--mod-table-summary-row-bottom-to-text` +- `--mod-table-summary-row-min-height` +- `--mod-table-summary-row-top-to-text` + +##### Removed Modifiers + +- `--mod-table-edge-to-content` +- `--mod-table-header-row-checkbox-block-spacing` +- `--mod-table-avatar-size-spacious` +- `--mod-table-row-bottom-to-text--compact` +- `--mod-table-row-bottom-to-text--spacious` +- `--mod-table-row-top-to-text--compact` +- `--mod-table-row-top-to-text--spacious` +- `--mod-table-thumbnail-block-spacing` +- `--mod-table-thumbnail-block-spacing-compact` +- `--mod-table-thumbnail-block-spacing-spacious` diff --git a/.changeset/polite-moments-stay.md b/.changeset/polite-moments-stay.md new file mode 100644 index 00000000000..38fb80afbed --- /dev/null +++ b/.changeset/polite-moments-stay.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/modal": patch +--- + +In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers. diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000000..e7510b9ae31 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,184 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@spectrum-tools/gh-action-file-diff": "2.1.0", + "@spectrum-css/preview": "11.0.1-next.2", + "@spectrum-css/accordion": "7.0.1", + "@spectrum-css/actionbar": "10.0.1", + "@spectrum-css/actionbutton": "7.0.1", + "@spectrum-css/actiongroup": "6.0.1", + "@spectrum-css/actionmenu": "7.0.0", + "@spectrum-css/alertbanner": "3.0.1", + "@spectrum-css/alertdialog": "4.0.1", + "@spectrum-css/asset": "7.0.1", + "@spectrum-css/assetcard": "5.0.1", + "@spectrum-css/assetlist": "8.0.1", + "@spectrum-css/avatar": "9.0.1", + "@spectrum-css/badge": "6.0.1", + "@spectrum-css/breadcrumb": "11.0.1", + "@spectrum-css/button": "14.0.1", + "@spectrum-css/buttongroup": "9.0.1", + "@spectrum-css/calendar": "7.0.1", + "@spectrum-css/card": "11.0.1", + "@spectrum-css/checkbox": "10.0.1", + "@spectrum-css/clearbutton": "7.0.1", + "@spectrum-css/closebutton": "6.0.1", + "@spectrum-css/coachindicator": "4.0.1", + "@spectrum-css/coachmark": "9.0.1", + "@spectrum-css/colorarea": "7.0.1", + "@spectrum-css/colorhandle": "10.0.1", + "@spectrum-css/colorloupe": "7.0.1", + "@spectrum-css/colorslider": "8.0.1", + "@spectrum-css/colorwheel": "6.0.1", + "@spectrum-css/combobox": "4.0.1", + "@spectrum-css/commons": "11.0.0", + "@spectrum-css/contextualhelp": "5.0.1", + "@spectrum-css/datepicker": "4.0.1", + "@spectrum-css/dial": "5.0.1", + "@spectrum-css/dialog": "12.0.1", + "@spectrum-css/divider": "5.0.1", + "@spectrum-css/dropindicator": "7.0.1", + "@spectrum-css/dropzone": "8.0.1", + "@spectrum-css/fieldgroup": "7.0.1", + "@spectrum-css/fieldlabel": "10.0.1", + "@spectrum-css/floatingactionbutton": "4.0.1", + "@spectrum-css/form": "1.0.1", + "@spectrum-css/helptext": "7.0.1", + "@spectrum-css/icon": "9.0.1", + "@spectrum-css/illustratedmessage": "9.0.1", + "@spectrum-css/infieldbutton": "6.0.1", + "@spectrum-css/inlinealert": "10.0.1", + "@spectrum-css/link": "7.0.1", + "@spectrum-css/logicbutton": "6.0.1", + "@spectrum-css/menu": "9.0.1", + "@spectrum-css/meter": "1.0.1", + "@spectrum-css/miller": "8.0.1", + "@spectrum-css/modal": "7.0.1", + "@spectrum-css/opacitycheckerboard": "4.0.1", + "@spectrum-css/page": "9.0.1", + "@spectrum-css/pagination": "10.0.1", + "@spectrum-css/picker": "9.0.1", + "@spectrum-css/pickerbutton": "6.0.1", + "@spectrum-css/popover": "8.0.1", + "@spectrum-css/progressbar": "6.0.1", + "@spectrum-css/progresscircle": "5.0.1", + "@spectrum-css/radio": "10.0.1", + "@spectrum-css/rating": "6.0.1", + "@spectrum-css/search": "8.0.1", + "@spectrum-css/sidenav": "7.0.1", + "@spectrum-css/slider": "6.0.1", + "@spectrum-css/splitview": "7.0.1", + "@spectrum-css/statuslight": "9.0.1", + "@spectrum-css/steplist": "7.0.1", + "@spectrum-css/stepper": "7.0.1", + "@spectrum-css/swatch": "8.0.1", + "@spectrum-css/swatchgroup": "5.0.1", + "@spectrum-css/switch": "6.0.1", + "@spectrum-css/table": "8.0.1", + "@spectrum-css/tabs": "6.0.1", + "@spectrum-css/tag": "10.0.1", + "@spectrum-css/taggroup": "7.0.1", + "@spectrum-css/textfield": "8.0.1", + "@spectrum-css/thumbnail": "8.0.1", + "@spectrum-css/toast": "11.0.1", + "@spectrum-css/tooltip": "7.0.1", + "@spectrum-css/tray": "5.0.1", + "@spectrum-css/treeview": "12.0.1", + "@spectrum-css/typography": "8.0.1", + "@spectrum-css/underlay": "6.0.1", + "@spectrum-css/well": "7.0.1", + "@spectrum-tools/postcss-rgb-mapping": "1.0.0", + "@spectrum-tools/stylelint-no-missing-var": "2.0.1", + "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2", + "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.3", + "@spectrum-css/tokens": "16.0.0", + "@spectrum-css/bundle": "1.0.0", + "@spectrum-css/generator": "4.1.0", + "@spectrum-css/ui-icons": "1.1.2", + "@spectrum-css/infieldprogresscircle": "0.0.0" + }, + "changesets": [ + "angry-needles-behave", + "beige-dragons-tickle", + "big-beds-care", + "big-jars-pump", + "breezy-impalas-push", + "calm-hats-sleep", + "chatty-lands-attack", + "chilled-peaches-enjoy", + "chilly-peaches-sniff", + "clean-oranges-smell", + "cute-pillows-stand", + "deep-sloths-fetch", + "dirty-melons-look", + "eighty-terms-lead", + "fair-coins-buy", + "few-doors-smile", + "flat-snails-admire", + "fluffy-hands-appear", + "four-lemons-warn", + "fresh-crabs-deliver", + "fresh-seahorses-join", + "fresh-spoons-try", + "friendly-dolls-raise", + "giant-windows-smoke", + "healthy-chicken-clap", + "hip-shoes-listen", + "honest-animals-stop", + "hot-books-fail", + "itchy-kids-travel", + "itchy-shrimps-help", + "itchy-waves-work", + "khaki-icons-hammer", + "late-worms-reply", + "lemon-flowers-poke", + "lemon-weeks-work", + "light-years-speak", + "lovely-geckos-hammer", + "mean-eggs-learn", + "metal-fireants-switch", + "mighty-pigs-accept", + "modern-chairs-sit", + "nasty-rats-rhyme", + "nice-cows-shout", + "nine-kings-repair", + "old-goats-chew", + "olive-tools-hang", + "open-squids-refuse", + "petite-toys-greet", + "polite-moments-stay", + "proud-jokes-rule", + "proud-schools-reply", + "puny-kids-rhyme", + "real-jobs-flow", + "red-kiwis-flash", + "rotten-meals-share", + "serious-cameras-hammer", + "serious-clouds-jam", + "shaggy-schools-sing", + "six-donuts-march", + "slow-eyes-lay", + "small-impalas-search", + "smart-spoons-sneeze", + "spotty-bats-deny", + "spotty-onions-study", + "stale-pans-carry", + "strange-glasses-allow", + "strong-pianos-work", + "stupid-lemons-battle", + "sweet-brooms-fetch", + "tame-bobcats-beam", + "tame-knives-train", + "tasty-eagles-draw", + "thick-ears-win", + "tiny-candles-win", + "tiny-taxis-show", + "true-shrimps-dream", + "twenty-ravens-divide", + "twenty-tables-know", + "upset-roses-live", + "warm-loops-guess", + "wild-lemons-spend" + ] +} diff --git a/.changeset/proud-jokes-rule.md b/.changeset/proud-jokes-rule.md new file mode 100644 index 00000000000..e46dac82405 --- /dev/null +++ b/.changeset/proud-jokes-rule.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/progressbar": major +--- + +#### Spectrum 2 migration + +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). diff --git a/.changeset/proud-schools-reply.md b/.changeset/proud-schools-reply.md new file mode 100644 index 00000000000..88c11c502ea --- /dev/null +++ b/.changeset/proud-schools-reply.md @@ -0,0 +1,44 @@ +--- +"@spectrum-css/swatchgroup": major +"@spectrum-css/swatch": major +"@spectrum-css/tokens": minor +--- + +#### S2 migration for Swatch group + +This migrates the `swatch` and `swatchgroup` components to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification. + +An `Add Swatch` variant has been added with the required color tokens and the specified add UI icon. + +The `Add Swatch` and `Mixed Value` variants may not be combined with background colors or images. To implement the `Add Swatch` you need to apply the `is-addSwatch` class to the `spectrum-Swatch` element. `Add swatch` keyboard focus may be applied by adding the `is-keyboardFocused` class to this combination of classes. + +The `spectrum-Swatch-icon` is used to set the expected color to icons contained within the swatch. + +The light and no border variants have been removed. Individual swatches have a border set to `--spectrum-gray-1000` at `42%` opacity, while the border opacity is set to `20%` in swatch groups. + +##### Removed custom properties + +`--spectrum-swatch-border-color` +`--spectrum-swatch-dash-icon-color` (replaced by `--spectrum-swatch-icon-color`) + +##### New custom properties + +`--spectrum-swatch-border-color-rgb` +`--spectrum-swatch-border-opacity` +`--spectrum-corner-radius-full` +`--spectrum-corner-radius-none` +`--spectrum-swatch-disabled-icon-border-opacity` +`--spectrum-swatch-icon-color` +`--spectrum-swatch-rectangle-width-multiplier` + +##### New mods + +`--mod-add-button-background` +`--mod-add-button-background-down` +`--mod-add-button-background-hover` +`--mod-add-button-background-keyboard-focus` +`--mod-corner-radius-full` +`--mod-mixed-button-background` +`--mod-swatchgroup-border-color` +`--mod-swatch-border-color-rgb` +`--mod-swatch-border-opacity` diff --git a/.changeset/public-facts-boil.md b/.changeset/public-facts-boil.md new file mode 100644 index 00000000000..437a593971d --- /dev/null +++ b/.changeset/public-facts-boil.md @@ -0,0 +1,38 @@ +--- +"@spectrum-css/taggroup": major +--- + +The Spectrum 2 version of Tag Group is a major change from its Spectrum 1 counterpart. + +Major style changes include: + +- Use of new tokens and custom properties for spacing tags. The method of spacing between tags has changed. Where previously tags were spaced using tokens to represent inline and block margins on each tag, tags are now spaced by tokens representing the gaps between tags. +- Rather than being a single size, Tag group now comes in t-shirt sizes: Small, medium, and large. These sizes should determine the sizes of the embedded components, but also the spacing between tags. +- Tag group can now accommodate a side label. To do so, it makes use of a grid layout. +- In order to match the layout in the spec, more embedded components besides Tag have been added. Field label, Help text, and Action button (quiet) components have been added to the Storybook implementation, and styles are set for these embedded components within the tag group layout. + +In order to support the aforementioned spacing changes, the two mod properties for margin have been removed: + +- `--mod-tag-group-item-margin-block` +- `--mod-tag-group-item-margin-inline` + +Instead, please customize spacing between tags with: + +- `--mod-tag-group-block-tag-spacing` +- `--mod-tag-group-inline-tag-spacing` + +These custom properties may need to be set to be double the previous margin values in order to achieve the same spacing. + +To support custom spacing of the embedded components, several other new mod properties have been added: + +- `--mod-tag-group-block-spacing-label-to-tags` +- `--mod-tag-group-inline-spacing-label-to-tags` +- `--mod-tag-group-spacing-help-text-to-tags` + +To support the optional empty state (when there are no tags in the tag group), several passthroughs to modify the body typography text element have been added, including: + +- `--mod-body-cjk-line-height` +- `--mod-body-font-size` +- `--mod-body-line-height` +- `--mod-body-margin-end` +- `--mod-body-margin-start` diff --git a/.changeset/puny-kids-rhyme.md b/.changeset/puny-kids-rhyme.md new file mode 100644 index 00000000000..92b42d35e33 --- /dev/null +++ b/.changeset/puny-kids-rhyme.md @@ -0,0 +1,76 @@ +--- +"@spectrum-css/tokens": minor +--- + +Package update from `@adobe/spectrum-tokens@13.0.0-beta.58` to `@adobe/spectrum-tokens@13.3.0`. + +#### New custom properties + +- `--spectrum-card-background-loading-color` +- `--spectrum-card-background-well-color` +- `--spectrum-card-default-width-extra-small` +- `--spectrum-card-default-width-small` +- `--spectrum-card-default-width-medium` +- `--spectrum-card-default-width-large` +- `--spectrum-card-default-width-extra-large` +- `--spectrum-card-description-to-footer` +- `--spectrum-card-edge-to-content-default-extra-small` +- `--spectrum-card-edge-to-content-default-small` +- `--spectrum-card-edge-to-content-default-medium` +- `--spectrum-card-edge-to-content-default-large` +- `--spectrum-card-edge-to-content-default-extra-large` +- `--spectrum-card-edge-to-content-compact-extra-small` +- `--spectrum-card-edge-to-content-compact-small` +- `--spectrum-card-edge-to-content-compact-medium` +- `--spectrum-card-edge-to-content-compact-large` +- `--spectrum-card-edge-to-content-compact-extra-large` +- `--spectrum-card-edge-to-content-spacious-extra-small` +- `--spectrum-card-edge-to-content-spacious-small` +- `--spectrum-card-edge-to-content-spacious-medium` +- `--spectrum-card-edge-to-content-spacious-large` +- `--spectrum-card-edge-to-content-spacious-extra-large` +- `--spectrum-card-header-to-description` +- `--spectrum-card-minimum-width-extra-small` +- `--spectrum-card-minimum-width-small` +- `--spectrum-card-minimum-width-medium` +- `--spectrum-card-minimum-width-large` +- `--spectrum-card-minimum-width-extra-large` +- `--spectrum-card-maximum-width-extra-small` +- `--spectrum-card-maximum-width-small` +- `--spectrum-card-maximum-width-medium` +- `--spectrum-card-maximum-width-large` +- `--spectrum-card-maximum-width-extra-large` +- `--spectrum-card-minimum-height-extra-small` +- `--spectrum-card-minimum-height-small` +- `--spectrum-card-minimum-height-medium` +- `--spectrum-card-minimum-height-large` +- `--spectrum-card-minimum-height-extra-large` +- `--spectrum-card-selection-background-size-small` +- `--spectrum-card-selection-background-size-medium` +- `--spectrum-card-selection-background-size-large` +- `--spectrum-card-selection-background-size-extra-large` +- `--spectrum-collection-card-minimum-height-extra-small` +- `--spectrum-collection-card-minimum-height-small` +- `--spectrum-collection-card-minimum-height-medium` +- `--spectrum-collection-card-minimum-height-large` +- `--spectrum-collection-card-minimum-height-extra-large` +- `--spectrum-collection-card-minimum-height-hero-extra-small` +- `--spectrum-collection-card-minimum-height-hero-small` +- `--spectrum-collection-card-minimum-height-hero-medium` +- `--spectrum-collection-card-minimum-height-hero-large` +- `--spectrum-collection-card-minimum-height-hero-extra-large` +- `--spectrum-segmented-control-item-maximum-width` +- `--spectrum-user-card-minimum-height-small` +- `--spectrum-user-card-minimum-height-medium` +- `--spectrum-user-card-minimum-height-large` +- `--spectrum-user-card-minimum-height-extra-large` +- `--spectrum-user-card-minimum-height-title-below-small` +- `--spectrum-user-card-minimum-height-title-below-medium` +- `--spectrum-user-card-minimum-height-title-below-large` +- `--spectrum-user-card-minimum-height-title-below-extra-large` + +#### Updated custom properties + +- `--spectrum-card-selection-background-color` was mapped to `var(--spectrum-gray-100)`; updated to: + - light: `var(--spectrum-transparent-white-600)` + - dark: `var(--spectrum-transparent-black-600)` diff --git a/.changeset/real-jobs-flow.md b/.changeset/real-jobs-flow.md new file mode 100644 index 00000000000..5e60e73c382 --- /dev/null +++ b/.changeset/real-jobs-flow.md @@ -0,0 +1,42 @@ +--- +"@spectrum-css/table": minor +--- + +### S2 table migration (continued) + +#### Net-new features + +- New sparkline SVGs available for cell content + +#### Description of other S2 table work + +A new `.spectrum-Table-headCell--alignEnd` class was created to correspond to tables that may have end-aligned numerical data so the head cell follows the text alignment correctly. + +Semantically, if a table should enable column sorting, the content of a column's head cell should actually be a button, since it is triggering an action. If the column header cell could trigger a menu, the content of that cell should also be a button. New markup has been included to improve the semantic design of the content of header cells, utilizing button components to signify an action can be triggered, or a menu can be triggered. + +In Storybook, new stories have been added to the docs page and the testing grid for Chromatic. These stories include `WithMenuButton`, `WithChartContent`. Documentation has been added for each of these stories, as well as expanded in other stories. + +#### Mods + +##### Renamed Modifiers + +| Old Modifier | New modifier | +| ------------------------------ | ----------------------------------------- | +| `--mod-table-row-active-color` | `--mod-table-row-background-color-active` | + +##### New Modifiers + +- `--mod-table-header-font-style` +- `--mod-table-header-icons-color-active` +- `--mod-table-header-icons-color-default` +- `--mod-table-header-icons-color-hover` +- `--mod-table-header-icons-color-key-focus` +- `--mod-table-row-font-family` +- `--mod-table-row-font-style` +- `--mod-table-row-text-color-active` +- `--mod-table-row-text-color-hover` + +##### Removed Modifiers + +- `--mod-table-header-background-color-quiet` +- `--mod-table-row-background-color-quiet` diff --git a/.changeset/red-kiwis-flash.md b/.changeset/red-kiwis-flash.md new file mode 100644 index 00000000000..c9a914f0e7f --- /dev/null +++ b/.changeset/red-kiwis-flash.md @@ -0,0 +1,32 @@ +--- +"@spectrum-css/toast": major +--- + +#### S2 toast migration + +This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons. The toast no longer supports a divider. + +##### Tokens + +| Before | After | +| ---------------------------- | ---------------------------- | +| --spectrum-corner-radius-100 | --spectrum-corner-radius-800 | + +##### Mods + +The following mods have been added. + +`--mod-toast-font-family` +`--mod-toast-font-style` +`--mod-toast-icon-block-size` +`--mod-toast-spacing-action-button-to-close` +`--mod-toast-spacing-bottom-edge-to-close-button` +`--mod-toast-spacing-close-button-to-edge` +`--mod-toast-spacing-text-to-close-button` +`--mod-toast-spacing-top-edge-to-close-button` + +##### Passthroughs + +The following passthrough has been added. + +`--mod-closebutton-icon-color-default` diff --git a/.changeset/ripe-symbols-wear.md b/.changeset/ripe-symbols-wear.md new file mode 100644 index 00000000000..ec8119cbde2 --- /dev/null +++ b/.changeset/ripe-symbols-wear.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/popover": patch +--- + +Defines the missing `--spectrum-popover-border-width` custom property. The variable was already being used in our style definitions, but its value was lost at some point so it was undefined in the browser. This work should correct that. diff --git a/.changeset/rotten-meals-share.md b/.changeset/rotten-meals-share.md new file mode 100644 index 00000000000..0b425e6a0d5 --- /dev/null +++ b/.changeset/rotten-meals-share.md @@ -0,0 +1,17 @@ +--- +"@spectrum-css/popover": major +--- + +#### 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` | diff --git a/.changeset/serious-cameras-hammer.md b/.changeset/serious-cameras-hammer.md new file mode 100644 index 00000000000..29af1134593 --- /dev/null +++ b/.changeset/serious-cameras-hammer.md @@ -0,0 +1,26 @@ +--- +"@spectrum-css/badge": major +--- + +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](https://github.com/adobe/spectrum-css/pull/3740/files#diff-d1bfd5593c10aaa98222e6c01ca001131fcde194e824b096673ab02a9ef3874f). + +Also added for the default `--mod-badge-border-color` and `--mod-badge-border-width` diff --git a/.changeset/serious-clouds-jam.md b/.changeset/serious-clouds-jam.md new file mode 100644 index 00000000000..27a3928b0f8 --- /dev/null +++ b/.changeset/serious-clouds-jam.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/colorslider": minor +--- + +#### 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` | diff --git a/.changeset/shaggy-schools-sing.md b/.changeset/shaggy-schools-sing.md new file mode 100644 index 00000000000..53ca1f1e1c2 --- /dev/null +++ b/.changeset/shaggy-schools-sing.md @@ -0,0 +1,13 @@ +--- +"@spectrum-css/search": major +--- + +#### Spectrum 2 migration + +Search now uses Spectrum 2 tokens and specifications. The following items have been adjusted: + +- Quiet variant has been deprecated and code removed (including removal of the custom property `--mod-search-quiet-button-offset`). +- Updates to colors, corner rounding, and spacing. +- Custom property mod adjustments: + - Added `--mod-search-top-to-icon`. + - Removed `--mod-workflow-icon-size-100`. diff --git a/.changeset/six-donuts-march.md b/.changeset/six-donuts-march.md new file mode 100644 index 00000000000..6d79d9ad921 --- /dev/null +++ b/.changeset/six-donuts-march.md @@ -0,0 +1,36 @@ +--- +"@spectrum-css/checkbox": major +--- + +#### 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` diff --git a/.changeset/slow-eyes-lay.md b/.changeset/slow-eyes-lay.md new file mode 100644 index 00000000000..584493934bf --- /dev/null +++ b/.changeset/slow-eyes-lay.md @@ -0,0 +1,38 @@ +--- +"@spectrum-css/divider": major +--- + +#### Spectrum 2 migration + +This migrates the `divider` component to S2. Custom properties have been remapped and updated per the design spec. + +##### New properties + +```css +--spectrum-divider-horizontal-minimum-width +--spectrum-divider-vertical-minimum-height +``` + +##### New mods + +```css +--mod-divider-inline-minimum-size +--mod-divider-block-minimum-size +``` + +##### Removed mods + +```css +--mod-divider-background-color-large-static-black +--mod-divider-background-color-large-static-white +--mod-divider-background-color-medium-static-black +--mod-divider-background-color-medium-static-white +--mod-divider-background-color-small-static-black +--mod-divider-background-color-small-static-white +``` + +##### Additions + +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. + +The default size for the Storybook control has been changed to `medium` (the new default size for the component). All sizes are now displayed for the static color variants in the docs. diff --git a/.changeset/small-impalas-search.md b/.changeset/small-impalas-search.md new file mode 100644 index 00000000000..53317c408e0 --- /dev/null +++ b/.changeset/small-impalas-search.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/statuslight": patch +--- + +Removes references to the accent variant, since the accent status light was deprecated in S2. + +Removed variant: + +`.spectrum-StatusLight--accent` +`--spectrum-statuslight-semantic-accent-color` diff --git a/.changeset/smart-spoons-sneeze.md b/.changeset/smart-spoons-sneeze.md new file mode 100644 index 00000000000..0f5c77fc207 --- /dev/null +++ b/.changeset/smart-spoons-sneeze.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/button": patch +--- + +### 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](https://github.com/adobe/spectrum-css/pull/2600) +- [Add text wrapping option](https://github.com/adobe/spectrum-css/pull/3086) +- [PostCSS plugin updates/fixes](https://github.com/adobe/spectrum-css/pull/3502) diff --git a/.changeset/sour-donuts-go.md b/.changeset/sour-donuts-go.md new file mode 100644 index 00000000000..fd1a3362efd --- /dev/null +++ b/.changeset/sour-donuts-go.md @@ -0,0 +1,28 @@ +--- +"@spectrum-css/meter": major +"@spectrum-css/progressbar": major +--- + +### S2 meter migration with base progress bar updates + +This migration updates the meter component and the progress bar component. Both needed the track to have a full corner radius to make the rounded look. The progress bar's HTML template now includes the help text component but it is only used in the meter. Also includes a bug fix for progress bar in order to better support the side label variant. + +#### New updates + +- Includes `--sizeM` and `--sizeXL` (using progress bar's sizes) +- Includes help text component for more context +- Shares progress bar's field label typography +- Added help text visual test +- Added static black variant + +Since the progress bar and meter are now using the same tokens for track thickness in size variants, font size, and spacing, the following mods have been removed from meter but are still able to be used in progress bar: + +- `--mod-progressbar-thickness` +- `--mod-progressbar-font-size` +- `--mod-progressbar-spacing-top-to-text` + +These mods can continue to be used as before. + +#### New mods + +- `--mod-meter-help-text-to-progress-bar` diff --git a/.changeset/spotty-bats-deny.md b/.changeset/spotty-bats-deny.md new file mode 100644 index 00000000000..b77d1682b85 --- /dev/null +++ b/.changeset/spotty-bats-deny.md @@ -0,0 +1,42 @@ +--- +"@spectrum-css/card": major +--- + +Previously: + +```css +.spectrum-Card.is-selected::before { + background-color: rgba( + var( + --mod-card-selected-background-color-rgb, + var(--spectrum-card-selected-background-color-rgb) + ), + var(--spectrum-card-selected-background-opacity) + ); +} +``` + +Styles now use `--spectrum-card-selection-background-color` which maps to a transparent global property of `--spectrum-transparent-(black|white)-600` depending on color context. + +Updated: + +```css +.spectrum-Card.is-selected::before { + background-color: var( + --mod-card-background-color-selected, + var(--spectrum-card-selection-background-color) + ); +} +``` + +#### Removed variants + +Removed the quiet variant which is no longer supported in Spectrum 2. + +#### Removed/replaced properties + +- `--mod-card-selected-background-color-rgb`. Use `--mod-card-background-color-selected` to override the selected background color. +- `--mod-card-content-margin-top-quiet`. Use `--mod-card-content-margin-top` with appropriate selectors to override. +- `--mod-card-minimum-width-quiet`. Use `--mod-card-minimum-width` with appropriate selectors to override. +- `--mod-card-actions-background-color-rgb`. No replacement, using token value `--spectrum-card-selection-background-color` directly. +- `--mod-card-actions-background-color-opacity`. No replacement, using token value `--spectrum-card-selection-background-color` directly. diff --git a/.changeset/spotty-onions-study.md b/.changeset/spotty-onions-study.md new file mode 100644 index 00000000000..748417e1c22 --- /dev/null +++ b/.changeset/spotty-onions-study.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/colorarea": major +--- + +#### Spectrum 2 migration + +This change migrates the `colorarea` component to S2. It leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values. diff --git a/.changeset/stale-pans-carry.md b/.changeset/stale-pans-carry.md new file mode 100644 index 00000000000..8693f140857 --- /dev/null +++ b/.changeset/stale-pans-carry.md @@ -0,0 +1,12 @@ +--- +"@spectrum-css/tooltip": minor +--- + +#### S2: restore negative and informative semantic variants + +This restores the negative and informative tooltip semantic variant styles, story controls and test cases. Icons have been removed for all variants as they are not present in the specifications provided by design. + +##### Restored mods + +`--mod-tooltip-background-color-informative` +`--mod-tooltip-background-color-negative"` diff --git a/.changeset/strange-glasses-allow.md b/.changeset/strange-glasses-allow.md new file mode 100644 index 00000000000..3d89c6a85a4 --- /dev/null +++ b/.changeset/strange-glasses-allow.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/colorloupe": major +--- + +#### Spectrum 2 migration + +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. diff --git a/.changeset/strong-pianos-work.md b/.changeset/strong-pianos-work.md new file mode 100644 index 00000000000..20e62c598ed --- /dev/null +++ b/.changeset/strong-pianos-work.md @@ -0,0 +1,33 @@ +--- +"@spectrum-css/menu": major +--- + +### Spectrum 2 migration + +Menu now uses Spectrum 2 tokens and specifications. + +Removes custom menu item background color tokens: `@adobe/spectrum-tokens` has been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from `@adobe/spectrum-tokens` have been removed. + +In addition to other small token and minor style changes, there were several new features that were added to this version of menu, including: + +- A thumbnail can now be used in place of an icon +- A section description can now be included below the menu section heading +- The actions area previously held action switches for multi-select, and in this version, an external link action icon can be included in that area + +### New mods + +- `--mod-menu-item-corner-radius` +- `--mod-menu-item-linkout-icon-height` +- `--mod-menu-item-linkout-icon-width` +- `--mod-menu-item-thumbnail-height` +- `--mod-menu-item-thumbnail-opacity-disabled` +- `--mod-menu-item-thumbnail-to-label` +- `--mod-menu-item-thumbnail-width` +- `--mod-menu-item-top-to-thumbnail` +- `--mod-menu-item-top-to-workflow-icon` +- `--mod-menu-section-description-color` +- `--mod-menu-section-description-font-size` +- `--mod-menu-section-description-font-weight` +- `--mod-menu-section-description-line-height` +- `--mod-menu-section-description-line-height-cjk` +- `--mod-menu-section-header-to-description` diff --git a/.changeset/stupid-lemons-battle.md b/.changeset/stupid-lemons-battle.md new file mode 100644 index 00000000000..0173b1791a4 --- /dev/null +++ b/.changeset/stupid-lemons-battle.md @@ -0,0 +1,89 @@ +--- +"@spectrum-css/tokens": minor +--- + +### @adobe/spectrum-tokens@13.7.0 + +#### Minor Changes + +[#499 0c1a81b](https://github.com/adobe/spectrum-css/pull/499) Thanks [@larz0](https://github.com/larz0)! + +Added new accodion tokens + +
Added (19)
 + +- `accordion-edge-to-content-area-small` +- `accordion-edge-to-content-area-medium` +- `accordion-edge-to-content-area-large` +- `accordion-edge-to-content-area-extra-large` +- `single-calendar-popover-minimum-width` +- `single-calendar-popover-minimum-height` +- `double-calendar-popover-minimum-width` +- `double-calendar-popover-minimum-height` +- `triple-calendar-popover-minimum-width` +- `triple-calendar-popover-minimum-height` +- `date-field-minimum-width` +- `date-field-text-to-visual` +- `time-field-minimum-width` +- `time-field-text-to-visual` +- `date-picker-visual-to-field-button` +- `date-picker-text-to-visual` +- `date-picker-minimum-width` +- `segmented-text-field-gap` +- `segmented-text-field-rounding` + +
+ +### @adobe/spectrum-tokens@13.6.0 + +#### Minor Changes + +[#497 fc0682e](https://github.com/adobe/spectrum-css/pull/497) Thanks [@larz0](https://github.com/larz0)! + +Added horizontal card tokens. + +
Added (3) + +- `card-horizontal-edge-to-content-compact` +- `card-horizontal-edge-to-content-default` +- `card-horizontal-edge-to-content-spacious` + +
+ +### @adobe/spectrum-tokens@13.5.0 + +#### Minor Changes + +[#494 f569623](https://github.com/adobe/spectrum-css/pull/494) Thanks [@larz0](https://github.com/larz0)! + +Added vf-related-line-height tokens for desktop and mobile. These tokens are required for the upcoming composite typography tokens. + +
+Newly Deprecated (1) + +- `drop-zone-content-maximum-width` + +
+
+Added (18) + +- `line-height-font-size-25` +- `line-height-font-size-50` +- `line-height-font-size-75` +- `line-height-font-size-100` +- `line-height-font-size-200` +- `line-height-font-size-300` +- `line-height-font-size-400` +- `line-height-font-size-500` +- `line-height-font-size-600` +- `line-height-font-size-700` +- `line-height-font-size-800` +- `line-height-font-size-900` +- `line-height-font-size-1000` +- `line-height-font-size-1100` +- `line-height-font-size-1200` +- `line-height-font-size-1300` +- `line-height-font-size-1400` +- `line-height-font-size-1500` + +
diff --git a/.changeset/sweet-brooms-fetch.md b/.changeset/sweet-brooms-fetch.md new file mode 100644 index 00000000000..23d212be9a5 --- /dev/null +++ b/.changeset/sweet-brooms-fetch.md @@ -0,0 +1,417 @@ +--- +"@spectrum-css/tokens": minor +--- + +### Tokens changed + +

Updated from @adobe/spectrum-tokens@13.7.0 to @adobe/spectrum-tokens@13.10.0.

+ +

This update introduces new tokens for accordion, field disclosure icons, icon sizes (add, drag handle, gripper, link out), and tag field dimensions, along with stack item and list view global properties.

+ +

Note that deprecated tokens are still available but will be removed in a future release. Please migrate to new tokens as appropriate.

+ +
+ Newly deprecated + +
+ +
+ Added + +
+ +
+ Updated + +
diff --git a/.changeset/tame-bobcats-beam.md b/.changeset/tame-bobcats-beam.md new file mode 100644 index 00000000000..a45cb615339 --- /dev/null +++ b/.changeset/tame-bobcats-beam.md @@ -0,0 +1,19 @@ +--- +"@spectrum-css/alertbanner": major +--- + +#### Spectrum 2 migration + +Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. + +The following changes have been made to the mod custom properties: + +- `--mod-alert-banner-size` was renamed to `--mod-alert-banner-inline-size` +- `--mod-alert-banner-neutral-background` was previously misspelled. The mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods. +- `--mod-alert-banner-top-text` was renamed to `--mod-alert-banner-top-to-text` +- `--mod-alert-banner-top-icon` was renamed to `--mod-alert-banner-top-to-icon` +- `--mod-alert-banner-bottom-text` was renamed to `--mod-alert-banner-bottom-to-text` +- `--mod-alert-banner-start-edge` was renamed to `--mod-alert-banner-inline-start-to-content` +- `--mod-alert-banner-edge-to-button` was renamed to `--mod-alert-banner-block-edge-to-button` +- The spacing on either side of the close button is now controlled by two separate mods; `--mod-alert-banner-close-button-to-inline-end` and `--mod-alert-banner-close-button-to-content`. The previous `--mod-alert-banner-close-button-spacing` has been removed. +- A new mod `--mod-alert-banner-inline-end-to-content` was added, which handles the inline end spacing when the alert banner does not have a close button. Or when there is neither a close button or an action button. diff --git a/.changeset/tame-knives-train.md b/.changeset/tame-knives-train.md new file mode 100644 index 00000000000..2c774a96d25 --- /dev/null +++ b/.changeset/tame-knives-train.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/icon": major +--- + +Updates the icon component to use the new Spectrum 2 icon sets. The `.spectrum-UIIcon--medium` and `.spectrum-UIIcon--large` classes have been removed, as UI icons are now delivered with a single SVG. The color property also now makes use of the `--iconPrimary` custom property that is defined in some of the SVG files. Storybook has been updated to use and load the new SVGs, whose name format and directories have changed. diff --git a/.changeset/tasty-eagles-draw.md b/.changeset/tasty-eagles-draw.md new file mode 100644 index 00000000000..e8ab14b3d38 --- /dev/null +++ b/.changeset/tasty-eagles-draw.md @@ -0,0 +1,31 @@ +--- +"@spectrum-css/link": major +--- + +#### Spectrum 2 migration + +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. + +##### Note + +- Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear +- `--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. + +#### New tokens + +##### Color + +`spectrum-link-focus-indicator-color` +`spectrum-link-focus-indicator-thickness` +`spectrum-link-focus-indicator-gap` +`spectrum-link-corner-radius` + +##### Typography + +`spectrum-link-line-height` +`spectrum-link-line-height-cjk-100` +`spectrum-link-font-size` +`spectrum-link-font-style` +`spectrum-link-font-weight` +`spectrum-link-text-underline-thickness` +`spectrum-link-text-underline-gap` diff --git a/.changeset/thick-ears-win.md b/.changeset/thick-ears-win.md new file mode 100644 index 00000000000..6ed63c2d287 --- /dev/null +++ b/.changeset/thick-ears-win.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/colorhandle": minor +"@spectrum-css/colorslider": minor +"@spectrum-css/colorarea": minor +"@spectrum-css/colorwheel": minor +"@spectrum-css/slider": minor +--- + +#### 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. diff --git a/.changeset/tiny-candles-win.md b/.changeset/tiny-candles-win.md new file mode 100644 index 00000000000..dbed7db2f34 --- /dev/null +++ b/.changeset/tiny-candles-win.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/icon": minor +--- + +Updates the icon component to use size tokens for newly added ui icons. diff --git a/.changeset/tiny-taxis-show.md b/.changeset/tiny-taxis-show.md new file mode 100644 index 00000000000..d3c02ead3d6 --- /dev/null +++ b/.changeset/tiny-taxis-show.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/tokens": patch +--- + +Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) v13.10.0 -> [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1). + +- [#517](https://github.com/adobe/spectrum-tokens/pull/517) [`8f8f8a6`](https://github.com/adobe/spectrum-tokens/commit/8f8f8a60b7adf5105ced4f914cf30928117ddc5e) Thanks [@larz0](https://github.com/larz0)! + +#### Updated tokens + +- `accordion-focus-indicator-gap` + - value: `0px` -> `2px` +- `accordion-top-to-text-medium` + - desktop.value: `12px` -> `9px` + - mobile.value: `16px` -> `10px` diff --git a/.changeset/true-shrimps-dream.md b/.changeset/true-shrimps-dream.md new file mode 100644 index 00000000000..40dff0a8945 --- /dev/null +++ b/.changeset/true-shrimps-dream.md @@ -0,0 +1,34 @@ +--- +"@spectrum-css/infieldbutton": major +--- + +#### Spectrum 2 migration + +In-field buttons are used to represent actions within input fields. They're currently used inside number field. This component has updated colors, corner radius, and icons compared to the Spectrum 1 version. The "Error" and "Key-focus" variants have been removed, since this now utilizes those states from the parent component. + +The position styles and controls have also been removed now that there's a consistent corner radius. + +##### Removed mods + +Due to deprecation of the position variants in the infield button, some spacing and border radius mods have been removed. + +`--mod-infield-button-inner-edge-to-fill` +`--mod-infield-button-stacked-border-radius-reset` +`--mod-infield-button-stacked-bottom-border-block-end-width` +`--mod-infield-button-stacked-bottom-border-radius-end-end` +`--mod-infield-button-stacked-bottom-border-radius-end-start` +`--mod-infield-button-stacked-fill-padding-inline` +`--mod-infield-button-stacked-fill-padding-inner` + +##### New tokens + +These new tokens are the inline variant & stepper (number field) use case. The padding changes here. + +`--spectrum-in-field-button-side-edge-to-fill-small` +`--spectrum-in-field-button-side-edge-to-fill-medium` +`--spectrum-in-field-button-side-edge-to-fill-large` +`--spectrum-in-field-button-side-edge-to-fill-extra-large` +`--spectrum-field-edge-to-icon-75` +`--spectrum-field-edge-to-icon-100` +`--spectrum-field-edge-to-icon-200` +`--spectrum-field-edge-to-icon-300` diff --git a/.changeset/twenty-ravens-divide.md b/.changeset/twenty-ravens-divide.md new file mode 100644 index 00000000000..01f7271a5fe --- /dev/null +++ b/.changeset/twenty-ravens-divide.md @@ -0,0 +1,8 @@ +--- +"@spectrum-css/coachmark": minor +--- + +CSS references to popover custom properties/tokens were updated to reflect some mod name changes in the 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` diff --git a/.changeset/twenty-tables-know.md b/.changeset/twenty-tables-know.md new file mode 100644 index 00000000000..ddb0511a1ad --- /dev/null +++ b/.changeset/twenty-tables-know.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/opacitycheckerboard": major +"@spectrum-css/thumbnail": minor +--- + +#### S2 thumbnail migration + +Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component. + +This also corrects an issue with a token name in the `thumbnail` component by renaming `--spectrum-thumbnail-border-color-opacity` to `--spectrum-thumbnail-border-opacity`. diff --git a/.changeset/upset-roses-live.md b/.changeset/upset-roses-live.md new file mode 100644 index 00000000000..6e812c7515c --- /dev/null +++ b/.changeset/upset-roses-live.md @@ -0,0 +1,90 @@ +--- +"@spectrum-css/ui-icons": minor +--- + +Makes updates to the initial S2 icons update to include some additional icons with names as follows: + +| Icon name | +| ----------------- | +| Add50 | +| Add75 | +| Add100 | +| Add200 | +| Add300 | +| DragHandle75 | +| DragHandle100 | +| DragHandle200 | +| DragHandle300 | +| Gripper100 | +| LinkOut100 | +| LinkOut200 | +| LinkOut300 | +| LinkOut400 | + +Such that the full set of changes for Spectrum 2 is as follows: + +| Icon name | Migration notes | +| ----------------- | --------------- | +| Add50 | **New** | +| Add75 | **New** | +| Add100 | **New** | +| Add200 | **New** | +| Add300 | **New** | +| Arrow75 | Deprecated | +| Arrow100 | - | +| Arrow200 | Deprecated | +| Arrow300 | Deprecated | +| Arrow400 | - | +| Arrow500 | Deprecated | +| Arrow600 | Deprecated | +| Asterisk75 | Deprecated | +| Asterisk100 | - | +| Asterisk200 | - | +| Asterisk300 | - | +| Checkmark50 | - | +| Checkmark75 | - | +| Checkmark100 | - | +| Checkmark200 | - | +| Checkmark300 | - | +| Checkmark400 | - | +| Checkmark500 | Deprecated | +| Checkmark600 | Deprecated | +| Chevron50 | - | +| Chevron75 | - | +| Chevron100 | - | +| Chevron200 | - | +| Chevron300 | - | +| Chevron400 | - | +| Chevron500 | Deprecated | +| Chevron600 | Deprecated | +| CornerTriangle75 | - | +| CornerTriangle100 | - | +| CornerTriangle200 | - | +| CornerTriangle300 | - | +| Cross75 | - | +| Cross100 | - | +| Cross200 | - | +| Cross300 | - | +| Cross400 | - | +| Cross500 | - | +| Cross600 | - | +| Dash50 | - | +| Dash75 | - | +| Dash100 | - | +| Dash200 | - | +| Dash300 | - | +| Dash400 | Deprecated | +| Dash500 | Deprecated | +| Dash600 | Deprecated | +| DragHandle75 | **New** | +| DragHandle100 | **New** | +| DragHandle200 | **New** | +| DragHandle300 | **New** | +| Gripper100 | **New** | +| SingleGripper | Deprecated | +| DoubleGripper | Deprecated | +| TripleGripper | Deprecated | +| LinkOut100 | **New** | +| LinkOut200 | **New** | +| LinkOut300 | **New** | +| LinkOut400 | **New** | diff --git a/.changeset/warm-loops-guess.md b/.changeset/warm-loops-guess.md new file mode 100644 index 00000000000..80e75cc9e1f --- /dev/null +++ b/.changeset/warm-loops-guess.md @@ -0,0 +1,12 @@ +--- +"@spectrum-css/picker": patch +--- + +### S2 picker fixes + +This work addresses some regressions noticed in the migrated S2 picker component. Mainly, S2 border colors were fixed (most of them are transparent, including disabled). + +PRs used as reference: + +- [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) +- [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) diff --git a/.changeset/wild-lemons-spend.md b/.changeset/wild-lemons-spend.md new file mode 100644 index 00000000000..438e874c219 --- /dev/null +++ b/.changeset/wild-lemons-spend.md @@ -0,0 +1,26 @@ +--- +"@spectrum-css/helptext": major +--- + +#### Spectrum 2 migration + +The help text S2 component has some updated spacing and typography tokens. The error message validation icon has also been updated. + +##### New mods + +`--mod-helptext-font-family` +`--mod-helptext-font-style` +`--mod-helptext-font-weight` +`--mod-helptext-top-edge-to-workflow-icon` +`--mod-helptext-bottom-edge-to-workflow-icon` + +##### Renamed mods + +`--mod-helptext-bottom-to-workflow-icon` >> `--mod-helptext-edge-to-workflow-icon` + +##### Deprecated tokens + +`--spectrum-help-text-top-to-workflow-icon-small` +`--spectrum-help-text-top-to-workflow-icon-medium` +`--spectrum-help-text-top-to-workflow-icon-large` +`--spectrum-help-text-top-to-workflow-icon-extra-large` diff --git a/.env.example b/.env.example index 040d2780a41..1834f01232a 100644 --- a/.env.example +++ b/.env.example @@ -19,3 +19,6 @@ WATCH_MODE=true NX_VERBOSE_LOGGING=false NX_SKIP_NX_CACHE=false NX_PERF_LOGGING=false + +ARTIFACTORY_API_KEY= +ARTIFACTORY_API_TOKEN= diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 963eb0580fb..4b97fcab7e8 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -3,6 +3,7 @@ This guide will show you how to quickly install Spectrum CSS and use it to display the Button component. ## Install using Node/yarn + Install the components you want along with their dependencies. Here's an example: ```shell @@ -12,26 +13,34 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme: ```html - + ``` -Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: +Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: ```html - - + + - - + + ``` Inside the `` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant: ```html - ``` @@ -39,18 +48,26 @@ To put it all together, your final html file will look like this: ```html - - - - - - - - + + + + + + + ``` ## Include files from a CDN + Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment. diff --git a/.github/actions/file-diff/README.md b/.github/actions/file-diff/README.md index 69ee1c91426..e20ef0d7b0b 100644 --- a/.github/actions/file-diff/README.md +++ b/.github/actions/file-diff/README.md @@ -44,9 +44,8 @@ Total size of all files for this branch in bytes. name: Compare compiled output file size uses: "spectrum-tools/gh-action-file-diff" with: - head-path: ${{ github.workspace }}/pull-request - base-path: ${{ github.workspace }}/base-branch - file-glob-pattern: | - components/*/dist/*.{css,json} - components/*/dist/themes/*.css + head-path: ${{ github.workspace }}/pull-request + base-path: ${{ github.workspace }}/base-branch + file-glob-pattern: | + components/*/dist/*.{css,json} ``` diff --git a/.github/renovate.json b/.github/renovate.json index 3880405fa3f..5f4479e5a90 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -8,7 +8,6 @@ "group:vite" ], "labels": ["dependencies", "skip_vrt", "ready-for-review"], - "rangeStrategy": "bump", "packageRules": [ { "groupName": "storybook ecosystem", diff --git a/components/tabs/themes/express.css b/.github/scripts/build-preview-urls-comment.js similarity index 59% rename from components/tabs/themes/express.css rename to .github/scripts/build-preview-urls-comment.js index 83b105f4ac8..cb6450663c1 100644 --- a/components/tabs/themes/express.css +++ b/.github/scripts/build-preview-urls-comment.js @@ -1,5 +1,7 @@ +#!/usr/bin/env node + /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,12 +13,12 @@ * governing permissions and limitations under the License. */ -/* @combine .spectrum.spectrum--express */ +export const buildPreviewURLComment = (prNumber) => { + const prHash = `pr-${prNumber}`; + const baseUrl = 'https://spectrumcss.z13.web.core.windows.net'; + + return `## 📚 Branch preview -@import "./spectrum.css"; +PR #${prNumber} has been deployed to Azure Blob Storage: [${baseUrl}/${prHash}/index.html](${baseUrl}/${prHash}/index.html).`; -@container style(--system: express) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); - } -} +}; diff --git a/.github/scripts/comment-or-update.js b/.github/scripts/comment-or-update.js new file mode 100644 index 00000000000..46429505f97 --- /dev/null +++ b/.github/scripts/comment-or-update.js @@ -0,0 +1,41 @@ +/*! + * Copyright 2025 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +export const commentOrUpdate = (github, context, title, body) => { + github.rest.issues + .listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + }) + .then(({ data }) => { + const priorComment = data.find((comment) => + comment.body.startsWith(title) + ); + if (priorComment) { + github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: priorComment.id, + body, + }); + } else { + github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body, + }); + } + }); +}; diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 9392f6f44b7..bb7aafa83de 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -106,8 +106,6 @@ jobs: files_yaml: | styles: - components/*/index.css - - components/*/themes/spectrum.css - - components/*/themes/express.css eslint: - components/*/stories/*.js mdlint: @@ -205,8 +203,8 @@ jobs: secrets: inherit # ------------------------------------------------------------- - # PUBLISH TO NETLIFY --- # - # Publish to netlify by leveraging the previous build and then building the site as well + # PUBLISH TO AZURE --- # + # Publish to azure by leveraging the previous build and then building the site as well # ------------------------------------------------------------- publish_site: name: Publish diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index fe2f10c6172..a3af10310ec 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -102,9 +102,10 @@ jobs: filter_mode: diff_context level: error reporter: github-pr-review - # stylelint_input: "components/*/index.css components/*/themes/*.css" + # stylelint_input: "components/*/index.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" + packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical' - name: Run eslint on packages and stories uses: reviewdog/action-eslint@v1.33.2 diff --git a/.github/workflows/publish-site.yml b/.github/workflows/publish-site.yml index bd7bd9fe603..ca1b363fab1 100644 --- a/.github/workflows/publish-site.yml +++ b/.github/workflows/publish-site.yml @@ -1,91 +1,137 @@ name: Publish documentation # -# This workflow publishes the documentation to Netlify +# This workflow publishes the documentation to Azure blob storage # on: - workflow_dispatch: - inputs: - deploy-message: - required: false - type: string - alias: - required: false - type: string - workflow_call: - inputs: - deploy-message: - required: false - type: string - alias: - required: false - type: string + pull_request: + types: + - closed + workflow_dispatch: + inputs: + deploy-message: + required: false + type: string + alias: + required: false + type: string + workflow_call: + inputs: + deploy-message: + required: false + type: string + alias: + required: false + type: string permissions: - contents: read - pull-requests: write + contents: read + pull-requests: write jobs: - # --- PUBLISH TO NETLIFY --- # - # Publish to netlify by leveraging the previous build and then building the site as well - # --- # - publish_site: - name: Publish - runs-on: ubuntu-latest - timeout-minutes: 10 - steps: - ## --- SETUP --- ## - - name: Check out code - uses: actions/checkout@v4 - with: - fetch-depth: 0 + build_and_deploy_job: + if: github.event_name == 'pull_request' && github.event.action != 'closed' + runs-on: ubuntu-latest + name: Publish + steps: + ## --- SETUP --- ## + - name: Check out code + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Use Node LTS version + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: yarn + + - name: Enable Corepack + run: corepack enable - - name: Use Node LTS version - uses: actions/setup-node@v4 - with: - node-version: 20 - cache: yarn + - name: Generate PR hash + id: pr_hash + run: | + pr_hash="pr-${{ github.event.pull_request.number }}" + echo "hash=${pr_hash}" >> $GITHUB_OUTPUT + echo "Generated PR hash: ${pr_hash}" - - name: Enable Corepack - run: corepack enable + ## --- YARN CACHE --- ## + - name: Check for cached dependencies + continue-on-error: true + id: cache-dependencies + uses: actions/cache@v4 + with: + path: | + .cache/yarn + node_modules + key: ubuntu-latest-node20-${{ hashFiles('yarn.lock') }} - ## --- YARN CACHE --- ## - - name: Check for cached dependencies - continue-on-error: true - id: cache-dependencies - uses: actions/cache@v4 - with: - path: | - .cache/yarn - node_modules - key: ubuntu-latest-node20-${{ hashFiles('yarn.lock') }} + ## --- INSTALL --- ## + - name: Install dependencies + shell: bash + run: yarn install --immutable - ## --- INSTALL --- ## - # note: if cache-hit isn't needed b/c yarn will leverage the cache if it exists - - name: Install dependencies - shell: bash - run: yarn install --immutable + ## --- BUILD --- ## + - name: Build storybook + shell: bash + run: BASE_PATH="/${{ steps.pr_hash.outputs.hash }}" yarn build:docs - ## --- BUILD --- ## - - name: Build storybook - shell: bash - run: yarn build:docs + ## --- DEPLOY TO AZURE BLOB STORAGE --- ## + - name: Install AzCopy + run: | + wget -O azcopy.tar.gz https://aka.ms/downloadazcopy-v10-linux + tar -xf azcopy.tar.gz --strip-components=1 + sudo mv azcopy /usr/local/bin/ + azcopy --version + + - name: Deploy to Azure Blob Storage + id: deploy + env: + AZURE_STORAGE_SAS_TOKEN: ${{ secrets.AZURE_STORAGE_SAS_TOKEN }} + PR_HASH: ${{ steps.pr_hash.outputs.hash }} + run: | + CLEAN_SAS_TOKEN=$(echo "${AZURE_STORAGE_SAS_TOKEN}" | tr -d '\n\r\t ') + echo "Uploading Storybook to ${PR_HASH}" + azcopy copy "/home/runner/work/spectrum-css/spectrum-css/dist/*" --log-level=INFO \ + "https://spectrumcss.blob.core.windows.net/\$web/${PR_HASH}/?${CLEAN_SAS_TOKEN}" \ + --recursive \ + --from-to LocalBlob + docs_url="https://spectrumcss.z13.web.core.windows.net/${PR_HASH}" + echo "docs_url=${docs_url}" >> $GITHUB_OUTPUT + echo "Deployed to: ${docs_url}" + - name: Post Previews Comment + uses: actions/github-script@v7 + with: + script: | + const { buildPreviewURLComment } = await import('${{ github.workspace }}/.github/scripts/build-preview-urls-comment.js'); + const { commentOrUpdate } = await import('${{ github.workspace }}/.github/scripts/comment-or-update.js'); + const prNumber = context.payload.pull_request.number; + const body = buildPreviewURLComment(prNumber); + commentOrUpdate(github, context, '## 📚 Branch preview', body); + timeout-minutes: 10 - ## --- DEPLOY WEBSITE TO NETLIFY --- ## - - name: Deploy - uses: nwtgck/actions-netlify@v3 - with: - publish-dir: dist - production-branch: main - production-deploy: false - netlify-config-path: ./netlify.toml - github-token: ${{ secrets.GITHUB_TOKEN }} - deploy-message: ${{ inputs.deploy-message }} - enable-pull-request-comment: true - enable-commit-comment: false - overwrites-pull-request-comment: true - alias: ${{ inputs.alias }} - env: - NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN_GH_ACTIONS_DEPLOY }} - NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }} - timeout-minutes: 10 + close_pull_request_job: + if: github.event_name == 'pull_request' && github.event.action == 'closed' + runs-on: ubuntu-latest + name: Clean up PR deployment + steps: + - name: Generate PR hash + id: pr_hash + run: | + pr_hash="pr-${{ github.event.pull_request.number }}" + echo "hash=${pr_hash}" >> $GITHUB_OUTPUT + - name: Install AzCopy + run: | + wget -O azcopy.tar.gz https://aka.ms/downloadazcopy-v10-linux + tar -xf azcopy.tar.gz --strip-components=1 + sudo mv azcopy /usr/local/bin/ + - name: Clean up PR deployment + env: + AZURE_STORAGE_SAS_TOKEN: ${{ secrets.AZURE_STORAGE_SAS_TOKEN }} + PR_HASH: ${{ steps.pr_hash.outputs.hash }} + run: | + echo "Cleaning up deployment: ${PR_HASH}/" + azcopy remove "https://spectrumcss.z13.web.core.windows.net/\$web/${PR_HASH}/?${AZURE_STORAGE_SAS_TOKEN}" \ + --recursive || echo "Cleanup completed (some files may not exist)" + echo "Cleanup completed for PR deployment: ${PR_HASH}/" diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml index 1e1f9d021fb..cf91938aa74 100644 --- a/.github/workflows/vrt.yml +++ b/.github/workflows/vrt.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - spectrum-two - "!changeset-release/**" - "!renovate/**" workflow_dispatch: diff --git a/.gitignore b/.gitignore index 28c3ba85761..ced1b16e59f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ **/dist/* !components/*/dist/metadata.json !tokens/dist/json/* +!ui-icons/dist # Not committing the map assets, these are dev-only *.map diff --git a/.markdownlint.json b/.markdownlint.json index 3eb2b8c2789..427f41c1a92 100644 --- a/.markdownlint.json +++ b/.markdownlint.json @@ -1,7 +1,7 @@ { "extends": "markdownlint/style/prettier", "first-line-h1": false, - "no-inline-html": false, + "no-inline-html": false, "no-bare-urls": false, "no-duplicate-heading": { "siblings_only": true diff --git a/.prettierignore b/.prettierignore index 13158ed8ac2..bb4ffd976d5 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,6 +3,7 @@ **/.svn **/.hg **/node_modules +yarn.lock # Compiled and generated files dist diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md index 09c086cc78f..de7b18aeb01 100644 --- a/.storybook/CHANGELOG.md +++ b/.storybook/CHANGELOG.md @@ -1,5 +1,65 @@ # Change Log +## 12.0.5-next.7 + +### Patch Changes + +- Updated dependencies [[`d952e0c`](https://github.com/adobe/spectrum-css/commit/d952e0c4d234f5e742432fe906965a52a50b228e)]: + - @spectrum-css/tokens@16.1.0-next.5 + - @spectrum-css/bundle@2.0.0-next.4 + +## 12.0.5-next.6 + +### Patch Changes + +- Updated dependencies [[`f20e1e7`](https://github.com/adobe/spectrum-css/commit/f20e1e7ff402b591706cc791d9207fdedb80cd1e)]: + - @spectrum-css/tokens@16.1.0-next.4 + - @spectrum-css/bundle@2.0.0-next.3 + +## 12.0.5-next.5 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/bundle@2.0.0-next.2 + +## 12.0.5-next.4 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/bundle@2.0.0-next.1 + +## 12.0.5-next.3 + +### Patch Changes + +- Updated dependencies [[`d47295a`](https://github.com/adobe/spectrum-css/commit/d47295a06cf974c347d794ae4f71bc4c8c498025), [`f0d187f`](https://github.com/adobe/spectrum-css/commit/f0d187ff016d49c46ac125cb37ae274644608505), [`1cdfcbf`](https://github.com/adobe/spectrum-css/commit/1cdfcbff6cb3369d710cec78733536d5dd72e7d4), [`1b33315`](https://github.com/adobe/spectrum-css/commit/1b33315fa1b65d65fe940d3be4ea4395d5394655)]: + - @spectrum-css/bundle@2.0.0-next.0 + - @spectrum-css/tokens@16.1.0-next.3 + - @spectrum-css/ui-icons@2.0.0-next.1 + +## 12.0.5-next.2 + +### Patch Changes + +- Updated dependencies [[`87d7d99`](https://github.com/adobe/spectrum-css/commit/87d7d99260e758e697668cc17962b0b36d075c65)]: + - @spectrum-css/tokens@16.1.0-next.2 + +## 12.0.5-next.1 + +### Patch Changes + +- Updated dependencies [[`89a3f2b`](https://github.com/adobe/spectrum-css/commit/89a3f2bfeed257a5eefeef229efaa3cc7555980c)]: + - @spectrum-css/tokens@16.1.0-next.1 + +## 12.0.5-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 12.0.5 ### Patch Changes @@ -510,7 +570,6 @@ This component has been deprecated. Use an action bar to allow users to perform ### 🛑 BREAKING CHANGE - @spectrum-css/icon will no longer contain SVG assets; it will be a purely CSS package with all SVG assets migrated to the new @spectrum-css/ui-icons package. - - NEW: @spectrum-css/ui-icons package for all SVG icons in the UI set. ## 6.0.1 diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 98841f09954..e5886de13ec 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -29,21 +29,9 @@ body { } .spectrum { - /* Gradient that changes with the color theme. */ - --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); - - /* Gradients that do not change with the color theme, for use in static color backgrounds. */ - --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); - --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); - color: var(--spectrum-neutral-content-color-default); background-color: var(--spectrum-background-base-color); - -webkit-tap-highlight-color: rgb(0, 0, 0, 0%); -} - -.spectrum.spectrum--legacy { - color: var(--spectrum-neutral-content-color-default); - background-color: var(--spectrum-background-layer-1-color); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); } .spectrum .spectrum-examples-static-black { @@ -73,7 +61,7 @@ svg:has(symbol):not(:has(use)) { line-height: normal; letter-spacing: normal; text-transform: none; - border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%); + border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%); } /* Force the modal wrapper to be contained by the frame not the viewport */ diff --git a/.storybook/assets/images/dropzone-illustration.png b/.storybook/assets/images/dropzone-illustration.png new file mode 100644 index 00000000000..dcc34b9f97b Binary files /dev/null and b/.storybook/assets/images/dropzone-illustration.png differ diff --git a/.storybook/assets/images/sparkline-informative.svg b/.storybook/assets/images/sparkline-informative.svg new file mode 100644 index 00000000000..5998b3e03b0 --- /dev/null +++ b/.storybook/assets/images/sparkline-informative.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/.storybook/assets/images/sparkline-negative.svg b/.storybook/assets/images/sparkline-negative.svg new file mode 100644 index 00000000000..d31715827f7 --- /dev/null +++ b/.storybook/assets/images/sparkline-negative.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/.storybook/assets/images/sparkline-notice.svg b/.storybook/assets/images/sparkline-notice.svg new file mode 100644 index 00000000000..80d18bc0e30 --- /dev/null +++ b/.storybook/assets/images/sparkline-notice.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/.storybook/assets/images/sparkline-positive.svg b/.storybook/assets/images/sparkline-positive.svg new file mode 100644 index 00000000000..f5a80fa6ec7 --- /dev/null +++ b/.storybook/assets/images/sparkline-positive.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css index 95b4d83897d..b18c09d34ce 100644 --- a/.storybook/assets/index.css +++ b/.storybook/assets/index.css @@ -119,4 +119,11 @@ select:focus, border-color: rgb(2, 101, 220) !important; box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important; } + +nav.sidebar-container, +div.sb-bar { + color: var(--spectrum-neutral-content-color-default) !important; + background-color: var(--spectrum-background-layer-2-color) !important; +} + /* stylelint-enable selector-class-pattern */ diff --git a/.storybook/blocks/utilities.js b/.storybook/blocks/utilities.js index b5ba302ccd7..a9b733423d2 100644 --- a/.storybook/blocks/utilities.js +++ b/.storybook/blocks/utilities.js @@ -1,4 +1,3 @@ -import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json"; import spectrum from "@spectrum-css/tokens/dist/json/tokens.json"; import { useTheme } from "@storybook/theming"; @@ -50,15 +49,10 @@ function parseData(data, { key, color, platform }) { * @param {string} context.context - The theme context set globally for the page * @returns {{ color: string, scale: string, context: string, platform: "desktop"|"mobile" }} - An object containing the calculated theme context */ -function fetchTheme({ color, scale, context } = {}) { +function fetchTheme({ color, scale } = {}) { // Fetch the theme if it exists; this data exists if wrapped in a ThemeProvider const theme = useTheme() ?? {}; - // If the context is not provided, use the theme value or a fallback - if (typeof context !== "string" && typeof theme.context == "string") - context = theme.context; - else if (!context) context = "spectrum"; - // If the color or scale is not provided, use the theme values or a fallback if (typeof color !== "string" && typeof theme.color == "string") color = theme.color; @@ -70,9 +64,8 @@ function fetchTheme({ color, scale, context } = {}) { // Create a platform context based on the scale (platform used in the token data) const platform = scale === "medium" ? "desktop" : "mobile"; - const tokens = context === "spectrum" ? spectrum : legacy; - return { color, scale, context, platform, tokens }; + return { color, scale, platform, tokens: (spectrum ?? {}) }; } /** diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 0ad4bb758aa..cc147ee10cd 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -1,7 +1,6 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { fetchContainers, toggleStyles } from "./helpers.js"; -import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline"; import tokens from "@spectrum-css/tokens/dist/css/index.css?inline"; /** @@ -19,7 +18,6 @@ export const withContextWrapper = makeDecorator({ } = {}, globals: { color = "light", - context = "spectrum", scale = "medium", } = {}, parameters: { @@ -31,35 +29,26 @@ export const withContextWrapper = makeDecorator({ const staticColorSettings = { "black": { - background: "var(--spectrum-docs-static-black-background-color)", + background: "var(--spectrum-examples-gradient-static-black)", color: "light" }, "white": { - background: "var(--spectrum-docs-static-white-background-color)", + background: "var(--spectrum-examples-gradient-static-white)", color: "dark" }, }; - const original = { - color, - context, - scale, - }; + const original = { color, scale }; useEffect(() => { const isDocs = viewMode === "docs"; const isTesting = showTestingGrid; - const isRaw = Boolean(context === "raw"); - const isModern = Boolean(context === "spectrum"); - const isExpress = Boolean(context === "express"); - - if (!isRaw) { - // add the default classes to the body to ensure labels, headings, and borders are styled correctly - document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); - } // Start by attaching the appropriate tokens to the container - toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw, context); + toggleStyles(document.body, "tokens", tokens, true); + + // add the default classes to the body to ensure labels, headings, and borders are styled correctly + document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); for (const container of fetchContainers(id, isDocs, isTesting)) { // Check if the container is a testing wrapper to prevent applying colors around the testing grid @@ -69,7 +58,6 @@ export const withContextWrapper = makeDecorator({ // Reset the context to the original values color = original.color; - context = original.context; scale = original.scale; let staticKey = staticColor; @@ -84,20 +72,7 @@ export const withContextWrapper = makeDecorator({ if (!staticKey) hasStaticElement = false; // Every container gets the spectrum class - container.classList.toggle("spectrum", !isRaw); - - // S1 and S1 Express get the legacy class - container.classList.toggle("spectrum--legacy", !isModern && !isRaw); - - // Express only gets the express class - container.classList.toggle("spectrum--express", isExpress && !isRaw); - - // Darkest is deprecated in Spectrum 2 - if (isModern && color === "darkest") { - /* eslint-disable no-console -- notify that darkest was deprecated in S2 */ - console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead."); - color = "dark"; - } + container.classList.toggle("spectrum", true); // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { @@ -110,12 +85,12 @@ export const withContextWrapper = makeDecorator({ color = "light"; } - for (let c of ["light", "dark", "darkest"]) { - container.classList.toggle(`spectrum--${c}`, c === color && !isRaw); + for (let c of ["light", "dark"]) { + container.classList.toggle(`spectrum--${c}`, c === color); } for (const s of ["medium", "large"]) { - container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw); + container.classList.toggle(`spectrum--${s}`, s === scale); } if (!isTestingWrapper) { @@ -129,7 +104,7 @@ export const withContextWrapper = makeDecorator({ } } - }, [context, color, scale, viewMode, original, staticColor, rootClass, tokens, legacyTokens, staticColorSettings, showTestingGrid]); + }, [viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]); return StoryFn(data); }, diff --git a/.storybook/decorators/down-state.js b/.storybook/decorators/down-state.js new file mode 100644 index 00000000000..31ba5ed5133 --- /dev/null +++ b/.storybook/decorators/down-state.js @@ -0,0 +1,40 @@ +import { makeDecorator, useEffect } from "@storybook/preview-api"; +import { fetchContainers } from "./helpers.js"; + +export const withDownStateDimensionCapture = makeDecorator({ + name: "withDownStateDimensionCapture", + parameterName: "downState", + wrapper: (StoryFn, context) => { + const { args = {}, parameters = {}, viewMode, id } = context; + + /* Selectors are defined in the downState parameter */ + const { + // Fall back to the rootClass if no selectors are provided + selectors = args.rootClass ? [ args.rootClass ] : [] + } = parameters.downState ?? {}; + + /** + * This effect will run after the component is rendered and will capture the dimensions of the + * components that are specified in the selectors array. It will then set the custom properties + * --spectrum-downstate-width and --spectrum-downstate-height on the component to the width and + * height of the component respectively. This will allow the downstate to be calculated correctly + * in the CSS. + */ + useEffect(() => { + if (selectors.length === 0) return; + + for (const container of fetchContainers(id, viewMode === "docs")) { + for (const selector of selectors) { + const components = [...container.querySelectorAll(selector)]; + for (const component of components) { + const { width, height } = component.getBoundingClientRect(); + component.style.setProperty("--spectrum-downstate-width", `${width}px`); + component.style.setProperty("--spectrum-downstate-height", `${height}px`); + } + } + } + }, [selectors]); + + return StoryFn(context); + }, +}); diff --git a/.storybook/decorators/icon-sprites.js b/.storybook/decorators/icon-sprites.js index 48f045eea8a..b576632bcab 100644 --- a/.storybook/decorators/icon-sprites.js +++ b/.storybook/decorators/icon-sprites.js @@ -1,5 +1,5 @@ // Used in the icon sprite decorator to inject the sprite sheets into the document -import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"; +import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/assets/svg-spriteSheet/icons.svg?raw"; import uiSprite from "@spectrum-css/ui-icons/dist/spectrum-css-icons.svg?raw"; import { makeDecorator, useEffect } from "@storybook/preview-api"; @@ -14,9 +14,6 @@ export const withIconSpriteSheet = makeDecorator({ loaded = {}, } = context; - // Load the icons into the window object - if (loaded.icons) window.icons = loaded.icons; - useEffect(() => { // Inject the sprite sheets into the document let sprite = document.getElementById("spritesheets"); diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js index 059919173ba..f44d173b22a 100644 --- a/.storybook/decorators/index.js +++ b/.storybook/decorators/index.js @@ -13,6 +13,7 @@ export { withArgEvents } from "./arg-events.js"; export { withContextWrapper } from "./context.js"; +export { withDownStateDimensionCapture } from "./down-state.js"; export { withIconSpriteSheet } from "./icon-sprites.js"; export { withLanguageWrapper } from "./language.js"; export { withReducedMotionWrapper } from "./reduce-motion.js"; diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js new file mode 100644 index 00000000000..c944ca467ab --- /dev/null +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -0,0 +1,98 @@ +import { Template } from "@spectrum-css/actionbutton/stories/template.js"; +import { html } from "lit"; + +export default { + title: "Corner rounding", + description: + "The action button component represents an action a user can take.", + component: "ActionButton", + args: { + rootClass: "spectrum-ActionButton", + }, + parameters: { + actions: { + handles: ["click .spectrum-ActionButton:not([disabled])"], + }, + }, + tags: ['!dev'], +}; + +const ActionButton = (args, context) => html` +
+ ${Template({ ...args, iconName: undefined }, context)} +
+`; + +const ActionButtonTable = (args, context) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueMedium example
--spectrum-corner-radius-medium-size-extra-small6px + ${ActionButton({ + ...args, + label: "Extra Small", + size: "xs" + }, context)} +
--spectrum-corner-radius-medium-size-small7px + ${ActionButton({ + ...args, + label: "Small", + size: "s" + }, context)} +
--spectrum-corner-radius-medium-size-medium8px + ${ActionButton({ + ...args, + label: "Medium", + size: "m" + }, context)} +
--spectrum-corner-radius-medium-size-large9px + ${ActionButton({ + ...args, + label: "Large", + size: "l" + }, context)} +
--spectrum-corner-radius-medium-size-extra-large10px + ${ActionButton({ + ...args, + label: "Extra Large", + size: "xl" + }, context)} +
+ `; +}; + +export const ActionButtonExamples = ActionButtonTable.bind({}); +ActionButtonExamples.args = {}; diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js new file mode 100644 index 00000000000..96aa3ce69c4 --- /dev/null +++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js @@ -0,0 +1,88 @@ +// Import the component markup template +import { Template } from "@spectrum-css/checkbox/stories/template.js"; +import { html } from "lit"; + +export default { + title: "Corner rounding", + description: + "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.", + component: "Checkbox", + args: { + rootClass: "spectrum-Checkbox", + }, + parameters: { + actions: { + handles: ['click input[type="checkbox"]'], + }, + }, + tags: ['!dev'], +}; + +const Checkbox = (args = {}, context = {}) => html` +
+ ${Template({ ...args, iconName: undefined }, context)} +
+`; + +const CheckboxTable = (args, context) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueSmall example
--spectrum-corner-radius-small-size-small3px + ${Checkbox({ + ...args, + label: "Small", + size: "s" + }, context)} +
--spectrum-corner-radius-small-size-medium4px + ${Checkbox({ + ...args, + label: "Medium", + size: "m" + }, context)} +
--spectrum-corner-radius-small-size-large5px + ${Checkbox({ + ...args, + label: "Large", + size: "l" + }, context)} +
--spectrum-corner-radius-small-size-extra-large6px + ${Checkbox({ + ...args, + label: "Extra Large", + size: "xl" + }, context)} +
+ `; +} + +export const CheckboxExamples = CheckboxTable.bind({}); +CheckboxExamples.args = {}; diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-medium.md b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md new file mode 100644 index 00000000000..f2201667866 --- /dev/null +++ b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md @@ -0,0 +1,7 @@ +| Component size token | Alias token (if available) | Global token | Value | +| ------------------------------------------------ | --------------------------------------- | ---------------------------- | ----- | +| --spectrum-corner-radius-medium-size-extra-small | | --spectrum-corner-radius-300 | 6px | +| --spectrum-corner-radius-medium-size-small | | --spectrum-corner-radius-400 | 7px | +| --spectrum-corner-radius-medium-size-medium | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px | +| --spectrum-corner-radius-medium-size-large | | --spectrum-corner-radius-600 | 9px | +| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px | diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-small.md b/.storybook/foundations/corner-rounding/component-size-tokens-small.md new file mode 100644 index 00000000000..1fdcae6ad6d --- /dev/null +++ b/.storybook/foundations/corner-rounding/component-size-tokens-small.md @@ -0,0 +1,6 @@ +| Component size token | Alias token (if available) | Global token | Value | +|---------------------------------------------------|-------------------------------|------------------------------|-------| +| --spectrum-corner-radius-small-size-small | | --spectrum-corner-radius-75 | 3px | +| --spectrum-corner-radius-small-size-medium | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px | +| --spectrum-corner-radius-small-size-large | | --spectrum-corner-radius-200 | 5px | +| --spectrum-corner-radius-small-size-extra-large | | --spectrum-corner-radius-300 | 6px | diff --git a/.storybook/foundations/corner-rounding/corner-rounding.mdx b/.storybook/foundations/corner-rounding/corner-rounding.mdx new file mode 100644 index 00000000000..0af56f6e446 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.mdx @@ -0,0 +1,26 @@ +import { Meta, Canvas, Story, Title, Unstyled } from '@storybook/blocks'; +import * as CornerRoundingStories from './corner-rounding.stories.js'; +import * as CheckboxStories from './checkbox-corner-rounding.stories.js'; +import * as ActionButtonStories from './action-button-corner-rounding.stories.js'; + + + + + +## Default values + +<Story of={CornerRoundingStories.CornerRounding} /> + +## Component examples + +### Small tokens + +Checkbox includes small component size tokens to scale corner rounding. + +<Story of={CheckboxStories.CheckboxExamples} /> + +### Medium tokens + +Action button includes medium component size tokens to scale corner rounding. + +<Story of={ActionButtonStories.ActionButtonExamples} /> diff --git a/.storybook/foundations/corner-rounding/corner-rounding.stories.js b/.storybook/foundations/corner-rounding/corner-rounding.stories.js new file mode 100644 index 00000000000..1080abdf4d3 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js @@ -0,0 +1,88 @@ +// Import the component markup template +import { html } from "lit"; +import { Template } from "./template.js"; + +export default { + title: "Corner rounding", + description: + "Corner rounding is a foundation that shows the different border-radius tokens that can be applied to a component.", + component: "Corner rounding", + args: { + rootClass: "spectrum-Foundations-Example-CornerRounding", + }, + tags: ["!dev"], +}; + +const CornerRadiusGroup = (args = {}, context = {}) => html` + <div> + <table class="spectrum-Foundations-Example-CornerRounding-table"> + <thead> + <tr> + <th scope="col">Token</th> + <th scope="col" style="padding: 0 2rem;">Value</th> + <th scope="col">Example<br />(No Border)</th> + <th scope="col">Example<br />(Border)</th> + </tr> + </thead> + <tbody> + ${Template( + { + ...args, + label: "--spectrum-corner-radius-none", + size: "none", + value: "0px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-small-default", + size: "s", + value: "4px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-medium-default", + size: "m", + value: "8px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-large-default", + size: "l", + value: "10px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-extra-large-default", + size: "xl", + value: "16px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-full", + size: "full", + value: "9999px", + }, + context, + )} + </tbody> + </table> + </div> +`; + +export const CornerRounding = CornerRadiusGroup.bind({}); +CornerRounding.args = {}; diff --git a/.storybook/foundations/corner-rounding/index.css b/.storybook/foundations/corner-rounding/index.css new file mode 100644 index 00000000000..d11cbe7823d --- /dev/null +++ b/.storybook/foundations/corner-rounding/index.css @@ -0,0 +1,57 @@ +/*! + * Copyright 2024 Adobe. All rights reserved. + * + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at <http://www.apache.org/licenses/LICENSE-2.0> + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +.spectrum-Foundations-Example-CornerRounding-table { + border-spacing: 1rem 0; + margin-inline-start: -1rem; +} + +.spectrum-Foundations-Example-CornerRounding-table th { + text-align: start; +} + +.spectrum-Foundations-Example-CornerRounding { + inline-size: 3rem; + block-size: 3rem; + margin: 0.5rem; + background-color: var(--spectrum-gray-500); +} + +.spectrum-Foundations-Example-CornerRounding--border { + background-color: var(--spectrum-gray-25); + border: var(--spectrum-border-width-200) solid var(--spectrum-gray-700); +} + +.spectrum-Foundations-Example-CornerRounding--none { + border-radius: var(--spectrum-corner-radius-none); +} + +.spectrum-Foundations-Example-CornerRounding--sizeS { + border-radius: var(--spectrum-corner-radius-small-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeM { + border-radius: var(--spectrum-corner-radius-medium-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeL { + border-radius: var(--spectrum-corner-radius-large-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeXL { + border-radius: var(--spectrum-corner-radius-extra-large-default); +} + +.spectrum-Foundations-Example-CornerRounding--full { + border-radius: var(--spectrum-corner-radius-full); +} diff --git a/.storybook/foundations/corner-rounding/template.js b/.storybook/foundations/corner-rounding/template.js new file mode 100644 index 00000000000..bd000575982 --- /dev/null +++ b/.storybook/foundations/corner-rounding/template.js @@ -0,0 +1,40 @@ +import { html } from "lit"; +import { classMap } from "lit/directives/class-map.js"; + +import "./index.css"; + +const getSizeModifier = (size) => { + if (size === "none" || size === "full") return size; + return `size${size.toUpperCase()}`; +}; + +export const Template = ({ + rootClass = "spectrum-Foundations-Example-CornerRounding", + size = "none", + label, + value, +}) => html` + <tr> + <td>${label}</td> + <td style="padding: 0 2rem;">${value}</td> + <td> + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${getSizeModifier(size)}`]: + typeof size !== "undefined", + })} + ></div> + </td> + <td> + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${getSizeModifier(size)}`]: + typeof size !== "undefined", + [`${rootClass}--border`]: true, + })} + ></div> + </td> + </tr> +`; diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js new file mode 100644 index 00000000000..0d85100133e --- /dev/null +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -0,0 +1,27 @@ +import { Template } from "@spectrum-css/button/stories/template.js"; + +export default { + title: "Down state", + description: + "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.", + component: "Button", + args: { + rootClass: "spectrum-Button", + }, + parameters: { + actions: { + handles: ["click .spectrum-Button"], + }, + }, + tags: ["!dev"], +}; + +export const ButtonDownState = Template.bind({}); +ButtonDownState.args = { + label: "Edit", + variant: "accent", + customStyles: { + "--spectrum-downstate-width": "72px", + "--spectrum-downstate-height": "32px" + } +}; diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js new file mode 100644 index 00000000000..88ca9f3a5d9 --- /dev/null +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -0,0 +1,22 @@ +import { Template } from "@spectrum-css/checkbox/stories/template.js"; + +export default { + title: "Down state", + description: + "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.", + component: "Checkbox", + args: { + rootClass: "spectrum-Checkbox", + }, + parameters: { + actions: { + handles: ["click input[type=\"checkbox\"]"], + }, + }, + tags: ["!dev"], +}; + +export const CheckboxDownState = Template.bind({}); +CheckboxDownState.args = { + label: "Checkbox", +}; diff --git a/.storybook/foundations/down-state/down-state.mdx b/.storybook/foundations/down-state/down-state.mdx new file mode 100644 index 00000000000..5933bff7604 --- /dev/null +++ b/.storybook/foundations/down-state/down-state.mdx @@ -0,0 +1,44 @@ +import { Meta, Story } from '@storybook/blocks'; +import * as Checkbox from './checkbox-down-state.stories.js'; +import * as Button from './button-down-state.stories.js'; + +<Meta title="Down state" /> + +# Down state + +Down state is a Spectrum 2 feature that creates the illusion of components being pressed-in when active. This functionality is already included in Spectrum 2 components that require down state in this project. It is implemented with a CSS transform. The implementation depends on the size of the interactable element, as shown in the examples below. + +## Examples + +### Minimum perspective + +For elements that have a width of 24px or less, the minimum perspective token is used to apply the down state. One example of a component that uses this token is the checkbox: + +<Story of={Checkbox.CheckboxDownState} /> + +In this case, we use the minimum perspective token: + +``` +transform: + perspective(var(--spectrum-component-size-minimum-perspective-down)) + translateZ(var(--spectrum-component-size-difference-down)); +``` + +### Calculated perspective + +For elements that have a width of greater than 24px, we need to use the component's width and height to apply the down state. One example of a component that uses this logic is the button: + +<Story of={Button.ButtonDownState} /> + +In this case, we use a max formula to calculate the perspective based on component width and height (this helps us account for components that may be very wide): + +``` +transform: + perspective(max( + var(--spectrum-downstate-height), + var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down) + )) + translateZ(var(--spectrum-component-size-difference-down)); +``` + +*Note that in this case, users are required to develop an implementation to determine the width and height of the component. Assign these values to the `--spectrum-downstate-width` and `--spectrum-downstate-height` custom properties in a `style` attribute on the HTML element to expose them for use in the CSS.* diff --git a/.storybook/foundations/drop-shadow/drop-shadow.mdx b/.storybook/foundations/drop-shadow/drop-shadow.mdx new file mode 100644 index 00000000000..a8d6f298632 --- /dev/null +++ b/.storybook/foundations/drop-shadow/drop-shadow.mdx @@ -0,0 +1,86 @@ +import { Meta, Title, Story, Description } from '@storybook/blocks'; +import * as DropShadowStories from './drop-shadow.stories.js'; + + +<Meta of={DropShadowStories} /> + +<Title /> +<Description of={DropShadowStories} /> + +Drop shadow tokens may be used for box shadows or drop shadows in CSS. Using `box-shadow` is often preferable to using `filter: drop-shadow()`, but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if `box-shadow` is already being used for a different purpose, such as a focus outline, `filter: drop-shadow()` may be used. Note that in cases where `filter: drop-shadow()` is used, the shadow may be more blurred than the design spec due to a difference in how the blur parameter is calculated, and an adjustment by half may be needed. + +The opacity values in dark shadow colors are 3x the light values. + +These single-layer shadows are an interim solution for shadows until complex tokens (additional design data for the Spectrum Tokens system) are available to support multi-layer shadows. + +## Emphasized Default +This shadow is used to provide emphasis to containers within a page. + +### `box-shadow` +<Story of={DropShadowStories.BoxShadowEmphasizedDefault} /> +``` +box-shadow: + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + var(--spectrum-drop-shadow-emphasized-default-blur) + var(--spectrum-drop-shadow-emphasized-default-color); +``` + +### `filter: drop-shadow()` +<Story of={DropShadowStories.DropShadowEmphasizedDefault} /> +``` +filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) + var(--spectrum-drop-shadow-emphasized-default-color) +); +``` + +## Emphasized Hover +If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover. + +### `box-shadow` +<Story of={DropShadowStories.BoxShadowEmphasizedHover} /> +``` +box-shadow: + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + var(--spectrum-drop-shadow-emphasized-hover-blur) + var(--spectrum-drop-shadow-emphasized-hover-color); +``` + +### `filter: drop-shadow()` +<Story of={DropShadowStories.DropShadowEmphasizedHover} /> +``` +filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) + var(--spectrum-drop-shadow-emphasized-hover-color) +); +``` + +## Elevated +Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels. + +### `box-shadow` +<Story of={DropShadowStories.BoxShadowElevated} /> +``` +box-shadow: + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + var(--spectrum-drop-shadow-elevated-blur) + var(--spectrum-drop-shadow-elevated-color); +``` + +### `filter: drop-shadow()` +<Story of={DropShadowStories.DropShadowElevated} /> +``` +filter: drop-shadow( + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + calc(var(--spectrum-drop-shadow-elevated-blur) / 2) + var(--spectrum-drop-shadow-elevated-color) +); +``` diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js new file mode 100644 index 00000000000..6d936af9411 --- /dev/null +++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js @@ -0,0 +1,89 @@ +import { html } from "lit"; +import { classMap } from "lit/directives/class-map.js"; +import "./index.css"; + +export default { + title: "Drop shadow", + description: + "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.", + component: "Drop shadow", + tags: ["!dev"], +}; + +const DropShadowSwatch = ({ + rootClass = "spectrum-Foundations-Example-DropShadow-swatch", + variant, + isDropShadow, +}) => html` + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${variant}-drop-shadow`]: + typeof variant !== "undefined" && !!isDropShadow, + [`${rootClass}--${variant}-box-shadow`]: + typeof variant !== "undefined" && !isDropShadow, + })} + ></div> +`; + +const DropShadowBackground = ( + { + rootClass = "spectrum-Foundations-Example-swatch-container", + color, + ...args + }, + context, +) => html` + <div + class=${classMap({ + [rootClass]: true, + "spectrum--light": color === "light", + "spectrum--dark": color === "dark", + })} + > + ${DropShadowSwatch(args, context)} + </div> +`; + +const DropShadowVariant = (args, context) => html` + <div class="spectrum-Foundations-Example-variant-container"> + ${DropShadowBackground({ ...args, color: "light" }, context)} + ${DropShadowBackground({ ...args, color: "dark" }, context)} + </div> +`; + +export const DropShadowEmphasizedDefault = DropShadowVariant.bind({}); +DropShadowEmphasizedDefault.args = { + variant: "emphasized-default", + isDropShadow: true, +}; + +export const DropShadowEmphasizedHover = DropShadowVariant.bind({}); +DropShadowEmphasizedHover.args = { + variant: "emphasized-hover", + isDropShadow: true, +}; + +export const DropShadowElevated = DropShadowVariant.bind({}); +DropShadowElevated.args = { + variant: "elevated", + isDropShadow: true, +}; + +export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({}); +BoxShadowEmphasizedDefault.args = { + variant: "emphasized-default", + isDropShadow: false, +}; + +export const BoxShadowEmphasizedHover = DropShadowVariant.bind({}); +BoxShadowEmphasizedHover.args = { + variant: "emphasized-hover", + isDropShadow: false, +}; + +export const BoxShadowElevated = DropShadowVariant.bind({}); +BoxShadowElevated.args = { + variant: "elevated", + isDropShadow: false, +}; diff --git a/.storybook/foundations/drop-shadow/index.css b/.storybook/foundations/drop-shadow/index.css new file mode 100644 index 00000000000..bf54a5ddce9 --- /dev/null +++ b/.storybook/foundations/drop-shadow/index.css @@ -0,0 +1,115 @@ +/*! +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +/* stylelint-disable spectrum-tools/no-unknown-custom-properties */ + +.spectrum-Foundations-Example-DropShadow-swatch { + block-size: 150px; + inline-size: 150px; + background-color: var(--spectrum-gray-25); + border-radius: var(--spectrum-corner-radius-large-default); + border: transparent; +} + +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch { + background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */ +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow { + box-shadow: + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + var(--spectrum-drop-shadow-emphasized-default-blur) + var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { + filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ + var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)) + ); +} + +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { +/* adjustment because color tokens do not work properly on foundations pages */ + --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { + box-shadow: + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + var(--spectrum-drop-shadow-emphasized-hover-blur) + var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow { + filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ + var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)) + ); +} + +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { +/* adjustment because color tokens do not work properly on foundations pages */ + --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); +} + +.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { + box-shadow: + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + var(--spectrum-drop-shadow-elevated-blur) + var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); +} + +.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow { + filter: drop-shadow( + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ + var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)) + ); +} + +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { +/* adjustment because color tokens do not work properly on foundations pages */ + --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); +} + +.spectrum-Foundations-Example-swatch-container { + background-color: var(--spectrum-gray-25); + block-size: 200px; + inline-size: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +.spectrum-Foundations-Example-variant-container { + background-color: var(--spectrum-gray-25); + display: flex; + flex-direction: row; +} diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx index d36ba09a9a7..24287b9f371 100644 --- a/.storybook/guides/develop.mdx +++ b/.storybook/guides/develop.mdx @@ -31,35 +31,24 @@ For more general information about how to contribute to the Spectrum CSS project Each component has the following files: -- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component but specifically lacks any custom properties or variables. These values are sourced from the `themes` directory. -- `themes/*.css` - The theme-specific, component-level custom properties used to style the component. These files are meant to be loaded with the source styles. +- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component. - `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component. - `stories/template.js` - The template function that generates the component's mark-up based on the provided settings. - `stories/*.test.js` - The testing grid for visual regression testing in Chromatic. -- `stories/*.mdx` - This asset generates the component-specific documentation and is rendered in Storybook as the Docs page. Each component outputs the following assets to `dist`: -- `index.css`: This asset includes the base CSS and the `themes/spectrum.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported. -- `index-base.css`: This asset includes only the base CSS; that is, the CSS without any custom property definitions. This can be used in conjunction with `index-theme.css` and the desired `themes/*.css` file to render a themed component. -- `index-theme.css`: This asset includes only the custom property definitions for the component as mapped to the system variables. This can be used in conjunction with `index-base.css` and the desired `themes/*.css` file to render a themed component. - -Each component outputs theme-specific assets to `dist/themes`. These assets include the system variables mapped to their global token counterparts. This file is meant to be loaded in conjunction with the `index-base.css` and `index-theme.css` files to render a themed component. - -- `themes/spectrum-two.css`: Represents the current Spectrum theme, aka Spectrum 2. -- `themes/spectrum.css`: Represents the legacy Spectrum theme, aka Spectrum 1. **deprecated** -- `themes/express.css`: Represents the Express theme. **deprecated** +- `index.css`: This asset includes the CSS for the component and is meant to be loaded in conjunction with the tokens for your desired color context and scales. ## Adding a new component 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component. 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`. 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing. -4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum.css` asset. -5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file. +4. The `index.css` file is where all of your styles should be added. +5. Inside the `stories` directory you will find a `template.js` and `*.stories.js` file. - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction). - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs. - - Update the `*.mdx` file with the documentation for your component. _Note_: Because we use scoped packages, before it can be published, you must manually publish the new component as public: @@ -116,8 +105,6 @@ CSS assets will be run through their respective postcss configurations. This mea ```js import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; ``` We are leaning on Storybook's `@storybook/web-components-vite` framework configuration as our stories rely on lit for dynamic attribute assignment. @@ -345,8 +332,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; export const Template = ( { diff --git a/.storybook/loaders/icon-loader.js b/.storybook/loaders/icon-loader.js index 07fcd6ff5df..0265335db7c 100644 --- a/.storybook/loaders/icon-loader.js +++ b/.storybook/loaders/icon-loader.js @@ -1,16 +1,29 @@ -export const IconLoader = async () => ({ - icons: { - workflow: { - medium: await import.meta.glob( - "/node_modules/@adobe/spectrum-css-workflow-icons/dist/18/*.svg", +import { cleanUiIconName, cleanWorkflowIconName } from "@spectrum-css/icon/stories/utilities.js"; + +/** + * Loads all SVG files from both icon sets, and stores a string with the SVG markup. + * + * Excludes "22x20" workflow icons as they are not yet used within the design system. + * + * @see https://storybook.js.org/docs/writing-stories/loaders + * @see https://vite.dev/guide/features#glob-import + */ +export const IconLoader = async () => { + let iconData = { + icons: { + workflow: await import.meta.glob( + [ + "/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*.svg", + "!/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*_22x20*.svg", + ], { eager: true, query: "?raw", import: "default", } ), - large: await import.meta.glob( - "/node_modules/@adobe/spectrum-css-workflow-icons/dist/24/*.svg", + ui: await import.meta.glob( + "/node_modules/@spectrum-css/ui-icons/dist/svg/*.svg", { eager: true, query: "?raw", @@ -18,23 +31,25 @@ export const IconLoader = async () => ({ } ), }, - ui: { - medium: await import.meta.glob( - "/node_modules/@spectrum-css/ui-icons/dist/medium/*.svg", - { - eager: true, - query: "?raw", - import: "default", - } - ), - large: await import.meta.glob( - "/node_modules/@spectrum-css/ui-icons/dist/large/*.svg", - { - eager: true, - query: "?raw", - import: "default", - } - ), - }, - }, -}); + }; + + /** + * Changes all keys in the IconLoader object to be just the cleaned icon name used within our Storybook's Icon component, + * instead of the full file name and directory that was loaded. + * + * E.g. "/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/S2_Icon_3DAsset_20_N.svg" would become just "3DAsset". + */ + iconData.icons.workflow = Object.fromEntries( + Object.entries(iconData.icons.workflow).map( + ([key, value]) => [cleanWorkflowIconName(key.split("/").pop()), value] + ) + ); + + iconData.icons.ui = Object.fromEntries( + Object.entries(iconData.icons.ui).map( + ([key, value]) => [cleanUiIconName(key.split("/").pop()), value] + ) + ); + + return iconData; +}; diff --git a/.storybook/main.js b/.storybook/main.js index ccd00e2f45e..5914dd5b083 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -20,6 +20,11 @@ export default { files: "*.@(stories.js|mdx)", titlePrefix: "Guides", }, + { + directory: "./foundations", + files: "**/*.@(stories.js|mdx)", + titlePrefix: "Foundations", + }, { directory: "./deprecated", files: "**/*.@(stories.js|mdx)", @@ -85,6 +90,7 @@ export default { const { mergeConfig } = await import("vite"); return mergeConfig(config, { + base: process.env.BASE_PATH || config.base, publicDir: "./assets", // Add dependencies to pre-optimization optimizeDeps: { @@ -138,8 +144,6 @@ export default { check: false, }, features: { - /* Code splitting flag; load stories on-demand */ - storyStoreV7: true, /* Builds stories.json to help with on-demand loading */ buildStoriesJson: true, }, diff --git a/.storybook/manager.js b/.storybook/manager.js index 53b86a56602..1e1fe3ef8d1 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,5 +1,6 @@ import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; +import { startCase } from "lodash"; import "./assets/index.css"; @@ -64,5 +65,6 @@ addons.setConfig({ }), sidebar: { showRoots: false, + renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚", }, }); diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index c3b991e5bd7..b4df304251d 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -20,16 +20,6 @@ const modes = { color: "dark", textDirection: "rtl", }, - "S1 | Light | LTR": { - context: "legacy", - color: "light", - textDirection: "ltr", - }, - "Express | Light | LTR": { - context: "express", - color: "light", - textDirection: "ltr", - }, }; export default modes; diff --git a/.storybook/package.json b/.storybook/package.json index 561c7c02cdb..a108b7dda1a 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/preview", - "version": "12.0.5", + "version": "12.0.5-next.7", "description": "A Spectrum CSS preview", "license": "Apache-2.0", "author": "Adobe", @@ -39,15 +39,14 @@ "build": "yarn docs:report && cross-env NODE_ENV=development storybook build --stats-json --config-dir ." }, "dependencies": { - "@adobe/spectrum-css-workflow-icons": "^1.7.0", - "@spectrum-css/bundle": "1.0.1", - "@spectrum-css/tokens": "16.0.2", - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0", - "@spectrum-css/ui-icons": "1.1.2" + "@adobe/spectrum-css-workflow-icons": "^4.1.0", + "@spectrum-css/bundle": "2.0.0-next.4", + "@spectrum-css/tokens": "16.1.0-next.5", + "@spectrum-css/ui-icons": "2.0.0-next.1" }, "devDependencies": { "@babel/core": "^7.27.4", - "@chromatic-com/storybook": "^3.2.6", + "@chromatic-com/storybook": "^3.2.7", "@etchteam/storybook-addon-status": "^5.0.0", "@storybook/addon-a11y": "8.4.7", "@storybook/addon-actions": "8.4.7", @@ -70,13 +69,13 @@ "lodash-es": "^4.17.21", "npm-registry-fetch": "^18.0.2", "postcss": "^8.5.6", - "prettier": "^3.5.3", - "react": "^18.3.1", - "react-dom": "^18.3.1", + "prettier": "^3.6.0", + "react": "^19.1.0", + "react-dom": "^19.1.0", "react-syntax-highlighter": "^15.6.1", "remark-gfm": "^4.0.1", "storybook": "8.4.7", - "vite": "^5.4.19" + "vite": "^6.3.5" }, "keywords": [ "design-system", diff --git a/.storybook/preview.js b/.storybook/preview.js index ff243044967..e9be0e5c367 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -32,6 +32,8 @@ export const parameters = { order: [ "Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], + "Foundations", + ["*"], "Components", ["*", ["Docs", "Default", "*"]], "Deprecated", @@ -83,12 +85,17 @@ export const parameters = { color: "#fff", description: "Should not be used and will not receive updates.", }, + migrated: { + background: "rgb(84, 36, 219)", + color: "#fff", + description: "Migrated to Spectrum 2.", + }, }, }, // Set an empty object to avoid the "undefined" value in the ComponentDetails doc block packageJson: {}, // A list of published npm tags that should not appear in the ComponentDetails doc block - ignoredTags: ["beta", "next"], + ignoredTags: ["beta"], }; export default { diff --git a/.storybook/types/global.js b/.storybook/types/global.js index 60a369079e5..55f8c760e4d 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -4,22 +4,6 @@ /** @type import('@storybook/types').GlobalTypes */ export default { - context: { - title: "Design context", - description: "The variation of Spectrum to use in the component", - defaultValue: "spectrum", - type: "string", - showName: true, - toolbar: { - items: [ - { value: "spectrum", title: "Spectrum 2", right: "default" }, - { value: "legacy", title: "Spectrum 1", right: "legacy" }, - { value: "express", title: "Express", right: "legacy" }, - { value: "raw", title: "Token-free", right: "raw" }, - ], - dynamicTitle: true, - }, - }, color: { title: "Color", description: "Controls the color context of the component", @@ -30,7 +14,6 @@ export default { items: [ { value: "light", title: "Light", right: "default" }, { value: "dark", title: "Dark" }, - { value: "darkest", title: "Darkest", right: "deprecated" }, ], dynamicTitle: true, }, diff --git a/.vscode/extensions.json b/.vscode/extensions.json index c2e4659a232..a31c90a2101 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -20,6 +20,7 @@ "rajdeepchandra.spectrum-design-tokens-for-vscode", "stylelint.vscode-stylelint", "vunguyentuan.vscode-css-variables", - "vunguyentuan.vscode-postcss" + "vunguyentuan.vscode-postcss", + "davidanson.vscode-markdownlint" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 3fbd617ce55..b37a89b532f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -101,10 +101,8 @@ } ], "cssVariables.lookupFiles": [ - "${workspaceFolder}/tokens/dist/css/index.css", - "${workspaceFolder}/tokens/dist/css/*.css", - "${workspaceFolder}/components/*/index.css", - "${workspaceFolder}/components/*/themes/*.css" + "${workspaceFolder}/tokens/**/*.css", + "${workspaceFolder}/components/*/index.css" ], "docthis.includeDescriptionTag": true, "docthis.inferTypesFromNames": true, diff --git a/README.md b/README.md index 460f5d39631..e48f2231038 100644 --- a/README.md +++ b/README.md @@ -52,17 +52,6 @@ Spectrum CSS components have build output that is designed to be used in a varie - `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens). - - This file loads the `.spectrum`, `.spectrum--legacy`, and `.spectrum--express` contexts which are used to toggle components between different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default. - -- `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts. - - - If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum-two.css` from the `themes` directory to render the default Spectrum visual language. - - The `.spectrum--legacy` context represents the previous version of Spectrum (also known as Spectrum 1). This means if you only want to use the legacy context, you should load `themes/spectrum.css`. **deprecated** - - The `.spectrum--express` context represents the subtheme of Spectrum 1 called Express . This means if you only want to use the Express context, you should load `themes/express.css`. **deprecated** - - This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/spectrum-two.css` assets. - -- `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself. - <sup><a name="token-footnote">1</a></sup>: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties. #### Including assets @@ -73,29 +62,10 @@ Start by including the base set of variables: /* Include tokens */ @import "node_modules/@spectrum-css/tokens/dist/index.css"; -/* - For components with no other contexts available, load the - index.css file from the component's package. These are components - that do not have a spectrum or express context available. -*/ @import "node_modules/@spectrum-css/page/dist/index.css"; @import "node_modules/@spectrum-css/typography/dist/index.css"; @import "node_modules/@spectrum-css/icon/dist/index.css"; - -/* - Recommended: For components with multiple contexts available, if you - want access to all contexts, load the index.css file, which includes - all contexts and component variables. -*/ @import "node_modules/@spectrum-css/button/dist/index.css"; - -/* - If you only need the spectrum visual context: For components with - multiple contexts available, load only the spectrum context by sourcing - index-base.css and the spectrum theme from the themes directory. -*/ -@import "node_modules/@spectrum-css/button/dist/index-base.css"; -@import "node_modules/@spectrum-css/button/dist/themes/spectrum.css"; ``` Tokens values are mapped to context-specific classes which can be applied to the `<html>` element or any place in your DOM where you wish to encapsulate or alter the visual language of your Spectrum components. @@ -106,9 +76,7 @@ All contexts you want to use must be defined in order to load all the appropriat ##### Visual language -- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 foundations visual language. -- `.spectrum--legacy` - The legacy Spectrum 1 visual language. _This visual language will be deprecated in Spectrum 2_. -- `.spectrum--express` - A variant of the standard visual language. _This visual language will be deprecated in Spectrum 2_. +- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 visual language. ##### Scales @@ -134,16 +102,6 @@ Put together, we would define the context for our application in the following w <html class="spectrum spectrum--medium spectrum--light"></html> ``` -To switch to Express, **add** the `.spectrum--express` class to the `<html>` element: - -```html -<html - class="spectrum spectrum--medium spectrum--light spectrum--express" -></html> -``` - -Note the `spectrum--legacy` or `spectrum--express` class is added to the existing classes; `spectrum` should always be present to ensure the correct visual language is loaded. - Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context. ### Modifying components diff --git a/components/accordion/CHANGELOG.md b/components/accordion/CHANGELOG.md index 2923b2e0c6d..257c4bff147 100644 --- a/components/accordion/CHANGELOG.md +++ b/components/accordion/CHANGELOG.md @@ -1,5 +1,66 @@ # Change log +## 8.0.0-next.2 + +### Major Changes + +📝 [#3684](https://github.com/adobe/spectrum-css/pull/3684) [`f0c6273`](https://github.com/adobe/spectrum-css/commit/f0c6273310a8a7d8f392d6113919a3982ab07b2e) Thanks [@jawinn](https://github.com/jawinn)! + +#### Spectrum 2 migration + +Accordion now uses Spectrum 2 tokens and specifications. + +New sized tokens are used for corner rounding, the spacing around the disclosure icon, and +the spacing around the content area. + +##### New features + +- Adds the optional "quiet" style, which does not show dividers between accordion items. +- Adds CSS transition to animate the rotation of the disclosure indicator when expanding and + collapsing the accordion item. +- Adds no inline padding variant (`.spectrum-Accordion--noInlinePadding`) in which the item + header does not have padding. +- Per design spec, accordion items have a min-width and default width. Default width can be + overridden with `--mod-accordion-item-width` but should not be smaller than + `--spectrum-accordion-item-minimum-width`. + +##### Markup changes + +The HTML markup has changed slightly for the accordion header. The disclosure icon has been moved +from outside the button (`spectrum-Accordion-itemHeader`), to within the button. The extra +element with class `spectrum-Accordion-itemIconContainer`, previously wrapping the icon, has +been removed. A span with class `spectrum-Accordion-itemTitle` has been added around the heading +text. + +##### Modifier changes + +The following `--mod` custom properties have been renamed to better reflect how they are used: + +- `--mod-accordion-item-height` has been renamed to `--mod-accordion-item-minimum-height` +- `--mod-accordion-min-block-size` has been renamed to `--mod-accordion-item-min-block-size` +- `--mod-accordion-component-edge-to-text` has been renamed to `--mod-accordion-content-padding-inline` + +New modifiers: + +- `--mod-accordion-animation-duration` +- `--mod-accordion-edge-to-content-area` +- `--mod-accordion-item-minimum-width` +- `--mod-accordion-top-to-disclosure-indicator` + +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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.0 ### Minor Changes diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 3f3e89fbf15..774e6f9a3db 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -6,6 +6,9 @@ ".spectrum-Accordion--compact.spectrum-Accordion--sizeL", ".spectrum-Accordion--compact.spectrum-Accordion--sizeS", ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL", + ".spectrum-Accordion--quiet", + ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active", + ".spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover", ".spectrum-Accordion--sizeL", ".spectrum-Accordion--sizeS", ".spectrum-Accordion--sizeXL", @@ -14,51 +17,40 @@ ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS", ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL", ".spectrum-Accordion-item", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible", - ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover", - ".spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover", + ".spectrum-Accordion-item.is-disabled", ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent", - ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator", - ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator", + ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator", ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-itemContent", ".spectrum-Accordion-itemHeader", - ".spectrum-Accordion-itemHeader:active", - ".spectrum-Accordion-itemHeader:after", - ".spectrum-Accordion-itemHeader:focus", + ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active", ".spectrum-Accordion-itemHeader:focus-visible", - ".spectrum-Accordion-itemHeader:focus:after", ".spectrum-Accordion-itemHeader:hover", - ".spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer", ".spectrum-Accordion-itemHeading", - ".spectrum-Accordion-itemIconContainer", - ".spectrum-Accordion-itemIconContainer:dir(rtl)", + ".spectrum-Accordion-itemIndicator", + ".spectrum-Accordion-itemTitle", + ".spectrum-Accordion.spectrum-Accordion--noInlinePadding", ".spectrum-Accordion:dir(rtl)", ".spectrum-Accordion:lang(ja)", ".spectrum-Accordion:lang(ko)", ".spectrum-Accordion:lang(zh)", - "[dir=\"rtl\"] .spectrum-Accordion", - "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer" + "[dir=\"rtl\"] .spectrum-Accordion" ], "modifiers": [ + "--mod-accordion-animation-duration", "--mod-accordion-background-color-default", "--mod-accordion-background-color-down", "--mod-accordion-background-color-hover", "--mod-accordion-background-color-key-focus", - "--mod-accordion-component-edge-to-text", + "--mod-accordion-content-padding-inline", "--mod-accordion-corner-radius", "--mod-accordion-disclosure-indicator-height", "--mod-accordion-disclosure-indicator-to-text-space", "--mod-accordion-divider-color", "--mod-accordion-divider-thickness", + "--mod-accordion-edge-to-content-area", "--mod-accordion-edge-to-disclosure-indicator-space", "--mod-accordion-edge-to-text-space", - "--mod-accordion-focus-indicator-color", - "--mod-accordion-focus-indicator-gap", - "--mod-accordion-focus-indicator-thickness", "--mod-accordion-item-content-area-bottom-to-content", "--mod-accordion-item-content-area-top-to-content", "--mod-accordion-item-content-color", @@ -68,6 +60,9 @@ "--mod-accordion-item-content-font-style", "--mod-accordion-item-content-font-weight", "--mod-accordion-item-content-line-height", + "--mod-accordion-item-focus-indicator-color", + "--mod-accordion-item-focus-indicator-gap", + "--mod-accordion-item-focus-indicator-thickness", "--mod-accordion-item-header-bottom-to-text-space", "--mod-accordion-item-header-color-default", "--mod-accordion-item-header-color-down", @@ -80,11 +75,14 @@ "--mod-accordion-item-header-font-weight", "--mod-accordion-item-header-line-height", "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-height", + "--mod-accordion-item-min-block-size", + "--mod-accordion-item-minimum-height", + "--mod-accordion-item-minimum-width", "--mod-accordion-item-width", - "--mod-accordion-min-block-size" + "--mod-accordion-top-to-disclosure-indicator" ], "component": [ + "--spectrum-accordion-animation-duration", "--spectrum-accordion-background-color-default", "--spectrum-accordion-background-color-down", "--spectrum-accordion-background-color-hover", @@ -93,72 +91,82 @@ "--spectrum-accordion-bottom-to-text-compact-large", "--spectrum-accordion-bottom-to-text-compact-medium", "--spectrum-accordion-bottom-to-text-compact-small", - "--spectrum-accordion-bottom-to-text-regular-extra-large", - "--spectrum-accordion-bottom-to-text-regular-large", - "--spectrum-accordion-bottom-to-text-regular-medium", - "--spectrum-accordion-bottom-to-text-regular-small", + "--spectrum-accordion-bottom-to-text-extra-large", + "--spectrum-accordion-bottom-to-text-large", + "--spectrum-accordion-bottom-to-text-medium", + "--spectrum-accordion-bottom-to-text-small", "--spectrum-accordion-bottom-to-text-spacious-extra-large", "--spectrum-accordion-bottom-to-text-spacious-large", "--spectrum-accordion-bottom-to-text-spacious-medium", "--spectrum-accordion-bottom-to-text-spacious-small", - "--spectrum-accordion-component-edge-to-text", "--spectrum-accordion-content-area-bottom-to-content", + "--spectrum-accordion-content-area-edge-to-content-extra-large", + "--spectrum-accordion-content-area-edge-to-content-large", + "--spectrum-accordion-content-area-edge-to-content-medium", + "--spectrum-accordion-content-area-edge-to-content-small", "--spectrum-accordion-content-area-top-to-content", + "--spectrum-accordion-content-padding-inline", "--spectrum-accordion-corner-radius", "--spectrum-accordion-disclosure-indicator-height", - "--spectrum-accordion-disclosure-indicator-to-text", + "--spectrum-accordion-disclosure-indicator-to-text-extra-large", + "--spectrum-accordion-disclosure-indicator-to-text-large", + "--spectrum-accordion-disclosure-indicator-to-text-medium", + "--spectrum-accordion-disclosure-indicator-to-text-small", "--spectrum-accordion-disclosure-indicator-to-text-space", "--spectrum-accordion-divider-color", - "--spectrum-accordion-edge-to-disclosure-indicator", + "--spectrum-accordion-divider-thickness", + "--spectrum-accordion-edge-to-content-area", + "--spectrum-accordion-edge-to-content-area-extra-large", + "--spectrum-accordion-edge-to-content-area-large", + "--spectrum-accordion-edge-to-content-area-medium", + "--spectrum-accordion-edge-to-content-area-small", "--spectrum-accordion-edge-to-disclosure-indicator-space", "--spectrum-accordion-edge-to-text", "--spectrum-accordion-edge-to-text-space", - "--spectrum-accordion-focus-indicator-color", - "--spectrum-accordion-focus-indicator-gap", - "--spectrum-accordion-focus-indicator-thickness", "--spectrum-accordion-item-content-area-bottom-to-content", "--spectrum-accordion-item-content-area-top-to-content", "--spectrum-accordion-item-content-color", - "--spectrum-accordion-item-content-disabled-color", "--spectrum-accordion-item-content-font", "--spectrum-accordion-item-content-font-size", "--spectrum-accordion-item-content-font-style", "--spectrum-accordion-item-content-font-weight", "--spectrum-accordion-item-content-line-height", + "--spectrum-accordion-item-focus-indicator-color", + "--spectrum-accordion-item-focus-indicator-gap", + "--spectrum-accordion-item-focus-indicator-thickness", "--spectrum-accordion-item-header-bottom-to-text-space", "--spectrum-accordion-item-header-color-default", "--spectrum-accordion-item-header-color-down", "--spectrum-accordion-item-header-color-hover", "--spectrum-accordion-item-header-color-key-focus", - "--spectrum-accordion-item-header-disabled-color", + "--spectrum-accordion-item-header-cursor", "--spectrum-accordion-item-header-font", "--spectrum-accordion-item-header-font-size", "--spectrum-accordion-item-header-font-style", "--spectrum-accordion-item-header-font-weight", "--spectrum-accordion-item-header-line-height", "--spectrum-accordion-item-header-top-to-text-space", - "--spectrum-accordion-item-height", + "--spectrum-accordion-item-min-block-size", + "--spectrum-accordion-item-minimum-height", + "--spectrum-accordion-item-minimum-width", "--spectrum-accordion-item-width", - "--spectrum-accordion-min-block-size", "--spectrum-accordion-minimum-width", - "--spectrum-accordion-small-top-to-text-spacious", + "--spectrum-accordion-top-to-disclosure-indicator", "--spectrum-accordion-top-to-text-compact-extra-large", "--spectrum-accordion-top-to-text-compact-large", "--spectrum-accordion-top-to-text-compact-medium", "--spectrum-accordion-top-to-text-compact-small", - "--spectrum-accordion-top-to-text-regular-extra-large", - "--spectrum-accordion-top-to-text-regular-large", - "--spectrum-accordion-top-to-text-regular-medium", - "--spectrum-accordion-top-to-text-regular-small", + "--spectrum-accordion-top-to-text-extra-large", + "--spectrum-accordion-top-to-text-large", + "--spectrum-accordion-top-to-text-medium", + "--spectrum-accordion-top-to-text-small", "--spectrum-accordion-top-to-text-spacious-extra-large", "--spectrum-accordion-top-to-text-spacious-large", - "--spectrum-accordion-top-to-text-spacious-medium" + "--spectrum-accordion-top-to-text-spacious-medium", + "--spectrum-accordion-top-to-text-spacious-small" ], "global": [ - "--spectrum-background-opacity-default", - "--spectrum-background-opacity-down", - "--spectrum-background-opacity-hover", - "--spectrum-background-opacity-key-focus", + "--spectrum-animation-duration-100", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", @@ -167,41 +175,61 @@ "--spectrum-body-size-s", "--spectrum-body-size-xs", "--spectrum-bold-font-weight", + "--spectrum-chevron-icon-size-100", + "--spectrum-chevron-icon-size-200", + "--spectrum-chevron-icon-size-300", + "--spectrum-chevron-icon-size-75", "--spectrum-cjk-line-height-100", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-50", - "--spectrum-component-edge-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-400", + "--spectrum-component-height-50", "--spectrum-component-height-75", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-divider-thickness-small", + "--spectrum-field-default-width-extra-large", + "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", + "--spectrum-field-edge-to-disclosure-icon-100", + "--spectrum-field-edge-to-disclosure-icon-200", + "--spectrum-field-edge-to-disclosure-icon-300", + "--spectrum-field-edge-to-disclosure-icon-75", + "--spectrum-field-top-to-disclosure-icon-compact-extra-large", + "--spectrum-field-top-to-disclosure-icon-compact-large", + "--spectrum-field-top-to-disclosure-icon-compact-medium", + "--spectrum-field-top-to-disclosure-icon-compact-small", + "--spectrum-field-top-to-disclosure-icon-extra-large", + "--spectrum-field-top-to-disclosure-icon-large", + "--spectrum-field-top-to-disclosure-icon-medium", + "--spectrum-field-top-to-disclosure-icon-small", + "--spectrum-field-top-to-disclosure-icon-spacious-extra-large", + "--spectrum-field-top-to-disclosure-icon-spacious-large", + "--spectrum-field-top-to-disclosure-icon-spacious-medium", + "--spectrum-field-top-to-disclosure-icon-spacious-small", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", + "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", - "--spectrum-font-size-500", - "--spectrum-font-size-700", + "--spectrum-font-size-400", "--spectrum-gray-200", - "--spectrum-gray-900-rgb", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack" - ], - "system-theme": [ - "--system-accordion-divider-color", - "--system-accordion-item-content-color", - "--system-accordion-item-content-disabled-color" + "--spectrum-sans-font-family-stack", + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-25", + "--spectrum-transparent-black-300" ], "passthroughs": [], "high-contrast": [] diff --git a/components/accordion/index.css b/components/accordion/index.css index 2e0a7616455..93bda34c085 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -11,30 +11,36 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Accordion { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator); + /* Layout and spacing */ + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); + --spectrum-accordion-item-width: var(--spectrum-field-default-width-medium); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-medium); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-100); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-medium); + --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-medium); --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium); - --spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-medium); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-medium); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-medium); + --spectrum-accordion-item-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-accordion-item-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-medium); --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small); /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); - --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); + --spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100); + + --spectrum-accordion-item-header-cursor: pointer; + --spectrum-accordion-animation-duration: var(--spectrum-animation-duration-100); /* Text body */ --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); @@ -44,31 +50,34 @@ --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); /* Colors */ - --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); - --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); - --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); - --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); - - /* Label */ - --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color); - - /* Focus indicator */ - --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); - - --spectrum-accordion-min-block-size: max( - var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), - calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)))) + /* @TODO: use opacity tokens when available */ + --spectrum-accordion-background-color-default: var(--mod-accordion-background-color-default, var(--spectrum-transparent-black-25)); + --spectrum-accordion-background-color-hover: var(--mod-accordion-background-color-hover, var(--spectrum-transparent-black-100)); + --spectrum-accordion-background-color-down: var(--mod-accordion-background-color-down, var(--spectrum-transparent-black-300)); + --spectrum-accordion-background-color-key-focus: var(--mod-accordion-background-color-key-focus, var(--spectrum-transparent-black-100)); + + --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); + --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); + --spectrum-accordion-item-focus-indicator-color: var(--mod-accordion-item-focus-indicator-color, var(--spectrum-focus-indicator-color)); + + --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-color-default, var(--spectrum-neutral-content-color-default)); + --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-color-hover, var(--spectrum-neutral-content-color-hover)); + --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-color-down, var(--spectrum-neutral-content-color-down)); + --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-neutral-content-color-key-focus)); + + /* Calculated minimum block-size that accounts for density spacing changes and/or increases in font size and line-height. + This gives us the block-size of the header with a single line of text. */ + --spectrum-accordion-item-min-block-size: max( + var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)), + var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))) ); + /* Right-to-left adjustments for transforms */ &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } + /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { @@ -77,82 +86,130 @@ } } +.spectrum-Accordion--sizeS { + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); /* small size default width uses this min-width token */ + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-75); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-small); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-75); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-small); + --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-small); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-small); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-100); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-small); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-small); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-small); +} + +.spectrum-Accordion--sizeL { + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-width: var(--spectrum-field-default-width-large); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-200); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-large); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-200); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-large); + --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-large); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-large); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-large); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-large); +} + +.spectrum-Accordion--sizeXL { + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-width: var(--spectrum-field-default-width-extra-large); + --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-300); + --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-extra-large); + --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-300); + --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-extra-large); + --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-extra-large); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-400); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-extra-large); + --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-extra-large); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-extra-large); +} + .spectrum-Accordion--compact { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-50); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-extra-large); } } .spectrum-Accordion--spacious { - --spectrum-accordion-item-header-line-height: 1.278; + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-header-line-height: 1.25; - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious); + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-header-line-height: 1.273; + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); + --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large); } } -.spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small); +.spectrum-Accordion--quiet { + --spectrum-accordion-divider-thickness: 0px; } -.spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large); +.spectrum-Accordion-item.is-disabled { + --spectrum-accordion-item-header-cursor: default; + --spectrum-accordion-background-color-default: transparent; + --spectrum-accordion-background-color-hover: transparent; + --spectrum-accordion-background-color-down: transparent; + --spectrum-accordion-background-color-key-focus: transparent; + --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); } -.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--spectrum-component-height-400); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); - --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large); +.spectrum-Accordion.spectrum-Accordion--noInlinePadding { + --spectrum-accordion-edge-to-disclosure-indicator-space: 0px; + --spectrum-accordion-edge-to-content-area: 0px; } .spectrum-Accordion { @@ -165,21 +222,15 @@ .spectrum-Accordion-item { z-index: inherit; position: relative; - margin: 0; - - min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)); - min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); + min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); + min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); + inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); + border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); &:first-child { - border-block-start: 1px solid transparent; - border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); - border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); + border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); } - - border-block-end: 1px solid transparent; - border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); - border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); } .spectrum-Accordion-itemHeading { @@ -188,27 +239,21 @@ box-sizing: border-box; } -.spectrum-Accordion-itemIconContainer { - padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)); +.spectrum-Accordion-itemIndicator { inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - display: flex; - justify-content: center; - align-items: center; - color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); - position: absolute; - inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2)); - - &:dir(rtl) { - transform: scaleX(-1); - } + transform: var(--spectrum-logical-rotation); + transition: transform ease var(--mod-accordion-animation-duration, var(--spectrum-accordion-animation-duration)); + flex-shrink: 0; + margin-block-start: var(--mod-accordion-top-to-disclosure-indicator, var(--spectrum-accordion-top-to-disclosure-indicator)); + margin-inline: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)) var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)); } .spectrum-Accordion-itemContent { - padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); - padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)); display: none; - color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color)); + padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); + padding-inline: var(--mod-accordion-content-padding-inline, var(--spectrum-accordion-content-padding-inline)); + color: var(--spectrum-accordion-item-content-color); font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); @@ -216,124 +261,79 @@ line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); } +.spectrum-Accordion-itemTitle { + padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); + padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); +} + +/* Focusable button that expands/collapses the accordion item. */ .spectrum-Accordion-itemHeader { + box-sizing: border-box; position: relative; + display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; - box-sizing: border-box; - padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); - - padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))); - padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); - - min-block-size: var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)); + /* start spacing controlled by edge to disclosure icon spacing */ + padding-inline: 0 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); text-overflow: ellipsis; - cursor: pointer; + cursor: var(--spectrum-accordion-item-header-cursor); font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); - /* reset styling if button element is used */ + /* Reset styling of button element */ appearance: none; border: 0; text-align: start; inline-size: 100%; - &:focus { - outline: none; - - &::after { - content: ""; - position: absolute; - inset-inline-start: 0; - } - } - color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default)); - background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default)); + color: var(--spectrum-accordion-item-header-color-default); + background-color: var(--spectrum-accordion-background-color-default); &:hover { - color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); - - + .spectrum-Accordion-itemIconContainer { - color: var(--mod-accordion-item-header-color-hover, var(--spectrum-accordion-item-header-color-hover)); - } + color: var(--spectrum-accordion-item-header-color-hover); + background-color: var(--spectrum-accordion-background-color-hover); } &:focus-visible { border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); - - outline: var(--mod-accordion-focus-indicator-thickness, var(--spectrum-accordion-focus-indicator-thickness)) solid var(--mod-accordion-focus-indicator-color, var(--spectrum-accordion-focus-indicator-color)); - background-color: var(--mod-accordion-background-color-key-focus, var(--spectrum-accordion-background-color-key-focus)); - color: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-accordion-item-header-color-key-focus)); - outline-offset: calc(var(--mod-accordion-focus-indicator-gap, var(--spectrum-accordion-focus-indicator-gap)) * -1); - } - - &:active { - background-color: var(--mod-accordion-background-color-down, var(--spectrum-accordion-background-color-down)); - color: var(--mod-accordion-item-header-color-down, var(--spectrum-accordion-item-header-color-down)); + background-color: var(--spectrum-accordion-background-color-key-focus); + color: var(--spectrum-accordion-item-header-color-key-focus); + outline: var(--mod-accordion-item-focus-indicator-thickness, var(--spectrum-accordion-item-focus-indicator-thickness)) solid var(--spectrum-accordion-item-focus-indicator-color); + outline-offset: var(--mod-accordion-item-focus-indicator-gap, var(--spectrum-accordion-item-focus-indicator-gap)); } -} -.spectrum-Accordion-item { - &.is-open { - .spectrum-Accordion-itemHeader:hover { - background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover)); - } + /* higher specificity to maintain active styles over @media hover styles */ + &.spectrum-Accordion-itemHeader:active { + background-color: var(--spectrum-accordion-background-color-down); + color: var(--spectrum-accordion-item-header-color-down); } } -.spectrum-Accordion-item.is-disabled { - .spectrum-Accordion-itemHeader { - &, - &:hover, - &:focus-visible { - color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); - background-color: transparent; - } - - + .spectrum-Accordion-itemIconContainer { - color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color)); - } +.spectrum-Accordion-item.is-open { + > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation,) rotate(90deg); } - .spectrum-Accordion-itemContent { - color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color)); + > .spectrum-Accordion-itemContent { + display: block; } } -@media (forced-colors: active) { - .spectrum-Accordion-itemHeader { - &::after { - /* make sure focus ring renders */ - forced-color-adjust: none; - content: ""; - position: absolute; - inset-inline-start: 0; - } +.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader { + &:hover, + &:active { + border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); } } -.spectrum-Accordion-item { - &.is-open { - > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, - > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { - transform: var(--spectrum-logical-rotation,) rotate(90deg); - } - - > .spectrum-Accordion-itemContent { - display: block; - } - } - - &.is-disabled { - .spectrum-Accordion-itemHeader { - cursor: default; - } +@media (forced-colors: active) { + .spectrum-Accordion { + --spectrum-accordion-item-focus-indicator-color: Highlight; } } diff --git a/components/accordion/package.json b/components/accordion/package.json index bb99379353a..85902d43650 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/accordion", - "version": "7.1.0", + "version": "8.0.0-next.2", "description": "The Spectrum CSS accordion component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 3709e75871f..1af62f4e989 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -1,19 +1,20 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size } from "@spectrum-css/preview/types"; -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { isQuiet, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { AccordionGroup } from "./accordion.test.js"; +import { AccordionGroup, testsContent as accordionContent } from "./accordion.test.js"; import { Template } from "./template.js"; /** - * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements. + * The accordion element contains a list of items that can be expanded or collapsed to reveal + * additional content or information associated with each item. There can be zero expanded items, + * exactly one expanded item, or more than one item expanded at a time, depending on the + * configuration. This list of items is defined by child accordion item elements. * - * ## Density options - * - * Accordion has three density options and requires that you specify one of the density types: compact, regular, or spacious. + * Accordion has three density options: regular (default), compact, or spacious. While all the + * densities maintain the same font size, compact density reduces vertical spacing between rows, + * while spacious density increases it. */ export default { title: "Accordion", @@ -49,6 +50,17 @@ export default { options: ["compact", "regular", "spacious"], control: "select", }, + hasNoInlinePadding: { + name: "No inline padding styling", + description: "Displays accordion item headers without default inline padding.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: { type: "boolean" }, + }, + isQuiet }, args: { rootClass: "spectrum-Accordion", @@ -56,6 +68,8 @@ export default { density: "regular", collapseAll: false, disableAll: false, + isQuiet: false, + hasNoInlinePadding: false, }, parameters: { actions: { @@ -68,101 +82,19 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, + tags: ["migrated"], }, }; -/* Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. */ -const content = new Map([ - [ - "Are any Adobe products free?", - { - content: - "Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.", - isDisabled: true, - }, - ], - [ - "Are Adobe products worth it?", - { - content: Typography({ - semantics: "body", - content: [ - "Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. Or consider Creative Cloud, with plans starting at just US$9.99/mo. Every Adobe Creative Cloud plan includes perks like free stock images and fonts, collaboration tools, and cloud storage as well as regular feature updates to deliver the latest technology.", - Link({ - url: "https://www.adobe.com/creativecloud/plans.html", - text: "Learn more about Adobe Creative Cloud plans and pricing.", - }), - ], - }), - isOpen: true, - }, - ], - [ - "Which Adobe product is best for editing PDFs?", - { - content: Typography({ - semantics: "body", - content: [ - "You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.", - Link({ - url: "https://www.adobe.com/acrobat.html", - text: "Learn more about Acrobat.", - }), - ], - }), - }, - ], - [ - "How many products does Adobe have?", - { - content: - "Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.", - isOpen: true, - }, - ], - [ - "How much do Adobe products cost?", - { - content: Typography({ - semantics: "body", - content: [ - "Creative Cloud plans start at US$9.99/mo. You can subscribe to specific Single App plans or get 20+ creative apps and services in the Creative Cloud All Apps plan.", - Link({ - url: "https://www.adobe.com/creativecloud/plans.html", - text: "Explore Creative Cloud plans.", - }), - ], - }), - }, - ], - [ - "What are the most popular Adobe products?", - { - content: - "Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.", - }, - ], - [ - "How can I get a student discount on Adobe products?", - { - content: Typography({ - semantics: "body", - content: [ - `Students who provide a valid school-issued email address at purchase are eligible to save over 60% on Creative Cloud All Apps, which includes 20+ apps such as Photoshop, Illustrator, InDesign, Acrobat Pro, and more. ${Link( - { - url: "https://www.adobe.com/creativecloud/buy/students.html", - text: "Learn more about Creative Cloud for students.", - } - )}`, - ], - }), - }, - ] -]); - +/** + * The default accordion displays at medium size with a regular density. + */ export const Default = AccordionGroup.bind({}); Default.args = { - items: content, + items: accordionContent, }; Default.parameters = { chromatic: { disableSnapshot: false }, @@ -180,33 +112,109 @@ WithForcedColors.parameters = { }; // ********* DOCS ONLY ********* // + +/** + * Accordion items have a default width for each size, but a custom width can also be set to any + * width that meets or exceeds the minimum width. + */ +export const CustomWidth = AccordionGroup.bind({}); +CustomWidth.tags = ["!dev"]; +CustomWidth.storyName = "Custom width"; +CustomWidth.args = { + items: accordionContent, + customStyles: { + "--mod-accordion-item-width": "500px", + }, +}; +CustomWidth.parameters = { + chromatic: { disableSnapshot: false }, +}; + +/** + * The compact density has less vertical spacing between rows. + */ export const Compact = Template.bind({}); Compact.tags = ["!dev"]; Compact.args = { - items: content, + items: accordionContent, density: "compact", }; Compact.parameters = { chromatic: { disableSnapshot: true }, }; -Compact.storyName = "Density - Compact"; +Compact.storyName = "Density: Compact"; +/** + * The spacious density has more vertical spacing between rows. + */ export const Spacious = Template.bind({}); Spacious.tags = ["!dev"]; Spacious.args = { - items: content, + items: accordionContent, density: "spacious", }; Spacious.parameters = { chromatic: { disableSnapshot: true }, }; -Spacious.storyName = "Density - Spacious"; +Spacious.storyName = "Density: Spacious"; +/** + * Individual accordion items can be disabled by applying the `.is-disabled` class to the + * `.spectrum-Accordion-item` element. This example also demonstrates the use of the disabled + * attribute on the heading button. + */ +export const Disabled = Template.bind({}); +Disabled.tags = ["!dev"]; +Disabled.args = { + items: accordionContent, + disableAll: true, +}; +Disabled.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The optional quiet style for accordion has no dividers between sections. This style works best + * when a clear layout (vertical stack, table, grid) makes it easy to see and understand because + * too many quiet components in a small space can be hard to differentiate. This can be applied by + * adding the `.spectrum-Accordion--quiet` class alongside the parent `.spectrum-Accordion` class. + */ +export const Quiet = Template.bind({}); +Quiet.tags = ["!dev"]; +Quiet.args = { + items: accordionContent, + isQuiet: true, +}; +Quiet.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * Implementations may choose to remove inline padding from the accordion item headers by adding + * the `.spectrum-Accordion--noInlinePadding` class alongside the parent `.spectrum-Accordion` + * class. Accordion item header padding will be removed, but the body text content will keep its + * own padding from the edge. + */ +export const NoInlinePadding = Template.bind({}); +NoInlinePadding.storyName = "No inline padding"; +NoInlinePadding.tags = ["!dev"]; +NoInlinePadding.args = { + items: accordionContent, + hasNoInlinePadding: true, +}; +NoInlinePadding.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * Each of the different sizes has varying font sizes, and varying vertical spacing between the + * rows. Medium is the default size. + */ export const Sizing = (args, context) => Sizes({ Template, withBorder: false, withHeading: false, - items: content, + items: accordionContent, ...args, }, context); Sizing.tags = ["!dev"]; diff --git a/components/accordion/stories/accordion.test.js b/components/accordion/stories/accordion.test.js index 192400fe3fb..20e4e9b4682 100644 --- a/components/accordion/stories/accordion.test.js +++ b/components/accordion/stories/accordion.test.js @@ -1,27 +1,186 @@ -import { Variants } from "@spectrum-css/preview/decorators"; +import { Template as Link } from "@spectrum-css/link/stories/template.js"; +import { Sizes, Variants } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { Template } from "./template.js"; +/** + * General accordion item content for tests. + * Content sourced from: https://www.adobe.com/products/catalog.html#:~:text=Frequently%20asked%20questions. + */ +export const testsContent = new Map([ + [ + "Are any Adobe products free?", + { + content: "Yes, Adobe offers free products like Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. You can also use Creative Cloud Express, Fresco, and Lightroom Mobile for free, with the option of making in-app purchases.", + }, + ], + [ + "Are Adobe products worth it?", + { + content: Typography({ + semantics: "body", + content: [ + "This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Adobe makes some of the most widely used software applications in the world, many of which are industry standard.", + Link({ + url: "https://www.adobe.com/creativecloud/plans.html", + text: "Learn more about Adobe Creative Cloud plans and pricing.", + }), + ], + }), + isOpen: true, + }, + ], + [ + "Which Adobe product is best for editing PDFs?", + { + content: Typography({ + semantics: "body", + content: [ + "You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.", + Link({ + url: "https://www.adobe.com/acrobat.html", + text: "Learn more about Acrobat.", + }), + ], + }), + }, + ], + [ + "How many products does Adobe have?", + { + content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.", + isOpen: true, + }, + ], + [ + "What are the most popular Adobe products?", + { + content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.", + }, + ], +]); + +const defaultContentText = "This is an example of text content within the content area that is not wrapped by any typography classes or elements."; + +/** + * Content for testing accordion item states. + */ +const statesTestContent = new Map([ + [ + "Hovered", + { + isHovered: true, + content: defaultContentText, + }, + ], + [ + "Disabled", + { + isDisabled: true, + content: defaultContentText, + }, + ], + [ + "Hovered + disabled", + { + isDisabled: true, + isHovered: true, + content: defaultContentText, + }, + ], + [ + "Focus-visible", + { + isFocused: true, + content: defaultContentText, + }, + ], + [ + "Active/down", + { + isActive: true, + content: defaultContentText, + }, + ], + [ + "Active/down + hovered", + { + isActive: true, + isHovered: true, + content: defaultContentText, + }, + ], + [ + "Focus-visible + hovered", + { + isFocused: true, + isHovered: true, + content: defaultContentText, + }, + ], +]); + export const AccordionGroup = Variants({ Template, testData: [ { testHeading: "Standard", + items: testsContent, customStyles: { maxInlineSize: "500px", }, }, { - testHeading: "Compact", - density: "compact", - collapseAll: true, + testHeading: "Quiet", + items: testsContent, + isQuiet: true, + customStyles: { + maxInlineSize: "500px", + }, + }, + { + testHeading: "No Inline Padding", + items: testsContent, + hasNoInlinePadding: true, customStyles: { maxInlineSize: "500px", }, + }, + { + testHeading: "Heading text wrapping", + items: new Map([ + [ + "This example has a heading that wraps to two lines.", + { + content: defaultContentText, + isOpen: false, + }, + ], + [ + "This example has a heading that wraps to more than two lines. What are the most popular Adobe products?", + { + content: defaultContentText, + isOpen: false, + }, + ], + [ + "This example has a heading that wraps to more than two lines. It also shows the text in its content area.", + { + content: defaultContentText, + isOpen: true, + }, + ], + ]), + customStyles: { + maxInlineSize: "300px", + }, withStates: false, }, { - testHeading: "Spacious", - density: "spacious", + testHeading: "Compact", + items: testsContent, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + density: "compact", collapseAll: true, customStyles: { maxInlineSize: "500px", @@ -29,18 +188,21 @@ export const AccordionGroup = Variants({ withStates: false, }, { - testHeading: "Text wrapping", + testHeading: "Spacious", + items: testsContent, + Template: (args, context) => { return Sizes({Template: Template, ...args}, context); }, + density: "spacious", collapseAll: true, customStyles: { - maxInlineSize: "300px", + maxInlineSize: "500px", }, withStates: false, }, ], stateData: [ { - testHeading: "Disabled", - disableAll: true, + testHeading: "Accordion item states", + items: statesTestContent, }, ], }); diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 8294f3a4027..11930316425 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AccordionItem = ({ heading, @@ -19,6 +16,9 @@ export const AccordionItem = ({ idx = 0, isDisabled = false, isOpen = false, + isHovered = false, + isActive = false, + isFocused = false, iconSize = "m", customStyles = {}, customClasses = [], @@ -41,25 +41,33 @@ export const AccordionItem = ({ <h3 class="${rootClass}Heading"> <!-- WAI-ARIA 1.1: Item header <button> uses aria-expanded attribute to indicate expanded state. --> <button - class="${rootClass}Header" + class=${classMap({ + [`${rootClass}Header`]: true, + "is-hover": isHovered, + "is-active": isActive, + "is-focus-visible": isFocused, + })} type="button" ?disabled=${isDisabled} id="spectrum-accordion-item-${idx}-header" aria-controls="spectrum-accordion-item-${idx}-content" aria-expanded="${open ? "true" : "false"}" > - ${heading} - </button> - <span class="${rootClass}IconContainer"> ${Icon({ - iconName: !isOpen ? "ChevronRight" : "ChevronDown", + iconName: (!isOpen ? "ChevronRight" : "ChevronDown") + ({ + s: "75", + m: "100", + l: "200", + xl: "300", + }[iconSize] || "100"), setName: "ui", size: iconSize, customClasses: [`${rootClass}Indicator`], }, context)} - </span> + <span class="${rootClass}Title">${heading}</span> + </button> </h3> - <!-- WAI-ARIA 1.1: Item content role changed from "tabpanel" to "region" --> + <!-- WAI-ARIA 1.1: Item content uses a role of "region" --> <div class="${rootClass}Content" role="region" @@ -76,6 +84,8 @@ export const Template = ({ rootClass = "spectrum-Accordion", size = "m", density = "regular", + isQuiet = false, + hasNoInlinePadding = false, items = [], id = getRandomId("accordion"), disableAll = false, @@ -90,9 +100,11 @@ export const Template = ({ class="${classMap({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: - typeof size !== "undefined", + typeof size !== "undefined" && size !== "m", [`${rootClass}--${density}`]: typeof density !== "undefined" && density !== "regular", + [`${rootClass}--quiet`]: isQuiet, + [`${rootClass}--noInlinePadding`]: hasNoInlinePadding, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })}" id=${ifDefined(id)} diff --git a/components/accordion/themes/express.css b/components/accordion/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/accordion/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/accordion/themes/spectrum-two.css b/components/accordion/themes/spectrum-two.css deleted file mode 100644 index 7097b1adc62..00000000000 --- a/components/accordion/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-200); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - } -} diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css deleted file mode 100644 index 572d3f1db1b..00000000000 --- a/components/accordion/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-300); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-gray-400); - --spectrum-accordion-item-content-color: var(--spectrum-gray-800); - } -} diff --git a/components/actionbar/CHANGELOG.md b/components/actionbar/CHANGELOG.md index 41dfbaa259f..85eb79c8547 100644 --- a/components/actionbar/CHANGELOG.md +++ b/components/actionbar/CHANGELOG.md @@ -1,5 +1,49 @@ # Change log +## 11.0.0-next.2 + +### Major Changes + +- [#3657](https://github.com/adobe/spectrum-css/pull/3657) [`c06e995`](https://github.com/adobe/spectrum-css/commit/c06e9953caaaafa3c3f1841057e26c6212754ae5) Thanks [@aramos-adobe](https://github.com/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` + +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/closebutton@7.0.0-next.0 + - @spectrum-css/fieldlabel@11.0.0-next.0 + - @spectrum-css/actiongroup@7.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 10.1.1 ### Patch Changes diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 3632db90bf7..2073a6be7d6 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -4,94 +4,83 @@ ".spectrum-ActionBar", ".spectrum-ActionBar .spectrum-ActionBar-popover", ".spectrum-ActionBar .spectrum-ActionGroup", - ".spectrum-ActionBar .spectrum-CloseButton", ".spectrum-ActionBar .spectrum-FieldLabel", ".spectrum-ActionBar .spectrum-FieldLabel:lang(ja)", ".spectrum-ActionBar .spectrum-FieldLabel:lang(ko)", ".spectrum-ActionBar .spectrum-FieldLabel:lang(zh)", - ".spectrum-ActionBar--emphasized .spectrum-ActionBar-popover", - ".spectrum-ActionBar--emphasized .spectrum-FieldLabel", ".spectrum-ActionBar--fixed", ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover", ".spectrum-ActionBar--sticky", ".spectrum-ActionBar.is-open", + ".spectrum-ActionBar.spectrum-ActionBar--emphasized", ".spectrum-ActionBar:lang(ja)", ".spectrum-ActionBar:lang(ko)", ".spectrum-ActionBar:lang(zh)" ], "modifiers": [ + "--mod-actionbar-close-button-to-counter", "--mod-actionbar-corner-radius", - "--mod-actionbar-emphasized-background-color", - "--mod-actionbar-emphasized-item-counter-color", "--mod-actionbar-height", "--mod-actionbar-item-counter-color", - "--mod-actionbar-item-counter-font-size", - "--mod-actionbar-item-counter-line-height", "--mod-actionbar-item-counter-line-height-cjk", + "--mod-actionbar-minimum-width", "--mod-actionbar-popover-background-color", "--mod-actionbar-popover-border-color", "--mod-actionbar-shadow-blur", "--mod-actionbar-shadow-color", "--mod-actionbar-shadow-horizontal", "--mod-actionbar-shadow-vertical", - "--mod-actionbar-spacing-action-group-end", - "--mod-actionbar-spacing-action-group-top", - "--mod-actionbar-spacing-close-button-end", - "--mod-actionbar-spacing-close-button-start", - "--mod-actionbar-spacing-close-button-top", - "--mod-actionbar-spacing-item-counter-end", - "--mod-actionbar-spacing-item-counter-top", - "--mod-actionbar-spacing-outer-edge" + "--mod-actionbar-spacing-action-group-edge", + "--mod-actionbar-spacing-bottom-area", + "--mod-actionbar-spacing-label-to-action-group", + "--mod-actionbar-spacing-outer-edge", + "--mod-actionbar-spacing-top-area" ], "component": [ + "--spectrum-action-bar-border-color", + "--spectrum-action-bar-bottom-to-content-area", + "--spectrum-action-bar-close-button-to-counter", + "--spectrum-action-bar-counter-font-size", + "--spectrum-action-bar-edge-to-content-area", "--spectrum-action-bar-height", - "--spectrum-action-bar-top-to-item-counter", + "--spectrum-action-bar-label-to-action-group-area", + "--spectrum-action-bar-minimum-width", + "--spectrum-action-bar-top-to-content-area", + "--spectrum-actionbar-close-button-to-counter", "--spectrum-actionbar-corner-radius", - "--spectrum-actionbar-emphasized-background-color", - "--spectrum-actionbar-emphasized-item-counter-color", "--spectrum-actionbar-height", "--spectrum-actionbar-item-counter-color", - "--spectrum-actionbar-item-counter-font-size", "--spectrum-actionbar-item-counter-line-height", "--spectrum-actionbar-item-counter-line-height-cjk", + "--spectrum-actionbar-minimum-width", "--spectrum-actionbar-popover-background-color", "--spectrum-actionbar-popover-border-color", "--spectrum-actionbar-shadow-blur", "--spectrum-actionbar-shadow-color", "--spectrum-actionbar-shadow-horizontal", "--spectrum-actionbar-shadow-vertical", - "--spectrum-actionbar-spacing-action-group-end", - "--spectrum-actionbar-spacing-action-group-top", - "--spectrum-actionbar-spacing-close-button-end", - "--spectrum-actionbar-spacing-close-button-start", - "--spectrum-actionbar-spacing-close-button-top", - "--spectrum-actionbar-spacing-item-counter-end", - "--spectrum-actionbar-spacing-item-counter-top", - "--spectrum-actionbar-spacing-outer-edge" + "--spectrum-actionbar-spacing-bottom-area", + "--spectrum-actionbar-spacing-label-to-action-group", + "--spectrum-actionbar-spacing-outer-edge", + "--spectrum-actionbar-spacing-padding-inline", + "--spectrum-actionbar-spacing-top-area" ], "global": [ + "--spectrum-background-elevated-color", "--spectrum-cjk-line-height-100", - "--spectrum-corner-radius-100", - "--spectrum-drop-shadow-blur", - "--spectrum-drop-shadow-color", - "--spectrum-drop-shadow-x", - "--spectrum-drop-shadow-y", - "--spectrum-font-size-100", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-drop-shadow-elevated-blur", + "--spectrum-drop-shadow-elevated-color", + "--spectrum-drop-shadow-elevated-x", + "--spectrum-drop-shadow-elevated-y", "--spectrum-gray-25", - "--spectrum-gray-400", - "--spectrum-informative-background-color-default", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", - "--spectrum-spacing-100", - "--spectrum-spacing-300", - "--spectrum-spacing-400", - "--spectrum-spacing-75", - "--spectrum-white" + "--spectrum-spacing-300" ], - "system-theme": [ - "--system-action-bar-popover-background-color", - "--system-action-bar-popover-border-color" + "passthroughs": [ + "--mod-fieldlabel-font-size", + "--mod-fieldlabel-line-height" ], - "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 474499e462f..737af9a4382 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -11,42 +11,37 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionBar { + /* Layout */ --spectrum-actionbar-height: var(--spectrum-action-bar-height); - --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); - - /* item counter field label */ - --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); + --spectrum-actionbar-minimum-width: var(--spectrum-action-bar-minimum-width); + --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-actionbar-spacing-label-to-action-group: var(--spectrum-action-bar-label-to-action-group-area); + --spectrum-actionbar-spacing-padding-inline: var(--spectrum-action-bar-edge-to-content-area); + --spectrum-actionbar-spacing-top-area: var(--spectrum-action-bar-top-to-content-area); + --spectrum-actionbar-spacing-bottom-area: var(--spectrum-action-bar-bottom-to-content-area); + --spectrum-actionbar-close-button-to-counter: var(--spectrum-action-bar-close-button-to-counter); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- defines the field label mod */ --spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100); --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default); - /* emphasized variation colors */ - --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default); - --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); + /* colors - applied to popover */ + --spectrum-actionbar-popover-background-color: var(--spectrum-background-elevated-color); + --spectrum-actionbar-popover-border-color: var(--spectrum-action-bar-border-color); /* spacing of action bar bottom and horizontal outer edge */ --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); - /* spacing of close button */ - --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); - - /* spacing of item counter field label */ - --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); - --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); - - /* spacing of action group */ - --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); - /* drop shadow */ - --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-elevated-x); + --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-elevated-y); + --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-elevated-blur); + --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-elevated-color); + + &.spectrum-ActionBar--emphasized { + --spectrum-actionbar-item-counter-color: var(--spectrum-gray-25); + --spectrum-actionbar-popover-background-color: var(--spectrum-neutral-content-color-default); + } /* cjk language support for item counter */ &:lang(ja), @@ -56,17 +51,6 @@ } } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-ActionBar { - --highcontrast-actionbar-popover-border-color: CanvasText; - } - - .spectrum-ActionBar--emphasized .spectrum-ActionBar-popover { - --highcontrast-actionbar-popover-border-color: CanvasText; - } -} - /* ActionBar is outer wrapper with nested popover component within */ .spectrum-ActionBar { /* creates horizontal spacing to edge */ @@ -93,11 +77,12 @@ .spectrum-ActionBar-popover { /* popover is ActionBar height */ block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); + min-inline-size: var(--mod-actionbar-minimum-width, var(--spectrum-actionbar-minimum-width)); box-sizing: border-box; inline-size: 100%; margin: auto; - padding-block-start: 0; - padding-block-end: 0; + padding-inline: var(--mod-actionbar-spacing-action-group-edge, var(--spectrum-actionbar-spacing-padding-inline)); + padding-block: var(--mod-actionbar-spacing-top-area, var(--spectrum-actionbar-spacing-top-area)) var(--mod-actionbar-spacing-bottom-area, var(--spectrum-actionbar-spacing-bottom-area)); /* Be relative so our width can be restricted */ position: relative; @@ -114,27 +99,15 @@ /* inner layout of content items */ display: flex; flex-direction: row; - } - - /* close button */ - .spectrum-CloseButton { - margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start)); - margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end)); - margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top)); - flex-shrink: 0; + align-items: center; } /* item counter */ .spectrum-FieldLabel { - margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end)); - margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top)); - - /* neutralize padding for correct spacing within ActionBar */ - padding: 0; - - font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size)); + --mod-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size); + --mod-fieldlabel-line-height: var(--spectrum-actionbar-item-counter-line-height); color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color)); - line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height)); + padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter)); /* cjk language support */ &:lang(ja), @@ -146,26 +119,9 @@ /* action group */ .spectrum-ActionGroup { - margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end)); - margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top)); - /* align to end by default */ margin-inline-start: auto; - } -} - -.spectrum-ActionBar--emphasized { - .spectrum-ActionBar-popover { - filter: none; - background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color)); - - /* border transparent instead of none so WHCM will have visible border */ - border-color: transparent; - } - - /* ensure text is legible on emphasized background */ - .spectrum-FieldLabel { - color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color)); + padding-inline-start: var(--mod-actionbar-spacing-label-to-action-group, var(--spectrum-actionbar-spacing-label-to-action-group)); /* space between label and action group */ } } @@ -183,3 +139,10 @@ .spectrum-ActionBar--flexible .spectrum-ActionBar-popover { inline-size: auto; } + +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-ActionBar { + --highcontrast-actionbar-popover-border-color: CanvasText; + } +} diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 9df58b27132..0cde6f4fda4 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbar", - "version": "10.1.1", + "version": "11.0.0-next.2", "description": "The Spectrum CSS actionbar component", "license": "Apache-2.0", "author": "Adobe", @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actiongroup": ">=7.0.0-next.0", + "@spectrum-css/closebutton": ">=7.0.0-next.0", + "@spectrum-css/fieldlabel": ">=11.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actiongroup": { @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/actiongroup": "6.1.0", - "@spectrum-css/closebutton": "6.1.0", - "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actiongroup": "7.0.0-next.1", + "@spectrum-css/closebutton": "7.0.0-next.1", + "@spectrum-css/fieldlabel": "11.0.0-next.2", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index aa2e867ea09..c19710c0051 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -72,6 +72,10 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, + tags: ["migrated"], }, }; @@ -92,7 +96,7 @@ WithForcedColors.parameters = { // ********* DOCS ONLY ********* // /** - * The emphasized action bar has a blue background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table). + * The emphasized action bar has a neutral background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table). */ export const Emphasized = BehavioralTemplate.bind({}); Emphasized.tags = ["!dev"]; diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 8b134157bd2..44b7d8265e3 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -1,20 +1,16 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionBar", - size = "m", isOpen = true, isEmphasized = false, isSticky = false, @@ -28,7 +24,6 @@ export const Template = ({ <div class=${classMap({ [rootClass]: true, - [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--emphasized`]: isEmphasized, [`${rootClass}--sticky`]: isSticky, [`${rootClass}--fixed`]: isFixed, @@ -45,13 +40,21 @@ export const Template = ({ content: [ CloseButton({ label: "Clear selection", - staticColor: isEmphasized ? "white" : undefined, + staticColor: isEmphasized + ? context.globals?.color === "dark" + ? "black" + : "white" + : undefined, }, context), - FieldLabel({ size: "s", label: "2 Selected" }, context), + FieldLabel({ size: "s", label: "224 Selected" }, context), ActionGroup({ size: "m", areQuiet: true, - staticColor: isEmphasized ? "white" : undefined, + staticColor: isEmphasized + ? context.globals?.color === "dark" + ? "black" + : "white" + : undefined, content: [ { iconName: "Edit", diff --git a/components/actionbar/themes/express.css b/components/actionbar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/actionbar/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/actionbar/themes/spectrum-two.css b/components/actionbar/themes/spectrum-two.css deleted file mode 100644 index 157c2dc9294..00000000000 --- a/components/actionbar/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ActionBar { - /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css deleted file mode 100644 index 27971810d3d..00000000000 --- a/components/actionbar/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionBar { - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md index f984f549e3f..0ded167aaae 100644 --- a/components/actionbutton/CHANGELOG.md +++ b/components/actionbutton/CHANGELOG.md @@ -1,10 +1,56 @@ # Change log +## 8.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 8.0.0-next.1 + +### Major Changes + +📝 [#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: + +- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed. +- Includes the Spectrum 2 down state transform. +- 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. +- 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. +- Background and content colors were updated. +- Mod custom properties have been adjusted: + - Renamed: + - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`. + - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`. + - Removed: + - `--mod-actionbutton-border-color-default` + - `--mod-actionbutton-border-color-disabled` + - `--mod-actionbutton-border-color-down` + - `--mod-actionbutton-border-color-focus` + - `--mod-actionbutton-border-color-hover` + - `--mod-actionbutton-border-width` + - `--mod-actionbutton-static-content-color` + - New: + - `--mod-actionbutton-font-weight` + - `--mod-actionbutton-font-style` + +## 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.3 ### Patch Changes -- [#3644](https://github.com/adobe/spectrum-css/pull/3644) [`5adef1d`](https://github.com/adobe/spectrum-css/commit/5adef1d15d07516dc9c1aac7bbcf9ac5bdeb9e97) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Fix support for `--mod-actionbutton-border-radius` to make sure it is surfaced to consumers, and properly overwrites the default border radius setting. +📝 [#3644](https://github.com/adobe/spectrum-css/pull/3644) [`5adef1d`](https://github.com/adobe/spectrum-css/commit/5adef1d15d07516dc9c1aac7bbcf9ac5bdeb9e97) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! + +Fix support for `--mod-actionbutton-border-radius` to make sure it is surfaced to consumers, and properly overwrites the default border radius setting. ## 7.1.2 diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 08d99aab279..655e8bdff1f 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -2,29 +2,25 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ActionButton", + ".spectrum-ActionButton .spectrum-ActionButton-hold", + ".spectrum-ActionButton .spectrum-ActionButton-icon", + ".spectrum-ActionButton .spectrum-ActionButton-label", ".spectrum-ActionButton--sizeL", - ".spectrum-ActionButton--sizeM", ".spectrum-ActionButton--sizeS", ".spectrum-ActionButton--sizeXL", ".spectrum-ActionButton--sizeXS", ".spectrum-ActionButton-hold", - ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon", ".spectrum-ActionButton-icon", - ".spectrum-ActionButton-icon:only-child", ".spectrum-ActionButton-label", ".spectrum-ActionButton-label:empty", ".spectrum-ActionButton.is-disabled", ".spectrum-ActionButton.is-selected", - ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", - ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", - ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", - ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--sizeL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeM", - ".spectrum-ActionButton.spectrum-ActionButton--sizeS", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXS", + ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected", + ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", @@ -37,7 +33,9 @@ ".spectrum-ActionButton:focus", ".spectrum-ActionButton:focus-visible", ".spectrum-ActionButton:focus-visible:after", + ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)", ".spectrum-ActionButton:hover", + ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))", "[dir=\"rtl\"] .spectrum-ActionButton", "a.spectrum-ActionButton" ], @@ -56,13 +54,7 @@ "--mod-actionbutton-background-color-hover", "--mod-actionbutton-background-color-hover-selected", "--mod-actionbutton-background-color-hover-selected-emphasized", - "--mod-actionbutton-border-color-default", - "--mod-actionbutton-border-color-disabled", - "--mod-actionbutton-border-color-down", - "--mod-actionbutton-border-color-focus", - "--mod-actionbutton-border-color-hover", "--mod-actionbutton-border-radius", - "--mod-actionbutton-border-width", "--mod-actionbutton-content-color-default", "--mod-actionbutton-content-color-default-selected", "--mod-actionbutton-content-color-default-selected-emphasized", @@ -85,15 +77,14 @@ "--mod-actionbutton-focus-indicator-gap", "--mod-actionbutton-focus-indicator-thickness", "--mod-actionbutton-font-size", + "--mod-actionbutton-font-style", + "--mod-actionbutton-font-weight", "--mod-actionbutton-height", "--mod-actionbutton-icon-size", "--mod-actionbutton-label-color", + "--mod-actionbutton-line-height", "--mod-actionbutton-min-width", - "--mod-actionbutton-static-content-color", - "--mod-actionbutton-text-to-visual", - "--mod-animation-duration-100", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-actionbutton-text-to-visual" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -101,46 +92,36 @@ "--spectrum-action-button-edge-to-hold-icon-large", "--spectrum-action-button-edge-to-hold-icon-medium", "--spectrum-action-button-edge-to-hold-icon-small", - "--spectrum-actionbutton-background-color", + "--spectrum-actionbutton-animation-duration", "--spectrum-actionbutton-background-color-default", "--spectrum-actionbutton-background-color-disabled", "--spectrum-actionbutton-background-color-down", "--spectrum-actionbutton-background-color-focus", "--spectrum-actionbutton-background-color-hover", - "--spectrum-actionbutton-background-color-selected", - "--spectrum-actionbutton-background-color-selected-disabled", - "--spectrum-actionbutton-background-color-selected-down", - "--spectrum-actionbutton-background-color-selected-focus", - "--spectrum-actionbutton-background-color-selected-hover", "--spectrum-actionbutton-border-color", - "--spectrum-actionbutton-border-color-default", - "--spectrum-actionbutton-border-color-disabled", - "--spectrum-actionbutton-border-color-down", - "--spectrum-actionbutton-border-color-focus", - "--spectrum-actionbutton-border-color-hover", "--spectrum-actionbutton-border-radius", - "--spectrum-actionbutton-border-radius-default", "--spectrum-actionbutton-border-width", - "--spectrum-actionbutton-content-color", - "--spectrum-actionbutton-content-color-selected", + "--spectrum-actionbutton-content-color-default", + "--spectrum-actionbutton-content-color-disabled", + "--spectrum-actionbutton-content-color-down", + "--spectrum-actionbutton-content-color-focus", + "--spectrum-actionbutton-content-color-hover", + "--spectrum-actionbutton-downstate-perspective", "--spectrum-actionbutton-edge-to-hold-icon", "--spectrum-actionbutton-edge-to-text", "--spectrum-actionbutton-edge-to-visual", "--spectrum-actionbutton-edge-to-visual-only", + "--spectrum-actionbutton-focus-indicator-border-radius", "--spectrum-actionbutton-focus-indicator-color", "--spectrum-actionbutton-focus-indicator-gap", "--spectrum-actionbutton-focus-indicator-thickness", "--spectrum-actionbutton-font-size", + "--spectrum-actionbutton-font-style", + "--spectrum-actionbutton-font-weight", "--spectrum-actionbutton-height", "--spectrum-actionbutton-icon-size", - "--spectrum-actionbutton-sized-edge-to-hold-icon", - "--spectrum-actionbutton-sized-edge-to-text", - "--spectrum-actionbutton-sized-edge-to-visual", - "--spectrum-actionbutton-sized-edge-to-visual-only", - "--spectrum-actionbutton-sized-font-size", - "--spectrum-actionbutton-sized-height", - "--spectrum-actionbutton-sized-icon-size", - "--spectrum-actionbutton-sized-text-to-visual", + "--spectrum-actionbutton-line-height", + "--spectrum-actionbutton-min-width", "--spectrum-actionbutton-text-to-visual" ], "global": [ @@ -171,17 +152,23 @@ "--spectrum-component-height-300", "--spectrum-component-height-50", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-corner-radius-medium-size-extra-large", "--spectrum-corner-radius-medium-size-extra-small", "--spectrum-corner-radius-medium-size-large", "--spectrum-corner-radius-medium-size-medium", "--spectrum-corner-radius-medium-size-small", + "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-disabled-static-black-background-color", "--spectrum-disabled-static-black-content-color", "--spectrum-disabled-static-white-background-color", "--spectrum-disabled-static-white-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -192,9 +179,10 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-50", + "--spectrum-gray-25", "--spectrum-line-height-100", "--spectrum-logical-rotation", + "--spectrum-medium-font-weight", "--spectrum-neutral-background-color-selected-default", "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", @@ -213,10 +201,12 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", + "--spectrum-transparent-black-25", "--spectrum-transparent-black-800", "--spectrum-transparent-black-900", "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", + "--spectrum-transparent-white-25", "--spectrum-transparent-white-800", "--spectrum-transparent-white-900", "--spectrum-white", @@ -226,75 +216,18 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-action-button-background-color-default", - "--system-action-button-background-color-disabled", - "--system-action-button-background-color-down", - "--system-action-button-background-color-focus", - "--system-action-button-background-color-hover", - "--system-action-button-background-color-selected", - "--system-action-button-background-color-selected-down", - "--system-action-button-background-color-selected-focus", - "--system-action-button-background-color-selected-hover", - "--system-action-button-border-color-default", - "--system-action-button-border-color-disabled", - "--system-action-button-border-color-down", - "--system-action-button-border-color-focus", - "--system-action-button-border-color-hover", - "--system-action-button-content-color-selected", - "--system-action-button-quiet-background-color-default", - "--system-action-button-quiet-background-color-disabled", - "--system-action-button-quiet-background-color-down", - "--system-action-button-quiet-background-color-focus", - "--system-action-button-quiet-background-color-hover", - "--system-action-button-quiet-background-color-selected-disabled", - "--system-action-button-size-l-border-radius-default", - "--system-action-button-size-m-border-radius-default", - "--system-action-button-size-s-border-radius-default", - "--system-action-button-size-xl-border-radius-default", - "--system-action-button-size-xs-border-radius-default", - "--system-action-button-static-black-background-color-default", - "--system-action-button-static-black-background-color-disabled", - "--system-action-button-static-black-background-color-down", - "--system-action-button-static-black-background-color-focus", - "--system-action-button-static-black-background-color-hover", - "--system-action-button-static-black-background-color-selected-disabled", - "--system-action-button-static-black-border-color-default", - "--system-action-button-static-black-border-color-disabled", - "--system-action-button-static-black-border-color-down", - "--system-action-button-static-black-border-color-focus", - "--system-action-button-static-black-border-color-hover", - "--system-action-button-static-black-quiet-background-color-default", - "--system-action-button-static-black-quiet-background-color-disabled", - "--system-action-button-static-black-quiet-background-color-down", - "--system-action-button-static-black-quiet-background-color-focus", - "--system-action-button-static-black-quiet-background-color-hover", - "--system-action-button-static-white-background-color-default", - "--system-action-button-static-white-background-color-disabled", - "--system-action-button-static-white-background-color-down", - "--system-action-button-static-white-background-color-focus", - "--system-action-button-static-white-background-color-hover", - "--system-action-button-static-white-background-color-selected-disabled", - "--system-action-button-static-white-border-color-default", - "--system-action-button-static-white-border-color-disabled", - "--system-action-button-static-white-border-color-down", - "--system-action-button-static-white-border-color-focus", - "--system-action-button-static-white-border-color-hover", - "--system-action-button-static-white-quiet-background-color-default", - "--system-action-button-static-white-quiet-background-color-disabled", - "--system-action-button-static-white-quiet-background-color-down", - "--system-action-button-static-white-quiet-background-color-focus", - "--system-action-button-static-white-quiet-background-color-hover" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", "--mod-button-line-height" ], "high-contrast": [ - "--highcontrast-actionbutton-background-color", + "--highcontrast-actionbutton-animation-duration", + "--highcontrast-actionbutton-background-color-default", + "--highcontrast-actionbutton-background-color-disabled", "--highcontrast-actionbutton-border-color", - "--highcontrast-actionbutton-content-color", + "--highcontrast-actionbutton-content-color-default", + "--highcontrast-actionbutton-content-color-disabled", "--highcontrast-actionbutton-focus-indicator-color" ] } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index ac4f410471e..e08737894eb 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -1,283 +1,278 @@ /*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +Copyright 2025 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 -@import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; - -@media (forced-colors: active) { - .spectrum-ActionButton { - /* force a more visible focus indicator color */ - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - --highcontrast-actionbutton-content-color: ButtonText; - - &::after { - /* make sure focus indicator renders */ - forced-color-adjust: none; - } +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ - &.is-selected { - --highcontrast-actionbutton-background-color: Highlight; - --highcontrast-actionbutton-border-color: HighlightText; - --highcontrast-actionbutton-content-color: HighlightText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; - } - } - - &:disabled, - &.is-disabled { - --highcontrast-actionbutton-content-color: GrayText; - --highcontrast-actionbutton-border-color: GrayText; - --highcontrast-actionbutton-background-color: ButtonFace; - } - } -} +@import "@spectrum-css/commons/basebutton.css"; .spectrum-ActionButton { - --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); - --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); - --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); - - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default)); - --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); - - --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + --spectrum-actionbutton-border-color: transparent; + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + + --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); + + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); + --spectrum-actionbutton-height: var(--spectrum-component-height-100); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight); + --spectrum-actionbutton-font-style: var(--spectrum-default-font-style); + + /* Take up full component height for line-height, in order to help prevent characters from being cut off in some languages (e.g. Thai). */ + --spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height); + + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); + + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + --spectrum-actionbutton-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color: transparent; - } + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: transparent; - /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ - &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { - --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + &.is-selected { + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + } } &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); - - --mod-actionbutton-content-color-default: var(--spectrum-black); - --mod-actionbutton-content-color-hover: var(--spectrum-black); - --mod-actionbutton-content-color-down: var(--spectrum-black); - --mod-actionbutton-content-color-focus: var(--spectrum-black); - --mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + + --spectrum-actionbutton-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-25); + } } &.spectrum-ActionButton--staticWhite { - /* background color _not_ selected is coming from the system theme layer */ - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); - - --mod-actionbutton-content-color-default: var(--spectrum-white); - --mod-actionbutton-content-color-hover: var(--spectrum-white); - --mod-actionbutton-content-color-down: var(--spectrum-white); - --mod-actionbutton-content-color-focus: var(--spectrum-white); - --mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + + --spectrum-actionbutton-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-25); + } } &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus)); - --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); - - --mod-actionbutton-border-color-default: transparent; - --mod-actionbutton-border-color-hover: transparent; - --mod-actionbutton-border-color-down: transparent; - --mod-actionbutton-border-color-focus: transparent; - --mod-actionbutton-border-color-disabled: transparent; - - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected)); - } + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25)); + + &.spectrum-ActionButton--emphasized { + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + } - &:hover { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover)); - } + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); + } - &:focus-visible { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus)); + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); + } } +} - &:active { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down)); - } +.spectrum-ActionButton--sizeXS { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small); - &:disabled, - &.is-disabled { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color)); - } -} + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); + --spectrum-actionbutton-height: var(--spectrum-component-height-50); -.spectrum-ActionButton, -.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); -} + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50); -.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-50); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-50); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50); + --spectrum-actionbutton-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); } .spectrum-ActionButton--sizeS { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small); + + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); + --spectrum-actionbutton-height: var(--spectrum-component-height-75); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75); + + --spectrum-actionbutton-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); } .spectrum-ActionButton--sizeL { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large); + + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); + --spectrum-actionbutton-height: var(--spectrum-component-height-200); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200); } .spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); + --spectrum-actionbutton-height: var(--spectrum-component-height-300); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300); } .spectrum-ActionButton { - /* Variables leveraging t-shirt sizing */ - --spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height)); - --spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size)); - --spectrum-actionbutton-font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-sized-font-size)); - --spectrum-actionbutton-text-to-visual: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-sized-text-to-visual)); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-sized-edge-to-hold-icon)); - - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width))); - @extend %spectrum-BaseButton; - position: relative; - min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size))); - block-size: var(--spectrum-actionbutton-height); + min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); + block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); + line-height: var(--mod-actionbutton-line-height, var(--spectrum-actionbutton-line-height)); - border-radius: var(--spectrum-actionbutton-border-radius); + border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); border-width: var(--spectrum-actionbutton-border-width); + border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color)); + border-style: solid; - gap: calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)); - - /* Start with text-only padding */ - padding-inline: var(--spectrum-actionbutton-edge-to-text); - - background-color: var(--spectrum-actionbutton-background-color); - border-color: var(--spectrum-actionbutton-border-color); - color: var(--spectrum-actionbutton-content-color); - - transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out; - - &::after { - position: absolute; - inset: 0; - - margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1); + gap: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); + padding-inline: calc(var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-border-width)); - border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); - transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out; - - pointer-events: none; - content: ""; + &:hover { + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); } &:focus-visible { - /* kill the default ring */ - box-shadow: none; - outline: none; + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); + } - &::after { - box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color); - } + &:active { + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); + } + + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } } @@ -285,32 +280,31 @@ a.spectrum-ActionButton { @extend %spectrum-AnchorButton; } -/* Nested sub-component: Icon */ .spectrum-ActionButton-icon { @extend %spectrum-ButtonIcon; - inline-size: var(--spectrum-actionbutton-icon-size); - block-size: var(--spectrum-actionbutton-icon-size); - - /* adjust icon positioning to match UI kit */ - margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text)); - margin-inline-end: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); - + inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); color: inherit; +} - /* Augment the margin correction for the icon only scenario */ - .spectrum-ActionButton-hold + &, - &:only-child { - margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); - } +/* Icon and label text */ +.spectrum-ActionButton:has(.spectrum-ActionButton-icon) { + padding-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--spectrum-actionbutton-border-width)); +} + +/* Icon only */ +.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label)) { + padding-inline: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--spectrum-actionbutton-border-width)); } .spectrum-ActionButton-label { @extend %spectrum-ButtonLabel; pointer-events: none; - line-height: var(--spectrum-actionbutton-height); - font-size: var(--spectrum-actionbutton-font-size); + font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); + font-weight: var(--mod-actionbutton-font-weight, var(--spectrum-actionbutton-font-weight)); + font-style: var(--mod-actionbutton-font-style, var(--spectrum-actionbutton-font-style)); white-space: nowrap; color: var(--mod-actionbutton-label-color, inherit); @@ -320,10 +314,103 @@ a.spectrum-ActionButton { .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width)); - inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width)); - + inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width)); + inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width)); color: inherit; + transform: var(--spectrum-logical-rotation); +} + +/* Focus indicator */ +.spectrum-ActionButton { + transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out; + + &::after { + position: absolute; + inset: 0; + margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1); + border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); + transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out; + pointer-events: none; + content: ""; + } + + &:focus-visible { + box-shadow: none; + outline: none; + + &::after { + box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))); + } + } +} + +@media (forced-colors: active) { + .spectrum-ActionButton { + /** + * Default + * - Uses "Button*" system color pairings. + * - Focus indicator is outside the element and should contrast with its background (default of Canvas). + */ + --highcontrast-actionbutton-border-color: ButtonBorder; + --highcontrast-actionbutton-background-color-default: ButtonFace; + --highcontrast-actionbutton-content-color-default: ButtonText; + + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + --highcontrast-actionbutton-focus-indicator-color: CanvasText; + + /** + * Avoid performance and rendering issues with transitions between system colors. + * Fixes bug in Windows High Contrast where border flashes the wrong color after hover (quiet). + */ + --highcontrast-actionbutton-animation-duration: 0; + + &::after { + /* Make sure the box-shadow for the focus indicator renders. */ + forced-color-adjust: none; + } - transform: var(--spectrum-logical-rotation,); + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */ + forced-color-adjust: none; + } + + /** + * Quiet + * - Default blends in with background and has no border. + * - Quiet + disabled does not show border unless selected. + */ + &.spectrum-ActionButton--quiet { + --highcontrast-actionbutton-border-color: Canvas; + --highcontrast-actionbutton-background-color-default: Canvas; + --highcontrast-actionbutton-background-color-disabled: Canvas; + --highcontrast-actionbutton-content-color-default: CanvasText; + + &:disabled:not(.is-selected) { + --highcontrast-actionbutton-border-color: Canvas; + } + } + + /* Interaction shows a change in border color. */ + &:hover, + &:active, + &:focus-visible { + --highcontrast-actionbutton-border-color: Highlight; + } + + /* Selected always shows as a solid highlighted color. */ + &.is-selected { + --highcontrast-actionbutton-border-color: Highlight; + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-content-color-default: HighlightText; + } + + /* Disabled has a GrayText border and content color. */ + &:disabled { + --highcontrast-actionbutton-border-color: GrayText; + } + } } diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 8da72e88bf0..ae14aa05cb8 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "7.1.3", + "version": "8.0.0-next.2", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,9 +37,9 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/commons": "12.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index a08f0f7bbfc..d1599920baa 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -1,22 +1,18 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { ActionButtonGroup } from "./actionbutton.test.js"; -import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js"; +import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js"; /** * The action button component represents an action a user can take. * * ## Usage notes * - * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup. If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - * - * If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. - * - * When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticBlack`, use the `--mod-actionbutton-content-color-default` custom property to set the text color when selected. + * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup. */ export default { title: "Action button", @@ -25,6 +21,7 @@ export default { size: size(["xs", "s", "m", "l", "xl"]), iconName: { ...(IconStories?.argTypes?.iconName ?? {}), + name: "Workflow icon", if: false, }, label: { @@ -37,9 +34,15 @@ export default { control: { type: "text" }, }, isQuiet, - isEmphasized, + isEmphasized: { + ...isEmphasized, + if: { arg: "staticColor", truthy: false }, + }, isDisabled, - isSelected, + isSelected: { + ...isSelected, + description: "An optional state used when treating the action button as a toggle.", + }, isHovered, isFocused, isActive, @@ -63,7 +66,10 @@ export default { control: "select", options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"], }, - staticColor, + staticColor: { + ...staticColor, + if: { arg: "isEmphasized", truthy: false }, + }, }, args: { rootClass: "spectrum-ActionButton", @@ -88,14 +94,24 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=702-2877", }, + downState: { + selectors: [".spectrum-ActionButton:not(:disabled)"], + }, packageJson, metadata, docs: { story: { height: "auto", }, - } + }, + status: { + type: "migrated", + }, }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = ActionButtonGroup.bind({}); @@ -106,7 +122,9 @@ Default.tags = ["!autodocs"]; /** * Action buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text. * - * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the label will appear in a tooltip on hover. + * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the implementation should show the label with a tooltip on hover. + * + * Action buttons can be used as toggles instead of for taking direct action. The optional "selected" state displayed below is used for when the action button is toggleable. */ export const Standard = TreatmentTemplate.bind({}); Standard.args = Default.args; @@ -117,7 +135,9 @@ Standard.parameters = { Standard.storyName = "Default"; /** - * The emphasized action button has a blue background for its selected state in order to provide a visual prominence. This is optimal for when the selection should call attention, such as within a tool bar. + * The emphasized action button has a blue background for its selected state in order to provide a visual prominence. + * This is optimal for when the selection should call attention, such as within a tool bar. + * For this variant, the `.spectrum-ActionButton--emphasized` class is applied to `.spectrum-ActionButton`. */ export const Emphasized = TreatmentTemplate.bind({}); Emphasized.tags = ["!dev"]; @@ -130,9 +150,6 @@ Emphasized.parameters = { }, }; -/** - * Adding the `.spectrum-ActionButton--emphasized` class to a quiet action button can be effective in calling attention. - */ export const EmphasizedQuiet = TreatmentTemplate.bind({}); EmphasizedQuiet.tags = ["!dev"]; EmphasizedQuiet.args = { @@ -144,7 +161,7 @@ EmphasizedQuiet.parameters = { disableSnapshot: true, }, }; -EmphasizedQuiet.storyName = "Emphasized (quiet)"; +EmphasizedQuiet.storyName = "Quiet, emphasized"; /** * Quiet action buttons have no visible background until they’re interacted with. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read. @@ -161,7 +178,10 @@ Quiet.parameters = { }; /** - * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions. Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup. + * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a + * short amount of time can reveal a [popover](/docs/components-popover--docs) menu, which can be used, for example, to switch + * between related actions. Note that this popover menu is not demonstrated here—this would be handled by the implementation. + * Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup. */ export const HoldIcon = IconOnlyOption.bind({}); HoldIcon.tags = ["!dev"]; @@ -190,6 +210,14 @@ StaticWhiteQuiet.parameters = { chromatic: { disableSnapshot: true } }; +/** + * When an action button needs to be placed on top of a color background or a visual, use the static color + * option. Use static black on light color or image backgrounds, and static white on dark color or image + * backgrounds, regardless of the color theme. For more info, see the + * [design guidelines](https://spectrum.adobe.com/page/action-button/#Static-color). + * + * Emphasized is not supported for the static black and static white variants. + */ export const StaticBlackDocs = TreatmentTemplate.bind({}); StaticBlackDocs.tags = ["!dev"]; StaticBlackDocs.args = { @@ -226,6 +254,28 @@ Sizing.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * When the action button text is too long for the available horizontal space, it truncates at the end. + * To demonstrate what this looks like, this example sets a maximum width on the button. + * + * Implementations should also reveal the full text on hover, per this component's + * [design guidelines on text overflow](https://spectrum.adobe.com/page/action-button/#Text-overflow). + * This is not demonstrated here. + */ +export const TextOverflowBehavior = Template.bind({}); +TextOverflowBehavior.tags = ["!dev"]; +TextOverflowBehavior.args = { + label: "This is extra long text that will cause text truncation", + customStyles: { + "max-inline-size": "120px", + }, +}; +TextOverflowBehavior.parameters = { + chromatic: { + disableSnapshot: true, + }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = ActionButtonGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/actionbutton/stories/actionbutton.test.js b/components/actionbutton/stories/actionbutton.test.js index fb37fdc910f..4a26724f80b 100644 --- a/components/actionbutton/stories/actionbutton.test.js +++ b/components/actionbutton/stories/actionbutton.test.js @@ -62,11 +62,6 @@ export const ActionButtonGroup = Variants({ testHeading: "Static black", staticColor: "black", }, - { - testHeading: "Static black - emphasized", - staticColor: "black", - isEmphasized: true, - }, { testHeading: "Static black - quiet", staticColor: "black", @@ -76,11 +71,6 @@ export const ActionButtonGroup = Variants({ testHeading: "Static white", staticColor: "white", }, - { - testHeading: "Static white - emphasized", - staticColor: "white", - isEmphasized: true, - }, { testHeading: "Static white - quiet", staticColor: "white", diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 425b7e4115c..942c3bccefa 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @todo load order should not influence the icon size but it is; fix this @@ -70,7 +67,6 @@ export const Template = ({ role = "button", } = {}, context = {}) => { const { updateArgs } = context; - return html` <button aria-label=${ifDefined(hideLabel ? label : undefined)} @@ -112,7 +108,13 @@ export const Template = ({ ${when(hasPopup && hasPopup !== "false", () => Icon({ size, - iconName: "CornerTriangle", + iconName: "CornerTriangle" + ({ + xs: "75", + s: "75", + m: "100", + l: "200", + xl: "300", + }[size] || "100"), setName: "ui", customClasses: [`${rootClass}-hold`], }, context) @@ -134,64 +136,74 @@ export const Template = ({ `; }; +/** + * Displays multiple action buttons in a row, with different combinations of + * label, icon, and hold button (has popup). + */ export const ActionButtonsWithIconOptions = (args, context) => Container({ withBorder: false, direction: "row", wrapperStyles: { columnGap: "12px", }, - content: html` - ${Template({ + content: [ + Template({ ...args, iconName: undefined, - }, context)} - ${Template({ + }, context), + Template({ ...args, - }, context)} - ${Template({ + }, context), + Template({ ...args, hideLabel: true, - }, context)} - ${Template({ + }, context), + Template({ ...args, hideLabel: true, hasPopup: "true", - }, context)} - ${Template({ + }, context), + Template({ ...args, iconName: undefined, hasPopup: "true", - }, context)} - ` + }, context) + ], }, context); +/** + * Displays two action buttons in a row: + * - icon only action button + * - icon only action button with hold button (has popup) + */ export const IconOnlyOption = (args, context) => Container({ withBorder: false, direction: "row", wrapperStyles: { columnGap: "12px", }, - content: html` - ${Template({ + content: [ + Template({ ...args, hideLabel: true, hasPopup: "true", - }, context)} - ${Template({ + }, context), + Template({ ...args, hideLabel: true, isQuiet: true, hasPopup: "true", - }, context)} - ` + }, context), + ], }, context); +/** + * Displays multiple groups of action buttons for: + * default, selected, disabled, and selected + disabled + */ export const TreatmentTemplate = (args, context) => Container({ withBorder: false, direction: "row", - wrapperStyles: { - rowGap: "12px", - }, content: html`${[ { isSelected: false, isDisabled: false, heading: "Default" }, { isSelected: true, isDisabled: false, heading: "Selected" }, @@ -200,10 +212,13 @@ export const TreatmentTemplate = (args, context) => Container({ ].map(({ isSelected, isDisabled, heading }) => Container({ withBorder: false, heading: heading, + containerStyles: { + rowGap: "8px", + }, content: ActionButtonsWithIconOptions({ ...args, isSelected, isDisabled, - }) + }, context) }, context))}`, }, context); diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css deleted file mode 100644 index a2f9f796101..00000000000 --- a/components/actionbutton/themes/express.css +++ /dev/null @@ -1,71 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-disabled: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } -} diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css deleted file mode 100644 index b436e9a77b5..00000000000 --- a/components/actionbutton/themes/spectrum-two.css +++ /dev/null @@ -1,112 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); - - &.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); - } - - &.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small); - } - - &.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-small); - } - - &.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-large); - } - - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-large); - } - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); - - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); - - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css deleted file mode 100644 index 0c07028cf58..00000000000 --- a/components/actionbutton/themes/spectrum.css +++ /dev/null @@ -1,93 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75); - - &.spectrum-ActionButton--sizeXS, - &.spectrum-ActionButton--sizeS, - &.spectrum-ActionButton--sizeM, - &.spectrum-ActionButton--sizeL, - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-100); - } - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md index 7a9d2ac5c56..36cd6e0a42d 100644 --- a/components/actiongroup/CHANGELOG.md +++ b/components/actiongroup/CHANGELOG.md @@ -1,5 +1,19 @@ # Change log +## 7.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + ## 7.0.0 ### Minor Changes @@ -218,7 +232,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 4.1.10 -📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.1.9...@spectrum-css/actiongroup@4.1.10) +🗓 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.1.9...@spectrum-css/actiongroup@4.1.10) **Note:** Version bump only for package @spectrum-css/actiongroup @@ -334,7 +348,7 @@ Output for all component CSS files is now being run through a lightweight optimi - refactor(actiongroup)!: replace focus-ring with focus-visible([d792847](https://github.com/adobe/spectrum-css/commit/d792847)) -### 🛑 BREAKING CHANGE +### 🛑 BREAKING CHANGES - use native focus-visible pseudo class for focus styling @@ -370,7 +384,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 3.0.56 -📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@3.0.55...@spectrum-css/actiongroup@3.0.56) +🗓 2023-07-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@3.0.55...@spectrum-css/actiongroup@3.0.56) **Note:** Version bump only for package @spectrum-css/actiongroup @@ -423,6 +437,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 3.0.48 🗓 2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@3.0.47...@spectrum-css/actiongroup@3.0.48) + **Note:** Version bump only for package @spectrum-css/actiongroup ## 3.0.47 diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index c78e7d30965..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -53,11 +53,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-action-group-gap-size-compact", - "--system-action-group-horizontal-spacing-compact", - "--system-action-group-vertical-spacing-compact" - ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], "high-contrast": [] } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index bbd26cb0f65..ac427bc8636 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -11,9 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionGroup { + --spectrum-actiongroup-gap-size-compact: 0; + + /* account for button border */ + --spectrum-actiongroup-horizontal-spacing-compact: -1px; + --spectrum-actiongroup-vertical-spacing-compact: -1px; + --spectrum-actiongroup-button-spacing-reset: 0; --spectrum-actiongroup-border-radius-reset: 0; --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index 96adaf21bfa..b5a704179ef 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actiongroup", - "version": "6.1.0", + "version": "7.0.0-next.1", "description": "The Spectrum CSS actiongroup component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index a83857b9e54..0fd9731f55b 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -5,7 +5,7 @@ import { size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { ActionGroups } from "./actiongroup.test.js"; -import { OverflowOption, TreatmentTemplate } from "./template.js"; +import { OverflowOption, Template, TreatmentTemplate } from "./template.js"; /** * An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other. @@ -99,7 +99,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = ActionGroups.bind({}); @@ -279,6 +283,15 @@ JustifiedIconOnlyCompact.parameters = { chromatic: { disableSnapshot: true }, }; +export const Quiet = Template.bind({}); +Quiet.tags = ["!dev"]; +Quiet.args = { + areQuiet: true, +}; +Quiet.parameters = { + chromatic: { disableSnapshot: true }, +}; + /** * When space is limited in an action group, there are 2 options for the group's overflow behavior: wrap or collapse. By default, an action group is set to wrap, meaning that the action buttons inside the group wrap to form another line. Alternatively, an action group can be set to collapse inside a **More (...)** action button. */ diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index d13cdac64aa..25d8f25f4e0 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css deleted file mode 100644 index 3fd8de9cdbb..00000000000 --- a/components/actiongroup/themes/express.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } -} diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css deleted file mode 100644 index b25c0f945b2..00000000000 --- a/components/actiongroup/themes/spectrum-two.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } -} diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/actiongroup/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/actionmenu/CHANGELOG.md b/components/actionmenu/CHANGELOG.md index 6525a5264c9..72e215dfc0e 100644 --- a/components/actionmenu/CHANGELOG.md +++ b/components/actionmenu/CHANGELOG.md @@ -1,5 +1,22 @@ # Change log +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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 + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 7.1.1 ### Patch Changes @@ -166,6 +183,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 5.1.3 diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index fb419a0891e..aff315379ec 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionmenu", - "version": "7.1.1", + "version": "8.0.0-next.1", "description": "The Spectrum CSS actionmenu component", "license": "Apache-2.0", "author": "Adobe", @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/menu": "9.2.0", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/menu": "10.0.0-next.3", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index e9cdd3b8a14..b3cab764ac2 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -31,9 +31,6 @@ export default { control: { type: "text" }, }, items: { table: { disable: true } }, - id: { table: { disable: true } }, - testId: { table: { disable: true } }, - triggerId: { table: { disable: true } }, }, args: { isOpen: false, diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md index 8248ff62d67..4e594d9637b 100644 --- a/components/alertbanner/CHANGELOG.md +++ b/components/alertbanner/CHANGELOG.md @@ -1,10 +1,35 @@ # Change log +## 4.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 4.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + +## 4.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/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. +📝 [#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 diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 15b6983e631..2e9ddb2f699 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -6,82 +6,90 @@ ".spectrum-AlertBanner--negative", ".spectrum-AlertBanner-body", ".spectrum-AlertBanner-content", - ".spectrum-AlertBanner-end", ".spectrum-AlertBanner-icon", ".spectrum-AlertBanner-text", - ".spectrum-AlertBanner.is-open" + ".spectrum-AlertBanner.is-open", + ".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body", + ".spectrum-AlertBanner:lang(ja)", + ".spectrum-AlertBanner:lang(ko)", + ".spectrum-AlertBanner:lang(zh)" ], "modifiers": [ - "--mod-alert-banner-bottom-text", - "--mod-alert-banner-close-button-spacing", - "--mod-alert-banner-edge-to-button", - "--mod-alert-banner-edge-to-divider", + "--mod-alert-banner-background", + "--mod-alert-banner-block-edge-to-button", + "--mod-alert-banner-bottom-to-text", + "--mod-alert-banner-close-button-to-content", + "--mod-alert-banner-close-button-to-inline-end", "--mod-alert-banner-font-color", + "--mod-alert-banner-font-family", "--mod-alert-banner-font-size", "--mod-alert-banner-icon-size", "--mod-alert-banner-icon-to-text", "--mod-alert-banner-informative-background", + "--mod-alert-banner-inline-end-to-content", + "--mod-alert-banner-inline-size", + "--mod-alert-banner-inline-start-to-content", + "--mod-alert-banner-line-height", "--mod-alert-banner-max-inline-size", "--mod-alert-banner-min-height", "--mod-alert-banner-negative-background", "--mod-alert-banner-neutral-background", - "--mod-alert-banner-size", - "--mod-alert-banner-start-edge", + "--mod-alert-banner-text-margin-block-end", + "--mod-alert-banner-text-margin-block-start", "--mod-alert-banner-text-to-button-horizontal", "--mod-alert-banner-text-to-button-vertical", - "--mod-alert-banner-text-to-divider", - "--mod-alert-banner-top-icon", - "--mod-alert-banner-top-text" + "--mod-alert-banner-top-to-close-button", + "--mod-alert-banner-top-to-icon", + "--mod-alert-banner-top-to-text" ], "component": [ - "--spectrum-alert-banner-bottom-text", + "--spectrum-alert-banner-background", + "--spectrum-alert-banner-block-edge-to-button", "--spectrum-alert-banner-bottom-to-text", "--spectrum-alert-banner-close-button-spacing", - "--spectrum-alert-banner-edge-to-button", - "--spectrum-alert-banner-edge-to-divider", + "--spectrum-alert-banner-close-button-to-content", + "--spectrum-alert-banner-close-button-to-inline-end", "--spectrum-alert-banner-font-color", + "--spectrum-alert-banner-font-family", "--spectrum-alert-banner-font-size", "--spectrum-alert-banner-icon-size", "--spectrum-alert-banner-icon-to-text", - "--spectrum-alert-banner-informative-background", + "--spectrum-alert-banner-inline-end-to-content", + "--spectrum-alert-banner-inline-size", + "--spectrum-alert-banner-inline-start-to-content", + "--spectrum-alert-banner-line-height", "--spectrum-alert-banner-max-inline-size", "--spectrum-alert-banner-min-height", "--spectrum-alert-banner-minimum-height", - "--spectrum-alert-banner-negative-background", "--spectrum-alert-banner-neutral-background", - "--spectrum-alert-banner-size", - "--spectrum-alert-banner-start-edge", + "--spectrum-alert-banner-text-margin-block-end", + "--spectrum-alert-banner-text-margin-block-start", "--spectrum-alert-banner-text-to-button-horizontal", "--spectrum-alert-banner-text-to-button-vertical", - "--spectrum-alert-banner-text-to-divider", - "--spectrum-alert-banner-top-icon", - "--spectrum-alert-banner-top-text", "--spectrum-alert-banner-top-to-text", "--spectrum-alert-banner-top-to-workflow-icon", "--spectrum-alert-banner-width" ], "global": [ "--spectrum-border-width-100", + "--spectrum-cjk-line-height-100", "--spectrum-font-size-100", "--spectrum-informative-background-color-default", + "--spectrum-line-height-100", "--spectrum-negative-background-color-default", "--spectrum-neutral-subdued-background-color-default", + "--spectrum-sans-font-family-stack", + "--spectrum-spacing-200", "--spectrum-spacing-300", "--spectrum-text-to-visual-300", "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-alert-banner-neutral-background"], "passthroughs": [ - "--mod-button-margin-block", - "--mod-button-margin-left", - "--mod-button-margin-right", "--mod-closebutton-align-self", "--mod-closebutton-margin-inline", "--mod-closebutton-margin-top", - "--mod-divider-vertical-align", - "--mod-divider-vertical-height", - "--mod-divider-vertical-margin" + "--mod-icon-size" ], "high-contrast": [ "--highcontrast-alert-banner-border-color", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 2f483970fb8..6659d42cbd1 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -11,52 +11,67 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AlertBanner { + --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --spectrum-alert-banner-size: auto; + --spectrum-alert-banner-inline-size: auto; + --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); - --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-alert-banner-line-height: var(--spectrum-line-height-100); + --spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */ /* spacing */ --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); + --spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300); + --spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300); --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); - --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */ + --spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */ + + /* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the + padding-block of its parent AlertBanner-body element. */ + --spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); + --spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); /* colors */ - --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default)); --spectrum-alert-banner-font-color: var(--spectrum-white); - /* settings for nested Divider */ - --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); - --mod-divider-vertical-height: auto; - --mod-divider-vertical-align: stretch; + /* @passthrough -- settings for nested Close button */ + --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end)); + --mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button)); + --mod-closebutton-align-self: flex-start; - /* settings for nested Button */ - --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button)); - --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider)); - --mod-button-margin-left: auto; + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100); + } +} - /* settings for nested CloseButton */ - --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); - --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); - --mod-closebutton-align-self: flex-start; +.spectrum-AlertBanner--info { + --spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default)); +} + +.spectrum-AlertBanner--negative { + --spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default)); +} +.spectrum-AlertBanner { display: none; justify-content: space-between; - inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size)); + inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size)); max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size)); min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height)); font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size)); + font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family)); + line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height)); color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color)); - background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background)); + background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background)); border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); &.is-open { @@ -64,46 +79,47 @@ } } -.spectrum-AlertBanner--info { - background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background)); -} - -.spectrum-AlertBanner--negative { - background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background)); -} - .spectrum-AlertBanner-body { inline-size: 100%; display: flex; - - /* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */ - gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px); flex-wrap: wrap; align-items: center; - margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge)); -} + justify-content: flex-end; -.spectrum-AlertBanner-content { - display: flex; + /* Inline spacing between text and button, only when the button has not wrapped to the next line. */ + column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); + + /* Block spacing between text and button, when the button has wrapped to the next line. Takes into + account the existing margins on the text. */ + row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end)); + + padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)); + margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content)); + margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content)); + + /* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */ + .spectrum-AlertBanner:has(.spectrum-CloseButton) & { + margin-inline-end: 0; + } } -.spectrum-AlertBanner-end { +.spectrum-AlertBanner-content { display: flex; - align-items: center; + flex-grow: 1; } .spectrum-AlertBanner-icon { - inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); - block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); - margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon)); + /* @passthrough -- icon-size */ + --mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + + margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); flex-shrink: 0; } .spectrum-AlertBanner-text { - margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text)); - margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text)); - margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); + margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start)); + margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end)); } @media (forced-colors: active) { diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 2ff3525a182..cc160b91a20 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertbanner", - "version": "3.1.1", + "version": "4.0.0-next.2", "description": "The Spectrum CSS alertbanner component", "license": "Apache-2.0", "author": "Adobe", @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/closebutton": ">=7.0.0-next.0", + "@spectrum-css/divider": ">=6.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.6", - "@spectrum-css/closebutton": "6.1.0", - "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/closebutton": "7.0.0-next.1", + "@spectrum-css/divider": "6.0.0-next.1", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index cd49c21a70e..c6d638008c2 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -75,7 +75,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = AlertBannerGroup.bind({}); diff --git a/components/alertbanner/stories/alertbanner.test.js b/components/alertbanner/stories/alertbanner.test.js index dee63d20c8d..0b86e7fbfaa 100644 --- a/components/alertbanner/stories/alertbanner.test.js +++ b/components/alertbanner/stories/alertbanner.test.js @@ -3,6 +3,7 @@ import { Template } from "./template.js"; export const AlertBannerGroup = Variants({ Template, + TestTemplate: Template, stateDirection: "column", wrapperStyles: { "inline-size": "100%", diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 3eb719c0612..ec0278583fd 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -1,6 +1,5 @@ import { Template as Button } from "@spectrum-css/button/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; -import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; @@ -10,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", @@ -26,6 +22,12 @@ export const Template = ({ customClasses = [], customStyles = {}, } = {}, context = {}) => { + const { updateArgs } = context; + + const onclick = () => { + updateArgs({ isOpen: false }); + }; + return html` <div class=${classMap({ @@ -71,11 +73,6 @@ export const Template = ({ <div class=${classMap({ [`${rootClass}-end`]: true })}> - ${Divider({ - vertical: true, - size: "s", - tag: "div", - }, context)} ${CloseButton({ size: "m", staticColor: "white", @@ -118,62 +115,62 @@ export const TextOverflowTemplate = (args) => html` export const ActionableOptionsTemplate = (args, context) => Container({ withBorder: false, direction: "column", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, - content: html` - ${Container({ + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, + content: [ + Container({ withBorder: false, direction: "column", heading: "Action button and close button", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ - ...args, - variant: "neutral", - text: "Your trial has expired", - actionButtonText: "Buy now", + ...args, + variant: "neutral", + text: "Your trial has expired", + actionButtonText: "Buy now", }, context), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Action button only", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ - ...args, - variant: "neutral", - text: "Your trial has expired", - actionButtonText: "Buy now", - showCloseButton: false, + ...args, + variant: "neutral", + text: "Your trial has expired", + actionButtonText: "Buy now", + showCloseButton: false, }, context), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Close button only", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ ...args, variant: "neutral", text: "Your trial has expired", actionButtonText: "", }), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Text only", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ - ...args, - variant: "neutral", - text: "Your trial has expired", - actionButtonText: "", - showCloseButton: false, + ...args, + variant: "neutral", + text: "Your trial has expired", + actionButtonText: "", + showCloseButton: false, }, context), - }, context)} - `, + }, context), + ], }, context); diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css deleted file mode 100644 index a86424d5e4b..00000000000 --- a/components/alertbanner/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css deleted file mode 100644 index 3e038dbd7a4..00000000000 --- a/components/alertbanner/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css deleted file mode 100644 index 4dd42f109fe..00000000000 --- a/components/alertbanner/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertdialog/CHANGELOG.md b/components/alertdialog/CHANGELOG.md index 689a56fbdc1..0bd0f7fa469 100644 --- a/components/alertdialog/CHANGELOG.md +++ b/components/alertdialog/CHANGELOG.md @@ -1,5 +1,101 @@ # Change log +## 5.0.0-next.4 + +### Major Changes + +- [#3725](https://github.com/adobe/spectrum-css/pull/3725) [`f977e60`](https://github.com/adobe/spectrum-css/commit/f977e60a7f32eb7147bd1546d04a02557011e7d9) Thanks [@cdransf](https://github.com/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` + +## 5.0.0-next.3 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/modal@8.0.0-next.1 + - @spectrum-css/underlay@7.0.0-next.0 + +## 5.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf)]: + - @spectrum-css/modal@7.1.1-next.0 + +## 5.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + +## 5.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/buttongroup@10.0.0-next.0 + ## 4.1.0 ### Minor Changes diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json index 03bf62123f2..7510ea9f7aa 100644 --- a/components/alertdialog/dist/metadata.json +++ b/components/alertdialog/dist/metadata.json @@ -5,80 +5,85 @@ ".spectrum-AlertDialog .spectrum-Icon", ".spectrum-AlertDialog--error", ".spectrum-AlertDialog--warning", + ".spectrum-AlertDialog-buttongroup", ".spectrum-AlertDialog-content", ".spectrum-AlertDialog-grid", ".spectrum-AlertDialog-header", ".spectrum-AlertDialog-heading" ], "modifiers": [ + "--mod-alert-dialog-background-color", "--mod-alert-dialog-body-color", "--mod-alert-dialog-body-font-family", - "--mod-alert-dialog-body-font-size", "--mod-alert-dialog-body-font-style", "--mod-alert-dialog-body-font-weight", "--mod-alert-dialog-body-line-height", - "--mod-alert-dialog-description-to-buttons", - "--mod-alert-dialog-divider-to-description", + "--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-error-icon-color", + "--mod-alert-dialog-heading-size", "--mod-alert-dialog-icon-size", "--mod-alert-dialog-max-width", "--mod-alert-dialog-min-width", - "--mod-alert-dialog-padding", + "--mod-alert-dialog-minimum-title-to-icon", "--mod-alert-dialog-title-color", "--mod-alert-dialog-title-font-family", - "--mod-alert-dialog-title-font-size", "--mod-alert-dialog-title-font-style", "--mod-alert-dialog-title-font-weight", "--mod-alert-dialog-title-line-height", - "--mod-alert-dialog-title-to-divider", - "--mod-alert-dialog-title-to-icon", + "--mod-alert-dialog-title-to-description", "--mod-alert-dialog-warning-icon-color" ], "component": [ + "--spectrum-alert-dialog-background-color", "--spectrum-alert-dialog-body-color", "--spectrum-alert-dialog-body-font-family", - "--spectrum-alert-dialog-body-font-size", "--spectrum-alert-dialog-body-font-style", "--spectrum-alert-dialog-body-font-weight", "--spectrum-alert-dialog-body-line-height", - "--spectrum-alert-dialog-description-size", - "--spectrum-alert-dialog-description-to-buttons", - "--spectrum-alert-dialog-divider-to-description", + "--spectrum-alert-dialog-corner-radius", + "--spectrum-alert-dialog-description-content-size", + "--spectrum-alert-dialog-description-font-size", + "--spectrum-alert-dialog-description-to-button-group", + "--spectrum-alert-dialog-edge-to-content", "--spectrum-alert-dialog-error-icon-color", + "--spectrum-alert-dialog-heading-size", "--spectrum-alert-dialog-icon-size", "--spectrum-alert-dialog-max-width", "--spectrum-alert-dialog-maximum-width", "--spectrum-alert-dialog-min-width", + "--spectrum-alert-dialog-minimum-title-to-icon", "--spectrum-alert-dialog-minimum-width", - "--spectrum-alert-dialog-padding", "--spectrum-alert-dialog-title-color", "--spectrum-alert-dialog-title-font-family", "--spectrum-alert-dialog-title-font-size", "--spectrum-alert-dialog-title-font-style", "--spectrum-alert-dialog-title-font-weight", "--spectrum-alert-dialog-title-line-height", - "--spectrum-alert-dialog-title-size", - "--spectrum-alert-dialog-title-to-divider", - "--spectrum-alert-dialog-title-to-icon", + "--spectrum-alert-dialog-title-to-description", "--spectrum-alert-dialog-warning-icon-color" ], "global": [ + "--spectrum-background-layer-2-color", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", + "--spectrum-corner-radius-extra-large-default", "--spectrum-heading-color", "--spectrum-heading-line-height", "--spectrum-heading-sans-serif-font-style", "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", + "--spectrum-line-height-200", "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", "--spectrum-sans-font-family-stack", - "--spectrum-spacing-200", + "--spectrum-spacing-100", "--spectrum-spacing-300", + "--spectrum-spacing-500", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], "high-contrast": [] } diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css index 14e6e555f2c..0bc24598937 100644 --- a/components/alertdialog/index.css +++ b/components/alertdialog/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -15,32 +15,34 @@ --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-alert-dialog-corner-radius: var(--spectrum-corner-radius-extra-large-default); /* color */ --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color); --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); + --spectrum-alert-dialog-background-color: var(--spectrum-background-layer-2-color); /* typography */ --spectrum-alert-dialog-title-font-family: var(--spectrum-sans-font-family-stack); --spectrum-alert-dialog-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); --spectrum-alert-dialog-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-alert-dialog-title-font-size: var(--spectrum-alert-dialog-title-size); --spectrum-alert-dialog-title-line-height: var(--spectrum-heading-line-height); --spectrum-alert-dialog-title-color: var(--spectrum-heading-color); + --spectrum-alert-dialog-heading-size: var(--spectrum-alert-dialog-title-font-size); + --spectrum-alert-dialog-description-content-size: var(--spectrum-alert-dialog-description-font-size); --spectrum-alert-dialog-body-font-family: var(--spectrum-sans-font-family-stack); --spectrum-alert-dialog-body-font-weight: var(--spectrum-body-sans-serif-font-weight); --spectrum-alert-dialog-body-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-alert-dialog-body-font-size: var(--spectrum-alert-dialog-description-size); - --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-100); + --spectrum-alert-dialog-body-line-height: var(--spectrum-line-height-200); --spectrum-alert-dialog-body-color: var(--spectrum-body-color); /* spacing */ - --spectrum-alert-dialog-title-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); - --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); + --spectrum-alert-dialog-title-to-description: var(--spectrum-spacing-300); + --spectrum-alert-dialog-minimum-title-to-icon: var(--spectrum-spacing-100); + --spectrum-alert-dialog-description-to-button-group: var(--spectrum-spacing-500); - /* mods for nested component */ + /* @passthrough -- mods for nested component */ --mod-buttongroup-justify-content: flex-end; } @@ -51,13 +53,14 @@ min-inline-size: var(--mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width)); max-inline-size: var(--mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width)); max-block-size: inherit; + background-color: var(--mod-alert-dialog-background-color, var(--spectrum-alert-dialog-background-color)); outline: none; - padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding)); + padding: var(--mod-alert-dialog-edge-to-content, var(--spectrum-alert-dialog-edge-to-content)); + border-radius: var(--mod-alert-dialog-corner-radius, var(--spectrum-alert-dialog-corner-radius)); .spectrum-Icon { inline-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); block-size: var(--mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size)); - margin-inline-start: var(--mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon)); flex-shrink: 0; } } @@ -74,40 +77,45 @@ .spectrum-AlertDialog-grid { display: grid; + inline-size: 100%; } .spectrum-AlertDialog-header { display: flex; - justify-content: space-between; - align-items: baseline; + gap: var(--mod-alert-dialog-minimum-title-to-icon, var(--spectrum-alert-dialog-minimum-title-to-icon)); + align-items: center; + margin-block-end: var(--mod-alert-dialog-title-to-description, var(--spectrum-alert-dialog-title-to-description)); } .spectrum-AlertDialog-heading { font-family: var(--mod-alert-dialog-title-font-family, var(--spectrum-alert-dialog-title-font-family)); font-weight: var(--mod-alert-dialog-title-font-weight, var(--spectrum-alert-dialog-title-font-weight)); font-style: var(--mod-alert-dialog-title-font-style, var(--spectrum-alert-dialog-title-font-style)); - font-size: var(--mod-alert-dialog-title-font-size, var(--spectrum-alert-dialog-title-font-size)); + font-size: var(--mod-alert-dialog-heading-size, var(--spectrum-alert-dialog-heading-size)); line-height: var(--mod-alert-dialog-title-line-height, var(--spectrum-alert-dialog-title-line-height)); color: var(--mod-alert-dialog-title-color, var(--spectrum-alert-dialog-title-color)); margin: 0; - margin-block-end: var(--mod-alert-dialog-title-to-divider, var(--spectrum-alert-dialog-title-to-divider)); } .spectrum-AlertDialog-content { font-family: var(--mod-alert-dialog-body-font-family, var(--spectrum-alert-dialog-body-font-family)); font-weight: var(--mod-alert-dialog-body-font-weight, var(--spectrum-alert-dialog-body-font-weight)); font-style: var(--mod-alert-dialog-body-font-style, var(--spectrum-alert-dialog-body-font-style)); - font-size: var(--mod-alert-dialog-body-font-size, var(--spectrum-alert-dialog-body-font-size)); + font-size: var(--mod-alert-dialog-description-content-size, var(--spectrum-alert-dialog-description-content-size)); line-height: var(--mod-alert-dialog-body-line-height, var(--spectrum-alert-dialog-body-line-height)); color: var(--mod-alert-dialog-body-color, var(--spectrum-alert-dialog-body-color)); margin: 0; - margin-block-start: var(--mod-alert-dialog-divider-to-description, var(--spectrum-alert-dialog-divider-to-description)); - margin-block-end: var(--mod-alert-dialog-description-to-buttons, var(--spectrum-alert-dialog-description-to-buttons)); + margin-block-end: var(--mod-alert-dialog-description-to-button-group, var(--spectrum-alert-dialog-description-to-button-group)); overflow-y: auto; -webkit-overflow-scrolling: touch; } +.spectrum-AlertDialog-buttongroup { + display: flex; + justify-content: end; +} + @media (forced-colors: active) { .spectrum-AlertDialog { border: solid; diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index a2745ced457..d0e0f948c88 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertdialog", - "version": "4.1.0", + "version": "5.0.0-next.4", "description": "The Spectrum CSS alertdialog component", "license": "Apache-2.0", "author": "Adobe", @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/underlay": ">=6.0.0 <7.0.0" + "@spectrum-css/buttongroup": ">=10.0.0-next.0", + "@spectrum-css/divider": ">=6.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/modal": ">=8.0.0-next.1", + "@spectrum-css/tokens": ">=16.1.0-next.0", + "@spectrum-css/underlay": ">=7.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/buttongroup": { @@ -53,12 +53,12 @@ } }, "devDependencies": { - "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "16.0.2", - "@spectrum-css/underlay": "6.1.0" + "@spectrum-css/buttongroup": "10.0.0-next.1", + "@spectrum-css/divider": "6.0.0-next.1", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/modal": "8.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5", + "@spectrum-css/underlay": "7.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 87c83d18ff9..e5b563f7658 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -32,12 +32,31 @@ export default { control: { type: "text" }, }, isOpen, - variant: { table: { disable: true } }, - buttons: { table: { disable: true } }, + variant: { + name: "Variant", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["confirmation", "information", "destructive", "warning", "error"], + control: "select", + }, + hasVerticalButtons: { + name: "Vertical buttons", + description: "In limited horizontal space, the button group may stack vertically.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + } }, args: { rootClass: "spectrum-AlertDialog", - isOpen: false, + isOpen: true, + hasVerticalButtons: false, variant: "confirmation", }, parameters: { @@ -47,7 +66,7 @@ export default { }, design: { type: "figma", - url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21917-157", + url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=21917-157", }, docs: { story: { @@ -56,25 +75,21 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + } }, + tags: ["migrated"], decorators: [ withUnderlayWrapper, ], }; export const Default = AlertDialogGroup.bind({}); +Default.storyName = "Default (confirmation)"; Default.args = { isOpen: true, heading: "Enable smart filters?", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Remind me later" - }, { - treatment: "fill", - label: "Enable", - variant: "accent" - }], content: "Smart filters are nondestructive and will preserve your original images.", }; @@ -101,22 +116,14 @@ Information.args = { isOpen: true, variant: "information", heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "No, thanks" - },{ - variant: "secondary", - treatment: "outline", - label: "Remind me later" - }, { - variant: "primary", - treatment: "outline", - label: "Rate now", - }], content: "If you enjoy our app, would you mind taking a moment to rate it?", }; Information.parameters = { + docs: { + story: { + height: "400px", + } + }, chromatic: { disableSnapshot: true }, }; @@ -129,16 +136,7 @@ Warning.args = { isOpen: true, variant: "warning", heading: "Unverified format", - icon: true, - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Cancel" - }, { - treatment: "outline", - label: "Continue", - variant: "primary" - }], + icon: "Warning", content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?", }; Warning.parameters = { @@ -154,17 +152,8 @@ Error.args = { isOpen: true, variant: "error", heading: "Unable to share", - icon: true, - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Cancel" - }, { - treatment: "outline", - label: "Continue", - variant: "primary" - }], - content: "An error occured while sharing your project. Please verify the email address and try again.", + icon: "Alert", + content: "An error occurred while sharing your project. Please verify the email address and try again.", }; Error.parameters = { chromatic: { disableSnapshot: true }, @@ -179,36 +168,41 @@ Destructive.args = { isOpen: true, variant: "destructive", heading: "Delete 3 documents?", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Cancel" - }, { - treatment: "fill", - label: "Delete", - variant: "negative" - }], content: "Are you sure you want to delete the 3 selected documents?", }; Destructive.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * When the title and description text are too long for the available horizontal space, they wrap to form another line. + */ +export const Overflow = Template.bind({}); +Overflow.tags = ["!dev"]; +Overflow.args = { + isOpen: true, + variant: "confirmation", + heading: "Alert dialogs allow for text overflow by wrapping when the description and dialog are too long", + content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices est eu lacus interdum, vitae volutpat tortor laoreet. Phasellus consectetur erat quis massa congue, vel placerat ipsum hendrerit. Aenean eleifend augue quam, quis blandit lacus pretium eget. Aliquam aliquam fermentum nunc, sed dictum metus varius in. Suspendisse in nisl libero. Nulla egestas massa eget lectus ullamcorper placerat. Vivamus cursus, nunc quis pharetra auctor, eros mi tempus elit, sit amet placerat ipsum velit ut dolor. Nam sit amet eleifend erat. Duis sollicitudin orci sit amet tellus tincidunt, vel lobortis risus pellentesque. Integer viverra urna elementum metus dignissim placerat. Nulla posuere eros ipsum." +}; +Overflow.parameters = { + chromatic: { disableSnapshot: true }, + docs: { + story: { + height: "525px", + }, + }, +}; + +/** + * The dialog description may also scroll if the height of the dialog is constrained. + */ export const Scroll = Template.bind({}); Scroll.tags = ["!dev"]; Scroll.args = { isOpen: true, variant: "confirmation", heading: "Enable Smart Filters?", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Remind me later" - }, { - treatment: "fill", - label: "Enable", - variant: "accent" - }], content: "Smart filters are nondestructive and will preserve your original images. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices est eu lacus interdum, vitae volutpat tortor laoreet. Phasellus consectetur erat quis massa congue, vel placerat ipsum hendrerit. Aenean eleifend augue quam, quis blandit lacus pretium eget. Aliquam aliquam fermentum nunc, sed dictum metus varius in. Suspendisse in nisl libero. Nulla egestas massa eget lectus ullamcorper placerat. Vivamus cursus, nunc quis pharetra auctor, eros mi tempus elit, sit amet placerat ipsum velit ut dolor. Nam sit amet eleifend erat. Duis sollicitudin orci sit amet tellus tincidunt, vel lobortis risus pellentesque. Integer viverra urna elementum metus dignissim placerat. Nulla posuere eros ipsum. Pellentesque viverra urna justo, eu ultricies nisl fermentum et. Vivamus tristique porttitor dictum.", customStyles: { "max-block-size": "275px", @@ -217,3 +211,16 @@ Scroll.args = { Scroll.parameters = { chromatic: { disableSnapshot: true }, }; + +/** + * Buttons are stacked by the importance of the action, with the most critical or primary action at the bottom. + */ +export const VerticalButtons = Template.bind({}); +VerticalButtons.storyName = "Vertical buttons"; +VerticalButtons.tags = ["!dev"]; +VerticalButtons.args = { + hasVerticalButtons: true, + isOpen: true, + heading: "Vertical button group", + content: "This is what an alert dialog looks like with buttons arranged vertically.", +}; diff --git a/components/alertdialog/stories/alertdialog.test.js b/components/alertdialog/stories/alertdialog.test.js index a74e2092864..c2c850cb58c 100644 --- a/components/alertdialog/stories/alertdialog.test.js +++ b/components/alertdialog/stories/alertdialog.test.js @@ -2,72 +2,39 @@ import { Variants } from "@spectrum-css/preview/decorators"; import { Dialog, Template } from "./template.js"; export const AlertDialogGroup = Variants({ - // Test this without Modal to focus on the dialog solo Template, TestTemplate: Dialog, wrapperStyles: { "z-index": "1", "inline-size": "fit-content", - "background-color": "var(--spectrum-gray-50, white)", + "background-color": "transparent", + "border": "none", "min-block-size": "auto", }, testData: [{}, { + testHeading: "Vertical button display", + heading: "Vertical button group", + content: "This is what an alert dialog looks like with buttons arranged vertically.", + hasVerticalButtons: true, + }, { + testHeading: "Warning", variant: "warning", heading: "Unverified format", - icon: true, - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Cancel" - }, { - treatment: "outline", - label: "Continue", - variant: "primary" - }], content: "This format has not been verified and may not be viewable for some users. Do you want to continue publishing?", }, { + testHeading: "Error", variant: "error", heading: "Unable to share", - icon: true, - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Cancel" - }, { - treatment: "outline", - label: "Continue", - variant: "primary" - }], content: "An error occured while sharing your project. Please verify the email address and try again.", }, { + testHeading: "Destructive", variant: "destructive", heading: "Delete 3 documents?", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "Cancel" - }, { - treatment: "fill", - label: "Delete", - variant: "negative" - }], content: "Are you sure you want to delete the 3 selected documents?", }, { + testHeading: "Informative", variant: "information", - heading: "Informative Dialog with a wrapping title text because the text is longer than the width of the alert dialog", - buttons: [{ - variant: "secondary", - treatment: "outline", - label: "No, thanks" - },{ - variant: "secondary", - treatment: "outline", - label: "Remind me later" - }, { - variant: "primary", - treatment: "outline", - label: "Rate now", - }], + heading: "Informative dialog with a wrapping title text because the text is longer than the width of the alert dialog", content: "If you enjoy our app, would you mind taking a moment to rate it?", }], }); diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js index 5de1e37972c..7504cc687da 100644 --- a/components/alertdialog/stories/template.js +++ b/components/alertdialog/stories/template.js @@ -1,5 +1,4 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; -import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; @@ -11,14 +10,70 @@ import { when } from "lit/directives/when.js"; import "../index.css"; +const iconMap = { + warning: "AlertDiamond", + error: "AlertTriangle" +}; + +const buttonMap = { + confirmation: [{ + variant: "secondary", + treatment: "outline", + label: "Remind me later" + }, { + variant: "accent", + treatment: "fill", + label: "Enable" + }], + information: [{ + variant: "secondary", + treatment: "outline", + label: "No, thanks" + },{ + variant: "secondary", + treatment: "outline", + label: "Remind me later" + }, { + variant: "primary", + treatment: "fill", + label: "Rate now" + }], + destructive: [{ + variant: "secondary", + treatment: "outline", + label: "Cancel" + }, { + variant: "negative", + treatment: "fill", + label: "Delete" + }], + warning: [{ + variant: "secondary", + treatment: "outline", + label: "Cancel" + }, { + variant: "primary", + treatment: "fill", + label: "Continue" + }], + error: [{ + variant: "secondary", + treatment: "outline", + label: "Cancel" + }, { + variant: "primary", + treatment: "fill", + label: "Continue" + }], +}; + export const Dialog = ({ rootClass = "spectrum-AlertDialog", heading, content, customClasses = [], - buttons, variant, - icon = false, + hasVerticalButtons, id = getRandomId("alertdialog"), customStyles = {}, } = {}, context = {}) => { @@ -26,7 +81,7 @@ export const Dialog = ({ <div class=${classMap({ [rootClass]: true, - [`${rootClass}--${variant}`]: true, + [`${rootClass}--${variant}`]: typeof variant !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -38,20 +93,18 @@ export const Dialog = ({ > <div class="${rootClass}-grid"> <div class="spectrum-AlertDialog-header"> - <h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1> - ${when(icon, () => Icon({ + ${when(iconMap[variant], () => Icon({ size: "m", - iconName: "Alert", + iconName: iconMap[variant], setName: "workflow", customClasses: [`${rootClass}-icon`], }, context))} + <h1 class="${rootClass}-heading" id="dialog_label">${heading}</h1> </div> - ${Divider({ - horizontal: true, - customClasses: [`${rootClass}-divider`], - }, context)} <section class="${rootClass}-content">${content}</section> - ${ButtonGroup({ items: buttons }, context)} + <section class="${rootClass}-buttongroup"> + ${ButtonGroup({ items: buttonMap[variant], vertical: hasVerticalButtons }, context)} + </section> </div> </div> `; @@ -59,7 +112,6 @@ export const Dialog = ({ export const Template = ({ isOpen = true, - customModalStyles = {}, skipWrapper = false, ...args } = {}, context = {}) => { @@ -68,7 +120,6 @@ export const Template = ({ content: [ Dialog(args, context) ], - customStyles: customModalStyles, skipWrapper, }, context); }; diff --git a/components/asset/CHANGELOG.md b/components/asset/CHANGELOG.md index c192d60b4e9..4d85dbd89da 100644 --- a/components/asset/CHANGELOG.md +++ b/components/asset/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 306c123b1b6..6389e295f47 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -20,12 +20,9 @@ ], "component": [ "--spectrum-asset-file-background", - "--spectrum-asset-file-background-color", "--spectrum-asset-file-outline", "--spectrum-asset-folder-background", - "--spectrum-asset-folder-background-color", - "--spectrum-asset-folder-outline", - "--spectrum-asset-icon-outline-color" + "--spectrum-asset-folder-outline" ], "global": [ "--spectrum-animation-duration-100", @@ -33,11 +30,6 @@ "--spectrum-gray-25", "--spectrum-gray-500" ], - "system-theme": [ - "--system-asset-file-background-color", - "--system-asset-folder-background-color", - "--system-asset-icon-outline-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-asset-icon-background-color"] } diff --git a/components/asset/index.css b/components/asset/index.css index abf5d42572f..e31f6aea3a7 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -11,13 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Asset { - --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); - --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))); - --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); - --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); + --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200))); + --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25))); + --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); + --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); display: flex; align-items: center; diff --git a/components/asset/package.json b/components/asset/package.json index 7a64a47c88e..0bcb4ccce2a 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/asset", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS asset component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js index c32f792cd49..795c346c508 100644 --- a/components/asset/stories/template.js +++ b/components/asset/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Asset", diff --git a/components/asset/themes/express.css b/components/asset/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/asset/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css deleted file mode 100644 index 5eda732011b..00000000000 --- a/components/asset/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-200); - --spectrum-asset-file-background-color: var(--spectrum-gray-25); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css deleted file mode 100644 index 8b2b12ee379..00000000000 --- a/components/asset/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-300); - --spectrum-asset-file-background-color: var(--spectrum-gray-50); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/assetcard/CHANGELOG.md b/components/assetcard/CHANGELOG.md index b0a85ee0a27..f9c60899fb3 100644 --- a/components/assetcard/CHANGELOG.md +++ b/components/assetcard/CHANGELOG.md @@ -1,5 +1,19 @@ # Change log +## 6.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 6.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/checkbox@11.0.0-next.0 + ## 5.1.0 ### Minor Changes diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 1c86dc47523..94bf07de0af 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -176,12 +176,6 @@ "--spectrum-transparent-black-300", "--spectrum-white" ], - "system-theme": [ - "--system-asset-card-background-color", - "--system-asset-card-overlay-background-color", - "--system-asset-card-selectionindicator-background-color-default", - "--system-asset-card-selectionindicator-box-shadow-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-assectcard-border-color-selected-down", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 26881a3f45f..7b9ee81e647 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -11,12 +11,17 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* outer container, unstyled */ .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); + --spectrum-assetcard-background-color: var(--spectrum-gray-75); + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); + /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; + --spectrum-assetcard-background-color: var(--spectrum-gray-75); + --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); @@ -37,6 +42,8 @@ --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); /* title */ --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); diff --git a/components/assetcard/package.json b/components/assetcard/package.json index 191e9e66d1b..91103db1c40 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/assetcard", - "version": "5.1.0", + "version": "6.0.0-next.1", "description": "The Spectrum CSS asset card component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.2", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/checkbox": "11.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 864fcd951b7..1b44be4e568 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -8,9 +8,6 @@ import { when } from "lit/directives/when.js"; import { camelCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AssetCard", diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css deleted file mode 100644 index 63115538f15..00000000000 --- a/components/assetcard/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%); - } -} diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css deleted file mode 100644 index f38045fb758..00000000000 --- a/components/assetcard/themes/spectrum-two.css +++ /dev/null @@ -1,21 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-75); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css deleted file mode 100644 index c3e7ef9e0a8..00000000000 --- a/components/assetcard/themes/spectrum.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-200); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/assetlist/CHANGELOG.md b/components/assetlist/CHANGELOG.md index 0a4acf0fd2c..d1950f7b434 100644 --- a/components/assetlist/CHANGELOG.md +++ b/components/assetlist/CHANGELOG.md @@ -1,10 +1,27 @@ # Change log +## 9.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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/checkbox@11.0.0-next.0 + ## 8.2.0 ### Minor Changes -- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. +📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! + +By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. ## 8.1.0 diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 011c28ee314..66179c000d9 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -85,10 +85,6 @@ "--spectrum-spacing-600", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-asset-list-item-background-color-down", - "--system-asset-list-item-background-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-assetlist-border-color-key-focus", diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 742070edbd4..28801db0d89 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AssetList { + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-assetlist-width: 272px; --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); diff --git a/components/assetlist/package.json b/components/assetlist/package.json index ac4a549c477..b14fe141f66 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/assetlist", - "version": "8.2.0", + "version": "9.0.0-next.1", "description": "The Spectrum CSS assetlist component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -41,9 +41,9 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.2", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/checkbox": "11.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 96d8f75a80c..f5c6d9731af 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AssetListItem = ({ rootClass = "spectrum-AssetList-item", @@ -45,10 +42,10 @@ export const AssetListItem = ({ customClasses: [`${rootClass}Selector`], }, context) )} - ${when(image, () => + ${when(image, () => html`<img src=${image} class="${rootClass}Thumbnail" alt="asset image thumbnail" />` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/assetlist/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css deleted file mode 100644 index 0624623caf5..00000000000 --- a/components/assetlist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); - } -} diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css deleted file mode 100644 index 30f67757c2e..00000000000 --- a/components/assetlist/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/avatar/CHANGELOG.md b/components/avatar/CHANGELOG.md index 1e8eeaaf747..2dec8680da8 100644 --- a/components/avatar/CHANGELOG.md +++ b/components/avatar/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 9.1.0 ### Minor Changes diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 47df733191c..6b5fb54aac2 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -3,6 +3,12 @@ "selectors": [ ".spectrum-Avatar", ".spectrum-Avatar--size100", + ".spectrum-Avatar--size1000", + ".spectrum-Avatar--size1100", + ".spectrum-Avatar--size1200", + ".spectrum-Avatar--size1300", + ".spectrum-Avatar--size1400", + ".spectrum-Avatar--size1500", ".spectrum-Avatar--size200", ".spectrum-Avatar--size300", ".spectrum-Avatar--size400", @@ -11,6 +17,8 @@ ".spectrum-Avatar--size600", ".spectrum-Avatar--size700", ".spectrum-Avatar--size75", + ".spectrum-Avatar--size800", + ".spectrum-Avatar--size900", ".spectrum-Avatar-image", ".spectrum-Avatar-link", ".spectrum-Avatar.is-disabled", @@ -29,7 +37,11 @@ ], "component": [ "--spectrum-avatar-block-size", + "--spectrum-avatar-border-color", + "--spectrum-avatar-border-color-default", "--spectrum-avatar-border-radius", + "--spectrum-avatar-border-thickness", + "--spectrum-avatar-border-width", "--spectrum-avatar-color-opacity", "--spectrum-avatar-color-opacity-disabled", "--spectrum-avatar-focus-indicator-color", @@ -38,6 +50,12 @@ "--spectrum-avatar-inline-size", "--spectrum-avatar-opacity-disabled", "--spectrum-avatar-size-100", + "--spectrum-avatar-size-1000", + "--spectrum-avatar-size-1100", + "--spectrum-avatar-size-1200", + "--spectrum-avatar-size-1300", + "--spectrum-avatar-size-1400", + "--spectrum-avatar-size-1500", "--spectrum-avatar-size-200", "--spectrum-avatar-size-300", "--spectrum-avatar-size-400", @@ -45,14 +63,15 @@ "--spectrum-avatar-size-500", "--spectrum-avatar-size-600", "--spectrum-avatar-size-700", - "--spectrum-avatar-size-75" + "--spectrum-avatar-size-75", + "--spectrum-avatar-size-800", + "--spectrum-avatar-size-900" ], "global": [ "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] } diff --git a/components/avatar/index.css b/components/avatar/index.css index 4f165dbf364..e6203f003d8 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -18,6 +18,8 @@ --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + --spectrum-avatar-border-thickness: var(--spectrum-avatar-border-width); + --spectrum-avatar-border-color-default: var(--spectrum-avatar-border-color); --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); @@ -71,6 +73,46 @@ --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); } +.spectrum-Avatar--size800 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-800); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-800); +} + +.spectrum-Avatar--size900 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-900); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-900); +} + +.spectrum-Avatar--size1000 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1000); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1000); +} + +.spectrum-Avatar--size1100 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1100); +} + +.spectrum-Avatar--size1200 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1200); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1200); +} + +.spectrum-Avatar--size1300 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1300); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1300); +} + +.spectrum-Avatar--size1400 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1400); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1400); +} + +.spectrum-Avatar--size1500 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1500); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1500); +} + @media (forced-colors: active) { .spectrum-Avatar { --highcontrast-avatar-focus-indicator-color: CanvasText; @@ -83,8 +125,10 @@ inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + border-style: solid; border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); - border-width: 0; + border-width: var(--spectrum-avatar-border-thickness); + border-color: var(--spectrum-avatar-border-color-default); outline: none; @@ -120,7 +164,9 @@ } .spectrum-Avatar-link { - outline: 0; + outline: none; + outline-color: transparent; + outline-style: solid; } .spectrum-Avatar-image { diff --git a/components/avatar/package.json b/components/avatar/package.json index 3f2a8302fb9..13b810d06d7 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/avatar", - "version": "9.1.0", + "version": "10.0.0-next.0", "description": "The Spectrum CSS avatar component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 3ef54b07b71..b3f4d56aea8 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -13,7 +13,7 @@ export default { title: "Avatar", component: "Avatar", argTypes: { - size: size([50, 75, 100, 200, 300, 400, 500, 600, 700], false), + size: size([50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500], false), image: { name: "Image", type: { name: "string" }, @@ -59,7 +59,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** @@ -74,19 +78,7 @@ export const Default = AvatarGroup.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // -/** Avatar sizes scale exponentially, based on the Spectrum type scale. These range from size-50 to size-700, with the default size for an avatar being `100`. An avatar can also be customized to fit appropriately for your context. - * - * Avatar is available in many sizes using the required `.spectrum-Avatar--size<number>` class. The available size classes are: - -- `spectrum-Avatar--size50` -- `spectrum-Avatar--size75` -- `spectrum-Avatar--size100` -- `spectrum-Avatar--size200` -- `spectrum-Avatar--size300` -- `spectrum-Avatar--size400` -- `spectrum-Avatar--size500` -- `spectrum-Avatar--size600` -- `spectrum-Avatar--size700` +/** Avatar is available in many sizes and scales exponentially, based on the Spectrum type scale. These sizes range from size-50 to size-1500, using the required `.spectrum-Avatar--size<number>` class. The default size for an avatar is `100`. An avatar can also be customized to fit appropriately for your context. */ export const Sizing = (args, context) => Sizes({ Template, diff --git a/components/badge/CHANGELOG.md b/components/badge/CHANGELOG.md index ec10090e136..5c2c733d6ad 100644 --- a/components/badge/CHANGELOG.md +++ b/components/badge/CHANGELOG.md @@ -1,5 +1,46 @@ # Change log +## 7.0.0-next.2 + +### Major Changes + +- [#3740](https://github.com/adobe/spectrum-css/pull/3740) [`075fc91`](https://github.com/adobe/spectrum-css/commit/075fc91dd2be332cc8d3005e14bd361bf5630d0a) Thanks [@5t3ph](https://github.com/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](https://github.com/adobe/spectrum-css/pull/3740/files#diff-d1bfd5593c10aaa98222e6c01ca001131fcde194e824b096673ab02a9ef3874f). + + Also added for the default `--mod-badge-border-color` and `--mod-badge-border-width` + +## 7.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 7.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 + ## 6.1.0 ### Minor Changes diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index c8be859d830..29aa729974a 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -4,8 +4,10 @@ ".spectrum-Badge", ".spectrum-Badge--accent", ".spectrum-Badge--blue", + ".spectrum-Badge--brown", ".spectrum-Badge--celery", ".spectrum-Badge--chartreuse", + ".spectrum-Badge--cinnamon", ".spectrum-Badge--cyan", ".spectrum-Badge--fixed-block-end", ".spectrum-Badge--fixed-block-start", @@ -21,13 +23,49 @@ ".spectrum-Badge--neutral", ".spectrum-Badge--notice", ".spectrum-Badge--orange", + ".spectrum-Badge--pink", ".spectrum-Badge--positive", ".spectrum-Badge--purple", ".spectrum-Badge--red", ".spectrum-Badge--seafoam", + ".spectrum-Badge--silver", ".spectrum-Badge--sizeL", ".spectrum-Badge--sizeS", ".spectrum-Badge--sizeXL", + ".spectrum-Badge--style-outline.spectrum-Badge--accent", + ".spectrum-Badge--style-outline.spectrum-Badge--informative", + ".spectrum-Badge--style-outline.spectrum-Badge--negative", + ".spectrum-Badge--style-outline.spectrum-Badge--neutral", + ".spectrum-Badge--style-outline.spectrum-Badge--notice", + ".spectrum-Badge--style-outline.spectrum-Badge--positive", + ".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)", + ".spectrum-Badge--style-subtle", + ".spectrum-Badge--style-subtle.spectrum-Badge--accent", + ".spectrum-Badge--style-subtle.spectrum-Badge--blue", + ".spectrum-Badge--style-subtle.spectrum-Badge--brown", + ".spectrum-Badge--style-subtle.spectrum-Badge--celery", + ".spectrum-Badge--style-subtle.spectrum-Badge--chartreuse", + ".spectrum-Badge--style-subtle.spectrum-Badge--cinnamon", + ".spectrum-Badge--style-subtle.spectrum-Badge--cyan", + ".spectrum-Badge--style-subtle.spectrum-Badge--fuchsia", + ".spectrum-Badge--style-subtle.spectrum-Badge--gray", + ".spectrum-Badge--style-subtle.spectrum-Badge--green", + ".spectrum-Badge--style-subtle.spectrum-Badge--indigo", + ".spectrum-Badge--style-subtle.spectrum-Badge--informative", + ".spectrum-Badge--style-subtle.spectrum-Badge--magenta", + ".spectrum-Badge--style-subtle.spectrum-Badge--negative", + ".spectrum-Badge--style-subtle.spectrum-Badge--neutral", + ".spectrum-Badge--style-subtle.spectrum-Badge--notice", + ".spectrum-Badge--style-subtle.spectrum-Badge--orange", + ".spectrum-Badge--style-subtle.spectrum-Badge--pink", + ".spectrum-Badge--style-subtle.spectrum-Badge--positive", + ".spectrum-Badge--style-subtle.spectrum-Badge--purple", + ".spectrum-Badge--style-subtle.spectrum-Badge--red", + ".spectrum-Badge--style-subtle.spectrum-Badge--seafoam", + ".spectrum-Badge--style-subtle.spectrum-Badge--silver", + ".spectrum-Badge--style-subtle.spectrum-Badge--turquoise", + ".spectrum-Badge--style-subtle.spectrum-Badge--yellow", + ".spectrum-Badge--turquoise", ".spectrum-Badge--yellow", ".spectrum-Badge-icon", ".spectrum-Badge-icon + .spectrum-Badge-label", @@ -40,8 +78,10 @@ "modifiers": [ "--mod-badge-background-color-accent", "--mod-badge-background-color-blue", + "--mod-badge-background-color-brown", "--mod-badge-background-color-celery", "--mod-badge-background-color-chartreuse", + "--mod-badge-background-color-cinnamon", "--mod-badge-background-color-cyan", "--mod-badge-background-color-default", "--mod-badge-background-color-fuchsia", @@ -53,11 +93,16 @@ "--mod-badge-background-color-negative", "--mod-badge-background-color-notice", "--mod-badge-background-color-orange", + "--mod-badge-background-color-pink", "--mod-badge-background-color-positive", "--mod-badge-background-color-purple", "--mod-badge-background-color-red", "--mod-badge-background-color-seafoam", + "--mod-badge-background-color-silver", + "--mod-badge-background-color-turquoise", "--mod-badge-background-color-yellow", + "--mod-badge-border-color", + "--mod-badge-border-width", "--mod-badge-corner-radius", "--mod-badge-font-size", "--mod-badge-height", @@ -71,13 +116,49 @@ "--mod-badge-label-spacing-vertical-top", "--mod-badge-line-height", "--mod-badge-line-height-cjk", + "--mod-badge-outline-background-color-default", + "--mod-badge-outline-border-color-accent", + "--mod-badge-outline-border-color-informative", + "--mod-badge-outline-border-color-negative", + "--mod-badge-outline-border-color-neutral", + "--mod-badge-outline-border-color-notice", + "--mod-badge-outline-border-color-positive", + "--mod-badge-outline-label-icon-color", + "--mod-badge-subtle-background-color-accent", + "--mod-badge-subtle-background-color-blue", + "--mod-badge-subtle-background-color-brown", + "--mod-badge-subtle-background-color-celery", + "--mod-badge-subtle-background-color-chartreuse", + "--mod-badge-subtle-background-color-cinnamon", + "--mod-badge-subtle-background-color-cyan", + "--mod-badge-subtle-background-color-default", + "--mod-badge-subtle-background-color-fuchsia", + "--mod-badge-subtle-background-color-gray", + "--mod-badge-subtle-background-color-green", + "--mod-badge-subtle-background-color-indigo", + "--mod-badge-subtle-background-color-informative", + "--mod-badge-subtle-background-color-magenta", + "--mod-badge-subtle-background-color-negative", + "--mod-badge-subtle-background-color-notice", + "--mod-badge-subtle-background-color-orange", + "--mod-badge-subtle-background-color-pink", + "--mod-badge-subtle-background-color-positive", + "--mod-badge-subtle-background-color-purple", + "--mod-badge-subtle-background-color-red", + "--mod-badge-subtle-background-color-seafoam", + "--mod-badge-subtle-background-color-silver", + "--mod-badge-subtle-background-color-turquoise", + "--mod-badge-subtle-background-color-yellow", + "--mod-badge-subtle-label-icon-color", "--mod-badge-workflow-icon-size" ], "component": [ "--spectrum-badge-background-color-accent", "--spectrum-badge-background-color-blue", + "--spectrum-badge-background-color-brown", "--spectrum-badge-background-color-celery", "--spectrum-badge-background-color-chartreuse", + "--spectrum-badge-background-color-cinnamon", "--spectrum-badge-background-color-cyan", "--spectrum-badge-background-color-default", "--spectrum-badge-background-color-fuchsia", @@ -89,33 +170,83 @@ "--spectrum-badge-background-color-negative", "--spectrum-badge-background-color-notice", "--spectrum-badge-background-color-orange", + "--spectrum-badge-background-color-pink", "--spectrum-badge-background-color-positive", "--spectrum-badge-background-color-purple", "--spectrum-badge-background-color-red", "--spectrum-badge-background-color-seafoam", + "--spectrum-badge-background-color-silver", + "--spectrum-badge-background-color-turquoise", "--spectrum-badge-background-color-yellow", + "--spectrum-badge-border-color", + "--spectrum-badge-border-width", "--spectrum-badge-corner-radius", "--spectrum-badge-font-size", + "--spectrum-badge-font-weight", "--spectrum-badge-height", "--spectrum-badge-icon-only-spacing-horizontal", "--spectrum-badge-icon-spacing-horizontal", "--spectrum-badge-icon-spacing-vertical-top", "--spectrum-badge-icon-text-spacing", "--spectrum-badge-label-icon-color", - "--spectrum-badge-label-icon-color-primary", "--spectrum-badge-label-spacing-horizontal", "--spectrum-badge-label-spacing-vertical-bottom", "--spectrum-badge-label-spacing-vertical-top", "--spectrum-badge-line-height", "--spectrum-badge-line-height-cjk", + "--spectrum-badge-outline-background-color", + "--spectrum-badge-outline-border-color-accent", + "--spectrum-badge-outline-border-color-informative", + "--spectrum-badge-outline-border-color-negative", + "--spectrum-badge-outline-border-color-neutral", + "--spectrum-badge-outline-border-color-notice", + "--spectrum-badge-outline-border-color-positive", + "--spectrum-badge-outline-label-icon-color", + "--spectrum-badge-subtle-background-color-accent", + "--spectrum-badge-subtle-background-color-blue", + "--spectrum-badge-subtle-background-color-brown", + "--spectrum-badge-subtle-background-color-celery", + "--spectrum-badge-subtle-background-color-chartreuse", + "--spectrum-badge-subtle-background-color-cinnamon", + "--spectrum-badge-subtle-background-color-cyan", + "--spectrum-badge-subtle-background-color-default", + "--spectrum-badge-subtle-background-color-fuchsia", + "--spectrum-badge-subtle-background-color-gray", + "--spectrum-badge-subtle-background-color-green", + "--spectrum-badge-subtle-background-color-indigo", + "--spectrum-badge-subtle-background-color-informative", + "--spectrum-badge-subtle-background-color-magenta", + "--spectrum-badge-subtle-background-color-negative", + "--spectrum-badge-subtle-background-color-notice", + "--spectrum-badge-subtle-background-color-orange", + "--spectrum-badge-subtle-background-color-pink", + "--spectrum-badge-subtle-background-color-positive", + "--spectrum-badge-subtle-background-color-purple", + "--spectrum-badge-subtle-background-color-red", + "--spectrum-badge-subtle-background-color-seafoam", + "--spectrum-badge-subtle-background-color-silver", + "--spectrum-badge-subtle-background-color-turquoise", + "--spectrum-badge-subtle-background-color-yellow", + "--spectrum-badge-subtle-label-icon-color", "--spectrum-badge-workflow-icon-size" ], "global": [ "--spectrum-accent-background-color-default", + "--spectrum-accent-subtle-background-color-default", + "--spectrum-accent-visual-color", + "--spectrum-background-layer-2-color", "--spectrum-black", "--spectrum-blue-background-color-default", + "--spectrum-blue-subtle-background-color-default", + "--spectrum-border-width-200", + "--spectrum-brown-background-color-default", + "--spectrum-brown-subtle-background-color-default", "--spectrum-celery-background-color-default", + "--spectrum-celery-subtle-background-color-default", "--spectrum-chartreuse-background-color-default", + "--spectrum-chartreuse-subtle-background-color-default", + "--spectrum-cinnamon-background-color-default", + "--spectrum-cinnamon-subtle-background-color-default", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -143,39 +274,70 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-cyan-background-color-default", + "--spectrum-cyan-subtle-background-color-default", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-fuchsia-background-color-default", + "--spectrum-fuchsia-subtle-background-color-default", + "--spectrum-gray-1000", "--spectrum-gray-background-color-default", + "--spectrum-gray-subtle-background-color-default", "--spectrum-green-background-color-default", + "--spectrum-green-subtle-background-color-default", "--spectrum-indigo-background-color-default", + "--spectrum-indigo-subtle-background-color-default", "--spectrum-informative-background-color-default", + "--spectrum-informative-subtle-background-color-default", + "--spectrum-informative-visual-color", "--spectrum-line-height-100", "--spectrum-magenta-background-color-default", + "--spectrum-magenta-subtle-background-color-default", + "--spectrum-medium-font-weight", "--spectrum-negative-background-color-default", + "--spectrum-negative-subtle-background-color-default", + "--spectrum-negative-visual-color", "--spectrum-neutral-subdued-background-color-default", + "--spectrum-neutral-subtle-background-color-default", + "--spectrum-neutral-visual-color", "--spectrum-notice-background-color-default", + "--spectrum-notice-subtle-background-color-default", + "--spectrum-notice-visual-color", "--spectrum-orange-background-color-default", + "--spectrum-orange-subtle-background-color-default", + "--spectrum-pink-background-color-default", + "--spectrum-pink-subtle-background-color-default", "--spectrum-positive-background-color-default", + "--spectrum-positive-subtle-background-color-default", + "--spectrum-positive-visual-color", "--spectrum-purple-background-color-default", + "--spectrum-purple-subtle-background-color-default", "--spectrum-red-background-color-default", + "--spectrum-red-subtle-background-color-default", "--spectrum-seafoam-background-color-default", + "--spectrum-seafoam-subtle-background-color-default", + "--spectrum-silver-background-color-default", + "--spectrum-silver-subtle-background-color-default", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", + "--spectrum-turquoise-background-color-default", + "--spectrum-turquoise-subtle-background-color-default", "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75", - "--spectrum-yellow-background-color-default" + "--spectrum-yellow-background-color-default", + "--spectrum-yellow-subtle-background-color-default" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-badge-border-color"] } diff --git a/components/badge/index.css b/components/badge/index.css index bf4e458aca8..3498a25777f 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -12,20 +12,20 @@ */ .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); + /* base badge styling for all t-shirt sizes and all themes */ + --spectrum-badge-border-width: var(--mod-badge-border-width, var(--spectrum-border-width-200)); + --spectrum-badge-border-color: transparent; /* label text styles for all t-shirt sizes and all themes */ --spectrum-badge-line-height: var(--spectrum-line-height-100); --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-badge-font-weight: var(--spectrum-medium-font-weight); /* text and icon color default white for all t-shirt sizes and all themes */ --spectrum-badge-label-icon-color: var(--spectrum-white); - /* background color default for all t-shirt sizes and all themes */ - --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - /* semantic background colors for all t-shirt sizes and all themes */ + --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); @@ -47,23 +47,73 @@ --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default); --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default); --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default); + --spectrum-badge-background-color-pink: var(--spectrum-pink-background-color-default); + --spectrum-badge-background-color-turquoise: var(--spectrum-turquoise-background-color-default); + --spectrum-badge-background-color-brown: var(--spectrum-brown-background-color-default); + --spectrum-badge-background-color-cinnamon: var(--spectrum-cinnamon-background-color-default); + --spectrum-badge-background-color-silver: var(--spectrum-silver-background-color-default); + + /** + Style = subtle + */ + + --spectrum-badge-subtle-label-icon-color: var(--spectrum-gray-1000); + + /* semantic background colors */ + --spectrum-badge-subtle-background-color-default: var(--spectrum-neutral-subtle-background-color-default); + --spectrum-badge-subtle-background-color-accent: var(--spectrum-accent-subtle-background-color-default); + --spectrum-badge-subtle-background-color-informative: var(--spectrum-informative-subtle-background-color-default); + --spectrum-badge-subtle-background-color-negative: var(--spectrum-negative-subtle-background-color-default); + --spectrum-badge-subtle-background-color-positive: var(--spectrum-positive-subtle-background-color-default); + --spectrum-badge-subtle-background-color-notice: var(--spectrum-notice-subtle-background-color-default); + + /* non-semantic background colors */ + --spectrum-badge-subtle-background-color-gray: var(--spectrum-gray-subtle-background-color-default); + --spectrum-badge-subtle-background-color-red: var(--spectrum-red-subtle-background-color-default); + --spectrum-badge-subtle-background-color-orange: var(--spectrum-orange-subtle-background-color-default); + --spectrum-badge-subtle-background-color-yellow: var(--spectrum-yellow-subtle-background-color-default); + --spectrum-badge-subtle-background-color-chartreuse: var(--spectrum-chartreuse-subtle-background-color-default); + --spectrum-badge-subtle-background-color-celery: var(--spectrum-celery-subtle-background-color-default); + --spectrum-badge-subtle-background-color-green: var(--spectrum-green-subtle-background-color-default); + --spectrum-badge-subtle-background-color-seafoam: var(--spectrum-seafoam-subtle-background-color-default); + --spectrum-badge-subtle-background-color-cyan: var(--spectrum-cyan-subtle-background-color-default); + --spectrum-badge-subtle-background-color-blue: var(--spectrum-blue-subtle-background-color-default); + --spectrum-badge-subtle-background-color-indigo: var(--spectrum-indigo-subtle-background-color-default); + --spectrum-badge-subtle-background-color-purple: var(--spectrum-purple-subtle-background-color-default); + --spectrum-badge-subtle-background-color-fuchsia: var(--spectrum-fuchsia-subtle-background-color-default); + --spectrum-badge-subtle-background-color-magenta: var(--spectrum-magenta-subtle-background-color-default); + --spectrum-badge-subtle-background-color-pink: var(--spectrum-pink-subtle-background-color-default); + --spectrum-badge-subtle-background-color-turquoise: var(--spectrum-turquoise-subtle-background-color-default); + --spectrum-badge-subtle-background-color-brown: var(--spectrum-brown-subtle-background-color-default); + --spectrum-badge-subtle-background-color-cinnamon: var(--spectrum-cinnamon-subtle-background-color-default); + --spectrum-badge-subtle-background-color-silver: var(--spectrum-silver-subtle-background-color-default); + + /** + Style = outline + Only valid for semantic colors + */ + --spectrum-badge-outline-label-icon-color: var(--spectrum-gray-1000); + --spectrum-badge-outline-background-color: var(--spectrum-background-layer-2-color); + --spectrum-badge-outline-border-color-neutral: var(--spectrum-neutral-visual-color); + --spectrum-badge-outline-border-color-accent: var(--spectrum-accent-visual-color); + --spectrum-badge-outline-border-color-informative: var(--spectrum-informative-visual-color); + --spectrum-badge-outline-border-color-negative: var(--spectrum-negative-visual-color); + --spectrum-badge-outline-border-color-notice: var(--spectrum-notice-visual-color); + --spectrum-badge-outline-border-color-positive: var(--spectrum-positive-visual-color); /*** DEFAULT STYLE fallbacks if no t-shirt size - uses Medium t-shirt styles ***/ - /* badge height - fallback if no t-shirt size */ + + --spectrum-badge-corner-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-badge-height: var(--spectrum-component-height-100); - /* label font size - fallback if no t-shirt size */ --spectrum-badge-font-size: var(--spectrum-font-size-100); - /* label spacing - fallback if no t-shirt size */ --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100); --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100); --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100); - /* icon size - fallback if no t-shirt size */ --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100); - - /* icon spacing - fallback if no t-shirt size */ --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100); --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100); --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); @@ -73,6 +123,7 @@ } /* text and icon color is black for these background colors */ +.spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, @@ -80,21 +131,8 @@ --spectrum-badge-label-icon-color: var(--spectrum-black); } -/* dark theme all non-semantic colors are black */ -.spectrum-Badge--gray, -.spectrum-Badge--red, -.spectrum-Badge--green, -.spectrum-Badge--seafoam, -.spectrum-Badge--cyan, -.spectrum-Badge--blue, -.spectrum-Badge--indigo, -.spectrum-Badge--purple, -.spectrum-Badge--fuchsia, -.spectrum-Badge--magenta { - --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary); -} - .spectrum-Badge--sizeS { + --spectrum-badge-corner-radius: var(--spectrum-corner-radius-medium-size-small); --spectrum-badge-height: var(--spectrum-component-height-75); /* label */ @@ -112,6 +150,7 @@ } .spectrum-Badge--sizeL { + --spectrum-badge-corner-radius: var(--spectrum-corner-radius-medium-size-large); --spectrum-badge-height: var(--spectrum-component-height-100); /* label */ @@ -129,6 +168,7 @@ } .spectrum-Badge--sizeXL { + --spectrum-badge-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); --spectrum-badge-height: var(--spectrum-component-height-100); /* label */ @@ -162,14 +202,18 @@ cursor: default; - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - + /* Due to calc() for spacing, --mod is included in base border-width token */ + border: var(--spectrum-badge-border-width) solid var(--mod-badge-border-color, var(--spectrum-badge-border-color)); border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); - border: 1px solid transparent; background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + + /* Show background color under transparent border to correct visual height */ + background-origin: border-box; + + /* Prevent stretch height behavior next to other flex/grid children */ + align-self: start; } /* background color variants */ @@ -193,7 +237,6 @@ background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive)); } -/* New in S2, not supporting in Foundations yet! */ .spectrum-Badge--notice { background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); } @@ -255,6 +298,165 @@ background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); } +.spectrum-Badge--pink { + background: var(--mod-badge-background-color-pink, var(--spectrum-badge-background-color-pink)); +} + +.spectrum-Badge--turquoise { + background: var(--mod-badge-background-color-turquoise, var(--spectrum-badge-background-color-turquoise)); +} + +.spectrum-Badge--brown { + background: var(--mod-badge-background-color-brown, var(--spectrum-badge-background-color-brown)); +} + +.spectrum-Badge--cinnamon { + background: var(--mod-badge-background-color-cinnamon, var(--spectrum-badge-background-color-cinnamon)); +} + +.spectrum-Badge--silver { + background: var(--mod-badge-background-color-silver, var(--spectrum-badge-background-color-silver)); +} + +/* Style = subtle */ +.spectrum-Badge--style-subtle { + color: var(--mod-badge-subtle-label-icon-color, var(--spectrum-badge-subtle-label-icon-color)); + + /* background color variants */ + &.spectrum-Badge--neutral { + background: var(--mod-badge-subtle-background-color-default, var(--spectrum-badge-subtle-background-color-default)); + } + + &.spectrum-Badge--accent { + background: var(--mod-badge-subtle-background-color-accent, var(--spectrum-badge-subtle-background-color-accent)); + } + + &.spectrum-Badge--informative { + background: var(--mod-badge-subtle-background-color-informative, var(--spectrum-badge-subtle-background-color-informative)); + } + + &.spectrum-Badge--negative { + background: var(--mod-badge-subtle-background-color-negative, var(--spectrum-badge-subtle-background-color-negative)); + } + + &.spectrum-Badge--positive { + background: var(--mod-badge-subtle-background-color-positive, var(--spectrum-badge-subtle-background-color-positive)); + } + + &.spectrum-Badge--notice { + background: var(--mod-badge-subtle-background-color-notice, var(--spectrum-badge-subtle-background-color-notice)); + } + + /* non-semantic colors */ + &.spectrum-Badge--gray { + background: var(--mod-badge-subtle-background-color-gray, var(--spectrum-badge-subtle-background-color-gray)); + } + + &.spectrum-Badge--red { + background: var(--mod-badge-subtle-background-color-red, var(--spectrum-badge-subtle-background-color-red)); + } + + &.spectrum-Badge--orange { + background: var(--mod-badge-subtle-background-color-orange, var(--spectrum-badge-subtle-background-color-orange)); + } + + &.spectrum-Badge--yellow { + background: var(--mod-badge-subtle-background-color-yellow, var(--spectrum-badge-subtle-background-color-yellow)); + } + + &.spectrum-Badge--chartreuse { + background: var(--mod-badge-subtle-background-color-chartreuse, var(--spectrum-badge-subtle-background-color-chartreuse)); + } + + &.spectrum-Badge--celery { + background: var(--mod-badge-subtle-background-color-celery, var(--spectrum-badge-subtle-background-color-celery)); + } + + &.spectrum-Badge--green { + background: var(--mod-badge-subtle-background-color-green, var(--spectrum-badge-subtle-background-color-green)); + } + + &.spectrum-Badge--seafoam { + background: var(--mod-badge-subtle-background-color-seafoam, var(--spectrum-badge-subtle-background-color-seafoam)); + } + + &.spectrum-Badge--cyan { + background: var(--mod-badge-subtle-background-color-cyan, var(--spectrum-badge-subtle-background-color-cyan)); + } + + &.spectrum-Badge--blue { + background: var(--mod-badge-subtle-background-color-blue, var(--spectrum-badge-subtle-background-color-blue)); + } + + &.spectrum-Badge--indigo { + background: var(--mod-badge-subtle-background-color-indigo, var(--spectrum-badge-subtle-background-color-indigo)); + } + + &.spectrum-Badge--purple { + background: var(--mod-badge-subtle-background-color-purple, var(--spectrum-badge-subtle-background-color-purple)); + } + + &.spectrum-Badge--fuchsia { + background: var(--mod-badge-subtle-background-color-fuchsia, var(--spectrum-badge-subtle-background-color-fuchsia)); + } + + &.spectrum-Badge--magenta { + background: var(--mod-badge-subtle-background-color-magenta, var(--spectrum-badge-subtle-background-color-magenta)); + } + + &.spectrum-Badge--pink { + background: var(--mod-badge-subtle-background-color-pink, var(--spectrum-badge-subtle-background-color-pink)); + } + + &.spectrum-Badge--turquoise { + background: var(--mod-badge-subtle-background-color-turquoise, var(--spectrum-badge-subtle-background-color-turquoise)); + } + + &.spectrum-Badge--brown { + background: var(--mod-badge-subtle-background-color-brown, var(--spectrum-badge-subtle-background-color-brown)); + } + + &.spectrum-Badge--cinnamon { + background: var(--mod-badge-subtle-background-color-cinnamon, var(--spectrum-badge-subtle-background-color-cinnamon)); + } + + &.spectrum-Badge--silver { + background: var(--mod-badge-subtle-background-color-silver, var(--spectrum-badge-subtle-background-color-silver)); + } +} + +/* Style = outline - only valid for semantic colors */ +.spectrum-Badge--style-outline { + &:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice) { + background: var(--mod-badge-outline-background-color-default, var(--spectrum-badge-outline-background-color)); + color: var(--mod-badge-outline-label-icon-color, var(--spectrum-badge-outline-label-icon-color)); + } + + &.spectrum-Badge--neutral { + border-color: var(--mod-badge-outline-border-color-neutral, var(--spectrum-badge-outline-border-color-neutral)); + } + + &.spectrum-Badge--accent { + border-color: var(--mod-badge-outline-border-color-accent, var(--spectrum-badge-outline-border-color-accent)); + } + + &.spectrum-Badge--informative { + border-color: var(--mod-badge-outline-border-color-informative, var(--spectrum-badge-outline-border-color-informative)); + } + + &.spectrum-Badge--negative { + border-color: var(--mod-badge-outline-border-color-negative, var(--spectrum-badge-outline-border-color-negative)); + } + + &.spectrum-Badge--positive { + border-color: var(--mod-badge-outline-border-color-positive, var(--spectrum-badge-outline-border-color-positive)); + } + + &.spectrum-Badge--notice { + border-color: var(--mod-badge-outline-border-color-notice, var(--spectrum-badge-outline-border-color-notice)); + } +} + /* fixed position variants with border radius 0 on the fixed edge of the component */ .spectrum-Badge--fixed-inline-start { border-start-start-radius: 0; @@ -279,14 +481,13 @@ /* label */ .spectrum-Badge-label { font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); + font-weight: var(--spectrum-badge-font-weight); line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); - padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); + padding-inline-end: calc(var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)) - var(--spectrum-badge-border-width)); padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); - padding-block-start: var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top)); - padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom)); - - color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + padding-block-start: calc(var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top)) - var(--spectrum-badge-border-width)); + padding-block-end: calc(var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom)) - var(--spectrum-badge-border-width)); /* cjk language support */ &:lang(ja), @@ -309,18 +510,22 @@ /* ensures icon does not shrink when badge width is limited */ flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); - padding-inline-start: var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal)); + margin-inline-start: calc(var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal)) - var(--spectrum-badge-border-width)); /* icon with label has reduced padding between icon and text */ - padding-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing)); - padding-block-start: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)); - padding-block-end: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)); - - color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color)); + margin-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing)); + margin-block-start: calc(var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)) - var(--spectrum-badge-border-width)); + margin-block-end: calc(var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top)) - var(--spectrum-badge-border-width)); } .spectrum-Badge-icon--no-label { /* icon without label has identical padding left and right */ - padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)); - padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)); + margin-inline-start: calc(var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)) - var(--spectrum-badge-border-width)); + margin-inline-end: calc(var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal)) - var(--spectrum-badge-border-width)); +} + +.spectrum-Badge, +.spectrum-Badge-label, +.spectrum-Badge-icon { + box-sizing: border-box; } diff --git a/components/badge/package.json b/components/badge/package.json index 4660d06d3fc..a54f52d5bc5 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/badge", - "version": "6.1.0", + "version": "7.0.0-next.2", "description": "The Spectrum CSS badge component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index fb9961227a2..e5027efded1 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -9,9 +9,9 @@ import { BadgeGroup } from "./badge.test.js"; import { ContentOptions, Template } from "./template.js"; /** - * A badge element displays a small amount of color-categorized metadata; ideal for getting a user's attention. Some notes about badge: - * - Label and icon elements must be nested inside a parent container of class `.spectrum-Badge` in order to achieve the correct layout and wrapping behavior. - * - The layout of badge is achieved by applying a display of `inline-flex`, allowing badge to display as inline, while the label and/or icon child elements can utilize flexbox for layout. + * Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention. There are two additional styles - subtle fill and outline - in addition to the default, bold fill style. + * + * Because outline and subtle fill styles draw a similar level of attention, choose only one to use consistently within a single product. Bold fill can be paired with either style, and is reserved for high-attention badging only. */ export default { title: "Badge", @@ -32,6 +32,17 @@ export default { if: false, }, iconSet: { table: { disable: true } }, + style: { + name: "Style", + description: "Changes the visual appearance", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["default", "subtle", "outline"], + control: "select", + }, variant: { name: "Variants", description: "Changes the badge's background color. The variant list includes both semantic and non-semantic options.", @@ -40,7 +51,7 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["neutral", "accent", "informative", "positive", "negative", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], + options: ["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], control: "select", }, fixed: { @@ -57,6 +68,7 @@ export default { args: { rootClass: "spectrum-Badge", size: "m", + style: "default", variant: "neutral", iconSet: "workflow", fixed: "none" @@ -68,7 +80,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"] }; /** @@ -76,7 +92,7 @@ export default { */ export const Default = BadgeGroup.bind({}); Default.args = { - iconName: "Info", + iconName: "InfoCircle", label: "Badge", }; @@ -84,7 +100,7 @@ Default.args = { export const SemanticVariants = (args, context) => ArgGrid({ Template, argKey: "variant", - options: ["neutral", "accent", "informative", "positive", "negative"], + options: ["neutral", "accent", "informative", "positive", "negative", "notice"], withBorder: false, ...args, }, context); @@ -109,6 +125,41 @@ NonSemanticVariants.parameters = { }; NonSemanticVariants.storyName = "Non-semantic"; +/** + * The "outline" style is only valid for semantic color variants. + */ +export const StyleOutline = (args, context) => ArgGrid({ + Template, + argKey: "variant", + options: ["neutral", "accent", "informative", "positive", "negative", "notice"], + withBorder: false, + ...args, +}, context); +StyleOutline.args = {...Default.args, style: "outline"}; +StyleOutline.tags = ["!dev"]; +StyleOutline.parameters = { + chromatic: { disableSnapshot: true }, +}; +StyleOutline.storyName = "Style: Outline"; + + +/** + * The "subtle" style is available for all color variants. + */ +export const StyleSubtle = (args, context) => ArgGrid({ + Template, + argKey: "variant", + options: ["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], + withBorder: false, + ...args, +}, context); +StyleSubtle.args = {...Default.args, style: "subtle"}; +StyleSubtle.tags = ["!dev"]; +StyleSubtle.parameters = { + chromatic: { disableSnapshot: true }, +}; +StyleSubtle.storyName = "Style: Subtle"; + /** * Fixed positioning impacts the border radius of the badge component. The border radius is 0 along the fixed edge of the component. The actual component position is not represented on this page. */ diff --git a/components/badge/stories/badge.test.js b/components/badge/stories/badge.test.js index d1068ec340a..541e4d8c3c5 100644 --- a/components/badge/stories/badge.test.js +++ b/components/badge/stories/badge.test.js @@ -17,7 +17,7 @@ export const BadgeGroup = Variants({ Template: Badges, sizeDirection: "row", testData: [ - ...["neutral", "accent", "informative", "positive", "negative"].map((variant) => + ...["neutral", "accent", "informative", "positive", "negative", "notice"].map((variant) => ({ testHeading: capitalize(variant), wrapperStyles: { @@ -35,6 +35,26 @@ export const BadgeGroup = Variants({ variant, }) ), + ...["neutral", "accent", "informative", "positive", "negative", "notice"].map((variant) => + ({ + testHeading: capitalize(variant), + wrapperStyles: { + "column-gap": "10px", + }, + variant, + style: "outline" + }) + ), + ...["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"].map((variant) => + ({ + testHeading: capitalize(variant), + wrapperStyles: { + "column-gap": "10px", + }, + variant, + style: "subtle" + }) + ), ...["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"].map((fixed) => ({ testHeading: `Layout ${fixed}`, @@ -47,7 +67,7 @@ export const BadgeGroup = Variants({ }) ), { - testHeading: "Truncation", + testHeading: "Text Wrap", wrapperStyles: { "column-gap": "10px", }, diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index ee071e455fe..128d3eabe4f 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -15,6 +15,7 @@ export const Template = ({ iconName, iconSet = "workflow", variant = "neutral", + style = "default", fixed, customStyles = {}, customClasses = [], @@ -27,7 +28,8 @@ export const Template = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--${variant}`]: typeof variant !== "undefined", - [`${rootClass}--${fixed}`]: typeof fixed !== "undefined", + [`${rootClass}--style-${style}`]: style !== "default", + [`${rootClass}--${fixed}`]: typeof fixed !== "undefined" && fixed !== "none", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} diff --git a/components/breadcrumb/CHANGELOG.md b/components/breadcrumb/CHANGELOG.md index b88e4e46f12..3a19dca17bf 100644 --- a/components/breadcrumb/CHANGELOG.md +++ b/components/breadcrumb/CHANGELOG.md @@ -1,5 +1,20 @@ # Change log +## 12.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 12.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/actionbutton@8.0.0-next.0 + ## 11.1.0 ### Minor Changes @@ -207,6 +222,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 8.2.5 diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 561253d9efa..35fb0b03993 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -2,35 +2,30 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Breadcrumbs", - ".spectrum-Breadcrumbs--compact", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item > .spectrum-ActionButton", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs--multiline", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton", ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator", + ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink", + ".spectrum-Breadcrumbs--sizeL", ".spectrum-Breadcrumbs-item", ".spectrum-Breadcrumbs-item > .spectrum-ActionButton", ".spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled", ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before", ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton", + ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink", ".spectrum-Breadcrumbs-item:last-of-type", ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink", ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs-itemLink", + ".spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs-itemLink.is-disabled", ".spectrum-Breadcrumbs-itemLink:focus-visible:before", ".spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]", ".spectrum-Breadcrumbs-itemLink[href]", + ".spectrum-Breadcrumbs-itemLink[href]:active", ".spectrum-Breadcrumbs-itemLink[href]:focus-visible", ".spectrum-Breadcrumbs-itemLink[href]:hover", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]", + ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover", ".spectrum-Breadcrumbs-itemSeparator", @@ -41,41 +36,23 @@ "--mod-breadcrumbs-action-button-color", "--mod-breadcrumbs-action-button-color-disabled", "--mod-breadcrumbs-action-button-spacing-block", - "--mod-breadcrumbs-action-button-spacing-block-between-multiline", - "--mod-breadcrumbs-action-button-spacing-block-compact", - "--mod-breadcrumbs-action-button-spacing-block-multiline", "--mod-breadcrumbs-action-button-spacing-inline", - "--mod-breadcrumbs-action-button-spacing-inline-start", "--mod-breadcrumbs-block-size", - "--mod-breadcrumbs-block-size-compact", - "--mod-breadcrumbs-block-size-multiline", "--mod-breadcrumbs-focus-indicator-color", "--mod-breadcrumbs-focus-indicator-gap", "--mod-breadcrumbs-focus-indicator-thickness", "--mod-breadcrumbs-font-family", - "--mod-breadcrumbs-font-family-compact", - "--mod-breadcrumbs-font-family-compact-current", "--mod-breadcrumbs-font-family-current", - "--mod-breadcrumbs-font-family-multiline", - "--mod-breadcrumbs-font-family-multiline-current", "--mod-breadcrumbs-font-size", - "--mod-breadcrumbs-font-size-compact", - "--mod-breadcrumbs-font-size-compact-current", "--mod-breadcrumbs-font-size-current", - "--mod-breadcrumbs-font-size-multiline", - "--mod-breadcrumbs-font-size-multiline-current", + "--mod-breadcrumbs-font-style", "--mod-breadcrumbs-font-weight", - "--mod-breadcrumbs-font-weight-compact", - "--mod-breadcrumbs-font-weight-compact-current", "--mod-breadcrumbs-font-weight-current", - "--mod-breadcrumbs-font-weight-multiline", - "--mod-breadcrumbs-font-weight-multiline-current", "--mod-breadcrumbs-icon-spacing-block", - "--mod-breadcrumbs-icon-spacing-block-between-multiline", - "--mod-breadcrumbs-icon-spacing-block-compact", - "--mod-breadcrumbs-icon-spacing-block-start-multiline", "--mod-breadcrumbs-inline-end", "--mod-breadcrumbs-inline-start", + "--mod-breadcrumbs-inline-start-to-truncated-menu", + "--mod-breadcrumbs-item-dragged-background", "--mod-breadcrumbs-item-link-border-radius", "--mod-breadcrumbs-line-height", "--mod-breadcrumbs-separator-color", @@ -85,112 +62,96 @@ "--mod-breadcrumbs-text-color-disabled", "--mod-breadcrumbs-text-decoration-gap", "--mod-breadcrumbs-text-decoration-thickness", - "--mod-breadcrumbs-text-spacing-block-between-multiline", "--mod-breadcrumbs-text-spacing-block-end", - "--mod-breadcrumbs-text-spacing-block-end-compact", - "--mod-breadcrumbs-text-spacing-block-end-multiline", "--mod-breadcrumbs-text-spacing-block-start", - "--mod-breadcrumbs-text-spacing-block-start-compact", - "--mod-breadcrumbs-text-spacing-block-start-multiline" + "--mod-breadcrumbs-title-spacing-block-end", + "--mod-breadcrumbs-title-spacing-block-start", + "--mod-heading-margin-end", + "--mod-heading-margin-start" ], "component": [ "--spectrum-breadcrumbs-action-button-color", "--spectrum-breadcrumbs-action-button-color-disabled", "--spectrum-breadcrumbs-action-button-spacing-block", - "--spectrum-breadcrumbs-action-button-spacing-block-between-multiline", - "--spectrum-breadcrumbs-action-button-spacing-block-compact", - "--spectrum-breadcrumbs-action-button-spacing-block-multiline", "--spectrum-breadcrumbs-action-button-spacing-inline", - "--spectrum-breadcrumbs-action-button-spacing-inline-start", "--spectrum-breadcrumbs-block-size", - "--spectrum-breadcrumbs-block-size-compact", - "--spectrum-breadcrumbs-block-size-multiline", - "--spectrum-breadcrumbs-bottom-to-text", - "--spectrum-breadcrumbs-bottom-to-text-compact", "--spectrum-breadcrumbs-bottom-to-text-multiline", "--spectrum-breadcrumbs-end-edge-to-text", "--spectrum-breadcrumbs-focus-indicator-color", "--spectrum-breadcrumbs-focus-indicator-gap", "--spectrum-breadcrumbs-focus-indicator-thickness", "--spectrum-breadcrumbs-font-family", - "--spectrum-breadcrumbs-font-family-compact", - "--spectrum-breadcrumbs-font-family-compact-current", "--spectrum-breadcrumbs-font-family-current", - "--spectrum-breadcrumbs-font-family-multiline", - "--spectrum-breadcrumbs-font-family-multiline-current", "--spectrum-breadcrumbs-font-size", - "--spectrum-breadcrumbs-font-size-compact", - "--spectrum-breadcrumbs-font-size-compact-current", "--spectrum-breadcrumbs-font-size-current", - "--spectrum-breadcrumbs-font-size-multiline", - "--spectrum-breadcrumbs-font-size-multiline-current", + "--spectrum-breadcrumbs-font-style", "--spectrum-breadcrumbs-font-weight", - "--spectrum-breadcrumbs-font-weight-compact", - "--spectrum-breadcrumbs-font-weight-compact-current", "--spectrum-breadcrumbs-font-weight-current", - "--spectrum-breadcrumbs-font-weight-multiline", - "--spectrum-breadcrumbs-font-weight-multiline-current", - "--spectrum-breadcrumbs-height", - "--spectrum-breadcrumbs-height-compact", "--spectrum-breadcrumbs-height-multiline", "--spectrum-breadcrumbs-icon-spacing-block", - "--spectrum-breadcrumbs-icon-spacing-block-between-multiline", - "--spectrum-breadcrumbs-icon-spacing-block-compact", - "--spectrum-breadcrumbs-icon-spacing-block-start-multiline", "--spectrum-breadcrumbs-inline-end", "--spectrum-breadcrumbs-inline-start", + "--spectrum-breadcrumbs-inline-start-to-truncated-menu", + "--spectrum-breadcrumbs-item-dragged-background", "--spectrum-breadcrumbs-item-link-border-radius", "--spectrum-breadcrumbs-line-height", "--spectrum-breadcrumbs-separator-color", - "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline", "--spectrum-breadcrumbs-separator-spacing-inline", - "--spectrum-breadcrumbs-start-edge-to-text", + "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", + "--spectrum-breadcrumbs-start-edge-to-text-large", + "--spectrum-breadcrumbs-start-edge-to-text-medium", + "--spectrum-breadcrumbs-start-edge-to-text-multiline", "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "--spectrum-breadcrumbs-text-color", "--spectrum-breadcrumbs-text-color-current", "--spectrum-breadcrumbs-text-color-disabled", "--spectrum-breadcrumbs-text-decoration-gap", "--spectrum-breadcrumbs-text-decoration-thickness", - "--spectrum-breadcrumbs-text-spacing-block-between-multiline", "--spectrum-breadcrumbs-text-spacing-block-end", - "--spectrum-breadcrumbs-text-spacing-block-end-compact", - "--spectrum-breadcrumbs-text-spacing-block-end-multiline", "--spectrum-breadcrumbs-text-spacing-block-start", - "--spectrum-breadcrumbs-text-spacing-block-start-compact", - "--spectrum-breadcrumbs-text-spacing-block-start-multiline", + "--spectrum-breadcrumbs-text-to-separator-large", + "--spectrum-breadcrumbs-text-to-separator-medium", + "--spectrum-breadcrumbs-text-to-separator-multiline", + "--spectrum-breadcrumbs-title-spacing-block-end", + "--spectrum-breadcrumbs-title-spacing-block-start", "--spectrum-breadcrumbs-top-text-to-bottom-text", - "--spectrum-breadcrumbs-top-to-separator-icon", - "--spectrum-breadcrumbs-top-to-separator-icon-compact", - "--spectrum-breadcrumbs-top-to-separator-icon-multiline", - "--spectrum-breadcrumbs-top-to-text", - "--spectrum-breadcrumbs-top-to-text-compact", + "--spectrum-breadcrumbs-top-to-separator-large", + "--spectrum-breadcrumbs-top-to-separator-medium", + "--spectrum-breadcrumbs-top-to-separator-multiline", "--spectrum-breadcrumbs-top-to-text-multiline", "--spectrum-breadcrumbs-top-to-truncated-menu", - "--spectrum-breadcrumbs-top-to-truncated-menu-compact", "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", - "--spectrum-breadcrumbs-truncated-menu-to-separator-icon" + "--spectrum-breadcrumbs-truncated-menu-to-separator" ], "global": [ "--spectrum-bold-font-weight", - "--spectrum-corner-radius-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-height-100", + "--spectrum-component-height-200", + "--spectrum-component-top-to-text-100", + "--spectrum-component-top-to-text-200", + "--spectrum-corner-radius-small-default", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", + "--spectrum-drop-zone-background-color-opacity", + "--spectrum-drop-zone-background-color-rgb", + "--spectrum-extra-bold-font-weight", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", - "--spectrum-font-size-300", "--spectrum-font-size-75", + "--spectrum-heading-size-l", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", - "--spectrum-text-to-visual-100", "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-breadcrumbs-action-button-color", diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index 11e5a68e03b..d8d46e277dc 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -12,88 +12,46 @@ */ .spectrum-Breadcrumbs { - /* block size */ - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); - --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + --spectrum-breadcrumbs-block-size: var(--spectrum-component-height-100); - /* text regular */ + /* Text - medium / default */ --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-100); --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-breadcrumbs-font-style: var(--spectrum-default-font-style); - /* text regular active item */ - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-100); --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - /* text compact */ - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); - - /* text compact active item */ - --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); - - /* text multiline */ - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); - - /* text multiline active item */ - --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); - --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); - - /* hover, active, focus underline */ + /* Hover, active, focus underline */ --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); - /* space between items */ - --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); - - /* vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); - --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); - --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + /* Space between separator chevron and items */ + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-medium); - /* compact vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); - --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + /* Vertical spacing for text and separator icon */ + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-component-top-to-text-100); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-medium); + --spectrum-breadcrumbs-title-spacing-block-start: var(--spectrum-breadcrumbs-text-spacing-block-start); + --spectrum-breadcrumbs-title-spacing-block-end: var(--spectrum-breadcrumbs-text-spacing-block-end); - /* multiline vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ - - /* horizontal outer spacing of list */ - --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + /* Horizontal outer spacing of list */ + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-medium); --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --spectrum-breadcrumbs-inline-start-to-truncated-menu: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); - /* menu action button icon spacing */ - --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); - - /* action button spacing */ + /* Action button (truncated menu) spacing */ + --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator); --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ - - --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ - - /* Focus Indicator */ + /* Focus indicator */ --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* placeholder for border radius for focus indicator */ - --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); + --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-small-default); /* Colors */ --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); @@ -102,72 +60,63 @@ --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-breadcrumbs-item-dragged-background: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + + /* Sub-component: heading */ + --mod-heading-margin-end: 0px; + --mod-heading-margin-start: 0px; } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Breadcrumbs { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; +.spectrum-Breadcrumbs--sizeL { + --spectrum-breadcrumbs-block-size: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-large); + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-component-top-to-text-200); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-component-bottom-to-text-200); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-large); + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-large); +} + +.spectrum-Breadcrumbs--multiline { + --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height-multiline); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-75); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-heading-size-l); + --spectrum-breadcrumbs-font-weight-current: var(--spectrum-extra-bold-font-weight); + + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-multiline); + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text-multiline); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-top-text-to-bottom-text); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline); + --spectrum-breadcrumbs-title-spacing-block-start: 0; + --spectrum-breadcrumbs-title-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-multiline); + --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); } .spectrum-Breadcrumbs { list-style-type: none; - margin: 0; - padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); - padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + padding-inline: 0 var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; - flex: 1 0 0%; - - block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); -} - -.spectrum-Breadcrumbs--compact { - block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact)); -} - -.spectrum-Breadcrumbs--multiline { - block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline)); - - flex-wrap: wrap; - align-content: center; } .spectrum-Breadcrumbs-itemSeparator { position: relative; - margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); - margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); - opacity: 1; color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); &:dir(rtl) { transform: scaleX(-1); } - - .spectrum-Breadcrumbs--compact & { - margin-block: var(--mod-breadcrumbs-icon-spacing-block-compact, var(--spectrum-breadcrumbs-icon-spacing-block-compact)); - } - - .spectrum-Breadcrumbs--multiline & { - margin-block-start: var(--mod-breadcrumbs-icon-spacing-block-start-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-icon-spacing-block-between-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)); - } } .spectrum-Breadcrumbs-item { @@ -175,40 +124,15 @@ position: relative; display: inline-flex; white-space: nowrap; - align-items: center; font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); + font-style: var(--mod-breadcrumbs-font-style, var(--spectrum-breadcrumbs-font-style)); line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); - .spectrum-Breadcrumbs--compact & { - font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact)); - font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact)); - font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact)); - - > .spectrum-ActionButton { - margin-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact)); - } - } - - .spectrum-Breadcrumbs--multiline & { - font-family: var(--mod-breadcrumbs-font-family-multiline, var(--spectrum-breadcrumbs-font-family-multiline)); - font-size: var(--mod-breadcrumbs-font-size-multiline, var(--spectrum-breadcrumbs-font-size-multiline)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline, var(--spectrum-breadcrumbs-font-weight-multiline)); - - &:last-of-type { - block-size: auto; - inline-size: 100%; - } - - > .spectrum-ActionButton { - margin-block-start: var(--mod-breadcrumbs-action-button-spacing-block-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)); - margin-block-end: var(--mod-breadcrumbs-action-button-spacing-block-between-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)); - } - } - + /* Breadcrumbs title (current item) */ &:last-of-type { font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); @@ -219,27 +143,10 @@ } } - .spectrum-Breadcrumbs--compact &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current)); - font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current)); - font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current)); - } - - .spectrum-Breadcrumbs--multiline &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-multiline-current, var(--spectrum-breadcrumbs-font-family-multiline-current)); - font-size: var(--mod-breadcrumbs-font-size-multiline-current, var(--spectrum-breadcrumbs-font-size-multiline-current)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline-current, var(--spectrum-breadcrumbs-font-weight-multiline-current)); - - .spectrum-Breadcrumbs-itemLink { - margin-block-start: 0; - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-multiline, var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)); - } - } - + /* Truncated menu */ > .spectrum-ActionButton { margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); - color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); &:disabled { @@ -247,10 +154,14 @@ } } + /* Start edge to text or truncated menu */ &:first-of-type { - /* if folder icon is first item */ + > .spectrum-Breadcrumbs-itemLink { + margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + } + > .spectrum-ActionButton { - margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start)); + margin-inline-start: var(--mod-breadcrumbs-inline-start-to-truncated-menu, var(--spectrum-breadcrumbs-inline-start-to-truncated-menu)); } } } @@ -258,46 +169,43 @@ .spectrum-Breadcrumbs-itemLink { cursor: default; position: relative; - box-sizing: border-box; - display: block; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ outline: none; - text-decoration: none; color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); + /* Create new stacking context for negative z-index dragged pseudo element. */ + isolation: isolate; + margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); + margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); &.is-disabled, &[aria-disabled="true"] { color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); } + /* Breadcrumbs title (current item) */ .spectrum-Breadcrumbs-item:last-of-type & { color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); + margin-block-start: var(--mod-breadcrumbs-title-spacing-block-start, var(--spectrum-breadcrumbs-title-spacing-block-start)); + margin-block-end: var(--mod-breadcrumbs-title-spacing-block-end, var(--spectrum-breadcrumbs-title-spacing-block-end)); } - .spectrum-Breadcrumbs--compact & { - /* compact vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-compact, var(--spectrum-breadcrumbs-text-spacing-block-start-compact)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-compact, var(--spectrum-breadcrumbs-text-spacing-block-end-compact)); - } - - .spectrum-Breadcrumbs--multiline & { - /* multiline vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-multiline, var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-between-multiline, var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)); /* vertical between lines */ + + .spectrum-Breadcrumbs-itemSeparator { + margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); } + /* Link is focusable */ &[href], &[tabindex="0"] { cursor: pointer; &:hover, + &:active, &:focus-visible { text-decoration: underline; text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); @@ -306,10 +214,12 @@ } } -/* focus indicator */ +/* Focus indicator */ .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before, .spectrum-Breadcrumbs-itemLink:focus-visible::before { position: absolute; + content: ""; + pointer-events: none; margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); @@ -322,9 +232,40 @@ border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); border-style: solid; border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); + border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); +} - content: ""; - pointer-events: none; +.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before { + background: var(--mod-breadcrumbs-item-dragged-background, var(--spectrum-breadcrumbs-item-dragged-background)); - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + /* Make sure the background color does not appear on top of the text. */ + z-index: -1; +} + +/* Multiline */ +.spectrum-Breadcrumbs--multiline { + flex-wrap: wrap; + align-content: center; + + /* The multiline title takes up the full width and appears below the other breadcrumb items. */ + .spectrum-Breadcrumbs-item:last-of-type { + block-size: auto; + inline-size: 100%; + + > .spectrum-Breadcrumbs-itemLink { + margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + } + } +} + +@media (forced-colors: active) { + .spectrum-Breadcrumbs { + --highcontrast-breadcrumbs-text-color: LinkText; + --highcontrast-breadcrumbs-text-color-current: CanvasText; + --highcontrast-breadcrumbs-text-color-disabled: GrayText; + --highcontrast-breadcrumbs-separator-color: CanvasText; + --highcontrast-breadcrumbs-action-button-color: LinkText; + --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; + --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; + } } diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index 8e91e1daceb..4c65006b823 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/breadcrumb", - "version": "11.1.0", + "version": "12.0.0-next.1", "description": "The Spectrum CSS breadcrumb component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -41,9 +41,9 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index a25c76c285c..33faf477ad0 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,44 +1,136 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDragged } from "@spectrum-css/preview/types"; +import { isDragged, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { BreadcrumbGroup } from "./breadcrumb.test.js"; -import { Template } from "./template.js"; +import { BreadcrumbTitleHeadings, Template } from "./template.js"; /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. - * - * ## Nesting - * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon. - * - * The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb. - * - * ## Root Context - * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful. */ export default { title: "Breadcrumbs", component: "Breadcrumbs", argTypes: { - items: { table: { disable: true } }, + items: { + name: "Breadcrumb items", + description: "Additional breadcrumb items after the nav root item, including their label text.<br>Advanced:<ul><li>To show an item as disabled, add a key named `isDisabled` with a value of `true`.</li><li>The \"Show dragged item\" control will affect the item with `isDragged` set to `true`.</li></ul>", + control: "array", + table: { + category: "Content", + }, + }, + size: { + ...size(["m", "l"]), + if: { arg: "variant", neq: "multiline" }, + }, variant: { - name: "Variants", + name: "Variant", type: { name: "string" }, defaultValue: "Default", table: { type: { summary: "string" }, category: "Component", - defaultValue: { summary: "Default" }, }, - options: ["default", "compact", "multiline"], - control: "select", + options: [undefined, "multiline"], + control: { + type: "select", + labels: { + undefined: "Default", + multiline: "Multiline", + }, + }, + }, + isDragged: { + ...isDragged, + name: "Show dragged item", + description: "Breadcrumbs can have optional behavior to allow for drag and drop functionality. Setting this to true will style a breadcrumb item as if something is currently being dragged on top of it.", + }, + titleHeadingSize: { + name: "Breadcrumb title heading size", + description: "The breadcrumb title can be customized in the multiline variant using an additional element that uses the typography component's heading classes. The preferred heading sizes are small, medium, large, and extra-large. When no heading classes are used, the text will be sized the same as a large heading by default.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { + type: "select", + labels: { + undefined: "Default", + s: "Small", + m: "Medium", + l: "Large", + xl: "Extra-large", + }, + }, + defaultValue: undefined, + options: [undefined, "s", "m", "l", "xl"], + if: { arg: "variant", eq: "multiline" }, + }, + showTruncatedMenu: { + name: "Show truncated menu", + description: "Displays a breadcrumb item with a folder icon, that would house truncated breadcrumb items.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + showRootContext: { + name: "Show with root context", + description: "Includes a visible breadcrumb item before the truncated menu, for displaying a root directory.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + if: { arg: "showTruncatedMenu" }, + }, + truncatedMenuIsDisabled: { + name: "Show truncated menu as disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + if: { arg: "showTruncatedMenu" }, + }, + rootItemText: { + name: "Root breadcrumb item label", + type: { name: "string" }, + defaultValue: "Nav root", + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", }, - isDragged, }, args: { rootClass: "spectrum-Breadcrumbs", isDragged: false, - variant: "default", + variant: undefined, + size: "m", + showTruncatedMenu: false, + showRootContext: false, + truncatedMenuIsDisabled: false, + rootItemText: "Nav root", + items: [ + { + label: "Sub item", + isDragged: true, + }, + { + label: "Trend", + }, + { + label: "January 2019 assets", + }, + ], }, parameters: { design: { @@ -47,38 +139,30 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + } }, + tags: ["migrated"], }; /** * By default, breadcrumbs are displayed inline with the hierarchy shown in reading order. + * The medium size is used by default, and it should display the medium truncated menu action button. + * The separator UI icon displayed should be `Chevron100`. */ export const Default = BreadcrumbGroup.bind({}); -Default.args = { - items: [ - { - label: "Nav root", - }, - { - label: "Trend", - isDragged: true, - }, - { - label: "January 2019 assets", - }, - ], -}; +Default.args = {}; +/** + * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. This truncated menu is an icon only action button that typically displays a folder icon. + * + * The nested variants below are non-functional. Implementations should make sure to follow the design guidelines for overflow behavior and displaying all options within the truncated menu. + */ export const DefaultNested = Template.bind({}); DefaultNested.args = { + showTruncatedMenu: true, items: [ - { - iconName: "FolderOpen", - iconSet: "workflow", - }, - { - label: "Sub item", - }, { label: "Trend", }, @@ -91,18 +175,18 @@ DefaultNested.tags = ["!dev"]; DefaultNested.parameters = { chromatic: { disableSnapshot: true }, }; -DefaultNested.storyName = "Default, nested"; +DefaultNested.storyName = "Default, nested (truncated menu)"; +/** + * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are + * truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory + * called “On this device” is very helpful. + */ export const DefaultNestedRootVisible = Template.bind({}); DefaultNestedRootVisible.args = { + showTruncatedMenu: true, + showRootContext: true, items: [ - { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - }, { label: "Trend", }, @@ -115,7 +199,7 @@ DefaultNestedRootVisible.tags = ["!dev"]; DefaultNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -DefaultNestedRootVisible.storyName = "Default, nested (root visible)"; +DefaultNestedRootVisible.storyName = "Default, nested with root context"; /** * The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location. @@ -135,7 +219,7 @@ MultilineNested.args = { ...DefaultNested.args, variant: "multiline", }; -MultilineNested.storyName = "Multiline, nested"; +MultilineNested.storyName = "Multiline, nested (truncated menu)"; MultilineNested.tags= ["!dev"]; MultilineNested.parameters = { chromatic: { disableSnapshot: true }, @@ -150,45 +234,47 @@ MultilineNestedRootVisible.tags = ["!dev"]; MultilineNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -MultilineNestedRootVisible.storyName = "Multiline, nested (root visible)"; +MultilineNestedRootVisible.storyName = "Multiline, nested with root context"; /** - * When needing to optimize for functional space, the compact option is useful for reducing the height of the breadcrumbs while still maintaining the proper user context. + * When using the large size, the truncated menu action button should also use the large size. The separator UI icon displayed should be `Chevron100`. */ -export const Compact = Template.bind({}); -Compact.args = { +export const Large = Template.bind({}); +Large.args = { ...Default.args, - variant: "compact", + size: "l", }; -Compact.tags = ["!dev"]; -Compact.parameters = { +Large.tags = ["!dev"]; +Large.parameters = { chromatic: { disableSnapshot: true }, }; -export const CompactNested = Template.bind({}); -CompactNested.args = { +export const LargeNested = Template.bind({}); +LargeNested.args = { ...DefaultNested.args, - variant: "compact", + size: "l", }; -CompactNested.tags = ["!dev"]; -CompactNested.parameters = { +LargeNested.tags = ["!dev"]; +LargeNested.parameters = { chromatic: { disableSnapshot: true }, }; -CompactNested.storyName = "Compact, nested"; +LargeNested.storyName = "Large, nested (truncated menu)"; -export const CompactNestedRootVisible = Template.bind({}); -CompactNestedRootVisible.args = { +export const LargeNestedRootVisible = Template.bind({}); +LargeNestedRootVisible.args = { ...DefaultNestedRootVisible.args, - variant: "compact", + size: "l", }; -CompactNestedRootVisible.tags = ["!dev"]; -CompactNestedRootVisible.parameters = { +LargeNestedRootVisible.tags = ["!dev"]; +LargeNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -CompactNestedRootVisible.storyName = "Compact, nested (root visible)"; +LargeNestedRootVisible.storyName = "Large, nested with root context"; /** * Breadcrumbs can have optional behavior to allow for drag and drop functionality. + * When a breadcrumb item has something being dragged on top of it, the class `is-dragged` is added to it. + * This example adds that class to the second breadcrumb item. */ export const Dragged = Template.bind({}); Dragged.args = { @@ -201,21 +287,16 @@ Dragged.parameters = { }; /** - * The example below has two disabled breadcrumb items. When disabling the text link, the `is-disabled` class gets added to `.spectrum-Breadcrumbs-itemLink`. When disabling the Action button, the `[disabled]` attribute is applied. + * The example below has two disabled breadcrumb items. When disabling the text link, the `is-disabled` class + * gets added to `.spectrum-Breadcrumbs-itemLink`. When disabling the truncated menu action button, the `[disabled]` attribute is applied. */ export const Disabled = Template.bind({}); Disabled.args = { + showTruncatedMenu: true, + truncatedMenuIsDisabled: true, items: [ { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - isDisabled: true, - }, - { - label: "Trendy", + label: "Trend", isDisabled: true, }, { @@ -228,6 +309,23 @@ Disabled.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * For the multiline variant, the breadcrumb title can be customized using an additional element that uses the heading classes from + * the [typography component](/docs/components-typography--docs). The preferred heading sizes are `.spectrum-Heading--sizeS`, + * `.spectrum-Heading--sizeM`, `.spectrum-Heading--sizeL` (default), and `.spectrum-Heading--sizeXL`. If no heading element or classes are + * used, the text will be sized the same as a large heading by default. + */ +export const MultilineTitleSizes = BreadcrumbTitleHeadings.bind({}); +MultilineTitleSizes.args = { + ...Multiline.args, + showTruncatedMenu: true, +}; +MultilineTitleSizes.storyName = "Multiline, title heading sizes"; +MultilineTitleSizes.tags = ["!dev"]; +MultilineTitleSizes.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = BreadcrumbGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/breadcrumb/stories/breadcrumb.test.js b/components/breadcrumb/stories/breadcrumb.test.js index f5e33d71c58..ef56e21e722 100644 --- a/components/breadcrumb/stories/breadcrumb.test.js +++ b/components/breadcrumb/stories/breadcrumb.test.js @@ -1,109 +1,94 @@ import { Variants } from "@spectrum-css/preview/decorators"; -import { Template } from "./template.js"; - -const DefaultItems = [ - { - label: "Nav root", - }, - { - label: "Dragged", - isDragged: true, - }, - { - label: "Disabled sub item", - isDisabled: true, - }, - { - label: "January 2019 assets", - }, -]; - -const NestedItems = [ - { - iconName: "FolderOpen", - iconSet: "workflow", - }, - { - label: "Dragged", - isDragged: true, - }, - { - label: "Disabled", - isDisabled: true, - }, - { - label: "January 2019 assets", - }, -]; - -const NestedRootVisibleItems = [ - { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - isDisabled: true, - }, - { - label: "Dragged sub item", - isDragged: true, - }, - { - label: "January 2019 assets", - }, -]; +import { BreadcrumbTitleHeadings, Template } from "./template.js"; export const BreadcrumbGroup = Variants({ Template, + withSizes: false, testData: [ { testHeading: "Default", - items: DefaultItems, - }, - { - testHeading: "Default (nested)", - items: NestedItems, }, { - testHeading: "Default (nested, root visible)", - items: NestedRootVisibleItems, + testHeading: "Large", + size: "l", }, { - testHeading: "Compact", - variant: "compact", - items: DefaultItems, + testHeading: "Multiline", + variant: "multiline", }, { - testHeading: "Compact (nested)", - variant: "compact", - items: NestedItems, + testHeading: "Multiline with typography headings", + variant: "multiline", + withStates: false, + Template: BreadcrumbTitleHeadings, + showTruncatedMenu: true, + showRootContext: true, + isDragged: true, }, + ], + stateData: [ { - testHeading: "Compact (nested, root visible)", - variant: "compact", - items: NestedRootVisibleItems, + testHeading: "Nested", + showTruncatedMenu: true, }, { - testHeading: "Multiline", - variant: "multiline", - items: DefaultItems, + testHeading: "Nested with root context", + showTruncatedMenu: true, + showRootContext: true, }, { - testHeading: "Multiline (nested)", - variant: "multiline", - items: NestedItems, + testHeading: "Disabled items and dragged item", + isDragged: true, + showTruncatedMenu: true, + truncatedMenuIsDisabled: true, + items: [ + { + label: "Dragged item", + isDragged: true, + }, + { + label: "Disabled sub item", + isDisabled: true, + }, + { + label: "January 2019 assets", + }, + ] }, { - testHeading: "Multiline (nested, root visible)", - variant: "multiline", - items: NestedRootVisibleItems, + testHeading: "Hover", + isDragged: true, + showTruncatedMenu: true, + items: [ + { + label: "Sub item", + isHovered: true, + }, + { + label: "Disabled sub item", + isDisabled: true, + isHovered: true, + }, + { + label: "January 2019 assets", + isHovered: true, + }, + ] }, - ], - stateData: [ { - testHeading: "Dragged, disabled", + testHeading: "Focus-visible", isDragged: true, - } + showTruncatedMenu: true, + items: [ + { + label: "Sub item", + isFocused: true, + }, + { + label: "January 2019 assets", + isFocused: true, + }, + ] + }, ] }); diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js index 3f0db2ad30b..0a0ad48c0d9 100644 --- a/components/breadcrumb/stories/template.js +++ b/components/breadcrumb/stories/template.js @@ -1,5 +1,7 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -11,19 +13,43 @@ export const Template = ({ rootClass = "spectrum-Breadcrumbs", customClasses = [], items = [], + size = "m", variant, isDragged = false, + titleHeadingSize, + showTruncatedMenu = false, + showRootContext = false, + truncatedMenuIsDisabled = false, + rootItemText = "Nav root", } = {}, context = {}) => { + /** + * Build array of breadcrumb items. + * - The presence of the root item and truncated menu are dependent upon controls. + * - The rest of the items, including the current item, come from the `items` array. + */ + const breadcrumbItems = [ + ...(showTruncatedMenu == false || showRootContext == true) ? [{ + label: rootItemText, + }] : [], + ...(showTruncatedMenu == true) ? [{ + iconName: "FolderOpen", + iconSet: "workflow", + isDragged: true, + }] : [], + ...items, + ]; + return html` <nav> <ul class=${classMap({ [rootClass]: true, + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m", [`${rootClass}--${variant}`]: typeof variant !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} > - ${items.map((item, idx, arr) => { + ${breadcrumbItems.map((item, idx, arr) => { const { label, isDisabled, iconName, iconSet } = item; return html` <li class=${classMap({ @@ -38,10 +64,10 @@ export const Template = ({ { iconName, iconSet, - isDisabled, + isDisabled: isDisabled || truncatedMenuIsDisabled, isQuiet: true, customIconClasses: [`${rootClass}-folder`], - size: "m", + size: variant === "multiline" ? "s" : size, }, context, ), @@ -53,6 +79,8 @@ export const Template = ({ class=${classMap({ [`${rootClass}-itemLink`]: true, "is-disabled": isDisabled, + "is-focus-visible": item.isFocused, + "is-hover": item.isHovered, })} aria-disabled=${ifDefined( isDisabled ? "true" : undefined, @@ -63,15 +91,24 @@ export const Template = ({ ${label} </div>`, () => - html`<a class="${rootClass}-itemLink" aria-current="page" - >${label}</a + html`<a + class=${classMap({ + [`${rootClass}-itemLink`]: true, + "is-hover": item.isHovered, + })} + aria-current="page" + >${ typeof titleHeadingSize == "undefined" ? label : Typography({ + semantics: "heading", + size: titleHeadingSize, + content: [label], + })}</a >`, ), )} ${when(idx !== arr.length - 1, () => Icon( { - iconName: "ChevronRight100", + iconName: variant == "multiline" ? "ChevronRight75" : "ChevronRight100", setName: "ui", customClasses: [`${rootClass}-itemSeparator`], }, @@ -84,3 +121,24 @@ export const Template = ({ </nav> `; }; + +/** + * Displays all preferred sizes for breadcrumb title headings used with the multiline variant. + */ +export const BreadcrumbTitleHeadings = (args, context) => Container({ + withBorder: false, + direction: "column", + wrapperStyles: { + rowGap: "12px", + }, + content: html`${[undefined, "s", "m", "l", "xl"].map((titleHeadingSize) => Container({ + withBorder: true, + heading: typeof titleHeadingSize != "undefined" + ? `Heading size: ${titleHeadingSize}` + : "Default - no heading element or classes", + content: Template({ + ...args, + titleHeadingSize, + }) + }, context))}`, +}, context); diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md index 76e60a5f4a1..314bb21138b 100644 --- a/components/button/CHANGELOG.md +++ b/components/button/CHANGELOG.md @@ -1,5 +1,36 @@ # Change log +## 15.0.0-next.2 + +### Patch Changes + +- [#3687](https://github.com/adobe/spectrum-css/pull/3687) [`53d1e5e`](https://github.com/adobe/spectrum-css/commit/53d1e5e7eb7817c37be3cfe5a253363dea744046) Thanks [@marissahuysentruyt](https://github.com/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](https://github.com/adobe/spectrum-css/pull/2600) + - [Add text wrapping option](https://github.com/adobe/spectrum-css/pull/3086) + - [PostCSS plugin updates/fixes](https://github.com/adobe/spectrum-css/pull/3502) + +## 15.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/progresscircle@6.0.0-next.0 + +## 15.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 + ## 14.1.6 ### Patch Changes diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index be9fdd8fe84..660dfcc6d96 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -9,42 +9,33 @@ ".spectrum-Button--noWrap .spectrum-Button-label", ".spectrum-Button--sizeL", ".spectrum-Button--sizeS", + ".spectrum-Button--sizeS.spectrum-Button--iconOnly", ".spectrum-Button--sizeXL", ".spectrum-Button-label", ".spectrum-Button-label:empty", ".spectrum-Button.is-disabled", + ".spectrum-Button.is-focused", ".spectrum-Button.is-focused:after", ".spectrum-Button.is-pending", ".spectrum-Button.is-pending .spectrum-Button-label", ".spectrum-Button.is-pending .spectrum-Icon", ".spectrum-Button.is-pending .spectrum-ProgressCircle", - ".spectrum-Button.is-selected", - ".spectrum-Button.is-selected.spectrum-Button--emphasized", ".spectrum-Button.spectrum-Button--accent", - ".spectrum-Button.spectrum-Button--accent.spectrum-Button--fill", - ".spectrum-Button.spectrum-Button--accent.spectrum-Button--outline", + ".spectrum-Button.spectrum-Button--accent .spectrum-Button-label", ".spectrum-Button.spectrum-Button--iconOnly", ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon", - ".spectrum-Button.spectrum-Button--iconOnly:after", ".spectrum-Button.spectrum-Button--negative", - ".spectrum-Button.spectrum-Button--negative.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--primary", ".spectrum-Button.spectrum-Button--primary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticBlack", - ".spectrum-Button.spectrum-Button--staticBlack.is-selected", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--staticWhite", - ".spectrum-Button.spectrum-Button--staticWhite.is-selected", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline", ".spectrum-Button::-moz-focus-inner", @@ -55,6 +46,8 @@ ".spectrum-Button:focus-visible", ".spectrum-Button:focus-visible:after", ".spectrum-Button:hover", + ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)", + ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label", ".spectrum-Button[pending]", ".spectrum-Button[pending] .spectrum-Button-label", ".spectrum-Button[pending] .spectrum-Icon", @@ -62,8 +55,6 @@ "a.spectrum-Button" ], "modifiers": [ - "--mod-animation-duration-100", - "--mod-bold-font-weight", "--mod-button-animation-duration", "--mod-button-background-color-default", "--mod-button-background-color-disabled", @@ -86,13 +77,13 @@ "--mod-button-edge-to-text", "--mod-button-edge-to-visual", "--mod-button-edge-to-visual-only", - "--mod-button-focus-indicator-gap", "--mod-button-focus-ring-border-radius", "--mod-button-focus-ring-color", "--mod-button-focus-ring-gap", "--mod-button-focus-ring-thickness", "--mod-button-font-family", "--mod-button-font-size", + "--mod-button-font-weight", "--mod-button-height", "--mod-button-icon-margin-block-start", "--mod-button-line-height", @@ -102,15 +93,10 @@ "--mod-button-max-inline-size", "--mod-button-min-width", "--mod-button-padding-label-to-icon", - "--mod-button-static-content-color", "--mod-button-text-align", "--mod-button-text-align-with-icon", "--mod-button-top-to-icon", - "--mod-button-top-to-text", - "--mod-focus-indicator-gap", - "--mod-line-height-100", - "--mod-sans-font-family-stack", - "--mod-static-black-focus-indicator-color" + "--mod-button-top-to-text" ], "component": [ "--spectrum-button-animation-duration", @@ -143,21 +129,13 @@ "--spectrum-button-focus-ring-gap", "--spectrum-button-focus-ring-thickness", "--spectrum-button-font-size", + "--spectrum-button-font-weight", "--spectrum-button-height", "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", "--spectrum-button-min-width", "--spectrum-button-minimum-width-multiplier", "--spectrum-button-padding-label-to-icon", - "--spectrum-button-sized-bottom-to-text", - "--spectrum-button-sized-edge-to-text", - "--spectrum-button-sized-edge-to-visual", - "--spectrum-button-sized-edge-to-visual-only", - "--spectrum-button-sized-font-size", - "--spectrum-button-sized-height", - "--spectrum-button-sized-padding-label-to-icon", - "--spectrum-button-sized-top-to-icon", - "--spectrum-button-sized-top-to-text", "--spectrum-button-top-to-icon", "--spectrum-button-top-to-text", "--spectrum-button-top-to-text-extra-large", @@ -170,15 +148,6 @@ "--spectrum-accent-background-color-down", "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-200", - "--spectrum-accent-color-300", - "--spectrum-accent-color-900", - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-black", "--spectrum-bold-font-weight", @@ -199,10 +168,14 @@ "--spectrum-component-pill-edge-to-visual-only-200", "--spectrum-component-pill-edge-to-visual-only-300", "--spectrum-component-pill-edge-to-visual-only-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-workflow-icon-100", "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-full", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", @@ -212,6 +185,9 @@ "--spectrum-disabled-static-white-background-color", "--spectrum-disabled-static-white-border-color", "--spectrum-disabled-static-white-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-perspective", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -224,9 +200,6 @@ "--spectrum-gray-25", "--spectrum-gray-300", "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-icon-block-size", @@ -235,15 +208,6 @@ "--spectrum-negative-background-color-down", "--spectrum-negative-background-color-hover", "--spectrum-negative-background-color-key-focus", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-200", - "--spectrum-negative-color-300", - "--spectrum-negative-color-900", - "--spectrum-negative-content-color-default", - "--spectrum-negative-content-color-down", - "--spectrum-negative-content-color-hover", - "--spectrum-negative-content-color-key-focus", "--spectrum-neutral-background-color-default", "--spectrum-neutral-background-color-down", "--spectrum-neutral-background-color-hover", @@ -252,10 +216,6 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", @@ -284,110 +244,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-button-background-color-default", - "--system-button-background-color-disabled", - "--system-button-background-color-down", - "--system-button-background-color-focus", - "--system-button-background-color-hover", - "--system-button-border-color-default", - "--system-button-border-color-disabled", - "--system-button-border-color-down", - "--system-button-border-color-focus", - "--system-button-border-color-hover", - "--system-button-primary-content-color-default", - "--system-button-primary-content-color-down", - "--system-button-primary-content-color-focus", - "--system-button-primary-content-color-hover", - "--system-button-primary-outline-background-color-down", - "--system-button-primary-outline-background-color-focus", - "--system-button-primary-outline-background-color-hover", - "--system-button-secondary-background-color-default", - "--system-button-secondary-background-color-down", - "--system-button-secondary-background-color-focus", - "--system-button-secondary-background-color-hover", - "--system-button-secondary-outline-background-color-down", - "--system-button-secondary-outline-background-color-focus", - "--system-button-secondary-outline-background-color-hover", - "--system-button-secondary-outline-border-color-default", - "--system-button-secondary-outline-border-color-down", - "--system-button-selected-background-color-default", - "--system-button-selected-background-color-down", - "--system-button-selected-background-color-focus", - "--system-button-selected-background-color-hover", - "--system-button-static-black-background-color-default", - "--system-button-static-black-background-color-down", - "--system-button-static-black-background-color-focus", - "--system-button-static-black-background-color-hover", - "--system-button-static-black-content-color-default", - "--system-button-static-black-content-color-down", - "--system-button-static-black-content-color-focus", - "--system-button-static-black-content-color-hover", - "--system-button-static-black-outline-background-color-default", - "--system-button-static-black-outline-background-color-down", - "--system-button-static-black-outline-background-color-focus", - "--system-button-static-black-outline-background-color-hover", - "--system-button-static-black-outline-border-color-default", - "--system-button-static-black-outline-border-color-down", - "--system-button-static-black-outline-border-color-focus", - "--system-button-static-black-outline-border-color-hover", - "--system-button-static-black-outline-content-color-default", - "--system-button-static-black-outline-content-color-down", - "--system-button-static-black-outline-content-color-focus", - "--system-button-static-black-outline-content-color-hover", - "--system-button-static-black-secondary-background-color-default", - "--system-button-static-black-secondary-background-color-down", - "--system-button-static-black-secondary-background-color-focus", - "--system-button-static-black-secondary-background-color-hover", - "--system-button-static-black-secondary-content-color-default", - "--system-button-static-black-secondary-content-color-down", - "--system-button-static-black-secondary-content-color-focus", - "--system-button-static-black-secondary-content-color-hover", - "--system-button-static-black-secondary-outline-background-color-default", - "--system-button-static-black-secondary-outline-background-color-down", - "--system-button-static-black-secondary-outline-background-color-focus", - "--system-button-static-black-secondary-outline-background-color-hover", - "--system-button-static-black-secondary-outline-border-color-default", - "--system-button-static-black-secondary-outline-border-color-down", - "--system-button-static-black-secondary-outline-border-color-focus", - "--system-button-static-black-secondary-outline-border-color-hover", - "--system-button-static-white-background-color-default", - "--system-button-static-white-background-color-down", - "--system-button-static-white-background-color-focus", - "--system-button-static-white-background-color-hover", - "--system-button-static-white-content-color-default", - "--system-button-static-white-content-color-down", - "--system-button-static-white-content-color-focus", - "--system-button-static-white-content-color-hover", - "--system-button-static-white-outline-background-color-default", - "--system-button-static-white-outline-background-color-down", - "--system-button-static-white-outline-background-color-focus", - "--system-button-static-white-outline-background-color-hover", - "--system-button-static-white-outline-border-color-default", - "--system-button-static-white-outline-border-color-down", - "--system-button-static-white-outline-border-color-focus", - "--system-button-static-white-outline-border-color-hover", - "--system-button-static-white-outline-content-color-default", - "--system-button-static-white-outline-content-color-down", - "--system-button-static-white-outline-content-color-focus", - "--system-button-static-white-outline-content-color-hover", - "--system-button-static-white-secondary-background-color-default", - "--system-button-static-white-secondary-background-color-down", - "--system-button-static-white-secondary-background-color-focus", - "--system-button-static-white-secondary-background-color-hover", - "--system-button-static-white-secondary-content-color-default", - "--system-button-static-white-secondary-content-color-down", - "--system-button-static-white-secondary-content-color-focus", - "--system-button-static-white-secondary-content-color-hover", - "--system-button-static-white-secondary-outline-background-color-default", - "--system-button-static-white-secondary-outline-background-color-down", - "--system-button-static-white-secondary-outline-background-color-focus", - "--system-button-static-white-secondary-outline-background-color-hover", - "--system-button-static-white-secondary-outline-border-color-default", - "--system-button-static-white-secondary-outline-border-color-down", - "--system-button-static-white-secondary-outline-border-color-focus", - "--system-button-static-white-secondary-outline-border-color-hover" - ], "passthroughs": [ "--mod-progress-circle-position", "--mod-progress-circle-thickness", @@ -409,6 +265,7 @@ "--highcontrast-button-content-color-disabled", "--highcontrast-button-content-color-down", "--highcontrast-button-content-color-focus", - "--highcontrast-button-content-color-hover" + "--highcontrast-button-content-color-hover", + "--highcontrast-button-focus-ring-color" ] } diff --git a/components/button/index.css b/components/button/index.css index cbddb4e2ec1..73708dafb85 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -12,184 +12,153 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-Button { - --spectrum-button-sized-height: var(--spectrum-component-height-100); - --spectrum-button-sized-font-size: var(--spectrum-font-size-100); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); + + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-height: var(--spectrum-component-height-100); + + --spectrum-button-border-radius: calc(var(--spectrum-button-height) / 2); + --spectrum-button-border-width: var(--spectrum-border-width-200); + + /* @todo set line-height using font size specific line-height tokens when they are finalized along with the new variable font. */ + --spectrum-button-line-height: 1.2; + --spectrum-button-font-weight: var(--spectrum-bold-font-weight); + --spectrum-button-font-size: var(--spectrum-font-size-100); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + + --mod-progress-circle-position: absolute; + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + + &.spectrum-Button--iconOnly { + --spectrum-button-border-radius: var(--spectrum-corner-radius-full); + } } .spectrum-Button--sizeS { - --spectrum-button-sized-height: var(--spectrum-component-height-75); - --spectrum-button-sized-font-size: var(--spectrum-font-size-75); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-small); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-height: var(--spectrum-component-height-75); + + --spectrum-button-font-size: var(--spectrum-font-size-75); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); + + &.spectrum-Button--iconOnly { + --spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + } } .spectrum-Button--sizeL { - --spectrum-button-sized-height: var(--spectrum-component-height-200); - --spectrum-button-sized-font-size: var(--spectrum-font-size-200); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-large); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-height: var(--spectrum-component-height-200); + + --spectrum-button-font-size: var(--spectrum-font-size-200); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); } .spectrum-Button--sizeXL { - --spectrum-button-sized-height: var(--spectrum-component-height-300); - --spectrum-button-sized-font-size: var(--spectrum-font-size-300); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-height: var(--spectrum-component-height-300); + + --spectrum-button-font-size: var(--spectrum-font-size-300); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); } -/* default for all buttons */ +/* Variants and colors */ .spectrum-Button { - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - &.is-selected { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - - &.spectrum-Button--emphasized { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } + &.spectrum-Button--outline { + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); } + /* ---- Accent ---- */ + /* Also shows as the default when a variant class is not used. */ + &, &.spectrum-Button--accent { --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-border-color-disabled: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); - --spectrum-button-background-color-down: var(--spectrum-accent-color-300); - --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); - - --spectrum-button-border-color-default: var(--spectrum-accent-color-900); - --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } } + /* ---- Negative ---- */ &.spectrum-Button--negative { --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); - --spectrum-button-background-color-down: var(--spectrum-negative-color-300); - --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); - - --spectrum-button-border-color-default: var(--spectrum-negative-color-900); - --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } } + /* ---- Primary ---- */ &.spectrum-Button--primary { + --spectrum-button-content-color-default: var(--spectrum-gray-25); + --spectrum-button-content-color-hover: var(--spectrum-gray-25); + --spectrum-button-content-color-down: var(--spectrum-gray-25); + --spectrum-button-content-color-focus: var(--spectrum-gray-25); + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-border-color-disabled: transparent; &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + --spectrum-button-border-color-default: var(--spectrum-gray-800); --spectrum-button-border-color-hover: var(--spectrum-gray-900); --spectrum-button-border-color-down: var(--spectrum-gray-900); @@ -199,246 +168,249 @@ --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); } } + /* ---- Secondary ---- */ &.spectrum-Button--secondary { - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-border-color-disabled: transparent; + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); &.spectrum-Button--outline { - --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); --spectrum-button-border-color-default: var(--spectrum-gray-300); --spectrum-button-border-color-hover: var(--spectrum-gray-400); + --spectrum-button-border-color-down: var(--spectrum-gray-400); --spectrum-button-border-color-focus: var(--spectrum-gray-400); - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); } } - &.spectrum-Button--quiet { - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); + /* ---- Static White ---- */ + &.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-border-color-disabled: transparent; - } + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); - &.spectrum-Button--staticBlack, - &.spectrum-Button--staticWhite { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-border-color-disabled: transparent; + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - &.is-selected { - /* @deprecated previous mapping for --mod-button-static-content-color was applied to the is-selected state */ - --mod-button-content-color-default: var(--mod-button-static-content-color); - --mod-button-content-color-hover: var(--mod-button-static-content-color); - --mod-button-content-color-down: var(--mod-button-static-content-color); - --mod-button-content-color-focus: var(--mod-button-static-content-color); + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-button-border-color-disabled: transparent; + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-background-color-disabled: var(--spectrum-transparent-white-25); + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); } &.spectrum-Button--secondary { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - --spectrum-button-border-color-disabled: transparent; + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); &.spectrum-Button--outline { - --spectrum-button-background-color-disabled: transparent; + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); } } - - &.spectrum-Button--quiet { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-border-color-disabled: transparent; - } } - &.spectrum-Button--staticWhite { - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + /* ---- Static Black ---- */ + &.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - &.spectrum-Button--outline { - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - } + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); - &.spectrum-Button--secondary { - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - } - } + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - &.spectrum-Button--staticBlack { - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); &.spectrum-Button--outline { - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-background-color-disabled: var(--spectrum-transparent-black-25); --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); } &.spectrum-Button--secondary { - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - } - } + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); - &.spectrum-Button--quiet, - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-disabled: transparent; + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + } + } } } .spectrum-Button { - --spectrum-button-height: var(--mod-button-height, var(--spectrum-button-sized-height)); - --spectrum-button-min-width: var(--mod-button-min-width, calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier))); - - --spectrum-button-line-height: var(--mod-button-line-height, 1.2); /* Hack to keep buttons at 32px */ - --spectrum-button-font-size: var(--mod-button-font-size, var(--spectrum-button-sized-font-size)); - --spectrum-button-padding-label-to-icon: var(--mod-button-padding-label-to-icon, var(--spectrum-button-sized-padding-label-to-icon)); - - --spectrum-button-edge-to-visual: var(--mod-button-edge-to-visual, var(--spectrum-button-sized-edge-to-visual)); - --spectrum-button-edge-to-visual-only: var(--mod-button-edge-to-visual-only, var(--spectrum-button-sized-edge-to-visual-only)); - --spectrum-button-edge-to-text: var(--mod-button-edge-to-text, var(--spectrum-button-sized-edge-to-text)); - - --spectrum-button-top-to-text: var(--mod-button-top-to-text, var(--spectrum-button-sized-top-to-text)); - --spectrum-button-bottom-to-text: var(--mod-button-bottom-to-text, var(--spectrum-button-sized-bottom-to-text)); - --spectrum-button-top-to-icon: var(--mod-button-top-to-icon, var(--spectrum-button-sized-top-to-icon)); - - --spectrum-button-focus-ring-thickness: var(--mod-button-focus-ring-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-button-focus-indicator-color: var(--mod-button-focus-ring-color, var(--spectrum-focus-indicator-color)); - - --spectrum-button-animation-duration: var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)); - --spectrum-button-border-width: var(--mod-button-border-width, var(--spectrum-border-width-200)); - - --spectrum-button-focus-ring-gap: var(--mod-focus-indicator-gap, var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))); - --spectrum-button-border-radius: var(--mod-button-border-radius, calc(var(--spectrum-button-height) / 2)); - - /* @passthrough -- align the progress circle in the button */ - --mod-progress-circle-position: absolute; - @extend %spectrum-BaseButton; - @extend %spectrum-ButtonWithFocusRing; - border-radius: var(--spectrum-button-border-radius); - border-width: var(--spectrum-button-border-width); + border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); + border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); border-style: solid; - font-size: var(--spectrum-button-font-size); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); - gap: var(--spectrum-button-padding-label-to-icon); + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight)); + gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); max-inline-size: var(--mod-button-max-inline-size, none); - min-inline-size: var(--spectrum-button-min-width); - min-block-size: var(--spectrum-button-height); + min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); + min-block-size: var(--mod-button-height, var(--spectrum-button-height)); - /* Start with text-only padding */ padding-block: 0; - padding-inline: var(--spectrum-button-edge-to-text); + padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); position: relative; + background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); + border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + transition: + border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; + margin-block: var(--mod-button-margin-block); margin-inline-end: var(--mod-button-margin-right); margin-inline-start: var(--mod-button-margin-left); - background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); - border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + .spectrum-Icon { + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ + --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - /* let staticColor variants inherit their color */ - color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit))); - transition: - border var(--spectrum-button-animation-duration, 130ms) linear, - color var(--spectrum-button-animation-duration, 130ms) linear, - background-color var(--spectrum-button-animation-duration, 130ms) linear; + margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); - &.spectrum-Button--outline { - background-color: transparent; + margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); + color: inherit; + flex-shrink: 0; + align-self: flex-start; } + /* Focus indicator */ &::after { + content: ""; + display: block; position: absolute; inset: 0; - margin: var(--mod-button-focus-ring-border-radius, calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1)); - transition: box-shadow var(--spectrum-button-animation-duration) ease-in-out; + margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); + border-radius: var(--mod-button-focus-ring-border-radius, calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)))); + transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; pointer-events: none; - content: ""; + } + + &:focus-visible, + &.is-focused { + box-shadow: none; + outline: none; - /* correct focus indicator radius for t-shirt sizing */ - border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-focus-indicator-gap)); + &::after { + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))); + } + } + + /* States and interaction */ + &:hover, + &:active { + box-shadow: none; } &:hover { background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); - box-shadow: none; } &:focus-visible { background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); - - /* Remove the default focus outline */ - box-shadow: none; - outline: none; - - &::after { - box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color); - } - } - - &:focus-visible, - &.is-focused { - &::after { - box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color); - } } &:active { background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); - box-shadow: none; - } - - &:hover, - &:active { - box-shadow: none; + transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:disabled, @@ -450,51 +422,19 @@ color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); } - .spectrum-Icon { - /* Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))); - - margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - } - - .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; - } - } - .spectrum-Icon, .spectrum-Button-label { visibility: visible; opacity: 1; - transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; } .spectrum-ProgressCircle { visibility: hidden; opacity: 0; transition: - opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out, - visibility 0ms linear var(--spectrum-button-animation-duration, 130ms); + opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, + visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); } &[pending], @@ -506,49 +446,16 @@ visibility: hidden; opacity: 0; transition: - opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out, - visibility 0ms linear var(--spectrum-button-animation-duration, 130ms); + opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, + visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); } .spectrum-ProgressCircle { visibility: visible; opacity: 1; - transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out; - } - } - - .spectrum-Icon { - /* Any block-size difference between the intended workflow icon size and actual icon used. - Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ - --_icon-size-difference: max(0px, calc(var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)))); - - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + (var(--_icon-size-difference, 0px) / 2)))); - - margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text)); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width)); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; } } - - .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); - } } a.spectrum-Button { @@ -557,81 +464,78 @@ a.spectrum-Button { .spectrum-Button-label { @extend %spectrum-ButtonLabel; - padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width)); - padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width)); - line-height: var(--spectrum-button-line-height); + padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); align-self: start; text-align: var(--mod-button-text-align, center); +} - /* Disable button label wrap */ - .spectrum-Button--noWrap & { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +/* Disable button label wrap */ +.spectrum-Button--noWrap .spectrum-Button-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.spectrum-Button .spectrum-Icon + .spectrum-Button-label { + text-align: var(--mod-button-text-align-with-icon, start); +} + +/* Icon only variant */ +.spectrum-Button.spectrum-Button--iconOnly { + min-inline-size: unset; + padding: var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)); + + .spectrum-Icon { + align-self: center; + margin-inline-start: 0; + margin-block-start: 0; } } -/* Windows High Contrast Mode */ +/* Forced colors / high contrast mode */ @media (forced-colors: active) { .spectrum-Button { - --highcontrast-button-content-color-default: ButtonText; - --highcontrast-button-content-color-hover: ButtonText; - --highcontrast-button-content-color-focus: ButtonText; - --highcontrast-button-content-color-down: ButtonText; - --highcontrast-button-content-color-disabled: GrayText; - --highcontrast-button-border-color-default: ButtonBorder; --highcontrast-button-border-color-hover: ButtonBorder; --highcontrast-button-border-color-focus: ButtonBorder; --highcontrast-button-border-color-down: ButtonBorder; + --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; - - --highcontrast-button-background-color-default: ButtonFace; - --highcontrast-button-background-color-hover: ButtonFace; - --highcontrast-button-background-color-down: ButtonFace; - --highcontrast-button-background-color-focus: ButtonFace; --highcontrast-button-background-color-disabled: ButtonFace; /* @passthrough start -- progress circle highcontrast overrides */ --mod-progress-circle-track-border-color: ButtonText; --mod-progress-circle-track-border-color-over-background: ButtonText; --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - /* @passthrough end */ - --spectrum-button-animation-duration: 0s; + --highcontrast-button-focus-ring-color: ButtonText; - .spectrum-Button-label { - forced-color-adjust: none; + &:focus-visible { + &::after { + /* Make sure the box-shadow used for the focus indicator is displayed. */ + forced-color-adjust: none; + } } - &:focus-visible::after { - forced-color-adjust: none; - box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText; - } + &.spectrum-Button--accent, + &:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) { + /* The accent fill variant looks different than the other buttons. + It inverts the background and content colors. */ + --highcontrast-button-background-color-default: ButtonText; + --highcontrast-button-content-color-default: ButtonFace; - &.spectrum-Button--accent { - &.spectrum-Button--fill { - --highcontrast-button-background-color-default: ButtonText; - --highcontrast-button-background-color-hover: Highlight; - --highcontrast-button-background-color-down: Highlight; - --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-background-color-disabled: ButtonFace; - - --highcontrast-button-content-color-default: ButtonFace; - --highcontrast-button-content-color-hover: HighlightText; - --highcontrast-button-content-color-down: HighlightText; - --highcontrast-button-content-color-focus: HighlightText; - - --highcontrast-button-border-color-default: ButtonText; - --highcontrast-button-border-color-hover: Highlight; - --highcontrast-button-border-color-focus: Highlight; - --highcontrast-button-border-color-down: Highlight; - } - } + --highcontrast-button-background-color-hover: Highlight; + --highcontrast-button-background-color-down: Highlight; + --highcontrast-button-background-color-focus: Highlight; + + --highcontrast-button-content-color-hover: HighlightText; + --highcontrast-button-content-color-down: HighlightText; + --highcontrast-button-content-color-focus: HighlightText; - &.spectrum-Button--staticWhite { - &.spectrum-Button--accent { - --highcontrast-button-content-color-disabled: GrayText; + .spectrum-Button-label { + forced-color-adjust: none; } } } diff --git a/components/button/package.json b/components/button/package.json index 8b2946cfc26..8bd517231c9 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/button", - "version": "14.1.6", + "version": "15.0.0-next.2", "description": "The Spectrum CSS button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/progresscircle": ">=6.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -41,10 +41,10 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/commons": "12.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/progresscircle": "6.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 2de4d54053b..4f3b09d5928 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -1,5 +1,5 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -93,9 +93,22 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=707-2774", }, + html: { + root: "#render-root" + }, + downState: { + selectors: [".spectrum-Button:not(:disabled)"], + }, packageJson, metadata, + status: { + type: "migrated", + }, }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = ButtonGroups.bind({}); @@ -307,6 +320,8 @@ DisableWrapping.tags = ["!dev"]; DisableWrapping.storyName = "Text overflow - disabled text wrap"; DisableWrapping.args = { variant: "primary", + label: "Be a premium member", + noWrap: true, }; DisableWrapping.parameters = { diff --git a/components/button/stories/button.test.js b/components/button/stories/button.test.js index bdc6ee37996..16af7a2fe3a 100644 --- a/components/button/stories/button.test.js +++ b/components/button/stories/button.test.js @@ -60,8 +60,8 @@ const ButtonIconGroup = (args, context) => Container({ testHeading: "UI icon (larger)", content: Template({ ...args, - // UI icon that is larger than workflow sizing: - iconName: "ArrowDown600", + // Largest UI icon from UI icon set: + iconName: "Cross600", iconSet: "ui", }, context), }, @@ -109,8 +109,6 @@ export const ButtonGroups = Variants({ customStyles: { "max-inline-size": "480px", }, - iconName: "Edit", - iconSet: "workflow", label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.", withStates: false, }, @@ -120,8 +118,6 @@ export const ButtonGroups = Variants({ customStyles: { "max-inline-size": "120px", }, - iconName: "Edit", - iconSet: "workflow", label: "Be a premium member", noWrap: true, withStates: false, diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 16e259bd86f..a910cc0ac37 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -1,6 +1,6 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Button", @@ -92,15 +89,12 @@ export const Template = ({ Icon({ iconName, setName: iconSet, size }, context) )} ${when(isPending, () => - ProgressCircle( - { - size: "s", - testId: "progress-circle", - staticColor, - isIndeterminate: true, - }, - context - ) + InfieldProgressCircle({ + size: size, + staticColor, + isIndeterminate: true, + testId: "infield-progress-circle" + }, context) )} </button> `; @@ -187,16 +181,12 @@ export const TextWrapTemplate = (args, context = {}) => Container({ ${Template({ ...args, customStyles: {}, - label: "Be a premium member", - noWrap: true, }, context)} ${Template({ ...args, customStyles: { "max-inline-size": "100%", }, - label: "Be a premium member", - noWrap: true, }, context)} ${Template({ ...args, @@ -205,8 +195,6 @@ export const TextWrapTemplate = (args, context = {}) => Container({ }, iconName: "Star", iconSet: "workflow", - label: "Be a premium member", - noWrap: true, }, context)} `, }, context); diff --git a/components/button/themes/express.css b/components/button/themes/express.css deleted file mode 100644 index 1b4b5618ed8..00000000000 --- a/components/button/themes/express.css +++ /dev/null @@ -1,37 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - } - } -} diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css deleted file mode 100644 index 1275f3fd45b..00000000000 --- a/components/button/themes/spectrum-two.css +++ /dev/null @@ -1,173 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - } - - &.spectrum-Button--primary { - --spectrum-button-content-color-default: var(--spectrum-gray-25); - --spectrum-button-content-color-hover: var(--spectrum-gray-25); - --spectrum-button-content-color-down: var(--spectrum-gray-25); - --spectrum-button-content-color-focus: var(--spectrum-gray-25); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-100); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-100); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-100); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-down: var(--spectrum-gray-400); - } - } - - /* static white: double the selector, double the fun (specificity...) */ - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); - - --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); - - --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); - } - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); - - --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); - - --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); - } - } - } - } -} diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css deleted file mode 100644 index 9f9dc03cd92..00000000000 --- a/components/button/themes/spectrum.css +++ /dev/null @@ -1,148 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-75); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-Button--primary { - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-down: var(--spectrum-gray-500); - } - } - - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } - - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - } - } - } - } -} diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md index 70e37339222..e31a03e099a 100644 --- a/components/buttongroup/CHANGELOG.md +++ b/components/buttongroup/CHANGELOG.md @@ -1,5 +1,19 @@ # Change log +## 10.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/button@15.0.0-next.0 + ## 9.1.0 ### Minor Changes @@ -186,6 +200,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.2.5 🗓 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.2.4...@spectrum-css/buttongroup@6.2.5) + **Note:** Version bump only for package @spectrum-css/buttongroup ## 6.2.4 @@ -241,6 +256,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.13 🗓 2023-11-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.12...@spectrum-css/buttongroup@6.1.13) + **Note:** Version bump only for package @spectrum-css/buttongroup ## 6.1.12 @@ -294,6 +310,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.4 🗓 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.3...@spectrum-css/buttongroup@6.1.4) + **Note:** Version bump only for package @spectrum-css/buttongroup ## 6.1.3 @@ -351,6 +368,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.59 🗓 2023-08-03 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.58...@spectrum-css/buttongroup@6.0.59) + **Note:** Version bump only for package @spectrum-css/buttongroup ## 6.0.58 diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 38d29f26e39..04dc22bce0f 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" ], "modifiers": [ + "--mod-buttongroup-flex-wrap", "--mod-buttongroup-justify-content", "--mod-buttongroup-spacing", "--mod-buttongroup-spacing-horizontal", @@ -19,7 +20,6 @@ "--spectrum-buttongroup-spacing" ], "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index 05019824787..0d65d39c0f2 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -35,7 +35,7 @@ .spectrum-ButtonGroup { display: var(--spectrum-buttongroup-display); flex-direction: var(--spectrum-buttongroup-flex-direction); - flex-wrap: wrap; + flex-wrap: var(--mod-buttongroup-flex-wrap, wrap); gap: var(--spectrum-buttongroup-spacing); justify-content: var(--spectrum-buttongroup-justify-content); diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index f47d038b86f..d13426a7522 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/buttongroup", - "version": "9.1.0", + "version": "10.0.0-next.1", "description": "The Spectrum CSS buttongroup component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.6", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index ba7e125de76..ae0cab736cb 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -64,7 +64,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = ButtonGroup.bind({}); @@ -74,7 +78,7 @@ Default.tags = ["!autodocs"]; // ********* DOCS ONLY ********* // /** - * Default spacing for Medium, Large, and Extra Large t-shirt sizes. + * Default horizontal spacing for when using medium, large, and extra large buttons. */ export const Horizontal = Template.bind({}); Horizontal.tags = ["!dev"]; @@ -87,7 +91,7 @@ Horizontal.parameters = { }; /** - * Spacing for the Small t-shirt size. + * Horizontal spacing for the small t-shirt size. Should be used with small buttons. */ export const HorizontalSmall = Template.bind({}); HorizontalSmall.tags = ["!dev"]; @@ -102,7 +106,7 @@ HorizontalSmall.parameters = { }; /** - * Default spacing for Medium, Large, and Extra Large t-shirt sizes + * Default vertical spacing for when using medium, large, and extra large buttons. */ export const Vertical = ButtonGroup.bind({}); Vertical.tags = ["!dev"]; @@ -117,7 +121,7 @@ Vertical.parameters = { }; /** - * Spacing for the Small t-shirt size. + * Vertical spacing for the small t-shirt size. Should be used with small buttons. */ export const VerticalSmall = Template.bind({}); VerticalSmall.tags = ["!dev"]; diff --git a/components/calendar/CHANGELOG.md b/components/calendar/CHANGELOG.md index 0cc62e26aa8..7bd3c0c7be8 100644 --- a/components/calendar/CHANGELOG.md +++ b/components/calendar/CHANGELOG.md @@ -1,5 +1,19 @@ # Change log +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 676c81a041f..c4901c2be46 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -176,7 +176,6 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight" ], - "system-theme": ["--system-calendar-day-background-color-selected-disabled"], "passthroughs": [ "--mod-actionbutton-content-color-default", "--mod-actionbutton-edge-to-text", diff --git a/components/calendar/index.css b/components/calendar/index.css index 2ca1bc289aa..68b3c73e049 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Calendar { + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); --spectrum-calendar-day-border-size: var(--mod-calendar-day-border-size, var(--spectrum-border-width-200)); @@ -48,6 +48,7 @@ --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); @@ -170,8 +171,7 @@ .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - /* @passthrough start */ - /* Mimic the placement and sizing of the dates in the grid below */ + /* @passthrough start -- mimic the placement and sizing of the dates in the grid below */ --mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding); --mod-actionbutton-min-width: var(--spectrum-calendar-day-width); --mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color); diff --git a/components/calendar/package.json b/components/calendar/package.json index 7d4feba2a22..8da5722e5c8 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/calendar", - "version": "7.1.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS calendar component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index 19c70fe9395..863f5e8d113 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -8,9 +8,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Calendar", diff --git a/components/calendar/themes/express.css b/components/calendar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/calendar/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css deleted file mode 100644 index b14c7134359..00000000000 --- a/components/calendar/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); - } -} diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css deleted file mode 100644 index 368d50d51e8..00000000000 --- a/components/calendar/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-200-rgb), 0.4); - } -} diff --git a/components/card/CHANGELOG.md b/components/card/CHANGELOG.md index a406395a6c6..ad108a23c11 100644 --- a/components/card/CHANGELOG.md +++ b/components/card/CHANGELOG.md @@ -1,5 +1,68 @@ # Change log +## 12.0.0-next.2 + +### Major Changes + +- [#3669](https://github.com/adobe/spectrum-css/pull/3669) [`87d7d99`](https://github.com/adobe/spectrum-css/commit/87d7d99260e758e697668cc17962b0b36d075c65) Thanks [@castastrophe](https://github.com/castastrophe)! + +Previously: + +```css +.spectrum-Card.is-selected::before { + background-color: rgba( + var( + --mod-card-selected-background-color-rgb, + var(--spectrum-card-selected-background-color-rgb) + ), + var(--spectrum-card-selected-background-opacity) + ); +} +``` + +Styles now use `--spectrum-card-selection-background-color` which maps to a transparent global property of `--spectrum-transparent-(black|white)-600` depending on color context. + +Updated: + +```css +.spectrum-Card.is-selected::before { + background-color: var( + --mod-card-background-color-selected, + var(--spectrum-card-selection-background-color) + ); +} +``` + +#### Removed variants + +Removed the quiet variant which is no longer supported in Spectrum 2. + +#### Removed/replaced properties + +- `--mod-card-selected-background-color-rgb`. Use `--mod-card-background-color-selected` to override the selected background color. +- `--mod-card-content-margin-top-quiet`. Use `--mod-card-content-margin-top` with appropriate selectors to override. +- `--mod-card-minimum-width-quiet`. Use `--mod-card-minimum-width` with appropriate selectors to override. +- `--mod-card-actions-background-color-rgb`. No replacement, using token value `--spectrum-card-selection-background-color` directly. +- `--mod-card-actions-background-color-opacity`. No replacement, using token value `--spectrum-card-selection-background-color` directly. + +## 12.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/asset@8.0.0-next.0 + - @spectrum-css/typography@9.0.0-next.0 + +## 12.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/actionbutton@8.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 + ## 11.1.0 ### Minor Changes diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 54eb899211d..8fc5a6b28df 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -22,23 +22,6 @@ ".spectrum-Card--horizontal .spectrum-Card-preview", ".spectrum-Card--horizontal .spectrum-Card-title", ".spectrum-Card--horizontal:hover .spectrum-Card-preview", - ".spectrum-Card--quiet", - ".spectrum-Card--quiet .spectrum-Card-body", - ".spectrum-Card--quiet .spectrum-Card-footer", - ".spectrum-Card--quiet .spectrum-Card-preview", - ".spectrum-Card--quiet .spectrum-Card-preview:after", - ".spectrum-Card--quiet .spectrum-Card-preview:before", - ".spectrum-Card--quiet.is-drop-target", - ".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview", - ".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before", - ".spectrum-Card--quiet.is-focused .spectrum-Card-preview:after", - ".spectrum-Card--quiet.is-focused:after", - ".spectrum-Card--quiet.is-selected .spectrum-Card-preview", - ".spectrum-Card--quiet.is-selected .spectrum-Card-preview:before", - ".spectrum-Card--quiet:before", - ".spectrum-Card--quiet:focus .spectrum-Card-preview:after", - ".spectrum-Card--quiet:focus:after", - ".spectrum-Card--quiet:hover .spectrum-Card-preview", ".spectrum-Card-actionButton", ".spectrum-Card-actions", ".spectrum-Card-body", @@ -60,7 +43,6 @@ ".spectrum-Card.is-selected .spectrum-Card-quickActions", ".spectrum-Card.is-selected:before", ".spectrum-Card.spectrum-Card--gallery", - ".spectrum-Card.spectrum-Card--quiet", ".spectrum-Card:after", ".spectrum-Card:before", ".spectrum-Card:focus .spectrum-Card-actions", @@ -75,8 +57,6 @@ ], "modifiers": [ "--mod-animation-duration-100", - "--mod-card-actions-background-color-opacity", - "--mod-card-actions-background-color-rgb", "--mod-card-actions-border-radius", "--mod-card-actions-drop-shadow-blur", "--mod-card-actions-drop-shadow-color", @@ -87,6 +67,7 @@ "--mod-card-animation-duration", "--mod-card-background-color", "--mod-card-background-color-hover", + "--mod-card-background-color-selected", "--mod-card-body-font-color", "--mod-card-body-font-family", "--mod-card-body-font-size", @@ -104,7 +85,6 @@ "--mod-card-border-width", "--mod-card-content-margin-bottom", "--mod-card-content-margin-top", - "--mod-card-content-margin-top-quiet", "--mod-card-corner-radius", "--mod-card-divider-color", "--mod-card-focus-indicator-color", @@ -117,7 +97,6 @@ "--mod-card-horizontal-body-padding", "--mod-card-horizontal-preview-padding", "--mod-card-minimum-width", - "--mod-card-minimum-width-quiet", "--mod-card-preview-background-color", "--mod-card-preview-background-color-hover", "--mod-card-preview-border-width-selected", @@ -135,8 +114,6 @@ "--mod-overlay-animation-duration" ], "component": [ - "--spectrum-card-actions-background-color-opacity", - "--spectrum-card-actions-background-color-rgb", "--spectrum-card-actions-border-radius", "--spectrum-card-actions-drop-shadow-blur", "--spectrum-card-actions-drop-shadow-color", @@ -155,6 +132,7 @@ "--spectrum-card-body-spacing", "--spectrum-card-border-color", "--spectrum-card-border-color-hover", + "--spectrum-card-border-color-selected", "--spectrum-card-border-width", "--spectrum-card-content-margin-bottom", "--spectrum-card-content-margin-top", @@ -172,7 +150,7 @@ "--spectrum-card-preview-minimum-height", "--spectrum-card-selected-background-color-rgb", "--spectrum-card-selected-background-opacity", - "--spectrum-card-selection-background-color-opacity", + "--spectrum-card-selection-background-color", "--spectrum-card-selection-background-size", "--spectrum-card-subtitle-padding-right", "--spectrum-card-title-font-color", @@ -202,7 +180,6 @@ "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-thickness", "--spectrum-gray-100", - "--spectrum-gray-100-rgb", "--spectrum-gray-200", "--spectrum-heading-color", "--spectrum-heading-line-height", @@ -215,13 +192,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [ - "--system-card-border-color", - "--system-card-border-color-hover", - "--system-card-divider-color", - "--system-card-preview-background-color", - "--system-card-preview-background-color-hover" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/card/index.css b/components/card/index.css index f56599c17c4..8eeedd3c1b8 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -11,9 +11,15 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Card { + --spectrum-card-border-color: var(--mod-card-border-color, var(--spectrum-gray-100)); + --spectrum-card-border-color-hover: var(--mod-card-border-color-hover, var(--spectrum-gray-200)); + --spectrum-card-border-color-selected: var(--mod-card-border-color-selected, var(--spectrum-blue-700)); + + --spectrum-card-divider-color: var(--mod-card-divider-color, var(--spectrum-gray-200)); + --spectrum-card-preview-background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100))); + --spectrum-card-preview-background-color-hover: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-gray-200))); + /* Default Layout */ --spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color)); --spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400)); @@ -47,9 +53,6 @@ --spectrum-card-actions-size: var(--mod-card-actions-size, var(--spectrum-card-selection-background-size)); --spectrum-card-actions-border-radius: var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100)); - /* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */ - --spectrum-card-actions-background-color-rgb: var(--mod-card-actions-background-color-rgb, var(--spectrum-gray-100-rgb)); - --spectrum-card-actions-background-color-opacity: var(--mod-card-actions-background-color-opacity, var(--spectrum-card-selection-background-color-opacity)); --spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color)); --spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x)); --spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y)); @@ -68,22 +71,10 @@ --spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300)); --spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200)); - &.spectrum-Card--quiet { - --mod-card-minimum-width: var(--mod-card-minimum-width-quiet); - --mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100)); - } - &.spectrum-Card--gallery { --spectrum-card-content-margin-top: var(--spectrum-spacing-100); } - &.is-selected, - &.is-drop-target { - --spectrum-card-border-color: var(--mod-card-border-color-selected, var(--spectrum-blue-700)); - } -} - -.spectrum-Card { position: relative; display: inline-flex; flex-direction: column; @@ -95,7 +86,7 @@ border: var(--spectrum-card-border-width) solid transparent; border-radius: var(--spectrum-card-corner-radius); - border-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + border-color: var(--spectrum-card-border-color); background-color: var(--spectrum-card-background-color); @@ -145,11 +136,16 @@ } &:hover { - --mod-card-border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover)); + --mod-card-border-color: var(--spectrum-card-border-color-hover); } - &.is-selected::before { - background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--spectrum-card-selected-background-opacity)); + &.is-selected { + --mod-card-border-color: var(--spectrum-card-border-color-selected); + + &::before { + /* @deprecated --mod-card-selected-background-color-rgb. Use --mod-card-background-color-selected instead. */ + background-color: var(--mod-card-background-color-selected, var(--spectrum-card-selection-background-color)); + } } &.is-drop-target { @@ -179,7 +175,7 @@ inline-size: var(--spectrum-card-actions-size); block-size: var(--spectrum-card-actions-size); border-radius: var(--spectrum-card-actions-border-radius); - background-color: rgba(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity)); + background-color: var(--spectrum-card-selection-background-color); inset-inline-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width)); inset-block-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width)); @@ -220,8 +216,8 @@ background-size: cover; background-position: center center; - background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color)); - border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + background-color: var(--spectrum-card-preview-background-color); + border-block-end-color: var(--spectrum-card-border-color); } .spectrum-Card .spectrum-Divider { @@ -292,7 +288,7 @@ color: var(--spectrum-card-body-font-color); line-height: var(--spectrum-card-body-line-height); - border-block-start: var(--spectrum-card-border-width) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color)); + border-block-start: var(--spectrum-card-border-width) solid var(--spectrum-card-divider-color); } .spectrum-Card-header { @@ -305,30 +301,6 @@ z-index: 1; } -.spectrum-Card--quiet { - .spectrum-Card-preview { - border: var(--spectrum-card-focus-indicator-width) solid transparent; - } - - &:focus, - &.is-focused { - /* Quiet cards only have the focus indicator around the preview */ - &::after { - border-width: 0; - } - - .spectrum-Card-preview::after { - border-color: var(--spectrum-card-focus-indicator-color); - } - } - - &.is-selected .spectrum-Card-preview { - border: var(--spectrum-card-preview-border-width-selected) solid; - border-color: var(--spectrum-card-border-color); - } -} - -.spectrum-Card--quiet, .spectrum-Card--gallery { --mod-card-border-color-hover: transparent; @@ -344,7 +316,7 @@ .spectrum-Card-preview { border-radius: var(--spectrum-card-corner-radius); - background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color))); + background-color: var(--spectrum-card-preview-background-color); min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height)); inline-size: 100%; flex: 1; @@ -386,7 +358,7 @@ } &:hover .spectrum-Card-preview { - background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))); + background-color: var(--spectrum-card-preview-background-color-hover); } &.is-drop-target { @@ -396,7 +368,7 @@ .spectrum-Card-preview { transition: none; - background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color))); + background-color: var(--spectrum-card-preview-background-color); } .spectrum-Card-preview::before { @@ -424,7 +396,7 @@ flex-direction: row; &:hover .spectrum-Card-preview { - border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover)); + --mod-card-border-color: var(--spectrum-card-border-color-hover); } .spectrum-Card-preview { @@ -440,8 +412,8 @@ border-end-end-radius: 0; padding: var(--spectrum-card-horizontal-preview-padding); - background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color)); - border-color: var(--mod-card-border-color, var(--spectrum-card-border-color)); + background-color: var(--spectrum-card-preview-background-color); + border-color: var(--spectrum-card-border-color); } .spectrum-Card-header, diff --git a/components/card/package.json b/components/card/package.json index f4af0128538..0b366c84171 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/card", - "version": "11.1.0", + "version": "12.0.0-next.2", "description": "The Spectrum CSS card component", "license": "Apache-2.0", "author": "Adobe", @@ -25,13 +25,13 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/asset": ">=7.0.0 <8.0.0", - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/asset": ">=8.0.0-next.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/quickaction": ">=3", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/typography": ">=8.0.0 <9.0.0" + "@spectrum-css/tokens": ">=16.1.0-next.0", + "@spectrum-css/typography": ">=9.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -57,12 +57,12 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/asset": "7.1.0", - "@spectrum-css/checkbox": "10.1.2", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2", - "@spectrum-css/typography": "8.1.0" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/asset": "8.0.0-next.0", + "@spectrum-css/checkbox": "11.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5", + "@spectrum-css/typography": "9.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 2d8147cda37..5afad0c1c20 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -1,7 +1,7 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types"; +import { isFocused, isSelected } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { CardGroup } from "./card.test.js"; @@ -23,7 +23,6 @@ export default { }, control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, }, - isQuiet, isSelected, isFocused, hasActions: { @@ -109,7 +108,6 @@ export default { rootClass: "spectrum-Card", isSelected: false, isFocused: false, - isQuiet: false, isGrid: false, isGallery: false, isDropTarget: false, @@ -131,7 +129,7 @@ export default { }; /** - * Cards can either be standard or quiet style. A standard card includes a cover photo and footer, with buttons and more information. A vertical layout is default for cards, and the recommended default preview size is 2:1. + * A standard card includes a cover photo and footer, with buttons and more information. A vertical layout is default for cards, and the recommended default preview size is 2:1. */ export const Default = CardGroup.bind({}); Default.args = { @@ -176,35 +174,6 @@ Focused.parameters = { }; Focused.storyName = "Default - focused"; -/** - * Quiet card styling is reserved for very simple cards with little metadata. The border of the `.spectrum-Card` element is removed, and additional rounded corners are added to the `.spectrum-Card-preview` container. - */ -export const Quiet = Template.bind({}); -Quiet.args = { - ...Default.args, - showAsset: "image", - image: "example-ava@2x.png", - isQuiet: true, -}; -Quiet.tags = ["!dev"]; -Quiet.parameters = { - chromatic: { disableSnapshot: true }, -}; - -/** A quiet card for a file asset. */ -export const QuietFile = Template.bind({}); -QuietFile.storyName = "Quiet - file"; -QuietFile.args = { - ...Quiet.args, - title: "FileName", - description: "PDF", - showAsset: "file", -}; -QuietFile.tags = ["!dev"]; -QuietFile.parameters = { - chromatic: { disableSnapshot: true }, -}; - /** * A card with a horizontal layout. Horizontal cards always have a square preview, and the image is cropped to fit inside the square. These can only be laid out in a tile grid where every card is the same size. * */ @@ -233,44 +202,6 @@ NoImage.parameters = { chromatic: { disableSnapshot: true }, }; -/** - * A quiet card for a folder asset. - * */ -export const QuietFolder = Quiet.bind({}); -QuietFolder.args = { - title: "Name", - showAsset: "folder", - description: "10/15/18", - isQuiet: true, -}; -QuietFolder.tags = ["!dev"]; -QuietFolder.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietFolder.storyName = "Quiet - folder"; - -export const QuietFocused = Quiet.bind({}); -QuietFocused.args = { - ...Quiet.args, - isFocused: true, -}; -QuietFocused.tags = ["!dev"]; -QuietFocused.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietFocused.storyName = "Quiet - focused"; - -export const QuietSelected = Quiet.bind({}); -QuietSelected.args = { - ...Quiet.args, - isSelected: true, -}; -QuietSelected.tags = ["!dev"]; -QuietSelected.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietSelected.storyName = "Quiet - selected"; - /** * Card preview areas can have any aspect ratio between 4:1 (shortest) and 3:4 (tallest). */ diff --git a/components/card/stories/card.test.js b/components/card/stories/card.test.js index 143d1ad8009..37883aaf287 100644 --- a/components/card/stories/card.test.js +++ b/components/card/stories/card.test.js @@ -21,30 +21,6 @@ export const CardGroup = Variants({ hasQuickAction: false, footer: undefined, }, - { - testHeading: "Quiet", - showAsset: "image", - image: "example-ava@2x.png", - isQuiet: true, - footer: undefined, - }, - { - testHeading: "Quiet file", - title: "FileName", - description: "PDF", - showAsset: "file", - isQuiet: true, - footer: undefined, - }, - { - testHeading: "Quiet folder", - title: "Name", - showAsset: "folder", - description: "10/15/18", - isQuiet: true, - image: undefined, - footer: undefined, - }, { testHeading: "Asset preview", showAsset: "image", diff --git a/components/card/stories/template.js b/components/card/stories/template.js index d1d226c7b0e..0911e3a78d7 100644 --- a/components/card/stories/template.js +++ b/components/card/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Card", @@ -25,7 +22,6 @@ export const Template = ({ isFocused = false, isSelected = false, isHorizontal = false, - isQuiet = false, isGallery = false, isImageFill = false, isGrid = false, @@ -45,7 +41,6 @@ export const Template = ({ [rootClass]: true, "is-selected": isSelected, "is-focused": isFocused, - [`${rootClass}--quiet`]: isQuiet, [`${rootClass}--gallery`]: isGallery, [`${rootClass}--horizontal`]: isHorizontal, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), @@ -65,7 +60,7 @@ export const Template = ({ > ${when(image || showAsset, () => when( - showAsset || (isGallery && image) || isQuiet, + showAsset || (isGallery && image), () => html` <div class=${classMap({ @@ -188,7 +183,7 @@ export const Template = ({ </div>` )} ${when( - footer && !isQuiet && !isHorizontal && !isGallery, + footer && !isHorizontal && !isGallery, () => html` <div class=${classMap({ diff --git a/components/card/themes/express.css b/components/card/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/card/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css deleted file mode 100644 index 2ef275418ee..00000000000 --- a/components/card/themes/spectrum-two.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-100); - --spectrum-card-border-color-hover: var(--spectrum-gray-200); - --spectrum-card-divider-color: var(--spectrum-gray-200); - --spectrum-card-preview-background-color: var(--spectrum-gray-100); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css deleted file mode 100644 index a1906d601bd..00000000000 --- a/components/card/themes/spectrum.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); - --spectrum-card-divider-color: var(--spectrum-gray-300); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); - } -} diff --git a/components/checkbox/CHANGELOG.md b/components/checkbox/CHANGELOG.md index 8e1ef7fc84d..cf531fe409d 100644 --- a/components/checkbox/CHANGELOG.md +++ b/components/checkbox/CHANGELOG.md @@ -1,10 +1,63 @@ # Change log +## 11.0.0-next.2 + +### Major Changes + +- [#3531](https://github.com/adobe/spectrum-css/pull/3531) [`e4556f1`](https://github.com/adobe/spectrum-css/commit/e4556f1ad7443a5ee191b1e79721413e7ba5a83e) Thanks [@aramos-adobe](https://github.com/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` + +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 11.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 + ## 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)! +📝 [#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. @@ -22,8 +75,6 @@ Adds a `::before` pseudo element to properly target the `.spectrum-Checkbox-inpu 📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)! -## New feature - Minified and gzipped outputs available for all compiled CSS assets. ### Patch Changes @@ -212,6 +263,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 8.1.5 diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 695a4df09f6..daf35c48fa3 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -2,86 +2,64 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Checkbox", + ".spectrum-Checkbox .spectrum-Checkbox-box", + ".spectrum-Checkbox .spectrum-Checkbox-box:after", + ".spectrum-Checkbox .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-checkmark", + ".spectrum-Checkbox .spectrum-Checkbox-input", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-input:disabled", ".spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", + ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", + ".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox .spectrum-Checkbox-label", ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark", - ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--sizeL", - ".spectrum-Checkbox--sizeM", - ".spectrum-Checkbox--sizeS", - ".spectrum-Checkbox--sizeXL", - ".spectrum-Checkbox-box", - ".spectrum-Checkbox-box:after", - ".spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input", - ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", - ".spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:disabled", + ".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label", - ".spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox-label", - ".spectrum-Checkbox-label:lang(ja)", - ".spectrum-Checkbox-label:lang(ko)", - ".spectrum-Checkbox-label:lang(zh)", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".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: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", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", + ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.spectrum-Checkbox--emphasized", + ".spectrum-Checkbox.spectrum-Checkbox--sizeL", + ".spectrum-Checkbox.spectrum-Checkbox--sizeS", + ".spectrum-Checkbox.spectrum-Checkbox--sizeXL", ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox:active .spectrum-Checkbox-label", ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:hover .spectrum-Checkbox-label" + ".spectrum-Checkbox:hover .spectrum-Checkbox-label", + ".spectrum-Checkbox:lang(ja)", + ".spectrum-Checkbox:lang(ko)", + ".spectrum-Checkbox:lang(zh)", + ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box", + ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], "modifiers": [ "--mod-checkbox-animation-duration", "--mod-checkbox-border-width", + "--mod-checkbox-bottom-to-text", "--mod-checkbox-checkmark-color", "--mod-checkbox-content-color-default", "--mod-checkbox-content-color-disabled", @@ -94,38 +72,30 @@ "--mod-checkbox-control-color-focus", "--mod-checkbox-control-color-hover", "--mod-checkbox-control-corner-radius", - "--mod-checkbox-control-invalid-color-down", "--mod-checkbox-control-selected-color-default", "--mod-checkbox-control-selected-color-down", - "--mod-checkbox-control-selected-color-focus", "--mod-checkbox-control-selected-color-hover", "--mod-checkbox-control-size", - "--mod-checkbox-emphasized-color-default", - "--mod-checkbox-emphasized-color-down", - "--mod-checkbox-emphasized-color-focus", - "--mod-checkbox-emphasized-color-hover", "--mod-checkbox-focus-indicator-color", "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thinkness", + "--mod-checkbox-focus-indicator-thickness", "--mod-checkbox-font-size", "--mod-checkbox-height", - "--mod-checkbox-invalid-color-default", - "--mod-checkbox-invalid-color-focus", - "--mod-checkbox-invalid-color-hover", "--mod-checkbox-line-height", "--mod-checkbox-line-height-cjk", + "--mod-checkbox-margin-block", "--mod-checkbox-selected-border-width", - "--mod-checkbox-spacing", "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", "--mod-focus-indicator-thickness" ], "component": [ "--spectrum-checkbox-animation-duration", + "--spectrum-checkbox-background-color", "--spectrum-checkbox-border-width", + "--spectrum-checkbox-bottom-to-text", "--spectrum-checkbox-checkmark-color", "--spectrum-checkbox-content-color-default", - "--spectrum-checkbox-content-color-disabled", "--spectrum-checkbox-content-color-down", "--spectrum-checkbox-content-color-focus", "--spectrum-checkbox-content-color-hover", @@ -137,7 +107,6 @@ "--spectrum-checkbox-control-corner-radius", "--spectrum-checkbox-control-selected-color-default", "--spectrum-checkbox-control-selected-color-down", - "--spectrum-checkbox-control-selected-color-focus", "--spectrum-checkbox-control-selected-color-hover", "--spectrum-checkbox-control-size", "--spectrum-checkbox-control-size-extra-large", @@ -160,25 +129,43 @@ "--spectrum-checkbox-line-height", "--spectrum-checkbox-line-height-cjk", "--spectrum-checkbox-selected-border-width", - "--spectrum-checkbox-spacing", + "--spectrum-checkbox-text-font-style", + "--spectrum-checkbox-text-font-weight", "--spectrum-checkbox-text-to-control", + "--spectrum-checkbox-top-to-control", + "--spectrum-checkbox-top-to-control-extra-large", + "--spectrum-checkbox-top-to-control-large", + "--spectrum-checkbox-top-to-control-medium", + "--spectrum-checkbox-top-to-control-small", "--spectrum-checkbox-top-to-text" ], "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", + "--spectrum-accent-content-color-default", + "--spectrum-accent-content-color-down", + "--spectrum-accent-content-color-hover", + "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", + "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-corner-radius-small-size-extra-large", + "--spectrum-corner-radius-small-size-large", + "--spectrum-corner-radius-small-size-medium", + "--spectrum-corner-radius-small-size-small", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -187,40 +174,25 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-50", - "--spectrum-gray-700", - "--spectrum-gray-800", + "--spectrum-gray-25", "--spectrum-line-height-100", "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", "--spectrum-negative-color-900", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-regular-font-weight", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-checkbox-checkmark-color", - "--system-checkbox-control-color-default", - "--system-checkbox-control-color-down", - "--system-checkbox-control-color-focus", - "--system-checkbox-control-color-hover", - "--system-checkbox-control-corner-radius" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-checkbox-background-color-default", "--highcontrast-checkbox-color-default", "--highcontrast-checkbox-color-focus", - "--highcontrast-checkbox-color-hover", "--highcontrast-checkbox-content-color-default", "--highcontrast-checkbox-content-color-down", "--highcontrast-checkbox-content-color-focus", @@ -229,7 +201,6 @@ "--highcontrast-checkbox-focus-indicator-color", "--highcontrast-checkbox-highlight-color-default", "--highcontrast-checkbox-highlight-color-down", - "--highcontrast-checkbox-highlight-color-focus", "--highcontrast-checkbox-highlight-color-hover" ] } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 3c1a7782398..140581616e8 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* * .spectrum-Checkbox-box::before is the Checkbox "box" * .spectrum-Checkbox-box::after is the focus indicator @@ -20,97 +18,125 @@ .spectrum-Checkbox { /* Color */ + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-25); + --spectrum-checkbox-background-color: var(--spectrum-gray-25); --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-control-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-checkbox-control-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-checkbox-control-color-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); - --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1100); + --spectrum-checkbox-invalid-color-down: var(--spectrum-negative-color-1000); --spectrum-checkbox-invalid-color-focus: var(--spectrum-negative-color-1000); - --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-color-900); - --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-color-1000); - --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-color-1100); - --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-color-1000); + --spectrum-checkbox-emphasized-color-default: var(--spectrum-accent-content-color-default); + --spectrum-checkbox-emphasized-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-checkbox-emphasized-color-down: var(--spectrum-accent-content-color-down); + --spectrum-checkbox-emphasized-color-focus: var(--spectrum-accent-content-color-key-focus); - --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-checkbox-control-selected-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --spectrum-checkbox-control-selected-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-control-selected-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-checkbox-control-selected-color-down: var(--spectrum-neutral-content-color-down); /* Font */ + --spectrum-checkbox-font-size: var(--spectrum-font-size-100); --spectrum-checkbox-line-height: var(--spectrum-line-height-100); --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-checkbox-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-checkbox-text-font-style: var(--spectrum-default-font-style); + /* Size */ + --spectrum-checkbox-height: var(--spectrum-component-height-100); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-medium); --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-checkbox-border-width: var(--spectrum-border-width-200); - --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); --spectrum-checkbox-animation-duration: var(--spectrum-animation-duration-100); -} - -.spectrum-Checkbox, -.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); -} - -.spectrum-Checkbox--sizeS { - --spectrum-checkbox-font-size: var(--spectrum-font-size-75); + --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-medium); - --spectrum-checkbox-height: var(--spectrum-component-height-75); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); - - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); -} + --spectrum-checkbox-selected-border-width: calc(var(--spectrum-checkbox-control-size) / 2); -.spectrum-Checkbox--sizeL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-200); + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-checkbox-line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); + } - --spectrum-checkbox-height: var(--spectrum-component-height-200); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); + &.spectrum-Checkbox--sizeS { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-small); + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); + --spectrum-checkbox-height: var(--spectrum-component-height-75); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-small); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-small); + } - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); -} + &.spectrum-Checkbox--sizeL { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-large); + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); + --spectrum-checkbox-height: var(--spectrum-component-height-200); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-large); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-large); + } -.spectrum-Checkbox--sizeXL { - --spectrum-checkbox-font-size: var(--spectrum-font-size-300); + &.spectrum-Checkbox--sizeXL { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-extra-large); + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); + --spectrum-checkbox-height: var(--spectrum-component-height-300); + --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); + --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-checkbox-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-checkbox-top-to-control: var(--spectrum-checkbox-top-to-control-extra-large); + } - --spectrum-checkbox-height: var(--spectrum-component-height-300); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-extra-large); + &.spectrum-Checkbox--emphasized { + --spectrum-checkbox-control-selected-color-default: var(--spectrum-checkbox-emphasized-color-default); + --spectrum-checkbox-control-selected-color-hover: var(--spectrum-checkbox-emphasized-color-hover); + --spectrum-checkbox-control-selected-color-down: var(--spectrum-checkbox-emphasized-color-down); + } - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-300); + &.is-invalid { + --spectrum-checkbox-control-color-default: var(--spectrum-checkbox-invalid-color-default); + --spectrum-checkbox-control-color-hover: var(--spectrum-checkbox-invalid-color-hover); + --spectrum-checkbox-control-color-down: var(--spectrum-checkbox-invalid-color-down); + --spectrum-checkbox-control-color-focus: var(--spectrum-checkbox-invalid-color-focus); + + --spectrum-checkbox-control-selected-color-default: var(--spectrum-checkbox-invalid-color-default); + --spectrum-checkbox-control-selected-color-hover: var(--spectrum-checkbox-invalid-color-hover); + --spectrum-checkbox-control-selected-color-down: var(--spectrum-checkbox-invalid-color-down); + } } -/* Default Unchecked */ .spectrum-Checkbox { color: var(--highcontrast-checkbox-content-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); - display: inline-flex; align-items: flex-start; - position: relative; - min-block-size: var(--mod-checkbox-height, var(--spectrum-checkbox-height)); max-inline-size: 100%; - vertical-align: top; &:hover { @@ -141,389 +167,260 @@ } } - /* Selected Invalid */ - &.is-invalid { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); - } + &:not(.is-readOnly) { + .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, + &:active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box { + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); } + } - &.is-indeterminate .spectrum-Checkbox-input:focus-visible, - .spectrum-Checkbox-input:focus-visible { - & + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } - } + .spectrum-Checkbox-checkmark, + .spectrum-Checkbox-partialCheckmark { + color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-checkmark-color)); + opacity: 0; + transform: scale(0); - &:hover { - .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))); - } - } + transition: + opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, + transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; } - /* Read-only */ - &.is-readOnly { - .spectrum-Checkbox-input { - cursor: default; - } + .spectrum-Checkbox-partialCheckmark { + display: none; + } - /* Overrides disabled styles */ - .spectrum-Checkbox-input, - .spectrum-Checkbox-input:checked { - &:disabled + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - } + .spectrum-Checkbox-label { + text-align: start; + margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); + margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); + margin-block-end: var(--mod-checkbox-bottom-to-text, var(--spectrum-checkbox-bottom-to-text)); - &:disabled ~ .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))); - } - } + font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); + font-weight: var(--spectrum-checkbox-text-font-weight); + font-style: var(--spectrum-checkbox-text-font-style); + + transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; + + line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); } - /* Indeterminate */ - &.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + /** + * The input is visually hidden (with opacity), and remains accessible using assistive tech. + * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics. + */ + .spectrum-Checkbox-input { + color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); + + /* Remove the margin for input in Firefox and Safari. */ + margin: 0; + + /* Show the overflow for input in Edge. */ + overflow: visible; + + /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ + box-sizing: border-box; + + /* Remove the padding for [type="checkbox"] in IE 10-. */ + padding: 0; + + position: absolute; + inline-size: 100%; + block-size: 100%; + + opacity: 0; + z-index: 1; + + cursor: pointer; + + &:disabled { + cursor: default; + } + + /* Selected */ + &:checked + .spectrum-Checkbox-box { &::before { border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); + background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); } .spectrum-Checkbox-checkmark { - display: none; - } - - .spectrum-Checkbox-partialCheckmark { - display: block; - transform: scale(1); opacity: 1; } } - .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { + /* Focus */ + &:focus-visible + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); + border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); } - } - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before, - .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-control-selected-color-hover, var(--spectrum-checkbox-control-selected-color-hover))); + &::after { + box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thickness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); + margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); } } - } - /* Invalid Indeterminate */ - &.is-invalid.is-indeterminate { - .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-default, var(--spectrum-checkbox-invalid-color-default))); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } + &:focus-visible + .spectrum-Checkbox-label { + color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); } + } - &:hover { - .spectrum-Checkbox-box::before, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); - } + .spectrum-Checkbox-box { + display: flex; + align-items: center; + justify-content: center; - .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-hover, var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))); - } - } - } -} + position: relative; + box-sizing: border-box; + inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + + /* Fix vertical alignment when not wrapping since we're flex-start */ + margin: var(--mod-checkbox-margin-block, var(--spectrum-checkbox-top-to-control)) 0; + flex-grow: 0; + flex-shrink: 0; -/* Emphasized */ -.spectrum-Checkbox--emphasized { - /* Checked and Indeterminate Default States */ - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-default, var(--spectrum-checkbox-emphasized-color-default))); - } - } + border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); + background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); + display: block; + z-index: 0; + content: ""; + box-sizing: border-box; + position: absolute; - /* Hover for Checked and Indeterminate States */ - &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); - } - } - } + inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); + block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - /* Selected and Indeterminate Focus States */ - .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-emphasized-color-focus, var(--spectrum-checkbox-emphasized-color-focus))); + border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); + border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); + border-style: solid; + + transition: + border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, + box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; } - } - /* Selected Invalid Focus State */ - &.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-invalid-color-focus, var(--spectrum-checkbox-invalid-color-focus))); + &::after { + border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); + content: ""; + display: block; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-block-start: 0; + margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); + + transition: + box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, + margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; + + /* force ff to render on the pixel grid */ + transform: translate(0, 0); } } - /* 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, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + /* Indeterminate */ + &.is-indeterminate { + .spectrum-Checkbox-box, .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); + border-color: var(--highcontrast-checkbox-highlight-color-default); + border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); } - } - } - /* Selected and Indeterminate Hover States */ - &:hover { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))); + .spectrum-Checkbox-checkmark { + display: none; + } + + .spectrum-Checkbox-partialCheckmark { + display: block; + transform: scale(1); + opacity: 1; } } } +} - /* Selected and Indeterminate Active States */ - &:active { - &.is-indeterminate .spectrum-Checkbox-box, - &.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-emphasized-color-down, var(--spectrum-checkbox-emphasized-color-down))); - } +/* Invalid state indeterminate override - for default state */ +.spectrum-Checkbox.is-invalid.is-indeterminate { + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); } } - /* Invalid Active State */ - &.is-invalid:active { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-invalid-color-down, var(--spectrum-checkbox-invalid-color-down))); - } + .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-control-color-focus)); } } - /* Focus State */ - &:focus-visible { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, - .spectrum-Checkbox-box { + &:hover { + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); } } } } -.spectrum-Checkbox-label { - text-align: start; - margin-inline-start: var(--mod-checkbox-text-to-control, var(--spectrum-checkbox-text-to-control)); - margin-block-start: var(--mod-checkbox-top-to-text, var(--spectrum-checkbox-top-to-text)); - - font-size: var(--mod-checkbox-font-size, var(--spectrum-checkbox-font-size)); - - /* TODO Use font-weight and font-style tokens */ - /* font-weight: var(--spectrum-checkbox-text-font-weight); */ - /* font-style: var(--spectrum-checkbox-text-font-style); */ - - transition: color var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - - line-height: var(--mod-checkbox-line-height, var(--spectrum-checkbox-line-height)); - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - line-height: var(--mod-checkbox-line-height-cjk, var(--spectrum-checkbox-line-height-cjk)); - } -} - -/** - * The input is visually hidden (with opacity), and remains accessible using assistive tech. - * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics. - */ -.spectrum-Checkbox-input { - color: var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default)); - - /* Change the font styles in all browsers for input. */ - font-family: inherit; - font-size: 100%; - line-height: 1.15; - - /* Remove the margin for input in Firefox and Safari. */ - margin: 0; - - /* Show the overflow for input in Edge. */ - overflow: visible; - - /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ - box-sizing: border-box; - - /* Remove the padding for [type="checkbox"] in IE 10-. */ - padding: 0; - - position: absolute; - inline-size: 100%; - block-size: 100%; - - opacity: 0; - z-index: 1; - - cursor: pointer; - - &:disabled { - cursor: default; - } - - /* Selected */ - &:checked + .spectrum-Checkbox-box { +/* Emphasized state overrides - all configurations at the top apply except for the ones below: indeterminate, indeterminate focused, focused + checked */ +.spectrum-Checkbox--emphasized.is-indeterminate { + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)); - border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); - } - - .spectrum-Checkbox-checkmark { - transform: scale(1); - opacity: 1; + border-color: var(--highcontrast-checkbox-highlight-color-default, var(--spectrum-checkbox-control-selected-color-default)); } } - /* Focus */ - &:focus-visible + .spectrum-Checkbox-box { + &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box { &::before { - border-color: var(--highcontrast-checkbox-color-focus, var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))); + border-color: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); } - - &::after { - forced-color-adjust: none; - box-shadow: 0 0 0 var(--mod-checkbox-focus-indicator-thinkness, var(--spectrum-checkbox-focus-indicator-thickness)) var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - margin: calc(var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)) * -1); - } - } - - &:focus-visible + .spectrum-Checkbox-label { - color: var(--highcontrast-checkbox-content-color-focus, var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))); } - /* Selected and Focus */ - &:focus-visible:checked + .spectrum-Checkbox-box { - &::before { - border-color: var(--highcontrast-checkbox-highlight-color-focus, var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))); + &:hover { + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-highlight-color-hover, var(--spectrum-checkbox-control-selected-color-hover)); + } } } } -.spectrum-Checkbox-box { - --spectrum-checkbox-spacing: calc(var(--mod-checkbox-height, var(--spectrum-checkbox-height)) - var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size))); - - display: flex; - align-items: center; - justify-content: center; - - position: relative; - box-sizing: border-box; - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - - /* Fix vertical alignment when not wrapping since we're flex-start */ - margin: calc(var(--mod-checkbox-spacing, var(--spectrum-checkbox-spacing)) / 2) 0; - - flex-grow: 0; - flex-shrink: 0; - - &::before { - forced-color-adjust: none; - border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))); - - display: block; - z-index: 0; - content: ""; - box-sizing: border-box; - position: absolute; - - inline-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - block-size: var(--mod-checkbox-control-size, var(--spectrum-checkbox-control-size)); - - border-radius: var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)); - border-width: var(--mod-checkbox-border-width, var(--spectrum-checkbox-border-width)); - border-style: solid; - - transition: - border var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - } - - &::after { - border-radius: calc(var(--mod-checkbox-control-corner-radius, var(--spectrum-checkbox-control-corner-radius)) + var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap))); - content: ""; - display: block; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); - - transition: - box-shadow var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out, - margin var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-out; - - /* force ff to render on the pixel grid */ - transform: translate(0, 0); - } -} - -.spectrum-Checkbox { - .spectrum-Checkbox-checkmark, - .spectrum-Checkbox-partialCheckmark { - color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); - opacity: 0; - transform: scale(0); - - transition: - opacity var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out, - transform var(--mod-checkbox-animation-duration, var(--spectrum-checkbox-animation-duration)) ease-in-out; - } - - .spectrum-Checkbox-partialCheckmark { - display: none; +.spectrum-Checkbox--emphasized { + &:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box { + &::before { + --mod-checkbox-control-color-focus: var(--highcontrast-checkbox-color-focus, var(--spectrum-checkbox-emphasized-color-focus)); + } } } -/* Disabled */ +/* Disabled state for all variants - default, invalid, emphasized */ .spectrum-Checkbox .spectrum-Checkbox-input, .spectrum-Checkbox .spectrum-Checkbox-input:checked { &:disabled + .spectrum-Checkbox-box { &::before { border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); + background-color: var(--highcontrast-checkbox-background-color-default, var(--spectrum-checkbox-background-color)); + } + } - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + &:hover:disabled + .spectrum-Checkbox-box { + &::before { + border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); } } &:disabled ~ .spectrum-Checkbox-label { - forced-color-adjust: none; - color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))); + color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-control-color-disabled))); } } @@ -533,13 +430,8 @@ &:focus-visible + .spectrum-Checkbox-box { forced-color-adjust: none; outline-color: var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - outline-style: auto; outline-offset: var(--mod-checkbox-focus-indicator-gap, var(--spectrum-checkbox-focus-indicator-gap)); outline-width: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - - &::after { - box-shadow: 0 0 0 0 var(--highcontrast-checkbox-focus-indicator-color, var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))); - } } } @@ -554,13 +446,11 @@ --highcontrast-checkbox-background-color-default: Canvas; --highcontrast-checkbox-color-default: ButtonText; - --highcontrast-checkbox-color-hover: ButtonText; --highcontrast-checkbox-color-focus: Highlight; --highcontrast-checkbox-highlight-color-default: Highlight; --highcontrast-checkbox-highlight-color-hover: Highlight; --highcontrast-checkbox-highlight-color-down: Highlight; - --highcontrast-checkbox-highlight-color-focus: Highlight; --highcontrast-checkbox-disabled-color-default: GrayText; --highcontrast-checkbox-focus-indicator-color: CanvasText; diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 3f8859a36bb..b6723dbddb5 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/checkbox", - "version": "10.1.2", + "version": "11.0.0-next.2", "description": "The Spectrum CSS checkbox component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index cbcad99494f..1941061d619 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isActive, 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"; @@ -36,6 +36,7 @@ export default { isChecked, isIndeterminate, isReadOnly, + isActive, }, args: { rootClass: "spectrum-Checkbox", @@ -48,6 +49,7 @@ export default { isIndeterminate: false, isInvalid: false, isReadOnly: false, + isActive: false, }, parameters: { actions: { @@ -59,7 +61,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = CheckboxGroup.bind({}); diff --git a/components/checkbox/stories/checkbox.test.js b/components/checkbox/stories/checkbox.test.js index a7c3efcaaf3..b1eef5f51d6 100644 --- a/components/checkbox/stories/checkbox.test.js +++ b/components/checkbox/stories/checkbox.test.js @@ -23,37 +23,184 @@ export const CheckboxGroup = Variants({ } ], stateData: [ + { + testHeading: "Default", + }, { testHeading: "Checked", isChecked: true, }, { - testHeading: "Checked, hovered", - isChecked: true, + testHeading: "Hovered", isHovered: true, }, + { + testHeading: "Focused", + isFocused: true, + }, + { + testHeading: "Active", + isActive: true, + }, { testHeading: "Indeterminate", isIndeterminate: true, }, + { + testHeading: "Checked + Hovered", + isChecked: true, + isHovered: true, + }, + { + testHeading: "Checked + Focused", + isChecked: true, + isFocused: true, + }, + { + testHeading: "Checked + Indeterminate", + isChecked: true, + isIndeterminate: true, + }, + { + testHeading: "Hovered + Focused", + isHovered: true, + isFocused: true, + }, + { + testHeading: "Hovered + Indeterminate", + isHovered: true, + isIndeterminate: true, + }, + { + testHeading: "Focused + Indeterminate", + isFocused: true, + isIndeterminate: true, + }, + { + testHeading: "Checked + Hovered + Focused", + isChecked: true, + isHovered: true, + isFocused: true, + }, + { + testHeading: "Checked + Hovered + Indeterminate", + isChecked: true, + isHovered: true, + isIndeterminate: true, + }, + { + testHeading: "Checked + Focused + Indeterminate", + isChecked: true, + isFocused: true, + isIndeterminate: true, + }, + { + testHeading: "Checked + Hovered + Focused + Indeterminate", + isChecked: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + }, + { + testHeading: "Hovered + Focused + Indeterminate", + isHovered: true, + isFocused: true, + isIndeterminate: true, + }, { testHeading: "Invalid", isInvalid: true, }, { - testHeading: "Invalid, checked", + testHeading: "Invalid + Checked", isInvalid: true, isChecked: true, }, { - testHeading: "Invalid, checked, hovered", + testHeading: "Invalid + Hovered", + isInvalid: true, + isHovered: true, + }, + { + testHeading: "Invalid + Focused", + isInvalid: true, + isFocused: true, + }, + { + testHeading: "Invalid + Indeterminate", + isInvalid: true, + isIndeterminate: true, + }, + { + testHeading: "Invalid + Checked + Hovered", + isInvalid: true, + isChecked: true, + isHovered: true, + }, + { + testHeading: "Invalid + Checked + Focused", + isInvalid: true, + isChecked: true, + isFocused: true, + }, + { + testHeading: "Invalid + Checked + Indeterminate", + isInvalid: true, + isChecked: true, + isIndeterminate: true, + }, + { + testHeading: "Invalid + Hovered + Focused", + isInvalid: true, + isHovered: true, + isFocused: true, + }, + { + testHeading: "Invalid + Hovered + Indeterminate", + isInvalid: true, + isHovered: true, + isIndeterminate: true, + }, + { + testHeading: "Invalid + Focused + Indeterminate", + isInvalid: true, + isFocused: true, + isIndeterminate: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused", + isInvalid: true, + isChecked: true, + isHovered: true, + isFocused: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Indeterminate", isInvalid: true, isChecked: true, isHovered: true, + isIndeterminate: true, }, { - testHeading: "Invalid, indeterminate", + testHeading: "Invalid + Checked + Focused + Indeterminate", isInvalid: true, + isChecked: true, + isFocused: true, + isIndeterminate: true, + }, + { + testHeading: "Invalid + Hovered + Focused + Indeterminate", + isInvalid: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused + Indeterminate", + isInvalid: true, + isChecked: true, + isHovered: true, + isFocused: true, isIndeterminate: true, }, { @@ -61,44 +208,523 @@ export const CheckboxGroup = Variants({ isDisabled: true, }, { - testHeading: "Disabled, checked", + testHeading: "Invalid + Disabled", + isInvalid: true, isDisabled: true, + }, + { + testHeading: "Checked + Disabled", isChecked: true, + isDisabled: true, }, { - testHeading: "Disabled, checked, hovered", + testHeading: "Hovered + Disabled", + isHovered: true, isDisabled: true, + }, + { + testHeading: "Focused + Disabled", + isFocused: true, + isDisabled: true, + }, + { + testHeading: "Indeterminate + Disabled", + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Disabled", + isInvalid: true, + isChecked: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Hovered + Disabled", + isInvalid: true, + isHovered: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Focused + Disabled", + isInvalid: true, + isFocused: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Indeterminate + Disabled", + isInvalid: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Checked + Hovered + Disabled", + isChecked: true, + isHovered: true, + isDisabled: true, + }, + { + testHeading: "Checked + Focused + Disabled", + isChecked: true, + isFocused: true, + isDisabled: true, + }, + { + testHeading: "Checked + Indeterminate + Disabled", + isChecked: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Hovered + Focused + Disabled", + isHovered: true, + isFocused: true, + isDisabled: true, + }, + { + testHeading: "Hovered + Indeterminate + Disabled", + isHovered: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Focused + Indeterminate + Disabled", + isFocused: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Disabled", + isInvalid: true, + isChecked: true, + isHovered: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Focused + Disabled", + isInvalid: true, + isChecked: true, + isFocused: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Hovered + Indeterminate + Disabled", + isInvalid: true, + isHovered: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Focused + Indeterminate + Disabled", + isInvalid: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Checked + Hovered + Indeterminate + Disabled", + isChecked: true, + isHovered: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Checked + Focused + Indeterminate + Disabled", + isChecked: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Hovered + Focused + Indeterminate + Disabled", + isHovered: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused + Disabled", + isInvalid: true, + isChecked: true, + isHovered: true, + isFocused: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Indeterminate + Disabled", + isInvalid: true, + isChecked: true, + isHovered: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Focused + Indeterminate + Disabled", + isInvalid: true, isChecked: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, + }, + { + testHeading: "Invalid + Hovered + Focused + Indeterminate + Disabled", + isInvalid: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, }, { - testHeading: "Disabled, indeterminate", + testHeading: "Checked + Hovered + Focused + Indeterminate + Disabled", + isChecked: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, isDisabled: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused + Indeterminate + Disabled", + isInvalid: true, + isChecked: true, + isHovered: true, + isFocused: true, isIndeterminate: true, + isDisabled: true, }, { testHeading: "Read-only", isReadOnly: true, }, { - testHeading: "Read-only, checked", + testHeading: "Checked + Read-only", + isChecked: true, + isReadOnly: true, + }, + { + testHeading: "Hovered + Read-only", + isHovered: true, isReadOnly: true, + }, + { + testHeading: "Focused + Read-only", + isFocused: true, + isReadOnly: true, + }, + { + testHeading: "Indeterminate + Read-only", + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Read-only", + isInvalid: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Read-only", + isInvalid: true, + isChecked: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Hovered + Read-only", + isInvalid: true, + isHovered: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Focused + Read-only", + isInvalid: true, + isFocused: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Indeterminate + Read-only", + isInvalid: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Hovered + Read-only", + isChecked: true, + isHovered: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Focused + Read-only", + isChecked: true, + isFocused: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Indeterminate + Read-only", + isChecked: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Hovered + Focused + Read-only", + isHovered: true, + isFocused: true, + isReadOnly: true, + }, + { + testHeading: "Hovered + Indeterminate + Read-only", + isHovered: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Focused + Indeterminate + Read-only", + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Read-only", + isInvalid: true, + isChecked: true, + isHovered: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Focused + Read-only", + isInvalid: true, + isChecked: true, + isFocused: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Hovered + Indeterminate + Read-only", + isInvalid: true, + isHovered: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Focused + Indeterminate + Read-only", + isInvalid: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Hovered + Indeterminate + Read-only", + isChecked: true, + isHovered: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Focused + Indeterminate + Read-only", + isChecked: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Hovered + Focused + Indeterminate + Read-only", + isHovered: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused + Read-only", + isInvalid: true, + isChecked: true, + isHovered: true, + isFocused: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Indeterminate + Read-only", + isInvalid: true, + isChecked: true, + isHovered: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Focused + Indeterminate + Read-only", + isInvalid: true, + isChecked: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Hovered + Focused + Indeterminate + Read-only", + isInvalid: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Hovered + Focused + Indeterminate + Read-only", + isChecked: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused + Indeterminate + Read-only", + isInvalid: true, + isChecked: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + isReadOnly: true, + }, + { + testHeading: "Disabled + Read-only", + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Disabled + Read-only", + isInvalid: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Disabled + Read-only", + isChecked: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Hovered + Disabled + Read-only", + isHovered: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Focused + Disabled + Read-only", + isFocused: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Indeterminate + Disabled + Read-only", + isIndeterminate: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Disabled + Read-only", + isInvalid: true, + isChecked: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Hovered + Disabled + Read-only", + isInvalid: true, + isHovered: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Focused + Disabled + Read-only", + isInvalid: true, + isFocused: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Indeterminate + Disabled + Read-only", + isInvalid: true, + isIndeterminate: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Hovered + Disabled + Read-only", + isChecked: true, + isHovered: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Focused + Disabled + Read-only", + isChecked: true, + isFocused: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Checked + Indeterminate + Disabled + Read-only", isChecked: true, + isIndeterminate: true, + isDisabled: true, + isReadOnly: true, }, { - testHeading: "Read-only, checked, hovered", + testHeading: "Hovered + Indeterminate + Disabled + Read-only", + isHovered: true, + isIndeterminate: true, + isDisabled: true, isReadOnly: true, + }, + { + testHeading: "Focused + Indeterminate + Disabled + Read-only", + isFocused: true, + isIndeterminate: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Disabled + Read-only", + isInvalid: true, isChecked: true, isHovered: true, + isDisabled: true, + isReadOnly: true, }, { - testHeading: "Read-only, indeterminate", + testHeading: "Invalid + Checked + Focused + Disabled + Read-only", + isInvalid: true, + isChecked: true, + isFocused: true, + isDisabled: true, isReadOnly: true, + }, + { + testHeading: "Invalid + Hovered + Indeterminate + Disabled + Read-only", + isInvalid: true, + isHovered: true, + isIndeterminate: true, + isDisabled: true, + isReadOnly: true, + }, + { + testHeading: "Invalid + Focused + Indeterminate + Disabled + Read-only", + isInvalid: true, + isFocused: true, isIndeterminate: true, + isDisabled: true, + isReadOnly: true, }, { - testHeading: "Read-only, checked, disabled", + testHeading: "Checked + Hovered + Focused + Indeterminate + Disabled + Read-only", + isChecked: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, isReadOnly: true, + }, + { + testHeading: "Invalid + Checked + Hovered + Focused + Indeterminate + Disabled + Read-only", + isInvalid: true, isChecked: true, + isHovered: true, + isFocused: true, + isIndeterminate: true, + isDisabled: true, + isReadOnly: true, }, - ] + ], }); diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index ebeaba0e276..0c7c42b6272 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Checkbox", @@ -22,6 +19,8 @@ export const Template = ({ isDisabled = false, isInvalid = false, isReadOnly = false, + isFocused = false, + isActive = false, title, value, id = getRandomId("checkbox"), @@ -58,6 +57,7 @@ export const Template = ({ ["is-invalid"]: isInvalid, ["is-hover"]: isHovered && !isDisabled, ["is-readOnly"]: isReadOnly, + ["is-active"]: isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -65,7 +65,10 @@ export const Template = ({ > <input type="checkbox" - class="${rootClass}-input" + class=${classMap({ + ["is-focus-visible"]: isFocused && !isDisabled, + ["is-active"]: isActive, + [`${rootClass}-input`]: true })} aria-labelledby=${ifDefined(ariaLabelledby)} aria-disabled=${ifDefined(isReadOnly ? "true" : undefined)} ?checked=${isChecked} diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css deleted file mode 100644 index 1c84aa5f83b..00000000000 --- a/components/checkbox/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css deleted file mode 100644 index 4b7d8a675f8..00000000000 --- a/components/checkbox/themes/spectrum-two.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - --spectrum-checkbox-control-corner-radius: 2px; - } -} diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css deleted file mode 100644 index 698c531cc51..00000000000 --- a/components/checkbox/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/clearbutton/CHANGELOG.md b/components/clearbutton/CHANGELOG.md index c05f044658f..b46b499637b 100644 --- a/components/clearbutton/CHANGELOG.md +++ b/components/clearbutton/CHANGELOG.md @@ -1,10 +1,26 @@ # Change log +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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.2.0 ### Minor Changes -- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. +📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! + +By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. ## 7.1.0 diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index 7702979183f..7c038466b7a 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -68,15 +68,6 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [ - "--system-clear-button-background-color", - "--system-clear-button-background-color-down", - "--system-clear-button-background-color-hover", - "--system-clear-button-background-color-key-focus", - "--system-clear-button-static-white-background-color-down", - "--system-clear-button-static-white-background-color-hover", - "--system-clear-button-static-white-background-color-key-focus" - ], "passthroughs": [], "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index edee47004ee..5ddfcb3060a 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ClearButton { --spectrum-clear-button-height: var(--spectrum-component-height-100); --spectrum-clear-button-width: var(--spectrum-component-height-100); @@ -23,16 +21,16 @@ --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); - inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); - border-radius: 100%; + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-background-color-hover: transparent; + --spectrum-clear-button-background-color-down: transparent; + --spectrum-clear-button-background-color-key-focus: transparent; - background-color: var(--mod-clear-button-background-color, transparent); - margin: 0; - padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); - - border: none; - color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + } &.spectrum-ClearButton--sizeS { --spectrum-clear-button-height: var(--spectrum-component-height-75); @@ -57,6 +55,10 @@ } &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); --mod-clear-button-icon-color-down: var(--spectrum-white); @@ -73,6 +75,19 @@ --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); } +} + +.spectrum-ClearButton { + block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); + inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); + border-radius: 100%; + + background-color: var(--mod-clear-button-background-color, transparent); + margin: 0; + padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); + + border: none; + color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); &:not(:disabled) { cursor: pointer; diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index 2820bf0bbd9..79fe40f3117 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/clearbutton", - "version": "7.2.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS clearbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index a8dd5359278..77d1907bc5e 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -51,6 +51,10 @@ export default { ...staticColor, options: ["white"], }, + isFocusable: { + table: { disable: true }, + type: { name: "boolean" }, + }, }, args: { rootClass: "spectrum-ClearButton", diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index 58e90007c04..9ea01f8eeb0 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -6,17 +6,16 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ClearButton", isDisabled = false, size = "m", isQuiet = false, + isFocusable = true, staticColor, id = getRandomId("clearbutton"), + onclick = () => {}, customClasses = [], customStyles = {}, }, context) => html` @@ -38,6 +37,9 @@ export const Template = ({ id=${ifDefined(id)} style=${styleMap(customStyles)} ?disabled=${isDisabled} + tabindex=${isFocusable ? 0 : -1} + aria-hidden=${isFocusable} + @click=${onclick} > <div class="${rootClass}-fill"> ${Icon({ diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css deleted file mode 100644 index e13724e2883..00000000000 --- a/components/clearbutton/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css deleted file mode 100644 index abba1f78556..00000000000 --- a/components/clearbutton/themes/spectrum-two.css +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: transparent; - --spectrum-clear-button-background-color-hover: transparent; - --spectrum-clear-button-background-color-down: transparent; - --spectrum-clear-button-background-color-key-focus: transparent; - - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); - } - } -} diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css deleted file mode 100644 index e4235fb3dff..00000000000 --- a/components/clearbutton/themes/spectrum.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ClearButton { - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300); - } - } -} diff --git a/components/closebutton/CHANGELOG.md b/components/closebutton/CHANGELOG.md index f67b0ffecad..c25eaf90a31 100644 --- a/components/closebutton/CHANGELOG.md +++ b/components/closebutton/CHANGELOG.md @@ -1,5 +1,19 @@ # Change log +## 7.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 7.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 + ## 6.1.0 ### Minor Changes diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 756fc3d7e62..6c74f8bf61f 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -2,45 +2,16 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-CloseButton", + ".spectrum-CloseButton--sizeL", + ".spectrum-CloseButton--sizeS", + ".spectrum-CloseButton--sizeXL", ".spectrum-CloseButton--staticBlack", - ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled)", - ".spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):active", - ".spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible", - ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):hover", - ".spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticWhite", - ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled)", - ".spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):active", - ".spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible", - ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):hover", - ".spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton-UIIcon", ".spectrum-CloseButton.is-disabled", ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.spectrum-CloseButton--sizeL", - ".spectrum-CloseButton.spectrum-CloseButton--sizeM", - ".spectrum-CloseButton.spectrum-CloseButton--sizeS", - ".spectrum-CloseButton.spectrum-CloseButton--sizeXL", - ".spectrum-CloseButton.spectrum-CloseButton--staticBlack", - ".spectrum-CloseButton.spectrum-CloseButton--staticWhite", ".spectrum-CloseButton::-moz-focus-inner", ".spectrum-CloseButton:after", ".spectrum-CloseButton:disabled", @@ -60,7 +31,6 @@ "a.spectrum-CloseButton" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-closebutton-align-self", "--mod-closebutton-animation-duraction", "--mod-closebutton-animation-duration", @@ -72,7 +42,6 @@ "--mod-closebutton-focus-indicator-color", "--mod-closebutton-focus-indicator-gap", "--mod-closebutton-focus-indicator-thickness", - "--mod-closebutton-height", "--mod-closebutton-icon-color-default", "--mod-closebutton-icon-color-disabled", "--mod-closebutton-icon-color-down", @@ -80,14 +49,7 @@ "--mod-closebutton-icon-color-hover", "--mod-closebutton-margin-inline", "--mod-closebutton-margin-top", - "--mod-closebutton-size", - "--mod-closebutton-static-background-color-default", - "--mod-closebutton-static-background-color-down", - "--mod-closebutton-static-background-color-focus", - "--mod-closebutton-static-background-color-hover", - "--mod-closebutton-width", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-closebutton-size" ], "component": [ "--spectrum-closebutton-animation-duration", @@ -104,27 +66,22 @@ "--spectrum-closebutton-icon-color-down", "--spectrum-closebutton-icon-color-focus", "--spectrum-closebutton-icon-color-hover", - "--spectrum-closebutton-size", - "--spectrum-closebutton-static-background-color-default", - "--spectrum-closebutton-static-background-color-down", - "--spectrum-closebutton-static-background-color-focus", - "--spectrum-closebutton-static-background-color-hover" + "--spectrum-closebutton-size" ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-black", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-corner-radius-full", "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-content-color", + "--spectrum-disabled-static-black-background-color", + "--spectrum-disabled-static-white-background-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-gray-100", - "--spectrum-gray-200", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", @@ -133,23 +90,12 @@ "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", "--spectrum-static-white-focus-indicator-color", - "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-white" - ], - "system-theme": [ - "--system-close-button-background-color-default", - "--system-close-button-background-color-down", - "--system-close-button-background-color-focus", - "--system-close-button-background-color-hover", - "--system-close-button-static-black-static-background-color-down", - "--system-close-button-static-black-static-background-color-focus", - "--system-close-button-static-black-static-background-color-hover", - "--system-close-button-static-white-static-background-color-down", - "--system-close-button-static-white-static-background-color-focus", - "--system-close-button-static-white-static-background-color-hover" + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-800", + "--spectrum-transparent-black-900", + "--spectrum-transparent-white-100", + "--spectrum-transparent-white-800", + "--spectrum-transparent-white-900" ], "passthroughs": [ "--mod-button-animation-duration", @@ -159,11 +105,9 @@ "high-contrast": [ "--highcontrast-closebutton-background-color-default", "--highcontrast-closebutton-focus-indicator-color", - "--highcontrast-closebutton-icon-color-default", "--highcontrast-closebutton-icon-color-disabled", "--highcontrast-closebutton-icon-color-down", "--highcontrast-closebutton-icon-color-focus", - "--highcontrast-closebutton-icon-color-hover", - "--highcontrast-closebutton-static-background-color-default" + "--highcontrast-closebutton-icon-color-hover" ] } diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 14880d3ee6e..98cec5bd7f4 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -11,44 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-CloseButton { - --highcontrast-closebutton-icon-color-disabled: GrayText; - --highcontrast-closebutton-icon-color-down: Highlight; - --highcontrast-closebutton-icon-color-hover: Highlight; - --highcontrast-closebutton-icon-color-focus: Highlight; - --highcontrast-closebutton-background-color-default: ButtonFace; - --highcontrast-closebutton-focus-indicator-color: ButtonText; - - &:focus-visible { - &::after { - forced-color-adjust: none; - margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); - transition: - opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, - margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; - } - } - } - - .spectrum-CloseButton--staticBlack { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: GrayText; - } - - .spectrum-CloseButton--staticWhite { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: Highlight; - } -} - .spectrum-CloseButton { + --spectrum-closebutton-border-radius: var(--spectrum-corner-radius-full); + /* Cross icon */ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); @@ -56,54 +23,104 @@ --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); - /* Focus ring */ + /* Focus indicator */ --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + /* Size */ + --spectrum-closebutton-size: var(--spectrum-component-height-100); + --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); - &.spectrum-CloseButton--sizeS { - --spectrum-closebutton-size: var(--spectrum-component-height-75); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-75); - } + /* Background color */ + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); +} - &, - &.spectrum-CloseButton--sizeM { - --spectrum-closebutton-size: var(--spectrum-component-height-100); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-100); - } +.spectrum-CloseButton--sizeS { + --spectrum-closebutton-size: var(--spectrum-component-height-75); +} - &.spectrum-CloseButton--sizeL { - --spectrum-closebutton-size: var(--spectrum-component-height-200); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-200); - } +.spectrum-CloseButton--sizeL { + --spectrum-closebutton-size: var(--spectrum-component-height-200); +} - &.spectrum-CloseButton--sizeXL { - --spectrum-closebutton-size: var(--spectrum-component-height-300); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-300); - } +.spectrum-CloseButton--sizeXL { + --spectrum-closebutton-size: var(--spectrum-component-height-300); +} - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: transparent; +.spectrum-CloseButton--staticWhite { + /* Cross icon */ + --spectrum-closebutton-icon-color-default: var(--spectrum-transparent-white-800); + --spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-white-900); + --spectrum-closebutton-icon-color-down: var(--spectrum-transparent-white-900); + --spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-white-900); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-background-color); + + /* Background color */ + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-closebutton-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-closebutton-background-color-focus: var(--spectrum-transparent-white-100); + + /* Focus indicator */ + --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); +} - --spectrum-closebutton-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - } +.spectrum-CloseButton--staticBlack { + /* Cross icon */ + --spectrum-closebutton-icon-color-default: var(--spectrum-transparent-black-800); + --spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-black-900); + --spectrum-closebutton-icon-color-down: var(--spectrum-transparent-black-900); + --spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-black-900); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-background-color); + + /* Background color */ + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-closebutton-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-closebutton-background-color-focus: var(--spectrum-transparent-black-100); + + /* Focus indicator */ + --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); +} - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: transparent; +/* Windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-CloseButton { + --highcontrast-closebutton-icon-color-disabled: GrayText; + --highcontrast-closebutton-icon-color-down: Highlight; + --highcontrast-closebutton-icon-color-hover: Highlight; + --highcontrast-closebutton-icon-color-focus: Highlight; + --highcontrast-closebutton-background-color-default: ButtonFace; + --highcontrast-closebutton-focus-indicator-color: ButtonText; - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + &:focus-visible::after { + forced-color-adjust: none; + margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); + transition: + opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, + margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; + } } + .spectrum-CloseButton--staticWhite { + --highcontrast-closebutton-icon-color-disabled: Highlight; + } +} + +a.spectrum-CloseButton { + @extend %spectrum-AnchorButton; +} + +.spectrum-CloseButton { @extend %spectrum-BaseButton; - block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); - inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size))); + block-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size)); + inline-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size)); position: relative; @@ -125,7 +142,6 @@ margin-block-start: var(--mod-closebutton-margin-top); align-self: var(--mod-closebutton-align-self); - /* Represents focus ring */ &::after { pointer-events: none; content: ""; @@ -135,7 +151,7 @@ inset-block-end: 0; inset-block-start: 0; margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1); - border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); + border-radius: calc(var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; } @@ -148,6 +164,7 @@ } } + /* COLORS */ &:not(:disabled) { background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); @@ -197,59 +214,6 @@ } } -a.spectrum-CloseButton { - @extend %spectrum-AnchorButton; -} - -/* Modifier Classes */ -.spectrum-CloseButton--staticBlack:not(:disabled), -.spectrum-CloseButton--staticWhite:not(:disabled) { - background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))); - - &:hover { - background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:active { - background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:focus, - &.is-focused { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); - } -} - -.spectrum-CloseButton--staticBlack:disabled, -.spectrum-CloseButton--staticWhite:disabled { - .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)); - } -} - .spectrum-CloseButton-UIIcon { margin: 0; } diff --git a/components/closebutton/package.json b/components/closebutton/package.json index b6805d12c69..9750cf18677 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/closebutton", - "version": "6.1.0", + "version": "7.0.0-next.1", "description": "The Spectrum CSS close button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,9 +37,9 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/commons": "12.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index f048e3e23b0..a991b559cb3 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -52,7 +52,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = CloseButtonGroup.bind({}); diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 644ce705f62..4f6c5d8c00e 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-CloseButton", @@ -46,6 +43,7 @@ export const Template = ({ size, iconName: getCloseButtonIconName(size, iconSize), setName: "ui", + useRef: false, customClasses: [`${rootClass}-UIIcon`], }, context)} </button> @@ -69,6 +67,7 @@ const getCloseButtonIconName = (size = "m", iconSize = "regular", iconName = "Cr return `${iconName}300`; } } + // Default, "regular" icon size. switch (size) { case "s": @@ -88,14 +87,14 @@ const getCloseButtonIconName = (size = "m", iconSize = "regular", iconName = "Cr */ export const CloseButtonExample = (args, context) => Container({ withBorder: false, - content: html` - ${Container({ + content: [ + Container({ withBorder: false, direction: "column", heading: "Default", content: Template(args, context), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Disabled", @@ -103,6 +102,6 @@ export const CloseButtonExample = (args, context) => Container({ ...args, isDisabled: true, }, context), - }, context)} - `, + }, context), + ], }, context); diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css deleted file mode 100644 index 06a90e4fee9..00000000000 --- a/components/closebutton/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); - } -} diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css deleted file mode 100644 index 01479c42fd4..00000000000 --- a/components/closebutton/themes/spectrum-two.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); - } - } -} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css deleted file mode 100644 index 62e907bae8a..00000000000 --- a/components/closebutton/themes/spectrum.css +++ /dev/null @@ -1,36 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300); - } - } -} diff --git a/components/coachindicator/CHANGELOG.md b/components/coachindicator/CHANGELOG.md index a43bd034748..1f750d2f3af 100644 --- a/components/coachindicator/CHANGELOG.md +++ b/components/coachindicator/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 4.1.0 ### Minor Changes diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 9714f9f1ed1..0bed4172eef 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -6,14 +6,9 @@ ".spectrum-CoachIndicator-ring:first-child", ".spectrum-CoachIndicator-ring:nth-child(2)", ".spectrum-CoachIndicator-ring:nth-child(3)", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--dark", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--light", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", - "0%", - "50%", - "to" + ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite" ], "modifiers": [ "--mod-coach-animation-indicator-ring-center-delay-multiple", @@ -31,11 +26,9 @@ "--mod-coach-indicator-quiet-ring-diameter", "--mod-coach-indicator-ring-block-size", "--mod-coach-indicator-ring-border-size", - "--mod-coach-indicator-ring-dark-color", "--mod-coach-indicator-ring-default-color", "--mod-coach-indicator-ring-diameter", "--mod-coach-indicator-ring-inline-size", - "--mod-coach-indicator-ring-light-color", "--mod-coach-indicator-top" ], "component": [ @@ -60,7 +53,6 @@ "--spectrum-coach-animation-indicator-ring-duration", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index 8cc7bdb8eda..c3bb2754d30 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -33,18 +33,6 @@ --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33); } - /* @deprecated .spectrum-CoachIndicator--light */ - &.spectrum-CoachIndicator--light { - /* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */ - --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white)); - } - - /* @deprecated .spectrum-CoachIndicator--dark */ - &.spectrum-CoachIndicator--dark { - /* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */ - --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black)); - } - &.spectrum-CoachIndicator--staticWhite { --spectrum-coach-indicator-ring-default-color: var(--spectrum-white); } diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index 0d18bf53e22..d145ca14225 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/coachindicator", - "version": "4.1.0", + "version": "5.0.0-next.0", "description": "The Spectrum CSS Coach Indicator component ", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/coachmark/CHANGELOG.md b/components/coachmark/CHANGELOG.md index 226f077399e..fa2354e74d4 100644 --- a/components/coachmark/CHANGELOG.md +++ b/components/coachmark/CHANGELOG.md @@ -1,5 +1,87 @@ # Change log +## 10.0.0-next.1 + +### Major Changes + +📝 [#3412](https://github.com/adobe/spectrum-css/pull/3412) [`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b) Thanks [@cdransf](https://github.com/cdransf)! + +#### S2 coachmark migration + +This migrates the `coachmark` component to S2. Custom properties have been remapped per the design spec. + +| Before | After | +| ------------------------------------------ | ----------------------------------------------- | +| --spectrum-heading-sans-serif-font-weight | --spectrum-title-sans-serif-font-weight | +| --spectrum-coach-mark-title-size | --spectrum-coach-mark-title-font-size | +| --spectrum-heading-line-height | --spectrum-title-line-height | +| --spectrum-heading-serif-font-style | --spectrum-title-serif-font-style | +| --spectrum-coach-mark-body-size | --spectrum-coach-mark-body-font-size | +| --spectrum-body-sans-serif-font-style | --spectrum-body-serif-font-style | +| --spectrum-coach-mark-pagination-body-size | --spectrum-coach-mark-pagination-body-font-size | + +### New properties + +```css +--spectrum-coach-mark-edge-to-content +--spectrum-coach-mark-maximum-width +--spectrum-coach-mark-media-height +--spectrum-coach-mark-media-minimum-height +--spectrum-coach-mark-minimum-width +--spectrum-coach-mark-pagination-color +--spectrum-coach-mark-pagination-text-to-bottom-edge +--spectrum-coach-mark-width +--spectrum-coachmark-body-to-footer +--spectrum-coachmark-border-radius +--spectrum-coachmark-border-size +--spectrum-coachmark-buttongroup-display +--spectrum-coachmark-buttongroup-mobile-display +--spectrum-coachmark-content-font-size +--spectrum-coachmark-content-font-weight +--spectrum-coachmark-header-to-body +--spectrum-coachmark-heading-to-action-button +--spectrum-coachmark-max-width +--spectrum-coachmark-media-fixed-height +--spectrum-coachmark-media-min-height +--spectrum-coachmark-menu-display +--spectrum-coachmark-menu-mobile-display +--spectrum-coachmark-min-width +--spectrum-coachmark-padding +--spectrum-coachmark-step-color +--spectrum-coachmark-step-font-size +--spectrum-coachmark-step-font-style +--spectrum-coachmark-step-text-font-weight +--spectrum-coachmark-step-text-line-height +--spectrum-coachmark-step-to-bottom +--spectrum-coachmark-title-color +--spectrum-coachmark-title-font-family +--spectrum-coachmark-title-font-size +--spectrum-coachmark-title-font-style +--spectrum-coachmark-title-text-font-weight +--spectrum-coachmark-title-text-line-height +``` + +#### Additions + +Adds `--spectrum-coachmark-media-fixed-height` for fixed `4:3` image variant and an accompanying `--mod-coachmark-media-fixed-height` mod. This variation has been added to the `coachmark` component story as a boolean control labeled as `Fixed image height`. The class is conditionally added within the `hasImage` block and, as such, will only impact rendering when `hasImage` is also `true`. + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/actionmenu@8.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + - @spectrum-css/buttongroup@10.0.0-next.0 + ## 9.1.1 ### Patch Changes diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 8bc036d5fca..a814cca94ed 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -10,12 +10,14 @@ ".spectrum-CoachMark-header", ".spectrum-CoachMark-image", ".spectrum-CoachMark-image-wrapper", + ".spectrum-CoachMark-image-wrapper--fixedHeight", ".spectrum-CoachMark-menu", ".spectrum-CoachMark-menu--mobile", ".spectrum-CoachMark-step", ".spectrum-CoachMark-title" ], "modifiers": [ + "--mod-coachmark-action-menu-vertical-offset", "--mod-coachmark-body-to-footer", "--mod-coachmark-border-radius", "--mod-coachmark-border-size", @@ -27,8 +29,9 @@ "--mod-coachmark-content-line-height", "--mod-coachmark-header-to-body", "--mod-coachmark-heading-to-action-button", + "--mod-coachmark-image-to-heading", "--mod-coachmark-max-width", - "--mod-coachmark-media-height", + "--mod-coachmark-media-fixed-height", "--mod-coachmark-media-min-height", "--mod-coachmark-min-width", "--mod-coachmark-padding", @@ -47,47 +50,74 @@ "--mod-coachmark-width" ], "component": [ - "--spectrum-coach-mark-body-size", + "--spectrum-coach-mark-body-font-size", "--spectrum-coach-mark-edge-to-content", "--spectrum-coach-mark-maximum-width", "--spectrum-coach-mark-media-height", "--spectrum-coach-mark-media-minimum-height", "--spectrum-coach-mark-minimum-width", - "--spectrum-coach-mark-pagination-body-size", + "--spectrum-coach-mark-pagination-body-font-size", "--spectrum-coach-mark-pagination-color", "--spectrum-coach-mark-pagination-text-to-bottom-edge", - "--spectrum-coach-mark-title-size", + "--spectrum-coach-mark-title-font-size", "--spectrum-coach-mark-width", + "--spectrum-coachmark-action-menu-vertical-offset", + "--spectrum-coachmark-body-to-footer", "--spectrum-coachmark-border-radius", "--spectrum-coachmark-border-size", "--spectrum-coachmark-buttongroup-display", "--spectrum-coachmark-buttongroup-mobile-display", + "--spectrum-coachmark-content-font-size", + "--spectrum-coachmark-content-font-weight", + "--spectrum-coachmark-header-to-body", + "--spectrum-coachmark-image-to-heading", + "--spectrum-coachmark-max-width", + "--spectrum-coachmark-media-fixed-height", + "--spectrum-coachmark-media-min-height", "--spectrum-coachmark-menu-display", - "--spectrum-coachmark-menu-mobile-display" + "--spectrum-coachmark-menu-mobile-display", + "--spectrum-coachmark-min-width", + "--spectrum-coachmark-padding", + "--spectrum-coachmark-step-color", + "--spectrum-coachmark-step-font-size", + "--spectrum-coachmark-step-font-style", + "--spectrum-coachmark-step-text-font-weight", + "--spectrum-coachmark-step-text-line-height", + "--spectrum-coachmark-step-to-bottom", + "--spectrum-coachmark-title-color", + "--spectrum-coachmark-title-font-family", + "--spectrum-coachmark-title-font-size", + "--spectrum-coachmark-title-font-style", + "--spectrum-coachmark-title-text-font-weight", + "--spectrum-coachmark-title-text-line-height", + "--spectrum-coachmark-width" ], "global": [ "--spectrum-body-color", "--spectrum-body-line-height", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", + "--spectrum-body-serif-font-style", "--spectrum-border-width-100", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-large-default", "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-heading-serif-font-style", + "--spectrum-line-height-200", + "--spectrum-medium-font-weight", + "--spectrum-popover-content-area-spacing", "--spectrum-sans-serif-font", "--spectrum-spacing-100", "--spectrum-spacing-200", - "--spectrum-spacing-300" + "--spectrum-spacing-300", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-weight", + "--spectrum-title-serif-font-style" ], - "system-theme": [], "passthroughs": [ "--mod-button-edge-to-visual-only", "--mod-buttongroup-justify-content", "--mod-buttongroup-spacing", "--mod-popover-border-width", - "--mod-popover-content-area-spacing-vertical", + "--mod-popover-content-area-spacing", "--mod-popover-corner-radius" ], "high-contrast": [] diff --git a/components/coachmark/index.css b/components/coachmark/index.css index bd8821b3bb1..5c09fe2e03b 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -12,27 +12,59 @@ */ .spectrum-CoachMark { + --spectrum-coachmark-width: var(--spectrum-coach-mark-width); + --spectrum-coachmark-min-width: var(--spectrum-coach-mark-minimum-width); + --spectrum-coachmark-max-width: var(--spectrum-coach-mark-maximum-width); + --spectrum-coachmark-media-min-height: var(--spectrum-coach-mark-media-minimum-height); + --spectrum-coachmark-border-size: var(--mod-coachmark-border-size, var(--mod-popover-border-width)); --spectrum-coachmark-border-radius: var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius)); + --spectrum-coachmark-media-fixed-height: var(--spectrum-coach-mark-media-height); + + /* layout */ + --spectrum-coachmark-padding: var(--spectrum-coach-mark-edge-to-content); + --spectrum-coachmark-image-to-heading: var(--spectrum-coach-mark-edge-to-content); + --spectrum-coachmark-header-to-body: var(--spectrum-spacing-200); + --spectrum-coachmark-body-to-footer: var(--spectrum-spacing-300); + + /* font */ + --spectrum-coachmark-title-color: var(--spectrum-heading-color); + --spectrum-coachmark-title-font-family: var(--spectrum-sans-serif-font); + --spectrum-coachmark-title-font-size: var(--spectrum-coach-mark-title-font-size); + --spectrum-coachmark-title-font-style: var(--spectrum-title-serif-font-style); + --spectrum-coachmark-title-text-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-coachmark-title-text-line-height: var(--spectrum-title-line-height); + + --spectrum-coachmark-content-font-size: var(--spectrum-coach-mark-body-font-size); + --spectrum-coachmark-content-font-weight: var(--spectrum-body-sans-serif-font-weight); + + --spectrum-coachmark-step-color: var(--spectrum-coach-mark-pagination-color); + --spectrum-coachmark-step-font-style: var(--spectrum-body-serif-font-style); + --spectrum-coachmark-step-font-size: var(--spectrum-coach-mark-pagination-body-font-size); + --spectrum-coachmark-step-text-font-weight: var(--spectrum-medium-font-weight); + --spectrum-coachmark-step-text-line-height: var(--spectrum-line-height-200); + --spectrum-coachmark-step-to-bottom: var(--spectrum-coach-mark-pagination-text-to-bottom-edge); + /* @passthrough start */ --mod-buttongroup-justify-content: flex-end; --mod-popover-border-width: var(--spectrum-border-width-100); - --mod-popover-corner-radius: var(--spectrum-corner-radius-100); - --mod-popover-content-area-spacing-vertical: 0; + --mod-popover-corner-radius: var(--spectrum-corner-radius-large-default); + --mod-popover-content-area-spacing: 0; --mod-button-edge-to-visual-only: 9px; /* @passthrough end */ +} +.spectrum-CoachMark { position: relative; - min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coach-mark-minimum-width)); - max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coach-mark-maximum-width)); - inline-size: var(--mod-coachmark-width, var(--spectrum-coach-mark-width)); + min-inline-size: var(--mod-coachmark-min-width, var(--spectrum-coachmark-min-width)); + max-inline-size: var(--mod-coachmark-max-width, var(--spectrum-coachmark-max-width)); + inline-size: var(--mod-coachmark-width, var(--spectrum-coachmark-width)); } /* Used when the coachmark has an image */ .spectrum-CoachMark-image-wrapper { - block-size: var(--mod-coachmark-media-height, var(--spectrum-coach-mark-media-height)); - min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coach-mark-media-minimum-height)); + min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height)); inline-size: calc(var(--mod-coachmark-width, var(--spectrum-coach-mark-width)) - (var(--spectrum-coachmark-border-size) * 2)); object-fit: cover; @@ -42,11 +74,16 @@ border-start-end-radius: inherit; } +.spectrum-CoachMark-image-wrapper--fixedHeight { + block-size: var(--mod-coachmark-media-fixed-height, var(--spectrum-coachmark-media-fixed-height)); +} + /* Class for the image; nested inside image-wrapper */ .spectrum-CoachMark-image { display: block; inline-size: 100%; block-size: 100%; + min-block-size: var(--mod-coachmark-media-min-height, var(--spectrum-coachmark-media-min-height)); object-fit: cover; border-start-start-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size)); border-start-end-radius: calc(var(--spectrum-coachmark-border-radius) - var(--spectrum-coachmark-border-size)); @@ -57,34 +94,37 @@ .spectrum-CoachMark-content, .spectrum-CoachMark-footer { padding-block: 0; - padding-inline: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)); + padding-inline: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); } /* Wrapper contains title, action-menu */ .spectrum-CoachMark-header { - padding-block-start: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)); + padding-block-start: var(--mod-coachmark-image-to-heading, var(--spectrum-coachmark-image-to-heading)); display: flex; justify-content: space-between; - align-items: center; - margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-spacing-200)); + align-items: flex-start; + margin-block-end: var(--mod-coachmark-header-to-body, var(--spectrum-coachmark-header-to-body)); } /* Text wrapper for the title content; sides besdie action menu if present */ .spectrum-CoachMark-title { - color: var(--mod-coachmark-title-color, var(--spectrum-heading-color)); - font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coach-mark-title-size)); - font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - font-family: var(--mod-coachmark-title-font-family, var(--spectrum-sans-serif-font)); - font-style: var(--mod-coachmark-title-font-style, var(--spectrum-heading-serif-font-style)); - line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-heading-line-height)); + color: var(--mod-coachmark-title-color, var(--spectrum-coachmark-title-color)); + font-size: var(--mod-coachmark-title-font-size, var(--spectrum-coachmark-title-font-size)); + font-weight: var(--mod-coachmark-title-text-font-weight, var(--spectrum-coachmark-title-text-font-weight)); + font-family: var(--mod-coachmark-title-font-family, var(--spectrum-coachmark-title-font-family)); + font-style: var(--mod-coachmark-title-font-style, var(--spectrum-coachmark-title-font-style)); + line-height: var(--mod-coachmark-title-text-line-height, var(--spectrum-coachmark-title-text-line-height)); margin-block-end: 0; } /* Wrapper element around the nested action menu sub-component */ .spectrum-CoachMark-action-menu { + --mod-popover-content-area-spacing: var(--spectrum-popover-content-area-spacing); + white-space: nowrap; z-index: 1; margin-inline-start: var(--mod-coachmark-heading-to-action-button, var(--spectrum-spacing-300)); + margin-block: var(--mod-coachmark-action-menu-vertical-offset, var(--spectrum-coachmark-action-menu-vertical-offset)); } /* @deprecated not used currently in demos or by SWC */ @@ -99,10 +139,10 @@ /* Text wrapper for the content */ .spectrum-CoachMark-content { - margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-spacing-300)); + margin-block-end: var(--mod-coachmark-body-to-footer, var(--spectrum-coachmark-body-to-footer)); color: var(--mod-coachmark-content-font-color, var(--spectrum-body-color)); - font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coach-mark-body-size)); - font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-body-sans-serif-font-weight)); + font-size: var(--mod-coachmark-content-font-size, var(--spectrum-coachmark-content-font-size)); + font-weight: var(--mod-coachmark-content-font-weight, var(--spectrum-coachmark-content-font-weight)); font-family: var(--mod-coachmark-content-font-family, var(--spectrum-sans-serif-font)); font-style: var(--mod-coachmark-content-font-style, var(--spectrum-body-sans-serif-font-style)); line-height: var(--mod-coachmark-content-line-height, var(--spectrum-body-line-height)); @@ -113,20 +153,20 @@ display: grid; align-items: end; margin-block-start: 0; - padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content)); + padding-block-end: var(--mod-coachmark-padding, var(--spectrum-coachmark-padding)); } /* Text wrapper for the step count */ .spectrum-CoachMark-step { justify-self: start; - margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coach-mark-pagination-text-to-bottom-edge)) - var(--mod-coachmark-padding, var(--spectrum-coach-mark-edge-to-content))); + margin-block-end: calc(var(--mod-coachmark-step-to-bottom, var(--spectrum-coachmark-step-to-bottom)) - var(--mod-coachmark-padding, var(--spectrum-coachmark-padding))); - color: var(--mod-coachmark-step-color, var(--spectrum-coach-mark-pagination-color)); - font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coach-mark-pagination-body-size)); - font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-body-sans-serif-font-weight)); + color: var(--mod-coachmark-step-color, var(--spectrum-coachmark-step-color)); + font-size: var(--mod-coachmark-step-font-size, var(--spectrum-coachmark-step-font-size)); + font-weight: var(--mod-coachmark-step-text-font-weight, var(--spectrum-coachmark-step-text-font-weight)); font-family: var(--spectrum-sans-serif-font); - font-style: var(--mod-coachmark-step-font-style, var(--spectrum-body-sans-serif-font-style)); - line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-body-line-height)); + font-style: var(--mod-coachmark-step-font-style, var(--spectrum-coachmark-step-font-style)); + line-height: var(--mod-coachmark-step-text-line-height, var(--spectrum-coachmark-step-text-line-height)); white-space: nowrap; } diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 6e95d694088..38deefcfd0b 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/coachmark", - "version": "9.1.1", + "version": "10.0.0-next.1", "description": "The Spectrum CSS coachmark component", "license": "Apache-2.0", "author": "Adobe", @@ -25,13 +25,13 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0", - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/actionmenu": ">=8.0.0-next.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/buttongroup": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -57,13 +57,13 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/actionmenu": "7.1.1", - "@spectrum-css/button": "14.1.6", - "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/menu": "9.2.0", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/actionmenu": "8.0.0-next.1", + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/buttongroup": "10.0.0-next.1", + "@spectrum-css/menu": "10.0.0-next.3", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index e13b70fce24..7bac386bc38 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -4,7 +4,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { CoachMarkGroup } from "./coachmark.test.js"; -import { CoachmarkMenuStatesTemplate, Template } from "./template.js"; +import { + CoachMarkMediaOptionsTemplate, + CoachmarkMenuStatesTemplate, + Template, +} from "./template.js"; /** * The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs). @@ -14,7 +18,7 @@ export default { component: "CoachMark", argTypes: { hasActionMenu: { - name: "ActionMenu", + name: "Has action menu", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -32,7 +36,7 @@ export default { control: "boolean", }, hasImage: { - name: "Image", + name: "Has image", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -40,12 +44,42 @@ export default { }, control: "boolean", }, + imageIsFixedHeight: { + name: "Fixed image height", + description: "By default this displays an image with a 4:3 aspect ratio.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + if: { arg: "hasImage", truthy: true }, + }, + imageSource: { + name: "Image source", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, + if: { arg: "hasImage", truthy: true }, + }, + title: { + name: "Title text", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + }, }, args: { + title: "Coach mark title", rootClass: "spectrum-CoachMark", - hasActionMenu: true, + hasActionMenu: false, hasPagination: true, - hasImage: false, + hasImage: true, + imageIsFixedHeight: false, }, parameters: { actions: { @@ -62,43 +96,87 @@ export default { metadata, docs: { story: { - height: "300px", - } - } + height: "525px", + }, + }, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = CoachMarkGroup.bind({}); +Default.title = "Standard"; Default.tags = ["!autodocs"]; -Default.args = {}; +Default.parameters = {}; /** - * Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour. + * Coach marks are temporary messages that educate users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour. They may contain images or media that relate to their content, such as demonstrations of gestures, the UI being used, or illustrations. All coach marks can have any combination of action menu and media. */ -export const Standard = CoachmarkMenuStatesTemplate.bind({}); +export const Standard = Template.bind({}); Standard.storyName = "Default"; Standard.tags = ["!dev"]; Standard.parameters = { chromatic: { disableSnapshot: true, }, + docs: { + story: { + height: "475px", + }, + }, +}; +Standard.args = { + imageSource: "example-card-landscape.png", }; -/** Coach marks can contain images or media that relate to their content, such as demonstrations of gestures, the UI being used, or illustrations. */ -export const WithMedia = Template.bind({}); -WithMedia.tags = ["!dev"]; -WithMedia.args = { - hasImage: true, +export const StandardNoMedia = Template.bind({}); +StandardNoMedia.storyName = "Default, no media"; +StandardNoMedia.tags = ["!dev"]; +StandardNoMedia.args = { + hasImage: false, }; -WithMedia.parameters = { +StandardNoMedia.parameters = { chromatic: { disableSnapshot: true, }, docs: { story: { - height: "500px", + height: "250px", + }, + }, +}; + +/** Images and media have a minimum height and can grow with the parent component. Fixed height media is constrained to a 4:3 aspect ratio by applying the `spectrum-CoachMark-image-wrapper--fixedHeight` class. When this fixed height class is used, the height can be customized using the modifiable custom property `--mod-coachmark-media-fixed-height`. */ +export const MediaOptions = CoachMarkMediaOptionsTemplate.bind({}); +MediaOptions.tags = ["!dev"]; +MediaOptions.args = { + imageSource: "example-card-portrait.png", +}; +MediaOptions.parameters = { + docs: { + story: { + height: "725px", }, }, + chromatic: { + disableSnapshot: true, + }, +}; +MediaOptions.storyName = "Media options"; + +/** The action menu, if enabled, is shown in line with the title. */ +export const WithActionMenu = CoachmarkMenuStatesTemplate.bind({}); +WithActionMenu.storyName = "With action menu"; +WithActionMenu.tags = ["!dev"]; +WithActionMenu.args = { + hasActionMenu: true, +}; +WithActionMenu.parameters = { + chromatic: { + disableSnapshot: true, + }, }; // ********* VRT ONLY ********* // @@ -107,6 +185,6 @@ WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes + modes: disableDefaultModes, }, }; diff --git a/components/coachmark/stories/coachmark.test.js b/components/coachmark/stories/coachmark.test.js index c699803e554..49b6e422df8 100644 --- a/components/coachmark/stories/coachmark.test.js +++ b/components/coachmark/stories/coachmark.test.js @@ -12,7 +12,9 @@ export const TestTemplate = (args, context) => { ...args.customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(args.customStyles)} - >${CoachContainer(args, context)}</div> + > + ${CoachContainer(args, context)} + </div> `; }; @@ -28,50 +30,46 @@ export const CoachMarkGroup = Variants({ testHeading: "Default", hasActionMenu: false, hasPagination: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)", - }, }, { testHeading: "With media", hasActionMenu: false, hasPagination: false, hasImage: true, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)" - }, + }, + { + testHeading: "With media + fixed height", + hasActionMenu: false, + hasPagination: false, + hasImage: true, + imageIsFixedHeight: true, }, { testHeading: "With action menu", hasPagination: false, + hasActionMenu: true, isOpen: true, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)" - }, }, { testHeading: "With action menu + media", hasPagination: false, isOpen: true, hasImage: true, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)" - }, + hasActionMenu: true, }, { testHeading: "With pagination", hasActionMenu: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)" - }, }, { testHeading: "With pagination + media", hasActionMenu: false, hasImage: true, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)" - }, + }, + { + testHeading: "With a long title", + title: "Coach mark title with longer text that wraps to see how icon should align", + hasActionMenu: true, }, ], stateData: [], diff --git a/components/coachmark/stories/template.js b/components/coachmark/stories/template.js index 5a3f967ce37..b3402c8ca6c 100644 --- a/components/coachmark/stories/template.js +++ b/components/coachmark/stories/template.js @@ -10,60 +10,83 @@ import { when } from "lit/directives/when.js"; import "../index.css"; -export const CoachContainer = ({ - rootClass = "spectrum-CoachMark", - hasActionMenu = false, - hasPagination, - hasImage, - title = "Try playing with a pixel brush", - content = "Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.", - currentStep = 2, - totalStepCount = 8, - isOpen = false, -} = {}, context = {}) => { +export const CoachContainer = ( + { + rootClass = "spectrum-CoachMark", + hasActionMenu = false, + hasPagination, + hasImage, + imageIsFixedHeight, + imageSource, + title = "Coach mark title", + content = "Pixel brushes use pixels to create brush strokes, just like in other design and drawing tools. Start drawing, and zoom in to see the pixels in each stroke.", + currentStep = 2, + totalStepCount = 8, + isOpen = false, + } = {}, + context = {}, +) => { const { globals = {} } = context; const scale = globals.scale ?? "medium"; return html` - ${when(hasImage, () => html` - <div class="${rootClass}-image-wrapper"> - <img - class="${rootClass}-image" - src="example-card-landscape.png" - /> - </div> - `)} + ${when( + hasImage, + () => html` + <div + class=${classMap({ + [`${rootClass}-image-wrapper`]: true, + [`${rootClass}-image-wrapper--fixedHeight`]: imageIsFixedHeight + })} + > + <img + class="${rootClass}-image" + src="${imageSource || "example-card-landscape.png"}" + /> + </div> + `, + )} <div class="spectrum-CoachMark-header"> <div class="spectrum-CoachMark-title">${title}</div> - ${when(hasActionMenu, () => html` - <div class="spectrum-CoachMark-action-menu"> - ${ActionMenu({ - isOpen, - position: "bottom-start", - iconName: "More", - size: scale === "large" ? "s" : "m", - items: [ - { - label: "Skip tour", - }, + ${when( + hasActionMenu, + () => + html` <div class="spectrum-CoachMark-action-menu"> + ${ActionMenu( { - label: "Reset tour", + isOpen, + position: "bottom-start", + iconName: "More", + size: scale === "large" ? "s" : "m", + items: [ + { + label: "Skip tour", + }, + { + label: "Reset tour", + }, + ], + popoverHeight: 68, + popoverWidth: 84, }, - ], - popoverHeight: 68, - popoverWidth: 84, - }, context)} - </div>` + context, + )} + </div>`, )} </div> - <div class="spectrum-CoachMark-content">${content}</div> + <div class="spectrum-CoachMark-content"> + ${content} + </div> <div class="${rootClass}-footer"> - ${when(hasPagination, () => html` - <div class="spectrum-CoachMark-step"> - <bdo dir="ltr">${currentStep} of ${totalStepCount}</bdo> - </div> - `)} + ${when( + hasPagination, + () => html` + <div class="spectrum-CoachMark-step"> + <bdo dir="ltr">${currentStep} of ${totalStepCount}</bdo> + </div> + `, + )} ${ButtonGroup({ customClasses: scale === "large" @@ -112,40 +135,104 @@ export const Template = (args, context) => { })} style=${styleMap(args.customStyles)} > - ${Popover({ - customStyles: { - "inline-size": "var(--spectrum-coach-mark-width)", + ${Popover( + { + customStyles: { + "inline-size": "var(--spectrum-coach-mark-width)", + }, + customClasses: [`${args.rootClass}-popover`], + isOpen: true, + position: "right-top", + trigger: (passthrough) => CoachIndicator(passthrough, context), + content: [CoachContainer(args, context)], }, - customClasses: [`${args.rootClass}-popover`], - isOpen: true, - position: "right-top", - trigger: (passthrough) => CoachIndicator(passthrough, context), - content: [ - CoachContainer(args, context) - ], - }, context)} + context, + )} </div> `; }; /* Displays open and closed action menus in a single story. */ -export const CoachmarkMenuStatesTemplate = (args, context) => Container({ - withBorder: false, - withHeading: false, - wrapperStyles: { - columnGap: "100px", - rowGap: "200px", - }, - content: [ - Container({ - withBorder: false, - heading: "With action menu", - content: Template({...args, isOpen: true}, context), - }), - Container({ - withBorder: false, - heading: "Without action menu", - content: Template({...args, hasActionMenu: false}, context), - }) - ] -}); +export const CoachmarkMenuStatesTemplate = (args, context) => + Container({ + withBorder: false, + withHeading: false, + wrapperStyles: { + columnGap: "100px", + rowGap: "200px", + }, + content: [ + Container({ + withBorder: false, + heading: "With action menu (closed) and media", + content: Template( + { + ...args, + customStyles: { + "height": "265px" + } + }, + context, + ), + }), + Container({ + withBorder: false, + heading: "Action menu, without media", + content: Template( + { + ...args, + hasImage: false, + hasActionMenu: true, + isOpen: true, + customStyles: { + "height": "260px" + } + }, + context, + ), + }), + ], + }); + +/* Displays fixed and minimum height images in a single story. */ +export const CoachMarkMediaOptionsTemplate = (args, context) => + Container({ + withBorder: false, + withHeading: false, + wrapperStyles: { + columnGap: "100px", + rowGap: "200px", + }, + content: [ + Container({ + withBorder: false, + heading: "With fixed height", + content: Template( + { + ...args, + hasImage: true, + imageIsFixedHeight: true, + imageSource: "example-card-portrait.png", + customStyles: { + "height": "315px" + } + }, + context, + ), + }), + Container({ + withBorder: false, + heading: "Without fixed height", + content: Template( + { + ...args, + imageIsFixedHeight: false, + customStyles: { + "height": "700px" + } + }, + context, + ), + }), + ], + }); diff --git a/components/colorarea/CHANGELOG.md b/components/colorarea/CHANGELOG.md index 39b19274459..356465b3b44 100644 --- a/components/colorarea/CHANGELOG.md +++ b/components/colorarea/CHANGELOG.md @@ -1,5 +1,25 @@ # Change log +## 8.0.0-next.1 + +### Minor Changes + +- [#3656](https://github.com/adobe/spectrum-css/pull/3656) [`911c390`](https://github.com/adobe/spectrum-css/commit/911c390b9fa0b43187e5ab535874f2ed1ffeb88d) Thanks [@aramos-adobe](https://github.com/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. + +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/colorhandle@11.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index ff86d1c0045..9039b7c1028 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -23,16 +23,27 @@ "--mod-colorarea-width" ], "component": [ + "--spectrum-color-area-border-opacity", "--spectrum-color-area-border-rounding", "--spectrum-color-area-border-width", "--spectrum-color-area-height", "--spectrum-color-area-minimum-height", "--spectrum-color-area-minimum-width", "--spectrum-color-area-width", - "--spectrum-colorarea-border-color" + "--spectrum-colorarea-border-color", + "--spectrum-colorarea-border-color-rgb", + "--spectrum-colorarea-border-radius", + "--spectrum-colorarea-border-width", + "--spectrum-colorarea-disabled-background-color", + "--spectrum-colorarea-height", + "--spectrum-colorarea-min-height", + "--spectrum-colorarea-min-width", + "--spectrum-colorarea-width" + ], + "global": [ + "--spectrum-disabled-background-color", + "--spectrum-gray-1000-rgb" ], - "global": ["--spectrum-disabled-background-color"], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorarea/index.css b/components/colorarea/index.css index 6887fac3398..e9f1b1091f5 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -11,41 +11,32 @@ * governing permissions and limitations under the License. */ -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorArea { - --highcontrast-colorarea-border-color-disabled: GrayText; - --highcontrast-colorarea-border-color: Canvas; - --highcontrast-colorarea-fill-color-disabled: Canvas; - } - - .spectrum-ColorArea { - &.is-disabled { - forced-color-adjust: none; - } - } - - .spectrum-ColorArea-gradient, - .spectrum-ColorHandle-color { - forced-color-adjust: none; - } -} - .spectrum-ColorArea { - /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ - --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); + --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); + + /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ + --spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb); + --spectrum-colorarea-border-color: rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity)); + --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); + --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); + --spectrum-colorarea-height: var(--spectrum-color-area-height); + --spectrum-colorarea-width: var(--spectrum-color-area-width); + --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); + --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); position: relative; display: inline-block; cursor: default; - user-select: none; - min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-color-area-minimum-width)); - min-block-size: var(--mod-colorarea-min-height, var(--spectrum-color-area-minimum-height)); - inline-size: var(--mod-colorarea-width, var(--spectrum-color-area-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-color-area-height)); + min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); + min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); + inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); + block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); box-sizing: border-box; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding)); - border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + + touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ + user-select: none; &.is-focused { z-index: 2; @@ -53,8 +44,8 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); .spectrum-ColorArea-gradient { display: none; @@ -63,7 +54,7 @@ } .spectrum-ColorArea-handle { - transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-color-area-width)) - var(--spectrum-color-area-border-width)), 0); + transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); inset-block-start: 0; &:dir(rtl) { @@ -74,7 +65,9 @@ .spectrum-ColorArea-gradient { inline-size: 100%; block-size: 100%; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding)); + + /* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */ + border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width))); } .spectrum-ColorArea-slider { @@ -88,3 +81,21 @@ margin: 0; pointer-events: none; } + +/* Windows High Contrast Mode */ +@media (forced-colors: active) { + .spectrum-ColorArea { + --highcontrast-colorarea-border-color-disabled: GrayText; + --highcontrast-colorarea-border-color: Canvas; + --highcontrast-colorarea-fill-color-disabled: Canvas; + + &.is-disabled { + forced-color-adjust: none; + } + } + + .spectrum-ColorArea-gradient, + .spectrum-ColorHandle-color { + forced-color-adjust: none; + } +} diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 72090c0d5e1..d6e38393de7 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorarea", - "version": "7.1.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS Color Area component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/colorhandle": ">=11.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorhandle": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorhandle": "11.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index ec418649f05..a29245bcff2 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -49,7 +49,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = ColorAreaGroup.bind({}); diff --git a/components/colorarea/stories/template.js b/components/colorarea/stories/template.js index 81022516703..85c0c614409 100644 --- a/components/colorarea/stories/template.js +++ b/components/colorarea/stories/template.js @@ -45,6 +45,7 @@ export const Template = ({ ></div> ${ColorHandle({ isDisabled, + isFocused, customClasses: [`${rootClass}-handle`], customStyles: { "--spectrum-picked-color": selectedColor, diff --git a/components/colorhandle/CHANGELOG.md b/components/colorhandle/CHANGELOG.md index 71cc73fafab..476b7c177fe 100644 --- a/components/colorhandle/CHANGELOG.md +++ b/components/colorhandle/CHANGELOG.md @@ -1,5 +1,26 @@ # Change log +## 11.0.0-next.1 + +### Minor Changes + +- [#3656](https://github.com/adobe/spectrum-css/pull/3656) [`911c390`](https://github.com/adobe/spectrum-css/commit/911c390b9fa0b43187e5ab535874f2ed1ffeb88d) Thanks [@aramos-adobe](https://github.com/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. + +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/colorloupe@8.0.0-next.0 + - @spectrum-css/opacitycheckerboard@5.0.0-next.0 + ## 10.1.0 ### Minor Changes diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index 4d8589ac1c1..cbd2b5d599f 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-picked-color", "--spectrum-white" ], - "system-theme": [], "passthroughs": ["--mod-opacity-checkerboard-position"], "high-contrast": [ "--highcontrast-colorhandle-border-color-disabled", diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index acc32a9b886..983ec65767e 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -55,6 +55,9 @@ transition: all var(--mod-colorhandle-animation-duration, var(--spectrum-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out); + touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ + user-select: none; /* Prevent text selection when dragging the handle */ + &::after { content: ""; inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2)); diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index b3e68d00350..d2badbb89d8 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorhandle", - "version": "10.1.0", + "version": "11.0.0-next.1", "description": "The Spectrum CSS Color Handle component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0", - "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/colorloupe": ">=8.0.0-next.0", + "@spectrum-css/opacitycheckerboard": ">=5.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorloupe": { @@ -41,9 +41,9 @@ } }, "devDependencies": { - "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorloupe": "8.0.0-next.0", + "@spectrum-css/opacitycheckerboard": "5.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index b3923e6d17e..ff525d51d6d 100644 --- a/components/colorhandle/stories/colorhandle.stories.js +++ b/components/colorhandle/stories/colorhandle.stories.js @@ -52,7 +52,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** diff --git a/components/colorloupe/CHANGELOG.md b/components/colorloupe/CHANGELOG.md index 1c042bda5f4..6f07d72440a 100644 --- a/components/colorloupe/CHANGELOG.md +++ b/components/colorloupe/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 245bb476b1f..11ab2606d1e 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -26,26 +26,39 @@ ], "component": [ "--spectrum-color-loupe-bottom-to-color-handle", - "--spectrum-color-loupe-drop-shadow-blur", - "--spectrum-color-loupe-drop-shadow-color", - "--spectrum-color-loupe-drop-shadow-y", "--spectrum-color-loupe-height", "--spectrum-color-loupe-inner-border", "--spectrum-color-loupe-inner-border-width", "--spectrum-color-loupe-outer-border", "--spectrum-color-loupe-outer-border-width", "--spectrum-color-loupe-width", - "--spectrum-colorloupe-checkerboard-fill" + "--spectrum-colorloupe-animation-distance", + "--spectrum-colorloupe-checkerboard-dark-color", + "--spectrum-colorloupe-checkerboard-fill", + "--spectrum-colorloupe-checkerboard-light-color", + "--spectrum-colorloupe-drop-shadow-blur", + "--spectrum-colorloupe-drop-shadow-color", + "--spectrum-colorloupe-drop-shadow-x", + "--spectrum-colorloupe-drop-shadow-y", + "--spectrum-colorloupe-height", + "--spectrum-colorloupe-inner-border-color", + "--spectrum-colorloupe-inner-border-width", + "--spectrum-colorloupe-offset", + "--spectrum-colorloupe-outer-border-color", + "--spectrum-colorloupe-outer-border-width", + "--spectrum-colorloupe-width" ], "global": [ "--spectrum-color-handle-outer-border-width", "--spectrum-color-handle-size", - "--spectrum-drop-shadow-x", + "--spectrum-drop-shadow-elevated-blur", + "--spectrum-drop-shadow-elevated-color", + "--spectrum-drop-shadow-elevated-x", + "--spectrum-drop-shadow-elevated-y", "--spectrum-opacity-checkerboard-square-dark", "--spectrum-opacity-checkerboard-square-light", "--spectrum-picked-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] } diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index f793d2fa6b0..adcd988e569 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -12,25 +12,44 @@ */ .spectrum-ColorLoupe { - inline-size: var(--spectrum-color-loupe-width); - block-size: var(--spectrum-color-loupe-height); + --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); + --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); + + --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ + + --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x); + --spectrum-colorloupe-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y); + --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur); + --spectrum-colorloupe-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color); + + --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + + --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); + + inline-size: var(--spectrum-colorloupe-width); + block-size: var(--spectrum-colorloupe-height); position: absolute; - transform: translate(0, var(--mod-colorloupe-animation-distance, 8px)); + transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); opacity: 0; transform-origin: bottom center; - inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-color-loupe-bottom-to-color-handle))); - inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2); + inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); transition: transform 100ms ease-in-out, opacity 125ms ease-in-out; pointer-events: none; - filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-color-loupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-color-loupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-color-loupe-drop-shadow-color))); + filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))); &:dir(rtl) { - inset-inline-end: calc(50% - (var(--spectrum-color-loupe-width) / 2) - 1px); + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px); } &.is-open { @@ -44,26 +63,27 @@ } .spectrum-ColorLoupe-inner-border { + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ fill: var(--spectrum-picked-color); - stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-color-loupe-inner-border)); - stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-color-loupe-inner-border-width)); + stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); + stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); } .spectrum-ColorLoupe-outer-border { fill: none; - stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border))); - stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px); + stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); + stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); } /* The checkerboard classes use opacity checkerboard tokens for dark and light color. The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe docs are using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */ .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-opacity-checkerboard-square-dark); + fill: var(--spectrum-colorloupe-checkerboard-dark-color); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-opacity-checkerboard-square-light); + fill: var(--spectrum-colorloupe-checkerboard-light-color); } .spectrum-ColorLoupe-checkerboard-fill { diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index b5bc6e6765c..da278c70d75 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorloupe", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS Color Loupe component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index f07cdf83ee7..242a4bf82bf 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -45,7 +45,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = ColorLoupeGroup.bind({}); diff --git a/components/colorslider/CHANGELOG.md b/components/colorslider/CHANGELOG.md index 260b17fe9ad..5f51e0d9ef2 100644 --- a/components/colorslider/CHANGELOG.md +++ b/components/colorslider/CHANGELOG.md @@ -1,5 +1,26 @@ # Change log +## 9.0.0-next.1 + +### Minor Changes + +- [#3656](https://github.com/adobe/spectrum-css/pull/3656) [`911c390`](https://github.com/adobe/spectrum-css/commit/911c390b9fa0b43187e5ab535874f2ed1ffeb88d) Thanks [@aramos-adobe](https://github.com/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. + +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/colorhandle@11.0.0-next.0 + - @spectrum-css/opacitycheckerboard@5.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index ea202a9f0a0..497550155a7 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -37,15 +37,16 @@ "--spectrum-color-slider-border-opacity", "--spectrum-color-slider-border-rounding", "--spectrum-color-slider-border-width", + "--spectrum-color-slider-control-track-width", + "--spectrum-color-slider-fill-color-disabled", "--spectrum-color-slider-length", "--spectrum-color-slider-minimum-length" ], "global": [ "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-gray-900-rgb" + "--spectrum-gray-1000-rgb" ], - "system-theme": [], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ "--highcontrast-color-slider-background-color-disabled", diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 2876596753d..a1be2551592 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -11,28 +11,26 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-ColorSlider { - --highcontrast-color-slider-border-color: CanvasText; - --highcontrast-color-slider-border-color-disabled: GrayText; - --highcontrast-color-slider-background-color-disabled: Canvas; - forced-color-adjust: none; - } -} - .spectrum-ColorSlider { + /* Size and Spacing */ + --spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width); + /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity)); /* @passthrough -- settings for nested color handle */ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); + --spectrum-color-slider-fill-color-disabled: var(--spectrum-disabled-background-color); + position: relative; display: block; min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)); inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length)); - block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width)); + block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width)); + + touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ /* Otherwise we randomly drag a file icon */ user-select: none; @@ -58,7 +56,7 @@ min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))); block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length))); min-inline-size: 0; - inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))); + inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width))); .spectrum-ColorSlider-handle { inset-inline-start: 50%; @@ -85,8 +83,8 @@ } .spectrum-ColorSlider.is-disabled & { - --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))); - background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))); + --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); + background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); } } @@ -114,3 +112,12 @@ margin: 0; pointer-events: none; } + +@media (forced-colors: active) { + .spectrum-ColorSlider { + --highcontrast-color-slider-border-color: CanvasText; + --highcontrast-color-slider-border-color-disabled: GrayText; + --highcontrast-color-slider-background-color-disabled: Canvas; + forced-color-adjust: none; + } +} diff --git a/components/colorslider/package.json b/components/colorslider/package.json index ce7d8d1856a..a8b787935e9 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorslider", - "version": "8.1.0", + "version": "9.0.0-next.1", "description": "The Spectrum CSS Color slider component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", - "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/colorhandle": ">=11.0.0-next.0", + "@spectrum-css/opacitycheckerboard": ">=5.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorhandle": { @@ -41,9 +41,9 @@ } }, "devDependencies": { - "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorhandle": "11.0.0-next.1", + "@spectrum-css/opacitycheckerboard": "5.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 633fa48b8be..d6aed7a33be 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -19,18 +19,20 @@ export default { component: "ColorSlider", argTypes: { colorHandleStyle: { table: { disable: true } }, - vertical: { table: { disable: true } }, isDisabled, isFocused: { ...isFocused, if: { arg: "isDisabled", truthy: false }, }, - gradientStops: { - name: "Gradient stops", + color: { + name: "Color", description: - "The <linear-color-stop> value of the CSS linear-gradient. Can be multiple stops separated by commas.", - type: { name: "array" }, - table: { disable: true }, + "Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code>.", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + }, + control: "color", }, selectedColor: { name: "Selected color", @@ -40,12 +42,19 @@ export default { control: "color", }, gradientType: { - name: "Gradient type", - description: "The gradient can be defined in the markup using CSS or with an image.", - options: ["gradient", "image"], + name: "Color type", + description: + "The color can be defined in the markup using CSS or with an image.", + options: ["color", "image"], control: { type: "select" }, table: { disable: true }, }, + vertical: { + name: "Vertical", + description: "The orientation of the component.", + type: { name: "boolean" }, + control: "boolean", + }, }, args: { rootClass: "spectrum-ColorSlider", @@ -62,7 +71,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** @@ -70,8 +83,8 @@ export default { */ export const Default = ColorSliderGroup.bind({}); Default.args = { - gradientStops: - ["rgb(255, 0, 0) 0%", "rgb(255, 255, 0) 17%", "rgb(0, 255, 0) 33%", "rgb(0, 255, 255) 50%", "rgb(0, 0, 255) 67%", "rgb(255, 0, 255) 83%", "rgb(255, 0, 0) 100%"], + color: + "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", }; // ********* VRT ONLY ********* // @@ -81,7 +94,7 @@ WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes + modes: disableDefaultModes, }, }; @@ -92,6 +105,8 @@ WithForcedColors.parameters = { export const Vertical = Template.bind({}); Vertical.args = { vertical: true, + color: + "linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", }; Vertical.tags = ["!dev"]; Vertical.parameters = { @@ -100,7 +115,7 @@ Vertical.parameters = { export const Alpha = Template.bind({}); Alpha.args = { - gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"], + color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", selectedColor: "rgba(0, 0, 0, 1)", }; Alpha.tags = ["!dev"]; diff --git a/components/colorslider/stories/colorslider.test.js b/components/colorslider/stories/colorslider.test.js index 166960e9353..ceb4f5dac81 100644 --- a/components/colorslider/stories/colorslider.test.js +++ b/components/colorslider/stories/colorslider.test.js @@ -14,6 +14,7 @@ export const ColorSliderGroup = Variants({ { testHeading: "Vertical", vertical: true, + color: "linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", wrapperStyles: { // Adjust for the indicator "padding-block": "20px", @@ -21,7 +22,7 @@ export const ColorSliderGroup = Variants({ }, { testHeading: "Alpha", - gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"], + color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", selectedColor: "rgba(0, 0, 0, 1)", wrapperStyles: { // Adjust for the indicator diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js index f4c15735012..73f7f123568 100644 --- a/components/colorslider/stories/template.js +++ b/components/colorslider/stories/template.js @@ -7,83 +7,83 @@ import { when } from "lit/directives/when.js"; import "../index.css"; -export const Template = ({ - rootClass = "spectrum-ColorSlider", - customClasses = [], - customStyles = {}, - isDisabled = false, - isFocused = false, - vertical = false, - gradientStops = [ - "rgb(255, 0, 0) 0%", - "rgb(255, 255, 0) 17%", - "rgb(0, 255, 0) 33%", - "rgb(0, 255, 255) 50%", - "rgb(0, 0, 255) 67%", - "rgb(255, 0, 255) 83%", - "rgb(255, 0, 0)", - ], - gradientType = "gradient", - selectedColor = "rgba(255, 0, 0, 1)", - colorHandleStyle = {}, -} = {}, context = {}) => { +export const Template = ( + { + rootClass = "spectrum-ColorSlider", + customClasses = [], + customStyles = {}, + isDisabled = false, + isFocused = false, + vertical = false, + color = "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", + gradientType = "gradient", + selectedColor = "rgba(255, 0, 0, 1)", + colorHandleStyle = {}, + } = {}, + context = {}, +) => { const { updateArgs } = context; return html` - <div - class=${classMap({ - [rootClass]: true, - [`${rootClass}--vertical`]: vertical, - "is-disabled": isDisabled, - "is-focused": isFocused, - ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), - })} - style=${styleMap(customStyles)} - @focusin=${function() { - updateArgs({ isFocused: true }); - }} - @focusout=${function() { - updateArgs({ isFocused: false }); - }} - > - ${OpacityCheckerboard({ - customClasses: [`${rootClass}-checkerboard`], - content: [ - when( - gradientType === "image", - () => html`<img - class="${rootClass}-gradient" - role="presentation" - src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII=" - />`, - () => html`<div - class="${rootClass}-gradient" - role="presentation" - style=${when(gradientStops && gradientStops.length, () => - styleMap({ - background: `linear-gradient(to ${ - vertical ? "bottom" : "right" - }, ${gradientStops.join(", ")})`, - }) - )} - ></div>` - ), - ], - role: "presentation", - }, context)} - ${ColorHandle({ - isDisabled, - isFocused, - selectedColor, - customClasses: [`${rootClass}-handle`], - customStyles: colorHandleStyle, - }, context)} - <input - type="color" - value=${selectedColor} - class=${classMap({ - [`${rootClass}-slider`]: true - })} /> - </div> - `; + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--vertical`]: vertical, + "is-disabled": isDisabled, + "is-focused": isFocused, + ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), + })} + style=${styleMap(customStyles)} + @focusin=${function () { + updateArgs({ isFocused: true }); + }} + @focusout=${function () { + updateArgs({ isFocused: false }); + }} + > + ${OpacityCheckerboard( + { + customClasses: [`${rootClass}-checkerboard`], + content: [ + when( + gradientType === "image", + () => + html`<img + class="${rootClass}-gradient" + role="presentation" + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII=" + />`, + () => + html`<div + class="${rootClass}-gradient" + role="presentation" + style=${styleMap({ + background: `${color}`, + })} + ></div>`, + ), + ], + role: "presentation", + }, + context, + )} + ${ColorHandle( + { + isDisabled, + isFocused, + selectedColor, + customClasses: [`${rootClass}-handle`], + customStyles: colorHandleStyle, + }, + context, + )} + <input + type="color" + value=${selectedColor} + class=${classMap({ + [`${rootClass}-slider`]: true, + })} + /> + </div> + `; }; diff --git a/components/colorwheel/CHANGELOG.md b/components/colorwheel/CHANGELOG.md index 31b1cf6d386..4340a80eee6 100644 --- a/components/colorwheel/CHANGELOG.md +++ b/components/colorwheel/CHANGELOG.md @@ -1,5 +1,54 @@ # Change log +## 7.0.0-next.2 + +### Minor Changes + +- [#3656](https://github.com/adobe/spectrum-css/pull/3656) [`911c390`](https://github.com/adobe/spectrum-css/commit/911c390b9fa0b43187e5ab535874f2ed1ffeb88d) Thanks [@aramos-adobe](https://github.com/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. + +## 7.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/colorarea@8.0.0-next.0 + - @spectrum-css/colorhandle@11.0.0-next.0 + - @spectrum-css/colorloupe@8.0.0-next.0 + +## 7.0.0-next.0 + +### Major Changes + +- [#3390](https://github.com/adobe/spectrum-css/pull/3390) [`b9f61e4`](https://github.com/adobe/spectrum-css/commit/b9f61e42486c3619de95423e0575e10ccc9be167) Thanks [@cdransf](https://github.com/cdransf)! - # colorwheel S2 migration + + 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. + + This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs. `::before` and `::after` pseudo elements are now used to draw the exterior and interior borders that overlay the exterior and interior edges of the color wheel. + + Support is provided for the `240px` and `192px` sizes outlined in the design requirements. + + The `forced-colors` media query has been moved to the bottom of the file consistent with our other component implementations. + + Stories, tests and documentation have been updated to be consistent with these changes. + + The following mods have been removed: + + ```css + --mod-colorwheel-height + --mod-colorwheel-width + --mod-colorwheel-min-width + --mod-colorwheel-path-borders + --mod-colorwheel-colorarea-margin + --mod-colorwheel-border-width + ``` + ## 6.1.0 ### Minor Changes diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index c321e1aca27..3876b601d64 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -4,8 +4,6 @@ ".spectrum-ColorWheel", ".spectrum-ColorWheel-ColorArea-handle", ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)", - ".spectrum-ColorWheel-border", - ".spectrum-ColorWheel-border.is-disabled", ".spectrum-ColorWheel-colorarea-container", ".spectrum-ColorWheel-handle", ".spectrum-ColorWheel-inner", @@ -13,44 +11,47 @@ ".spectrum-ColorWheel-wheel", ".spectrum-ColorWheel-wheel.is-disabled", ".spectrum-ColorWheel.is-disabled", + ".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before", + ".spectrum-ColorWheel.is-disabled:after", + ".spectrum-ColorWheel.is-disabled:before", ".spectrum-ColorWheel.is-dragged", ".spectrum-ColorWheel.is-focused", + ".spectrum-ColorWheel:after", + ".spectrum-ColorWheel:before", "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" ], "modifiers": [ + "--mod-colorwheel-block-size", "--mod-colorwheel-border-color", - "--mod-colorwheel-border-width", "--mod-colorwheel-colorarea-container-size", - "--mod-colorwheel-colorarea-margin", "--mod-colorwheel-fill-color-disabled", - "--mod-colorwheel-height", - "--mod-colorwheel-min-width", + "--mod-colorwheel-inline-size", + "--mod-colorwheel-min-inline-size", "--mod-colorwheel-path", - "--mod-colorwheel-path-borders", - "--mod-colorwheel-track-width", - "--mod-colorwheel-width" + "--mod-colorwheel-track-width" ], "component": [ - "--spectrum-color-wheel-color-area-margin", + "--spectrum-color-wheel-border-opacity", "--spectrum-color-wheel-minimum-width", "--spectrum-color-wheel-width", + "--spectrum-colorwheel-block-size", "--spectrum-colorwheel-border-color", + "--spectrum-colorwheel-border-color-rgb", + "--spectrum-colorwheel-border-opacity", "--spectrum-colorwheel-border-width", "--spectrum-colorwheel-colorarea-container-size", "--spectrum-colorwheel-fill-color-disabled", - "--spectrum-colorwheel-height", + "--spectrum-colorwheel-inline-size", + "--spectrum-colorwheel-min-inline-size", "--spectrum-colorwheel-path", - "--spectrum-colorwheel-path-borders", - "--spectrum-colorwheel-track-width", - "--spectrum-colorwheel-width" + "--spectrum-colorwheel-track-width" ], "global": [ "--spectrum-border-width-100", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-transparent-black-300" + "--spectrum-gray-1000-rgb" ], - "system-theme": ["--system-color-wheel-border-color"], "passthroughs": [], "high-contrast": [ "--highcontrast-colorwheel-border-color-disabled", diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index e44d21045f0..1a730529ad9 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,45 +11,82 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.spectrum-ColorWheel { + --spectrum-colorwheel-inline-size: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-block-size: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width); -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorWheel { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; + /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ + --spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb); - forced-color-adjust: none; - } -} + --spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity); + --spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity)); -.spectrum-ColorWheel { - --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); - --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); - --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); + --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); + --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); - --spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100)); - --spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width)); + --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ - --_track-width: var(--spectrum-colorwheel-track-width); + --_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ --_border-width: var(--spectrum-colorwheel-border-width); position: relative; display: block; - min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width)); - inline-size: var(--spectrum-colorwheel-width); - block-size: var(--spectrum-colorwheel-height); + min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size)); + inline-size: var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)); + block-size: var(--mod-colorwheel-block-size, var(--spectrum-colorwheel-block-size)); + touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ user-select: none; cursor: default; + /** + * Color wheel exterior border + * - Calcs for `inline-size` and `block-size` subtract 4 times the component's border width + * (to account for the inset width of the exterior border) from the component's width. + */ + &::before { + inline-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width))); + block-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width))); + inset: var(--spectrum-colorwheel-border-width); + content: ""; + position: absolute; + border-width: var(--spectrum-colorwheel-border-width); + border-style: solid; + border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + border-radius: 100%; + z-index: 1; + } + + /** + * Color wheel interior border + * - Calcs for `inset` 2 times the component's border width from the + * track width (to account for the inset width of the interior border) + */ + &::after { + inset: calc(var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) - (calc(2 * var(--spectrum-colorwheel-border-width)))); + content: ""; + position: absolute; + border-width: var(--spectrum-colorwheel-border-width); + border-style: solid; + border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + border-radius: 100%; + z-index: 1; + } + &.is-focused { z-index: 2; } &.is-disabled { pointer-events: none; + + &::before, + &::after, + .spectrum-ColorWheel-inner::before { + border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent); + } } &.is-dragged { @@ -76,7 +113,6 @@ display: flex; align-items: center; justify-content: center; - margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin)); } .spectrum-ColorWheel-slider { @@ -92,7 +128,7 @@ } .spectrum-ColorWheel-handle { - transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0); + transform: translate(calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) / 2 - var(--mod-colorwheel-track-width, var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width))) / 2), 0); inset-block-start: 50%; inset-inline: 50%; } @@ -106,19 +142,6 @@ } } -/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */ -.spectrum-ColorWheel-border { - position: relative; - background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); - inline-size: var(--spectrum-colorwheel-width); - block-size: var(--spectrum-colorwheel-height); - clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); - - &.is-disabled { - background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)); - } -} - .spectrum-ColorWheel-wheel { position: absolute; background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red); @@ -128,6 +151,16 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)); + background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } +} + +/* Windows High Contrast Mode */ +@media (forced-colors: active) { + .spectrum-ColorWheel { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + + forced-color-adjust: none; } } diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 1882e41043c..edf36ebfb4e 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorwheel", - "version": "6.1.0", + "version": "7.0.0-next.2", "description": "The Spectrum CSS Color Area component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/colorarea": ">=7.0.0 <8.0.0", - "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", - "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/colorarea": ">=8.0.0-next.0", + "@spectrum-css/colorhandle": ">=11.0.0-next.0", + "@spectrum-css/colorloupe": ">=8.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorarea": { @@ -45,10 +45,10 @@ } }, "devDependencies": { - "@spectrum-css/colorarea": "7.1.0", - "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorarea": "8.0.0-next.1", + "@spectrum-css/colorhandle": "11.0.0-next.1", + "@spectrum-css/colorloupe": "8.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 15bba48a20a..f55a704ff03 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -23,7 +23,16 @@ export default { if: { arg: "isDisabled", truthy: false }, }, isWithColorArea: { - name: "With Color Area", + name: "With color area", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isWithColorLoupe: { + name: "With color loupe", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -44,6 +53,7 @@ export default { isDisabled: false, isFocused: false, isWithColorArea: false, + isWithColorLoupe: true, selectedColor: "rgba(255, 0, 0, 50%)", }, parameters: { @@ -53,12 +63,40 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = ColorWheelGroup.bind({}); Default.args = {}; +/** + * By default, the color wheel has both a fixed size and a minimum size. The color wheel may be displayed at custom sizes by setting some of its modifiable custom properties. Below, the wheel is displayed at `300px` with the following mod values: + * ``` + * "--mod-colorwheel-inline-size": "300px", + * "--mod-colorwheel-block-size": "300px", + * "--mod-colorwheel-track-width": "30px", + * "--mod-colorwheel-path": '"M 149 149 m -149 0 a 149 149 0 1 0 298 0 a 149 149 0 1 0 -298 0 M 149 149 m -121 0 a 121 121 0 1 0 242 0 a 121 121 0 1 0 -242 0"', + * ``` + */ +export const CustomSizing = Template.bind({}); +CustomSizing.tags = ["!dev"]; +CustomSizing.args = { + customStyles: { + "--mod-colorwheel-inline-size": "300px", + "--mod-colorwheel-block-size": "300px", + "--mod-colorwheel-track-width": "30px", + "--mod-colorwheel-path": "\"M 149 149 m -149 0 a 149 149 0 1 0 298 0 a 149 149 0 1 0 -298 0 M 149 149 m -121 0 a 121 121 0 1 0 242 0 a 121 121 0 1 0 -242 0\"", + } +}; +CustomSizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + + // ********* DOCS ONLY ********* // export const Disabled = Template.bind({}); Disabled.tags = ["!dev"]; @@ -76,7 +114,9 @@ Disabled.parameters = { * * The `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the color area within the color wheel using `.spectrum-color-wheel-color-area-margin`. Implementations using JS can calculate the container size with `Math.sqrt(2 * R * R)`, where `R` is the inner radius as calculated for the clip paths. * - * `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider: +* Implementations should factor in the value of `--spectrum-color-wheel-color-area-margin`, as illustrated in the token specs, when calculating the size of the color area relative to the color wheel that contains it. + * + * `--spectrum-colorwheel-path` and `--spectrum-colorwheel-colorarea-container-size` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider: * ``` * const wheel = document.querySelector(".spectrum-ColorWheel-wheel") * getComputedStyle(wheel).getPropertyValue('--track-width') diff --git a/components/colorwheel/stories/colorwheel.test.js b/components/colorwheel/stories/colorwheel.test.js index 7271a8d0808..9bea3ef333c 100644 --- a/components/colorwheel/stories/colorwheel.test.js +++ b/components/colorwheel/stories/colorwheel.test.js @@ -11,6 +11,19 @@ export const ColorWheelGroup = Variants({ testHeading: "With color area", isWithColorArea: true, }, + { + testHeading: "Without color loupe", + isWithColorLoupe: false, + }, + { + testHeading: "Custom sizing", + customStyles: { + "--mod-colorwheel-inline-size": "300px", + "--mod-colorwheel-block-size": "300px", + "--mod-colorwheel-track-width": "30px", + "--mod-colorwheel-path": "\"M 149 149 m -149 0 a 149 149 0 1 0 298 0 a 149 149 0 1 0 -298 0 M 149 149 m -121 0 a 121 121 0 1 0 242 0 a 121 121 0 1 0 -242 0\"", + }, + } ], stateData: [ { diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 851150ffd37..fe46f3ef157 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -2,12 +2,10 @@ import { Template as ColorArea } from "@spectrum-css/colorarea/stories/template. import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ColorWheel", @@ -15,16 +13,21 @@ export const Template = ({ isDisabled = false, isFocused = false, isWithColorArea = false, + isWithColorLoupe = true, colorHandleStyle = {}, selectedColor = "rgba(255, 0, 0, 50%)", + customStyles = {}, } = {}, context = {}) => { return html` - <div class=${classMap({ - [rootClass]: true, - "is-disabled": isDisabled, - "is-focused": isFocused, - ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), - })}> + <div + class=${classMap({ + [rootClass]: true, + "is-disabled": isDisabled, + "is-focused": isFocused, + ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), + })} + style=${styleMap(customStyles)} + > <div class="${rootClass}-inner"> <div class="${rootClass}-colorarea-container"> ${when(isWithColorArea, () => html` @@ -40,20 +43,16 @@ export const Template = ({ </div> </div> <div class=${classMap({ - [`${rootClass}-border`]: true, + [`${rootClass}-wheel`]: true, "is-disabled": isDisabled, - })}> - <div class=${classMap({ - [`${rootClass}-wheel`]: true, - "is-disabled": isDisabled, - })}></div> - </div> + })}></div> ${ColorHandle({ isDisabled, isFocused, customClasses: [`${rootClass}-handle`], selectedColor, customStyles: colorHandleStyle, + isWithColorLoupe, }, context)} <input type="range" class="${rootClass}-slider" aria-label="hue" min="0" max="360" step=""> </div> diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/colorwheel/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css deleted file mode 100644 index b80c228ebb8..00000000000 --- a/components/colorwheel/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css deleted file mode 100644 index 9c47a280a66..00000000000 --- a/components/colorwheel/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md index 95351bb623d..05c874642ac 100644 --- a/components/combobox/CHANGELOG.md +++ b/components/combobox/CHANGELOG.md @@ -1,14 +1,64 @@ # Change log +## 5.0.0-next.2 + +### Major Changes + +- [#3683](https://github.com/adobe/spectrum-css/pull/3683) [`e309613`](https://github.com/adobe/spectrum-css/commit/e309613c356ba5586b65cdcc26787d161a3b39e1) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - ### Combobox S2 Migration + + #### New Changes + + - Removed quiet styling variant + - Updated corner radius to match S2 specifications + - Changed outline thickness for better visibility + - Replaced picker button with in-field button component + - Added help text along with invalid state + - Modified the WHCM invalid/error state in help text + + ### New tokens + + `--spectrum-combobox-font-weight` + `--spectrum-combobox-line-height-cjk` + `--spectrum-combobox-spacing-alert-icon-to-text` + `--spectrum-combobox-spacing-to-help-text` + + ### New mods + + `--mod-combobox-line-height-cjk` + `--mod-combobox-popover-animation-distance` + `--mod-combobox-spacing-alert-icon-to-text` + `--mod-combobox-spacing-to-help-text` + `--mod-combobox-textfield-background-color` + +## 5.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/progresscircle@6.0.0-next.0 + +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies: + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/pickerbutton@7.0.0-next.0 + - @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 +📝 [#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 +- 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 diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index bdf2685d75f..801fca17b38 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -4,21 +4,14 @@ ".spectrum-Combobox", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-fill", ".spectrum-Combobox .spectrum-Combobox-button.spectrum-PickerButton--quiet .spectrum-PickerButton-icon", - ".spectrum-Combobox .spectrum-Popover.is-open", - ".spectrum-Combobox--quiet", - ".spectrum-Combobox--quiet .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeL", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeM", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", - ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", + ".spectrum-Combobox .spectrum-Combobox-content", + ".spectrum-Combobox .spectrum-Combobox-label", + ".spectrum-Combobox .spectrum-Combobox-popover", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-content", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-helptext", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-label", + ".spectrum-Combobox--sideLabel .spectrum-Combobox-textfield", ".spectrum-Combobox--sizeL", - ".spectrum-Combobox--sizeM", ".spectrum-Combobox--sizeS", ".spectrum-Combobox--sizeXL", ".spectrum-Combobox-button", @@ -40,15 +33,33 @@ ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover", ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", + ".spectrum-Combobox-content", + ".spectrum-Combobox-helptext", + ".spectrum-Combobox-helptext .spectrum-HelpText-text", ".spectrum-Combobox-input", + ".spectrum-Combobox-input.spectrum-Combobox-autocomplete", + ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection", + ".spectrum-Combobox-input:-internal-autofill-selected", + ".spectrum-Combobox-input:-internal-autofill-selected::selection", + ".spectrum-Combobox-input:-webkit-autofill", + ".spectrum-Combobox-input:-webkit-autofill::selection", + ".spectrum-Combobox-input:-webkit-autofill:active", + ".spectrum-Combobox-input:-webkit-autofill:active::selection", + ".spectrum-Combobox-input:-webkit-autofill:focus", + ".spectrum-Combobox-input:-webkit-autofill:focus::selection", + ".spectrum-Combobox-input:-webkit-autofill:hover", + ".spectrum-Combobox-input:-webkit-autofill:hover::selection", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", ".spectrum-Combobox-input:focus", ".spectrum-Combobox-input:focus:hover", ".spectrum-Combobox-input:hover", + ".spectrum-Combobox-input:lang(ja)", + ".spectrum-Combobox-input:lang(ko)", + ".spectrum-Combobox-input:lang(zh)", + ".spectrum-Combobox-label", ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", - ".spectrum-Combobox-textfield", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover", ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", @@ -62,12 +73,12 @@ ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", + ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", @@ -90,7 +101,7 @@ "--mod-combobox-background-color-hover", "--mod-combobox-background-color-key-focus", "--mod-combobox-block-size", - "--mod-combobox-block-spacing-edge-to-alert", + "--mod-combobox-block-spacing-edge-to-icon", "--mod-combobox-block-spacing-edge-to-progress-circle", "--mod-combobox-border-color-default", "--mod-combobox-border-color-disabled", @@ -105,7 +116,6 @@ "--mod-combobox-border-color-key-focus", "--mod-combobox-border-radius", "--mod-combobox-border-width", - "--mod-combobox-button-inline-offset", "--mod-combobox-button-width", "--mod-combobox-focus-indicator-color", "--mod-combobox-focus-indicator-gap", @@ -118,34 +128,32 @@ "--mod-combobox-font-color-key-focus", "--mod-combobox-font-color-placeholder", "--mod-combobox-font-family", - "--mod-combobox-font-size", - "--mod-combobox-font-style", - "--mod-combobox-font-weight", "--mod-combobox-icon-size", "--mod-combobox-inline-size", "--mod-combobox-line-height", + "--mod-combobox-line-height-cjk", "--mod-combobox-min-inline-size", + "--mod-combobox-popover-animation-distance", "--mod-combobox-readonly-border-color-disabled", - "--mod-combobox-readonly-input-border-color", + "--mod-combobox-spacing-alert-icon-to-text", "--mod-combobox-spacing-block-end-edge-to-text", "--mod-combobox-spacing-block-start-edge-to-text", - "--mod-combobox-spacing-edge-to-menu", - "--mod-combobox-spacing-inline-end-edge-to-text", "--mod-combobox-spacing-inline-icon-to-button", + "--mod-combobox-spacing-inline-icon-to-text", "--mod-combobox-spacing-inline-start-edge-to-text", - "--mod-combobox-spacing-label-to-combobox" + "--mod-combobox-spacing-label-to-combobox", + "--mod-combobox-spacing-side-label-to-field", + "--mod-combobox-spacing-to-help-text", + "--mod-combobox-textfield-background-color" ], "component": [ "--spectrum-combo-box-minimum-width-multiplier", - "--spectrum-combo-box-quiet-minimum-width-multiplier", - "--spectrum-combo-box-visual-to-field-button-extra-large", - "--spectrum-combo-box-visual-to-field-button-large", - "--spectrum-combo-box-visual-to-field-button-medium", - "--spectrum-combo-box-visual-to-field-button-quiet", - "--spectrum-combo-box-visual-to-field-button-small", + "--spectrum-combo-box-visual-to-field-button", + "--spectrum-combobox-background-color-autofill", + "--spectrum-combobox-background-color-default", "--spectrum-combobox-background-color-disabled", "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-alert", + "--spectrum-combobox-block-spacing-edge-to-icon", "--spectrum-combobox-block-spacing-edge-to-progress-circle", "--spectrum-combobox-border-color-default", "--spectrum-combobox-border-color-disabled", @@ -160,16 +168,17 @@ "--spectrum-combobox-border-color-key-focus", "--spectrum-combobox-border-radius", "--spectrum-combobox-border-width", - "--spectrum-combobox-button-inline-offset", "--spectrum-combobox-button-width", "--spectrum-combobox-focus-indicator-color", "--spectrum-combobox-focus-indicator-gap", "--spectrum-combobox-focus-indicator-thickness", "--spectrum-combobox-font-size", "--spectrum-combobox-font-style", + "--spectrum-combobox-font-weight", "--spectrum-combobox-icon-size", "--spectrum-combobox-inline-size", "--spectrum-combobox-line-height", + "--spectrum-combobox-line-height-cjk", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", "--spectrum-combobox-readonly-border-color-disabled", @@ -179,14 +188,17 @@ "--spectrum-combobox-readonly-text-color-disabled", "--spectrum-combobox-spacing-block-end-edge-to-text", "--spectrum-combobox-spacing-block-start-edge-to-text", - "--spectrum-combobox-spacing-edge-to-menu", - "--spectrum-combobox-spacing-inline-end-edge-to-text", "--spectrum-combobox-spacing-inline-icon-to-button", + "--spectrum-combobox-spacing-inline-icon-to-text", "--spectrum-combobox-spacing-inline-start-edge-to-text", - "--spectrum-combobox-spacing-label-to-combobox" + "--spectrum-combobox-spacing-label-to-combobox", + "--spectrum-combobox-spacing-side-label-to-field", + "--spectrum-combobox-spacing-to-help-text" ], "global": [ - "--spectrum-border-width-100", + "--spectrum-blue-900-rgb", + "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -207,26 +219,27 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-text-quiet", "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", "--spectrum-field-top-to-progress-circle-extra-large", "--spectrum-field-top-to-progress-circle-large", "--spectrum-field-top-to-progress-circle-medium", "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", + "--spectrum-field-width-extra-large", + "--spectrum-field-width-large", + "--spectrum-field-width-medium", + "--spectrum-field-width-small", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -235,41 +248,38 @@ "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-gray-25", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", + "--spectrum-gray-300", + "--spectrum-gray-400", "--spectrum-gray-800", "--spectrum-gray-900", + "--spectrum-help-text-to-component", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", "--spectrum-negative-border-color-focus-hover", "--spectrum-negative-border-color-hover", "--spectrum-negative-border-color-key-focus", + "--spectrum-neutral-content-color-default", + "--spectrum-regular-font-weight", + "--spectrum-spacing-200", + "--spectrum-text-to-visual-100", + "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-combobox-background-color-disabled", - "--system-combobox-border-color-default", - "--system-combobox-border-color-disabled", - "--system-combobox-border-color-focus", - "--system-combobox-border-color-focus-hover", - "--system-combobox-border-color-hover", - "--system-combobox-border-color-key-focus", - "--system-combobox-readonly-input-border-color" - ], "passthroughs": [ + "--mod-divider-inline-minimum-size", "--mod-picker-button-background-color", "--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", + "--mod-popover-animation-distance", "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", "--mod-textfield-border-color", @@ -284,12 +294,17 @@ "--mod-textfield-border-color-invalid-keyboard-focus", "--mod-textfield-border-color-keyboard-focus", "--mod-textfield-border-width", + "--mod-textfield-corner-radius", "--mod-textfield-focus-indicator-color", "--mod-textfield-focus-indicator-gap", "--mod-textfield-focus-indicator-width", "--mod-textfield-font-family", + "--mod-textfield-font-size", + "--mod-textfield-font-style", "--mod-textfield-font-weight", "--mod-textfield-icon-color-invalid", + "--mod-textfield-spacing-block-end", + "--mod-textfield-spacing-block-start", "--mod-textfield-text-color-default", "--mod-textfield-text-color-disabled", "--mod-textfield-text-color-focus", @@ -298,9 +313,12 @@ "--mod-textfield-text-color-keyboard-focus" ], "high-contrast": [ + "--highcontrast-combobox-background-color-default", "--highcontrast-combobox-border-color-highlight", "--highcontrast-combobox-border-color-invalid", + "--highcontrast-combobox-readonly-border-color", "--highcontrast-textfield-border-color-invalid-default", + "--highcontrast-textfield-text-color-default", "--highcontrast-textfield-text-color-disabled" ] } diff --git a/components/combobox/index.css b/components/combobox/index.css index 1718cb5d750..be469b573fa 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -11,36 +11,49 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Combobox { - --spectrum-combobox-inline-size: var(--spectrum-field-width); --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-combobox-font-size: var(--spectrum-font-size-100); + --spectrum-combobox-line-height: var(--spectrum-line-height-100); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); + --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-100); + + --spectrum-combobox-spacing-to-help-text: var(--spectrum-help-text-to-component); + + --spectrum-combobox-inline-size: var(--spectrum-field-width-medium); + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); + --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-combobox-border-radius: var(--spectrum-corner-radius-100); - --spectrum-combobox-border-width: var(--spectrum-border-width-100); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-combobox-border-width: var(--spectrum-border-width-200); --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component); + --spectrum-combobox-spacing-side-label-to-field: var(--spectrum-spacing-200); --spectrum-combobox-font-style: var(--spectrum-default-font-style); - --spectrum-combobox-line-height: var(--spectrum-line-height-100); + --spectrum-combobox-font-weight: var(--spectrum-regular-font-weight); + --spectrum-combobox-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); + + --spectrum-combobox-background-color-default: var(--spectrum-gray-25); + --spectrum-combobox-border-color-default: var(--spectrum-gray-300); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-400); + --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); --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); @@ -48,6 +61,10 @@ --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); + --spectrum-combobox-background-color-autofill: rgb(var(--spectrum-blue-900-rgb), 0.3); + + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-medium); + /* @passthroughs start -- settings for nested Textfield component */ --mod-textfield-focus-indicator-gap: var(--mod-combobox-focus-indicator-gap, var(--spectrum-combobox-focus-indicator-gap)); --mod-textfield-focus-indicator-width: var(--mod-combobox-focus-indicator-thickness, var(--spectrum-combobox-focus-indicator-thickness)); @@ -57,8 +74,11 @@ --mod-textfield-background-color-disabled: var(--mod-combobox-background-color-disabled, var(--spectrum-combobox-background-color-disabled)); --mod-textfield-font-family: var(--mod-combobox-font-family); - --mod-textfield-font-weight: var(--mod-combobox-font-weight); - + --mod-textfield-font-weight: var(--spectrum-combobox-font-weight); + --mod-textfield-font-size: var(--spectrum-combobox-font-size); + --mod-textfield-font-style: var(--spectrum-combobox-font-style); + --mod-textfield-spacing-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); + --mod-textfield-spacing-block-end: var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)); --mod-textfield-text-color-default: var(--mod-combobox-font-color-default); --mod-textfield-text-color-hover: var(--mod-combobox-font-color-hover); --mod-textfield-text-color-focus: var(--mod-combobox-font-color-focus); @@ -73,6 +93,7 @@ --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)); --mod-textfield-border-color-keyboard-focus: var(--mod-combobox-border-color-key-focus, var(--spectrum-combobox-border-color-key-focus)); + --mod-textfield-corner-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); --mod-textfield-border-color-invalid-default: var(--mod-combobox-border-color-invalid-default, var(--spectrum-combobox-border-color-invalid-default)); --mod-textfield-border-color-invalid-hover: var(--mod-combobox-border-color-invalid-hover, var(--spectrum-combobox-border-color-invalid-hover)); @@ -93,27 +114,16 @@ /* @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-background-color: var(--spectrum-combobox-background-color-default); --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-readonly-border-color-disabled: var(--spectrum-disabled-border-color); -} - -.spectrum-Combobox, -.spectrum-Combobox--sizeM { - --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); + --spectrum-combobox-readonly-input-border-color: var(--spectrum-combobox-border-color-default); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + /* @passthroughs start -- settings for nested divider component */ + --mod-divider-inline-minimum-size: auto; + /* @passthroughs end -- settings for nested divider component */ } .spectrum-Combobox--sizeS { @@ -121,14 +131,15 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-combobox-font-size: var(--spectrum-font-size-75); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-small); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-small); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-small); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-combobox-inline-size: var(--spectrum-field-width-small); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-small); + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-small); } .spectrum-Combobox--sizeL { @@ -136,14 +147,15 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-combobox-font-size: var(--spectrum-font-size-200); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-large); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-large); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-combobox-inline-size: var(--spectrum-field-width-large); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-large); + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-large); } .spectrum-Combobox--sizeXL { @@ -151,80 +163,33 @@ --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-combobox-font-size: var(--spectrum-font-size-300); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-extra-large); --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-extra-large); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-extra-large); + --spectrum-combobox-block-spacing-edge-to-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-300); -} - -.spectrum-Combobox--quiet { - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-quiet-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-quiet); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); - --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, initial); - - &.spectrum-Combobox--sizeS { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); - } - - &.spectrum-Combobox--sizeM { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); - } - - &.spectrum-Combobox--sizeL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-large); - } - - &.spectrum-Combobox--sizeXL { - --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); - } - - /* Settings for nested Picker Button component. */ - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; -} - -@media (forced-colors: active) { - .spectrum-Combobox { - --highcontrast-combobox-border-color-highlight: Highlight; - --highcontrast-combobox-border-color-invalid: Highlight; - - .spectrum-Combobox-button.spectrum-PickerButton--quiet { - .spectrum-PickerButton-fill { - forced-color-adjust: none; - } - - .spectrum-PickerButton-icon { - /* Should match foreground color of the Textfield. */ - color: CanvasText; - } - } - } + --spectrum-combobox-spacing-inline-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-combobox-inline-size: var(--spectrum-field-width-extra-large); + --spectrum-combobox-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); } .spectrum-Combobox { position: relative; - display: inline-flex; - flex-flow: row nowrap; - + display: inline-grid; inline-size: var(--mod-combobox-inline-size, var(--spectrum-combobox-inline-size)); - min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); - block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); margin-block-start: var(--mod-combobox-spacing-label-to-combobox, var(--spectrum-combobox-spacing-label-to-combobox)); - border-radius: var(--mod-combobox-border-radius, var(--spectrum-combobox-border-radius)); + .spectrum-Combobox-label, + .spectrum-Combobox-content { + min-inline-size: var(--mod-combobox-min-inline-size, var(--spectrum-combobox-min-inline-size)); + } - .spectrum-Popover.is-open { - transform: translateY(var(--mod-combobox-spacing-edge-to-menu, var(--spectrum-combobox-spacing-edge-to-menu))); + .spectrum-Combobox-popover { + --mod-popover-animation-distance: var(--mod-combobox-popover-animation-distance); } - &.is-readOnly:not(.spectrum-Combobox--quiet) { + &.is-readOnly { .spectrum-Combobox-textfield { &.is-keyboardFocused .spectrum-Combobox-input { outline-offset: var(--mod-textfield-focus-indicator-gap); @@ -234,8 +199,8 @@ } .spectrum-Combobox-input:read-only { - background-color: var(--spectrum-combobox-readonly-input-background-color); - border-color: var(--spectrum-combobox-readonly-input-border-color); + background-color: var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-readonly-input-background-color)); + border-color: var(--highcontrast-combobox-readonly-border-color, var(--spectrum-combobox-readonly-input-border-color)); &:hover { background-color: revert; @@ -263,7 +228,8 @@ position: absolute; inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); inset-block-start: var(--mod-combobox-block-spacing-edge-to-progress-circle, var(--spectrum-combobox-block-spacing-edge-to-progress-circle)); - inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon)); + padding-inline-start: var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)); &:dir(rtl) { inset-inline-end: inherit; @@ -271,10 +237,16 @@ } } +.spectrum-Combobox-label { + display: flex; + align-items: center; + justify-content: space-between; +} + /* PICKER BUTTON */ .spectrum-Combobox-button { position: absolute; - inset-inline-end: calc(-1 * var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); + inset-inline-end: 0; /* Default */ &:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet) { @@ -341,21 +313,19 @@ } } -/* TEXTFIELD (wrapper) */ -.spectrum-Combobox-textfield { - inline-size: 100%; +.spectrum-Combobox-content { + display: inline-grid; + block-size: var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)); + position: relative; } /* TEXT INPUT */ .spectrum-Combobox-input { - padding-block-start: calc(var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + background-color: var(--highcontrast-combobox-background-color-default, var(--mod-combobox-textfield-background-color, var(--spectrum-combobox-background-color-default))); padding-inline-start: calc(var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2)); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); backface-visibility: hidden; - line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-line-height)); - font-size: var(--mod-combobox-font-size, var(--spectrum-combobox-font-size)); - font-style: var(--mod-combobox-font-style, var(--spectrum-combobox-font-style)); + line-height: var(--mod-combobox-line-height, var(--spectrum-combobox-block-size)); &::placeholder { --mod-textfield-text-color-default: var(--mod-combobox-font-color-placeholder); @@ -390,10 +360,63 @@ /* ****** Invalid & Loading ****** */ .spectrum-Combobox-textfield.is-invalid &, .spectrum-Combobox-textfield.is-loading & { - padding-inline-end: calc( - var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px)) - - (var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) * 2) - ); + padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-alert-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-combobox-line-height: var(--mod-combobox-line-height-cjk, var(--spectrum-combobox-line-height-cjk)); + } + + &:-webkit-autofill, + &:-webkit-autofill:hover, + &:-webkit-autofill:focus, + &:-webkit-autofill:active, + &:-internal-autofill-selected, + &.spectrum-Combobox-autocomplete { + border-color: var(--spectrum-combobox-border-color-default); + box-shadow: 0 0 0 30px var(--highcontrast-combobox-background-color-default, var(--spectrum-combobox-background-color-default)) inset !important; + transition: background-color 200ms ease-in-out 0s; + -webkit-text-fill-color: var(--highcontrast-textfield-text-color-default, var(--spectrum-neutral-content-color-default)) !important; + line-height: var(--spectrum-combobox-line-height); + + &::selection { + background-color: var(--spectrum-combobox-background-color-autofill); + } + } +} + +.spectrum-Combobox-helptext { + inset-block-start: var(--mod-combobox-spacing-to-help-text, var(--spectrum-combobox-spacing-to-help-text)); + + .spectrum-HelpText-text { + inline-size: 100%; + word-wrap: break-word; + text-wrap: wrap; + } +} + +.spectrum-Combobox--sideLabel { + .spectrum-Combobox-textfield { + inline-size: auto; + } + + .spectrum-Combobox-label { + grid-row: 1; + grid-column: 1 / span 1; + padding-inline-end: var(--mod-combobox-spacing-side-label-to-field, var(--spectrum-combobox-spacing-side-label-to-field)); + overflow-wrap: anywhere; + } + + .spectrum-Combobox-content { + grid-row: 1 / span 1; + grid-column: 2 / span 1; + } + + .spectrum-Combobox-helptext { + grid-row: 2 / span 2; + grid-column: 2 / span 1; } } @@ -403,9 +426,10 @@ inline-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); block-size: var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)); - inset-block-start: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); - inset-block-end: var(--mod-combobox-block-spacing-edge-to-alert, var(--spectrum-combobox-block-spacing-edge-to-alert)); + inset-block-start: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon)); + inset-block-end: var(--mod-combobox-block-spacing-edge-to-icon, var(--spectrum-combobox-block-spacing-edge-to-icon)); inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width))); + padding-inline-start: var(--mod-combobox-spacing-inline-icon-to-text, var(--spectrum-combobox-spacing-inline-icon-to-text)); } .spectrum-Textfield.is-disabled &, @@ -415,43 +439,22 @@ } } -/* QUIET VARIATION (no visible background) */ -.spectrum-Combobox--quiet { - border-radius: 0; - - .spectrum-Combobox-textfield { - &.is-invalid .spectrum-Textfield-validationIcon { - inset-inline-end: var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)); - } - - &.is-readOnly { - .spectrum-Combobox-input:read-only { - border-block-end: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)) solid var(--mod-combobox-readonly-input-border-color, var(--spectrum-combobox-readonly-input-border-color)); - } +@media (forced-colors: active) { + .spectrum-Combobox { + --highcontrast-combobox-border-color-highlight: Highlight; + --highcontrast-combobox-border-color-invalid: Highlight; + --highcontrast-combobox-background-color-default: Canvas; + --highcontrast-combobox-readonly-border-color: CanvasText; - &.is-invalid > .spectrum-Combobox-input:read-only { - border-color: var(--highcontrast-textfield-border-color-invalid-default, var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))); + .spectrum-Combobox-button.spectrum-PickerButton--quiet { + .spectrum-PickerButton-fill { + forced-color-adjust: none; } - &.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-readonly-border-color-disabled)); + .spectrum-PickerButton-icon { + /* Should match foreground color of the Textfield. */ + color: CanvasText; } } } - - .spectrum-Combobox-input { - border-block-end-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); - - padding-block-start: var(--mod-combobox-spacing-block-start-edge-to-text, var(--spectrum-combobox-spacing-block-start-edge-to-text)); - padding-block-end: calc(var(--mod-combobox-spacing-block-end-edge-to-text, var(--spectrum-combobox-spacing-block-end-edge-to-text)) - var(--mod-combobox-border-width, var(--spectrum-combobox-border-width))); - - padding-inline-start: var(--mod-combobox-spacing-inline-start-edge-to-text, var(--spectrum-combobox-spacing-inline-start-edge-to-text)); - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); - } - - .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, - .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input { - padding-inline-end: calc(var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)) + var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) + var(--mod-combobox-spacing-inline-end-edge-to-text, var(--spectrum-combobox-spacing-inline-end-edge-to-text)) - var(--mod-combobox-button-inline-offset, var(--spectrum-combobox-button-inline-offset, 0px))); - } } diff --git a/components/combobox/package.json b/components/combobox/package.json index 9cdd2ad2bd6..a7f9d48775c 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/combobox", - "version": "4.1.2", + "version": "5.0.0-next.2", "description": "The Spectrum CSS combobox component", "license": "Apache-2.0", "author": "Adobe", @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/pickerbutton": ">=7.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/progresscircle": ">=6.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/menu": { @@ -53,12 +53,12 @@ } }, "devDependencies": { - "@spectrum-css/menu": "9.2.0", - "@spectrum-css/pickerbutton": "6.1.2", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/textfield": "8.1.1", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/menu": "10.0.0-next.3", + "@spectrum-css/pickerbutton": "7.0.0-next.1", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/progresscircle": "6.0.0-next.0", + "@spectrum-css/textfield": "9.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index baea4599d01..b1552e7264e 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -1,11 +1,12 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isReadOnly, size } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { ComboBoxGroup } from "./combobox.test.js"; -import { Template, VariantGroup } from "./template.js"; +import { HelpTextTemplate, Template, VariantGroup } from "./template.js"; /** * Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. @@ -14,11 +15,11 @@ import { Template, VariantGroup } from "./template.js"; * * ### General notes * - * - Combobox uses `.spectrum-PickerButton` instead of a `.spectrum-Picker` + * - Combobox uses `.spectrum-InfieldButton` as a menu trigger. * - The following classes must be added: * - `.spectrum-Combobox-textfield` is required on the Textfield outer element (`.spectrum-Textfield`) * - `.spectrum-Combobox-input` is required on the `<input>` element inside of Textfields (`.spectrum-Textfield-input`) - * - `.spectrum-Combobox-button` is required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`) + * - `.spectrum-Combobox-button` is required on the InfieldButton (`.spectrum-InfieldButton`) * * ### Indicating validity and focus * @@ -26,8 +27,7 @@ import { Template, VariantGroup } from "./template.js"; * * - `.is-focused` - when the input or button is focused with the mouse * - `.is-keyboardFocused` - when the input or button is focused with the keyboard - * - `.is-valid` - when the input has an explicit valid state - * - `.is-invalid` - when the input has an explicit invalid state + * - `.is-invalid` - when the input has an explicit invalid state; should also show help text for error messaging * - `.is-disabled` - when the control is disabled; should also add to the `.spectrum-Combobox-textfield` and include a `[disabled]` attribute to the `.spectrum-Combobox-button` * - `.is-loading` - when the progress circle is being shown * @@ -45,13 +45,23 @@ export default { ...isOpen, if: { arg: "isReadOnly", truthy: false }, }, - isQuiet, isInvalid, + isHovered, isFocused, isKeyboardFocused, isLoading, isDisabled, isReadOnly, + isLabelRequired: { + name: "Label required", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + if: { arg: "showFieldLabel", truthy: true }, + }, showFieldLabel: { name: "Show field label", type: { name: "boolean" }, @@ -78,10 +88,28 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["top", "left"], + options: ["top", "side"], control: "select", if: { arg: "showFieldLabel", truthy: true }, }, + autocomplete: { + name: "Autocomplete", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, + helpText: { + name: "Help text", + type: { name: "text" }, + table: { + type: { summary: "text" }, + category: "Component", + }, + control: "text", + }, value: { name: "Value", description: "The value shows the option that a user has selected.", @@ -98,15 +126,20 @@ export default { rootClass: "spectrum-Combobox", size: "m", isOpen: false, - isQuiet: false, isInvalid: false, + isHovered: false, isFocused: false, isKeyboardFocused: false, isLoading: false, isDisabled: false, isReadOnly: false, + isLabelRequired: false, showFieldLabel: false, + autocomplete: false, testId: "combobox", + fieldLabelText: "Select location", + helpText: "", + value: "Ballard", content: [ (passthroughs, context) => Menu({ role: "listbox", @@ -142,9 +175,19 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=727-2550", }, + downState: { + selectors: [".spectrum-InfieldButton:not(:disabled)"], + }, + status: { + type: "migrated", + }, + tags: ["migrated"], packageJson, metadata, }, + decorators: [ + withDownStateDimensionCapture, + ], play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -155,11 +198,6 @@ export default { export const Default = ComboBoxGroup.bind({}); Default.tags = ["!autodocs"]; -Default.args = { - isOpen: true, - fieldLabelText: "Select location", - value: "Ballard", -}; Default.parameters = { chromatic: { delay: 1000 } }; @@ -167,25 +205,36 @@ Default.parameters = { // ********* DOCS ONLY ********* // export const DefaultGroup = VariantGroup.bind({}); DefaultGroup.storyName = "Default"; -DefaultGroup.args = Default.args; +DefaultGroup.args = { + isOpen: true, +}; DefaultGroup.tags = ["!dev"]; DefaultGroup.parameters = { chromatic: { disableSnapshot: true }, + docs: { + story: { + height: "360px", + }, + }, }; -export const QuietGroup = VariantGroup.bind({}); -QuietGroup.storyName = "Quiet"; -QuietGroup.args = { - ...Default.args, - isQuiet: true, -}; -QuietGroup.tags = ["!dev"]; -QuietGroup.parameters = { - chromatic: { disableSnapshot: true }, +/** + * Comboboxes can show help text to provide feedback to users. The description in the help text is flexible and encompasses a range of guidance. Sometimes this guidance is about what to input, and sometime it’s about how to input. This includes information such as: + * + * - An overall description of the input field + * - Hints for what kind of information needs to be input + * - Specific formatting examples or requirements + */ +export const HelpText = HelpTextTemplate.bind({}); +HelpText.tags = ["!dev"]; +HelpText.args = { + showHelpText: true, + helpText: "This is a help text. Select an option", }; + /** - * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.isReadOnly` class to the combobox. To enable this feature, add the .isReadOnly class to the combobox. Then within the nested textfield component, add the .isReadOnly class and readonly attribute to the `<input>` element. + * Comboboxes have a read-only option for when content in the disabled state still needs to be shown. This allows for content to be copied, but not interacted with or changed. A combobox does not have a read-only option if no selection has been made. To enable this feature, add the `.is-readOnly` class to the combobox. To enable this feature, add the `.is-readOnly` class to the combobox. Then within the nested textfield component, add the `.is-readOnly class and readonly attribute to the `input` element. */ export const ReadOnly = Template.bind({}); ReadOnly.tags = ["!dev"]; @@ -199,6 +248,17 @@ ReadOnly.parameters = { ReadOnly.storyName = "Read-only"; +export const Sizing = (args, context) => Sizes({ + Template, + withBorder: false, + withHeading: false, + ...args, +}, context); +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = ComboBoxGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index 5c7d94e7d44..86ca7621864 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -4,64 +4,60 @@ import { Template } from "./template.js"; export const ComboBoxGroup = Variants({ Template, sizeDirection: "row", - wrapperStyles: { - "align-items": "flex-start", - }, testData: [ { testHeading: "Default", isOpen: false, }, { - testHeading: "Quiet", - isQuiet: true, - isOpen: false, + testHeading: "Invalid", + isInvalid: true, }, { testHeading: "Open", isOpen: true, + wrapperStyles: { + "min-block-size": "250px", + }, }, { - testHeading: "Quiet + open", - isQuiet: true, - isOpen: true, + testHeading: "Help text with label", + showFieldLabel: true, + helpText: "Choose a location. Add a new location by typing it in the field, then selecting 'Enter.'", }, { - testHeading: "With field label top", + testHeading: "With field label on the side", showFieldLabel: true, - isOpen: false, - fieldLabelPosition: "top", + fieldLabelPosition: "side", }, { - testHeading: "With field label left", + testHeading: "Help text with label on the side", showFieldLabel: true, - isOpen: false, - fieldLabelPosition: "left", + helpText: "Choose a location. Add a new location by typing it in the field, then selecting 'Enter.'", + fieldLabelPosition: "side", }, { testHeading: "Truncation", - isOpen: false, value: "United States of America and to the republic", }, { - testHeading: "Quiet + truncation", - isOpen: false, - isQuiet: true, - value: "United States of America and to the republic", - }, + testHeading: "Autocomplete", + autocomplete: true, + } ], stateData: [ { - testHeading: "Disabled", - isDisabled: true, + testHeading: "Hovered", + isHovered: true, }, { - testHeading: "Invalid", - isInvalid: true, + testHeading: "Focused", + isFocused: true, }, { - testHeading: "Focused", + testHeading: "Focused + Hovered", isFocused: true, + isHovered: true, }, { testHeading: "Keyboard focused", @@ -75,5 +71,9 @@ export const ComboBoxGroup = Variants({ testHeading: "Read-only", isReadOnly: true }, + { + testHeading: "Disabled", + isDisabled: true, + }, ], }); diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index fe68d45cba9..89517acbe2e 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -1,5 +1,6 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; -import { Template as PickerButton } from "@spectrum-css/pickerbutton/stories/template.js"; +import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; +import { Template as InfieldButton } from "@spectrum-css/infieldbutton/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; @@ -10,11 +11,8 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; -const Combobox = ({ +export const Template = ({ rootClass = "spectrum-Combobox", id = getRandomId("combobox"), testId, @@ -23,15 +21,43 @@ const Combobox = ({ size = "m", isOpen = true, isInvalid = false, - isQuiet = false, isDisabled = false, + isHovered = false, isFocused = false, isKeyboardFocused = false, isLoading = false, isReadOnly = false, + helpText, + fieldLabelText = "Select location", + fieldLabelPosition = "top", + isLabelRequired = false, + showFieldLabel = false, value = "", + autocomplete = true, + content = [], } = {}, context = {}) => { const { updateArgs } = context; + const comboboxId = id || getRandomId("combobox"); + + // Handle click outside of the combobox to close it + if (typeof window !== "undefined" && isOpen) { + // Use setTimeout to allow DOM to render first + setTimeout(() => { + const comboboxEl = document.getElementById(comboboxId); + + const handleClickOutside = (event) => { + if (comboboxEl && !comboboxEl.contains(event.target)) { + updateArgs({ isOpen: false }); + document.removeEventListener("mousedown", handleClickOutside); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + }, 0); + } + + const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" + const adjustedPopoverHeight = showFieldLabel ? popoverHeight : popoverHeight + 32; // Subtract label height when no label return html` <div @@ -40,118 +66,135 @@ const Combobox = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", "is-open": !isDisabled && isOpen, - [`${rootClass}--quiet`]: isQuiet, "is-invalid": !isDisabled && isInvalid, + "is-hovered": !isDisabled && isHovered, "is-focused": !isDisabled && isFocused, "is-keyboardFocused": !isDisabled && isKeyboardFocused, "is-loading": isLoading, "is-disabled": isDisabled, "is-readOnly": isReadOnly, + [`${rootClass}--sideLabel`]: fieldLabelPosition === "side", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} data-testid=${ifDefined(testId ?? id)} - style=${styleMap(customStyles)} + style=${styleMap({ + ...customStyles, + ["margin-block-end"]: !isReadOnly && isOpen && !isDisabled ? `${adjustedPopoverHeight}px` : undefined, + })} + role="combobox" + aria-expanded=${isOpen} + aria-haspopup="listbox" + aria-controls=${`${comboboxId}-popover`} + aria-owns=${`${comboboxId}-popover`} + aria-autocomplete=${ifDefined(autocomplete ? "list" : undefined)} > - ${TextField({ - size, - isQuiet, - isDisabled, - isInvalid, - isFocused, - isKeyboardFocused, - customClasses: [ - `${rootClass}-textfield`, - ...(isLoading ? ["is-loading"] : []), - ], - customInputClasses: [`${rootClass}-input`], - isLoading, - customProgressCircleClasses: ["spectrum-Combobox-progress-circle"], - name: "field", - isReadOnly, - value, - onclick: function () { - if (!isOpen) updateArgs({ isOpen: true }); - }, - }, context)} - ${PickerButton({ - customClasses: [ - `${rootClass}-button`, - ... isInvalid ? ["is-invalid"] : [], - ], - size, - iconSet: "ui", - iconName: "ChevronDown", - isQuiet, - id: getRandomId("picker"), - isOpen, - isFocused, - isKeyboardFocused, - isDisabled, - position: "right", - onclick: function () { - updateArgs({ isOpen: !isOpen }); - }, - tabindex: "-1", - }, context)} - </div> - `; -}; - -export const Template = ({ - size = "m", - isOpen = true, - isQuiet = false, - isDisabled = false, - showFieldLabel = false, - isReadOnly = false, - fieldLabelText = "Select location", - fieldLabelPosition = "top", - content = [], - value = "", - ...args -} = {}, context = {}) => { - const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m" - return html` - <div style=${styleMap({ - // This accounts for the height of the popover when it is open to prevent testing issues - // and allow docs containers to be the right height - ["margin-block-end"]: !isReadOnly && isOpen && !isDisabled ? `${popoverHeight}px` : undefined, - })}> ${when(showFieldLabel, () => FieldLabel({ size, label: fieldLabelText, isDisabled, - customStyles: { "max-inline-size": "100px"}, - alignment: fieldLabelPosition === "left" && "left", + customClasses: [`${rootClass}-label`], + alignment: fieldLabelPosition === "side" && "side", + isRequired: isLabelRequired, + }, context) + )} + <div class="${rootClass}-content"> + ${TextField({ + size, + isDisabled, + isInvalid, + isFocused, + isHovered, + isKeyboardFocused, + customClasses: [ + `${rootClass}-textfield`, + ...(isLoading ? ["is-loading"] : []), + ], + customInputClasses: [ + `${rootClass}-input`, + ...(autocomplete ? [`${rootClass}-autocomplete`] : []) + ], + isLoading, + customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], + name: "field", + isReadOnly, + value, + autocomplete: autocomplete ? undefined : "off", + onclick: function () { + if (!isOpen) updateArgs({ isOpen: true }); + }, + }, context)} + ${InfieldButton({ + customClasses: [ + `${rootClass}-button`, + ...(!isDisabled && isOpen ? ["is-open"] : []), + ], + size, + id: getRandomId("infieldbutton"), + isDisabled: isDisabled || isReadOnly, + tabindex: "-1", + onclick: function () { + updateArgs({ + isOpen: !isOpen, + }); + }, + }, context)} + </div> + ${Popover({ + isOpen: isOpen && !isDisabled && !isReadOnly, + withTip: false, + position: "bottom-start", + customClasses: [`${rootClass}-popover`], + customStyles: { + "inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px", + }, + content, + popoverHeight, + }, context)} + ${when(helpText, () => + HelpText({ + customClasses: [`${rootClass}-helptext`], + size, + isDisabled, + hideIcon: true, + text: helpText, + variant: isInvalid ? "negative" : "neutral", }, context) )} - ${[ - Popover({ - isOpen: isOpen && !isDisabled && !isReadOnly, - withTip: false, - position: "bottom-start", - isQuiet, - trigger: (passthrough) => Combobox({ - size, - isOpen, - isQuiet, - isDisabled, - isReadOnly, - value, - ...args, - ...passthrough, - }, context), - content, - popoverWidth: size === "s" ? 140 : size === "l" ? 191 : size === "xl" ? 192 : 166, // default value is "m" - popoverHeight, - }, context), - ]} + </div> `; }; +export const HelpTextTemplate = (args, context) => { + const variants = [ + { + heading: "Help text", + args: {...args, helpText: "Choose a topic. Add a new topic by typing it in the field, then selecting 'Enter.'"}, + }, + { + heading: "Help text with error", + args: {...args, helpText: "Choose or add at least one topic.", isInvalid: true}, + } + ]; + + return Container({ + direction: "row", + withHeading: false, + withBorder: false, + content: html`${variants.map(variant => Container({ + withBorder: false, + heading: variant.heading, + containerStyles: {"display": "inline"}, + content: Template({ + ...variant.args, + customStyles: {"margin-top": "8px"} + }, context)}, + context))}`, + }, context); +}; + export const VariantGroup = (args, context) => { const variants = [ { diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css deleted file mode 100644 index dc19625a853..00000000000 --- a/components/combobox/themes/express.css +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-400); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-900); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css deleted file mode 100644 index 9d8502ebb3e..00000000000 --- a/components/combobox/themes/spectrum-two.css +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .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-readonly-input-border-color: var(--spectrum-gray-500); - - --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); - --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); - } -} diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css deleted file mode 100644 index 5b0a3eea8bf..00000000000 --- a/components/combobox/themes/spectrum.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Combobox { - --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); - - --spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-combobox-border-color-disabled: transparent; - } -} diff --git a/components/commons/CHANGELOG.md b/components/commons/CHANGELOG.md index 7f5fcc49be4..3f03a98530f 100644 --- a/components/commons/CHANGELOG.md +++ b/components/commons/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 12.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 11.0.0 ### Major Changes diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index fa015bc145f..ca0caa6bba2 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -29,39 +29,40 @@ /* Remove button the margin in Firefox and Safari. */ margin: 0; - /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ - font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; -webkit-font-smoothing: antialiased; /* Font smoothing for Firefox */ -moz-osx-font-smoothing: grayscale; - /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ - line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); text-decoration: none; /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ text-transform: none; - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; - /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - border-style: solid; - transition: - background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; /* Fix Firefox */ &::-moz-focus-inner { - border-style: none; + margin-block-start: -2px; + margin-block-end: -2px; padding: 0; + border: 0; + + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; } &:focus { @@ -90,12 +91,11 @@ inset-inline-end: 0; display: block; - - margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); transition: - opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out; + opacity var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; } &:focus-visible::after { diff --git a/components/commons/package.json b/components/commons/package.json index ce1e2046508..421ae194015 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/commons", - "version": "11.0.0", + "version": "12.0.0-next.0", "description": "Common mixins for Spectrum CSS components", "license": "Apache-2.0", "author": "Adobe", @@ -27,10 +27,10 @@ "package.json" ], "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/contextualhelp/CHANGELOG.md b/components/contextualhelp/CHANGELOG.md index 8a70ab46a92..a3e170ba6c6 100644 --- a/components/contextualhelp/CHANGELOG.md +++ b/components/contextualhelp/CHANGELOG.md @@ -1,5 +1,27 @@ # Change log +## 6.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 6.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351)]: + - @spectrum-css/link@8.0.0-next.0 + +## 6.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 5.1.2 ### Patch Changes diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index 4f7dbd58c5b..a64ded05750 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -10,31 +10,63 @@ ], "modifiers": [ "--mod-contextual-help-body-color", - "--mod-contextual-help-heading-color", - "--mod-spectrum-contextual-help-body-size", - "--mod-spectrum-contextual-help-content-spacing", - "--mod-spectrum-contextual-help-heading-size", - "--mod-spectrum-contextual-help-link-spacing", - "--mod-spectrum-contextual-help-minimum-width", - "--mod-spectrum-contextual-help-padding", - "--mod-spectrum-contextual-help-popover-maximum-width" + "--mod-contextual-help-body-line-height", + "--mod-contextual-help-body-sans-serif-font-family", + "--mod-contextual-help-body-sans-serif-font-style", + "--mod-contextual-help-body-sans-serif-font-weight", + "--mod-contextual-help-body-size", + "--mod-contextual-help-content-spacing", + "--mod-contextual-help-heading-size", + "--mod-contextual-help-link-spacing", + "--mod-contextual-help-min-inline-size", + "--mod-contextual-help-padding", + "--mod-contextual-help-popover-maximum-width", + "--mod-contextual-help-title-color", + "--mod-contextual-help-title-font-style", + "--mod-contextual-help-title-font-weight", + "--mod-contextual-help-title-line-height", + "--mod-contextual-help-title-sans-serif-font-family" ], "component": [ + "--spectrum-contextual-help-body-color", + "--spectrum-contextual-help-body-line-height", + "--spectrum-contextual-help-body-sans-serif-font-family", + "--spectrum-contextual-help-body-sans-serif-font-style", + "--spectrum-contextual-help-body-sans-serif-font-weight", "--spectrum-contextual-help-body-size", "--spectrum-contextual-help-content-spacing", + "--spectrum-contextual-help-link-spacing", + "--spectrum-contextual-help-min-inline-size", "--spectrum-contextual-help-minimum-width", + "--spectrum-contextual-help-padding", + "--spectrum-contextual-help-title-color", + "--spectrum-contextual-help-title-font-style", + "--spectrum-contextual-help-title-font-weight", + "--spectrum-contextual-help-title-line-height", + "--spectrum-contextual-help-title-sans-serif-font-family", "--spectrum-contextual-help-title-size" ], "global": [ "--spectrum-body-color", - "--spectrum-heading-color", + "--spectrum-body-sans-serif-font-style", + "--spectrum-body-sans-serif-font-weight", + "--spectrum-corner-radius-large-default", + "--spectrum-line-height-200", + "--spectrum-sans-font-family-stack", + "--spectrum-spacing-100", "--spectrum-spacing-300", - "--spectrum-spacing-400" + "--spectrum-spacing-400", + "--spectrum-title-color", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight" + ], + "passthroughs": [ + "--mod-popover-animation-distance", + "--mod-popover-corner-radius" ], - "system-theme": [], - "passthroughs": [], "high-contrast": [ "--highcontrast-contextual-help-body-color", - "--highcontrast-contextual-help-heading-color" + "--highcontrast-contextual-help-title-color" ] } diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css index 68152fd353b..c416b8395c0 100644 --- a/components/contextualhelp/index.css +++ b/components/contextualhelp/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,9 +11,34 @@ * governing permissions and limitations under the License. */ +.spectrum-ContextualHelp { + --spectrum-contextual-help-title-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-contextual-help-title-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-contextual-help-title-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-contextual-help-title-line-height: var(--spectrum-title-line-height); + + --spectrum-contextual-help-title-color: var(--spectrum-title-color); + + --spectrum-contextual-help-body-sans-serif-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-contextual-help-body-sans-serif-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-contextual-help-body-sans-serif-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-contextual-help-body-line-height: var(--spectrum-line-height-200); + + --spectrum-contextual-help-body-color: var(--spectrum-body-color); + + --spectrum-contextual-help-min-inline-size: var(--spectrum-contextual-help-minimum-width); + --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); + --spectrum-contextual-help-padding: var(--spectrum-spacing-400); + + /* @passthrough start */ + --mod-popover-animation-distance: var(--spectrum-spacing-100); + --mod-popover-corner-radius: var(--spectrum-corner-radius-large-default); + /* @passthrough end */ +} + .spectrum-ContextualHelp { position: relative; - min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width)); + min-inline-size: var(--mod-contextual-help-min-inline-size, var(--spectrum-contextual-help-min-inline-size)); } .spectrum-ContextualHelp-button { @@ -21,12 +46,11 @@ } .spectrum-ContextualHelp-popover { - padding-block: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400)); - padding-inline: var(--mod-spectrum-contextual-help-padding, var(--spectrum-spacing-400)); - font-size: var(--mod-spectrum-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); + padding: var(--mod-contextual-help-padding, var(--spectrum-contextual-help-padding)); + font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); color: var(--highcontrast-contextual-help-body-color, var(--mod-contextual-help-body-color, var(--spectrum-body-color))); - max-inline-size: var(--mod-spectrum-contextual-help-popover-maximum-width); + max-inline-size: var(--mod-contextual-help-popover-maximum-width); .spectrum-ContextualHelp-heading, .spectrum-ContextualHelp-body { @@ -34,19 +58,32 @@ } .spectrum-ContextualHelp-heading { - margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); - font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-title-size)); - color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-heading-color))); + font-family: var(--mod-contextual-help-title-sans-serif-font-family, var(--spectrum-contextual-help-title-sans-serif-font-family)); + font-weight: var(--mod-contextual-help-title-font-weight, var(--spectrum-contextual-help-title-font-weight)); + font-size: var(--mod-contextual-help-heading-size, var(--spectrum-contextual-help-title-size)); + font-style: var(--mod-contextual-help-title-font-style, var(--spectrum-contextual-help-title-font-style)); + line-height: var(--mod-contextual-help-title-line-height, var(--spectrum-contextual-help-title-line-height)); + color: var(--highcontrast-contextual-help-title-color, var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color))); + margin-block-end: var(--mod-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); + } + + .spectrum-ContextualHelp-body { + font-size: var(--mod-contextual-help-body-size, var(--spectrum-contextual-help-body-size)); + font-family: var(--mod-contextual-help-body-sans-serif-font-family, var(--spectrum-contextual-help-body-sans-serif-font-family)); + font-weight: var(--mod-contextual-help-body-sans-serif-font-weight, var(--spectrum-contextual-help-body-sans-serif-font-weight)); + font-style: var(--mod-contextual-help-body-sans-serif-font-style, var(--spectrum-contextual-help-body-sans-serif-font-style)); + line-height: var(--mod-contextual-help-body-line-height, var(--spectrum-contextual-help-body-line-height)); + color: var(--mod-contextual-help-body-color, var(--spectrum-contextual-help-body-color)); } } .spectrum-ContextualHelp-link { - margin-block-start: var(--mod-spectrum-contextual-help-link-spacing, var(--spectrum-spacing-300)); + margin-block-start: var(--mod-contextual-help-link-spacing, var(--spectrum-contextual-help-link-spacing)); } @media (forced-colors: active) { .spectrum-ContextualHelp { - --highcontrast-contextual-help-heading-color: CanvasText; + --highcontrast-contextual-help-title-color: CanvasText; --highcontrast-contextual-help-body-color: CanvasText; } } diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 37ecd774cc7..169632b8bc7 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/contextualhelp", - "version": "5.1.2", + "version": "6.0.0-next.2", "description": "The Spectrum CSS contextualhelp component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/link": ">=7.0.0 <8.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/link": ">=8.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -45,10 +45,10 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/link": "7.1.0", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/link": "8.0.0-next.2", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 4b7abd0296a..117912f633b 100644 --- a/components/contextualhelp/stories/contextualhelp.stories.js +++ b/components/contextualhelp/stories/contextualhelp.stories.js @@ -31,13 +31,13 @@ export default { iconName: { name: "Icon", type: { name: "string", required: true }, - defaultValue: "Info", + defaultValue: "InfoCircle", table: { type: { summary: "string" }, category: "Component", defaultValue: { summary: "Info" }, }, - options: ["Info", "Help"], + options: ["InfoCircle", "HelpCircle"], control: "select", }, iconSet: { table: { disable: true } }, @@ -76,16 +76,26 @@ export default { ], control: "select", }, - link: { table: { disable: true } }, + link: { + name: "Has link", + type: { name: "boolean", required: false }, + defaultValue: false, + table: { + summary: "boolean", + category: "Component", + defaultValue: { summary: false } + } + }, }, args: { rootClass: "spectrum-ContextualHelp", - iconName: "Info", + iconName: "InfoCircle", iconSet: "workflow", popoverPlacement: "bottom-start", + link: false, title: "Permission required", body: "Your admin must grant you permission before you can create a new document. Please contact your admin for more information.", - customStyles: { "inline-size": "275px" }, + customStyles: { "inline-size": "var(--spectrum-contextual-help-min-inline-size)" }, }, parameters: { actions: { @@ -102,7 +112,11 @@ export default { height: "200px", }, }, + status: { + type: "migrated", + }, }, + tags: ["migrated"] }; /** @@ -130,28 +144,6 @@ WithLink.parameters = { }; WithLink.storyName = "Default - info icon with link"; -/** - * In order to further customize the contextual help popover, implementations can set `--mod-spectrum-contextual-help-popover-maximum-width` to their desired max width. - */ -export const MaxWidthPopover = Template.bind({}); -MaxWidthPopover.tags = ["!dev"]; -MaxWidthPopover.args = { - customStyles: { - "inline-size": "275px", - "--mod-spectrum-contextual-help-popover-maximum-width": "180px", - "margin-bottom": "270px", - }, -}; -MaxWidthPopover.parameters = { - chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "auto", - }, - }, -}; -MaxWidthPopover.storyName = "Default - max width popover"; - /** * This is an example of the contextual help component within a popover with a placement of `top`. Read more about the 22 available placement positions in the [popover documentation](/docs/components-popover--docs). */ @@ -160,7 +152,6 @@ TopPopover.tags = ["!dev"]; TopPopover.args = { popoverPlacement: "top", customStyles: { - "inline-size": "275px", "margin-top": "170px", }, }; @@ -176,11 +167,13 @@ TopPopover.storyName = "Default - top popover"; /** * When displaying help or resources to learn more, the contextual help should use the help icon. The content in this variant provides more detailed, in-depth guidance about a task, UI element, tool or keyboard shortcuts. + * + * All variants and positions of the contextual help component can be configured with a help icon. */ export const HelpDefault = Template.bind({}); HelpDefault.tags = ["!dev"]; HelpDefault.args = { - iconName: "Help", + iconName: "HelpCircle", title: "Need help?", }; HelpDefault.parameters = { @@ -188,66 +181,6 @@ HelpDefault.parameters = { }; HelpDefault.storyName = "Help icon"; -export const HelpWithLink = Template.bind({}); -HelpWithLink.tags = ["!dev"]; -HelpWithLink.args = { - link: { - text: "Learn about permissions", - url: "#", - }, - iconName: "Help", - title: "Need help?", - body: "Reach out to your admin for help regarding the document you are trying to create.", -}; -HelpWithLink.parameters = { - chromatic: { disableSnapshot: true }, -}; -HelpWithLink.storyName = "Help icon - with link"; - -export const HelpTopPopover = Template.bind({}); -HelpTopPopover.tags = ["!dev"]; -HelpTopPopover.args = { - popoverPlacement: "top", - customStyles: { - "inline-size": "275px", - "margin-top": "170px", - }, - title: "Need help?", - body: "Reach out to your admin for help regarding the document you are trying to create.", - iconName: "Help", -}; -HelpTopPopover.parameters = { - chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "auto", - }, - }, -}; -HelpTopPopover.storyName = "Help icon - top popover"; - -export const HelpMaxWidthPopover = Template.bind({}); -HelpMaxWidthPopover.tags = ["!dev"]; -HelpMaxWidthPopover.args = { - customStyles: { - "inline-size": "275px", - "--mod-spectrum-contextual-help-popover-maximum-width": "180px", - "margin-bottom": "270px", - }, - title: "Need help?", - body: "Reach out to your admin for help regarding the document you are trying to create.", - iconName: "Help", -}; -HelpMaxWidthPopover.parameters = { - chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "auto", - }, - }, -}; -HelpMaxWidthPopover.storyName = "Help icon - max width popover"; - // ********* VRT ONLY ********* // export const WithForcedColors = ContextualHelpGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/contextualhelp/stories/contextualhelp.test.js b/components/contextualhelp/stories/contextualhelp.test.js index 7fea0b99dc3..c0b64328f14 100644 --- a/components/contextualhelp/stories/contextualhelp.test.js +++ b/components/contextualhelp/stories/contextualhelp.test.js @@ -8,15 +8,7 @@ export const ContextualHelpGroup = Variants({ testHeading: "Default", customStyles: { "inline-size": "275px", - "margin-bottom": "170px", - }, - }, - { - testHeading: "Max-width popover", - customStyles: { - "inline-size": "275px", - "margin-bottom": "275px", - "--mod-spectrum-contextual-help-popover-maximum-width": "150px", + "margin-bottom": "200px", }, }, { @@ -25,17 +17,14 @@ export const ContextualHelpGroup = Variants({ "inline-size": "275px", "margin-bottom": "200px", }, - link: { - text: "Learn about permissions", - url: "#", - }, + link: true, }, { testHeading: "Help", - iconName: "Help", + iconName: "HelpCircle", customStyles: { "inline-size": "275px", - "margin-bottom": "170px", + "margin-bottom": "200px", }, }, ], diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js index aaeac140d32..f6097cfd151 100644 --- a/components/contextualhelp/stories/template.js +++ b/components/contextualhelp/stories/template.js @@ -21,6 +21,9 @@ export const Template = ({ customStyles = {}, customClasses = [], } = {}, context = {}) => { + const { globals = {} } = context; + const scale = globals.scale ?? "medium"; + return html` <div class=${classMap({ @@ -34,7 +37,7 @@ export const Template = ({ isOpen: true, trigger: (passthrough) => ActionButton({ ...passthrough, - size: "xs", + size: scale === "medium" ? "xs" : "s", iconName, iconSet, customClasses: [`${rootClass}-button`], @@ -44,8 +47,8 @@ export const Template = ({ body ? html`<p class="${rootClass}-body">${body}</p>` : "", link ? Link({ - text: link.text, - url: link.url, + text: "Link text", + url: "#", customClasses: [`${rootClass}-link`], }) : nothing, diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md index 153de006cac..8b211a3f930 100644 --- a/components/datepicker/CHANGELOG.md +++ b/components/datepicker/CHANGELOG.md @@ -1,5 +1,22 @@ # Change log +## 5.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/pickerbutton@7.0.0-next.0 + - @spectrum-css/calendar@8.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 4.1.1 ### Patch Changes @@ -250,6 +267,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 2.1.4 diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index f52f1b93cd6..cf8fffe86db 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -140,7 +140,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-date-picker-initial-height"], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-hover-disabled", diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 7b20a28ae6b..2c6cd24fc1f 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -11,13 +11,14 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); + --spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100)); --spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0); --spectrum-datepicker-border-width: var(--spectrum-border-width-100); --spectrum-datepicker-min-width: var(--mod-datepicker-min-width, var(--spectrum-field-width)); + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); /* button */ @@ -85,8 +86,10 @@ } &.is-invalid { + /* @passthrough start */ --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button)); --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet)); + /* @passthrough end */ } &:not(.spectrum-DatePicker--quiet, .is-disabled) { diff --git a/components/datepicker/package.json b/components/datepicker/package.json index ceb7294fdff..505c33c19b6 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/datepicker", - "version": "4.1.1", + "version": "5.0.0-next.1", "description": "The Spectrum CSS datepicker component", "license": "Apache-2.0", "author": "Adobe", @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/calendar": ">=7.0.0 <8.0.0", - "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/calendar": ">=8.0.0-next.0", + "@spectrum-css/pickerbutton": ">=7.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/calendar": { @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/calendar": "7.1.0", - "@spectrum-css/pickerbutton": "6.1.2", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/textfield": "8.1.1", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/calendar": "8.0.0-next.1", + "@spectrum-css/pickerbutton": "7.0.0-next.1", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/textfield": "9.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24e..eebb928df80 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -9,9 +9,6 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const DatePicker = ({ rootClass = "spectrum-DatePicker", diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css deleted file mode 100644 index ead071e6f18..00000000000 --- a/components/datepicker/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-75); - } -} diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css deleted file mode 100644 index 05b3ca88ae4..00000000000 --- a/components/datepicker/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - } -} diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/datepicker/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/dial/CHANGELOG.md b/components/dial/CHANGELOG.md index 3cdd7615c66..ef4b6aca524 100644 --- a/components/dial/CHANGELOG.md +++ b/components/dial/CHANGELOG.md @@ -1,10 +1,19 @@ # Change log +## 6.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 5.2.0 ### Minor Changes -- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. +📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! + +By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. ## 5.1.0 diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index cf8d026a3b2..1d91c2bb539 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -112,10 +112,6 @@ "--spectrum-gray-800", "--spectrum-line-height-200" ], - "system-theme": [ - "--system-dial-background-color-default", - "--system-dial-handle-marker-color-key-focus" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-dial-border-color", diff --git a/components/dial/index.css b/components/dial/index.css index 8aee8cef361..4e891ef1b17 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Dial { + --spectrum-dial-background-color-default: var(--spectrum-gray-75); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); @@ -24,6 +25,8 @@ --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-label-text-color: var(--spectrum-gray-700); --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); diff --git a/components/dial/package.json b/components/dial/package.json index 412043ae050..ba43da6712b 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dial", - "version": "5.2.0", + "version": "6.0.0-next.0", "description": "The Spectrum CSS dial component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 9e9970e234b..4491aa2b861 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -35,7 +35,11 @@ export default { parameters: { packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = DialGroup.bind(); diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js index c8f25c2175b..547fb97f661 100644 --- a/components/dial/stories/template.js +++ b/components/dial/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Dial", diff --git a/components/dial/themes/express.css b/components/dial/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/dial/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css deleted file mode 100644 index 410196c3916..00000000000 --- a/components/dial/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - } -} diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css deleted file mode 100644 index 24077607a8b..00000000000 --- a/components/dial/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - } -} diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md index e2ddffb8aaa..953a7194c43 100644 --- a/components/dialog/CHANGELOG.md +++ b/components/dialog/CHANGELOG.md @@ -1,5 +1,37 @@ # Change log +## 13.0.0-next.3 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/modal@8.0.0-next.1 + - @spectrum-css/underlay@7.0.0-next.0 + +## 13.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf)]: + - @spectrum-css/modal@7.1.1-next.0 + +## 13.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + +## 13.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/closebutton@7.0.0-next.0 + - @spectrum-css/buttongroup@10.0.0-next.0 + ## 12.1.0 ### Minor Changes @@ -238,6 +270,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 9.2.4 diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 812542da227..738156392db 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -2,100 +2,140 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Dialog", - ".spectrum-Dialog .spectrum-Dialog-divider", - ".spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog .spectrum-Dialog-header", + ".spectrum-Dialog--dismissible .spectrum-Dialog-grid", + ".spectrum-Dialog--dismissible .spectrum-Dialog-grid .spectrum-Dialog-footer", ".spectrum-Dialog--fullscreen", ".spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-closeButton", ".spectrum-Dialog--fullscreen .spectrum-Dialog-content", ".spectrum-Dialog--fullscreen .spectrum-Dialog-footer", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-grid", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-header", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper", ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading", - ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider", ".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog--fullscreenTakeover", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-closeButton", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading", ".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid", - ".spectrum-Dialog--noDivider .spectrum-Dialog-divider", - ".spectrum-Dialog--noDivider .spectrum-Dialog-heading", ".spectrum-Dialog--sizeL", ".spectrum-Dialog--sizeS", ".spectrum-Dialog-buttonGroup", - ".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter", + ".spectrum-Dialog-buttonGroup--noFooter", ".spectrum-Dialog-closeButton", ".spectrum-Dialog-content", ".spectrum-Dialog-footer", - ".spectrum-Dialog-footer > *", - ".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button", + ".spectrum-Dialog-footer .spectrum-Dialog-footerContent", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-footerContent)", + ".spectrum-Dialog-grid", ".spectrum-Dialog-header", + ".spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper", ".spectrum-Dialog-heading", - ".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader", - ".spectrum-Dialog-hero", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer" + ".spectrum-Dialog-hero" ], "modifiers": [ - "--mod-dialog-confirm-border-radius", - "--mod-dialog-confirm-buttongroup-padding-top", - "--mod-dialog-confirm-close-button-padding", - "--mod-dialog-confirm-close-button-size", - "--mod-dialog-confirm-description-font-weight", - "--mod-dialog-confirm-description-margin", - "--mod-dialog-confirm-description-padding", - "--mod-dialog-confirm-description-text-color", - "--mod-dialog-confirm-description-text-line-height", - "--mod-dialog-confirm-description-text-size", - "--mod-dialog-confirm-divider-block-spacing-end", - "--mod-dialog-confirm-divider-block-spacing-start", - "--mod-dialog-confirm-divider-height", - "--mod-dialog-confirm-footer-padding-top", - "--mod-dialog-confirm-gap-size", - "--mod-dialog-confirm-hero-height", - "--mod-dialog-confirm-large-width", - "--mod-dialog-confirm-medium-width", - "--mod-dialog-confirm-padding-grid", - "--mod-dialog-confirm-small-width", - "--mod-dialog-confirm-title-text-color", - "--mod-dialog-confirm-title-text-line-height", - "--mod-dialog-confirm-title-text-size", - "--mod-dialog-fullscreen-header-text-size", - "--mod-dialog-heading-font-weight", - "--mod-dialog-min-inline-size", - "--mod-dialog-width" - ], - "component": [ - "--spectrum-dialog-confirm-border-radius", - "--spectrum-dialog-confirm-buttongroup-padding-top", - "--spectrum-dialog-confirm-close-button-padding", - "--spectrum-dialog-confirm-close-button-size", - "--spectrum-dialog-confirm-description-padding", - "--spectrum-dialog-confirm-description-text-color", - "--spectrum-dialog-confirm-description-text-size", - "--spectrum-dialog-confirm-divider-block-spacing-end", - "--spectrum-dialog-confirm-divider-block-spacing-start", - "--spectrum-dialog-confirm-gap-size", - "--spectrum-dialog-confirm-hero-height", - "--spectrum-dialog-confirm-padding-grid", - "--spectrum-dialog-confirm-title-text-size" + "--mod-standard-dialog-background-color", + "--mod-standard-dialog-border-radius", + "--mod-standard-dialog-description-font-size", + "--mod-standard-dialog-description-font-weight", + "--mod-standard-dialog-description-line-height", + "--mod-standard-dialog-description-text-color", + "--mod-standard-dialog-header-content-font-size", + "--mod-standard-dialog-heading-font-size", + "--mod-standard-dialog-heading-font-weight", + "--mod-standard-dialog-heading-line-height", + "--mod-standard-dialog-heading-text-color", + "--mod-standard-dialog-hero-block-size", + "--mod-standard-dialog-max-width", + "--mod-standard-dialog-max-width-large", + "--mod-standard-dialog-max-width-small", + "--mod-standard-dialog-min-inline-size", + "--mod-standard-dialog-spacing-description-to-footer", + "--mod-standard-dialog-spacing-edge-to-close-button", + "--mod-standard-dialog-spacing-footer-to-button-group", + "--mod-standard-dialog-spacing-grid-padding", + "--mod-standard-dialog-spacing-title-to-description", + "--mod-standard-dialog-spacing-title-to-header-content", + "--mod-takeover-dialog-grid-spacing", + "--mod-takeover-dialog-spacing-header-content-gap", + "--mod-takeover-dialog-title-font-size" ], + "component": [], "global": [ - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-height-100", - "--spectrum-component-pill-edge-to-text-100", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", - "--spectrum-regular-font-weight", + "--spectrum-background-layer-2-color", + "--spectrum-black-rgb", + "--spectrum-body-color", + "--spectrum-body-sans-serif-font-style", + "--spectrum-body-sans-serif-font-weight", + "--spectrum-corner-radius-extra-large-default", + "--spectrum-heading-color", + "--spectrum-line-height-200", + "--spectrum-overlay-opacity", + "--spectrum-sans-font-family-stack", "--spectrum-spacing-200", "--spectrum-spacing-300", - "--spectrum-spacing-50", - "--spectrum-spacing-600" + "--spectrum-spacing-400", + "--spectrum-spacing-500", + "--spectrum-standard-dialog-background-color", + "--spectrum-standard-dialog-body-font-size", + "--spectrum-standard-dialog-border-radius", + "--spectrum-standard-dialog-description-font-family", + "--spectrum-standard-dialog-description-font-size", + "--spectrum-standard-dialog-description-font-style", + "--spectrum-standard-dialog-description-font-weight", + "--spectrum-standard-dialog-description-line-height", + "--spectrum-standard-dialog-description-text-color", + "--spectrum-standard-dialog-header-content-font-size", + "--spectrum-standard-dialog-heading-font-family", + "--spectrum-standard-dialog-heading-font-size", + "--spectrum-standard-dialog-heading-font-style", + "--spectrum-standard-dialog-heading-font-weight", + "--spectrum-standard-dialog-heading-line-height", + "--spectrum-standard-dialog-heading-text-color", + "--spectrum-standard-dialog-hero-block-size", + "--spectrum-standard-dialog-max-width", + "--spectrum-standard-dialog-maximum-width-large", + "--spectrum-standard-dialog-maximum-width-medium", + "--spectrum-standard-dialog-maximum-width-small", + "--spectrum-standard-dialog-min-inline-size", + "--spectrum-standard-dialog-minimum-width", + "--spectrum-standard-dialog-padding", + "--spectrum-standard-dialog-spacing-description-to-footer", + "--spectrum-standard-dialog-spacing-edge-to-close-button", + "--spectrum-standard-dialog-spacing-edge-to-content", + "--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end", + "--spectrum-standard-dialog-spacing-footer-to-button-group", + "--spectrum-standard-dialog-spacing-grid-padding", + "--spectrum-standard-dialog-spacing-title-to-description", + "--spectrum-standard-dialog-spacing-title-to-header-content", + "--spectrum-standard-dialog-title-font-size", + "--spectrum-takeover-dialog-block-size", + "--spectrum-takeover-dialog-grid-spacing", + "--spectrum-takeover-dialog-height", + "--spectrum-takeover-dialog-inline-size", + "--spectrum-takeover-dialog-spacing-grid-padding", + "--spectrum-takeover-dialog-spacing-header-content-gap", + "--spectrum-takeover-dialog-spacing-header-gap", + "--spectrum-takeover-dialog-spacing-title-to-body", + "--spectrum-takeover-dialog-spacing-title-to-content", + "--spectrum-takeover-dialog-title-font-size", + "--spectrum-takeover-dialog-width", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight", + "--spectrum-title-size-xxl" + ], + "passthroughs": [ + "--mod-buttongroup-flex-wrap", + "--mod-buttongroup-justify-content" ], - "system-theme": [], - "passthroughs": [], "high-contrast": [] } diff --git a/components/dialog/index.css b/components/dialog/index.css index 39ed5be57c7..b4ea3002d30 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -12,200 +12,235 @@ */ .spectrum-Dialog { - --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-medium); + --spectrum-standard-dialog-min-inline-size: var(--spectrum-standard-dialog-minimum-width); + --spectrum-standard-dialog-border-radius: var(--spectrum-corner-radius-extra-large-default); + + /* Fonts */ + --spectrum-standard-dialog-heading-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-standard-dialog-heading-font-size: var(--spectrum-standard-dialog-title-font-size); + --spectrum-standard-dialog-heading-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-standard-dialog-heading-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-standard-dialog-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-standard-dialog-description-font-size: var(--spectrum-standard-dialog-body-font-size); + --spectrum-standard-dialog-description-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-standard-dialog-description-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-standard-dialog-header-content-font-size: var(--spectrum-standard-dialog-body-font-size); + + --spectrum-standard-dialog-heading-line-height: var(--spectrum-title-line-height); + --spectrum-standard-dialog-description-line-height: var(--spectrum-line-height-200); + + /* Colors */ + --spectrum-standard-dialog-heading-text-color: var(--spectrum-heading-color); + --spectrum-standard-dialog-description-text-color: var(--spectrum-body-color); + --spectrum-standard-dialog-background-color: var(--spectrum-background-layer-2-color); + + /* Spacing */ + --spectrum-standard-dialog-padding: var(--spectrum-standard-dialog-spacing-edge-to-content); + --spectrum-standard-dialog-spacing-title-to-description: var(--spectrum-spacing-300); + --spectrum-standard-dialog-spacing-description-to-footer: var(--spectrum-spacing-500); + --spectrum-standard-dialog-spacing-title-to-header-content: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-edge-to-header-content-inline-end: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-footer-to-button-group: var(--spectrum-spacing-400); + + /* Grid */ + --spectrum-standard-dialog-spacing-grid-padding: var(--spectrum-standard-dialog-padding); + --spectrum-standard-dialog-spacing-edge-to-close-button: var(--spectrum-spacing-200); + + /* Hero */ + --spectrum-standard-dialog-hero-block-size: 140px; + + /* Passthrough for nested component(s) */ + --mod-buttongroup-justify-content: flex-end; + --mod-buttongroup-flex-wrap: nowrap; + + /* Fullscreen/fullscreenTakeover */ + --spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl); + --spectrum-takeover-dialog-grid-spacing: var(--spectrum-takeover-dialog-spacing-grid-padding); + --spectrum-takeover-dialog-spacing-header-content-gap: var(--spectrum-takeover-dialog-spacing-header-gap); + --spectrum-takeover-dialog-spacing-title-to-content: var(--spectrum-takeover-dialog-spacing-title-to-body); + --spectrum-takeover-dialog-inline-size: var(--spectrum-takeover-dialog-width); + --spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height); +} +.spectrum-Dialog { /* Be a flexbox to allow a full sized content area that scrolls */ display: flex; /* Allow 100% width, taking into account padding */ box-sizing: border-box; - /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ - inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px)); - min-inline-size: var(--mod-dialog-min-inline-size, 288px); + /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ + inline-size: var(--mod-standard-dialog-max-width, var(--spectrum-standard-dialog-max-width)); + min-inline-size: var(--mod-standard-dialog-min-inline-size, var(--spectrum-standard-dialog-min-inline-size)); max-inline-size: 100%; - max-block-size: inherit; - + background-color: var(--mod-standard-dialog-background-color, var(--spectrum-standard-dialog-background-color)); outline: none; + border-radius: var(--mod-standard-dialog-border-radius, var(--spectrum-standard-dialog-border-radius)); + overflow: hidden; } .spectrum-Dialog--sizeS { - --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-small); + inline-size: var(--mod-standard-dialog-max-width-small, var(--spectrum-standard-dialog-max-width)); } .spectrum-Dialog--sizeL { - --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-large); + inline-size: var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-max-width)); } .spectrum-Dialog-hero { grid-area: hero; - block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height)); - border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); - border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + block-size: var(--mod-standard-dialog-hero-block-size, var(--spectrum-standard-dialog-hero-block-size)); background-size: cover; background-position: center center; - overflow: hidden; } -.spectrum-Dialog .spectrum-Dialog-grid { +/* Non-Dismissible Dialog (no close button) */ +.spectrum-Dialog-grid { display: grid; grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + minmax(0, auto) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + "hero hero hero hero hero hero hero" + ". . . . . . ." + ". heading header header header header ." + ". content content content content content ." + ". footer footer footer buttonGroup buttonGroup ." + ". . . . . . ."; inline-size: 100%; } +/* the dialog's heading/title */ .spectrum-Dialog-heading { grid-area: heading; - margin: 0; - - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); + margin-block: 0; + font-size: var(--mod-standard-dialog-heading-font-size, var(--spectrum-standard-dialog-heading-font-size)); + font-weight: var(--mod-standard-dialog-heading-font-weight, var(--spectrum-standard-dialog-heading-font-weight)); + font-style: var(--spectrum-standard-dialog-heading-font-style); + font-family: var(--spectrum-standard-dialog-heading-font-family); + line-height: var(--mod-standard-dialog-heading-line-height, var(--spectrum-standard-dialog-heading-line-height)); + color: var(--mod-standard-dialog-heading-text-color, var(--spectrum-standard-dialog-heading-text-color)); outline: none; /* Hide focus outline */ - - padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - - &.spectrum-Dialog-heading--noHeader { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } } +/* the container for the heading and any additional header content */ .spectrum-Dialog-header { grid-area: header; display: flex; + max-inline-size: 100%; + margin-block-end: var(--mod-standard-dialog-spacing-title-to-description, var(--spectrum-standard-dialog-spacing-title-to-description)); + gap: var(--mod-standard-dialog-spacing-title-to-header-content, var(--spectrum-standard-dialog-spacing-title-to-header-content)); - /* Without this, buttons will be stretched */ - align-items: center; - justify-content: flex-end; + /* Without this, buttons will be stretched */ + align-items: flex-start; + justify-content: space-between; box-sizing: border-box; outline: none; /* Hide focus outline around header */ -} - -.spectrum-Dialog .spectrum-Dialog-divider { - grid-area: divider; - inline-size: 100%; - margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)); - margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)); -} -/* remove top vertical padding of spectrum-Dialog-content from bottom margin of first divider after heading */ -.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider { - margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2)); -} - -.spectrum-Dialog--noDivider { - .spectrum-Dialog-divider { - display: none; - } - - .spectrum-Dialog-heading { - padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50))); + /* additional header content should grow/shrink with the text, but only until it takes up half of the header */ + > .spectrum-Dialog-headerContentWrapper { + max-inline-size: fit-content; + flex: 1 1 100%; + font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size)); + text-wrap: pretty; } } .spectrum-Dialog-content { grid-area: content; box-sizing: border-box; - - /* - v2 is currently worse, inputs that get focus rings get a slight clipping unless overflow: visible replaces this line - we should think of a better way to handle this, see padding/margin below for fix - */ overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; /* Hide focus outline */ - - font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); - font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100)); - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); - - /* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */ - padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); - margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1)); + font-size: var(--mod-standard-dialog-description-font-size, var(--spectrum-standard-dialog-description-font-size)); + font-weight: var(--mod-standard-dialog-description-font-weight, var(--spectrum-standard-dialog-description-font-weight)); + font-family: var(--spectrum-standard-dialog-description-font-family); + font-style: var(--spectrum-standard-dialog-description-font-style); + line-height: var(--mod-standard-dialog-description-line-height, var(--spectrum-standard-dialog-description-line-height)); + color: var(--mod-standard-dialog-description-text-color, var(--spectrum-standard-dialog-description-text-color)); } .spectrum-Dialog-footer { - grid-area: footer; + grid-area: footer / footer / buttonGroup / buttonGroup; + max-inline-size: 100%; + display: flex; + align-items: flex-end; - /* this padding isn't built into the grid because it disappears with this footer */ - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600)); + /* this recreates padding between the footer content and button group. It should be safe as button group is always end aligned */ + gap: var(--mod-standard-dialog-spacing-footer-to-button-group, var(--spectrum-standard-dialog-spacing-footer-to-button-group)); - display: flex; - flex-wrap: wrap; + /* this padding isn't built into the grid because it disappears with this footer */ + padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); outline: none; /* Hide focus outline */ - /* Both selectors are required to override the button + button rule */ - > *, - > .spectrum-Button + .spectrum-Button { - margin-block-end: 0; + .spectrum-Dialog-footerContent { + /* this attempts to give as much space as possible for the button group, particularly to avoid stacking on mobile. Some sizes still may have to stack. */ + flex: 1 1 100%; + } + + &:has(.spectrum-Dialog-footerContent), + &:has(.spectrum-Dialog-buttonGroup) { + justify-content: space-between; } } .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; +} - /* this padding isn't built into the grid because it disappears with this buttonGroup */ - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); - display: flex; - justify-content: flex-end; - - /* this padding should be safe as button group is always end aligned */ - padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - - &.spectrum-Dialog-buttonGroup--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; - } +.spectrum-Dialog-buttonGroup--noFooter { + padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); } -.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { +/* Dismissible Dialog (with close button) */ +.spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end)) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading header header typeIcon closeButton closeButton" - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - - .spectrum-Dialog-buttonGroup { - display: none; - } + "hero hero hero hero hero hero" + ". . . . closeButton closeButton" + ". heading header header closeButton closeButton" + ". content content content content ." + ". footer footer footer footer ." + ". . . . . ."; .spectrum-Dialog-footer { - grid-area: footer / footer/ buttonGroup / buttonGroup; - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + grid-area: footer; } } @@ -216,19 +251,18 @@ align-self: start; justify-self: end; - margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); - margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); + margin-block-start: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); + margin-inline-end: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); } .spectrum-Dialog--fullscreen { - inline-size: 100%; - block-size: 100%; + inline-size: var(--spectrum-takeover-dialog-inline-size); + block-size: var(--spectrum-takeover-dialog-block-size); } .spectrum-Dialog--fullscreenTakeover { - inline-size: 100%; - block-size: 100%; - + inline-size: var(--spectrum-takeover-dialog-inline-size); + block-size: var(--spectrum-takeover-dialog-block-size); border-radius: 0; } @@ -237,29 +271,50 @@ max-block-size: none; max-inline-size: none; - &.spectrum-Dialog .spectrum-Dialog-grid { + .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)) + 1fr + auto + auto + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)); + grid-template-rows: + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)) + auto + 1fr + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)); grid-template-areas: ". . . . ." ". heading header buttonGroup ." - ". divider divider divider ." ". content content content ." ". . . . ."; } + .spectrum-Dialog-header { + grid-area: heading; + gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); + margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); + margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content); + + /* components in fullscreen/fullscreenTakeover dialogs are centered in the headerContentWrapper */ + > .spectrum-Dialog-headerContentWrapper { + max-inline-size: unset; + display: inline-flex; + justify-content: center; + } + } + .spectrum-Dialog-heading { - font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); + font-size: var(--mod-takeover-dialog-title-font-size, var(--spectrum-takeover-dialog-title-font-size)); } - .spectrum-Dialog-content { - max-block-size: none; + .spectrum-Dialog-closeButton { + display: none; } - .spectrum-Dialog-footer, - .spectrum-Dialog-buttonGroup { - padding-block-start: 0; + .spectrum-Dialog-content { + max-block-size: none; } .spectrum-Dialog-footer { @@ -268,75 +323,119 @@ .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; - align-self: start; } } @media screen and (width <= 700px) { - .spectrum-Dialog .spectrum-Dialog-grid { + .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, auto) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + + /* TODO: investigate if we could refactor the grid to make the footer text/checkbox stack on top of the button group */ grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." - ". heading heading heading heading ." + ". heading heading heading heading ." ". header header header header ." - ". divider divider divider divider ." ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; } - .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { + .spectrum-Dialog-footer { + flex-direction: column; + } + + .spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, auto) + minmax(0, calc(var(--spectrum-standard-dialog-spacing-edge-to-content) - var(--spectrum-standard-dialog-spacing-edge-to-close-button))) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" - ". heading heading heading heading closeButton closeButton" + ". heading heading heading heading closeButton closeButton" ". header header header header header ." - ". divider divider divider divider divider ." ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." + ". footer footer footer footer footer ." ". . . . . . ."; } .spectrum-Dialog .spectrum-Dialog-header { + display: flex; + flex-direction: column; + align-items: flex-start; justify-content: flex-start; + gap: 0; } .spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover { &.spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: ". . ." ". heading ." ". header ." - ". divider ." ". content ." + ". . ." ". buttonGroup ." ". . ."; } - .spectrum-Dialog-buttonGroup { - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + .spectrum-Dialog-header { + margin-inline-end: 0; } .spectrum-Dialog-heading { - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + margin-inline-end: 0; } } + + .spectrum-Dialog-heading { + margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description); + } } @media (forced-colors: active) { .spectrum-Dialog { - border: solid; + border: 1px solid rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } } diff --git a/components/dialog/package.json b/components/dialog/package.json index 4b27d432eef..0cfd3131e61 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dialog", - "version": "12.1.0", + "version": "13.0.0-next.3", "description": "The Spectrum CSS dialog component", "license": "Apache-2.0", "author": "Adobe", @@ -25,13 +25,21 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/underlay": ">=6.0.0 <7.0.0" + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/buttongroup": ">=10.0.0-next.0", + "@spectrum-css/closebutton": ">=7.0.0-next.0", + "@spectrum-css/divider": ">=6.0.0-next.0", + "@spectrum-css/modal": ">=8.0.0-next.1", + "@spectrum-css/tokens": ">=16.1.0-next.0", + "@spectrum-css/underlay": ">=7.0.0-next.0" }, "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + }, + "@spectrum-css/buttongroup": { + "optional": true + }, "@spectrum-css/closebutton": { "optional": true }, @@ -49,12 +57,14 @@ } }, "devDependencies": { - "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/closebutton": "6.1.0", - "@spectrum-css/divider": "5.1.0", - "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "16.0.2", - "@spectrum-css/underlay": "6.1.0" + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/buttongroup": "10.0.0-next.1", + "@spectrum-css/closebutton": "7.0.0-next.1", + "@spectrum-css/divider": "6.0.0-next.1", + "@spectrum-css/modal": "8.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5", + "@spectrum-css/typography": "9.0.0-next.0", + "@spectrum-css/underlay": "7.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 45bec9bc1d1..791316711fd 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -1,6 +1,8 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen, size } from "@spectrum-css/preview/types"; +import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js"; +import { Template as Table } from "@spectrum-css/table/stories/template.js"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -8,16 +10,32 @@ import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialo import { Template } from "./template.js"; /** - * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. + * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows. + * + * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs). + * + * ## Usage with modal component + * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence. * - * The alert variants that were previously a part of Dialog were moved to their own component, [Alert Dialog](/docs/components-alert-dialog--docs). */ export default { title: "Dialog", component: "Dialog", argTypes: { + size: size(["s", "m", "l"]), heading: { name: "Heading", + description: "Title for the dialog.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "text" }, + }, + header: { + name: "Additional header content", + description: "Controls header content.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -28,6 +46,7 @@ export default { content: { table: { disable: true } }, hasFooter: { name: "Has footer", + description: "Adds a footer to the dialog, containing the button group, checkbox, and footer text. Currently only supported in the default layout.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -35,8 +54,29 @@ export default { }, control: "boolean", }, - footer: { table: { disable: true } }, - size: size(["s", "m", "l"]), + isOpen, + footer: { + name: "Footer text", + description: "Text content of the dialog footer. Represents the checkbox label if a checkbox is present, or stands alone if there is no checkbox. Currently only supported in the default layout.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "text" }, + if: { arg: "hasFooter", truthy: true, }, + }, + hasCheckbox: { + name: "Has checkbox", + description: "Adds a checkbox to the footer content. Currently only supported in the default layout.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: { type: "boolean" }, + if: { arg: "hasFooter", truthy: true, }, + }, layout: { name: "Layout", type: { name: "string" }, @@ -45,6 +85,7 @@ export default { type: { summary: "string" }, category: "Component", defaultValue: { summary: "Default" }, + disable: true, }, options: ["default", "fullscreen", "fullscreenTakeover"], control: "select", @@ -59,8 +100,8 @@ export default { control: "boolean", if: { arg: "layout", eq: "default" }, }, - hasDivider: { - name: "Divider", + showModal: { + name: "Wrap the dialog in a modal", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -68,42 +109,46 @@ export default { }, control: "boolean", }, - showModal: { - name: "Wrap the dialog in a modal", + hasHeroImage: { + name: "Has hero image", type: { name: "boolean" }, + description: "Adds a cover image to the header of a dialog.", table: { type: { summary: "boolean" }, - category: "Component", + category: "Content", }, control: "boolean", + if: { arg: "layout", eq: "default" }, }, - isOpen, heroImageUrl: { name: "Hero Image", type: { name: "string" }, - description: "Adds a cover image to the header of a dialog.", + description: "Select a cover image for the hero section of a dialog.", + defaultValue: "example-card-portrait.png", table: { type: { summary: "string" }, category: "Content", + defaultValue: { summary: "example-card-portrait.png" }, }, control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, - if: { arg: "layout", eq: "default" }, + if: { arg: "hasHeroImage", truthy: true }, }, }, args: { rootClass: "spectrum-Dialog", hasFooter: true, + footer: "Do not show this message again.", isDismissible: false, - hasDivider: true, isOpen: true, - showModal: true, + showModal: false, size: "m", layout: "default", + hasCheckbox: true, + hasHeroImage: false, }, parameters: { - layout: "fullscreen", actions: { - handles: ["click .spectrum-Dialog button"], + handles: [], }, docs: { story: { @@ -117,22 +162,29 @@ export default { }, packageJson, metadata, + layout: "fullscreen", + status: { + type: "migrated", + }, }, decorators: [ withUnderlayWrapper, ], + tags: ["migrated"], }; -const ExampleContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis."; +const ExampleContent = "Standard dialog description. This should briefly communicate any additional information or context about the standard dialog title, to help users make one of the decisions offered by the buttons. Make it no more than a few short sentences."; /** - * The default size for dialog is medium. + * The default size for dialog is medium. The default dialog also has a checkbox in the footer. */ export const Default = DialogGroup.bind({}); Default.args = { heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", + header: "* Required", + showModal: true, content: [ - (passthroughs, context) => Typography({ + (passthroughs, context) => Typography({ semantics: "body", size: "m", content: [ ExampleContent ], @@ -165,7 +217,7 @@ DefaultLarge.args = { }; /** - * A dialog that can be dismissed without taking an action. Dismissible dialogs should never have buttons. + * A dialog that can be dismissed without taking an action. */ export const Dismissible = Template.bind({}); Dismissible.tags = ["!dev"]; @@ -177,25 +229,12 @@ Dismissible.args = { isDismissible: true, }; -/** - * Dialogs can forgo the divider if they have content that spans the entire width of the dialog. - */ -export const NoDivider = Template.bind({}); -NoDivider.tags = ["!dev"]; -NoDivider.parameters = { - chromatic: { disableSnapshot: true }, -}; -NoDivider.args = { - ...Default.args, - isDismissible: true, - hasDivider: false, -}; - /** * Dialogs can have a hero or cover image header. */ export const WithHero = Template.bind({}); WithHero.tags = ["!dev"]; +WithHero.storyName = "With hero image"; WithHero.parameters = { docs: { story: { @@ -206,9 +245,7 @@ WithHero.parameters = { }; WithHero.args = { ...Default.args, - isDismissible: true, hasHeroImage: true, - heroImageUrl: "example-card-portrait.png", }; /** @@ -217,54 +254,121 @@ WithHero.args = { export const WithScroll = Template.bind({}); WithScroll.args = { ...Default.args, + content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ], customStyles: { "max-block-size": "400px", } }; +WithScroll.storyName = "Scrollable"; WithScroll.tags = ["!dev"]; WithScroll.parameters = { chromatic: { disableSnapshot: true }, }; /** - * A fullscreen dialog will automatically fill almost all of the available screen space. A margin is included around the outside of the dialog. + * The fullscreen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height. + * + * Fullscreen dialogs do not support a close button, and are not dismissible. + * + * Implementations may swap out the extra header content and body content for other components, like the [steplist](/docs/components-steplist--docs) and [table](/docs/components-table--docs) seen in this example. Components in the extra header content area will be centered. */ export const Fullscreen = DialogFullscreen.bind({}); +Fullscreen.args = { + ...Default.args, + header:[ + (passthroughs, context) => Steplist({ + ...passthroughs, + items: [ + { + label: "Enter records", + isComplete: true, + }, + { + label: "Confirmation", + isComplete: true, + }, + { + label: "Summary", + isSelected: true, + }, + ], + }, context), + ], + content: [ + (passthroughs, context) => Table({ + ...passthroughs, + showThumbnails: true, + rowItems: [ + { + cellContent: ["Table Row Alpha", "Test", "2"], + }, + { + cellContent: ["Table Row Bravo", "Test", "28"], + }, + { + cellContent: [ + "Table Row Charlie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + "Test", + "23", + ], + }, + { + cellContent: ["Table Row Delta", "Test", "7"], + }, + { + cellContent: ["Summary Row", "", "60"], + isSummaryRow: true, + }, + ], + }, context), + ], + layout: "fullscreen", + hasFooter: false, +}; Fullscreen.parameters = { chromatic: { disableSnapshot: true }, design: { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", - }, + } }; -Fullscreen.args = { - ...Default.args, - layout: "fullscreen", + +// TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter +// arg from the control table for the fullscreen and fullscreenTakeover stories only. Ideally, we +// could have some of our controls display when more than one arg is met to avoid custom argTypes. +// For instance, hasCheckbox would appear when layout: "default", AND footer is truthy. +// https://github.com/storybookjs/storybook/discussions/18542 +Fullscreen.argTypes = { + hasFooter: { table: { disable: true, } }, + header: { table: { disable: true, } }, }; /** - * A fullscreen takeover dialog will fill all of the available screen space. + * The fullscreen takeover variant is similar to the fullscreen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected. + * + * Fullscreen takeover dialogs do not support a close button, and are not dismissible. */ export const FullscreenTakeover = DialogFullscreenTakeover.bind({}); +FullscreenTakeover.storyName = "Fullscreen takeover"; FullscreenTakeover.parameters = { chromatic: { disableSnapshot: true }, design: { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", - }, + } }; FullscreenTakeover.args = { ...Default.args, layout: "fullscreenTakeover", - content: [ () => Typography({ - semantics: "body", - size: "m", - content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ], - })], + hasFooter: false, + content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent ], +}; +FullscreenTakeover.argTypes = { + hasFooter: { table: { disable: true, } }, }; // ********* VRT ONLY ********* // -export const WithForcedColors = DialogGroup.bind({}); +export const WithForcedColors = Default.bind({}); WithForcedColors.args = Default.args; WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { diff --git a/components/dialog/stories/dialog.test.js b/components/dialog/stories/dialog.test.js index f9b5acb6b2e..d5a9a5f076d 100644 --- a/components/dialog/stories/dialog.test.js +++ b/components/dialog/stories/dialog.test.js @@ -16,10 +16,6 @@ export const DialogGroup = Variants({ // TODO: The dialog's heading arg is getting passed as the "Sizing" heading arg (instead of the // TODO: word "Sizing"). We should be able to remove this arg once that no longers happens. heading: showTestingGrid ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit" : args.heading, - customStyles: { - ...(args.customStyles ?? {}), - "background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined, - }, }, context); }, sizeDirection: "column", @@ -42,41 +38,33 @@ export const DialogGroup = Variants({ }, { testHeading: "With hero/cover image", + hasHeroImage: true, heroImageUrl: "example-card-portrait.png", }, { testHeading: "With hero/cover image, dismissible", + hasHeroImage: true, heroImageUrl: "example-card-portrait.png", isDismissible: true, hasFooter: false, }, - { - testHeading: "No divider", - hasDivider: false, - }, - { - testHeading: "No divider, dismissible", - hasDivider: false, - isDismissible: true, - hasFooter: false, - }, - { - testHeading: "With hero/cover image, no divider", - hasDivider: false, - heroImageUrl: "example-card-portrait.png", - }, - { - testHeading: "With hero/cover image, no divider, dismissible", - hasDivider: false, - isDismissible: true, - hasFooter: false, - heroImageUrl: "example-card-portrait.png", - }, ], }); export const DialogFullscreen = Variants({ - Template, + Template: (args, context) => { + const { parameters: { showTestingGrid = false } = {} } = context; + + return Template({ + ...args, + /* + * Custom styles were added to make sure the VRTs catch the rounded corners + */ + customStyles: { + margin: showTestingGrid ? "16px" : undefined, + }, + }, context); + }, withSizes: false, wrapperStyles: { "background-color": "var(--spectrum-gray-50)" @@ -92,9 +80,6 @@ export const DialogFullscreen = Variants({ export const DialogFullscreenTakeover = Variants({ Template, withSizes: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, testData: [ { showModal: false, diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 86d2af5d050..b8c84b04a92 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -1,6 +1,6 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; +import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; -import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; @@ -14,17 +14,19 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Dialog", isDismissible = false, - hasDivider = true, isOpen = true, showModal = false, hasFooter = false, heading, + header = [], + hasCheckbox = false, content = [], footer = [], customClasses = [], id = getRandomId("dialog"), size = "m", layout, + hasHeroImage = false, heroImageUrl, customStyles = {}, } = {}, context = {}) => { @@ -38,10 +40,9 @@ export const Template = ({ <div class=${classMap({ [rootClass]: true, - [`${rootClass}--dismissable`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l), + [`${rootClass}--dismissible`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l), [`${rootClass}--${layout}`]: typeof layout !== "undefined", [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - [`${rootClass}--noDivider`]: !hasDivider, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -51,72 +52,126 @@ export const Template = ({ style=${ifDefined(styleMap(customStyles))} > <div class="${rootClass}-grid"> - ${when(typeof heroImageUrl !== "undefined", () => + ${when(hasHeroImage, () => html` <div class="spectrum-Dialog-hero" - style="background-image:url(${heroImageUrl})"> + style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})"> </div> ` )} - ${when(heading, () => html` - <h1 class="${rootClass}-heading">${heading}</h1> - `)} - ${when(hasDivider, () => - Divider({ - horizontal: true, - customClasses: [`${rootClass}-divider`], - }, context), + <div class="${rootClass}-header"> + ${when(heading, () => html` + <h1 class="${rootClass}-heading">${heading}</h1> + `)} + ${when(header, () => html` + <div class="${rootClass}-headerContentWrapper"> + <div class="${rootClass}-headerContent"> + ${renderContent(header)} + </div> + </div> + `, )} - <section class="${rootClass}-content"> - ${renderContent(content)} - </section> - ${when(hasFooter, () => { - return html` - <footer class="${rootClass}-footer" style=${styleMap({ - "justify-content": "flex-end", - })}> - ${when(typeof footer !== "undefined" && Array.isArray(footer) && footer.length > 0, - () => renderContent(footer), - )} - ${when(!isDismissible, () => html ` - ${ButtonGroup({ - items: [ - { - label: "Cancel", - treatment: "outline", - variant: "secondary", - }, - { - label: "Save", - treatment: "fill", - variant: "accent" - }, - ], - }, context)} - ` - )} - </footer> - `; - })} - ${when(isDismissible && layout !== "fullscreen" && layout !== "fullscreenTakeover", () => + </div> + <section class="${rootClass}-content">${renderContent(content)}</section> + ${when(isDismissible, () => CloseButton({ customClasses: [`${rootClass}-closeButton`], onclick: toggleOpen, }, context) )} + ${when(layout === "fullscreen" || layout === "fullscreenTakeover", () => html` + <div class="${rootClass}-buttonGroup"> + ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} + </div> + `)} + ${when(hasFooter, () => html` + <footer class="${rootClass}-footer"> + ${when(typeof footer !== "undefined", () => html` + <div class="${rootClass}-footerContent"> + ${when(hasCheckbox, () => html` + ${Checkbox({ + label: footer, + }, context)} + `, + () => + renderContent(footer) + )} + </div> + <div class="${rootClass}-buttonGroup"> + ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} + </div> + `, + () => html` + <div class="${rootClass}-noFooter"></div> + <div class="${rootClass}-buttonGroup"> + ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} + </div> + ` + )} + </footer> + `, + () => html` + <div class="${rootClass}-noFooter"></div> + `)} </div> </div> `; if (showModal) { - return html` - ${Modal({ - isOpen, - content: [ () => Dialog], - variant: layout, - }, context)} - `; + return Modal({ + isOpen, + content: Dialog, + variant: layout, + }, context); } else { return Dialog; diff --git a/components/divider/CHANGELOG.md b/components/divider/CHANGELOG.md index fcd5812ea1b..d3272d7082d 100644 --- a/components/divider/CHANGELOG.md +++ b/components/divider/CHANGELOG.md @@ -1,5 +1,53 @@ # Change log +## 6.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 6.0.0-next.0 + +### Major Changes + +- [#3557](https://github.com/adobe/spectrum-css/pull/3557) [`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914) Thanks [@cdransf](https://github.com/cdransf)! + +#### S2 divider migration + +This migrates the `divider` component to S2. Custom properties have been remapped and updated per the design specificiations. + +##### New properties + +```css +--spectrum-divider-horizontal-minimum-width +--spectrum-divider-vertical-minimum-height +``` + +##### New mods + +```css +--mod-divider-inline-minimum-size +--mod-divider-block-minimum-size +``` + +##### Removed mods + +```css +--mod-divider-background-color-large-static-black +--mod-divider-background-color-large-static-white +--mod-divider-background-color-medium-static-black +--mod-divider-background-color-medium-static-white +--mod-divider-background-color-small-static-black +--mod-divider-background-color-small-static-white +``` + +##### Additions + +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. + +The default size for the Storybook control has been changed to `medium` (the new default size for the component). All sizes are now displayed for the static color variants in the docs. + ## 5.1.0 ### Minor Changes diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index a485bf25e3b..94ce19f83fd 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -6,20 +6,15 @@ ".spectrum-Divider--sizeS", ".spectrum-Divider--staticBlack", ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL", - ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS", ".spectrum-Divider--staticWhite", ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL", - ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", - ".spectrum-Divider--vertical" + ".spectrum-Divider--vertical", + ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)" ], "modifiers": [ "--mod-divider-background-color", - "--mod-divider-background-color-large-static-black", - "--mod-divider-background-color-large-static-white", - "--mod-divider-background-color-medium-static-black", - "--mod-divider-background-color-medium-static-white", - "--mod-divider-background-color-small-static-black", - "--mod-divider-background-color-small-static-white", + "--mod-divider-block-minimum-size", + "--mod-divider-inline-minimum-size", "--mod-divider-thickness", "--mod-divider-vertical-align", "--mod-divider-vertical-height", @@ -27,12 +22,14 @@ ], "component": [ "--spectrum-divider-background-color", - "--spectrum-divider-background-color-static-black", - "--spectrum-divider-background-color-static-white", + "--spectrum-divider-block-minimum-size", + "--spectrum-divider-horizontal-minimum-width", + "--spectrum-divider-inline-minimum-size", "--spectrum-divider-thickness", "--spectrum-divider-thickness-large", "--spectrum-divider-thickness-medium", - "--spectrum-divider-thickness-small" + "--spectrum-divider-thickness-small", + "--spectrum-divider-vertical-minimum-height" ], "global": [ "--spectrum-gray-200", @@ -42,11 +39,6 @@ "--spectrum-transparent-white-200", "--spectrum-transparent-white-800" ], - "system-theme": [ - "--system-divider-background-color", - "--system-divider-background-color-static-black", - "--system-divider-background-color-static-white" - ], "passthroughs": [], "high-contrast": ["--highcontrast-divider-background-color"] } diff --git a/components/divider/index.css b/components/divider/index.css index 188aeea7ecf..b793b6c86a1 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,17 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Divider { - --highcontrast-divider-background-color: CanvasText; - } -} - .spectrum-Divider { + --spectrum-divider-background-color: var(--spectrum-gray-200); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + + --spectrum-divider-inline-minimum-size: var(--spectrum-divider-horizontal-minimum-width); + --spectrum-divider-block-minimum-size: var(--spectrum-divider-vertical-minimum-height); } .spectrum-Divider--sizeS { @@ -35,33 +31,19 @@ /* static white variant colors */ .spectrum-Divider--staticWhite { - /** @deprecated --mod-divider-background-color-medium-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-static-white)); - - &.spectrum-Divider--sizeS { - /** @deprecated --mod-divider-background-color-small-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-static-white)); - } + --spectrum-divider-background-color: var(--spectrum-transparent-white-200); &.spectrum-Divider--sizeL { - /** @deprecated --mod-divider-background-color-large-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-transparent-white-800)); + --spectrum-divider-background-color: var(--spectrum-transparent-white-800); } } /* static black variant colors */ .spectrum-Divider--staticBlack { - /** @deprecated --mod-divider-background-color-medium-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-static-black)); - - &.spectrum-Divider--sizeS { - /** @deprecated --mod-divider-background-color-small-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-static-black)); - } + --spectrum-divider-background-color: var(--spectrum-transparent-black-200); &.spectrum-Divider--sizeL { - /** @deprecated --mod-divider-background-color-large-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-transparent-black-800)); + --spectrum-divider-background-color: var(--spectrum-transparent-black-800); } } @@ -77,13 +59,24 @@ border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color))); + + &:not(&.spectrum-Divider--vertical) { + min-inline-size: var(--mod-divider-inline-minimum-size, var(--spectrum-divider-inline-minimum-size)); + } } /* vertical dividers */ .spectrum-Divider--vertical { inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + min-block-size: var(--mod-divider-block-minimum-size, var(--spectrum-divider-block-minimum-size)); + margin-block: var(--mod-divider-vertical-margin, 0); block-size: var(--mod-divider-vertical-height, 100%); + align-self: var(--mod-divider-vertical-align, flex-start); +} - margin-block: var(--mod-divider-vertical-margin); - align-self: var(--mod-divider-vertical-align); +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Divider { + --highcontrast-divider-background-color: CanvasText; + } } diff --git a/components/divider/package.json b/components/divider/package.json index b1125c973e6..7554b48ca75 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/divider", - "version": "5.1.0", + "version": "6.0.0-next.1", "description": "The Spectrum CSS divider component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 306e5c0c453..fe5696c1371 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -25,13 +25,11 @@ export default { control: "boolean", }, tag: { table: { disable: true } }, - minDimensionValues: {table: { disable: true }}, }, args: { rootClass: "spectrum-Divider", - size: "s", + size: "m", vertical: false, - minDimensionValues: true, }, parameters: { design: { @@ -40,20 +38,22 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** - * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. + * By default, dividers are horizontal and should be used for separating content vertically. The medium divider is the default size. */ export const Default = DividerGroup.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // /** - * To divide similar components such as table rows, action button groups, and components within a panel, use the default, small divider. - * - * The medium divider is used for dividing subsections on a page, or to separate different groupings of components such as panels, rails, etc. + * To divide similar components such as table rows, action button groups, and components within a panel, use the default, medium divider. * * Only use the large divider for page titles or section titles. */ @@ -63,9 +63,6 @@ export const Sizing = (args, context) => Sizes({ withBorder: false, ...args, }, context); -Sizing.args = { - minDimensionValues: true, -}; Sizing.tags = ["!dev"]; Sizing.parameters = { chromatic: { disableSnapshot: true }, @@ -84,13 +81,17 @@ VerticalSizing.storyName = "Vertical"; VerticalSizing.tags = ["!dev"]; VerticalSizing.args = { vertical: true, - minDimensionValues: true, }; VerticalSizing.parameters = { chromatic: { disableSnapshot: true }, }; -export const StaticWhiteGroup = Default.bind({}); +export const StaticWhiteGroup = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); StaticWhiteGroup.storyName = "Static white"; StaticWhiteGroup.tags = ["!dev"]; StaticWhiteGroup.args = { @@ -100,7 +101,12 @@ StaticWhiteGroup.parameters = { chromatic: { disableSnapshot: true }, }; -export const StaticBlackGroup = Default.bind({}); +export const StaticBlackGroup = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); StaticBlackGroup.storyName = "Static black"; StaticBlackGroup.tags = ["!dev"]; StaticBlackGroup.args = { diff --git a/components/divider/stories/divider.test.js b/components/divider/stories/divider.test.js index a670bfd6872..c4b708206db 100644 --- a/components/divider/stories/divider.test.js +++ b/components/divider/stories/divider.test.js @@ -7,18 +7,15 @@ export const DividerGroup = Variants({ { testHeading: "Default", vertical: false, - minDimensionValues: true, }, { testHeading: "Non-HR", tag: "div", vertical: false, - minDimensionValues: true, }, { testHeading: "Vertical", vertical: true, - minDimensionValues: true, }, { testHeading: "Static black", diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index ac2ffa2a4c1..149a9626674 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -4,9 +4,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Divider", @@ -14,7 +11,6 @@ export const Template = ({ tag = "hr", staticColor, vertical = false, - minDimensionValues, customClasses = [], customStyles = {}, } = {}) => { @@ -28,11 +24,7 @@ export const Template = ({ typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "min-inline-size": minDimensionValues && !vertical ? "200px": undefined, - "min-block-size": minDimensionValues && vertical ? "20px": undefined, - ...customStyles, - })} + style=${styleMap({...customStyles})} role="separator" />`; } @@ -46,11 +38,7 @@ export const Template = ({ typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "min-inline-size": minDimensionValues && !vertical ? "200px": undefined, - "min-block-size": minDimensionValues && vertical ? "20px": undefined, - ...customStyles, - })} + style=${styleMap({...customStyles})} role="separator" ></div>`; }; diff --git a/components/divider/themes/express.css b/components/divider/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/divider/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css deleted file mode 100644 index 58f8de9a767..00000000000 --- a/components/divider/themes/spectrum-two.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-200); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); - } -} diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css deleted file mode 100644 index ecfe3f3a46a..00000000000 --- a/components/divider/themes/spectrum.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-300); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-300); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-300); - } -} diff --git a/components/dropindicator/CHANGELOG.md b/components/dropindicator/CHANGELOG.md index 9dc622cbc2d..31d4e4394e3 100644 --- a/components/dropindicator/CHANGELOG.md +++ b/components/dropindicator/CHANGELOG.md @@ -1,5 +1,19 @@ # Change log +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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.0 ### Minor Changes diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index dd3a7a50810..294d6ad70bb 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -23,7 +23,6 @@ "--spectrum-dropindicator-color" ], "global": ["--spectrum-border-width-200"], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-dropindicator-color"] } diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index 378bb325929..74dc0dbefd8 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropindicator", - "version": "7.1.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS dropindicator component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/dropzone/CHANGELOG.md b/components/dropzone/CHANGELOG.md index daaec19cfb9..80916010077 100644 --- a/components/dropzone/CHANGELOG.md +++ b/components/dropzone/CHANGELOG.md @@ -1,5 +1,69 @@ # Change log +## 9.0.0-next.3 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/illustratedmessage@10.0.0-next.0 + +## 9.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351)]: + - @spectrum-css/link@8.0.0-next.0 + +## 9.0.0-next.1 + +### Major Changes + +- [#3429](https://github.com/adobe/spectrum-css/pull/3429) [`924fc7f`](https://github.com/adobe/spectrum-css/commit/924fc7f040b84731c06fd3c59dbb1aca9001b642) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! + +#### Dropzone S2 Migration + +Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed. + +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. + +##### SVG Border + +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. + +##### New mods + +`--mod-drop-zone-content-height` +`--mod-drop-zone-edge-to-text` +`--mod-drop-zone-title-line-height` +`--mod-drop-zone-border-dash-length` +`--mod-drop-zone-border-dash-gap` + +##### Removed mods + +`--mod-drop-zone-body-color` +`--mod-drop-zone-body-font-family` +`--mod-drop-zone-body-font-style` +`--mod-drop-zone-body-font-weight` +`--mod-drop-zone-body-line-height` +`--mod-drop-zone-content-color` +`--mod-drop-zone-content-edge-to-text` +`--mod-drop-zone-content-font-size` +`--mod-drop-zone-heading-color` +`--mod-drop-zone-heading-font-family` +`--mod-drop-zone-heading-font-size` +`--mod-drop-zone-heading-font-style` +`--mod-drop-zone-heading-font-weight` +`--mod-drop-zone-heading-line-height` +`--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title` + +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 3044ecfc906..e91812f2d27 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -2,133 +2,116 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-DropZone", + ".spectrum-DropZone .spectrum-IllustratedMessage", + ".spectrum-DropZone-actions", ".spectrum-DropZone-button", + ".spectrum-DropZone-button .spectrum-Button-label", ".spectrum-DropZone-button:focus", ".spectrum-DropZone-button:hover", ".spectrum-DropZone-content", + ".spectrum-DropZone-stroke", + ".spectrum-DropZone-strokePath", ".spectrum-DropZone.is-dragged", + ".spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath", ".spectrum-DropZone.is-filled", ".spectrum-DropZone.is-filled.is-dragged", + ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions", + ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content", ".spectrum-DropZone:focus-visible", - ".spectrum-DropZone:lang(ja)", - ".spectrum-DropZone:lang(ko)", - ".spectrum-DropZone:lang(zh)" + ".spectrum-DropZone:has(.spectrum-DropZone-stroke)" ], "modifiers": [ "--mod-drop-zone-background-color", "--mod-drop-zone-background-color-opacity", "--mod-drop-zone-background-color-opacity-filled", - "--mod-drop-zone-body-color", - "--mod-drop-zone-body-font-family", "--mod-drop-zone-body-font-size", - "--mod-drop-zone-body-font-style", - "--mod-drop-zone-body-font-weight", - "--mod-drop-zone-body-line-height", + "--mod-drop-zone-body-to-action", "--mod-drop-zone-border-color", "--mod-drop-zone-border-color-hover", + "--mod-drop-zone-border-dash-gap", + "--mod-drop-zone-border-dash-length", "--mod-drop-zone-border-style", "--mod-drop-zone-border-style-dragged", "--mod-drop-zone-border-width", "--mod-drop-zone-content-background-color", "--mod-drop-zone-content-bottom-to-text", - "--mod-drop-zone-content-color", - "--mod-drop-zone-content-display", - "--mod-drop-zone-content-edge-to-text", "--mod-drop-zone-content-font-family", "--mod-drop-zone-content-font-size", - "--mod-drop-zone-content-font-style", "--mod-drop-zone-content-font-weight", "--mod-drop-zone-content-height", - "--mod-drop-zone-content-line-height", "--mod-drop-zone-content-max-width", "--mod-drop-zone-content-maximum-width", "--mod-drop-zone-content-top-to-text", "--mod-drop-zone-corner-radius", - "--mod-drop-zone-heading-color", - "--mod-drop-zone-heading-font-family", - "--mod-drop-zone-heading-font-size", - "--mod-drop-zone-heading-font-style", - "--mod-drop-zone-heading-font-weight", - "--mod-drop-zone-heading-line-height", - "--mod-drop-zone-heading-to-body", - "--mod-drop-zone-illustration-color", + "--mod-drop-zone-edge-to-text", "--mod-drop-zone-illustration-color-hover", - "--mod-drop-zone-illustration-to-heading", + "--mod-drop-zone-inline-size", "--mod-drop-zone-padding", - "--mod-drop-zone-width" + "--mod-drop-zone-title-line-height" ], "component": [ "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", "--spectrum-drop-zone-background-color-opacity-filled", "--spectrum-drop-zone-background-color-rgb", - "--spectrum-drop-zone-body-size", + "--spectrum-drop-zone-body-font-size", + "--spectrum-drop-zone-body-to-action", "--spectrum-drop-zone-border-color", "--spectrum-drop-zone-border-color-hover", + "--spectrum-drop-zone-border-dash-gap", + "--spectrum-drop-zone-border-dash-length", "--spectrum-drop-zone-border-width", - "--spectrum-drop-zone-cjk-title-size", + "--spectrum-drop-zone-component-height", "--spectrum-drop-zone-content-background-color", + "--spectrum-drop-zone-content-bottom-to-text", + "--spectrum-drop-zone-content-font-family", + "--spectrum-drop-zone-content-font-size", + "--spectrum-drop-zone-content-font-weight", + "--spectrum-drop-zone-content-max-width", "--spectrum-drop-zone-content-maximum-width", - "--spectrum-drop-zone-illustration-color", - "--spectrum-drop-zone-title-size", + "--spectrum-drop-zone-content-top-to-text", + "--spectrum-drop-zone-corner-radius", + "--spectrum-drop-zone-dragged-background-color", + "--spectrum-drop-zone-edge-to-text", + "--spectrum-drop-zone-illustration-color-hover", + "--spectrum-drop-zone-inline-size", + "--spectrum-drop-zone-padding", + "--spectrum-drop-zone-stroke-dash-gap", + "--spectrum-drop-zone-stroke-dash-length", + "--spectrum-drop-zone-title-line-height", "--spectrum-drop-zone-width" ], "global": [ + "--spectrum-accent-content-color-default", "--spectrum-accent-visual-color", - "--spectrum-body-color", - "--spectrum-body-line-height", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", "--spectrum-bold-font-weight", "--spectrum-border-width-200", "--spectrum-component-bottom-to-text-300", "--spectrum-component-edge-to-text-300", "--spectrum-component-height-300", "--spectrum-component-top-to-text-300", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", + "--spectrum-corner-radius-500", + "--spectrum-corner-radius-700", "--spectrum-font-size-300", - "--spectrum-gray-200", - "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", + "--spectrum-gray-300", "--spectrum-line-height-100", - "--spectrum-neutral-visual-color", "--spectrum-sans-font-family-stack", - "--spectrum-spacing-400", - "--spectrum-spacing-75", - "--spectrum-white" + "--spectrum-spacing-300", + "--spectrum-spacing-400" ], - "system-theme": ["--system-drop-zone-border-color"], "passthroughs": [ - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-font-size", - "--mod-actionbutton-label-color", - "--mod-illustrated-message-content-maximum-width", - "--mod-illustrated-message-description-color", - "--mod-illustrated-message-description-font-family", + "--mod-button-border-radius", "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-font-style", - "--mod-illustrated-message-description-font-weight", - "--mod-illustrated-message-description-line-height", "--mod-illustrated-message-description-position", + "--mod-illustrated-message-description-to-action", "--mod-illustrated-message-description-z-index", "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-to-body", - "--mod-illustrated-message-heading-to-description", "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-title-color", - "--mod-illustrated-message-title-font-family", - "--mod-illustrated-message-title-font-size", - "--mod-illustrated-message-title-font-style", - "--mod-illustrated-message-title-font-weight", - "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + "--mod-illustrated-message-vertical-maximum-width" ], "high-contrast": [ + "--highcontrast-drop-zone-border-color", "--highcontrast-drop-zone-border-color-hover", - "--highcontrast-drop-zone-illustration-color", - "--highcontrast-illustrated-message-illustration-color" + "--highcontrast-drop-zone-button-color" ] } diff --git a/components/dropzone/index.css b/components/dropzone/index.css index 2b3fbefe0c7..c5824560074 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -11,127 +11,188 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DropZone { + /* Sizing */ + --spectrum-drop-zone-padding: var(--spectrum-spacing-400); --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); + --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-700); + --spectrum-drop-zone-border-color: var(--spectrum-gray-300); + --spectrum-drop-zone-inline-size: var(--spectrum-drop-zone-width); + + /* Color */ --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); - --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-content-color-default); + --spectrum-drop-zone-body-to-action: var(--spectrum-spacing-300); + --spectrum-drop-zone-stroke-dash-gap: var(--spectrum-drop-zone-border-dash-gap); + --spectrum-drop-zone-stroke-dash-length: var(--spectrum-drop-zone-border-dash-length); + --spectrum-drop-zone-dragged-background-color: var(--spectrum-drop-zone-background-color-opacity); + + /* Filled styles */ + --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-drop-zone-component-height: var(--spectrum-component-height-300); + --spectrum-drop-zone-edge-to-text: var(--spectrum-component-edge-to-text-300); + + --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); + --spectrum-drop-zone-title-line-height: var(--spectrum-line-height-100); + --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); - /* @passthrough start -- IllustratedMessage -- settings for a nested illustrated message */ - --mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); - --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-spacing-400)); - --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-spacing-75)); - --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-sans-font-family-stack)); - --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-heading-sans-serif-font-style)); - --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-title-size)); - --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-heading-line-height)); - --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-heading-color)); + /* Settings for a nested illustrated message */ + --mod-illustrated-message-vertical-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); + --mod-illustrated-message-description-to-action: var(--mod-drop-zone-body-to-action, var(--spectrum-drop-zone-body-to-action)); --mod-illustrated-message-description-position: relative; --mod-illustrated-message-description-z-index: 10; - --mod-illustrated-message-heading-to-description: 0; - --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack)); - --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight)); - --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style)); - --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size)); - --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-body-line-height)); - --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-body-color)); - /* @passthrough end */ - - /* @passthrough start -- ActionButton settings for a nested actionbutton */ - --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-font-size-300)); - --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-white)); - --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-component-edge-to-text-300)); - /* @passthrough end */ + --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); + + /* Adjusts height of filled & dragged dropzone state */ + --mod-drop-zone-content-height: 280px; +} +.spectrum-DropZone { + display: flex; + justify-content: center; + align-items: center; box-sizing: border-box; - inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); - padding: calc(var(--mod-drop-zone-padding, var(--spectrum-spacing-400)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); - text-align: center; - border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); - border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); - border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-corner-radius-100)); - border-style: var(--mod-drop-zone-border-style, dashed); - background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); + inline-size: var(--mod-drop-zone-inline-size, var(--spectrum-drop-zone-inline-size)); + padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); background-size: cover; - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - /* @passthrough -- updated value for cjk font size */ - --mod-illustrated-message-title-font-size: var(--spectrum-drop-zone-cjk-title-size); - } + background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); + position: relative; + border: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)) dashed var(--highcontrast-drop-zone-border-color, var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))); &.is-dragged { --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); - --mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color))); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); + color: var(--spectrum-drop-zone-illustration-color-hover); + border-style: solid; - /* @passthrough -- Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-accent-visual-color)); + .spectrum-DropZone-strokePath { + stroke-dasharray: none; + } } &.is-filled { /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); - /* @passthrough -- Updated values for a nested illustrated message when state changes */ + /* Updated values for a nested illustrated message when state changes */ --mod-illustrated-message-display: none; } &.is-filled.is-dragged { - --mod-drop-zone-content-display: flex; + background-position: center; + block-size: var(--mod-drop-zone-content-height); + background-blend-mode: multiply; + + .spectrum-DropZone-content { + block-size: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + .spectrum-DropZone-actions { + margin-block-start: 0; + } } &:focus-visible { - --mod-drop-zone-border-style: solid; - --mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); outline: 0; } } -.spectrum-DropZone-content { - display: var(--mod-drop-zone-content-display, none); +.spectrum-DropZone:has(.spectrum-DropZone-stroke) { + border: none; +} + +.spectrum-DropZone-stroke { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; block-size: 100%; - align-items: center; - justify-content: center; - position: relative; - z-index: 10; + pointer-events: none; +} + +.spectrum-DropZone-strokePath { + stroke: var(--highcontrast-drop-zone-border-color, var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))); + stroke-dasharray: var(--mod-drop-zone-border-dash-length, var(--spectrum-drop-zone-stroke-dash-length)) var(--mod-drop-zone-border-dash-gap, var(--spectrum-drop-zone-stroke-dash-gap)); + rx: var(--spectrum-drop-zone-corner-radius); + ry: var(--spectrum-drop-zone-corner-radius); + stroke-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); + inline-size: calc(100% - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + block-size: calc(100% - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); +} + +.spectrum-DropZone-content { + max-inline-size: var(--mod-illustrated-message-vertical-maximum-width); +} + +.spectrum-DropZone-actions { + margin-block-start: var(--spectrum-drop-zone-body-to-action); + text-align: center; } .spectrum-DropZone-button { + /* Adjust corner radius of button component is dragged & filled state */ + --mod-button-border-radius: var(--spectrum-corner-radius-500); box-sizing: border-box; border: none; - block-size: var(--mod-drop-zone-content-height, var(--spectrum-component-height-300)); - max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-maximum-width)); - padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-component-top-to-text-300)); - padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-component-bottom-to-text-300)); - background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); - - font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-sans-font-family-stack)); - font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-bold-font-weight)); - font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-default-font-style)); - line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-line-height-100)); + block-size: auto; + + max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); + padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); + padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); + padding-inline: var(--mod-drop-zone-edge-to-text, var(--spectrum-drop-zone-edge-to-text)); + background-color: var(--highcontrast-drop-zone-button-color, var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))); + max-block-size: var(--spectrum-drop-zone-component-height); + + font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); + font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); + line-height: var(--mod-drop-zone-title-line-height, var(--spectrum-drop-zone-title-line-height)); + + .spectrum-Button-label { + font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); + padding: unset; + } &:hover, &:focus { - background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); + background-color: var(--highcontrast-drop-zone-button-color, var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))); + } +} + +/********* Illustrated Message *********/ +.spectrum-DropZone { + .spectrum-IllustratedMessage { + justify-content: center; } } /********* WHCM *********/ @media (forced-colors: active) { .spectrum-DropZone { - --highcontrast-drop-zone-illustration-color: CanvasText; - --highcontrast-drop-zone-border-color-hover: Highlight; + --highcontrast-drop-zone-button-color: ButtonText; + --highcontrast-drop-zone-border-color: ButtonText; + + &.is-dragged { + border-color: var(--highcontrast-drop-zone-border-color-hover); - /* @passthrough -- updated values for a nested illustrated message when in a high contrast state */ - --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); + .spectrum-DropZone-strokePath { + stroke: var(--highcontrast-drop-zone-border-color-hover); + } + } } } diff --git a/components/dropzone/package.json b/components/dropzone/package.json index 5be0c7c239f..6d095b30406 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropzone", - "version": "8.1.0", + "version": "9.0.0-next.3", "description": "The Spectrum CSS dropzone component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0", - "@spectrum-css/link": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/illustratedmessage": ">=10.0.0-next.0", + "@spectrum-css/link": ">=8.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -45,10 +45,10 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/illustratedmessage": "9.1.0", - "@spectrum-css/link": "7.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/illustratedmessage": "10.0.0-next.0", + "@spectrum-css/link": "8.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 9d0d7e4c3d2..97e6bf7bd65 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -1,12 +1,12 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/illustratedmessage.stories.js"; -import { Template as Link } from "@spectrum-css/link/stories/template.js"; +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDragged } from "@spectrum-css/preview/types"; -import { html } from "lit"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { DropzoneGroup } from "./dropzone.test.js"; +import { Template } from "./template.js"; /** * A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. It's a common interaction in uploading and file management workflows. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilizing the standard "Choose file" dialog. @@ -27,12 +27,17 @@ export default { if: { arg: "isDragged", truthy: true }, }, ...IllustratedMessage.argTypes, + hasButtons: { table: { disable: true }}, + isHorizontal: { table: { disable: true }}, label: ActionButton.argTypes.label, }, args: { rootClass: "spectrum-DropZone", isDragged: false, isFilled: false, + title: "Drag and drop your file", + description: "Or, select a file from your computer.", + label: "Browse files", }, parameters: { design: { @@ -41,22 +46,36 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = DropzoneGroup.bind({}); -Default.args = { - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - label: "Drop file to replace", - useAccentColor: true, - customStyles: { - width: "300px", - }, +Default.args = {}; + +export const Dragged = Template.bind({}); +Dragged.args = { + isDragged: true, +}; +Dragged.tags = ["!dev"]; +Dragged.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state, the dropzone size would be identical in all size variants. +*/ +export const Filled = Template.bind({}); +Filled.args = { + isDragged: true, + isFilled: true, +}; +Filled.tags = ["!dev"]; +Filled.parameters = { + chromatic: { disableSnapshot: true }, }; // ********* VRT ONLY ********* // @@ -69,3 +88,15 @@ WithForcedColors.parameters = { modes: disableDefaultModes }, }; + +export const Sizing = (args, context) => Sizes({ + Template, + withBorder: false, + withHeader: false, + ...args +}, context); +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/dropzone/stories/dropzone.test.js b/components/dropzone/stories/dropzone.test.js index 52303b56d69..258da1cd653 100644 --- a/components/dropzone/stories/dropzone.test.js +++ b/components/dropzone/stories/dropzone.test.js @@ -1,22 +1,10 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Variants } from "@spectrum-css/preview/decorators"; -import { html } from "lit"; import { Template } from "./template.js"; export const DropzoneGroup = Variants({ Template, testData: [ {}, - { - testHeading: "Verbose example", - heading: "Drag and drop your file to upload", - description: [ - () => { - return html`You can also ${Link({ url: "#", text: "select a file" })} from your computer.`; - }, - ], - label: "Drag and drop to replace file upload", - }, ], stateData: [ { @@ -29,5 +17,4 @@ export const DropzoneGroup = Variants({ isDragged: true, }, ], - withSizes: false, }); diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 9eb2dfface7..77e260501c2 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -1,4 +1,4 @@ -import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; +import { Template as Button } from "@spectrum-css/button/stories/template.js"; import { Template as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-DropZone", @@ -17,35 +14,70 @@ export const Template = ({ isFilled = false, customClasses = [], customStyles = {}, - heading, + title, description, label, id = getRandomId("dropzone"), + size = "m", + image = "dropzone-illustration.png", } = {}, context = {}) => { return html` - <div - class=${classMap({ + <div + class=${classMap({ [rootClass]: true, "is-dragged": isDragged, "is-filled": isFilled, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), - })} - id=${ifDefined(id)} - role="region" - tabindex="0" - style=${styleMap(customStyles)} - > - ${IllustratedMessage({ heading, description }, context)} - - <div class="${rootClass}-content"> - ${ActionButton( - { - label, - customClasses: [`${rootClass}-button`], - }, - context - )} + })} + id=${ifDefined(id)} + role="region" + tabindex="0" + style=${styleMap(customStyles), [isDragged && isFilled ? `background-image:url(${image});` : null].filter(Boolean).join(" ")} + > + <svg + class="${rootClass}-stroke" + xmlns="http://www.w3.org/2000/svg" + preserveAspectRatio="none" + > + <rect + x="1" + y="1" + rx="10px" + ry="10px" + fill="none" + width="100%" + height="100%" + stroke-linecap="round" + stroke-linejoin="round" + vector-effect="non-scaling-stroke" + class="${rootClass}-strokePath" + /> + </svg> + <div class="${rootClass}-content"> + ${IllustratedMessage({ + title: title, + description: description, + customIllustration: customSvg, + size: size + }, context )} + <div class="${rootClass}-actions"> + ${isDragged && isFilled + ? Button({ + label: label, + customClasses: [`${rootClass}-button`], + variant: "accent", + }) + : Button({ + label: label, + size: size + })} </div> </div> - `; + </div>`; }; + +const customSvg = () => html` + <svg class="spectrum-IllustratedMessage-illustration" fill="none" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"> + <path d="m33.454 15.74c-4.1061 0-7.4545 3.3125-7.4545 7.4231v36.154c0 4.1106 3.3484 7.4231 7.4545 7.4231h29.091c4.1061 0 7.4545-3.3125 7.4545-7.4231v-21.254c0-1.9724-0.7882-3.8618-2.1875-5.253l-14.987-14.9c-1.3989-1.3908-3.2937-2.1701-5.2671-2.1701h-14.104zm-3.4545 7.4231c0-1.8796 1.5357-3.4231 3.4545-3.4231h14.104c0.92 0 1.7999 0.3634 2.4469 1.0067l14.987 14.9c0.6466 0.6429 1.0077 1.5123 1.0077 2.4164v21.254c0 1.8796-1.5357 3.4231-3.4545 3.4231h-29.091c-1.9188 0-3.4545-1.5435-3.4545-3.4231v-36.154zm9.7659 22.028c-0.8552-0.6991-2.1152-0.5726-2.8143 0.2825-0.6991 0.8552-0.5726 2.1152 0.2825 2.8143l8.2189 6.7193c0.3659 0.4459 0.9208 0.7309 1.5426 0.7323h0.0189l0.0167-2e-4c0.4638 0.0071 0.9295-0.1465 1.308-0.4605l8.4378-7c0.8501-0.7053 0.9675-1.9662 0.2623-2.8163-0.7053-0.8501-1.9662-0.9675-2.8163-0.2623l-5.2138 4.3254 0.0345-15.782c0.0024-1.1046-0.8911-2.002-1.9956-2.0044-1.1046-0.0024-2.002 0.8911-2.0044 1.9956l-0.0344 15.743-5.2434-4.2867zm-12.766 30.548c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h7.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-7.5zm-15-9.5c-1.1046 0-2-0.8954-2-2v-7.5c0-1.1046 0.8954-2 2-2s2 0.8954 2 2v7.5c0 1.1046-0.8954 2-2 2zm70-1.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-7.5c0-1.1046-0.8954-2-2-2s-2 0.8954-2 2v7.5zm-61-22c0-1.1046-0.8954-2-2-2h-3.5c-3.0376 0-5.5 2.4624-5.5 5.5v3.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-3.5c0-0.8284 0.6716-1.5 1.5-1.5h3.5c1.1046 0 2-0.8954 2-2zm56-2c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h3.5c0.8284 0 1.5 0.6716 1.5 1.5v3.5c0 1.1046 0.8954 2 2 2s2-0.8954 2-2v-3.5c0-3.0376-2.4624-5.5-5.5-5.5h-3.5zm-65 28c-1.1046 0-2 0.8954-2 2v3.5c0 3.0376 2.4624 5.5 5.5 5.5h3.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-3.5c-0.8284 0-1.5-0.6716-1.5-1.5v-3.5c0-1.1046-0.8954-2-2-2zm74 2c0-1.1046-0.8954-2-2-2s-2 0.8954-2 2v3.5c0 0.8284-0.6716 1.5-1.5 1.5h-3.5c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h3.5c3.0376 0 5.5-2.4624 5.5-5.5v-3.5zm-44 7c0-1.1046 0.8954-2 2-2h7.5c1.1046 0 2 0.8954 2 2s-0.8954 2-2 2h-7.5c-1.1046 0-2-0.8954-2-2zm19-2c-1.1046 0-2 0.8954-2 2s0.8954 2 2 2h7.5c1.1046 0 2-0.8954 2-2s-0.8954-2-2-2h-7.5z" clip-rule="evenodd" fill-rule="evenodd"/> + </svg> +`; diff --git a/components/dropzone/themes/express.css b/components/dropzone/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/dropzone/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css deleted file mode 100644 index cf71b766c33..00000000000 --- a/components/dropzone/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-200); - } -} diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css deleted file mode 100644 index 0760508568f..00000000000 --- a/components/dropzone/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - } -} diff --git a/components/fieldgroup/CHANGELOG.md b/components/fieldgroup/CHANGELOG.md index f4acc1c9185..952bdc0c8c6 100644 --- a/components/fieldgroup/CHANGELOG.md +++ b/components/fieldgroup/CHANGELOG.md @@ -1,5 +1,21 @@ # Change log +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/checkbox@11.0.0-next.0 + - @spectrum-css/helptext@8.0.0-next.0 + - @spectrum-css/radio@11.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json index c8875b9d3a9..3c2343b1019 100644 --- a/components/fieldgroup/dist/metadata.json +++ b/components/fieldgroup/dist/metadata.json @@ -13,7 +13,6 @@ "modifiers": [], "component": [], "global": ["--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index a4522acd52e..81151ab827e 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/fieldgroup", - "version": "7.1.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS fieldgroup component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/radio": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/helptext": ">=8.0.0-next.0", + "@spectrum-css/radio": ">=11.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -45,10 +45,10 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.2", - "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/radio": "10.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/checkbox": "11.0.0-next.2", + "@spectrum-css/helptext": "8.0.0-next.2", + "@spectrum-css/radio": "11.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js index 18c06b181f5..c49e4990598 100644 --- a/components/fieldgroup/stories/fieldgroup.stories.js +++ b/components/fieldgroup/stories/fieldgroup.stories.js @@ -96,7 +96,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = FieldGroupSet.bind({}); diff --git a/components/fieldlabel/CHANGELOG.md b/components/fieldlabel/CHANGELOG.md index c799025402c..be5fc4e1999 100644 --- a/components/fieldlabel/CHANGELOG.md +++ b/components/fieldlabel/CHANGELOG.md @@ -1,5 +1,29 @@ # Change log +## 11.0.0-next.2 + +### Patch Changes + +📝 [#3652](https://github.com/adobe/spectrum-css/pull/3652) [`8b4511e`](https://github.com/adobe/spectrum-css/commit/8b4511eb14a8dc586c34719db2efd6f5c542e7b1) Thanks [@cdransf](https://github.com/cdransf)! + +#### Fix field label required icon wrapping + +Addresses case where fieldlabel required icon could appear on its own line when wrapping by applying text-wrap: pretty; to the parent label class and adding a non-breaking space character between the label content and required marker. + +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 11.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 + ## 10.1.0 ### Minor Changes diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index cc26c19a022..2a55dbd82f4 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -5,9 +5,10 @@ ".spectrum-FieldLabel--left", ".spectrum-FieldLabel--right", ".spectrum-FieldLabel--sizeL", - ".spectrum-FieldLabel--sizeM", ".spectrum-FieldLabel--sizeS", ".spectrum-FieldLabel--sizeXL", + ".spectrum-FieldLabel--staticBlack", + ".spectrum-FieldLabel--staticWhite", ".spectrum-FieldLabel-requiredIcon", ".spectrum-FieldLabel.is-disabled", ".spectrum-FieldLabel:lang(ja)", @@ -15,35 +16,20 @@ ".spectrum-FieldLabel:lang(zh)" ], "modifiers": [ - "--mod-disabled-content-color", - "--mod-field-label-asterisk-vertical-align", - "--mod-field-label-bottom-to-text", - "--mod-field-label-text-to-asterisk", - "--mod-field-label-top-to-text", - "--mod-fieldlabel-color", + "--mod-fieldlabel-asterisk-vertical-align", + "--mod-fieldlabel-bottom-to-text", "--mod-fieldlabel-font-size", "--mod-fieldlabel-font-weight", "--mod-fieldlabel-line-height", "--mod-fieldlabel-line-height-cjk", - "--mod-fieldlabel-margin-block", - "--mod-fieldlabel-margin-block-end", - "--mod-fieldlabel-margin-block-start", - "--mod-fieldlabel-margin-inline", - "--mod-fieldlabel-margin-inline-end", - "--mod-fieldlabel-margin-inline-start", "--mod-fieldlabel-min-height", - "--mod-fieldlabel-padding-block", "--mod-fieldlabel-padding-inline", "--mod-fieldlabel-side-margin-block-start", - "--mod-fieldlabel-side-padding-right" + "--mod-fieldlabel-side-padding-right", + "--mod-fieldlabel-text-to-asterisk", + "--mod-fieldlabel-top-to-text" ], "component": [ - "--spectrum-field-label-bottom-to-text", - "--spectrum-field-label-font-size", - "--spectrum-field-label-min-height", - "--spectrum-field-label-side-margin-block-start", - "--spectrum-field-label-side-padding-right", - "--spectrum-field-label-text-to-asterisk", "--spectrum-field-label-text-to-asterisk-extra-large", "--spectrum-field-label-text-to-asterisk-large", "--spectrum-field-label-text-to-asterisk-medium", @@ -52,30 +38,44 @@ "--spectrum-field-label-top-margin-large", "--spectrum-field-label-top-margin-medium", "--spectrum-field-label-top-margin-small", - "--spectrum-field-label-top-to-text" + "--spectrum-fieldlabel-bottom-to-text", + "--spectrum-fieldlabel-color", + "--spectrum-fieldlabel-font-size", + "--spectrum-fieldlabel-font-weight", + "--spectrum-fieldlabel-line-height", + "--spectrum-fieldlabel-min-height", + "--spectrum-fieldlabel-side-margin-block-start", + "--spectrum-fieldlabel-side-padding-right", + "--spectrum-fieldlabel-text-to-asterisk", + "--spectrum-fieldlabel-top-to-text" ], "global": [ + "--spectrum-black", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", + "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", "--spectrum-disabled-content-color", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-line-height-100", "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", "--spectrum-spacing-100", - "--spectrum-spacing-200" + "--spectrum-spacing-200", + "--spectrum-white" ], - "system-theme": [], "passthroughs": [], - "high-contrast": ["--highcontrast-field-label-content-color"] + "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"] } diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index 4e5b4653efd..ba6692619ff 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,104 +11,112 @@ * governing permissions and limitations under the License. */ -/* @todo align modifiers to use field-label or fieldlabel but not both */ +.spectrum-FieldLabel { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); + --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); + + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); -.spectrum-FieldLabel, -.spectrum-FieldLabel--sizeM { - --spectrum-field-label-min-height: var(--spectrum-component-height-75); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-field-label-font-size: var(--spectrum-font-size-75); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); + --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); + --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100)); + } - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + /********* Disabled state *********/ + &.is-disabled { + --spectrum-fieldlabel-color: var(--highcontrast-fieldlabel-disabled-content-color, var(--spectrum-disabled-content-color)); + } } .spectrum-FieldLabel--sizeS { - --spectrum-field-label-min-height: var(--spectrum-component-height-75); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-field-label-font-size: var(--spectrum-font-size-75); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); } .spectrum-FieldLabel--sizeL { - --spectrum-field-label-min-height: var(--spectrum-component-height-100); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-field-label-font-size: var(--spectrum-font-size-100); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); } .spectrum-FieldLabel--sizeXL { - --spectrum-field-label-min-height: var(--spectrum-component-height-200); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-field-label-font-size: var(--spectrum-font-size-200); + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-300); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); + + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-300); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); +} - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); +.spectrum-FieldLabel--staticBlack { + --spectrum-fieldlabel-color: var(--spectrum-black); +} + +.spectrum-FieldLabel--staticWhite { + --spectrum-fieldlabel-color: var(--spectrum-white); } .spectrum-FieldLabel { display: block; + text-wrap: pretty; box-sizing: border-box; - min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height)); + min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); - padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))); + padding-block: var(--mod-fieldlabel-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-fieldlabel-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)); padding-inline: var(--mod-fieldlabel-padding-inline, 0); - margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0)); - margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0)); - font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size)); - font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight)); + font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size)); + font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight)); - line-height: var(--mod-fieldlabel-line-height, var(--spectrum-line-height-100)); + line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))); - - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100)); - } - - /********* Disabled state *********/ - &.is-disabled { - --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)); - } + color: var(--spectrum-fieldlabel-color); } .spectrum-FieldLabel-requiredIcon { color: inherit; margin-block: 0; - margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0; - vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); + margin-inline: var(--mod-fieldlabel-text-to-asterisk, var(--spectrum-fieldlabel-text-to-asterisk)) 0; + vertical-align: var(--mod-fieldlabel-asterisk-vertical-align, baseline); } .spectrum-FieldLabel--left, .spectrum-FieldLabel--right { display: inline-block; - margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start)); + margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start)); margin-block-end: 0; - margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right)); + margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right)); vertical-align: top; } @@ -119,7 +127,7 @@ /********* WHCM *********/ @media (forced-colors: active) { - .spectrum-FieldLabel.is-disabled { - --highcontrast-field-label-content-color: GrayText; + .spectrum-FieldLabel { + --highcontrast-fieldlabel-disabled-content-color: GrayText; } } diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index 03eb96f1bfc..fce00720433 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/fieldlabel", - "version": "10.1.0", + "version": "11.0.0-next.2", "description": "The Spectrum CSS fieldlabel component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 1a268284d7f..426e0a699c2 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; +import { isDisabled, isRequired, size, staticColor } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { FieldLabelGroup } from "./fieldlabel.test.js"; @@ -35,6 +35,7 @@ export default { }, isDisabled, isRequired, + staticColor, }, args: { rootClass: "spectrum-FieldLabel", @@ -51,7 +52,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** @@ -102,6 +107,8 @@ RightAligned.storyName = "Right-aligned"; * Field labels for required inputs can be marked with an asterisk at the end of the label. Optional inputs would then be understood to not have the asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup. Extra space should not be added in addition to the inline margin. * * The field label for a required field can display either the text “(required)”, or an asterisk. + * + * When marking a field as required, a word-joiner character (e.g. `U+2060` or `⁠`) should be placed between the label text and the required marker to prevent the marker from appearing on its own line. */ export const Required = Template.bind({}); Required.args = { @@ -136,6 +143,32 @@ Disabled.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * Use static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + */ +export const StaticWhite = Default.bind({}); +StaticWhite.storyName = "Static white"; +StaticWhite.args = { + staticColor: "white", +}; +StaticWhite.tags = ["!dev"]; +StaticWhite.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * Use static black on light color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + */ +export const StaticBlack = Default.bind({}); +StaticBlack.storyName = "Static black"; +StaticBlack.args = { + staticColor: "black", +}; +StaticBlack.tags = ["!dev"]; +StaticBlack.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = FieldLabelGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index 7f5477e4d5f..3420504c4d7 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -5,6 +5,7 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; +import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; @@ -20,6 +21,7 @@ export const Template = ({ alignment, isDisabled, isRequired, + staticColor, } = {}, context = {}) => { if (!label) { console.warn("FieldLabel: please provide a label for the field label."); @@ -49,6 +51,7 @@ export const Template = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--${alignment}`]: typeof alignment !== "undefined", + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", "is-disabled": isDisabled, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} @@ -57,8 +60,7 @@ export const Template = ({ data-testid=${ifDefined(testId)} for=${ifDefined(forInput)} > - ${label} - ${when(isRequired, () => icon)} + ${label?.trim()}${when(isRequired, () => html`⁠${icon}`)} </label> `; }; diff --git a/components/floatingactionbutton/CHANGELOG.md b/components/floatingactionbutton/CHANGELOG.md index 4fd1c8169c1..5f7b5025e87 100644 --- a/components/floatingactionbutton/CHANGELOG.md +++ b/components/floatingactionbutton/CHANGELOG.md @@ -1,5 +1,20 @@ # Change log +## 5.0.0-next.1 + +### Patch Changes + +- [#3687](https://github.com/adobe/spectrum-css/pull/3687) [`53d1e5e`](https://github.com/adobe/spectrum-css/commit/53d1e5e7eb7817c37be3cfe5a253363dea744046) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - ## S2 floating action button fix + + Opts to use the color property as opposed to fill for the icon. This correctly passes the floating action button icon colors to the component, to override the fill property style that is set on the embedded `.spectrum-Icon`. + +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 4.1.0 ### Minor Changes diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 7daf062a329..0ddd22d190a 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -72,7 +72,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-floating-action-button-background-color", diff --git a/components/floatingactionbutton/index.css b/components/floatingactionbutton/index.css index fc4d7786fd7..bc695d6c109 100644 --- a/components/floatingactionbutton/index.css +++ b/components/floatingactionbutton/index.css @@ -79,7 +79,7 @@ background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))); .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); + color: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))); } } @@ -87,7 +87,7 @@ background-color: var(--highcontrast-floating-action-button-background-color-down, var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))); .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); + color: var(--highcontrast-floating-action-button-icon-color-down, var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))); } } @@ -96,7 +96,7 @@ outline: 0; .spectrum-FloatingActionButton-icon { - fill: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); + color: var(--highcontrast-floating-action-button-icon-color-key-focus, var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))); } &::after { @@ -114,5 +114,5 @@ .spectrum-Icon.spectrum-FloatingActionButton-icon { block-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); inline-size: var(--mod-floating-action-button-icon-size, var(--spectrum-floating-action-button-icon-size)); - fill: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); + color: var(--highcontrast-floating-action-button-icon-color, var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))); } diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index eb428d61b75..b905e14205a 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/floatingactionbutton", - "version": "4.1.0", + "version": "5.0.0-next.1", "description": "The Spectrum CSS floatingactionbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -26,7 +26,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -34,7 +34,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/form/CHANGELOG.md b/components/form/CHANGELOG.md index f99a5c3c09c..ed89e83bfc2 100644 --- a/components/form/CHANGELOG.md +++ b/components/form/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 2.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 1.1.0 ### Minor Changes diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index 88655f8edd3..c07dfdca8d9 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-form-item-disabled-content-color"] } diff --git a/components/form/package.json b/components/form/package.json index a013328eeff..a5dc43a8e1e 100644 --- a/components/form/package.json +++ b/components/form/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/form", - "version": "1.1.0", + "version": "2.0.0-next.0", "description": "The Spectrum CSS form component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index 233f18adb21..ab7af9d944b 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -1,7 +1,7 @@ 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"; -import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js"; +import { Template as NumberField } from "@spectrum-css/stepper/stories/template.js"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -97,7 +97,7 @@ export default { label: "Age", id: "form-example-amount", content: [ - (passthroughs, context) => Stepper({ + (passthroughs, context) => NumberField({ ...passthroughs, }, context), ] @@ -107,7 +107,11 @@ export default { parameters: { packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** diff --git a/components/helptext/CHANGELOG.md b/components/helptext/CHANGELOG.md index 8e2b1c04cbd..c1ba01d25e0 100644 --- a/components/helptext/CHANGELOG.md +++ b/components/helptext/CHANGELOG.md @@ -1,13 +1,82 @@ # Change log +## 8.0.0-next.2 + +### Minor Changes + +- [#3683](https://github.com/adobe/spectrum-css/pull/3683) [`e309613`](https://github.com/adobe/spectrum-css/commit/e309613c356ba5586b65cdcc26787d161a3b39e1) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - ### Combobox S2 Migration + + #### New Changes + + - Removed quiet styling variant + - Updated corner radius to match S2 specifications + - Changed outline thickness for better visibility + - Replaced picker button with in-field button component + - Added help text along with invalid state + - Modified the WHCM invalid/error state in help text + + ### New tokens + + `--spectrum-combobox-font-weight` + `--spectrum-combobox-line-height-cjk` + `--spectrum-combobox-spacing-alert-icon-to-text` + `--spectrum-combobox-spacing-to-help-text` + + ### New mods + + `--mod-combobox-line-height-cjk` + `--mod-combobox-popover-animation-distance` + `--mod-combobox-spacing-alert-icon-to-text` + `--mod-combobox-spacing-to-help-text` + `--mod-combobox-textfield-background-color` + +## 8.0.0-next.1 + +### Major Changes + +📝 [#3628](https://github.com/adobe/spectrum-css/pull/3628) [`beee947`](https://github.com/adobe/spectrum-css/commit/beee9473b66a4e10c2e4c100a64a3d05fd3f5d44) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! + +#### Helptext S2 Migration + +The helptext S2 component has some updated spacing and typography tokens. The error message validation icon has also been updated. + +##### New mods + +`--mod-helptext-font-family` +`--mod-helptext-font-style` +`--mod-helptext-font-weight` +`--mod-helptext-top-edge-to-workflow-icon` +`--mod-helptext-bottom-edge-to-workflow-icon` + +##### Renamed mods + +`--mod-helptext-bottom-to-workflow-icon` >> `--mod-helptext-edge-to-workflow-icon` + +##### Deprecated tokens + +`--spectrum-help-text-top-to-workflow-icon-small` +`--spectrum-help-text-top-to-workflow-icon-medium` +`--spectrum-help-text-top-to-workflow-icon-large` +`--spectrum-help-text-top-to-workflow-icon-extra-large` + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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.0 ### Minor Changes 📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)! -## New feature - Minified and gzipped outputs available for all compiled CSS assets. ### Patch Changes diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index f730c33a671..4ed0075bb8c 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -14,7 +14,6 @@ ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text", ".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon", ".spectrum-HelpText.spectrum-HelpText--sizeL", - ".spectrum-HelpText.spectrum-HelpText--sizeM", ".spectrum-HelpText.spectrum-HelpText--sizeS", ".spectrum-HelpText.spectrum-HelpText--sizeXL", ".spectrum-HelpText:lang(ja)", @@ -22,65 +21,80 @@ ".spectrum-HelpText:lang(zh)" ], "modifiers": [ + "--mod-helptext-bottom-edge-to-workflow-icon", "--mod-helptext-bottom-to-text", - "--mod-helptext-bottom-to-workflow-icon", "--mod-helptext-content-color-default", + "--mod-helptext-font-family", "--mod-helptext-font-size", + "--mod-helptext-font-style", + "--mod-helptext-font-weight", "--mod-helptext-icon-color-default", "--mod-helptext-icon-size", "--mod-helptext-line-height", "--mod-helptext-line-height-cjk", "--mod-helptext-min-height", "--mod-helptext-text-to-visual", - "--mod-helptext-top-to-text", - "--mod-helptext-top-to-workflow-icon" + "--mod-helptext-top-edge-to-workflow-icon", + "--mod-helptext-top-to-text" ], "component": [ - "--spectrum-help-text-top-to-workflow-icon-extra-large", - "--spectrum-help-text-top-to-workflow-icon-large", - "--spectrum-help-text-top-to-workflow-icon-medium", - "--spectrum-help-text-top-to-workflow-icon-small", "--spectrum-helptext-bottom-to-text", - "--spectrum-helptext-bottom-to-workflow-icon", "--spectrum-helptext-content-color-default", + "--spectrum-helptext-edge-to-workflow-icon", + "--spectrum-helptext-font-family", "--spectrum-helptext-font-size", + "--spectrum-helptext-font-style", + "--spectrum-helptext-font-weight", "--spectrum-helptext-icon-color-default", "--spectrum-helptext-icon-size", + "--spectrum-helptext-line-height", "--spectrum-helptext-min-height", "--spectrum-helptext-text-to-visual", - "--spectrum-helptext-top-to-text", - "--spectrum-helptext-top-to-workflow-icon" + "--spectrum-helptext-top-to-text" ], "global": [ "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", + "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-line-height-100", - "--spectrum-negative-color-900", + "--spectrum-negative-content-color-default", "--spectrum-neutral-subdued-content-color-default", + "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", + "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" + "--highcontrast-helptext-content-color-disabled", + "--highcontrast-helptext-icon-color-default", + "--highcontrast-helptext-icon-color-disabled" ] } diff --git a/components/helptext/index.css b/components/helptext/index.css index 607a81e01c8..3ef91377442 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -11,99 +11,85 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-HelpText { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - - forced-color-adjust: none; +.spectrum-HelpText { + /* Spacing */ + --spectrum-helptext-min-height: var(--spectrum-component-height-100); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + + /* Typpography */ + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-helptext-font-style: var(--spectrum-default-font-style); + --spectrum-helptext-line-height: var(--spectrum-line-height-100); + --spectrum-helptext-font-weight: var(--spectrum-regular-font-weight); - .spectrum-HelpText-validationIcon, - .spectrum-HelpText-text { - forced-color-adjust: none; - } + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100)); } -} - -.spectrum-HelpText { - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); &.spectrum-HelpText--sizeS { --spectrum-helptext-min-height: var(--spectrum-component-height-75); --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-helptext-font-size: var(--spectrum-font-size-75); --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - } - - &, - &.spectrum-HelpText--sizeM { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); } &.spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - } - - &.spectrum-HelpText--sizeXL { --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-helptext-font-size: var(--spectrum-font-size-200); --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); } + &.spectrum-HelpText--sizeXL { + --spectrum-helptext-min-height: var(--spectrum-component-height-300); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-300); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-helptext-edge-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + } + + &, &.spectrum-HelpText--neutral { --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); } &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + --spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default); } &.is-disabled { --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); } +} +.spectrum-HelpText { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); display: flex; font-size: var(--mod-helptext-font-size, var(--spectrum-helptext-font-size)); min-block-size: var(--mod-helptext-min-height, var(--spectrum-helptext-min-height)); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --mod-helptext-line-height: var(--mod-helptext-line-height-cjk, var(--spectrum-cjk-line-height-100)); - } - .spectrum-HelpText-validationIcon { margin-inline-end: var(--mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual)); - padding-block-start: var(--mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon)); - padding-block-end: var(--mod-helptext-bottom-to-workflow-icon, var(--spectrum-helptext-bottom-to-workflow-icon)); + padding-block-start: var(--mod-helptext-top-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); + padding-block-end: var(--mod-helptext-bottom-edge-to-workflow-icon, var(--spectrum-helptext-edge-to-workflow-icon)); flex-shrink: 0; block-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); inline-size: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); @@ -112,9 +98,13 @@ .spectrum-HelpText-text { padding-block-start: var(--mod-helptext-top-to-text, var(--spectrum-helptext-top-to-text)); padding-block-end: var(--mod-helptext-bottom-to-text, var(--spectrum-helptext-bottom-to-text)); - line-height: var(--mod-helptext-line-height, var(--spectrum-line-height-100)); + line-height: var(--mod-helptext-line-height, var(--spectrum-helptext-line-height)); + font-family: var(--mod-helptext-font-family, var(--spectrum-helptext-font-family)); + font-style: var(--mod-helptext-font-style, var(--spectrum-helptext-font-style)); + font-weight: var(--mod-helptext-font-weight, var(--spectrum-helptext-font-weight)); } + /* Variants -- Neutral, negative, disabled */ &.spectrum-HelpText--neutral { .spectrum-HelpText-text { color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); @@ -137,11 +127,20 @@ &.is-disabled { .spectrum-HelpText-text { - color: var(--highcontrast-helptext-content-color-default, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); + color: var(--highcontrast-helptext-content-color-disabled, var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))); } .spectrum-HelpText-validationIcon { - color: var(--highcontrast-helptext-icon-color-default, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); + color: var(--highcontrast-helptext-icon-color-disabled, var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))); } } } + +@media (forced-colors: active) { + .spectrum-HelpText { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + --highcontrast-helptext-icon-color-disabled: GrayText; + --highcontrast-helptext-content-color-disabled: GrayText; + } +} diff --git a/components/helptext/package.json b/components/helptext/package.json index e1a0effac28..838cff89454 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/helptext", - "version": "7.1.0", + "version": "8.0.0-next.2", "description": "The Spectrum CSS helptext component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 5274cec9f78..01d56bd4f99 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -63,7 +63,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** @@ -97,6 +101,9 @@ export const Sizing = (args, context) => Sizes({ Sizing.storyName = "Sizing"; Sizing.args = { variant: "negative", + customStyles: { + "--mod-helptext-align-text": "center", + }, }; Sizing.tags = ["!dev"]; Sizing.parameters = { diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 74fa628ae2a..894c60745cb 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -34,7 +34,7 @@ export const Template = ({ ${when(!hideIcon && variant == "negative", () => Icon( { - iconName: "Alert", + iconName: "AlertTriangle", setName: "workflow", size, customClasses: [`${rootClass}-validationIcon`], @@ -85,7 +85,10 @@ export const NegativeTemplate = (args, context) => Container({ }, content: Template({ ...args, - hideIcon + hideIcon, + customStyles: { + "--mod-helptext-align-text": "center", + }, }, context), }, context) )}`, diff --git a/components/icon/CHANGELOG.md b/components/icon/CHANGELOG.md index 94db4c20d1a..e78c8704a23 100644 --- a/components/icon/CHANGELOG.md +++ b/components/icon/CHANGELOG.md @@ -1,5 +1,26 @@ # Change log +## 10.0.0-next.2 + +### Minor Changes + +- [#3866](https://github.com/adobe/spectrum-css/pull/3866) [`1b33315`](https://github.com/adobe/spectrum-css/commit/1b33315fa1b65d65fe940d3be4ea4395d5394655) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - Updates the icon component to use size tokens for newly added ui icons. + +## 10.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 10.0.0-next.0 + +### Major Changes + +📝 [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b) Thanks [@pfulton](https://github.com/pfulton)! + +Updates the icon component to use the new Spectrum 2 icon sets. The `.spectrum-UIIcon--medium` and `.spectrum-UIIcon--large` classes have been removed, as UI icons are now delivered with a single SVG. The color property also now makes use of the `--iconPrimary` custom property that is defined in some of the SVG files. Storybook has been updated to use and load the new SVGs, whose name format and directories have changed. + ## 9.1.0 ### Minor Changes @@ -168,6 +189,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 6.0.5 diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7f5d27e3789..7fcad33c95b 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -11,8 +11,11 @@ ".spectrum-Icon--sizeXXL", ".spectrum-Icon--sizeXXS", ".spectrum-UIIcon", - ".spectrum-UIIcon--large", - ".spectrum-UIIcon--medium", + ".spectrum-UIIcon-Add100", + ".spectrum-UIIcon-Add200", + ".spectrum-UIIcon-Add300", + ".spectrum-UIIcon-Add50", + ".spectrum-UIIcon-Add75", ".spectrum-UIIcon-ArrowDown100", ".spectrum-UIIcon-ArrowDown200", ".spectrum-UIIcon-ArrowDown300", @@ -99,15 +102,23 @@ ".spectrum-UIIcon-Dash50", ".spectrum-UIIcon-Dash500", ".spectrum-UIIcon-Dash600", - ".spectrum-UIIcon-Dash75" + ".spectrum-UIIcon-Dash75", + ".spectrum-UIIcon-DragHandle100", + ".spectrum-UIIcon-DragHandle200", + ".spectrum-UIIcon-DragHandle300", + ".spectrum-UIIcon-DragHandle75", + ".spectrum-UIIcon-Gripper100", + ".spectrum-UIIcon-LinkOut100", + ".spectrum-UIIcon-LinkOut200", + ".spectrum-UIIcon-LinkOut300", + ".spectrum-UIIcon-LinkOut400", + ".spectrum-UIIcon-LinkOut75" ], "modifiers": [ "--mod-icon-block-size", "--mod-icon-color", "--mod-icon-inline-size", - "--mod-icon-size", - "--mod-ui-icon-large-display", - "--mod-ui-icon-medium-display" + "--mod-icon-size" ], "component": [ "--spectrum-icon-block-size", @@ -115,6 +126,11 @@ "--spectrum-icon-size" ], "global": [ + "--spectrum-add-icon-size-100", + "--spectrum-add-icon-size-200", + "--spectrum-add-icon-size-300", + "--spectrum-add-icon-size-50", + "--spectrum-add-icon-size-75", "--spectrum-arrow-icon-size-100", "--spectrum-arrow-icon-size-200", "--spectrum-arrow-icon-size-300", @@ -160,8 +176,16 @@ "--spectrum-dash-icon-size-500", "--spectrum-dash-icon-size-600", "--spectrum-dash-icon-size-75", - "--spectrum-ui-icon-large-display", - "--spectrum-ui-icon-medium-display", + "--spectrum-drag-handle-icon-size-100", + "--spectrum-drag-handle-icon-size-200", + "--spectrum-drag-handle-icon-size-300", + "--spectrum-drag-handle-icon-size-75", + "--spectrum-gripper-icon-size-100", + "--spectrum-link-out-icon-size-100", + "--spectrum-link-out-icon-size-200", + "--spectrum-link-out-icon-size-300", + "--spectrum-link-out-icon-size-400", + "--spectrum-link-out-icon-size-75", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", @@ -170,7 +194,6 @@ "--spectrum-workflow-icon-size-xxl", "--spectrum-workflow-icon-size-xxs" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/icon/icons.css b/components/icon/icons.css index e413ba95173..ff0a39b001d 100644 --- a/components/icon/icons.css +++ b/components/icon/icons.css @@ -13,6 +13,9 @@ .spectrum-Icon, .spectrum-UIIcon { + /* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */ + --iconPrimary: var(--mod-icon-color, currentColor); + --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); @@ -24,7 +27,8 @@ color: var(--mod-icon-color, inherit); /* Fill should match the current text color. */ - fill: currentColor; + /* stylelint-disable-next-line custom-property-pattern -- map this to the same value as what's used by the icon's SVG code */ + fill: var(--iconPrimary); /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ pointer-events: none; diff --git a/components/icon/package.json b/components/icon/package.json index eb7ec29fc9e..b9fe74e1ceb 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/icon", - "version": "9.1.0", + "version": "10.0.0-next.2", "description": "The Spectrum CSS icon component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index da5fc2cda00..9287892c250 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -1,27 +1,11 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { IconGroup } from "./icon.test.js"; -import { IconListTemplate, Template, UIDefaultTemplate } from "./template.js"; -import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; - -/** - * Create a list of all UI Icons with their sizing numbers. - * - * The list is a little long until Storybook adds a way to use conditional options - * in controls, e.g. a "uiSize" control with options pulled from uiIconSizes: - * @see https://github.com/storybookjs/storybook/discussions/24235 - */ -const uiIconNameOptions = uiIconsWithDirections.map((iconName) => { - const baseIconName = iconName.replace(/(Left|Right|Up|Down)$/, ""); - // Icons like Gripper that don't have sizes yet, represented by any empty array. - if (uiIconSizes[baseIconName]?.length == 0) { - return [baseIconName]; - } - return uiIconSizes[baseIconName]?.map(sizeNum => iconName + sizeNum) ?? []; -}).flat(); +import { FullIconSetTemplate, Template, UIArrowsTemplate, UIDefaultTemplate, WorkflowDefaultTemplate } from "./template"; +import { uiIconsWithDirections, workflowIconsCleaned, workflowSizes } from "./utilities.js"; /** * The Icon component contains all of the CSS used for displaying both workflow and UI icons. @@ -44,7 +28,7 @@ export default { component: "Icon", argTypes: { size: { - ...size(["xs", "s", "m", "l", "xl", "xxl"]), + ...size(workflowSizes), if: { arg: "setName", eq: "workflow" }, }, setName: { @@ -64,7 +48,7 @@ export default { type: { summary: "string" }, category: "Content", }, - options: workflowIcons, + options: workflowIconsCleaned, control: "select", if: { arg: "setName", eq: "workflow" }, }, @@ -75,9 +59,7 @@ export default { type: { summary: "string" }, category: "Content", }, - options: [ - ...uiIconNameOptions, - ], + options: uiIconsWithDirections, control: "select", if: { arg: "setName", eq: "ui" }, }, @@ -90,25 +72,83 @@ export default { }, control: "color", }, - useRef: { table: { disable: true } }, + useRef: { + name: "Use sprite sheet reference", + description: "Storybook only: whether to display an SVG with a `<use>` reference to the icon within a loaded sprite sheet. This improves Storybook performance, especially for multiple icons. When set to `false`, the icon file's full markup is used.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Advanced", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-Icon", setName: "workflow", - iconName: "ABC", + iconName: "Color", + uiIconName: "Checkmark400", size: "xl", useRef: true, }, parameters: { packageJson, metadata, + design: { + type: "figma", + url: "https://www.figma.com/design/9qeVZSJ9t0kv6r7njzgHx7/S2-%2F-Styles-visualizer-(WIP)?node-id=295-24257&t=ZC7fyaQ0VQYQ5VYM-1", + }, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = IconGroup.bind({}); Default.args = {}; Default.tags = ["!autodocs"]; +/** + * All icons in the Workflow icon set. + */ +export const Workflow = FullIconSetTemplate.bind({}); +Workflow.storyName = "Workflow icons"; +Workflow.tags = ["!autodocs"]; +Workflow.args = { + setName: "workflow", + useRef: true, +}; +Workflow.argTypes = { + setName: { table: { disable: true } }, + iconName: { table: { disable: true } }, +}; +Workflow.parameters = { + chromatic: { disableSnapshot: true }, + // Layout other than "centered" needed for dynamic grid columns CSS to work correctly. + layout: "padded", +}; + +/** + * All icons in the UI icon set. + */ +export const UI = FullIconSetTemplate.bind({}); +UI.storyName = "UI icons"; +UI.tags = ["!autodocs"]; +UI.args = { + setName: "ui", + useRef: true, +}; +UI.argTypes = { + setName: { table: { disable: true } }, + uiIconName: { table: { disable: true } }, +}; +UI.parameters = { + chromatic: { disableSnapshot: true }, + // Layout other than "centered" needed for dynamic grid columns CSS to work correctly. + layout: "padded", +}; + // ********* VRT ONLY ********* // export const WithForcedColors = IconGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; @@ -122,35 +162,16 @@ WithForcedColors.parameters = { }, }; -/* Stories for the MDX "Docs" only. */ +// ********* DOCS ONLY ********* // /** * The workflow icon set contains several hundred icons to choose from. + * For a full list of all icons within this set, see **[workflow icons](/story/components-icon--workflow)**. * These icons can be seen in use within [button](/docs/components-button--docs), [action button](/docs/components-action-button--docs), [menu](/docs/components-menu--docs), and many other components. * Here is an example of just a few of these icons: */ -export const WorkflowDefault = (args, context) => IconListTemplate( - { - ...args, - setName: "workflow", - size: "xl", - }, - [ - "Alert", - "Asset", - "Actions", - "ArrowDown", - "Camera", - "Copy", - "DeviceDesktop", - "Download", - "FilterAdd", - "Form", - "Light", - "Polygon", - ], - context -); +export const WorkflowDefault = WorkflowDefaultTemplate.bind({}); +WorkflowDefault.storyName = "Workflow icons"; WorkflowDefault.tags = ["!dev"]; WorkflowDefault.parameters = { chromatic: { disableSnapshot: true }, @@ -158,8 +179,8 @@ WorkflowDefault.parameters = { WorkflowDefault.storyName = "Workflow icons"; /** - * Below is an example of a workflow icon displayed at all its available sizes, from extra-small to extra-extra-large. - * Workflow icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set. + * An example of a Workflow icon displayed at all sizes, from small to extra-large. + * Note that the extra-extra-large size is currently *not* part of the design specifications and may be deprecated in the near future. */ export const WorkflowSizing = (args, context) => Sizes({ Template, @@ -167,6 +188,7 @@ export const WorkflowSizing = (args, context) => Sizes({ withHeading: false, ...args, }, context); +WorkflowSizing.tags = ["!dev"]; WorkflowSizing.args = { setName: "workflow", iconName: "Asset", @@ -175,11 +197,13 @@ WorkflowSizing.tags = ["!dev"]; WorkflowSizing.parameters = { chromatic: { disableSnapshot: true }, }; -WorkflowSizing.storyName = "Workflow sizing"; +WorkflowSizing.storyName = "Workflow icons - sizing"; /** * UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. * The chevron within the [combobox component](/docs/components-combobox--docs) is one example. + * For a full list of all icons within this set, see **[ui icons](/story/components-icon--ui)**. + * * Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing. They have unique classes applied that set their size in CSS. For example: * - `.spectrum-UIIcon-Asterisk300` * - `.spectrum-UIIcon-ChevronDown75` @@ -205,21 +229,26 @@ UIDefault.parameters = { * - `.spectrum-UIIcon-ArrowDown100` * - `.spectrum-UIIcon-ArrowUp100` */ -export const UIArrows = (args, context) => IconListTemplate( - { - ...args, - setName: "ui", - }, - [ - "ArrowRight100", - "ArrowLeft100", - "ArrowDown100", - "ArrowUp100", - ], - context -); +export const UIArrows = UIArrowsTemplate.bind({}); UIArrows.storyName = "UI icons - directional"; UIArrows.tags = ["!dev"]; UIArrows.parameters = { chromatic: { disableSnapshot: true }, }; + +/** + * In Storybook documentation, if a workflow icon name does not exist in the set, the + * placeholder "Circle" icon will be shown. Missing ui icons will render + * nothing. The following example purposefully uses an icon name that does + * not exist to demonstrate this behavior. + */ +export const MissingWorkflowIcon = Default.bind({}); +MissingWorkflowIcon.storyName = "Workflow icons - missing workflow icon placeholder"; +MissingWorkflowIcon.tags = ["!dev"]; +MissingWorkflowIcon.args = { + setName: "workflow", + iconName: "ThisIconNameDoesNotExist", +}; +MissingWorkflowIcon.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/icon/stories/icon.test.js b/components/icon/stories/icon.test.js index fc81d4cb922..34202826597 100644 --- a/components/icon/stories/icon.test.js +++ b/components/icon/stories/icon.test.js @@ -1,99 +1,127 @@ -import { Variants } from "@spectrum-css/preview/decorators"; +import { Container, Variants } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; -import { when } from "lit/directives/when.js"; import { Template } from "./template.js"; -import { uiIconSizes, uiIconsWithDirections } from "./utilities.js"; +import { uiIconsWithDirections, uniqueUiIconBaseNames, workflowSizes } from "./utilities.js"; /** * Chromatic VRT template that displays multiple icons to cover various options. + * Includes Chromatic-only testing grid with: + * - Several workflow icons, at all sizes, with some set to a color + * - All UI icons, organized within a grid by sizing number and name */ -const TestTemplate = (args, context) => { - return html` - <div - style=${styleMap({ - "display": "flex", - "flex-direction": "column", - "gap": "32px", - })} - > - <div - style=${styleMap({ - "display": "flex", - "flex-direction": "column", - "gap": "16px", - })} - > - ${[ - { - setName: "workflow", - iconName: "Alert", - fill: "var(--spectrum-negative-content-color-default)", - }, - { - setName: "workflow", - iconName: "Hand", - }, - { - setName: "workflow", - iconName: "Help", - }, - { - setName: "workflow", - iconName: "ArrowLeft", - }, - { - setName: "workflow", - iconName: "ArrowRight", - }, - { - setName: "workflow", - iconName: "ChevronDown", - } - ].map((row_args) => html` - <div - style=${styleMap({ - "display": "grid", - "grid-template-columns": "repeat(6, 1fr)", - "column-gap": "24px", - "row-gap": "48px", - "place-items": "center", - })} - > - ${["xs","s","m","l","xl","xxl"].map( - (size) => Template({ ...args, ...row_args, size }) - )} - </div>` - )} - </div> - <div - style=${styleMap({ - "display": "flex", - "flex-direction": "column", - "gap": "16px", - })} - > - ${uiIconsWithDirections.map(iconName => html` - <div - style=${styleMap({ - "display": "grid", - "grid-template-columns": "repeat(8, 1fr)", - "column-gap": "24px", - "row-gap": "48px", - })} - > - ${uiIconSizes[iconName.replace(/(Left|Right|Up|Down)$/, "")]?.map((iconSize) => - Template({ ...args, setName: "ui", iconName: iconName + iconSize }, context) - )} - ${when(uiIconSizes[iconName]?.length == 0, () => - Template({ ...args, setName: "ui", iconName }, context) - )} - </div>` - )} - </div> - </div> - `; -}; +export const TestTemplate = (args, context) => html` + ${Container({ + heading: "Workflow icon examples", + withBorder: false, + direction: "row", + wrapperStyles: { + columnGap: "12px", + }, + content: html` + <div + style=${styleMap({ + "display": "grid", + "grid-template-columns": `repeat(${workflowSizes.length}, 50px)`, + "gap": "16px", + "border": "1px solid var(--spectrum-gray-200)", + "border-radius": "4px", + "padding": "16px", + "margin-block-end": "32px", + })} + > + ${workflowSizes.map(scale => html` + <div> + ${Typography({ + customClasses: ["chromatic-ignore"], + semantics: "detail", + size: "s", + content: [scale], + customStyles: { + "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + } + })} + </div> + `)} + ${[ + "Add", + "AlertTriangle", + "Edit", + "File", + "Folder", + "MenuHamburger", + "SelectRectangle", + "Redo", + "Star", + "StarFilled", + "User", + "ColorHarmony", + "CornerRadiusBottomLeft", + ].map((iconName, idx) => html` + ${workflowSizes.map((size) => Template({ + ...args, + useRef: true, + iconName, + setName: "workflow", + size, + fill: idx % 5 === 0 ? "var(--spectrum-negative-content-color-default)" : undefined + }, context))} + `)} + </div> + `, + }, context)} + + ${Container({ + heading: "UI icon set", + withBorder: false, + direction: "row", + wrapperStyles: { + columnGap: "12px", + }, + content: html` + <div + style=${styleMap({ + "display": "grid", + "grid-template-columns": "repeat(8, 50px)", + "gap": "16px", + "border": "1px solid var(--spectrum-gray-200)", + "border-radius": "4px", + "padding": "16px", + })} + > + ${["50", "75", "100", "200", "300", "400", "500", "600"].map(scale => html` + <div> + ${Typography({ + customClasses: ["chromatic-ignore"], + semantics: "detail", + size: "s", + content: [scale], + customStyles: { + "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + } + })} + </div> + `)} + ${uniqueUiIconBaseNames.sort().reduce((print, iconName) => { + let output = Array(8).fill(html`<span></span>`); + ["50", "75", "100", "200", "300", "400", "500", "600"].forEach((scale, idx) => { + if (uiIconsWithDirections.includes(`${iconName}${scale}`)) { + output[idx] = Template({ + ...args, + setName: "ui", + useRef: false, + uiIconName: `${iconName}${scale}`, + }, context); + } + }); + print.push(...output); + return print; + }, [])} + </div> + `, + }, context)} +`; export const IconGroup = Variants({ Template, diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index 2895ff1ef3e..ae7e10a192f 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -1,9 +1,12 @@ import { getRandomId } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; +import { when } from "lit/directives/when.js"; +import { appendUiIconDefaultSizing, getSpriteSheetName, uiIconsWithDirections, workflowIconsCleaned } from "./utilities.js"; import "../index.css"; @@ -12,78 +15,8 @@ import "../index.css"; * @typedef { IconArgs & { scale: string, setName: 'workflow' | 'ui' } } IconProps */ -const fetchIconDetails = ({ - icons, - workflowIcons = [], - uiIcons = [], - uiIconSizes = {}, -}) => { - if (!icons || Object.keys(icons).length == 0) { - // Fetch loaded data if not provided - if (window.icons) icons = window.icons; - else { - return { - workflowIcons: [], - uiIcons: [], - uiIconSizes: {}, - uiIconsWithDirections: [], - }; - } - } - - // clean up loaded icon data - icons = Object.entries(icons).reduce((acc, [setName, data]) => { - acc[setName] = Object.entries(data).reduce((acc, [size, data]) => { - acc[size] = Object.entries(data).reduce((acc, [iconName, svg]) => { - // simplify icon name - iconName = iconName.split("/").pop().replace(/\.svg$/, ""); - acc[iconName] = svg; - - // Add the icon name to the workflowIcons list if it's from the workflow set - if (setName === "workflow") { - workflowIcons.push(iconName); - } - else { - const iconNameRoot = iconName.replace(/\d{2,3}$/, "").replace(/(Right|Left|Down|Up)$/, ""); - const iconNameSize = iconName.match(/\d{2,3}/g)?.[0]; - uiIcons.push(iconNameRoot); - uiIconSizes[iconNameRoot] = [ - ...new Set([ - ...uiIconSizes[iconNameRoot] ?? [], - ...(iconNameSize ? [iconNameSize] : []), - ]) - ]; - } - return acc; - }, {}); - return acc; - }, {}); - return acc; - }, {}); - - return { - icons, - workflowIcons: [...new Set(workflowIcons)], - uiIcons: [...new Set(uiIcons)], - uiIconSizes, - uiIconsWithDirections: [ - ...new Set([ - ...(uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)) ?? []), - "ArrowRight", - "ArrowLeft", - "ArrowUp", - "ArrowDown", - "ChevronRight", - "ChevronLeft", - "ChevronUp", - "ChevronDown", - ]) - ], - }; -}; - /** - * Template for rendering an icon + * Template for rendering an icon. * @description Icon template that renders an icon based on the provided icon name and set name. * @param {IconProps} props * @param {string} props.rootClass @@ -94,146 +27,76 @@ const fetchIconDetails = ({ * @param {string} props.fill * @param {string} props.id * @param {string[]} props.customClasses + * @param {boolean} props.useRef [true] Whether to use an SVG with a reference to the icon within the sprite sheet. When false, returns the the individual SVG's entire markup. * @returns {import('lit').TemplateResult<1>} */ export const Template = ({ rootClass = "spectrum-Icon", size = "m", - setName, + setName = "workflow", iconName, uiIconName, fill, id = getRandomId("icon"), customClasses = [], - icons, useRef = true, - workflowIcons, - uiIcons, - uiIconSizes, } = {}, context = {}) => { - const { globals = {}, loaded = {} } = context; - - const scale = globals.scale ?? "medium"; - - if (!workflowIcons || !uiIcons || !uiIconSizes) { - const details = fetchIconDetails({ - icons: loaded.icons, - workflowIcons, - uiIcons, - uiIconSizes - }); - - if(details.icons) { - icons = details.icons; - } - - if (!workflowIcons && details.workflowIcons) { - workflowIcons = details.workflowIcons; - } - - if (!uiIcons && details.uiIcons) { - uiIcons = details.uiIcons; - } - - if (!uiIconSizes && details.uiIconSizes) { - uiIconSizes = details.uiIconSizes; - } - } + // All icons SVG markup from the global IconLoader are in loaded.icons + const { loaded } = context; - // UI icons are selected from a different control. + // Treat "iconName" as the icon name regardless of the icon set. + // UI icons are selected from a different control and arg. if (setName === "ui" && uiIconName) { iconName = uiIconName; } - if (!iconName) { + // Make sure icon set is provided. + if (!["ui","workflow"].includes(setName)) { console.warn( - "Icon: Could not render a result because no icon name was provided to the icon template." + `Icon "${iconName}" is missing its icon set. Make sure you are explicitly setting either the workflow or ui icon set.` ); return html``; } - let idKey = iconName; - - // If icon set was not provided, try determine which icon set contains this icon. - // Note: icon sets can contain the same icon name, with different icons. - if (!["workflow","ui"].includes(setName)) { - if (workflowIcons.includes(idKey)) { - setName = "workflow"; - } - else if (uiIcons.includes(idKey.replace(/\d{2,3}$/, "").replace(/(Right|Left|Down|Up)$/, ""))) { - setName = "ui"; - } + // Make sure icon name is provided. + if (!iconName) { + console.warn("Icon: Could not render a result because no icon name was provided to the icon template."); + return html``; } - // Prefer full SVG for UI icons because sizing is more consistent. - if (setName === "ui" && uiIconName) { - useRef = false; + /** + * Append approximate sizing number to UI icons passed in without a sizing number. + * + * Note: It's preferred for components to provide the specific UI sizing numbers in the UI icon + * name, rather than relying on this approximation, as UI icons do not use t-shirt sizing. + */ + if (setName === "ui") { + iconName = appendUiIconDefaultSizing(iconName, size); } - if (!setName) { - console.warn( - `Icon: Could not determine the icon set for the provided icon name: ${idKey}.` - ); + // Make sure icon exists in the set. + if (setName == "ui" && !uiIconsWithDirections.includes(iconName)) { + console.warn(`Icon: Could not render an icon with the name "${iconName}" because it does not exist in the "ui" icon set.`); return html``; } - // If a descriptor like Right, Left, Down, or Up is present for the UI icons Chevron or - // Arrow, use that only for the class and not the icon fetch. - if ( - setName == "ui" && - uiIcons.some((c) => idKey.startsWith(c)) && - ["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c)) - ) { - idKey = idKey.replace(/(Right|Left|Down|Up)/, ""); + if (setName == "workflow" && !workflowIconsCleaned.includes(iconName)) { + console.warn(`Icon: Could not render the correct icon with the name "${iconName}" because it does not exist in the "workflow" icon set. Rendering the placeholder icon instead.`); + iconName = "Circle"; } - /** - * Fallback UI Icon sizing number. - * - * If the icon name includes its scale, we want to leave that scale. This is preferred, - * as UI icons do not use workflow icon sizing. - * - * If the UI icon name does not include scale, reformat it to match the provided sizing. - * E.g. with a size of "s", the icon name "ChevronRight" would become "ChevronRight75". - */ + // Name of icon that corresponds with SVG file. This may differ from the icon name, such as with + // directional icons that use a single icon. + let iconNameToLoad = iconName; + + // If a descriptor like "Right", "Left", "Down", or "Up" is present for the UI icons Chevron or + // Arrow, use that only for the class name and not the icon fetch. This is because these use a + // single icon file that is rotated in CSS. if ( - setName == "ui" && - // Exists in the list of available UI icons. - uiIcons.includes(idKey.replace(/\d{2,3}$/, "")) && - // Does not already have size number at the end. - !idKey.match(/^(?!\d).*\d{2,3}$/) && - // Exclude some UI icons that do not (yet) have size numbers. - uiIconSizes[idKey]?.length != 0 + ["Right", "Left", "Down", "Up"].some((c) => iconNameToLoad.includes(c)) && + setName === "ui" ) { - let sizeVal; - switch (size) { - case "xs": - case "s": - sizeVal = "75"; - break; - case "l": - sizeVal = "200"; - break; - case "xl": - case "xxl": - sizeVal = "300"; - break; - default: - sizeVal = "100"; - break; - } - - idKey += sizeVal; - iconName += sizeVal; - } - - // Fetch SVG file markup, and set optional fill color. - let inlineStyle; - if (fill) inlineStyle = `color: ${fill}`; - - let svgString; - if (!useRef && icons && icons[setName]?.[scale]?.[idKey]) { - svgString = icons[setName][scale][idKey]; + iconNameToLoad = iconNameToLoad.replace(/(Right|Left|Down|Up)/, ""); } /** @@ -243,7 +106,6 @@ export const Template = ({ const classList = { [rootClass]: true, [`spectrum-UIIcon-${iconName}`]: !!(setName === "ui"), - [`${rootClass}--${scale}`]: !!(setName === "ui" && scale), [`${rootClass}--size${size?.toUpperCase()}`]: !!( (!setName || setName === "workflow") && size @@ -251,42 +113,108 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), }; - if (svgString) { - const classesAsString = Object.entries(classList).reduce((acc, [key, value]) => { - if (value) acc += `${key} `; - return acc; - }, ""); + /** + * Display full SVG file markup from global IconLoader data, when not using a reference to the sprite sheet. + */ + if (!useRef) { + let svgString; + if (loaded?.icons && loaded?.icons[setName]?.[iconNameToLoad]) { + svgString = loaded.icons[setName][iconNameToLoad]; + } - return html`${unsafeSVG( - svgString.replace(/<svg/, `<svg class="${classesAsString}" focusable="false" aria-hidden="true" role="img"`) - )}`; + // Return the individual SVG's entire markup. + if (svgString) { + const classesAsString = Object.entries(classList).reduce((acc, [key, value]) => { + if (value) acc += `${key} `; + return acc; + }, ""); + + return html`${unsafeSVG( + svgString.replace(/<svg/, `<svg class="${classesAsString}" ${fill ? `style="color: ${fill};"` : ""} focusable="false" aria-hidden="true" role="img"`) + )}`; + } + else { + console.warn(`Could not find SVG markup for "${iconNameToLoad}" in context.loaded.icons. Was context passed through in the template? Falling back to using the sprite sheet reference instead.`); + } } - // ui ID: #spectrum-css-icon-${idKey} - // workflow ID: #spectrum-icon-(18|24)-${idKey} - const iconID = - setName !== "workflow" - ? `spectrum-css-icon-${idKey}` - : `spectrum-icon-${scale !== "medium" ? "24" : "18"}-${idKey}`; + // ID of the icon within the sprite sheet for its icon set. + const iconID = getSpriteSheetName(iconNameToLoad, setName); + // Return SVG markup with a reference to the icon ID within the sprite sheet. return html`<svg class=${classMap(classList)} id=${ifDefined(id)} - style=${ifDefined(inlineStyle)} + style=${ifDefined(fill ? `color: ${fill};` : undefined)} focusable="false" aria-hidden="true" - aria-labelledby=${idKey} + aria-label=${iconName} role="img" > - <title id=${idKey}>${idKey.replace(/([A-Z])/g, " $1").trim()} + ${iconNameToLoad.replace(/([A-Z])/g, " $1").trim()} `; }; +/** + * Display all icons in the icon set within a grid. + */ +export const FullIconSetTemplate = (args, context) => { + return html` +
+ ${when(args.setName === "workflow", () => { + return workflowIconsCleaned.map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context)); + }, () => { + return uiIconsWithDirections.map((iconName) => IconWithLabelTemplate({ ...args, uiIconName: iconName }, context)); + })} +
+ `; +}; + +/** + * Display a single icon in the icon set with a label showing the icon name. + */ +export const IconWithLabelTemplate = (args, context) => html` +
+ ${Template({ + useRef: true, + size: "xxl", + setName: args.setName, + iconName: args?.iconName ?? undefined, + uiIconName: args?.uiIconName ?? undefined, + ...args, + }, context)} + ${Typography({ + customClasses: ["chromatic-ignore"], + semantics: "body", + size: "xxs", + content: [ + args.setName == "ui" ? args.uiIconName : args.iconName, + ], + })} +
+`; + /** * Helper template function to display multiple icons using an array of icon names. */ -export const IconListTemplate = (args, iconsList = [], context) => html` +export const IconListTemplate = (args, context, iconsList = []) => html`
html` })} > ${iconsList.map( - (iconName) => Template({ ...args, iconName }, context) + (iconName) => Template({ + ...args, + iconName: args?.setName === "workflow" ? iconName : undefined, + uiIconName: args?.setName === "ui" ? iconName : undefined, + }, context) )}
`; /** - * A sampling of a few UI icons. + * Display examples of multiple workflow icons. */ -export const UIDefaultTemplate = (args, context) => html` -
+export const WorkflowDefaultTemplate = (args, context) => html` ${IconListTemplate( { ...args, - setName: "ui", + setName: "workflow", + size: "xl", }, + context, [ - "Asterisk100", - "Asterisk200", - "Asterisk300", - ], - context + "AlertTriangle", + "Bell", + "Camera", + "Color", + "Copy", + "DeviceDesktop", + "Download", + "Draw", + "Files", + "Hand", + "Lightbulb", + "InfoCircle", + ] )} -
-
+`; + +/** + * Display examples of all directions of a single UI arrow. + */ +export const UIArrowsTemplate = (args, context) => html` ${IconListTemplate( { ...args, setName: "ui", }, + context, [ - "ChevronDown50", - "ChevronDown75", - "ChevronDown100", - "ChevronDown200", - "ChevronDown300", - "ChevronDown400", - ], - context + "ArrowRight100", + "ArrowLeft100", + "ArrowDown100", + "ArrowUp100", + ] )} -
+`; + +/** + * Display examples of multiple UI icons. + */ +export const UIDefaultTemplate = (args, context) => html` +
+ ${IconListTemplate( + { + ...args, + setName: "ui", + }, + context, + [ + "Asterisk100", + "Asterisk200", + "Asterisk300", + ] + )} +
+
+ ${IconListTemplate( + { + ...args, + setName: "ui", + }, + context, + [ + "ChevronDown50", + "ChevronDown75", + "ChevronDown100", + "ChevronDown200", + "ChevronDown300", + "ChevronDown400", + ] + )} +
`; diff --git a/components/icon/stories/utilities.js b/components/icon/stories/utilities.js index d4219af7974..16faf30eaa3 100644 --- a/components/icon/stories/utilities.js +++ b/components/icon/stories/utilities.js @@ -1,44 +1,216 @@ -// Imports an array of all icon names in the workflow set -import iconOpts from "@adobe/spectrum-css-workflow-icons"; +// Import arrays containing data with all icon names in both icon sets. +import workflowIconOpts from "@adobe/spectrum-css-workflow-icons/dist/manifest.json"; +import uiIconOpts from "@spectrum-css/ui-icons/dist/icons.json"; -export const workflowIcons = (iconOpts || []).map((icon) => - icon.replace(/\.svg$/, "") +/** + * Clean workflow icon name to strip out unnecessary prefix and postfix text. + * Also removes file extension if present. + * Example: "S2_Icon_AlertCircle_20_N" becomes "AlertCircle" + * + * @param {string} iconName + * @returns {string} + */ +export const cleanWorkflowIconName = (iconName) => ( + iconName.replace(/\.svg$/, "").replace(/^S2_Icon_/, "").replace(/_N$/, "").replace(/_20$/, "") +); + +/** + * Clean UI icon name to remove file extension and any unnecessary text. + * + * @param {string} iconName + * @returns {string} + */ +export const cleanUiIconName = (iconName) => ( + iconName.replace(/\.svg$/, "") ); /** - * UI Icons have specific sizes represented by a number. - * Each size has its own individual file and a CSS class with defined dimensions. - */ -export const uiIconSizes = { - "Arrow": ["75","100","200","300","400","500","600"], - "Asterisk": ["75","100","200","300"], - "Checkmark": ["50","75","100","200","300","400","500","600"], - "Chevron": ["50","75","100","200","300","400","500"], - "CornerTriangle": ["75","100","200","300"], - "Cross": ["75","100","200","300","400","500","600"], - "Dash": ["50","75","100","200","300","400","500","600"], - "SingleGripper": [], - "DoubleGripper": [], - "TripleGripper": [], + * Get the ID of the icon within the sprite sheet. + * + * The sprite sheets are single SVG files containing all of the icons in the set, each with a + * unique ID. The ID can then be used to display the icon elsewhere by referencing the ID + * within an SVG element. + * + * Example of the format of IDs within the different sprite sheets: + * ui ID: #spectrum-css-icon-alert-triangle + * workflow ID: #icon-spectrum-css-icon-Arrow100 + * + * @param {string} iconName Icon name (original or cleaned). + * @param {string} setName Icon set. + * @returns {string} Icon name with original file name prefix and postfix added. + */ +export const getSpriteSheetName = (iconName, setName) => { + if (setName == "ui") { + return "spectrum-css-icon-" + iconName; + } + else if (setName == "workflow") { + // Use cleaned name, without file name prefix/postfix. + let iconID = cleanWorkflowIconName(iconName); + + // These regexes convert camel case or pascal case strings into kebab-case: + // ------- + // Matches a lowercase letter or digit followed by an uppercase letter and inserts a hyphen between them. + // E.g. "AddCircle" becomes "Add-Circle". + // Digits are included in the first grouping because of the exception of "3D" being "3-d" in the IDs. + iconID = iconID.replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2"); + + // Matches an uppercase sequence followed by an uppercase letter with a lowercase letter. + // Replacing this separately helps prevent uppercase acronyms like CC and CCW from being split up by dashes. + iconID = iconID.replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2"); + // ------- + + // Underscores become dashes. + iconID = iconID.replace("_", "-"); + + // All IDs begin with this prefix and are lowercase. + iconID = "icon-" + iconID.toLowerCase(); + + return iconID; + } + else { + console.error("setSpriteSheetName received an invalid setName and could not create the ID."); + return ""; + } }; /** - * List of UI icon names, corresponding to files. + * Sorted array with all the SVG workflow icon names, cleaned to remove file extension and + * unnecessary prefix and postfix text. These might look something like "3DAsset". + * + * Excludes 22x20 icons, which currently do not match workflow icon sizing. */ -export const uiIcons = Object.keys(uiIconSizes); +export const workflowIconsCleaned = (workflowIconOpts?.svg ?? []) + .filter(iconName => !iconName.includes("22x20")) + .map(iconName => cleanWorkflowIconName(iconName)) + .sort(alphaNumericSort); /** - * List of all UI icon names for CSS. Chevron and Arrow have directional suffixes + * Sorted array with all UI icon names, without the file extension. + */ +export const uiIconsCleaned = (uiIconOpts || []) + .map(iconName => cleanUiIconName(iconName)) + .sort(alphaNumericSort); + +/** + * @description A custom alpha-numeric sort that helps keep the order of the sizing numbers at the end of the string. + * @param {string} a + * @param {string} b + * @returns {number} + */ +function alphaNumericSort(a, b) { + const aSet = a.match(/^([a-zA-Z]+)([0-9]+)(\.svg)?$/i); + const bSet = b.match(/^([a-zA-Z]+)([0-9]+)(\.svg)?$/i); + + // Handle cases where match fails + if (!aSet || !bSet) return 0; + + // Compare characters at start of string (case-insensitive) + const aChar = aSet[1].toLowerCase(); + const bChar = bSet[1].toLowerCase(); + if (aChar !== bChar) return aChar > bChar ? 1 : -1; + + // Compare numbers at end of string + const aInt = parseInt(aSet[2]); + const bInt = parseInt(bSet[2]); + return aInt - bInt; +} + +/** + * Array of all UI icon names for CSS. Chevron and Arrow have directional suffixes * for rotating the same base icon, e.g. Arrow becomes ArrowRight, ArrowDown, etc. + * + * @param {string[]} uiIcons Array of icon names. + * @returns {string[]} + */ +export const getUiIconsWithDirections = (uiIcons) => [ + ...uiIcons.filter((c) => !["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Right$2")), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Left$2")), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Up$2")), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Down$2")), +].sort(alphaNumericSort); + +/** + * Array of all cleaned UI icon names for CSS. Including sizing numbers and directional suffixes. */ -export const uiIconsWithDirections = [ - ...uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)), - "ArrowRight", - "ArrowLeft", - "ArrowUp", - "ArrowDown", - "ChevronRight", - "ChevronLeft", - "ChevronUp", - "ChevronDown", +export const uiIconsWithDirections = getUiIconsWithDirections(uiIconsCleaned); + +/** + * Array of all unique base UI icon names without their sizing numbers. + */ +export const getUniqueUiIconBaseNames = (uiIcons) => [ + ...new Set(uiIcons.map(ui => ui.replace(/\d{2,3}$/, ""))) ]; + +/** + * Array of all base UI icon names (without sizing numbers) for CSS (including directional suffixes). + */ +export const uniqueUiIconBaseNames = getUniqueUiIconBaseNames(uiIconsWithDirections); + +/** + * Workflow icon sizes. Does not apply to UI icons. Note: XXL is not part of the design + * spec and may be deprecated in the future. + */ +export const workflowSizes = ["xs", "s", "m", "l", "xl", "xxl"]; + +/** + * Create an object where the key is the UI icon name, and the value is an array of + * strings with every sizing number available. + * + * Returns something like the following: + * { + * "Arrow": ['100', '400'], + * "Asterisk": ['100', '200', '300'], + * ... + * } + * + * @param {string[]} uiIcons Array of all UI icon names. + * @returns {object} + */ +export const getUiIconSizes = (uiIcons) => { + let uiIconSizes = {}; + + uiIcons.forEach(iconName => { + // UI icon name without the sizing number at the end. + const iconNameRoot = iconName.replace(/\d{2,3}$/, ""); + + // Sizing number at the end of the icon name (e.g. "100"). + const iconNameSize = iconName.match(/\d{2,3}/g)?.[0]; + + // Add to object (with no duplicates). + uiIconSizes[iconNameRoot] = [ + ...new Set([ + ...uiIconSizes[iconNameRoot] ?? [], + ...(iconNameSize ? [iconNameSize] : []), + ]) + ]; + }); + + return uiIconSizes; +}; + +export const uiIconSizes = getUiIconSizes(uiIconsWithDirections); + +/** + * If UI icon name does not have a sizing number appended, add one to approximate the provided + * t-shirt sizing for the component, based on the most common mapping. + * + * @param {string} uiIconName + * @param {string} size t-shirt sizing + * @returns {string} uiIconName with appended default sizing number, if one is not already present. + */ +export const appendUiIconDefaultSizing = (uiIconName, size = "m") => { + // If icon name already has a size number on the end, no change is needed. + if (uiIconName.match(/\d{2,3}$/)) { + return uiIconName; + } + + return uiIconName + ({ + xs: "50", + s: "75", + m: "100", + l: "200", + xl: "300", + xxl: "400", + }[size] || "100"); +}; diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css index ce39d50ea8c..40ac2f7404f 100644 --- a/components/icon/ui-icons.css +++ b/components/icon/ui-icons.css @@ -11,22 +11,6 @@ * governing permissions and limitations under the License. */ -/* - * Medium/large scale - * ------------------ - * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are - * contained within the same SVG. The two separate elements are shown or hidden based - * on the current platform scale. - */ - -.spectrum-UIIcon--medium { - display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block)); -} - -.spectrum-UIIcon--large { - display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none)); -} - /* * UI icons list * ------------- @@ -430,3 +414,67 @@ .spectrum-UIIcon-Asterisk300 { --spectrum-icon-size: var(--spectrum-asterisk-icon-size-300); } + +/* Add */ +.spectrum-UIIcon-Add50 { + --spectrum-icon-size: var(--spectrum-add-icon-size-50); +} + +.spectrum-UIIcon-Add75 { + --spectrum-icon-size: var(--spectrum-add-icon-size-75); +} + +.spectrum-UIIcon-Add100 { + --spectrum-icon-size: var(--spectrum-add-icon-size-100); +} + +.spectrum-UIIcon-Add200 { + --spectrum-icon-size: var(--spectrum-add-icon-size-200); +} + +.spectrum-UIIcon-Add300 { + --spectrum-icon-size: var(--spectrum-add-icon-size-300); +} + +/* Drag handle */ +.spectrum-UIIcon-DragHandle75 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-75); +} + +.spectrum-UIIcon-DragHandle100 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-100); +} + +.spectrum-UIIcon-DragHandle200 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-200); +} + +.spectrum-UIIcon-DragHandle300 { + --spectrum-icon-size: var(--spectrum-drag-handle-icon-size-300); +} + +/* Gripper */ +.spectrum-UIIcon-Gripper100 { + --spectrum-icon-size: var(--spectrum-gripper-icon-size-100); +} + +/* Link out */ +.spectrum-UIIcon-LinkOut75 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-75); +} + +.spectrum-UIIcon-LinkOut100 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-100); +} + +.spectrum-UIIcon-LinkOut200 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-200); +} + +.spectrum-UIIcon-LinkOut300 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-300); +} + +.spectrum-UIIcon-LinkOut400 { + --spectrum-icon-size: var(--spectrum-link-out-icon-size-400); +} diff --git a/components/illustratedmessage/CHANGELOG.md b/components/illustratedmessage/CHANGELOG.md index 03f7fb5b559..b145ccfd579 100644 --- a/components/illustratedmessage/CHANGELOG.md +++ b/components/illustratedmessage/CHANGELOG.md @@ -1,5 +1,13 @@ # Change log +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/typography@9.0.0-next.0 + ## 9.1.0 ### Minor Changes diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 24de798ac33..12705f6822e 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -2,7 +2,18 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-IllustratedMessage", - ".spectrum-IllustratedMessage-accent", + ".spectrum-IllustratedMessage--horizontal", + ".spectrum-IllustratedMessage--horizontal .spectrum-IllustratedMessage-illustration", + ".spectrum-IllustratedMessage--sizeL", + ".spectrum-IllustratedMessage--sizeL:lang(ja)", + ".spectrum-IllustratedMessage--sizeL:lang(ko)", + ".spectrum-IllustratedMessage--sizeL:lang(zh)", + ".spectrum-IllustratedMessage--sizeS", + ".spectrum-IllustratedMessage--sizeS:lang(ja)", + ".spectrum-IllustratedMessage--sizeS:lang(ko)", + ".spectrum-IllustratedMessage--sizeS:lang(zh)", + ".spectrum-IllustratedMessage-actions", + ".spectrum-IllustratedMessage-content", ".spectrum-IllustratedMessage-description", ".spectrum-IllustratedMessage-heading", ".spectrum-IllustratedMessage-illustration", @@ -11,23 +22,24 @@ ".spectrum-IllustratedMessage:lang(zh)" ], "modifiers": [ - "--mod-illustrated-message-content-maximum-width", "--mod-illustrated-message-description-color", "--mod-illustrated-message-description-font-family", "--mod-illustrated-message-description-font-size", "--mod-illustrated-message-description-font-style", "--mod-illustrated-message-description-font-weight", "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-max-inline-size", "--mod-illustrated-message-description-pointer-events", "--mod-illustrated-message-description-position", + "--mod-illustrated-message-description-to-action", "--mod-illustrated-message-description-z-index", "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-max-inline-size", - "--mod-illustrated-message-heading-to-body", "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-illustration-accent-color", + "--mod-illustrated-message-horizontal-maximum-width", + "--mod-illustrated-message-illustrated-inline-size", + "--mod-illustrated-message-illustration-block-size", "--mod-illustrated-message-illustration-color", + "--mod-illustrated-message-illustration-size", + "--mod-illustrated-message-illustration-to-heading", "--mod-illustrated-message-pointer-events", "--mod-illustrated-message-title-color", "--mod-illustrated-message-title-font-family", @@ -35,51 +47,55 @@ "--mod-illustrated-message-title-font-style", "--mod-illustrated-message-title-font-weight", "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + "--mod-illustrated-message-vertical-maximum-width" ], "component": [ - "--spectrum-illustrated-message-body-size", - "--spectrum-illustrated-message-cjk-title-size", "--spectrum-illustrated-message-description-color", "--spectrum-illustrated-message-description-font-family", "--spectrum-illustrated-message-description-font-size", "--spectrum-illustrated-message-description-font-style", "--spectrum-illustrated-message-description-font-weight", "--spectrum-illustrated-message-description-line-height", - "--spectrum-illustrated-message-description-max-inline-size", - "--spectrum-illustrated-message-heading-max-inline-size", + "--spectrum-illustrated-message-description-to-action", "--spectrum-illustrated-message-heading-to-description", - "--spectrum-illustrated-message-illustration-accent-color", + "--spectrum-illustrated-message-horizontal-maximum-width", "--spectrum-illustrated-message-illustration-color", - "--spectrum-illustrated-message-maximum-width", + "--spectrum-illustrated-message-illustration-size", + "--spectrum-illustrated-message-illustration-to-content", + "--spectrum-illustrated-message-illustration-to-heading", + "--spectrum-illustrated-message-large-body-font-size", + "--spectrum-illustrated-message-large-cjk-title-font-size", + "--spectrum-illustrated-message-large-title-font-size", + "--spectrum-illustrated-message-medium-body-font-size", + "--spectrum-illustrated-message-medium-cjk-title-font-size", + "--spectrum-illustrated-message-medium-title-font-size", + "--spectrum-illustrated-message-small-body-font-size", + "--spectrum-illustrated-message-small-cjk-title-font-size", + "--spectrum-illustrated-message-small-title-font-size", "--spectrum-illustrated-message-title-color", "--spectrum-illustrated-message-title-font-family", "--spectrum-illustrated-message-title-font-size", "--spectrum-illustrated-message-title-font-style", "--spectrum-illustrated-message-title-font-weight", "--spectrum-illustrated-message-title-line-height", - "--spectrum-illustrated-message-title-size", - "--spectrum-illustrated-message-title-to-heading" + "--spectrum-illustrated-message-vertical-maximum-width" ], "global": [ - "--spectrum-accent-visual-color", "--spectrum-body-color", - "--spectrum-body-line-height", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-neutral-visual-color", + "--spectrum-line-height-200", + "--spectrum-neutral-content-color-default", "--spectrum-sans-font-family-stack", - "--spectrum-spacing-400", - "--spectrum-spacing-75" + "--spectrum-spacing-100", + "--spectrum-spacing-200", + "--spectrum-spacing-300", + "--spectrum-spacing-75", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight" ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-illustrated-message-illustration-accent-color", - "--highcontrast-illustrated-message-illustration-color" - ] + "passthroughs": ["--mod-buttongroup-justify-content"], + "high-contrast": ["--highcontrast-illustrated-message-illustration-color"] } diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index 6b588504d11..39894c695a1 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -1,82 +1,96 @@ /*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +Copyright 2024 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 -@media (forced-colors: active) { - .spectrum-IllustratedMessage { - --highcontrast-illustrated-message-illustration-color: CanvasText; - --highcontrast-illustrated-message-illustration-accent-color: Highlight; - } -} +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ .spectrum-IllustratedMessage { /* Size & Spacing */ - --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-200); + --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-200); + --spectrum-illustrated-message-description-to-action: var(--spectrum-spacing-300); + /* @passthrough -- settings for nested button group */ + --mod-buttongroup-justify-content: center; /* Illustration */ - --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-content-color-default); + --spectrum-illustrated-message-illustration-size: 96px; /* Title */ --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); - --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --spectrum-illustrated-message-title-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-illustrated-message-title-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-title-font-size); + --spectrum-illustrated-message-title-line-height: var(--spectrum-title-line-height); --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); /* Description */ --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); - --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-medium-body-font-size); + --spectrum-illustrated-message-description-line-height: var(--spectrum-line-height-200); --spectrum-illustrated-message-description-color: var(--spectrum-body-color); - block-size: 100%; - - display: var(--mod-illustrated-message-display, flex); - flex-direction: column; - align-items: center; - justify-content: center; + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size); + } +} - text-align: center; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-content-maximum-width); +.spectrum-IllustratedMessage--sizeS { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-title-font-size); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-small-body-font-size); - /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-cjk-title-font-size); } } -.spectrum-IllustratedMessage-illustration { - margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading)); - color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); - fill: currentColor; - stroke: currentColor; +.spectrum-IllustratedMessage--sizeL { + --spectrum-illustrated-message-illustration-size: 160px; + --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-100); + --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-100); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-title-font-size); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-large-body-font-size); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-cjk-title-font-size); + } } -.spectrum-IllustratedMessage-accent { - color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))); +.spectrum-IllustratedMessage { + block-size: 100%; + display: var(--mod-illustrated-message-display, grid); + grid-template-areas: + ". illustration ." + "body body body"; + text-align: center; + pointer-events: var(--mod-illustrated-message-pointer-events, auto); + max-inline-size: var(--mod-illustrated-message-vertical-maximum-width, var(--spectrum-illustrated-message-vertical-maximum-width)); +} - /* Safari 16.3 🐛🛠️: Repeated stroke/fill properties is a workaround for a currentcolor bug that was fixed in 16.4. */ +.spectrum-IllustratedMessage-illustration { + margin-block-end: var(--mod-illustrated-message-illustration-to-heading, var(--spectrum-illustrated-message-illustration-to-heading)); + color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); fill: currentColor; stroke: currentColor; + block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + inline-size: var(--mod-illustrated-message-illustrated-inline-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + grid-area: illustration; } .spectrum-IllustratedMessage-heading { @@ -88,9 +102,8 @@ color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); - max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); + margin-block-end: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); } .spectrum-IllustratedMessage-description { @@ -106,7 +119,32 @@ color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); - max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size)); - margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); - margin-block-end: 0; + margin-block: 0; +} + +.spectrum-IllustratedMessage--horizontal { + --mod-buttongroup-justify-content: flex-start; + max-inline-size: var(--mod-illustrated-message-horizontal-maximum-width, var(--spectrum-illustrated-message-horizontal-maximum-width)); + text-align: start; + gap: var(--spectrum-illustrated-message-illustration-to-content); + grid-template-areas: "illustration body"; + align-items: center; + + .spectrum-IllustratedMessage-illustration { + margin-block-end: 0; + } +} + +.spectrum-IllustratedMessage-actions { + margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action)); +} + +.spectrum-IllustratedMessage-content { + grid-area: body; +} + +@media (forced-colors: active) { + .spectrum-IllustratedMessage { + --highcontrast-illustrated-message-illustration-color: CanvasText; + } } diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 4e5dbe34a69..c2b478a9e55 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/illustratedmessage", - "version": "9.1.0", + "version": "10.0.0-next.0", "description": "The Spectrum CSS illustratedmessage component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/typography": ">=8.0.0 <9.0.0" + "@spectrum-css/tokens": ">=16.1.0-next.0", + "@spectrum-css/typography": ">=9.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2", - "@spectrum-css/typography": "8.1.0" + "@spectrum-css/tokens": "16.1.0-next.5", + "@spectrum-css/typography": "9.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index 2b00b063d31..b772ad28a22 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,20 +1,38 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { html } from "lit"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; /** - * The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. + * The Illustrated Message displays an illustration along with a heading, description and group of buttons. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. */ export default { title: "Illustrated message", component: "IllustratedMessage", argTypes: { - useAccentColor: { - name: "Illustration accent color", + title: { + name: "Title", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", + }, + description: { + name: "Description", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", + }, + isHorizontal: { + name: "Horizontal orientation", + description: "The default content orientation is vertical. Add the horizontal class to horizontally align the illustration with the content. The illustration will align left or right determined by the global direction of the text.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -22,26 +40,33 @@ export default { }, control: "boolean", }, - heading: { - name: "Heading", - type: { name: "string" }, + size: { + name: "Size", + type: { name: "string", required: true }, table: { type: { summary: "string" }, - category: "Content", + category: "Component", }, - control: "text", + options: ["s", "m", "l"], + control: "select", }, - description: { - name: "Description", + hasButtons: { + name: "Show button group", + type: { name: "boolean" }, table: { - category: "Content", - disable: true, + type: { summary: "boolean" }, + category: "Component", }, + control: "boolean", }, }, args: { rootClass: "spectrum-IllustratedMessage", - useAccentColor: false, + isHorizontal: false, + size: "m", + hasButtons: true, + title: "Error 404: Page not found", + description: "This page isn't available. Try checking the URL or visit a different page.", }, parameters: { design: { @@ -50,32 +75,26 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, + layout: "centered" }, + tags: ["migrated"], }; export const Default = IllustratedMessageGroup.bind({}); -Default.args = { - heading: "Error 404: Page not found", - description: [ - "This page isn't available. Try checking the URL or visit a different page.", - ], -}; +Default.args = {}; /** - * To use the accent color, the class `.spectrum-IllustratedMessage-accent` can be added to element(s) within the illustration SVG. - */ -export const AccentColor = Template.bind({}); -AccentColor.tags = ["!dev"]; -AccentColor.args = { - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - useAccentColor: true, + * Horizontal illustrated messages are displayed on extra large screen sizes or in a menu. +*/ +export const Horizontal = Template.bind({}); +Horizontal.tags = ["!dev"]; +Horizontal.args = { + isHorizontal: true }; -AccentColor.parameters = { +Horizontal.parameters = { chromatic: { disableSnapshot: true }, }; @@ -88,3 +107,21 @@ WithForcedColors.parameters = { modes: disableDefaultModes }, }; +/** + * Illustrated message comes in three sizes: small, medium, and large. + * - Small illustrated message is typically used in quick or in-line actions. + * - The medium size is the default, and often used in panels. + * - The large size illustrated message is generally used in full page layouts and dialogs. + */ +export const Sizing = (args, context) => Sizes({ + Template: Template, + withBorder: false, + withHeader: false, + ...args +}, context); + +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/illustratedmessage/stories/illustratedmessage.test.js b/components/illustratedmessage/stories/illustratedmessage.test.js index 2b7b85946a1..a6da8059521 100644 --- a/components/illustratedmessage/stories/illustratedmessage.test.js +++ b/components/illustratedmessage/stories/illustratedmessage.test.js @@ -1,25 +1,17 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Variants } from "@spectrum-css/preview/decorators"; -import { html } from "lit"; import { Template } from "./template.js"; export const IllustratedMessageGroup = Variants({ Template, testData: [{ - heading: "Error 404: Page not found", - description: [ - "This page isn't available. Try checking the URL or visit a different page.", - ], - useAccentColor: false, - }, { - testHeading: "With accent color", - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - useAccentColor: true, - } + }, + { + testHeading: "Horizontal layout", + isHorizontal: true + }, + { + testHeading: "W/o button group", + hasButtons: false + }, ], }); diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js index ace824ddae9..8ee5daa77b0 100644 --- a/components/illustratedmessage/stories/template.js +++ b/components/illustratedmessage/stories/template.js @@ -1,4 +1,4 @@ -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; @@ -7,111 +7,76 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-IllustratedMessage", - heading, + title, description, customClasses = [], - useAccentColor = false, -} = {}, context = {}) => { + hasButtons = false, + isHorizontal = false, + size = "m", + customIllustration, +}) => { + const descriptionContent = Array.isArray(description) + ? description + : [() => html`${description}`]; return html` -
({ ...a, [c]: true }), {}), - })} - > - ${illustrationSvgMarkup(useAccentColor)} - ${when(heading, () => - Typography({ - semantics: "heading", - "size": "m", - customClasses: [`${rootClass}-heading`], - content: [heading], - }, context) +
({ ...a, [c]: true }), {}), + })} + > + ${customIllustration + ? customIllustration() + : illustrationSvgMarkup(size)} +
+ ${when( + title, + () => + html`

+ ${title} +

` )} - ${when(description, () => - Typography({ - semantics: "body", - "size": "s", - customClasses: [`${rootClass}-description`], - content: [ - ...description.map((c) => (typeof c === "function" ? c({}) : c)) - ], - }, context) + ${when( + descriptionContent, + () => + html`

+ ${descriptionContent.map((c) => + typeof c === "function" ? c({}) : c + )} +

` + )} + ${when(hasButtons, () => + ButtonGroup({ + size, + customClasses: ["spectrum-IllustratedMessage-actions"], + items: [ + { + variant: "secondary", + treatment: "outline", + label: "Remind me later", + }, + { + variant: "accent", + treatment: "fill", + label: "Rate now", + }, + ] + }) )}
- `; +
+`; }; -const illustrationSvgMarkup = (withAccentColorClass = false) => html` - - - - - - - - - - - - - - - -`; +const illustrationSvgMarkup = (size = "m") => { + const computedSize = size === "l" ? 160 : 96; + return html` + + + + `; +}; diff --git a/components/infieldbutton/CHANGELOG.md b/components/infieldbutton/CHANGELOG.md index 9c91b7dc6ea..15a925b7f82 100644 --- a/components/infieldbutton/CHANGELOG.md +++ b/components/infieldbutton/CHANGELOG.md @@ -1,12 +1,65 @@ # Change log +## 7.0.0-next.2 + +### Major Changes + +- [#3642](https://github.com/adobe/spectrum-css/pull/3642) [`646763a`](https://github.com/adobe/spectrum-css/commit/646763a9f7940b66def0329e3c4bae66e42d36b2) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! + +#### Spectrum 2 migration + +In-field buttons are used to represent actions within input fields. They're currently used inside number field. This component has updated colors, corner radius, and icons compared to the Spectrum 1 version. The "Error" and "Key-focus" variants have been removed, since this now utilizes those states from the parent component. + +The position styles and controls have also been removed now that there's a consistent corner radius. + +##### Removed mods + +Due to deprecation of the position variants in the infield button, some spacing and border radius mods have been removed. + +`--mod-infield-button-inner-edge-to-fill` +`--mod-infield-button-stacked-border-radius-reset` +`--mod-infield-button-stacked-bottom-border-block-end-width` +`--mod-infield-button-stacked-bottom-border-radius-end-end` +`--mod-infield-button-stacked-bottom-border-radius-end-start` +`--mod-infield-button-stacked-fill-padding-inline` +`--mod-infield-button-stacked-fill-padding-inner` + +##### New tokens + +These new tokens are the inline variant & stepper (number field) use case. The padding changes here. + +`--spectrum-in-field-button-side-edge-to-fill-small` +`--spectrum-in-field-button-side-edge-to-fill-medium` +`--spectrum-in-field-button-side-edge-to-fill-large` +`--spectrum-in-field-button-side-edge-to-fill-extra-large` +`--spectrum-field-edge-to-icon-75` +`--spectrum-field-edge-to-icon-100` +`--spectrum-field-edge-to-icon-200` +`--spectrum-field-edge-to-icon-300` + +## 7.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 7.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 + ## 6.1.2 ### Patch Changes -- [#3615](https://github.com/adobe/spectrum-css/pull/3615) [`f09c84a`](https://github.com/adobe/spectrum-css/commit/f09c84ae9922d67b6fe237d693afee0fab53fa67) Thanks [@Rajdeepc](https://github.com/Rajdeepc)! - ### Infield button fast follows +- [#3615](https://github.com/adobe/spectrum-css/pull/3615) [`f09c84a`](https://github.com/adobe/spectrum-css/commit/f09c84ae9922d67b6fe237d693afee0fab53fa67) Thanks [@Rajdeepc](https://github.com/Rajdeepc)! + +#### Infield button fast follows - - Updated infield button disabled border color to use `--spectrum-gray-300` for spectrum-two theme and `--spectrum-gray-200` for other themes. +Updated infield button disabled border color to use `--spectrum-gray-300` for spectrum-two theme and `--spectrum-gray-200` for other themes. ## 6.1.1 diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 563089a4065..cf5dfa5f4cc 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -2,25 +2,21 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-InfieldButton", - ".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill", - ".spectrum-InfieldButton--left .spectrum-InfieldButton-fill", - ".spectrum-InfieldButton--right .spectrum-InfieldButton-fill", - ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill", + ".spectrum-InfieldButton--quiet", + ".spectrum-InfieldButton--quiet:disabled", + ".spectrum-InfieldButton--quiet:not(:disabled):active", + ".spectrum-InfieldButton--quiet:not(:disabled):focus-visible", + ".spectrum-InfieldButton--quiet:not(:disabled):hover", ".spectrum-InfieldButton-fill", ".spectrum-InfieldButton-icon", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS", - ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL", + ".spectrum-InfieldButton-inline", + ".spectrum-InfieldButton-inline .spectrum-InfieldButton", + ".spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--quiet", ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS", ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL", - ".spectrum-InfieldButton.spectrum-InfieldButton--top", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL", ".spectrum-InfieldButton:active", ".spectrum-InfieldButton:disabled", ".spectrum-InfieldButton:focus-visible", @@ -30,8 +26,6 @@ ".spectrum-InfieldButton:not(:disabled):hover" ], "modifiers": [ - "--mod-infield-border-color", - "--mod-infield-border-color-quiet", "--mod-infield-button-background-color", "--mod-infield-button-background-color-disabled", "--mod-infield-button-background-color-down", @@ -48,10 +42,8 @@ "--mod-infield-button-border-color-disabled", "--mod-infield-button-border-color-quiet-disabled", "--mod-infield-button-border-radius", - "--mod-infield-button-border-radius-reset", - "--mod-infield-button-border-width", - "--mod-infield-button-border-width-quiet", "--mod-infield-button-edge-to-fill", + "--mod-infield-button-field-edge-to-icon", "--mod-infield-button-fill-justify-content", "--mod-infield-button-fill-padding", "--mod-infield-button-height", @@ -63,97 +55,69 @@ "--mod-infield-button-icon-color-hover-disabled", "--mod-infield-button-icon-color-key-focus", "--mod-infield-button-icon-color-key-focus-disabled", - "--mod-infield-button-inner-edge-to-fill", - "--mod-infield-button-stacked-border-radius-reset", - "--mod-infield-button-stacked-bottom-border-block-end-width", - "--mod-infield-button-stacked-bottom-border-radius-end-end", - "--mod-infield-button-stacked-bottom-border-radius-end-start", - "--mod-infield-button-stacked-fill-padding-inline", - "--mod-infield-button-stacked-fill-padding-inner", - "--mod-infield-button-stacked-fill-padding-outer", - "--mod-infield-button-stacked-top-border-radius-start-start", - "--mod-infield-button-width", - "--mod-infield-button-width-stacked" + "--mod-infield-button-side-edge-to-fill", + "--mod-infield-button-width" ], "component": [ - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-edge-to-fill", - "--spectrum-in-field-button-fill-stacked-inner-border-rounding", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-stacked-inner-edge-to-fill", - "--spectrum-in-field-button-width-stacked-extra-large", - "--spectrum-in-field-button-width-stacked-large", - "--spectrum-in-field-button-width-stacked-medium", - "--spectrum-in-field-button-width-stacked-small", + "--spectrum-in-field-button-edge-to-fill-extra-large", + "--spectrum-in-field-button-edge-to-fill-large", + "--spectrum-in-field-button-edge-to-fill-medium", + "--spectrum-in-field-button-edge-to-fill-small", + "--spectrum-in-field-button-side-edge-to-fill-extra-large", + "--spectrum-in-field-button-side-edge-to-fill-large", + "--spectrum-in-field-button-side-edge-to-fill-medium", + "--spectrum-in-field-button-side-edge-to-fill-small", "--spectrum-infield-button-background-color", "--spectrum-infield-button-background-color-down", "--spectrum-infield-button-background-color-hover", - "--spectrum-infield-button-background-color-key-focus", - "--spectrum-infield-button-border-color", "--spectrum-infield-button-border-radius", - "--spectrum-infield-button-border-radius-reset", - "--spectrum-infield-button-border-width", + "--spectrum-infield-button-downstate-perspective", "--spectrum-infield-button-edge-to-fill", + "--spectrum-infield-button-field-edge-to-disclosure-icon", "--spectrum-infield-button-fill-justify-content", "--spectrum-infield-button-fill-padding", "--spectrum-infield-button-height", "--spectrum-infield-button-icon-color", "--spectrum-infield-button-icon-color-down", "--spectrum-infield-button-icon-color-hover", - "--spectrum-infield-button-icon-color-key-focus", - "--spectrum-infield-button-inner-edge-to-fill", - "--spectrum-infield-button-stacked-border-radius-reset", - "--spectrum-infield-button-stacked-bottom-border-radius-end-start", - "--spectrum-infield-button-stacked-fill-padding-inline", - "--spectrum-infield-button-stacked-fill-padding-inner", - "--spectrum-infield-button-stacked-fill-padding-outer", - "--spectrum-infield-button-stacked-top-border-radius-start-start", + "--spectrum-infield-button-inline-edge-to-fill", + "--spectrum-infield-button-inline-field-edge-to-icon", "--spectrum-infield-button-width" ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", - "--spectrum-corner-radius-100", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", + "--spectrum-corner-radius-small-size-extra-large", + "--spectrum-corner-radius-small-size-large", + "--spectrum-corner-radius-small-size-medium", + "--spectrum-corner-radius-small-size-small", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", + "--spectrum-field-edge-to-disclosure-icon-100", + "--spectrum-field-edge-to-disclosure-icon-200", + "--spectrum-field-edge-to-disclosure-icon-300", + "--spectrum-field-edge-to-disclosure-icon-75", + "--spectrum-field-edge-to-icon-100", + "--spectrum-field-edge-to-icon-200", + "--spectrum-field-edge-to-icon-300", + "--spectrum-field-edge-to-icon-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus" - ], - "system-theme": [ - "--system-infield-button-background-color", - "--system-infield-button-background-color-down", - "--system-infield-button-background-color-hover", - "--system-infield-button-background-color-key-focus", - "--system-infield-button-border-color", - "--system-infield-button-border-radius", - "--system-infield-button-border-radius-reset", - "--system-infield-button-border-width", - "--system-infield-button-disabled-border-color", - "--system-infield-button-stacked-bottom-border-radius-end-start", - "--system-infield-button-stacked-top-border-radius-start-start" + "--spectrum-neutral-content-color-hover" ], "passthroughs": [], "high-contrast": [ - "--highcontrast-infield-button-border-color", - "--highcontrast-infield-button-border-color-active" + "--highcontrast-infield-button-background-color", + "--highcontrast-infield-button-icon-color" ] } diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index cf9c6458cc1..a237fc6c698 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -11,34 +11,40 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-InfieldButton { - /* Medium size is the default */ - --spectrum-infield-button-height: var(--spectrum-component-height-100); - --spectrum-infield-button-width: var(--spectrum-component-height-100); - --spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding); - - --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill); - --spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill); - --spectrum-infield-button-fill-padding: 0px; - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium); + /* Color */ + --spectrum-infield-button-background-color: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); --spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default); --spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + + /* Layout */ + --spectrum-infield-button-height: var(--spectrum-component-height-100); + --spectrum-infield-button-width: var(--spectrum-component-height-100); + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-small-size-medium); + + --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill-medium); + --spectrum-infield-button-inline-field-edge-to-icon: var(--spectrum-field-edge-to-icon-100); + + /* TODO: using custom in-field-button-side-edge-to-fill-* while token is unavailable */ + --spectrum-infield-button-inline-edge-to-fill: var(--spectrum-in-field-button-side-edge-to-fill-medium); + --spectrum-infield-button-fill-padding: 0px; + --spectrum-infield-button-field-edge-to-disclosure-icon: var(--spectrum-field-edge-to-disclosure-icon-100); --spectrum-infield-button-fill-justify-content: center; + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + --spectrum-infield-button-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + &:disabled { --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-infield-button-border-color)); + --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); @@ -49,42 +55,32 @@ &.spectrum-InfieldButton--sizeS { --spectrum-infield-button-height: var(--spectrum-component-height-75); --spectrum-infield-button-width: var(--spectrum-component-height-75); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small); + --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill-small); + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-small-size-small); + --spectrum-infield-button-field-edge-to-disclosure-icon: var(--spectrum-field-edge-to-disclosure-icon-75); + --spectrum-infield-button-inline-edge-to-fill: var(--spectrum-in-field-button-side-edge-to-fill-small); + --spectrum-infield-button-inline-field-edge-to-icon: var(--spectrum-field-edge-to-icon-75); + --spectrum-infield-button-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); } &.spectrum-InfieldButton--sizeL { --spectrum-infield-button-height: var(--spectrum-component-height-200); --spectrum-infield-button-width: var(--spectrum-component-height-200); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large); + --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill-large); + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-small-size-large); + --spectrum-infield-button-field-edge-to-disclosure-icon: var(--spectrum-field-edge-to-disclosure-icon-200); + --spectrum-infield-button-inline-edge-to-fill: var(--spectrum-in-field-button-side-edge-to-fill-large); + --spectrum-infield-button-inline-field-edge-to-icon: var(--spectrum-field-edge-to-icon-200); } &.spectrum-InfieldButton--sizeXL { --spectrum-infield-button-height: var(--spectrum-component-height-300); --spectrum-infield-button-width: var(--spectrum-component-height-300); - --spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large); - } - - &.spectrum-InfieldButton--top, - &.spectrum-InfieldButton--bottom { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium)); - - &.spectrum-InfieldButton--sizeS { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small)); - } - - &.spectrum-InfieldButton--sizeL { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large)); - } - - &.spectrum-InfieldButton--sizeXL { - --mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large)); - } + --spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill-extra-large); + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-small-size-extra-large); + --spectrum-infield-button-field-edge-to-disclosure-icon: var(--spectrum-field-edge-to-disclosure-icon-300); + --spectrum-infield-button-inline-edge-to-fill: var(--spectrum-in-field-button-side-edge-to-fill-extra-large); + --spectrum-infield-button-inline-field-edge-to-icon: var(--spectrum-field-edge-to-icon-300); } &.spectrum-InfieldButton--quiet { @@ -93,9 +89,6 @@ --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent); --mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent); - --mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent); - --mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0); - &:disabled { --mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent); --mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent); @@ -111,28 +104,6 @@ --mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down)); --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down)); } - - &:focus-visible { - --mod-infield-button-background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus)); - --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus)); - } -} - -@media (forced-colors: active) { - .spectrum-InfieldButton { - --highcontrast-infield-button-border-color: ButtonText; - --highcontrast-infield-button-border-color-active: Highlight; - - &:disabled { - --highcontrast-infield-button-border-color: inherit; - } - - &:not(:disabled):hover, - &:not(:disabled):active, - &:not(:disabled):focus-visible { - --highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active); - } - } } .spectrum-InfieldButton { @@ -153,23 +124,26 @@ cursor: auto; } + &:active { + transform: perspective(var(--spectrum-infield-button-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); + } + &:focus-visible { outline: none; } +} - /* Stacked in-field buttons */ - /* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */ - &.spectrum-InfieldButton--top, - &.spectrum-InfieldButton--bottom { - block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2); - } +.spectrum-InfieldButton-inline { + display: flex; - &.spectrum-InfieldButton--top { - padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); + & .spectrum-InfieldButton { + --mod-infield-button-field-edge-to-icon: var(--spectrum-infield-button-inline-field-edge-to-icon); + inline-size: calc(var(--mod-infield-button-width, var(--spectrum-infield-button-width)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill))); + padding-inline: var(--mod-infield-button-side-edge-to-fill, var(--spectrum-infield-button-inline-edge-to-fill)); } - &.spectrum-InfieldButton--bottom { - padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)); + & > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS { + inline-size: var(--mod-infield-button-width, var(--spectrum-infield-button-width)); } } @@ -177,15 +151,8 @@ block-size: 100%; inline-size: 100%; - background-color: var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color)); - - border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)); - border-style: solid; - border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color))); - border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); - border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); - border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); - border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); + background-color: var(--highcontrast-infield-button-background-color, var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))); + border-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)); padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding)); @@ -195,42 +162,6 @@ justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content)); transition: border-color var(--spectrum-animation-duration-100) ease-in-out; - - .spectrum-InfieldButton--right & { - border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); - border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); - } - - .spectrum-InfieldButton--left & { - border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); - border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset)); - } - - .spectrum-InfieldButton--top &, - .spectrum-InfieldButton--bottom & { - box-sizing: border-box; - padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - } - - .spectrum-InfieldButton--top & { - padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill))); - border-block-end: none; - border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start)); - border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - } - - .spectrum-InfieldButton--bottom & { - padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)); - border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset)); - border-end-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))); - border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))); - } } .spectrum-InfieldButton-icon { @@ -242,5 +173,40 @@ /* remove margin used for centering */ margin: 0 !important; - color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color)); + color: var(--highcontrast-infield-button-icon-color, var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))); + padding: var(--mod-infield-button-field-edge-to-icon, var(--spectrum-infield-button-field-edge-to-disclosure-icon)); +} + +@media (forced-colors: active) { + .spectrum-InfieldButton { + --highcontrast-infield-button-background-color: ButtonText; + --highcontrast-infield-button-icon-color: ButtonFace; + + &:disabled { + --highcontrast-infield-button-background-color: GrayText; + } + + &:not(:disabled):hover, + &:not(:disabled):active, + &:not(:disabled):focus-visible { + --highcontrast-infield-button-background-color: Highlight; + } + } + + .spectrum-InfieldButton--quiet { + --highcontrast-infield-button-background-color: Canvas; + --highcontrast-infield-button-icon-color: ButtonText; + + &:disabled { + --highcontrast-infield-button-background-color: Canvas; + --highcontrast-infield-button-icon-color: GrayText; + } + + &:not(:disabled):hover, + &:not(:disabled):active, + &:not(:disabled):focus-visible { + --highcontrast-infield-button-background-color: Canvas; + --highcontrast-infield-button-icon-color: Highlight; + } + } } diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 3e2c7e162fc..fe5edfa4684 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/infieldbutton", - "version": "6.1.2", + "version": "7.0.0-next.2", "description": "The Spectrum CSS infield button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 0f435313795..2b3a91d6faa 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -1,13 +1,14 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isActive, isDisabled, isFocused, isHovered, isQuiet, size } from "@spectrum-css/preview/types"; +import { isActive, isDisabled, isHovered, isQuiet, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { InfieldButtonGroup } from "./infieldbutton.test.js"; -import { Template } from "./template.js"; +import { InfieldButtonGroupVariant, InfieldButtonIcons, Template } from "./template.js"; /** - * The in-field button component is a button used inside a text field. + * In-field buttons are used to represent actions within input fields. They’re currently used inside the [number field](/docs/components-stepper--docs). */ export default { title: "In-field button", @@ -15,66 +16,75 @@ export default { argTypes: { size: size(["s", "m", "l", "xl"]), isQuiet, - position: { - name: "Position", - type: { name: "string", required: true }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options: ["left", "right", "top", "bottom"], - control: "select" - }, iconName: { - ...IconStories?.argTypes?.iconName ?? {}, - if: false, + ...IconStories?.argTypes?.uiIconName ?? {}, + options: ["ChevronDown", "Cross", "Dash", "Add"], + if: { arg: "isInline", neq: true }, + description: "These are icons to use within the in-field button - `ChevronDown`, `Add`, `Dash` and `Cross`", }, isDisabled, - isFocused, isActive, isHovered, - isStacked: { table: { disable: true } }, + isInline: { + name: "Side by side", + description: "Renders two in-field buttons side by side. This is typically used for number fields to add or subtract a number.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-InfieldButton", size: "m", - position: "left", - iconName: "Add", + iconName: "ChevronDown", isQuiet: false, isDisabled: false, - isFocused: false, isHovered: false, isActive: false, - isStacked: false, + isInline: false, }, parameters: { + actions: { + handles: ["click .spectrum-InfieldButton"], + }, + design: { + type: "figma", + url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=67509-808&m=dev" + }, + downState: { + selectors: [".spectrum-InfieldButton:not(:disabled)"], + }, packageJson, metadata, + status: { + type: "migrated", + }, }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = InfieldButtonGroup.bind({}); Default.args = {}; +Default.tags = ["!autodocs"]; -export const Start = Template.bind({}); -Start.tags = ["!dev"]; -Start.args = { - position: "left" -}; -Start.parameters = { - chromatic: { disableSnapshot: true }, -}; - -export const End = Template.bind({}); -End.tags = ["!dev"]; -End.args = { - position: "right" -}; -End.parameters = { +export const Primary = InfieldButtonGroupVariant.bind({}); +Primary.args = {}; +Primary.storyName = "Default"; +Primary.tags = ["!dev"]; +Primary.parameters = { chromatic: { disableSnapshot: true }, }; -export const Quiet = Template.bind({}); +/** + * The quiet variant is used when the in-field button needs to be less visually prominent since it is used in input fields. +*/ +export const Quiet = InfieldButtonGroupVariant.bind({}); Quiet.tags = ["!dev"]; Quiet.args = { isQuiet: true @@ -83,12 +93,78 @@ Quiet.parameters = { chromatic: { disableSnapshot: true }, }; -export const Disabled = Template.bind({}); -Disabled.tags = ["!dev"]; -Disabled.args = { - isDisabled: true +/** + * The inline variant is used when there are multiple in-field buttons that need to be displayed side by side. This is typically used for number fields to add or subtract a number. +*/ + +export const Inline = Template.bind({}); +Inline.tags = ["!dev"]; +Inline.args = { + isInline: true, +}; +Inline.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Sizing = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, }; -Disabled.parameters = { + +/** + * The `ChevronDown`, `Add`, `Dash` and `Cross` icons should be used within the infield button to represent different actions. Use the correct icon size that corresponds to the t-shirt size you require for the infield button. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
**T-Shirt size****Cross icon size class****Disclosure (ChevronDown) icon size class****Dash (Minus) icon size class****Add icon size class**
spectrum-InfieldButton--sizeSspectrum-UIIcon-Cross75spectrum-UIIcon-ChevronDown75spectrum-UIIcon-Dash75spectrum-Icon--sizeS
spectrum-InfieldButton--sizeMspectrum-UIIcon-Cross100spectrum-UIIcon-ChevronDown100spectrum-UIIcon-Dash100spectrum-Icon--sizeM
spectrum-InfieldButton--sizeLspectrum-UIIcon-Cross200spectrum-UIIcon-ChevronDown200spectrum-UIIcon-Dash200spectrum-Icon--sizeL
spectrum-InfieldButton--sizeXLspectrum-UIIcon-Cross300spectrum-UIIcon-ChevronDown300spectrum-UIIcon-Dash300spectrum-Icon--sizeXL
+ */ +export const SupportedIcons = InfieldButtonIcons.bind({}); +SupportedIcons.tags = ["!dev"]; +SupportedIcons.parameters = { chromatic: { disableSnapshot: true }, }; @@ -101,12 +177,3 @@ WithForcedColors.parameters = { modes: disableDefaultModes }, }; - -export const Stacked = Template.bind({}); -Stacked.tags = ["!dev"]; -Stacked.args = { - isStacked: true, -}; -Stacked.parameters = { - chromatic: { disableSnapshot: true }, -}; diff --git a/components/infieldbutton/stories/infieldbutton.test.js b/components/infieldbutton/stories/infieldbutton.test.js index da3a06179ef..e5e80bf03bc 100644 --- a/components/infieldbutton/stories/infieldbutton.test.js +++ b/components/infieldbutton/stories/infieldbutton.test.js @@ -12,31 +12,11 @@ export const InfieldButtonGroup = Variants({ isQuiet: true, }, { - testHeading: "Position: top", - position: "top", - }, - { - testHeading: "Position: bottom", - position: "bottom", - }, - { - testHeading: "Position: left", - position: "left", - }, - { - testHeading: "Position: right", - position: "right", - }, - { - testHeading: "Stacked", - isStacked: true, + testHeading: "Side by side", + isInline: true, }, ], stateData: [ - { - testHeading: "Disabled", - isDisabled: true, - }, { testHeading: "Hovered", isHovered: true, @@ -46,12 +26,8 @@ export const InfieldButtonGroup = Variants({ isActive: true, }, { - testHeading: "Focused", - isFocused: true, - }, - { - testHeading: "Invalid", - isInvalid: true, + testHeading: "Disabled", + isDisabled: true, }, ], }); diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 7f0b4ee8db1..02185b17d4e 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -3,56 +3,58 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; +import { Container } from "@spectrum-css/preview/decorators"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ( { rootClass = "spectrum-InfieldButton", customClasses = [], size = "m", - position, isQuiet, - iconName = "Add", - iconSet = "workflow", + iconName = "ChevronDown", + iconSet = "ui", isDisabled, isInvalid, isHovered, isActive, - isFocused, - isStacked, + isInline, tabIndex = 0, + onSubtract, + onAdd, + onclick, } = {}, context = {}, ) => { - return isStacked + let iconSize = size === "s" ? "75" : size === "l" ? "200" : size === "xl" ? "300" : "100"; + let iconNameWithSize = `${iconName}${iconSize}`; + + return isInline ? html` - +
` : html` `; }; + +export const InfieldButtonGroupVariant = (args, context) => Container({ + withBorder: false, + direction: "row", + content: [ + Container({ + withBorder: false, + heading: "Default", + content: Template(args, context), + }), + Container({ + withBorder: false, + heading: "Disabled", + content: Template({ ...args, isDisabled: true }, context), + }), + ] +}, context); + +export const InfieldButtonIcons = (args, context) => Container({ + withBorder: false, + direction: "row", + content: [ + Template(args, context), + Template({...args, iconName: "Cross"}, context), + Template({...args, iconName: "Dash"}, context), + Template({...args, iconName: "Add"}, context), + ], +}, context); diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css deleted file mode 100644 index 1d930d4cfee..00000000000 --- a/components/infieldbutton/themes/express.css +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: 0; - --spectrum-infield-button-border-color: transparent; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-background-color: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css deleted file mode 100644 index ec2307ef3a4..00000000000 --- a/components/infieldbutton/themes/spectrum-two.css +++ /dev/null @@ -1,35 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: var(--spectrum-border-width-100); - --spectrum-infield-button-border-color: inherit; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-infield-button-border-radius-reset: 0; - - /* Have to call these out specifically due to Express differences */ - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - - --spectrum-infield-button-background-color: var(--spectrum-gray-100); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - - &:disabled { - --spectrum-infield-button-border-color: var(--spectrum-gray-300); - } - } -} diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css deleted file mode 100644 index 93ae76972e5..00000000000 --- a/components/infieldbutton/themes/spectrum.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-InfieldButton { - --spectrum-infield-button-background-color: var(--spectrum-gray-75); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - - &:disabled { - --spectrum-infield-button-border-color: var(--spectrum-gray-200); - } - } -} diff --git a/components/infieldprogresscircle/CHANGELOG.md b/components/infieldprogresscircle/CHANGELOG.md new file mode 100644 index 00000000000..56ad4b72384 --- /dev/null +++ b/components/infieldprogresscircle/CHANGELOG.md @@ -0,0 +1,16 @@ +# @spectrum-css/infieldprogresscircle + +## 1.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 1.0.0-next.0 + +### Major Changes + +- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`fb80825`](https://github.com/adobe/spectrum-css/commit/fb80825cc31d6b5eb46dc42e595bce253e7db805) Thanks [@pfulton](https://github.com/pfulton)! - ## Infield Progresscircle S2 Migration + + 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. diff --git a/components/infieldprogresscircle/README.md b/components/infieldprogresscircle/README.md new file mode 100644 index 00000000000..4d411cc9502 --- /dev/null +++ b/components/infieldprogresscircle/README.md @@ -0,0 +1,7 @@ +# @spectrum-css/infieldprogresscircle + +> The Spectrum CSS infield progress circle component + +This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). + +See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json new file mode 100644 index 00000000000..ffc95f11390 --- /dev/null +++ b/components/infieldprogresscircle/dist/metadata.json @@ -0,0 +1,25 @@ +{ + "sourceFile": "index.css", + "selectors": [ + ".spectrum-InfieldProgressCircle", + ".spectrum-InfieldProgressCircle .spectrum-ProgressCircle-fill", + ".spectrum-InfieldProgressCircle--sizeL", + ".spectrum-InfieldProgressCircle--sizeS", + ".spectrum-InfieldProgressCircle--sizeXL" + ], + "modifiers": [], + "component": [ + "--spectrum-in-field-progress-circle-edge-to-fill", + "--spectrum-in-field-progress-circle-size-100", + "--spectrum-in-field-progress-circle-size-200", + "--spectrum-in-field-progress-circle-size-300", + "--spectrum-in-field-progress-circle-size-75", + "--spectrum-infieldprogresscircle-padding-block" + ], + "global": ["--spectrum-progress-circle-thickness-small"], + "passthroughs": [ + "--mod-progress-circle-size", + "--mod-progress-circle-thickness" + ], + "high-contrast": [] +} diff --git a/components/infieldprogresscircle/index.css b/components/infieldprogresscircle/index.css new file mode 100644 index 00000000000..e3525eccc40 --- /dev/null +++ b/components/infieldprogresscircle/index.css @@ -0,0 +1,37 @@ +/*! +Copyright 2025 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +.spectrum-InfieldProgressCircle { + --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100); + --spectrum-infieldprogresscircle-padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill); +} + +.spectrum-InfieldProgressCircle--sizeS { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75); +} + +.spectrum-InfieldProgressCircle--sizeL { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200); +} + +.spectrum-InfieldProgressCircle--sizeXL { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300); +} + +.spectrum-InfieldProgressCircle { + padding-block: var(--spectrum-infieldprogresscircle-padding-block); + + .spectrum-ProgressCircle-fill { + stroke-linecap: square; + } +} diff --git a/components/infieldprogresscircle/package.json b/components/infieldprogresscircle/package.json new file mode 100644 index 00000000000..1e620f53eb1 --- /dev/null +++ b/components/infieldprogresscircle/package.json @@ -0,0 +1,57 @@ +{ + "name": "@spectrum-css/infieldprogresscircle", + "version": "1.0.0-next.1", + "description": "The Spectrum CSS infieldprogresscircle component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-in-field-progress-circle--docs", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/infieldprogresscircle" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "exports": { + ".": "./dist/index.css", + "./*.md": "./*.md", + "./dist/*": "./dist/*", + "./index-*.css": "./dist/index-*.css", + "./index.css": "./dist/index.css", + "./metadata.json": "./dist/metadata.json", + "./package.json": "./package.json", + "./stories/*": "./stories/*" + }, + "main": "dist/index.css", + "peerDependencies": { + "@spectrum-css/tokens": ">=16.1.0-next.0" + }, + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + }, + "devDependencies": { + "@spectrum-css/tokens": "16.1.0-next.5" + }, + "keywords": [ + "design-system", + "spectrum", + "spectrum-css", + "adobe", + "adobe-spectrum", + "component", + "css" + ], + "publishConfig": { + "access": "public" + }, + "spectrum": [ + { + "guidelines": "https://spectrum.adobe.com/page/progress-circle", + "rootClass": "spectrum-InfieldProgressCircle", + "swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/" + } + ] +} diff --git a/components/infieldprogresscircle/project.json b/components/infieldprogresscircle/project.json new file mode 100644 index 00000000000..ff11b0651fc --- /dev/null +++ b/components/infieldprogresscircle/project.json @@ -0,0 +1,17 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "name": "infieldprogresscircle", + "tags": ["component"], + "targets": { + "build": {}, + "clean": {}, + "compare": {}, + "format": {}, + "lint": {}, + "report": {}, + "test": { + "defaultConfiguration": "scope" + }, + "validate": {} + } +} diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js new file mode 100644 index 00000000000..bd05e261b83 --- /dev/null +++ b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js @@ -0,0 +1,125 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { size } from "@spectrum-css/preview/types"; +import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; +import { InfieldProgressCircleGroup } from "./infieldprogresscircle.test.js"; +import { Template } from "./template.js"; + +/** + * In-field progress circles are used in t-shirt size components such as [buttons](/docs/components-button--docs), [combo boxes](/docs/components-combobox--docs), and [pickers](/docs/components-picker--docs). The in-field progress circle can be used in place of an icon or in tight spaces when space is limited both vertically and horizontally. +*/ + +export default { + title: "In-field progress circle", + component: "InfieldProgressCircle", + argTypes: { + ...ProgressCircle.argTypes, + size: size(["s", "m", "l", "xl"]), + }, + args: { + ...ProgressCircle.args, + rootClass: "spectrum-InfieldProgressCircle", + }, + parameters: { + ...ProgressCircle.parameters, + design: { + type: "figma", + url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=14970-6050", + }, + packageJson, + metadata, + status: { + type: "migrated", + }, + }, + tags: ["migrated"], +}; + +export const Default = InfieldProgressCircleGroup.bind({}); +Default.args = {}; + +// ********* VRT ONLY ********* // +export const WithForcedColors = InfieldProgressCircleGroup.bind({}); +WithForcedColors.args = Default.args; +WithForcedColors.tags = ["!autodocs", "!dev"]; +WithForcedColors.parameters = { + chromatic: { + forcedColors: "active", + modes: disableDefaultModes, + }, +}; + +// ********* DOCS ONLY ********* // + +export const Sizing = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The indeterminate progress circle displays a repeating animation for the inner fill. + */ +export const Indeterminate = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Indeterminate.args = { + isIndeterminate: true, +}; +Indeterminate.tags = ["!dev"]; +Indeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteDeterminate = Sizing.bind({}); +StaticWhiteDeterminate.tags = ["!dev"]; +StaticWhiteDeterminate.storyName = "Static white, default"; +StaticWhiteDeterminate.args = { + staticColor: "white", +}; +StaticWhiteDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteIndeterminate = Sizing.bind({}); +StaticWhiteIndeterminate.tags = ["!dev"]; +StaticWhiteIndeterminate.storyName = "Static white, indeterminate"; +StaticWhiteIndeterminate.args = { + staticColor: "white", + isIndeterminate: true, +}; +StaticWhiteIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackDeterminate = Sizing.bind({}); +StaticBlackDeterminate.tags = ["!dev"]; +StaticBlackDeterminate.storyName = "Static black, default"; +StaticBlackDeterminate.args = { + staticColor: "black", +}; +StaticBlackDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackIndeterminate = Sizing.bind({}); +StaticBlackIndeterminate.tags = ["!dev"]; +StaticBlackIndeterminate.storyName = "Static black, indeterminate"; +StaticBlackIndeterminate.args = { + staticColor: "black", + isIndeterminate: true, +}; +StaticBlackIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.test.js b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js new file mode 100644 index 00000000000..2ef07f947ab --- /dev/null +++ b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js @@ -0,0 +1,25 @@ +import { Variants } from "@spectrum-css/preview/decorators"; +import { Template } from "./template.js"; + +export const InfieldProgressCircleGroup = Variants({ + Template, + testData: [ + { + testHeading: "Default", + }, + { + testHeading: "Static white", + staticColor: "white", + }, + { + testHeading: "Static black", + staticColor: "black", + }, + ], + stateData: [ + { + testHeading: "Indeterminate", + isIndeterminate: true, + } + ] +}); diff --git a/components/infieldprogresscircle/stories/template.js b/components/infieldprogresscircle/stories/template.js new file mode 100644 index 00000000000..7f8fc1f8de1 --- /dev/null +++ b/components/infieldprogresscircle/stories/template.js @@ -0,0 +1,21 @@ +import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; +import { capitalize } from "lodash-es"; +import "../index.css"; + +export const Template = ({ + customClasses = [], + rootClass = "spectrum-InfieldProgressCircle", + size = "m", + staticColor, + ...item +} = {}, context = {}) => ProgressCircle({ + customClasses: [ + rootClass, + typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null, + typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null, + ...customClasses + ].filter(Boolean), + size, + staticColor, + ...item +}, context ); diff --git a/components/inlinealert/CHANGELOG.md b/components/inlinealert/CHANGELOG.md index 0917d027041..14d2bc6ef6e 100644 --- a/components/inlinealert/CHANGELOG.md +++ b/components/inlinealert/CHANGELOG.md @@ -1,13 +1,111 @@ # Change log +## 11.0.0-next.2 + +### Major Changes + +- [#3659](https://github.com/adobe/spectrum-css/pull/3659) [`83b2fe9`](https://github.com/adobe/spectrum-css/commit/83b2fe9a118936e68628ab02ccb9c03452eb1931) Thanks [@cdransf](https://github.com/cdransf)! + +#### Spectrum 2 migration + +This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification. + +Subtle and bold treatments have been added for each badge variant. + +To use the subtle treatment, you will need to apply the `spectrum-InLineAlert--subtle` class: + +```html +
+
+ Info variant with subtle fill + +
+
This is an alert.
+
+``` + +To use the bold treatment (which is reserved for high-attention alerts only), you will need to apply the `spectrum-InLineAlert--bold` class: + +```html +
+
+ Info variant with bold fill + +
+
This is an alert.
+
+``` + +Because subtle and bold treatments draw a similar level of attention you should choose only one to use consistently within a single product. + +##### New mods + +`--mod-inlinealert-border-and-icon-color-neutral` +`--mod-inlinealert-min-spacing-header-to-icon` +`--mod-inlinealert-spacing-content-link-button` +`--mod-inlinealert-spacing-header-content` + +##### Removed mods + +`--mod-inlinealert-spacing-header-content-button` +`--mod-inlinealert-spacing-header-to-icon` + +##### New custom properties + +`--spectrum-inlinealert-min-spacing-header-to-icon` +`--spectrum-inlinealert-spacing-content-link-button` +`--spectrum-inlinealert-spacing-header-content` + +##### Removed custom properties + +`--spectrum-inlinealert-spacing-header-content-button` +`--spectrum-inlinealert-spacing-header-to-icon` + +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 11.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/button@15.0.0-next.0 + ## 10.1.0 ### Minor Changes 📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)! -## New feature - Minified and gzipped outputs available for all compiled CSS assets. ### Patch Changes diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 935c89f08a3..81ebe4df638 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -2,27 +2,33 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-InLineAlert", - ".spectrum-InLineAlert--info", - ".spectrum-InLineAlert--info .spectrum-InLineAlert-icon", - ".spectrum-InLineAlert--negative", - ".spectrum-InLineAlert--negative .spectrum-InLineAlert-icon", - ".spectrum-InLineAlert--notice", - ".spectrum-InLineAlert--notice .spectrum-InLineAlert-icon", - ".spectrum-InLineAlert--positive", - ".spectrum-InLineAlert--positive .spectrum-InLineAlert-icon", ".spectrum-InLineAlert-content", ".spectrum-InLineAlert-footer", ".spectrum-InLineAlert-footer:empty", ".spectrum-InLineAlert-header", - ".spectrum-InLineAlert-icon" + ".spectrum-InLineAlert-icon", + ".spectrum-InLineAlert.spectrum-InLineAlert--bold", + ".spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)", + ".spectrum-InLineAlert.spectrum-InLineAlert--info", + ".spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--bold", + ".spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle", + ".spectrum-InLineAlert.spectrum-InLineAlert--negative", + ".spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--bold", + ".spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle", + ".spectrum-InLineAlert.spectrum-InLineAlert--neutral", + ".spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold", + ".spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle", + ".spectrum-InLineAlert.spectrum-InLineAlert--notice", + ".spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold", + ".spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle", + ".spectrum-InLineAlert.spectrum-InLineAlert--positive", + ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--bold", + ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle", + ".spectrum-InLineAlert.spectrum-InLineAlert--subtle" ], "modifiers": [ "--mod-inlinealert-background-color", "--mod-inlinealert-border-and-icon-color", - "--mod-inlinealert-border-and-icon-color-info", - "--mod-inlinealert-border-and-icon-color-negative", - "--mod-inlinealert-border-and-icon-color-notice", - "--mod-inlinealert-border-and-icon-color-positive", "--mod-inlinealert-border-radius", "--mod-inlinealert-border-width", "--mod-inlinealert-content-color", @@ -40,18 +46,15 @@ "--mod-inlinealert-heading-line-height", "--mod-inlinealert-icon-size", "--mod-inlinealert-min-inline-size", + "--mod-inlinealert-min-spacing-header-to-icon", + "--mod-inlinealert-spacing-content-link-button", "--mod-inlinealert-spacing-edge-to-text", - "--mod-inlinealert-spacing-header-content-button", - "--mod-inlinealert-spacing-header-to-icon" + "--mod-inlinealert-spacing-header-content" ], "component": [ "--spectrum-in-line-alert-minimum-width", "--spectrum-inlinealert-background-color", "--spectrum-inlinealert-border-and-icon-color", - "--spectrum-inlinealert-border-and-icon-color-info", - "--spectrum-inlinealert-border-and-icon-color-negative", - "--spectrum-inlinealert-border-and-icon-color-notice", - "--spectrum-inlinealert-border-and-icon-color-positive", "--spectrum-inlinealert-border-radius", "--spectrum-inlinealert-border-width", "--spectrum-inlinealert-content-color", @@ -69,12 +72,14 @@ "--spectrum-inlinealert-heading-line-height", "--spectrum-inlinealert-icon-size", "--spectrum-inlinealert-min-inline-size", + "--spectrum-inlinealert-min-spacing-header-to-icon", + "--spectrum-inlinealert-spacing-content-link-button", "--spectrum-inlinealert-spacing-edge-to-text", - "--spectrum-inlinealert-spacing-header-content-button", - "--spectrum-inlinealert-spacing-header-to-icon" + "--spectrum-inlinealert-spacing-header-content" ], "global": [ "--spectrum-background-layer-2-color", + "--spectrum-black", "--spectrum-body-color", "--spectrum-body-line-height", "--spectrum-body-sans-serif-font-style", @@ -82,27 +87,39 @@ "--spectrum-body-size-s", "--spectrum-border-width-200", "--spectrum-component-height-50", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-700", "--spectrum-heading-color", "--spectrum-heading-line-height", "--spectrum-heading-sans-serif-font-style", "--spectrum-heading-sans-serif-font-weight", "--spectrum-heading-size-xxs", + "--spectrum-informative-background-color-default", + "--spectrum-informative-subtle-background-color-default", "--spectrum-informative-visual-color", + "--spectrum-negative-background-color-default", + "--spectrum-negative-subtle-background-color-default", "--spectrum-negative-visual-color", + "--spectrum-neutral-background-color-default", + "--spectrum-neutral-subtle-background-color-default", "--spectrum-neutral-visual-color", + "--spectrum-notice-background-color-default", + "--spectrum-notice-subtle-background-color-default", "--spectrum-notice-visual-color", + "--spectrum-positive-background-color-default", + "--spectrum-positive-subtle-background-color-default", "--spectrum-positive-visual-color", "--spectrum-sans-font-family-stack", + "--spectrum-spacing-100", + "--spectrum-spacing-200", "--spectrum-spacing-300", - "--spectrum-spacing-400", + "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-inlinealert-background-color", "--highcontrast-inlinealert-border-and-icon-color", + "--highcontrast-inlinealert-border-width", "--highcontrast-inlinealert-content-color", "--highcontrast-inlinealert-header-color" ] diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css index ad548bab5eb..662a89ebb4e 100644 --- a/components/inlinealert/index.css +++ b/components/inlinealert/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -27,26 +27,105 @@ /* Size */ --spectrum-inlinealert-border-width: var(--spectrum-border-width-200); - --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100); + --spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-700); --spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width); --spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50); /* Spacing */ - --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400); - --spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300); + --spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-300); + --spectrum-inlinealert-min-spacing-header-to-icon: var(--spectrum-spacing-100); + --spectrum-inlinealert-spacing-header-content: var(--spectrum-spacing-100); + --spectrum-inlinealert-spacing-content-link-button: var(--spectrum-spacing-200); /* Color */ --spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color); --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); --spectrum-inlinealert-header-color: var(--spectrum-heading-color); --spectrum-inlinealert-content-color: var(--spectrum-body-color); - --spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color); - --spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color); - --spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color); - --spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color); + &.spectrum-InLineAlert--subtle { + --spectrum-inlinealert-border-width: 0px; + } + + &.spectrum-InLineAlert--bold { + --spectrum-inlinealert-border-width: 0px; + } + + &.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice) { + --spectrum-inlinealert-header-color: var(--spectrum-white); + --spectrum-inlinealert-content-color: var(--spectrum-white); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-white); + } + + &.spectrum-InLineAlert--info { + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color); + + &.spectrum-InLineAlert--subtle { + --spectrum-inlinealert-background-color: var(--spectrum-informative-subtle-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color); + } + + &.spectrum-InLineAlert--bold { + --spectrum-inlinealert-background-color: var(--spectrum-informative-background-color-default); + } + } + + &.spectrum-InLineAlert--notice { + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color); + + &.spectrum-InLineAlert--subtle { + --spectrum-inlinealert-background-color: var(--spectrum-notice-subtle-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color); + } + + &.spectrum-InLineAlert--bold { + --spectrum-inlinealert-background-color: var(--spectrum-notice-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-black); + } + } + + &.spectrum-InLineAlert--positive { + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color); + + &.spectrum-InLineAlert--subtle { + --spectrum-inlinealert-background-color: var(--spectrum-positive-subtle-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color); + } + + &.spectrum-InLineAlert--bold { + --spectrum-inlinealert-background-color: var(--spectrum-positive-background-color-default); + } + } + + &.spectrum-InLineAlert--negative { + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color); + + &.spectrum-InLineAlert--subtle { + --spectrum-inlinealert-background-color: var(--spectrum-negative-subtle-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color); + } + + &.spectrum-InLineAlert--bold { + --spectrum-inlinealert-background-color: var(--spectrum-negative-background-color-default); + } + } + + &.spectrum-InLineAlert--neutral { + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); + + &.spectrum-InLineAlert--subtle { + --spectrum-inlinealert-background-color: var(--spectrum-neutral-subtle-background-color-default); + --spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color); + } + + &.spectrum-InLineAlert--bold { + --spectrum-inlinealert-background-color: var(--spectrum-neutral-background-color-default); + } + } +} + +.spectrum-InLineAlert { position: relative; display: inline-block; @@ -56,8 +135,7 @@ padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text)); - border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)); - border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)); + border-width: var(--highcontrast-inlinealert-border-width, var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))); border-style: solid; border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius)); @@ -65,27 +143,19 @@ border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color))); } -@media (forced-colors: active) { - .spectrum-InLineAlert { - --highcontrast-inlinealert-background-color: Background; - --highcontrast-inlinealert-header-color: CanvasText; - --highcontrast-inlinealert-content-color: CanvasText; - --highcontrast-inlinealert-border-and-icon-color: ButtonBorder; - } -} - .spectrum-InLineAlert-icon { inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size)); + flex-shrink: 0; + color: var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)); } .spectrum-InLineAlert-header { display: flex; - align-items: center; justify-content: space-between; - /* Minimum space between header and icon */ - gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon)); + gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon)); + margin-block-end: var(--mod-inlinealert-spacing-header-content, var(--spectrum-inlinealert-spacing-header-content)); font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight)); font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family)); @@ -100,8 +170,10 @@ } .spectrum-InLineAlert-content { - display: block; - margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)); + display: flex; + justify-content: space-between; + gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon)); + margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; @@ -120,42 +192,25 @@ .spectrum-InLineAlert-footer { display: flex; - justify-content: flex-end; - margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button)); + justify-content: flex-start; + margin-block-start: var(--mod-inlinealert-spacing-content-link-button, var(--spectrum-inlinealert-spacing-content-link-button)); &:empty { display: none; } } -.spectrum-InLineAlert--info { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info))); - - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info))); - } -} - -.spectrum-InLineAlert--notice { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice))); - - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice))); - } -} - -.spectrum-InLineAlert--positive { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive))); - - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive))); - } -} +@media (forced-colors: active) { + .spectrum-InLineAlert { + --highcontrast-inlinealert-header-color: CanvasText; + --highcontrast-inlinealert-content-color: CanvasText; + --highcontrast-inlinealert-border-and-icon-color: CanvasText; -.spectrum-InLineAlert--negative { - border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))); + --highcontrast-inlinealert-background-color: Canvas; - .spectrum-InLineAlert-icon { - color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))); + &.spectrum-InLineAlert--subtle, + &.spectrum-InLineAlert--bold { + --highcontrast-inlinealert-border-width: var(--spectrum-border-width-200); + } } } diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index 3b0b3c85d15..0d46eba37db 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/inlinealert", - "version": "10.1.0", + "version": "11.0.0-next.2", "description": "The Spectrum CSS in-line alert component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -41,9 +41,9 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.6", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 6ed4d7c5f18..31f6ac0414f 100644 --- a/components/inlinealert/stories/inlinealert.stories.js +++ b/components/inlinealert/stories/inlinealert.stories.js @@ -2,10 +2,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { InlineAlertGroup } from "./inlinealert.test.js"; -import { Template } from "./template.js"; +import { AlertsWithStyleOptions } from "./template.js"; /** * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields. + * + * In-line alerts have five different variants: neutral (default), informative, positive, notice, and negative. Each variant is available with three fill styles (treatment): border (default), subtle, and bold. */ export default { title: "In-line alert", @@ -20,19 +22,29 @@ export default { category: "Content", }, control: { type: "text" }, + if: { arg: "withoutHeader", truthy: false }, }, text: { - name: "Text", + name: "Body text", type: { name: "string", required: true }, table: { type: { summary: "string" }, disable: false, - category: "Component", + category: "Content", }, control: { type: "text" }, }, + withoutHeader: { + name: "Without header", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, variant: { - name: "Variants", + name: "Variant", type: { name: "string" }, table: { type: { summary: "string" }, @@ -41,8 +53,29 @@ export default { options: ["neutral", "info", "positive", "notice", "negative"], control: "select", }, + treatment: { + name: "Treatment", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["border", "subtle", "bold"], + control: "select", + }, isClosable: { name: "Closable", + description: "An optional close button rendered below the alert text and link (if enabled).", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Advanced", + }, + control: "boolean", + }, + hasLink: { + name: "Link", + description: "An optional link rendered below the alert text.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -53,10 +86,13 @@ export default { }, args: { rootClass: "spectrum-InLineAlert", - headerText: "Neutral in-line alert header", + headerText: "In-line alert header", text: "This is an alert.", + withoutHeader: false, variant: "neutral", + treatment: "border", isClosable: false, + hasLink: false, }, parameters: { design: { @@ -65,7 +101,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** @@ -74,13 +114,23 @@ export default { export const Default = InlineAlertGroup.bind({}); Default.args = {}; +/** + * In-line alerts may be rendered without a header. Combine this strategy with any variant. + */ +export const WithoutHeader = InlineAlertGroup.bind({}); +WithoutHeader.args = { + withoutHeader: true, +}; +WithoutHeader.parameters = { + chromatic: { disableSnapshot: true }, +}; +WithoutHeader.tags = ["!dev"]; + // ********* DOCS ONLY ********* // /** * The informative variant uses the informative semantic color (blue) and has an "information" icon to help those with color vision deficiency discern the message tone. This should be used when the message needs to call extra attention, as compared to the neutral variant. - * - * _Spectrum for Adobe Express uses a different icon. Use the SX_Info_18_S.svg icon in the Express workflow icon set._ */ -export const Informative = Template.bind({}); +export const Informative = AlertsWithStyleOptions.bind({}); Informative.args = { variant: "info", headerText: "Info in-line alert header", @@ -92,10 +142,8 @@ Informative.tags = ["!dev"]; /** * A negative variant uses the negative semantic color (red) and has an "alert" icon to help those with color vision deficiency to discern the message tone. Negative variants are used to show an error or failure, or to convey something that needs to be immediately acknowledged or addressed. - * - * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ -export const Negative = Template.bind({}); +export const Negative = AlertsWithStyleOptions.bind({}); Negative.args = { variant: "negative", headerText: "Negative in-line alert header", @@ -105,12 +153,23 @@ Negative.parameters = { }; Negative.tags = ["!dev"]; +/** + * Neutral (default) variant alerts may also use the subtle and bold treatments available to other variants. + */ +export const Neutral = AlertsWithStyleOptions.bind({}); +Neutral.args = { + variant: "neutral", + headerText: "Neutral in-line alert header", +}; +Neutral.parameters = { + chromatic: { disableSnapshot: true }, +}; +Neutral.tags = ["!dev"]; + /** * The positive variant uses the positive semantic color (green) and has a "checkmark" icon to help those with color vision deficiency discern the message tone. This variant should be used to inform someone of a successful function or result of an action they took. - * - * _Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_18_S.svg icon in the Express workflow icon set._ */ -export const Positive = Template.bind({}); +export const Positive = AlertsWithStyleOptions.bind({}); Positive.args = { variant: "positive", headerText: "Positive in-line alert header", @@ -122,10 +181,8 @@ Positive.tags = ["!dev"]; /** * To warn about a situation that may need to be addressed soon, use the notice variant. It utilizes the notice semantic color (orange) and has an "alert" icon to help those with color vision deficiency to discern the message tone. - * - * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ -export const Notice = Template.bind({}); +export const Notice = AlertsWithStyleOptions.bind({}); Notice.args = { variant: "notice", headerText: "Notice in-line alert header", @@ -137,19 +194,44 @@ Notice.tags = ["!dev"]; /** * An in-line alert with a close button in the footer. Combine this strategy with any variant. - * - * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._ */ -export const Closable = Template.bind({}); -Closable.args = { +export const WithFooterClosable = AlertsWithStyleOptions.bind({}); +WithFooterClosable.args = { variant: "negative", isClosable: true, - headerText: "Incorrect payment information - error", + text: "Incorrect payment information - error", +}; +WithFooterClosable.parameters = { + chromatic: { disableSnapshot: true }, +}; +WithFooterClosable.tags = ["!dev"]; + +/** + * An in-line alert with a link in the footer. Combine this strategy with any variant. + */ +export const WithFooterLink = AlertsWithStyleOptions.bind({}); +WithFooterLink.args = { + hasLink: true, + text: "Click the link", +}; +WithFooterLink.parameters = { + chromatic: { disableSnapshot: true }, +}; +WithFooterLink.tags = ["!dev"]; + +/** + * An in-line alert with a link and close button in the footer. Combine this strategy with any variant. + */ +export const WithFooterLinkAndClosable = AlertsWithStyleOptions.bind({}); +WithFooterLinkAndClosable.args = { + hasLink: true, + isClosable: true, + text: "Click the link or close the alert", }; -Closable.parameters = { +WithFooterLinkAndClosable.parameters = { chromatic: { disableSnapshot: true }, }; -Closable.tags = ["!dev"]; +WithFooterLinkAndClosable.tags = ["!dev"]; // ********* VRT ONLY ********* // export const WithForcedColors = InlineAlertGroup.bind({}); diff --git a/components/inlinealert/stories/inlinealert.test.js b/components/inlinealert/stories/inlinealert.test.js index 4f74e3bad08..4aa070b4a6f 100644 --- a/components/inlinealert/stories/inlinealert.test.js +++ b/components/inlinealert/stories/inlinealert.test.js @@ -12,6 +12,7 @@ export const InlineAlertGroup = Variants({ })), { testHeading: "Truncation", + variant: "info", headerText: "In-line alert header announcing something very long and in-line", text: "This is a very urgent alert with a lot of context, so the text has to wrap.", customStyles: {"max-width": "400px"} @@ -22,5 +23,58 @@ export const InlineAlertGroup = Variants({ testHeading: "Closable", isClosable: true, }, + { + testHeading: "Without header", + withoutHeader: true, + }, + { + testHeading: "Link", + hasLink: true, + }, + { + testHeading: "Link + closable", + isClosable: true, + hasLink: true, + }, + { + testHeading: "Subtle", + treatment: "subtle", + }, + { + testHeading: "Bold", + treatment: "bold", + }, + { + testHeading: "Subtle + closable", + treatment: "subtle", + isClosable: true, + }, + { + testHeading: "Subtle + link + closable", + treatment: "subtle", + isClosable: true, + hasLink: true, + }, + { + testHeading: "Bold + closable", + treatment: "bold", + isClosable: true, + }, + { + testHeading: "Subtle + link", + treatment: "subtle", + hasLink: true, + }, + { + testHeading: "Bold + link", + treatment: "bold", + hasLink: true, + }, + { + testHeading: "Bold + link + closable", + treatment: "bold", + isClosable: true, + hasLink: true, + }, ], }); diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js index f5439cf8c4d..c2233414253 100644 --- a/components/inlinealert/stories/template.js +++ b/components/inlinealert/stories/template.js @@ -1,8 +1,10 @@ import { Template as Button } from "@spectrum-css/button/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { html, nothing } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; +import { Container } from "@spectrum-css/preview/decorators"; import "../index.css"; @@ -12,21 +14,26 @@ export const Template = ({ customStyles = {}, headerText, text, + withoutHeader = false, variant = "neutral", + treatment = "border", isClosable = false, + hasLink = false, } = {}, context = {}) => { let iconName; switch (variant) { case "info": - iconName = "Info"; + iconName = "InfoCircle"; break; case "positive": iconName = "CheckmarkCircle"; break; case "notice": + iconName = "AlertDiamond"; + break; case "negative": case "closable": - iconName = "Alert"; + iconName = "AlertTriangle"; break; default: iconName = undefined; @@ -40,6 +47,24 @@ export const Template = ({ customClasses: [`${rootClass}-icon`], }, context) : nothing; + + const titleMarkup = !withoutHeader ? html` +
+ ${headerText} + ${iconMarkup} +
+ ` : nothing; + + const linkMarkup = hasLink ? html` +
+ ${Link({ + url: "#", + text: "Link", + staticColor: treatment === "subtle" || treatment === "border" || variant === "notice" ? "black" : "white", + })} +
+ ` : nothing; + const closableMarkup = isClosable ? html`
${Button({ @@ -48,6 +73,7 @@ export const Template = ({ iconName: false, hideLabel: false, label: "Ok", + staticColor: treatment === "subtle" || treatment === "border" || variant === "notice" ? "black" : "white", })}
` : nothing; @@ -57,17 +83,53 @@ export const Template = ({ class=${classMap({ [rootClass]: true, [`${rootClass}--${variant}`]: typeof variant !== "undefined", + [`${rootClass}--${treatment}`]: treatment !== "border", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} > -
- ${headerText} - ${iconMarkup} + ${titleMarkup} +
+ ${text} + ${withoutHeader ? iconMarkup : nothing}
-
${text}
+ ${linkMarkup} ${closableMarkup}
`; }; + +/** + * Convert provided string to title case + */ +const toTitleCase = (string) => string.replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase()); + +/** + * Set the appropriate treatment header text + */ +const setTreatmentHeaderText = (variant, treatment) => `${toTitleCase(variant)} variant with ${treatment !== "border" ? treatment : "outline"} fill`; + +export const AlertsWithStyleOptions = (args, context = {}) => Container({ + withBorder: false, + direction: "row", + wrapperStyles: { + columnGap: "12px", + }, + content: [ + Template({ + ...args, + headerText: setTreatmentHeaderText(args.variant, "border"), + }, context), + Template({ + ...args, + treatment: "subtle", + headerText: setTreatmentHeaderText(args.variant, "subtle"), + }, context), + Template({ + ...args, + treatment: "bold", + headerText: setTreatmentHeaderText(args.variant, "bold"), + }, context), + ], +}, context); diff --git a/components/link/CHANGELOG.md b/components/link/CHANGELOG.md index 82f09e93090..37149b3bd6d 100644 --- a/components/link/CHANGELOG.md +++ b/components/link/CHANGELOG.md @@ -1,5 +1,58 @@ # Change log +## 8.0.0-next.2 + +### Minor Changes + +- [#3861](https://github.com/adobe/spectrum-css/pull/3861) [`911a7cf`](https://github.com/adobe/spectrum-css/commit/911a7cf8b3a651f3e86d67b7b1c08ee1de540c17) Thanks [@cdransf](https://github.com/cdransf)! - Fixes keyboard focus shift by changing padding to outline-offset + +### Patch Changes + +- [#3687](https://github.com/adobe/spectrum-css/pull/3687) [`53d1e5e`](https://github.com/adobe/spectrum-css/commit/53d1e5e7eb7817c37be3cfe5a253363dea744046) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - ### S2 link fix + + This work adds the static color focus ring tokens to links (so that static white and static black links do _not_ have the usual blue focus ring). + +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 8.0.0-next.0 + +### Major Changes + +📝 [#3570](https://github.com/adobe/spectrum-css/pull/3570) [`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! + +#### Link S2 migration + +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. + +##### Note + +- Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear +- `--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. + +#### New tokens + +##### Color + +`spectrum-link-focus-indicator-color` +`spectrum-link-focus-indicator-thickness` +`spectrum-link-focus-indicator-gap` +`spectrum-link-corner-radius` + +##### Typography + +`spectrum-link-line-height` +`spectrum-link-line-height-cjk-100` +`spectrum-link-font-size` +`spectrum-link-font-style` +`spectrum-link-font-weight` +`spectrum-link-text-underline-thickness` +`spectrum-link-text-underline-gap` + ## 7.1.0 ### Minor Changes diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9befaceefc4..9c83915a752 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -2,6 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Link", + ".spectrum-Link--inline", ".spectrum-Link--quiet", ".spectrum-Link--quiet:hover", ".spectrum-Link--secondary", @@ -9,26 +10,41 @@ ".spectrum-Link--staticWhite", ".spectrum-Link:active", ".spectrum-Link:focus-visible", - ".spectrum-Link:hover" + ".spectrum-Link:hover", + ".spectrum-Link:lang(ja)", + ".spectrum-Link:lang(ko)", + ".spectrum-Link:lang(zh)" ], "modifiers": [ "--mod-link-animation-duration", + "--mod-link-inline-font-weight", + "--mod-link-line-height-cjk", "--mod-link-text-color", "--mod-link-text-color-active", "--mod-link-text-color-black", "--mod-link-text-color-focus", "--mod-link-text-color-hover", - "--mod-link-text-color-primary-active", - "--mod-link-text-color-primary-default", - "--mod-link-text-color-primary-focus", - "--mod-link-text-color-primary-hover", "--mod-link-text-color-secondary-active", "--mod-link-text-color-secondary-default", "--mod-link-text-color-secondary-focus", "--mod-link-text-color-secondary-hover", "--mod-link-text-color-white" ], - "component": [], + "component": [ + "--spectrum-link-corner-radius", + "--spectrum-link-default-font-family", + "--spectrum-link-focus-indicator-color", + "--spectrum-link-focus-indicator-gap", + "--spectrum-link-focus-indicator-thickness", + "--spectrum-link-font-size", + "--spectrum-link-font-style", + "--spectrum-link-font-weight", + "--spectrum-link-inline-font-weight", + "--spectrum-link-line-height", + "--spectrum-link-line-height-cjk", + "--spectrum-link-text-underline-gap", + "--spectrum-link-text-underline-thickness" + ], "global": [ "--spectrum-accent-content-color-default", "--spectrum-accent-content-color-down", @@ -36,13 +52,30 @@ "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-black", + "--spectrum-cjk-line-height-100", + "--spectrum-corner-radius-100", + "--spectrum-default-font-style", + "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-gap", + "--spectrum-focus-indicator-thickness", + "--spectrum-font-size-100", + "--spectrum-line-height-100", + "--spectrum-medium-font-weight", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", + "--spectrum-static-black-focus-indicator-color", + "--spectrum-static-white-focus-indicator-color", + "--spectrum-text-underline-gap", + "--spectrum-text-underline-thickness", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], - "high-contrast": ["--highcontrast-link-text-color"] + "high-contrast": [ + "--highcontrast-link-focus-indicator-color", + "--highcontrast-link-text-color" + ] } diff --git a/components/link/index.css b/components/link/index.css index 97a5f291228..9c49d650727 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -11,21 +11,28 @@ * governing permissions and limitations under the License. */ -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Link { - --highcontrast-link-text-color: LinkText; - } -} +.spectrum-Link { + /* Focus state */ + --spectrum-link-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-link-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-link-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-link-corner-radius: var(--spectrum-corner-radius-100); -.spectrum-Link--secondary { - --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default)); - --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover)); - --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down)); - --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus)); -} + /* Typography */ + --spectrum-link-default-font-family: var(--spectrum-sans-font-family-stack); + + /* Standalone */ + --spectrum-link-line-height: var(--spectrum-line-height-100); + --spectrum-link-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-link-font-size: var(--spectrum-font-size-100); + --spectrum-link-font-style: var(--spectrum-default-font-style); + --spectrum-link-font-weight: var(--spectrum-medium-font-weight); + --spectrum-link-text-underline-thickness: var(--spectrum-text-underline-thickness); + --spectrum-link-text-underline-gap: var(--spectrum-text-underline-gap); + + /* Inline */ + --spectrum-link-inline-font-weight: var(--spectrum-regular-font-weight); -.spectrum-Link { /* Remove the gray background on active links in IE 10. */ background-color: transparent; @@ -36,29 +43,45 @@ outline: none; cursor: pointer; - /* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */ - color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)))); + color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default))); + font-family: var(--spectrum-link-default-font-family); + font-weight: var(--spectrum-link-font-weight); + font-size: var(--spectrum-link-font-size); + font-style: var(--spectrum-link-font-style); + line-height: var(--spectrum-link-line-height); + text-decoration-thickness: var(--spectrum-link-text-underline-thickness); + text-underline-offset: var(--spectrum-link-text-underline-gap); &:hover { - /* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */ - --mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover))); + --mod-link-text-color: var(--mod-link-text-color-hover, var(--spectrum-accent-content-color-hover)); } &:active { - /* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */ - --mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down))); + --mod-link-text-color: var(--mod-link-text-color-active, var(--spectrum-accent-content-color-down)); } &:focus-visible { - /* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */ - --mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus))); + --mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus)); - text-decoration: underline; - text-decoration-style: double; - text-decoration-color: inherit; + outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color)); + outline-offset: var(--spectrum-link-focus-indicator-gap); + border-radius: var(--spectrum-link-corner-radius); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-link-line-height-cjk, var(--spectrum-link-line-height-cjk)); } } +.spectrum-Link--secondary { + --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default)); + --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover)); + --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down)); + --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus)); +} + .spectrum-Link--quiet { text-decoration: none; @@ -67,11 +90,17 @@ } } +.spectrum-Link--inline { + --spectrum-link-font-weight: var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight)); +} + .spectrum-Link--staticWhite { --mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-active: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-focus: var(--mod-link-text-color-white, var(--spectrum-white)); + + --spectrum-link-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } .spectrum-Link--staticBlack { @@ -79,4 +108,14 @@ --mod-link-text-color-hover: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black)); + + --spectrum-link-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); +} + +/* Windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Link { + --highcontrast-link-text-color: LinkText; + --highcontrast-link-focus-indicator-color: LinkText; + } } diff --git a/components/link/package.json b/components/link/package.json index 2b8698b4952..e5c8e081861 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/link", - "version": "7.1.0", + "version": "8.0.0-next.2", "description": "The Spectrum CSS link component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index 53c71bfacb2..e747752b695 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -3,7 +3,7 @@ import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum- import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { LinkGroup } from "./link.test.js"; -import { TemplateWithFillerText } from "./template.js"; +import { LinkGroupText, MultilineText, TemplateWithFillerText } from "./template.js"; /** * A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text. @@ -54,8 +54,20 @@ export default { }, control: "boolean", }, + isInline: { + name: "Inline", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, staticColor, - isQuiet, + isQuiet: { + ...isQuiet, + if: { arg: "isInline", neq: true }, + }, }, args: { rootClass: "spectrum-Link", @@ -65,6 +77,7 @@ export default { isActive: false, isFocused: false, isVisited: false, + isInline: false, }, parameters: { actions: { @@ -76,7 +89,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = LinkGroup.bind({}); @@ -88,106 +105,83 @@ Default.tags = ["!autodocs"]; // ********* DOCS ONLY ********* // /** - * The primary link is the default variant and is blue. This should be used to call attention to the link and for when the blue color won’t feel too overwhelming in the experience. + * The standalone link is the default variant with the primary style which appears blue. This should be used to call attention to the link and for when the blue color won’t feel too overwhelming in the experience. + * All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn’t necessary. */ -export const Primary = TemplateWithFillerText.bind({}); -Primary.args = { - ...Default.args, - text: "link using spectrum-Link" -}; +export const Primary = LinkGroupText.bind({}); +Primary.args = {}; Primary.tags = ["!dev"]; Primary.parameters = { chromatic: { disableSnapshot: true }, }; +Primary.storyName = "Standalone, primary"; /** * The secondary variant is the same gray color as the paragraph text. Its subdued appearance is optimal for when the primary variant is too overwhelming, such as in blocks of text with several references linked throughout. + * Link is using the class `spectrum-Link--secondary`. */ -export const Secondary = TemplateWithFillerText.bind({}); +export const Secondary = LinkGroupText.bind({}); Secondary.args = { variant: "secondary", - text: "link using spectrum-Link--secondary", }; Secondary.parameters = { chromatic: { disableSnapshot: true }, }; Secondary.tags = ["!dev"]; - -/** - * All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn’t necessary. - */ -export const QuietPrimary = TemplateWithFillerText.bind({}); -QuietPrimary.storyName = "Primary (quiet)"; -QuietPrimary.args = { - isQuiet: true, - text: "link using spectrum-Link--quiet", -}; -QuietPrimary.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietPrimary.tags = ["!dev"]; - -export const QuietSecondary = TemplateWithFillerText.bind({}); -QuietSecondary.storyName = "Secondary (quiet)"; -QuietSecondary.args = { - isQuiet: true, - variant: "secondary", - text: "link using spectrum-Link--quiet and spectrum-Link--secondary", -}; -QuietSecondary.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietSecondary.tags = ["!dev"]; +Secondary.storyName = "Standalone, secondary"; /** * Use static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + * Link is using the class `spectrum-Link--staticWhite`. */ -export const StaticWhite = Default.bind({}); +export const StaticWhite = LinkGroupText.bind({}); StaticWhite.storyName = "Static white"; StaticWhite.args = { staticColor: "white", - text: "Link using spectrum-Link--staticWhite", }; StaticWhite.tags = ["!dev"]; StaticWhite.parameters = { chromatic: { disableSnapshot: true }, }; +StaticWhite.storyName = "Standalone, static white"; /** * Use static black on light color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + * Link using is the class `spectrum-Link--staticBlack`. */ -export const StaticBlack = Default.bind({}); +export const StaticBlack = LinkGroupText.bind({}); StaticBlack.storyName = "Static black"; StaticBlack.args = { staticColor: "black", - text: "Link using spectrum-Link--staticBlack", }; StaticBlack.tags = ["!dev"]; StaticBlack.parameters = { chromatic: { disableSnapshot: true }, }; +StaticBlack.storyName = "Standalone, static black"; -export const QuietStaticWhite = Default.bind({}); -QuietStaticWhite.storyName = "Static white (quiet)"; -QuietStaticWhite.args = { - isQuiet: true, - staticColor: "white", - text: "Link using spectrum-Link--staticWhite and spectrum-Link--quiet", -}; -QuietStaticWhite.tags = ["!dev"]; -QuietStaticWhite.parameters = { +/** + * The focus ring wraps when the link component breaks on multiple rows. + */ +export const Multiline = MultilineText.bind({}); +Multiline.args = {}; +Multiline.tags = ["!dev"]; +Multiline.parameters = { chromatic: { disableSnapshot: true }, }; +Multiline.storyName = "Multiline, focused"; -export const QuietStaticBlack = Default.bind({}); -QuietStaticBlack.storyName = "Static black (quiet)"; -QuietStaticBlack.args = { - isQuiet: true, - staticColor: "black", - text: "Link using spectrum-Link--staticBlack and spectrum-Link--quiet", +/** + * Inline links are used within a paragraph of text. They are styled differently from standalone links in which the font weight is lighter and can be adjusted to match the paragraph text. + * Inline links do not have a quiet variant style so that it is distinguishable from the surrounding text and the underline indicator is clear. + */ +export const Inline = TemplateWithFillerText.bind({}); +Inline.args = { + isInline: true, + text: "Inline link", }; -QuietStaticBlack.tags = ["!dev"]; -QuietStaticBlack.parameters = { +Inline.tags = ["!dev"]; +Inline.parameters = { chromatic: { disableSnapshot: true }, }; diff --git a/components/link/stories/link.test.js b/components/link/stories/link.test.js index 04b33e7abe7..3fdfa9576fe 100644 --- a/components/link/stories/link.test.js +++ b/components/link/stories/link.test.js @@ -11,6 +11,15 @@ export const LinkGroup = Variants({ testHeading: "Secondary", variant: "secondary", }, + { + testHeading: "Inline", + isInline: true, + }, + { + testHeading: "Inline - secondary", + isInline: true, + variant: "secondary", + }, { testHeading: "Quiet", isQuiet: true, @@ -47,7 +56,7 @@ export const LinkGroup = Variants({ testHeading: "Static white - quiet", staticColor: "white", isQuiet: true, - }, + } ], stateData: [ { diff --git a/components/link/stories/template.js b/components/link/stories/template.js index a4faba05967..798f0da7323 100644 --- a/components/link/stories/template.js +++ b/components/link/stories/template.js @@ -1,4 +1,4 @@ -import { getRandomId } from "@spectrum-css/preview/decorators"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -17,6 +17,7 @@ export const Template = ({ isActive = false, isFocused = false, isVisited = false, + isInline = false, id = getRandomId("link"), customClasses = [], } = {}) => { @@ -25,6 +26,7 @@ export const Template = ({ class=${classMap({ [rootClass]: true, [`${rootClass}--quiet`]: isQuiet, + [`${rootClass}--inline`]: isInline, [`${rootClass}--${variant}`]: typeof variant !== "undefined", [`${rootClass}--static${capitalize(staticColor)}`]: typeof staticColor !== "undefined", @@ -43,9 +45,48 @@ export const Template = ({ }; export const TemplateWithFillerText = (args, context) => html` -
+

Hello, this is a ${Template(args, context)} . This is just filler text, but if you keep reading maybe something good will happen. -

+

`; + +export const MultilineText = (args, context) => html` +

+ I like focus styles. They are very important for accessibility. They help users know where they are on the page. + ${Template({ + ...args, + text: "This is a link that spans multiple lines", + isFocused: true, + isInline: true, + }, context)} + They are also very pretty. +

+`; + +export const LinkGroupText = (args, context) => Container({ + withBorder: false, + direction: "row", + content: [ + Container({ + withBorder: false, + direction: "column", + heading: "Default", + content: Template({ + ...args, + text: "Learn more", + }, context) + }, context), + Container({ + withBorder: false, + direction: "column", + heading: "Quiet", + content: Template({ + ...args, + text: "Learn more", + isQuiet: true, + }, context) + }, context) + ], +}, context); diff --git a/components/logicbutton/CHANGELOG.md b/components/logicbutton/CHANGELOG.md index 0e3933ba21e..e0a0d1e08a0 100644 --- a/components/logicbutton/CHANGELOG.md +++ b/components/logicbutton/CHANGELOG.md @@ -1,5 +1,20 @@ # Change log +## 7.0.0-next.1 + +### Patch Changes + +- [#3687](https://github.com/adobe/spectrum-css/pull/3687) [`53d1e5e`](https://github.com/adobe/spectrum-css/commit/53d1e5e7eb7817c37be3cfe5a253363dea744046) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - ### S2 logic button fix + + Adds `border-style: solid` to the styles to avoid a 3D effect on the border. + +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 6adfbf58b24..195d8c87082 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -15,9 +15,7 @@ ".spectrum-LogicButton:focus-visible:after" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-focus-indicator-gap", - "--mod-line-height-100", "--mod-logic-button-and-background-color", "--mod-logic-button-and-background-color-disabled", "--mod-logic-button-and-background-color-hover", @@ -46,8 +44,7 @@ "--mod-logic-button-or-border-color-hover-disabled", "--mod-logic-button-or-text-color", "--mod-logic-button-or-text-color-disabled", - "--mod-logic-button-padding", - "--mod-sans-font-family-stack" + "--mod-logic-button-padding" ], "component": [ "--spectrum-logic-button-and-background-color", @@ -88,16 +85,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "system-theme": [ - "--system-logic-button-and-background-color-disabled", - "--system-logic-button-and-background-color-hover-disabled", - "--system-logic-button-and-border-color-disabled", - "--system-logic-button-and-border-color-hover-disabled", - "--system-logic-button-or-background-color-disabled", - "--system-logic-button-or-background-color-hover-disabled", - "--system-logic-button-or-border-color-disabled", - "--system-logic-button-or-border-color-hover-disabled" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-focus-indicator-gap", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 4429907705b..9c61d275d30 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -12,9 +12,18 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-LogicButton { + --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); + + --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); --spectrum-logic-button-and-text-color: var(--spectrum-white); @@ -31,6 +40,7 @@ padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50)); border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200)); + border-style: solid; border-radius: var(--mod-logic-button-border-radius, var(--spectrum-logic-button-border-radius)); font-size: var(--mod-logic-button-font-size, var(--spectrum-font-size-100)); diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index acae200c0e4..f4942831fef 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/logicbutton", - "version": "6.1.0", + "version": "7.0.0-next.1", "description": "The Spectrum CSS logicbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,8 +33,8 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/commons": "12.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js index 5b0730616ef..02f5b3aa028 100644 --- a/components/logicbutton/stories/template.js +++ b/components/logicbutton/stories/template.js @@ -2,9 +2,6 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-LogicButton", diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/logicbutton/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css deleted file mode 100644 index c0bd0d1b3fb..00000000000 --- a/components/logicbutton/themes/spectrum-two.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css deleted file mode 100644 index 4aa43a01048..00000000000 --- a/components/logicbutton/themes/spectrum.css +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); - } -} diff --git a/components/menu/CHANGELOG.md b/components/menu/CHANGELOG.md index 45b0fc0ac47..8c8dcda5a00 100644 --- a/components/menu/CHANGELOG.md +++ b/components/menu/CHANGELOG.md @@ -1,10 +1,62 @@ # Change log -## 9.2.0 +## 10.0.0-next.3 -### Minor Changes +### Major Changes + +- [#3686](https://github.com/adobe/spectrum-css/pull/3686) [`cda60f4`](https://github.com/adobe/spectrum-css/commit/cda60f4f68ea1863b605fe992682664379d51278) Thanks [@5t3ph](https://github.com/5t3ph)! - ### Spectrum 2 migration + + Menu now uses Spectrum 2 tokens and specifications. + + Removes custom menu item background color tokens: `@adobe/spectrum-tokens` has been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from `@adobe/spectrum-tokens` have been removed. + + In addition to other small token and minor style changes, there were several new features that were added to this version of menu, including: + + - A thumbnail can now be used in place of an icon + - A section description can now be included below the menu section heading + - The actions area previously held action switches for multi-select, and in this version, an external link action icon can be included in that area + + ### New mods + + - `--mod-menu-item-corner-radius` + - `--mod-menu-item-linkout-icon-height` + - `--mod-menu-item-linkout-icon-width` + - `--mod-menu-item-thumbnail-height` + - `--mod-menu-item-thumbnail-opacity-disabled` + - `--mod-menu-item-thumbnail-to-label` + - `--mod-menu-item-thumbnail-width` + - `--mod-menu-item-top-to-thumbnail` + - `--mod-menu-item-top-to-workflow-icon` + - `--mod-menu-section-description-color` + - `--mod-menu-section-description-font-size` + - `--mod-menu-section-description-font-weight` + - `--mod-menu-section-description-line-height` + - `--mod-menu-section-description-line-height-cjk` + - `--mod-menu-section-header-to-description` + +## 10.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/switch@7.0.0-next.0 -- [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! - By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. +## 10.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + +## 10.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/checkbox@11.0.0-next.0 + - @spectrum-css/tray@6.0.0-next.0 ## 10.0.0 @@ -12,8 +64,6 @@ 📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)! -## New feature - Minified and gzipped outputs available for all compiled CSS assets. ### Patch Changes @@ -32,6 +82,14 @@ Minified and gzipped outputs available for all compiled CSS assets. - @spectrum-css/tray@6.0.0 - @spectrum-css/tokens@16.0.1 +## 9.2.0 + +### Minor Changes + +📝 [#3527](https://github.com/adobe/spectrum-css/pull/3527) [`5f1751c`](https://github.com/adobe/spectrum-css/commit/5f1751c82a5fe55ae0d999f5f50cfeca4c8a5c75) Thanks [@castastrophe](https://github.com/castastrophe)! + +By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low. + ## 9.1.1 ### Patch Changes diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 5142e09aa66..819a2b1b560 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -12,16 +12,17 @@ ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover", ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch", + ".spectrum-Menu .spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout", ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch", ".spectrum-Menu .spectrum-Menu-itemIcon", ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", - ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)", + ".spectrum-Menu .spectrum-Menu-linkout", ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)", ".spectrum-Menu-back", ".spectrum-Menu-back .spectrum-Menu-sectionHeading", @@ -60,10 +61,10 @@ ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-disabled", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail", ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue", ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading", ".spectrum-Menu-item.is-disabled:hover", @@ -72,15 +73,17 @@ ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item.is-focused", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item.is-focus-visible", + ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:active", + ".spectrum-Menu-item:active .spectrum-Menu-linkout", ".spectrum-Menu-item:active > .spectrum-Menu-checkmark", ".spectrum-Menu-item:active > .spectrum-Menu-chevron", ".spectrum-Menu-item:active > .spectrum-Menu-itemDescription", @@ -88,16 +91,26 @@ ".spectrum-Menu-item:active > .spectrum-Menu-itemLabel", ".spectrum-Menu-item:active > .spectrum-Menu-itemValue", ".spectrum-Menu-item:active > .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item:focus", - ".spectrum-Menu-item:focus > .spectrum-Menu-checkmark", - ".spectrum-Menu-item:focus > .spectrum-Menu-chevron", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item:focus > .spectrum-Menu-itemValue", - ".spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:focus-visible", + ".spectrum-Menu-item:focus-visible .spectrum-Menu-linkout", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue", + ".spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemActions", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemCheckbox", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail) > .spectrum-Menu-itemValue", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) .spectrum-Menu-itemThumbnail", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-checkmark", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemCheckbox", + ".spectrum-Menu-item:has(> .spectrum-Menu-itemThumbnail):has(> .spectrum-Menu-itemDescription) > .spectrum-Menu-itemDescription", ".spectrum-Menu-item:hover", + ".spectrum-Menu-item:hover .spectrum-Menu-linkout", ".spectrum-Menu-item:hover > .spectrum-Menu-checkmark", ".spectrum-Menu-item:hover > .spectrum-Menu-chevron", ".spectrum-Menu-item:hover > .spectrum-Menu-itemDescription", @@ -110,11 +123,12 @@ ".spectrum-Menu-itemLabel", ".spectrum-Menu-itemLabel--truncate", ".spectrum-Menu-itemSelection", + ".spectrum-Menu-itemThumbnail", ".spectrum-Menu-itemValue", - ".spectrum-Menu-item[aria-disabled=\"true\"]", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel", + ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover", @@ -123,6 +137,7 @@ ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading", + ".spectrum-Menu-sectionDescription", ".spectrum-Menu-sectionHeading", ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", @@ -131,11 +146,9 @@ ".spectrum-Menu.spectrum-Menu--sizeL", ".spectrum-Menu.spectrum-Menu--sizeS", ".spectrum-Menu.spectrum-Menu--sizeXL", - ".spectrum-Menu:dir(rtl)", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)", - "[dir=\"rtl\"] .spectrum-Menu", "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron" ], "modifiers": [ @@ -166,6 +179,7 @@ "--mod-menu-item-checkmark-height", "--mod-menu-item-checkmark-width", "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", + "--mod-menu-item-corner-radius", "--mod-menu-item-description-color-default", "--mod-menu-item-description-color-disabled", "--mod-menu-item-description-color-down", @@ -195,17 +209,30 @@ "--mod-menu-item-label-text-to-visual", "--mod-menu-item-label-to-description-spacing", "--mod-menu-item-label-to-value-area-min-spacing", + "--mod-menu-item-linkout-icon-height", + "--mod-menu-item-linkout-icon-width", "--mod-menu-item-min-height", "--mod-menu-item-selectable-edge-to-text-not-selected", "--mod-menu-item-text-to-control", + "--mod-menu-item-thumbnail-height", + "--mod-menu-item-thumbnail-opacity-disabled", + "--mod-menu-item-thumbnail-to-label", + "--mod-menu-item-thumbnail-width", "--mod-menu-item-top-edge-to-text", "--mod-menu-item-top-to-action", "--mod-menu-item-top-to-checkbox", "--mod-menu-item-top-to-checkmark", + "--mod-menu-item-top-to-thumbnail", + "--mod-menu-item-top-to-workflow-icon", "--mod-menu-item-value-color-default", "--mod-menu-item-value-color-down", "--mod-menu-item-value-color-focus", "--mod-menu-item-value-color-hover", + "--mod-menu-section-description-color", + "--mod-menu-section-description-font-size", + "--mod-menu-section-description-font-weight", + "--mod-menu-section-description-line-height", + "--mod-menu-section-description-line-height-cjk", "--mod-menu-section-divider-margin-block", "--mod-menu-section-header-bottom-edge-to-text", "--mod-menu-section-header-color", @@ -214,6 +241,7 @@ "--mod-menu-section-header-line-height", "--mod-menu-section-header-line-height-cjk", "--mod-menu-section-header-min-width", + "--mod-menu-section-header-to-description", "--mod-menu-section-header-top-edge-to-text" ], "component": [ @@ -234,18 +262,12 @@ "--spectrum-menu-item-background-color-default", "--spectrum-menu-item-background-color-down", "--spectrum-menu-item-background-color-hover", - "--spectrum-menu-item-background-color-key-focus", + "--spectrum-menu-item-background-color-keyboard-focus", "--spectrum-menu-item-bottom-edge-to-text", "--spectrum-menu-item-checkmark-height", - "--spectrum-menu-item-checkmark-height-extra-large", - "--spectrum-menu-item-checkmark-height-large", - "--spectrum-menu-item-checkmark-height-medium", - "--spectrum-menu-item-checkmark-height-small", "--spectrum-menu-item-checkmark-width", - "--spectrum-menu-item-checkmark-width-extra-large", - "--spectrum-menu-item-checkmark-width-large", - "--spectrum-menu-item-checkmark-width-medium", - "--spectrum-menu-item-checkmark-width-small", + "--spectrum-menu-item-chevron-height", + "--spectrum-menu-item-chevron-width", "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start", "--spectrum-menu-item-corner-radius", "--spectrum-menu-item-description-color-default", @@ -256,14 +278,12 @@ "--spectrum-menu-item-description-font-size", "--spectrum-menu-item-description-line-height", "--spectrum-menu-item-description-line-height-cjk", - "--spectrum-menu-item-focus-indicator-border-width", "--spectrum-menu-item-focus-indicator-color", "--spectrum-menu-item-focus-indicator-color-default", - "--spectrum-menu-item-focus-indicator-direction-scalar", "--spectrum-menu-item-focus-indicator-offset", "--spectrum-menu-item-focus-indicator-outline-style", - "--spectrum-menu-item-focus-indicator-shadow", "--spectrum-menu-item-focus-indicator-width", + "--spectrum-menu-item-focus-margin", "--spectrum-menu-item-icon-height", "--spectrum-menu-item-icon-width", "--spectrum-menu-item-label-content-color-default", @@ -282,8 +302,13 @@ "--spectrum-menu-item-label-line-height-cjk", "--spectrum-menu-item-label-text-to-visual", "--spectrum-menu-item-label-to-description", - "--spectrum-menu-item-label-to-description-spacing", + "--spectrum-menu-item-label-to-description-extra-large", + "--spectrum-menu-item-label-to-description-large", + "--spectrum-menu-item-label-to-description-medium", + "--spectrum-menu-item-label-to-description-small", "--spectrum-menu-item-label-to-value-area-min-spacing", + "--spectrum-menu-item-linkout-icon-height", + "--spectrum-menu-item-linkout-icon-width", "--spectrum-menu-item-min-height", "--spectrum-menu-item-section-divider-height", "--spectrum-menu-item-selectable-edge-to-text-not-selected", @@ -291,8 +316,11 @@ "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", - "--spectrum-menu-item-spacing-multiplier", "--spectrum-menu-item-text-to-control", + "--spectrum-menu-item-thumbnail-height", + "--spectrum-menu-item-thumbnail-opacity-disabled", + "--spectrum-menu-item-thumbnail-to-label", + "--spectrum-menu-item-thumbnail-width", "--spectrum-menu-item-top-edge-to-text", "--spectrum-menu-item-top-to-action", "--spectrum-menu-item-top-to-checkbox", @@ -301,24 +329,46 @@ "--spectrum-menu-item-top-to-selected-icon-large", "--spectrum-menu-item-top-to-selected-icon-medium", "--spectrum-menu-item-top-to-selected-icon-small", + "--spectrum-menu-item-top-to-thumbnail", + "--spectrum-menu-item-top-to-thumbnail-extra-large", + "--spectrum-menu-item-top-to-thumbnail-large", + "--spectrum-menu-item-top-to-thumbnail-medium", + "--spectrum-menu-item-top-to-thumbnail-small", + "--spectrum-menu-item-top-to-workflow-icon", "--spectrum-menu-item-value-color-default", "--spectrum-menu-item-value-color-down", "--spectrum-menu-item-value-color-focus", "--spectrum-menu-item-value-color-hover", + "--spectrum-menu-section-description-color", + "--spectrum-menu-section-description-font-size", + "--spectrum-menu-section-description-font-weight", + "--spectrum-menu-section-description-line-height", + "--spectrum-menu-section-description-line-height-cjk", "--spectrum-menu-section-header-color", "--spectrum-menu-section-header-font-size", "--spectrum-menu-section-header-font-weight", "--spectrum-menu-section-header-line-height", "--spectrum-menu-section-header-line-height-cjk", - "--spectrum-menu-section-header-min-width" + "--spectrum-menu-section-header-min-width", + "--spectrum-menu-section-header-to-description", + "--spectrum-menu-section-header-to-description-extra-large", + "--spectrum-menu-section-header-to-description-large", + "--spectrum-menu-section-header-to-description-medium", + "--spectrum-menu-section-header-to-description-small" ], "global": [ "--spectrum-accent-color-1000", "--spectrum-accent-color-1100", "--spectrum-accent-color-900", - "--spectrum-blue-800", "--spectrum-bold-font-weight", - "--spectrum-border-width-200", + "--spectrum-checkmark-icon-size-100", + "--spectrum-checkmark-icon-size-200", + "--spectrum-checkmark-icon-size-300", + "--spectrum-checkmark-icon-size-75", + "--spectrum-chevron-icon-size-100", + "--spectrum-chevron-icon-size-200", + "--spectrum-chevron-icon-size-300", + "--spectrum-chevron-icon-size-75", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -332,24 +382,38 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-400", + "--spectrum-corner-radius-500", + "--spectrum-corner-radius-600", + "--spectrum-corner-radius-700", "--spectrum-disabled-content-color", "--spectrum-divider-thickness-medium", "--spectrum-divider-thickness-small", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-50", "--spectrum-font-size-75", - "--spectrum-gray-1000-rgb", "--spectrum-gray-900", "--spectrum-line-height-100", + "--spectrum-link-out-icon-size-100", + "--spectrum-link-out-icon-size-200", + "--spectrum-link-out-icon-size-75", "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "--spectrum-navigational-indicator-top-to-back-icon-large", "--spectrum-navigational-indicator-top-to-back-icon-medium", @@ -362,6 +426,7 @@ "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", "--spectrum-neutral-subdued-content-color-key-focus", + "--spectrum-regular-font-weight", "--spectrum-spacing-100", "--spectrum-spacing-50", "--spectrum-text-to-control-100", @@ -371,23 +436,17 @@ "--spectrum-text-to-visual-100", "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", + "--spectrum-text-to-visual-400", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-200-opacity", + "--spectrum-thumbnail-size-500", + "--spectrum-thumbnail-size-700", + "--spectrum-thumbnail-size-800", + "--spectrum-thumbnail-size-900", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-menu-item-background-color-down", - "--system-menu-item-background-color-hover", - "--system-menu-item-background-color-key-focus", - "--system-menu-item-corner-radius", - "--system-menu-item-focus-indicator-offset", - "--system-menu-item-focus-indicator-outline-style", - "--system-menu-item-focus-indicator-shadow", - "--system-menu-item-spacing-multiplier" - ], "passthroughs": [ "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", diff --git a/components/menu/index.css b/components/menu/index.css index 3d48ce76499..7f36a14298f 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,84 +11,12 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - -@media (forced-colors: active) { - .spectrum-Menu { - --highcontrast-menu-item-background-color-default: ButtonFace; - --highcontrast-menu-item-color-default: ButtonText; - - --highcontrast-menu-item-background-color-focus: Highlight; - --highcontrast-menu-item-color-focus: HighlightText; - - --highcontrast-menu-checkmark-icon-color-default: Highlight; - - --highcontrast-menu-item-color-disabled: GrayText; - --highcontrast-menu-item-focus-indicator-color: Highlight; - - --highcontrast-menu-item-selected-background-color: Highlight; - --highcontrast-menu-item-selected-color: HighlightText; - - @supports (color: SelectedItem) { - --highcontrast-menu-item-selected-background-color: SelectedItem; - --highcontrast-menu-item-selected-color: SelectedItemText; - } - - .spectrum-Menu-item { - /* Hide unstylable readability backplates. */ - forced-color-adjust: none; - } - - .spectrum-Menu-item:hover, - .spectrum-Menu-item:focus { - .spectrum-Menu-itemCheckbox { - /* @passthrough start */ - --highcontrast-checkbox-highlight-color-hover: ButtonText; - --highcontrast-checkbox-highlight-color-default: ButtonText; - /* @passthrough end */ - } - - .spectrum-Menu-itemSwitch { - /* @passthrough start */ - --highcontrast-switch-handle-border-color-hover: ButtonText; - --highcontrast-switch-handle-border-color-selected-default: ButtonText; - --highcontrast-switch-handle-border-color-selected-hover: ButtonText; - --highcontrast-switch-background-color-selected-default: ButtonText; - --highcontrast-switch-background-color-selected-hover: ButtonText; - /* @passthrough end */ - } - } - - .spectrum-Menu-item--drillIn.is-open { - --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color); - --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color); - } - - .spectrum-Menu-item--collapsible.is-open { - &:hover, - &:focus-within { - box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default); - } - - &:hover, - &:active, - &:focus, - &.is-focused { - --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default); - } - } - } -} - .spectrum-Menu { - --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); - --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + /* Simplified - spec'd for 0% opacity */ + --spectrum-menu-item-background-color-default: var(--highcontrast-menu-item-background-color-default, transparent); --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); --spectrum-menu-item-label-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-menu-item-label-to-description-spacing: var(--spectrum-menu-item-label-to-description); - --spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-border-width-200)); - --spectrum-menu-item-focus-indicator-color: var(--spectrum-blue-800); --spectrum-menu-item-label-to-value-area-min-spacing: var(--spectrum-spacing-100); --spectrum-menu-item-label-content-color-default: var(--spectrum-neutral-content-color-default); @@ -116,7 +44,17 @@ --spectrum-menu-section-header-line-height: var(--spectrum-line-height-100); --spectrum-menu-section-header-line-height-cjk: var(--spectrum-cjk-line-height-100); --spectrum-menu-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-menu-section-header-color: var(--spectrum-gray-900); + --spectrum-menu-section-header-color: var(--spectrum-neutral-content-color-default); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); + + --spectrum-menu-section-description-line-height: var(--spectrum-line-height-100); + --spectrum-menu-section-description-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-menu-section-description-font-weight: var(--spectrum-regular-font-weight); + --spectrum-menu-section-description-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-menu-section-header-to-description: var(--spectrum-menu-section-header-to-description-medium); + --spectrum-menu-item-label-to-description: var(--spectrum-menu-item-label-to-description-medium); + --spectrum-menu-collapsible-icon-color: var(--spectrum-gray-900); --spectrum-menu-checkmark-icon-color-default: var(--spectrum-accent-color-900); @@ -141,33 +79,52 @@ --spectrum-menu-item-min-height: var(--spectrum-component-height-100); --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + + --spectrum-menu-item-linkout-icon-height: var(--spectrum-link-out-icon-size-100); + --spectrum-menu-item-linkout-icon-width: var(--spectrum-link-out-icon-size-100); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); + --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); + --spectrum-menu-item-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-500); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --spectrum-menu-item-checkmark-height: var(--spectrum-checkmark-icon-size-100); + --spectrum-menu-item-checkmark-width: var(--spectrum-checkmark-icon-size-100); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --spectrum-menu-item-chevron-height: var(--spectrum-chevron-icon-size-100); + --spectrum-menu-item-chevron-width: var(--spectrum-chevron-icon-size-100); + + --spectrum-menu-item-top-to-thumbnail: var(--spectrum-menu-item-top-to-thumbnail-medium); + --spectrum-menu-item-thumbnail-to-label: var(--spectrum-text-to-visual-200); + --spectrum-menu-item-thumbnail-height: var(--spectrum-thumbnail-size-700); + --spectrum-menu-item-thumbnail-width: var(--spectrum-thumbnail-size-700); + --spectrum-menu-item-thumbnail-opacity-disabled: 0.3; + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); + /* Focus state styling */ + --spectrum-menu-item-focus-indicator-width: var(--mod-menu-item-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); + --spectrum-menu-item-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-menu-item-focus-indicator-offset: var(--spectrum-focus-indicator-gap); + --spectrum-menu-item-focus-indicator-outline-style: solid; --spectrum-menu-item-focus-indicator-color-default: var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))); - --spectrum-menu-item-focus-indicator-border-width: calc(var(--spectrum-menu-item-focus-indicator-width) * var(--spectrum-menu-item-focus-indicator-direction-scalar, 1)); + --spectrum-menu-item-focus-margin: calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)); &.spectrum-Menu--sizeS { --spectrum-menu-item-min-height: var(--spectrum-component-height-75); @@ -180,6 +137,8 @@ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + --spectrum-menu-item-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); @@ -187,12 +146,29 @@ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); + --spectrum-menu-section-description-font-size: var(--spectrum-font-size-50); + --spectrum-menu-section-header-to-description: var(--spectrum-menu-section-header-to-description-small); + --spectrum-menu-item-label-to-description: var(--spectrum-menu-item-label-to-description-small); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --spectrum-menu-item-checkmark-height: var(--spectrum-checkmark-icon-size-75); + --spectrum-menu-item-checkmark-width: var(--spectrum-checkmark-icon-size-75); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --spectrum-menu-item-chevron-height: var(--spectrum-chevron-icon-size-75); + --spectrum-menu-item-chevron-width: var(--spectrum-chevron-icon-size-75); + + --spectrum-menu-item-linkout-icon-height: var(--spectrum-link-out-icon-size-75); + --spectrum-menu-item-linkout-icon-width: var(--spectrum-link-out-icon-size-75); + + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-400); + + --spectrum-menu-item-top-to-thumbnail: var(--spectrum-menu-item-top-to-thumbnail-small); + --spectrum-menu-item-thumbnail-to-label: var(--spectrum-text-to-visual-100); + --spectrum-menu-item-thumbnail-height: var(--spectrum-thumbnail-size-500); + --spectrum-menu-item-thumbnail-width: var(--spectrum-thumbnail-size-500); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); } @@ -207,6 +183,8 @@ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-menu-item-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); @@ -214,12 +192,29 @@ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); + --spectrum-menu-section-description-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-to-description: var(--spectrum-menu-section-header-to-description-large); + --spectrum-menu-item-label-to-description: var(--spectrum-menu-item-label-to-description-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-checkmark-icon-size-200); + --spectrum-menu-item-checkmark-width: var(--spectrum-checkmark-icon-size-200); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --spectrum-menu-item-chevron-height: var(--spectrum-chevron-icon-size-200); + --spectrum-menu-item-chevron-width: var(--spectrum-chevron-icon-size-200); + + --spectrum-menu-item-linkout-icon-height: var(--spectrum-link-out-icon-size-200); + --spectrum-menu-item-linkout-icon-width: var(--spectrum-link-out-icon-size-200); + + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-600); + + --spectrum-menu-item-top-to-thumbnail: var(--spectrum-menu-item-top-to-thumbnail-large); + --spectrum-menu-item-thumbnail-to-label: var(--spectrum-text-to-visual-300); + --spectrum-menu-item-thumbnail-height: var(--spectrum-thumbnail-size-800); + --spectrum-menu-item-thumbnail-width: var(--spectrum-thumbnail-size-800); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); } @@ -234,6 +229,8 @@ --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-menu-item-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); @@ -241,17 +238,30 @@ --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); + --spectrum-menu-section-description-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-to-description: var(--spectrum-menu-section-header-to-description-extra-large); + --spectrum-menu-item-label-to-description: var(--spectrum-menu-item-label-to-description-extra-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-checkmark-icon-size-300); + --spectrum-menu-item-checkmark-width: var(--spectrum-checkmark-icon-size-300); --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); - } + --spectrum-menu-item-chevron-height: var(--spectrum-chevron-icon-size-300); + --spectrum-menu-item-chevron-width: var(--spectrum-chevron-icon-size-300); + + --spectrum-menu-item-linkout-icon-height: var(--spectrum-link-out-icon-size-200); + --spectrum-menu-item-linkout-icon-width: var(--spectrum-link-out-icon-size-200); + + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-700); - &:dir(rtl) { - --spectrum-menu-item-focus-indicator-direction-scalar: -1; + --spectrum-menu-item-top-to-thumbnail: var(--spectrum-menu-item-top-to-thumbnail-extra-large); + --spectrum-menu-item-thumbnail-to-label: var(--spectrum-text-to-visual-400); + --spectrum-menu-item-thumbnail-height: var(--spectrum-thumbnail-size-900); + --spectrum-menu-item-thumbnail-width: var(--spectrum-thumbnail-size-900); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); } } @@ -270,6 +280,7 @@ --spectrum-menu-item-label-line-height: var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk)); --spectrum-menu-item-description-line-height: var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk)); --spectrum-menu-section-header-line-height: var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk)); + --spectrum-menu-section-description-line-height: var(--mod-menu-section-description-line-height-cjk, var(--spectrum-menu-section-description-line-height-cjk)); } /* Menus with "selectable" menu items. */ @@ -340,8 +351,8 @@ } .spectrum-Menu-chevron { - block-size: var(--spectrum-menu-item-checkmark-height); - inline-size: var(--spectrum-menu-item-checkmark-width); + block-size: var(--spectrum-menu-item-chevron-height); + inline-size: var(--spectrum-menu-item-chevron-width); /* Chevrons (aka collapsibles) have text or an icon directly next to them. */ margin-inline-end: var(--mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control)); @@ -364,13 +375,30 @@ .spectrum-Menu-itemIcon--workflowIcon { /* Always provide space at the end of a workflow icon. */ margin-inline-end: var(--mod-menu-item-label-text-to-visual, var(--spectrum-menu-item-label-text-to-visual)); + margin-block-start: calc(var(--mod-menu-item-top-to-workflow-icon, var(--spectrum-menu-item-top-to-workflow-icon)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); } - .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout) { block-size: var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height)); inline-size: var(--mod-menu-item-icon-width, var(--spectrum-menu-item-icon-width)); } + .spectrum-Menu-linkout { + block-size: var(--mod-menu-item-linkout-icon-height, var(--spectrum-menu-item-linkout-icon-height)); + inline-size: var(--mod-menu-item-linkout-icon-width, var(--spectrum-menu-item-linkout-icon-width)); + + /* Improve vertical alignment of linkout icon */ + /* TODO: revisit with #1194 when final icon available */ + display: block; + margin-block-start: calc(var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)) - var(--spectrum-menu-item-linkout-icon-height)); + } + + /* Improve vertical alignment of linkout icon */ + /* TODO: revisit with #1194 when final icon available */ + .spectrum-Menu-item:has(> .spectrum-Menu-itemIcon--workflowIcon) .spectrum-Menu-linkout { + margin-block-start: calc(var(--mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size)) - var(--mod-menu-item-icon-height, var(--spectrum-menu-item-icon-height) / 2)); + } + /* Presentational list items for sections and dividers. */ li:not(.spectrum-Menu-item, .spectrum-Menu-divider) { display: block; @@ -386,7 +414,7 @@ position: relative; align-items: center; - border-radius: var(--spectrum-menu-item-corner-radius); + border-radius: var(--mod-menu-item-corner-radius, var(--spectrum-menu-item-corner-radius)); box-sizing: border-box; @@ -400,23 +428,50 @@ padding-block-end: var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text)); padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); - margin: calc((var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width)) * var(--spectrum-menu-item-spacing-multiplier)); + margin: var(--spectrum-menu-item-focus-margin); text-decoration: none; display: grid; grid-template-areas: - ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . " - "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" - ". . . . descriptionArea . . . " - ". . . . submenuArea . . . "; + ". chevronAreaCollapsible . headingIconArea sectionHeadingArea . . . " + "selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn" + "selectedOverflow . . visualOverflow descriptionArea . . . " + ". . . . submenuArea . . . "; grid-template-columns: auto auto auto auto 1fr auto auto auto; grid-template-rows: 1fr auto; + /* Alignment adjustments if there's a thumbnail */ + &:has(> .spectrum-Menu-itemThumbnail) { + > .spectrum-Menu-itemCheckbox, + > .spectrum-Menu-checkmark, + > .spectrum-Menu-itemActions, + > .spectrum-Menu-itemValue, + > .spectrum-Menu-itemLabel { + align-self: center; + margin-block-start: 0; + } + + &:has(> .spectrum-Menu-itemDescription) { + /* Reduces perceived visual margin between label and description */ + > .spectrum-Menu-itemDescription { + align-self: start; + } + + /* Allows visual centering against the thumbnail */ + > .spectrum-Menu-itemCheckbox, + > .spectrum-Menu-checkmark { + grid-row-end: selectedOverflow; + } + } + } + .spectrum-Menu-itemCheckbox { + /* @passthrough start */ --mod-checkbox-top-to-text: 0; --mod-checkbox-text-to-control: 0; + /* @passthrough end */ min-block-size: 0; @@ -451,10 +506,9 @@ } } - &:focus, - &.is-focused { - background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-key-focus))); - outline: none; + &:focus-visible, + &.is-focus-visible { + background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-key-focus, var(--spectrum-menu-item-background-color-keyboard-focus))); > .spectrum-Menu-itemLabel { color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-focus, var(--spectrum-menu-item-label-content-color-focus))); @@ -472,7 +526,8 @@ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-focus, var(--spectrum-menu-item-value-color-focus))); } - > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), + .spectrum-Menu-linkout { fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-focus, var(--spectrum-menu-item-label-icon-color-focus))); } @@ -507,7 +562,8 @@ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-hover, var(--spectrum-menu-item-value-color-hover))); } - > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), + .spectrum-Menu-linkout { fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-hover, var(--spectrum-menu-item-label-icon-color-hover))); } @@ -526,6 +582,12 @@ &:active { background-color: var(--highcontrast-menu-item-background-color-focus, var(--mod-menu-item-background-color-down, var(--spectrum-menu-item-background-color-down))); + /* The perceived motion can be a bit jarring given the size/complexity of a menu item */ + @media (prefers-reduced-motion: no-preference) { + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down)); + } + > .spectrum-Menu-itemLabel { color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-content-color-down, var(--spectrum-menu-item-label-content-color-down))); } @@ -542,7 +604,8 @@ color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-value-color-down, var(--spectrum-menu-item-value-color-down))); } - > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark) { + > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), + .spectrum-Menu-linkout { fill: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); color: var(--highcontrast-menu-item-color-focus, var(--mod-menu-item-label-icon-color-down, var(--spectrum-menu-item-label-icon-color-down))); } @@ -561,8 +624,6 @@ /* Disabled menu items */ &.is-disabled, &[aria-disabled="true"] { - background-color: transparent; - .spectrum-Menu-itemLabel, .spectrum-Menu-sectionHeading, .spectrum-Menu-itemValue { @@ -578,6 +639,10 @@ fill: var(--highcontrast-menu-item-color-disabled, var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))); } + .spectrum-Menu-itemThumbnail { + opacity: var(--mod-menu-item-thumbnail-opacity-disabled, var(--spectrum-menu-item-thumbnail-opacity-disabled)); + } + &:hover { cursor: default; background-color: transparent; @@ -602,10 +667,8 @@ .spectrum-Menu-item:focus-visible, .spectrum-Menu-back:focus-visible { - box-shadow: var(--spectrum-menu-item-focus-indicator-shadow) var(--spectrum-menu-item-focus-indicator-border-width) 0 0 0 var(--spectrum-menu-item-focus-indicator-color-default); outline: var(--spectrum-menu-item-focus-indicator-width) var(--spectrum-menu-item-focus-indicator-outline-style) var(--spectrum-menu-item-focus-indicator-color-default); outline-offset: var(--spectrum-menu-item-focus-indicator-offset); - border-radius: var(--spectrum-menu-item-corner-radius); } .spectrum-Menu-itemSelection { @@ -653,6 +716,18 @@ padding-block-start: var(--mod-menu-section-header-top-edge-to-text, var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); padding-block-end: var(--mod-menu-section-header-bottom-edge-to-text, var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))); padding-inline: var(--mod-menu-item-label-inline-edge-to-content, var(--spectrum-menu-item-label-inline-edge-to-content)); + + /* Keep alignment with menu items */ + margin-inline: var(--spectrum-menu-item-focus-margin); +} + +.spectrum-Menu-sectionDescription { + display: block; + color: var(--mod-menu-section-description-color, var(--spectrum-menu-section-description-color)); + font-weight: var(--mod-menu-section-description-font-weight, var(--spectrum-menu-section-description-font-weight)); + line-height: var(--mod-menu-section-description-line-height, var(--spectrum-menu-section-description-line-height)); + font-size: var(--mod-menu-section-description-font-size, var(--spectrum-menu-section-description-font-size)); + margin-block-start: var(--mod-menu-section-header-to-description, var(--spectrum-menu-section-header-to-description)); } .spectrum-Menu-itemDescription { @@ -661,10 +736,25 @@ font-size: var(--mod-menu-item-description-font-size, var(--spectrum-menu-item-description-font-size)); hyphens: auto; overflow-wrap: break-word; - margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description-spacing)); + margin-block-start: var(--mod-menu-item-label-to-description-spacing, var(--spectrum-menu-item-label-to-description)); line-height: var(--mod-menu-item-description-line-height, var(--spectrum-menu-item-description-line-height)); } +.spectrum-Menu-itemThumbnail { + grid-area: iconArea; + display: inline-block; + block-size: var(--mod-menu-item-thumbnail-height, var(--spectrum-menu-item-thumbnail-height)); + inline-size: var(--mod-menu-item-thumbnail-width, var(--spectrum-menu-item-thumbnail-width)); + margin-block-start: calc(var(--mod-menu-item-top-to-thumbnail, var(--spectrum-menu-item-top-to-thumbnail)) - var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))); + margin-inline-end: var(--mod-menu-item-thumbnail-to-label, var(--spectrum-menu-item-thumbnail-to-label)); + + /* Span two rows to properly align to description when present */ + .spectrum-Menu-item:has(> &):has(> .spectrum-Menu-itemDescription) & { + grid-row-end: visualOverflow; + align-self: center; + } +} + .spectrum-Menu-itemLabel--truncate { text-overflow: ellipsis; white-space: nowrap; @@ -696,7 +786,7 @@ &.is-open:active, &.is-open:focus, &.is-open.is-focused { - background-color: var(--highcontrast-menu-item-background-color-default, var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))); + background-color: transparent; } .spectrum-Menu-itemIcon { @@ -821,3 +911,65 @@ font-weight: var(--mod-menu-section-header-font-weight, var(--spectrum-menu-section-header-font-weight)); line-height: var(--mod-menu-section-header-line-height, var(--spectrum-menu-section-header-line-height)); } + +@media (forced-colors: active) { + .spectrum-Menu { + --highcontrast-menu-item-background-color-default: ButtonFace; + --highcontrast-menu-item-color-default: ButtonText; + + --highcontrast-menu-item-background-color-focus: Highlight; + --highcontrast-menu-item-color-focus: HighlightText; + + --highcontrast-menu-checkmark-icon-color-default: Highlight; + + --highcontrast-menu-item-color-disabled: GrayText; + --highcontrast-menu-item-focus-indicator-color: Highlight; + + --highcontrast-menu-item-selected-background-color: Highlight; + --highcontrast-menu-item-selected-color: HighlightText; + + @supports (color: SelectedItem) { + --highcontrast-menu-item-selected-background-color: SelectedItem; + --highcontrast-menu-item-selected-color: SelectedItemText; + } + + .spectrum-Menu-item { + /* Hide unstylable readability backplates. */ + forced-color-adjust: none; + } + + .spectrum-Menu-item:hover, + .spectrum-Menu-item:focus { + .spectrum-Menu-itemCheckbox { + /* @passthrough start */ + --highcontrast-checkbox-highlight-color-hover: ButtonText; + --highcontrast-checkbox-highlight-color-default: ButtonText; + /* @passthrough end */ + } + + .spectrum-Menu-itemSwitch { + /* @passthrough start */ + --highcontrast-switch-handle-border-color-hover: ButtonText; + --highcontrast-switch-handle-border-color-selected-default: ButtonText; + --highcontrast-switch-handle-border-color-selected-hover: ButtonText; + --highcontrast-switch-background-color-selected-default: ButtonText; + --highcontrast-switch-background-color-selected-hover: ButtonText; + /* @passthrough end */ + } + } + + .spectrum-Menu-item--drillIn.is-open { + --highcontrast-menu-item-background-color-default: var(--highcontrast-menu-item-selected-background-color); + --highcontrast-menu-item-color-default: var(--highcontrast-menu-item-selected-color); + } + + .spectrum-Menu-item--collapsible.is-open { + &:hover, + &:active, + &:focus, + &.is-focused { + --highcontrast-menu-item-color-focus: var(--highcontrast-menu-item-color-default); + } + } + } +} diff --git a/components/menu/package.json b/components/menu/package.json index 7ca351b9df0..638a2ebed93 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/menu", - "version": "9.2.0", + "version": "10.0.0-next.3", "description": "The Spectrum CSS menu component", "license": "Apache-2.0", "author": "Adobe", @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/switch": ">=6.0.0 <7.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/tray": ">=5.0.0 <6.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/divider": ">=6.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/switch": ">=7.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0", + "@spectrum-css/tray": ">=6.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -53,12 +53,12 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.2", - "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/switch": "6.1.0", - "@spectrum-css/tokens": "16.0.2", - "@spectrum-css/tray": "5.1.0" + "@spectrum-css/checkbox": "11.0.0-next.2", + "@spectrum-css/divider": "6.0.0-next.1", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/switch": "7.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5", + "@spectrum-css/tray": "6.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 23f82bfd300..ccd6d346ee6 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -1,5 +1,5 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isSelected, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -86,9 +86,19 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=37252-553", }, + downState: { + selectors: [".spectrum-Menu-item:not(.is-disabled)"], + }, packageJson, metadata, + status: { + type: "migrated", + } }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = MenuWithVariants.bind({}); @@ -105,7 +115,7 @@ Default.args = { items: [ { label: "Default menu item", - iconName: "Export" + iconName: "Comment" }, { label: "Focused menu item", @@ -114,12 +124,24 @@ Default.args = { isActive: true, }, { - label: "A menu item with a longer label that causes the text to wrap to the next line", - iconName: "Send", + label: "A menu item with a longer label that causes the text to wrap to the next line" }, { label: "Menu item with no icon", }, + { + label: "Menu item as external link", + hasExternalLink: true, + }, + { + label: "Menu item as external link with icon", + hasExternalLink: true, + iconName: "Data" + }, + { + label: "Menu item with a thumbnail", + thumbnailUrl: "thumbnail.png" + }, { label: "Disabled menu item", iconName: "Share", @@ -131,6 +153,7 @@ Default.args = { { idx: 2, heading: "Menu header - With descriptions and icons", + sectionDescription: "This menu header also has a description", id: "menu-heading-short-desc", items: [ { @@ -142,6 +165,17 @@ Default.args = { description: "This item is checked if single-select or multi-select mode is turned on", isSelected: true, }, + { + label: "Selected item with thumbnail", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, + { + label: "Selected item with thumbnail", + description: "This item is checked if single-select or multi-select mode is turned on", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, { label: "Selected item with icon", iconName: "Cloud", @@ -153,7 +187,8 @@ Default.args = { { type: "divider" }, { idx: 3, - heading: "Menu header - With actions, icons, short descriptions, and values and longer header text that wraps", + heading: "Menu header - With actions, icons, thumbnails, short descriptions, and values and longer header text that wraps", + sectionDescription: "This menu header also has a description that is long enough to hopefully just maybe wrap if it's long enough", id: "menu-heading-desc-icon-value", hasActions: true, items: [ @@ -175,11 +210,33 @@ Default.args = { value: "⌘ C", }, { - label: "Disabled menu item with action", - iconName: "Archive", - description: "Disabled menu item with description and icon", + label: "Disabled menu item with thumbnail", + description: "Disabled menu item with description and thumbnail", isDisabled: true, + thumbnailUrl: "thumbnail.png", + }, + { + label: "Menu item with thumbnail and value", + value: "⌘ C", + thumbnailUrl: "thumbnail.png", + }, + { + label: "Menu item with thumbnail and value", + description: "And a description, too", + value: "⌘ C", + thumbnailUrl: "thumbnail.png", }, + { + label: "Menu item with external link action", + description: "Menu item with external link action (does not work in multi-select mode)", + hasExternalLink: true, + }, + { + label: "Disabled menu item with external link action", + description: "Menu item with external link action (does not work in multi-select mode)", + hasExternalLink: true, + isDisabled: true, + } ], }, { @@ -267,6 +324,11 @@ MenuItem.argTypes = { isSelected: { ...isSelected, description: "Used with single or multi-select mode turned on", + if: { arg: "selectionMode", neq: "none" }, + table: { + type: { summary: "boolean" }, + category: "Selection", + }, }, label: { name: "Label", @@ -296,7 +358,7 @@ MenuItem.argTypes = { }, iconName: { ...(IconStories?.argTypes?.iconName ?? {}), - if: false, + if: { arg: "hasThumbnail", truthy: false }, }, hasActions: { name: "Has switches", @@ -309,13 +371,43 @@ MenuItem.argTypes = { control: "boolean", if: { arg: "selectionMode", eq: "multiple" }, }, + hasExternalLink: { + name: "Has external link", + description: "Has external link action", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: "boolean", + }, + hasThumbnail: { + name: "Has thumbnail", + description: "Displays a thumbnail in the label", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: "boolean" + }, + isDrillIn: { + name: "Is drill-in", + description: "Displays drill-in menu indicator", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: "boolean" + }, // These settings are not used in the MenuItem story hasDividers: { table: { disable: true } }, isTraySubmenu: { table: { disable: true } }, }; MenuItem.args = { label: "Start a chat", - iconName: "Chat", + iconName: "Comment", description: "Menu item description", value: "⌘ N", isDisabled: false, @@ -324,6 +416,9 @@ MenuItem.args = { isHovered: false, isSelected: false, hasActions: false, + hasExternalLink: false, + hasThumbnail: false, + isDrillIn: false, }; MenuItem.parameters = { design: { @@ -353,7 +448,7 @@ Collapsible.args = { items: [ { label: "Web Design", - iconName: "DesktopAndMobile", + iconName: "DeviceMultiscreen", isCollapsible: true, isOpen: true, items: [ @@ -408,7 +503,7 @@ Collapsible.args = { }, { label: "Watches", - iconName: "Watch", + iconName: "Clock", isCollapsible: true, items: [ { label: "Defaults to not visible within closed item" }, @@ -463,6 +558,23 @@ Sizing.args = { description: "Short description of menu item", iconName: "Cloud", }, + { + idx: 6, + label: "Menu item as external link", + hasExternalLink: true + }, + { + idx: 7, + label: "Menu item with thumbnail", + value: "Value", + thumbnailUrl: "thumbnail.png" + }, + { + idx: 8, + label: "Menu item with thumbnail", + description: "and description", + thumbnailUrl: "thumbnail.png" + }, ] }; Sizing.parameters = { @@ -548,7 +660,7 @@ TextOverflow.parameters = { }; TextOverflow.args = { customStyles: { - "max-inline-size": "150px", + "max-inline-size": "175px", } }; @@ -578,7 +690,7 @@ WithDividers.args = { /** * Use a section header when a menu section requires a descriptor. Section headers are helpful when two or more - * sections differ in their functionality or relationships. + * sections differ in their functionality or relationships. Section headers can also include an optional description. */ export const WithDividersAndHeaders = Template.bind({}); WithDividersAndHeaders.storyName = "Sections with dividers and headers"; @@ -599,15 +711,15 @@ WithDividersAndHeaders.args = { { label: "Marquee", isSelected: true, - iconName: "Selection", + iconName: "SelectRectangle", }, { label: "Add", - iconName: "SelectAdd", + iconName: "SelectMulti", }, { label: "Subtract", - iconName: "SelectSubtract", + iconName: "SelectNone", }, ] }, @@ -615,12 +727,13 @@ WithDividersAndHeaders.args = { { idx: 2, heading: "Actions", + sectionDescription:"With an optional description", id: "menu-actions", selectionMode: "single", items: [ { label: "Deselect", - iconName: "Deselect", + iconName: "SelectNo", isDisabled: true, } ] diff --git a/components/menu/stories/menu.test.js b/components/menu/stories/menu.test.js index 9c4cc39382c..71165c3c568 100644 --- a/components/menu/stories/menu.test.js +++ b/components/menu/stories/menu.test.js @@ -35,7 +35,7 @@ export const MenuWithVariants = Variants({ items: [ { label: "Web Design", - iconName: "DesktopAndMobile", + iconName: "DeviceMultiscreen", iconSet: "workflow", isCollapsible: true, isOpen: true, @@ -89,7 +89,7 @@ export const MenuWithVariants = Variants({ }, { label: "Watches and longer truncated label that is really really much longer", - iconName: "Watch", + iconName: "Clock", iconSet: "workflow", isCollapsible: true, items: [{ label: "Defaults to not visible within closed item" }], @@ -116,6 +116,7 @@ export const MenuItemGroup = Variants({ { ...args, rootClass: "spectrum-Menu-item", + thumbnailUrl: (args.hasThumbnail && "thumbnail.png") || args.thumbnailUrl, }, context, )} @@ -129,9 +130,18 @@ export const MenuItemGroup = Variants({ testHeading: "No selection", description: undefined, }, + { + testHeading: "No selection, with thumbnails", + description: undefined, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "No selection, with description", }, + { + testHeading: "No selection, with thumbnails, description", + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Single selection: selected", description: undefined, @@ -139,6 +149,14 @@ export const MenuItemGroup = Variants({ selectionMode: "single", isSelected: true, }, + { + testHeading: "Single selection with thumbnails: selected", + description: undefined, + value: undefined, + selectionMode: "single", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Single selection: unselected", description: undefined, @@ -148,6 +166,16 @@ export const MenuItemGroup = Variants({ iconName: "Share", iconSet: "workflow", }, + { + testHeading: "Single selection with thumbnails: unselected", + description: undefined, + value: undefined, + selectionMode: "single", + label: "Share", + iconName: "Share", + iconSet: "workflow", + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Multi-selection: selected", description: undefined, @@ -155,6 +183,14 @@ export const MenuItemGroup = Variants({ selectionMode: "multiple", isSelected: true, }, + { + testHeading: "Multi-selection with thumbnails: selected", + description: undefined, + value: undefined, + selectionMode: "multiple", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Multi-selection: unselected", selectionMode: "multiple", @@ -162,6 +198,14 @@ export const MenuItemGroup = Variants({ iconName: "Share", iconSet: "workflow", }, + { + testHeading: "Multi-selection with thumbnails: unselected", + selectionMode: "multiple", + label: "Share", + iconName: "Share", + iconSet: "workflow", + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Multi-selection: unselected switches", selectionMode: "multiple", @@ -169,6 +213,14 @@ export const MenuItemGroup = Variants({ value: undefined, description: undefined, }, + { + testHeading: "Multi-selection with thumbnails: unselected switches", + selectionMode: "multiple", + hasActions: true, + value: undefined, + description: undefined, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Multi-selection: selected switches", selectionMode: "multiple", @@ -177,16 +229,37 @@ export const MenuItemGroup = Variants({ description: undefined, isSelected: true, }, + { + testHeading: "Multi-selection with thumbnails: selected switches", + selectionMode: "multiple", + hasActions: true, + value: undefined, + description: undefined, + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Multi-selection: switches + labels", selectionMode: "multiple", hasActions: true, label: "Menu item", }, + { + testHeading: "Multi-selection with thumbnails: switches + labels", + selectionMode: "multiple", + hasActions: true, + label: "Menu item", + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Drill-in", isDrillIn: true, }, + { + testHeading: "Drill-in with thumbnails", + isDrillIn: true, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Truncation", description: "Description will wrap", @@ -197,6 +270,17 @@ export const MenuItemGroup = Variants({ "inline-size": "150px", }, }, + { + testHeading: "Truncation with thumbnails", + description: "Description will wrap", + label: "Longer label will truncate", + shouldTruncate: true, + value: undefined, + customStyles: { + "inline-size": "175px", + }, + thumbnailUrl: "thumbnail.png" + }, { testHeading: "Text wrapping", description: "Description will wrap", @@ -205,6 +289,16 @@ export const MenuItemGroup = Variants({ customStyles: { "inline-size": "150px", }, + }, + { + testHeading: "Text wrapping with thumbnails", + description: "Description will wrap", + label: "Longer label will always wrap", + value: undefined, + customStyles: { + "inline-size": "175px", + }, + thumbnailUrl: "thumbnail.png" } ], stateData: [ @@ -232,11 +326,12 @@ export const MenuItemGroup = Variants({ { testHeading: "Without icon", iconName: undefined, + include: ["No selection", "No selection, with description", "Single selection: selected", "Single selection: unselected", "Multi-selection: selected", "Multi-selection: unselected", "Multi-selection: unselected switches", "Multi-selection: selected switches", "Multi-selection: switches + labels", "Drill-in", "Truncation", "Text wrapping"], }, { testHeading: "Without value", value: undefined, - include: ["No selection", "No selection, with description", "Multi-selection: unselected", "Multi-selection: switches + labels", "Drill-in"], + include: ["No selection", "No selection, with thumbnails", "No selection, with description", "No selection, with thumbnails, description", "Multi-selection: unselected", "Multi-selection with thumbnails: unselected", "Multi-selection: switches + labels", "Multi-selection with thumbnails: switches + labels", "Drill-in", "Drill-in with thumbnails"], }, { testHeading: "Without value or icon", @@ -247,13 +342,13 @@ export const MenuItemGroup = Variants({ { testHeading: "With value", value: "⌘ N", - include: ["Truncation", "Text wrapping"], + include: ["Truncation", "Truncation with thumbnails", "Text wrapping", "Text wrapping with thumbnails"], }, { testHeading: "With multi-select switch", selectionMode: "multiple", hasActions: true, - include: ["Truncation", "Text wrapping"], + include: ["Truncation", "Truncation with thumbnails", "Text wrapping", "Text wrapping with thumbnails"], }, { testHeading: "With value and multi-select switch", @@ -265,8 +360,26 @@ export const MenuItemGroup = Variants({ { testHeading: "Without description", description: undefined, - include: ["Drill-in", "Truncation", "Text wrapping"], + include: ["Drill-in", "Drill-in with thumbnails", "Truncation", "Truncation with thumbnails", "Text wrapping", "Text wrapping with thumbnails"], }, + { + testHeading: "External link", + hasExternalLink: true, + include: ["No selection", "No selection, with thumbnails", "No selection, with description", "No selection, with thumbnails, description", "Truncation", "Truncation with thumbnails", "Text wrapping", "Text wrapping with thumbnails"] + }, + { + testHeading: "External link without value", + hasExternalLink: true, + value: undefined, + include: ["No selection", "No selection, with thumbnails", "No selection, with description", "No selection, with thumbnails, description"] + }, + { + testHeading: "External link without value, icon", + hasExternalLink: true, + value: undefined, + iconName: undefined, + include: ["No selection", "No selection, with description", "Truncation", "Text wrapping"] + } // { // testHeading: "Highlighted", // isHighlighted: true, diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index c50482cb696..d77847e629f 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -3,9 +3,11 @@ import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; -import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { Template as Switch } from "@spectrum-css/switch/stories/template.js"; +import { Template as Thumbnail } from "@spectrum-css/thumbnail/stories/template.js"; import { Template as Tray } from "@spectrum-css/tray/stories/template.js"; + +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -13,33 +15,224 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** - * Get the tray submenu back arrow name with scale number (defined in design spec). + * Get icon name with scale number (defined in design spec). */ const iconWithScale = (size = "m", iconName = "ArrowLeft") => { switch (size) { case "s": - return `${iconName}200`; + return `${iconName}75`; case "l": - return `${iconName}400`; + return `${iconName}200`; case "xl": - return `${iconName}500`; - default: return `${iconName}300`; + default: + return `${iconName}100`; } }; +const Label = ({ + hasActions = false, + isCollapsible = false, + label, + rootClass, + shouldTruncate = false, +}) => { + if (isCollapsible) { + return html` + ${label} + `; + } + else { + return html` + ${label} + `; + } +}; + +const Visual = ({ + iconName, + iconSet, + rootClass, + size, + thumbnailUrl +}) => { + if (thumbnailUrl) { + return html` + ${Thumbnail({ + imageURL: thumbnailUrl, + altText: "Thumbnail alt text", + size, + customClasses: [`${rootClass}Thumbnail`], + })} + `; + } + else if (iconName) { + return html` + ${Icon({ + iconName, + setName: iconSet, + size, + customClasses: [ + `${rootClass}Icon`, + `${rootClass}Icon--workflowIcon` + ] + })} + `; + } + return; +}; + +const StartAction = ({ + hasActions, + idx, + isCollapsible, + isDisabled, + isSelected, + rootClass, + selectionMode, + size, + context +}) => { + if (isCollapsible || (selectionMode == "single" && isSelected)) { + return html` + ${Icon( + { + iconName: iconWithScale( + size, + isCollapsible ? "ChevronRight" : "Checkmark", + ), + setName: "ui", + useRef: false, + size, + customClasses: [ + `${rootClass}Icon`, + isCollapsible ? "spectrum-Menu-chevron" : "spectrum-Menu-checkmark", + ], + }, + context, + )} + `; + } + else if (selectionMode == "multiple" && !hasActions) { + return html` + ${Checkbox({ + size, + isChecked: isSelected, + isDisabled, + id: `menu-checkbox-${idx}`, + customClasses: [`${rootClass}Checkbox`], + }, + context)}`; + } + return null; +}; + +const EndAction = ({ + hasExternalLink, + hasActions, + idx, + isDisabled, + isDrillIn, + isSelected, + rootClass, + selectionMode, + size, + value, + context +}) => html` + ${when(value, () => html` + + ${value} + + `)} + + ${when( + hasActions && selectionMode == "multiple", + () => html` +
+ ${Switch({ + size, + isChecked: isSelected, + isDisabled, + label: null, + id: `menu-switch-${idx}`, + customClasses: [`${rootClass}Switch`], + }, + context)} +
` + )} + + ${when( + hasExternalLink && !(hasActions && selectionMode === "multiple"), + () => html`
+ ${Icon({ + // TODO: Update name once available in "UI" icon set #1194 + iconName: "ExportTo", + size, + customClasses: [ + `${rootClass}Icon`, + "spectrum-Menu-linkout", + ], + }, + context)} +
` + )} + + ${when(isDrillIn, () => + Icon( + { + iconName: iconWithScale(size, "ChevronRight"), + setName: "ui", + useRef: false, + size, + customClasses: [`${rootClass}Icon`, "spectrum-Menu-chevron"], + }, + context, + ), + )} +`; + +const Description = ({ + description, + rootClass +}) => html` + + ${description} + +`; + export const MenuItem = ( { rootClass = "spectrum-Menu-item", label, description, + thumbnailUrl = "", iconName, iconSet = "workflow", + hasExternalLink = false, hasActions = false, id = getRandomId("menuitem"), idx = 0, @@ -84,130 +277,11 @@ export const MenuItem = ( aria-disabled=${isDisabled ? "true" : "false"} tabindex=${ifDefined(!isDisabled ? "0" : undefined)} > - ${when(isCollapsible || (selectionMode == "single" && isSelected), () => - Icon( - { - iconName: iconWithScale( - size, - isCollapsible ? "ChevronRight" : "Checkmark", - ), - setName: "ui", - useRef: false, - size, - customClasses: [ - `${rootClass}Icon`, - isCollapsible ? "spectrum-Menu-chevron" : "spectrum-Menu-checkmark", - ], - }, - context, - ), - )} - ${when(selectionMode === "multiple" && !hasActions, () => - Checkbox( - { - size, - isEmphasized: true, - isChecked: isSelected, - isDisabled, - id: `menu-checkbox-${idx}`, - customClasses: [`${rootClass}Checkbox`], - }, - context, - ), - )} - ${when(iconName, () => - Icon( - { - iconName, - setName: iconSet, - size, - customClasses: [`${rootClass}Icon`, `${rootClass}Icon--workflowIcon`], - }, - context, - ), - )} - ${when( - isCollapsible, - () => html` - - ${label} - - `, - () => html` - - ${label} - - `, - )} - ${when( - description, - () => html` - - ${description} - - `, - )} - ${when( - value, - () => html` - - ${value} - - `, - )} - ${when( - hasActions && selectionMode == "multiple", - () => html` -
- ${Switch( - { - size, - isChecked: isSelected, - isDisabled, - label: null, - id: `menu-switch-${idx}`, - customClasses: [`${rootClass}Switch`], - }, - context, - )} -
- `, - )} - ${when(isDrillIn, () => - Icon( - { - iconName: iconWithScale(size, "ChevronRight"), - setName: "ui", - useRef: false, - size, - customClasses: [`${rootClass}Icon`, "spectrum-Menu-chevron"], - }, - context, - ), - )} + ${StartAction({ hasActions, idx, isCollapsible, isDisabled, isSelected, rootClass, selectionMode, size, context })} + ${Visual({ iconName, iconSet, rootClass, size, thumbnailUrl })} + ${Label({ hasActions, isCollapsible, label, rootClass, shouldTruncate })} + ${when(description, () => Description({ description, rootClass }))} + ${EndAction({ hasExternalLink, hasActions, idx, isDisabled, isDrillIn, isSelected, rootClass, selectionMode, size, value, context })} ${when(isCollapsible && items.length > 0, () => Template( { @@ -233,6 +307,7 @@ export const MenuGroup = ( isSelectable = false, isTraySubmenu = false, shouldTruncate = false, + sectionDescription, subrole = "menuitem", size = "m", selectionMode = "none", @@ -253,6 +328,14 @@ export const MenuGroup = ( aria-hidden="true" > ${heading} + `, () => html` @@ -269,7 +352,12 @@ export const MenuGroup = ( > ${Icon( { - iconName: iconWithScale(size), + iconName: "ArrowRight" + ({ + s: "100", + m: "100", + l: "400", + xl: "400", + }[size] || "100"), setName: "ui", size, customClasses: ["spectrum-Menu-backIcon"], @@ -290,6 +378,14 @@ export const MenuGroup = ( aria-hidden="true" > ${heading} + `, )} @@ -306,7 +402,7 @@ export const MenuGroup = ( isDisabled, isSelectable, selectionMode, - shouldTruncate: true, + shouldTruncate, size, }, context, @@ -322,6 +418,7 @@ export const Template = ( id = getRandomId("menu"), hasActions = false, hasDividers = false, + hasThumbnail = false, isDisabled = false, isOpen = false, isTraySubmenu = false, @@ -330,7 +427,7 @@ export const Template = ( role = "menu", selectionMode = "none", singleItemValue, - shouldTruncate, + shouldTruncate = false, size = "m", subrole = "menuitem", } = {}, @@ -351,7 +448,10 @@ export const Template = ( role=${ifDefined(role)} aria-labelledby=${ifDefined(labelledby)} aria-disabled=${isDisabled ? "true" : "false"} - style=${styleMap(customStyles)} + style=${styleMap({ + ...customStyles, + ...(shouldTruncate ? { "max-inline-size": "100%" } : {}) + })} > ${items.map((i, idx) => { if (i.type === "divider") @@ -386,6 +486,7 @@ export const Template = ( selectionMode, shouldTruncate, size, + thumbnailUrl: (hasThumbnail && "thumbnail.png") || i.thumbnailUrl, value: singleItemValue || i.value, }, context, @@ -448,7 +549,7 @@ export const DisabledItemGroup = (args, context) => { { label: "Quick export", description: "Share a snapshot", - iconName: "Export", + iconName: "ExportTo", }, { label: "Open a copy", @@ -476,7 +577,7 @@ export const DisabledItemGroup = (args, context) => { context, shouldTruncate: group.shouldTruncate || false, items: group.items, - })} + }, context)} ` }, context)} `) @@ -556,7 +657,7 @@ export const OverflowGroup = (args, context) => { items: [ { label: "Quick export truncated text", - iconName: "Export", + iconName: "ExportTo", description: "Share a low-res snapshot", }, { @@ -567,7 +668,7 @@ export const OverflowGroup = (args, context) => { }, { label: "Preview timelapse truncated text", - iconName: "Pending", + iconName: "Preview", value: "Value", } ] @@ -585,11 +686,14 @@ export const OverflowGroup = (args, context) => { context, shouldTruncate: group.shouldTruncate || false, items: group.items, - })} - ` - })} + }, context)} + `, + wrapperStyles: { + "max-inline-size": "200px", + }, + }, context)} `) - }); + }, context); }; export const SelectionGroup = (args, context) => { @@ -618,6 +722,25 @@ export const SelectionGroup = (args, context) => { } ], }, + { + heading: "Single selection with thumbnails", + selectionMode: "single", + items: [ + { + label: "Preview 1", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, + { + label: "Preview 2", + thumbnailUrl: "flowers.png" + }, + { + label: "Preview 3", + thumbnailUrl: "example-ava.png" + } + ], + }, { heading: "Multiple selection with checkboxes", selectionMode: "multiple", @@ -640,16 +763,35 @@ export const SelectionGroup = (args, context) => { items: [ { label: "Marquee", - iconName: "Selection", + iconName: "SelectRectangle", isSelected: true, }, { label: "Add", - iconName: "SelectAdd", + iconName: "SelectMulti", }, { label: "Subtract", - iconName: "SelectSubtract", + iconName: "SelectNone", + } + ], + }, + { + heading: "Multiple selection with thumbnails", + selectionMode: "multiple", + items: [ + { + label: "Preview 1", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, + { + label: "Preview 2", + thumbnailUrl: "flowers.png" + }, + { + label: "Preview 3", + thumbnailUrl: "example-ava.png" } ], }, @@ -678,16 +820,36 @@ export const SelectionGroup = (args, context) => { items: [ { label: "Marquee", - iconName: "Selection", + iconName: "SelectRectangle", isSelected: true, }, { label: "Add", - iconName: "SelectAdd", + iconName: "SelectMulti", }, { label: "Subtract", - iconName: "SelectSubtract", + iconName: "SelectNone", + } + ], + }, + { + heading: "Multiple selection with switches and thumbnails", + selectionMode: "multiple", + hasActions: true, + items: [ + { + label: "Preview 1", + isSelected: true, + thumbnailUrl: "thumbnail.png" + }, + { + label: "Preview 2", + thumbnailUrl: "flowers.png" + }, + { + label: "Preview 3", + thumbnailUrl: "example-ava.png" } ], }, @@ -703,16 +865,16 @@ export const SelectionGroup = (args, context) => { selectionMode: group.selectionMode || "none", hasActions: group.hasActions || false, items: group.items, - }) + }, context) }, context)) }); }; -export const SubmenuInPopover = (context) => Popover({ +export const SubmenuInPopover = (args, context) => Popover({ isOpen: true, position: "end-top", customStyles: { - "inline-size": "200px", + "inline-size": "202px", }, trigger: (args, context) => ActionButton({ label: "Settings", @@ -720,7 +882,8 @@ export const SubmenuInPopover = (context) => Popover({ ...args, }, context), content: [ - (args, context) => Template({ + Template({ + ...args, items: [ { label: "Language", @@ -735,17 +898,18 @@ export const SubmenuInPopover = (context) => Popover({ label: "Show grid", } ], - ...args }, context), - (args, context) => Popover({ + Popover({ isOpen: true, position: "end-top", customStyles: { - top: "-120px", + top: "-110px", "inline-size": "120px", + "inset-inline-start": "calc(100% - 10px)" }, content: [ - (args, context) => Template({ + Template({ + ...args, selectionMode: "single", items: [ { @@ -768,10 +932,8 @@ export const SubmenuInPopover = (context) => Popover({ label: "日本語", } ], - ...args, }, context) ], - ...args, }, context) ], }, context); diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/menu/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css deleted file mode 100644 index 11951a42550..00000000000 --- a/components/menu/themes/spectrum-two.css +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: none; - --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); - --spectrum-menu-item-spacing-multiplier: 1; - --spectrum-menu-item-focus-indicator-outline-style: solid; - } -} diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css deleted file mode 100644 index 0836ce0774f..00000000000 --- a/components/menu/themes/spectrum.css +++ /dev/null @@ -1,32 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: 0; - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: inset; - --spectrum-menu-item-focus-indicator-offset: 0; - --spectrum-menu-item-spacing-multiplier: 0; - --spectrum-menu-item-focus-indicator-outline-style: none; - } -} diff --git a/components/meter/CHANGELOG.md b/components/meter/CHANGELOG.md index 312da9fb01b..4b683653f59 100644 --- a/components/meter/CHANGELOG.md +++ b/components/meter/CHANGELOG.md @@ -1,5 +1,38 @@ # Change Log +## 2.0.0-next.2 + +### Minor Changes + +- [#3908](https://github.com/adobe/spectrum-css/pull/3908) [`7971c77`](https://github.com/adobe/spectrum-css/commit/7971c7728b88e5e539b9d0974ab805d9ef6338fd) Thanks [@cdransf](https://github.com/cdransf)! + +Adjust progressbar styles, story and template to support proper width token and sizes for medium (desktop) and large (mobile) platforms. + +- Progress bar and meter now use the same tokens to control their width. +- Progress bar and meter now have a set width regardless of t-shirt size. + +#### Removed modifiers + +`--mod-meter-inline-size` + +#### New modifiers + +`--mod-progressbar-inline-size` + +## 2.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 2.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/progressbar@7.0.0-next.0 + ## 1.1.0 ### Minor Changes diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 9bfe3424ce7..53ce94ace9a 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -2,41 +2,38 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Meter", + ".spectrum-Meter .spectrum-ProgressBar-helptext", ".spectrum-Meter.is-negative", ".spectrum-Meter.is-notice", ".spectrum-Meter.is-positive", ".spectrum-Meter.spectrum-Meter--sizeL", - ".spectrum-Meter.spectrum-Meter--sizeS" + ".spectrum-Meter.spectrum-Meter--sizeS", + ".spectrum-Meter.spectrum-Meter--sizeXL" ], "modifiers": [ - "--mod-meter-inline-size", + "--mod-meter-help-text-to-progress-bar", "--mod-meter-max-width", "--mod-meter-min-width" ], "component": [ - "--spectrum-meter-default-width", + "--spectrum-meter-help-text-to-progress-bar", "--spectrum-meter-maximum-width", "--spectrum-meter-minimum-width", + "--spectrum-meter-thickness-extra-large", "--spectrum-meter-thickness-large", + "--spectrum-meter-thickness-medium", "--spectrum-meter-thickness-small" ], "global": [ - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-75", - "--spectrum-font-size-100", - "--spectrum-font-size-75", "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color" + "--spectrum-positive-visual-color", + "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [ "--mod-progressbar-fill-color", - "--mod-progressbar-font-size", "--mod-progressbar-max-size", "--mod-progressbar-min-size", - "--mod-progressbar-size-default", - "--mod-progressbar-spacing-top-to-text", "--mod-progressbar-thickness" ], "high-contrast": [] diff --git a/components/meter/index.css b/components/meter/index.css index b51a393aa73..fb552428a38 100644 --- a/components/meter/index.css +++ b/components/meter/index.css @@ -13,21 +13,21 @@ /* @passthrough start */ .spectrum-Meter { - --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-default-width)); --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width)); --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width)); + --spectrum-meter-help-text-to-progress-bar: var(--spectrum-spacing-75); + --mod-progressbar-thickness: var(--spectrum-meter-thickness-medium); - &, &.spectrum-Meter--sizeS { --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); - --mod-progressbar-font-size: var(--spectrum-font-size-75); - --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } &.spectrum-Meter--sizeL { --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); - --mod-progressbar-font-size: var(--spectrum-font-size-100); - --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); + } + + &.spectrum-Meter--sizeXL { + --mod-progressbar-thickness: var(--spectrum-meter-thickness-extra-large); } &.is-positive { @@ -41,5 +41,9 @@ &.is-negative { --mod-progressbar-fill-color: var(--spectrum-negative-visual-color); } + + .spectrum-ProgressBar-helptext { + margin-block-start: var(--mod-meter-help-text-to-progress-bar, var(--spectrum-meter-help-text-to-progress-bar)); + } } /* @passthrough end */ diff --git a/components/meter/package.json b/components/meter/package.json index 38e066e4c40..9f6f8b97fad 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/meter", - "version": "1.1.0", + "version": "2.0.0-next.2", "description": "The Spectrum CSS meter component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/progressbar": ">=6.0.0 <7.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/progressbar": ">=7.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/progressbar": { @@ -37,8 +37,8 @@ } }, "devDependencies": { - "@spectrum-css/progressbar": "6.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/progressbar": "7.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js index 15603bc9d7c..f86cbad0dcd 100644 --- a/components/meter/stories/meter.stories.js +++ b/components/meter/stories/meter.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { size } from "@spectrum-css/preview/types"; +import { size, staticColor } from "@spectrum-css/preview/types"; import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -8,7 +8,7 @@ import { MeterGroup } from "./meter.test.js"; import { FillGroup, Template } from "./template.js"; /** - * The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions. + * The meter component is a visual representation of a quantity or an achievement. The progress is determined by user actions, rather than system actions. * * Meter is implemented using [the progress bar component](/docs/components-progress-bar--docs). Refer to the progress bar documentation for additional details. * @@ -19,7 +19,7 @@ export default { component: "Meter", argTypes: { ...ProgressBar.argTypes, - size: size(["s", "l"]), + size: size(["s", "m", "l", "xl"]), isIndeterminate: { table: { disable: true } }, fill: { name: "Fill color", @@ -33,12 +33,23 @@ export default { options: ["info", "notice", "positive", "negative"], control: "select", }, + helpText: { + name: "Help text", + type: { name: "text" }, + table: { + type: { summary: "text" }, + category: "Component", + }, + control: "text", + }, + staticColor, }, args: { ...ProgressBar.args, rootClass: "spectrum-Meter", - size: "l", + size: "m", label: "Storage space", + helpText: "", }, parameters: { design: { @@ -47,11 +58,15 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** - * By default, meters have a blue fill and are the large sizes. + * By default, meters have a blue fill and are medium-sized. * * Meters should always have a label. In rare cases where context is sufficient and an accessibility expert has reviewed the design, the label could be undefined. These meters without a visible label should still include an “aria-label” or “aria-labelledby” in HTML, depending on the context. The label is always placed above the track. * @@ -63,7 +78,7 @@ Default.args = { }; /** - * Meters come in two sizes: large and small. By default, meters are large. Use the small size when there are multiple meters shown at the same time in a more confined space, such as in tables or cards. + * Meters come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the small size when there are multiple meters shown at the same time in a more confined space, such as in tables or cards. */ export const Sizing = (args, context) => Sizes({ Template, @@ -90,6 +105,39 @@ FillColors.parameters = { chromatic: { disableSnapshot: true }, }; +export const StaticWhite = Template.bind({}); +StaticWhite.args = { + staticColor: "white", + value: 50, +}; +StaticWhite.tags = ["!dev"]; +StaticWhite.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlack = Template.bind({}); +StaticBlack.args = { + staticColor: "black", + value: 50, +}; +StaticBlack.tags = ["!dev"]; +StaticBlack.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The help text is placed below the meter. This helps to provide additional context for the user. + */ +export const HelpText = Template.bind({}); +HelpText.args = { + helpText: "This is a help text", + value: 50, +}; +HelpText.tags = ["!dev"]; +HelpText.parameters = { + chromatic: { disableSnapshot: true }, +}; +HelpText.storyName = "Help text"; // ********* VRT ONLY ********* // export const WithForcedColors = MeterGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/meter/stories/meter.test.js b/components/meter/stories/meter.test.js index 46f60024bf4..64d3ef98750 100644 --- a/components/meter/stories/meter.test.js +++ b/components/meter/stories/meter.test.js @@ -1,8 +1,19 @@ import { Variants } from "@spectrum-css/preview/decorators"; +import { html } from "lit"; import { Template } from "./template.js"; +export const MeterSizingTemplate = (args, context) => { + return html` + ${Template({ + ...args, + helpText: "Upgrade membership to get more storage space" + }, context)} + `; +}; + export const MeterGroup = Variants({ Template, + SizeTemplate: MeterSizingTemplate, testData: [ { testHeading: "Default", @@ -11,10 +22,6 @@ export const MeterGroup = Variants({ testHeading: `Fill: ${fill}`, fill, })), - { - testHeading: "Side label", - labelPosition: "side", - }, { testHeading: "Text overflow", label: "Storage space remaining for XYZ user" @@ -28,6 +35,10 @@ export const MeterGroup = Variants({ testHeading: "Without value label", showValueLabel: false, }, + { + testHeading: "Help text", + helpText: "Help text message to add more context", + }, /* The gradient story below supports linear-gradients used by Express. For use cases that require a custom linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS. */ @@ -40,5 +51,9 @@ export const MeterGroup = Variants({ testHeading: "Static white", staticColor: "white", }, + { + testHeading: "Static black", + staticColor: "black", + }, ], }); diff --git a/components/meter/stories/template.js b/components/meter/stories/template.js index 5741adc82a5..fb7629d0067 100644 --- a/components/meter/stories/template.js +++ b/components/meter/stories/template.js @@ -8,7 +8,8 @@ export const Template = ({ rootClass = "spectrum-Meter", customClasses = [], fill, - size = "s", + helpText, + size = "m", staticColor, ...item } = {}, context = {}) => { @@ -27,6 +28,8 @@ export const Template = ({ typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null, ].filter(Boolean), staticColor, + helpText, + size, }, context); }; diff --git a/components/miller/CHANGELOG.md b/components/miller/CHANGELOG.md index 2e843968bc0..88b4cf0a412 100644 --- a/components/miller/CHANGELOG.md +++ b/components/miller/CHANGELOG.md @@ -1,5 +1,21 @@ # Change log +## 9.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 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/assetlist@9.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 + ## 8.1.0 ### Minor Changes @@ -201,6 +217,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGE - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css ## 5.1.4 diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index adb2109144c..fbb3770d558 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -13,7 +13,6 @@ ], "component": [], "global": ["--spectrum-spacing-100"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/miller/package.json b/components/miller/package.json index fed923ea99b..2e6cb358a3f 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/miller", - "version": "8.1.0", + "version": "9.0.0-next.1", "description": "The Spectrum CSS miller component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/assetlist": ">=8.0.0 <9.0.0", - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/assetlist": ">=9.0.0-next.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/assetlist": { @@ -45,10 +45,10 @@ } }, "devDependencies": { - "@spectrum-css/assetlist": "8.2.0", - "@spectrum-css/checkbox": "10.1.2", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/assetlist": "9.0.0-next.1", + "@spectrum-css/checkbox": "11.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/modal/CHANGELOG.md b/components/modal/CHANGELOG.md index 4d31ed47ae8..e187432d798 100644 --- a/components/modal/CHANGELOG.md +++ b/components/modal/CHANGELOG.md @@ -1,13 +1,26 @@ # Change log +## 8.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 7.1.1-next.0 + +### Patch Changes + +📝 [#3604](https://github.com/adobe/spectrum-css/pull/3604) [`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! + +In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers. + ## 7.1.0 ### Minor Changes 📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)! -## New feature - Minified and gzipped outputs available for all compiled CSS assets. ### Patch Changes diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 950d9fca3c6..c27c44872d7 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -15,24 +15,26 @@ "--mod-modal-background-color", "--mod-modal-confirm-border-radius", "--mod-modal-confirm-entry-animation-delay", - "--mod-modal-confirm-entry-animation-distance", "--mod-modal-confirm-entry-animation-duration", "--mod-modal-confirm-exit-animation-delay", "--mod-modal-confirm-exit-animation-duration", "--mod-modal-fullscreen-margin", "--mod-modal-max-height", "--mod-modal-max-width", - "--mod-modal-transition-animation-duration", - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened" + "--mod-modal-transition-animation-duration" ], "component": [ "--spectrum-modal-background-color", + "--spectrum-modal-confirm-border-radius", "--spectrum-modal-confirm-entry-animation-delay", "--spectrum-modal-confirm-entry-animation-duration", "--spectrum-modal-confirm-exit-animation-delay", "--spectrum-modal-confirm-exit-animation-duration", - "--spectrum-modal-fullscreen-margin" + "--spectrum-modal-fullscreen-margin", + "--spectrum-modal-max-height", + "--spectrum-modal-max-width", + "--spectrum-modal-takeover-window-to-edge", + "--spectrum-modal-transition-animation-duration" ], "global": [ "--spectrum-animation-duration-0", @@ -41,12 +43,10 @@ "--spectrum-animation-duration-500", "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", - "--spectrum-animation-linear", - "--spectrum-background-layer-2-color", - "--spectrum-corner-radius-100", - "--spectrum-dialog-confirm-entry-animation-distance" + "--spectrum-corner-radius-extra-large-default", + "--spectrum-dialog-confirm-entry-animation-distance", + "--spectrum-window-to-edge" ], - "system-theme": ["--system-modal-background-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/index.css b/components/modal/index.css index 8a5e2e9ad95..4dad9fccf32 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -11,20 +11,23 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/overlay.css"; -@import "./themes/spectrum-two.css"; - .spectrum-Modal { --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); - /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ - --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); + --spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)); - /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ - --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); + --spectrum-modal-confirm-exit-animation-duration: var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)); --spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0)); /* Distance between top and bottom of modal and edge of window for fullscreen modal */ - --spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px); + --spectrum-modal-fullscreen-margin: var(--spectrum-window-to-edge); + --spectrum-modal-takeover-window-to-edge: 0; + --spectrum-modal-max-height: 90vh; + --spectrum-modal-max-width: 90%; + + --spectrum-modal-background-color: var(--mod-modal-background-color, transparent); + --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); + + --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); } /* Used to position the modal */ @@ -46,6 +49,9 @@ * We use the stretch value to counteract this where supported. */ block-size: 100vh; + /* stylelint-disable-next-line value-no-vendor-prefix */ + block-size: -moz-available; + /* stylelint-disable-next-line value-no-vendor-prefix */ block-size: -webkit-fill-available; /* autoprefixer: ignore next -- -moz-available providing inconsistent results; want to fall FF back to 100vh */ @@ -60,7 +66,7 @@ z-index: 2; /* Be invisible by default */ - transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); + transition: visibility 0ms linear var(--spectrum-modal-transition-animation-duration); &.is-open { visibility: visible; @@ -72,17 +78,17 @@ opacity: 0; /* Start offset by the animation distance -- @note this is using the global dialog token */ - transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance))); + transform: translateY(var(--spectrum-dialog-confirm-entry-animation-distance)); /* Appear above underlay */ z-index: 2; /* Don't be bigger than the screen */ - max-block-size: var(--mod-modal-max-height, 90vh); - max-inline-size: var(--mod-modal-max-width, 90%); + max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height)); + max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width)); - background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); - border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100)); + background: var(--spectrum-modal-background-color); + border-radius: var(--spectrum-modal-confirm-border-radius); overflow: hidden; outline: none; /* Firefox shows outline */ pointer-events: auto; @@ -90,8 +96,8 @@ /* Exit animations */ transition: opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay), - visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), - transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); + visibility 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), + transform 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); &.is-open { pointer-events: auto; @@ -125,17 +131,15 @@ /** @unofficial */ .spectrum-Modal--fullscreen { position: fixed; - inset-inline-start: var(--spectrum-modal-fullscreen-margin); - inset-block-start: var(--spectrum-modal-fullscreen-margin); - inset-inline-end: var(--spectrum-modal-fullscreen-margin); - inset-block-end: var(--spectrum-modal-fullscreen-margin); + inset-block: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); + inset-inline: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); max-inline-size: none; max-block-size: none; } .spectrum-Modal--fullscreenTakeover { position: fixed; - inset: 0; + inset: var(--spectrum-modal-takeover-window-to-edge); max-inline-size: none; max-block-size: none; diff --git a/components/modal/package.json b/components/modal/package.json index e304318528b..d166fbde890 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/modal", - "version": "7.1.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS modal component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,8 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index a4ce483de5f..560f5663e43 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -57,6 +57,9 @@ export default { ], }; +/** + * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--mod-modal-background-color` may be set on the `.spectrum-Modal` class. + */ export const Default = ModalGroup.bind({}); Default.args = { content: [ diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js index 07a52b89131..9abbf49ebea 100644 --- a/components/modal/stories/template.js +++ b/components/modal/stories/template.js @@ -5,9 +5,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Just the modal markup. diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/modal/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css deleted file mode 100644 index c31756dcdae..00000000000 --- a/components/modal/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); - } -} diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css deleted file mode 100644 index f637e6f343e..00000000000 --- a/components/modal/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-gray-100); - } -} diff --git a/components/opacitycheckerboard/CHANGELOG.md b/components/opacitycheckerboard/CHANGELOG.md index 9463b1a6fd6..ea2256a9054 100644 --- a/components/opacitycheckerboard/CHANGELOG.md +++ b/components/opacitycheckerboard/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 4.1.0 ### Minor Changes diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 51c1a155873..31fd76317b9 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -1,6 +1,9 @@ { "sourceFile": "index.css", - "selectors": [".spectrum-OpacityCheckerboard"], + "selectors": [ + ".spectrum-OpacityCheckerboard", + ".spectrum-OpacityCheckerboard--sizeS" + ], "modifiers": [ "--mod-opacity-checkerboard-dark", "--mod-opacity-checkerboard-light", @@ -8,12 +11,16 @@ "--mod-opacity-checkerboard-size" ], "component": [ + "--spectrum-opacity-checkerboard-dark", + "--spectrum-opacity-checkerboard-light", + "--spectrum-opacity-checkerboard-position", + "--spectrum-opacity-checkerboard-size", "--spectrum-opacity-checkerboard-square-dark", "--spectrum-opacity-checkerboard-square-light", - "--spectrum-opacity-checkerboard-square-size" + "--spectrum-opacity-checkerboard-square-size-medium", + "--spectrum-opacity-checkerboard-square-size-small" ], "global": [], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 675449dd8dd..8f1700294f0 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -12,7 +12,19 @@ */ .spectrum-OpacityCheckerboard { - background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, left top) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2); + --spectrum-opacity-checkerboard-dark: var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)); + --spectrum-opacity-checkerboard-light: var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)); + --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-medium)); + + --spectrum-opacity-checkerboard-position: var(--mod-opacity-checkerboard-position, left top); +} + +.spectrum-OpacityCheckerboard--sizeS { + --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small)); +} + +.spectrum-OpacityCheckerboard { + background: repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) var(--spectrum-opacity-checkerboard-position) / calc(var(--spectrum-opacity-checkerboard-size) * 2) calc(var(--spectrum-opacity-checkerboard-size) * 2); } @media (forced-colors: active) { diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index 702a4e84984..fa4d19ef57e 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/opacitycheckerboard", - "version": "4.1.0", + "version": "5.0.0-next.0", "description": "The Spectrum CSS opacitycheckerboard component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index e908a5cd05b..b37b326429a 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -20,6 +20,16 @@ export default { control: "text", description: "Value for --mod-opacity-checkerboard-position. Accepts any valid CSS background-position property value.", }, + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m"], + control: "select", + }, }, args: { rootClass: "spectrum-OpacityCheckerboard", @@ -32,7 +42,11 @@ export default { parameters: { packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; export const Default = OpacityCheckboardGroup.bind({}); diff --git a/components/page/CHANGELOG.md b/components/page/CHANGELOG.md index da16dd16972..12db241ef52 100644 --- a/components/page/CHANGELOG.md +++ b/components/page/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + ## 9.1.0 ### Minor Changes diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index cb8c8163de8..4e3ac035552 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -7,10 +7,6 @@ "--spectrum-page-content-tap-highlight" ], "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], - "system-theme": [ - "--system-root-page-background-color", - "--system-root-page-content-tap-highlight" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/index.css b/components/page/index.css index 7a29f49a2e2..b5ce5555917 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,11 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - :root { - background: var(--mod-page-background, var(--spectrum-page-background-color)); + background: var(--mod-page-background, var(--spectrum-page-background-color, var(--spectrum-gray-75))); /* The highlight that appears over a link while it's being tapped */ - -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight)); + -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight, var(--spectrum-transparent-black-25))); } diff --git a/components/page/package.json b/components/page/package.json index c73575b522b..1be24f4719f 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/page", - "version": "9.1.0", + "version": "10.0.0-next.0", "description": "The Spectrum CSS page component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/page/stories/template.js b/components/page/stories/template.js index 570ca98b244..395f6d48390 100644 --- a/components/page/stories/template.js +++ b/components/page/stories/template.js @@ -2,9 +2,6 @@ import { renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ content = [] } = {}, context = {}) => { return html`${renderContent(content, { context })}`; diff --git a/components/page/themes/express.css b/components/page/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/page/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/page/themes/spectrum-two.css b/components/page/themes/spectrum-two.css deleted file mode 100644 index 896ecf506cc..00000000000 --- a/components/page/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-75); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); - } -} diff --git a/components/page/themes/spectrum.css b/components/page/themes/spectrum.css deleted file mode 100644 index f6c120c2d43..00000000000 --- a/components/page/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-100); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-100); - } -} diff --git a/components/pagination/CHANGELOG.md b/components/pagination/CHANGELOG.md index 1c5dcb75c7a..8b17d7f3c63 100644 --- a/components/pagination/CHANGELOG.md +++ b/components/pagination/CHANGELOG.md @@ -1,5 +1,22 @@ # Change log +## 11.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + +## 11.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/actionbutton@8.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 10.1.0 ### Minor Changes @@ -295,11 +312,9 @@ Output for all component CSS files is now being run through a lightweight optimi - feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d)) - ### - - 🛑 BREAKING CHANGES +### 🛑 BREAKING CHANGES - - Replaces DNA tokens with Spectrum tokens. +- Replaces DNA tokens with Spectrum tokens. Update build to use Spectrum tokens. Remove skin.css and incorporate its CSS into index.css. diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 7a0b21fe8dd..e44857f71b9 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -34,7 +34,6 @@ "--spectrum-logical-rotation", "--spectrum-neutral-subdued-content-color-default" ], - "system-theme": [], "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], "high-contrast": [] } diff --git a/components/pagination/package.json b/components/pagination/package.json index 5de7d16b803..bd6223e403f 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/pagination", - "version": "10.1.0", + "version": "11.0.0-next.1", "description": "The Spectrum CSS Pagination component", "license": "Apache-2.0", "author": "Adobe", @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.3", - "@spectrum-css/button": "14.1.6", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/textfield": "8.1.1", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.2", + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/textfield": "9.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index 7fa6fa909e1..1ce2bc1f1bc 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -70,7 +70,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; /** diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md index 7f9824af954..0d269d56be4 100644 --- a/components/picker/CHANGELOG.md +++ b/components/picker/CHANGELOG.md @@ -1,10 +1,66 @@ # Change log +## 10.0.0-next.3 + +### Major Changes + +- [#3792](https://github.com/adobe/spectrum-css/pull/3792) [`032001b`](https://github.com/adobe/spectrum-css/commit/032001b4eb1e6f15bb30fcc18b42cd001f790024) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! + +#### Component refactor + +- Refactors Picker component to use proper custom property naming conventions +- Adds size-specific animation distances for Popover component +- Improves component structure with proper class by renaming `spectrum-Picker` to `spectrum-Picker-button` +- `spectrum-Picker` now encapsulates help text, label, and popover components +- Adds `flex-shrink` to progress circle for better layout control when truncation and loading is visible +- Updates Popover animation distance to use `spectrum-Picker` custom properties + +##### New token + +`--spectrum-picker-popover-animation-distance` + +##### Renamed tokens + +`spectrum-picker-spacing-picker-to-popover` --> `--spectrum-picker-popover-animation-distance` + +## 10.0.0-next.2 + +### Patch Changes + +- [#3687](https://github.com/adobe/spectrum-css/pull/3687) [`53d1e5e`](https://github.com/adobe/spectrum-css/commit/53d1e5e7eb7817c37be3cfe5a253363dea744046) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - ### S2 picker fixes + + This work addresses some regressions noticed in the migrated S2 picker component. Mainly, S2 border colors were fixed (most of them are transparent, including disabled). + + PRs used as reference: + + - [Picker docs to storybook migration](https://github.com/adobe/spectrum-css/pull/3200) + - [S2 picker migration](https://github.com/adobe/spectrum-css/pull/2697) + +## 10.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`60a156d`](https://github.com/adobe/spectrum-css/commit/60a156d7c0efcc999bc440274bbbbf586beb274b)]: + - @spectrum-css/tokens@16.1.0-next.0 + - @spectrum-css/progresscircle@6.0.0-next.0 + +## 10.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/helptext@8.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 9.1.4 ### Patch Changes -- [#3607](https://github.com/adobe/spectrum-css/pull/3607) [`7797847`](https://github.com/adobe/spectrum-css/commit/7797847c723d530f34d610516e04150092557af1) Thanks [@blunteshwar](https://github.com/blunteshwar)! - Updated border-color for Open not hover state of picker from --spectrum-gray-900 to --spectrum-gray-800 as specified in the spec +- [#3607](https://github.com/adobe/spectrum-css/pull/3607) [`7797847`](https://github.com/adobe/spectrum-css/commit/7797847c723d530f34d610516e04150092557af1) Thanks [@blunteshwar](https://github.com/blunteshwar)! + +Updated border-color for open state of picker from `--spectrum-gray-900` to `--spectrum-gray-800`. ## 9.1.3 diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index e2c3b4e5c0a..bde45fd599a 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -2,83 +2,77 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Picker", - ".spectrum-Picker + .spectrum-Popover--bottom.is-open", ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", ".spectrum-Picker--quiet", - ".spectrum-Picker--quiet .spectrum-Picker-menuIcon", - ".spectrum-Picker--quiet.is-keyboardFocused", - ".spectrum-Picker--quiet.is-keyboardFocused:after", - ".spectrum-Picker--quiet.is-open", + ".spectrum-Picker--quiet .spectrum-Picker-button", + ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after", + ".spectrum-Picker--quiet .spectrum-Picker-button:after", + ".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after", ".spectrum-Picker--quiet.spectrum-Picker--sideLabel", - ".spectrum-Picker--quiet.spectrum-Picker.is-disabled", - ".spectrum-Picker--quiet.spectrum-Picker:disabled", - ".spectrum-Picker--quiet:active", - ".spectrum-Picker--quiet:after", - ".spectrum-Picker--quiet:focus-visible", - ".spectrum-Picker--quiet:focus-visible:after", - ".spectrum-Picker--quiet:hover", + ".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", - ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", ".spectrum-Picker--sizeS", - ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", ".spectrum-Picker--sizeXL", - ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker-button", + ".spectrum-Picker-button.is-disabled", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-icon", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon", + ".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)", + ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", + ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)", + ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible", + ".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover", + ".spectrum-Picker-button.is-keyboardFocused", + ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-keyboardFocused:after", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover", + ".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon", + ".spectrum-Picker-button::-moz-focus-inner", + ".spectrum-Picker-button:active", + ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button:active:after", + ".spectrum-Picker-button:disabled", + ".spectrum-Picker-button:disabled .spectrum-Picker-icon", + ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon", + ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon", + ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)", + ".spectrum-Picker-button:focus", + ".spectrum-Picker-button:focus-visible", + ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon", + ".spectrum-Picker-button:focus-visible:after", + ".spectrum-Picker-button:hover", + ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon", ".spectrum-Picker-label", - ".spectrum-Picker-label ~ .spectrum-Picker-menuIcon", ".spectrum-Picker-label.is-placeholder", ".spectrum-Picker-label.is-placeholder:active", ".spectrum-Picker-label.is-placeholder:hover", ".spectrum-Picker-menuIcon", ".spectrum-Picker-menuIcon:active", ".spectrum-Picker-validationIcon", - ".spectrum-Picker.is-disabled", - ".spectrum-Picker.is-disabled .spectrum-Picker-icon", - ".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon", - ".spectrum-Picker.is-invalid .spectrum-Picker-label", - ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible", - ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover", ".spectrum-Picker.is-keyboardFocused", - ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-keyboardFocused:after", - ".spectrum-Picker.is-loading .spectrum-Picker-label", + ".spectrum-Picker.is-loading", ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label", - ".spectrum-Picker::-moz-focus-inner", - ".spectrum-Picker:active", - ".spectrum-Picker:active:after", ".spectrum-Picker:after", - ".spectrum-Picker:disabled", - ".spectrum-Picker:disabled .spectrum-Picker-icon", - ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:disabled .spectrum-Picker-menuIcon", - ".spectrum-Picker:disabled .spectrum-Picker-validationIcon", - ".spectrum-Picker:focus", ".spectrum-Picker:focus-visible", - ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon", - ".spectrum-Picker:focus-visible:after", - ".spectrum-Picker:hover", - ".spectrum-Picker:hover .spectrum-Picker-menuIcon" + ".spectrum-Picker:lang(ja) .spectrum-Picker-label", + ".spectrum-Picker:lang(ko) .spectrum-Picker-label", + ".spectrum-Picker:lang(zh) .spectrum-Picker-label" ], "modifiers": [ - "--mod-animation-duration-100", - "--mod-line-height-100", "--mod-picker-animation-duration", "--mod-picker-background-color-active", "--mod-picker-background-color-default", @@ -123,7 +117,11 @@ "--mod-picker-icon-color-hover-open", "--mod-picker-icon-color-key-focus", "--mod-picker-inline-size", + "--mod-picker-inline-size-quiet", "--mod-picker-line-height", + "--mod-picker-line-height-cjk", + "--mod-picker-min-inline-size", + "--mod-picker-min-inline-size-quiet", "--mod-picker-placeholder-font-style", "--mod-picker-placeholder-font-weight", "--mod-picker-spacing-bottom-to-text", @@ -134,15 +132,12 @@ "--mod-picker-spacing-icon-to-disclosure-icon", "--mod-picker-spacing-label-to-picker", "--mod-picker-spacing-label-to-picker-quiet", - "--mod-picker-spacing-picker-to-popover", - "--mod-picker-spacing-text-to-alert-icon-inline-start", - "--mod-picker-spacing-text-to-icon", + "--mod-picker-spacing-starting-icon-to-text", "--mod-picker-spacing-text-to-icon-inline-end", "--mod-picker-spacing-top-to-alert-icon", "--mod-picker-spacing-top-to-disclosure-icon", "--mod-picker-spacing-top-to-progress-circle", - "--mod-picker-spacing-top-to-text", - "--mod-sans-font-family-stack" + "--mod-picker-spacing-top-to-text" ], "component": [ "--spectrum-picker-animation-duration", @@ -157,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -192,18 +186,18 @@ "--spectrum-picker-icon-color-key-focus", "--spectrum-picker-inline-size", "--spectrum-picker-line-height", + "--spectrum-picker-line-height-cjk", + "--spectrum-picker-min-inline-size", "--spectrum-picker-minimum-width-multiplier", "--spectrum-picker-placeholder-font-style", + "--spectrum-picker-popover-animation-distance", "--spectrum-picker-spacing-bottom-to-text", "--spectrum-picker-spacing-edge-to-disclosure-icon", - "--spectrum-picker-spacing-edge-to-disclosure-icon-quiet", "--spectrum-picker-spacing-edge-to-text", - "--spectrum-picker-spacing-edge-to-text-quiet", "--spectrum-picker-spacing-icon-to-disclosure-icon", "--spectrum-picker-spacing-label-to-picker", "--spectrum-picker-spacing-label-to-picker-quiet", - "--spectrum-picker-spacing-picker-to-popover", - "--spectrum-picker-spacing-text-to-icon", + "--spectrum-picker-spacing-starting-icon-to-text", "--spectrum-picker-spacing-text-to-icon-inline-end", "--spectrum-picker-spacing-top-to-alert-icon", "--spectrum-picker-spacing-top-to-disclosure-icon", @@ -216,7 +210,8 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", + "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -229,6 +224,8 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-to-menu-extra-large", "--spectrum-component-to-menu-large", "--spectrum-component-to-menu-medium", @@ -237,10 +234,23 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", + "--spectrum-field-default-width-extra-large", + "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", + "--spectrum-field-default-width-small", "--spectrum-field-edge-to-text-quiet", "--spectrum-field-end-edge-to-disclosure-icon-100", "--spectrum-field-end-edge-to-disclosure-icon-200", @@ -251,14 +261,6 @@ "--spectrum-field-label-to-component-quiet-large", "--spectrum-field-label-to-component-quiet-medium", "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-text-to-alert-icon-extra-large", - "--spectrum-field-text-to-alert-icon-large", - "--spectrum-field-text-to-alert-icon-medium", - "--spectrum-field-text-to-alert-icon-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", "--spectrum-field-top-to-disclosure-icon-100", "--spectrum-field-top-to-disclosure-icon-200", "--spectrum-field-top-to-disclosure-icon-300", @@ -267,7 +269,6 @@ "--spectrum-field-top-to-progress-circle-large", "--spectrum-field-top-to-progress-circle-medium", "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -277,12 +278,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", @@ -304,26 +299,11 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-picker-background-color-active", - "--system-picker-background-color-default", - "--system-picker-background-color-default-open", - "--system-picker-background-color-hover", - "--system-picker-background-color-hover-open", - "--system-picker-background-color-key-focus", - "--system-picker-border-color-active", - "--system-picker-border-color-default", - "--system-picker-border-color-default-open", - "--system-picker-border-color-disabled", - "--system-picker-border-color-hover", - "--system-picker-border-color-hover-open", - "--system-picker-border-color-key-focus", - "--system-picker-border-width" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", - "--mod-button-line-height" + "--mod-button-line-height", + "--mod-popover-animation-distance" ], "high-contrast": [ "--highcontrast-picker-background-color", diff --git a/components/picker/index.css b/components/picker/index.css index e59888c78f5..ea2015af243 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,44 +11,66 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { - /* font */ + /* Color */ + --spectrum-picker-background-color-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-border-color-default: transparent; + --spectrum-picker-border-color-default-open: transparent; + --spectrum-picker-border-color-hover: transparent; + --spectrum-picker-border-color-hover-open: transparent; + --spectrum-picker-border-color-active: transparent; + --spectrum-picker-border-color-key-focus: transparent; + + /* Font */ --spectrum-picker-font-size: var(--spectrum-font-size-100); --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); --spectrum-picker-line-height: var(--spectrum-line-height-100); + --spectrum-picker-line-height-cjk: var(--spectrum-cjk-line-height-100); - /* height */ + /* Dimensions */ --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-medium); + --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); - /* border */ - --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); + /* Border */ + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-picker-border-width: var(--spectrum-border-width-200); - /* spacing */ + /* Spacing */ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + + /* Space from label component to Picker component. */ --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); + + /* Space from optional starting icon to the text. */ + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + /* Space from text to either the disclosure icon or the alert/progress visual if present. */ + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-100); + + /* Space from alert/progress visual to the disclosure icon (chevron). */ --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - /* animation */ + /* Animation */ --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100); - /* color */ --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default); --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); @@ -76,122 +98,111 @@ --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - /* special cases for focus indicator */ + /* focus indicator */ --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-medium); + + --mod-popover-animation-distance: var(--spectrum-picker-popover-animation-distance); } .spectrum-Picker--sizeS { --spectrum-picker-font-size: var(--spectrum-font-size-75); --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-small); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-small); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); - --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-75); --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-small); } .spectrum-Picker--sizeL { --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-large); --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-200); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-large); } .spectrum-Picker--sizeXL { --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-extra-large); --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-300); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); - } + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used to assign Popover mods */ + --spectrum-picker-popover-animation-distance: var(--spectrum-component-to-menu-extra-large); } -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Picker { - --highcontrast-picker-focus-indicator-color: Highlight; - - --highcontrast-picker-border-color-default: ButtonBorder; - --highcontrast-picker-border-color-hover: Highlight; - --highcontrast-picker-border-color-disabled: GrayText; - - --highcontrast-picker-content-color-default: ButtonText; - --highcontrast-picker-content-color-disabled: GrayText; - --highcontrast-picker-background-color: ButtonFace; - - &:focus-visible, - &.is-keyboardFocused { - --highcontrast-picker-border-color-hover: ButtonText; - } - - /* Focus indicator */ - &::after { - /* Make sure default transparent border stays transparent. */ - forced-color-adjust: none; - } - - .spectrum-Picker-label { - /* Remove additional text backplate added in WHCM (Edge). */ - forced-color-adjust: none; - } +.spectrum-Picker--quiet { + --spectrum-picker-background-color-default: transparent; + --spectrum-picker-background-color-default-open: transparent; + --spectrum-picker-background-color-hover: transparent; + --spectrum-picker-background-color-hover-open: transparent; + --spectrum-picker-background-color-active: transparent; + --spectrum-picker-background-color-key-focus: transparent; + --spectrum-picker-background-color-disabled: transparent; + + --spectrum-picker-min-inline-size: var(--mod-picker-min-inline-size-quiet, 0); + --spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto); + --spectrum-picker-spacing-edge-to-text: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet)); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet)); + --spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)); + + &.spectrum-Picker--sideLabel .spectrum-Picker-button { + margin-block-start: 0; } } -.spectrum-Picker { +/* Note: .spectrum-Picker has been renamed to .spectrum-Picker-button. This selector now triggers the Popover component. */ +.spectrum-Picker-button { @extend %spectrum-BaseButton; - /* Layout */ display: flex; box-sizing: border-box; - /* Minimum width is 2 times the height */ max-inline-size: 100%; - min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); + min-inline-size: var(--mod-picker-min-inline-size, var(--spectrum-picker-min-inline-size)); inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size)); block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); - padding-block: 0; - margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + padding-block: 0; padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text)); padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon)); @@ -208,27 +219,6 @@ background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default, var(--spectrum-picker-background-color-default))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-default, var(--spectrum-picker-border-color-default))); - /* Focus indicator */ - &::after { - pointer-events: none; - content: ""; - position: absolute; - block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); - - inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); - - margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); - - margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); - - inset-inline: 0; - inset-block: 0; - border-style: solid; - border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); - border-color: transparent; - border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); - } - &:hover { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-hover, var(--spectrum-picker-background-color-hover))); @@ -242,13 +232,14 @@ &:active { background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); + transform: perspective(max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down))) translateZ(var(--spectrum-component-size-difference-down)); /* Focus indicator */ &::after { border-color: transparent; } - &.is-placeholder .spectrum-Picker-label { + .spectrum-Picker-label.is-placeholder { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); } } @@ -265,6 +256,27 @@ border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); } + /* Focus indicator */ + &::after { + pointer-events: none; + content: ""; + position: absolute; + block-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + + inline-size: calc(100% + (var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) * 2) + (var(--mod-picker-border-width, var(--spectrum-picker-border-width)) * 2)); + + margin-block-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + + margin-inline-start: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1); + + inset-inline: 0; + inset-block: 0; + border-style: solid; + border-width: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)); + border-color: transparent; + border-radius: calc(var(--mod-picker-border-radius, var(--spectrum-picker-border-radius)) + var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + } + .spectrum-Picker-label.is-placeholder { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus))); } @@ -274,7 +286,7 @@ } } - &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) { + &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); @@ -322,32 +334,17 @@ border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); } } +} - &.is-loading { - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } - } - - &.is-loading, - &.is-invalid { - .spectrum-Picker-label { - /* @deprecation --mod-picker-spacing-text-to-alert-icon-inline-start has been renamed to --mod-picker-spacing-text-to-icon-inline-end - and will be removed in a future version. */ - margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))); - } - } - - .spectrum-Picker-icon { - flex-shrink: 0; - margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); - } +/* Optional workflow icon that appears before the text within the picker. */ +.spectrum-Picker .spectrum-Picker-icon { + flex-shrink: 0; + margin-inline-end: var(--mod-picker-spacing-starting-icon-to-text, var(--spectrum-picker-spacing-starting-icon-to-text)); } +/* Value: the text within the Picker (current value or placeholder) */ .spectrum-Picker-label { - /* Be the biggest, but also shrink! */ flex: 1 1 auto; - white-space: nowrap; overflow: hidden; @@ -358,14 +355,14 @@ text-overflow: ellipsis; text-align: start; - padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); - padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); + margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--spectrum-picker-spacing-text-to-icon-inline-end)); &.is-placeholder { font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); &:hover { @@ -376,19 +373,23 @@ color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); } } + + /* CJK (Chinese, Japanese, and Korean) language support */ + .spectrum-Picker:lang(ja) &, + .spectrum-Picker:lang(zh) &, + .spectrum-Picker:lang(ko) & { + line-height: var(--mod-picker-line-height-cjk, var(--spectrum-picker-line-height-cjk)); + } } -/* The picker chevron */ +/* Disclosure icon (chevron) */ .spectrum-Picker-menuIcon { display: inline-block; position: relative; vertical-align: top; - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; flex-shrink: 0; - - margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); - + transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); &:active { @@ -397,73 +398,45 @@ } .spectrum-Picker-validationIcon { - flex-shrink: 0; margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + flex-shrink: 0; } .spectrum-Picker .spectrum-ProgressCircle { margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); -} - -.spectrum-Picker-label ~ .spectrum-Picker-menuIcon { - margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); -} - -.spectrum-Picker + .spectrum-Popover--bottom.is-open { - transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover))); + margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + flex-shrink: 0; } .spectrum-Picker--quiet { - inline-size: auto; - min-inline-size: 0; - border: none; - border-radius: 0; - padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet)); - margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + (1px)); - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - background-color: var(--highcontrast-picker-background-color, transparent); - &.spectrum-Picker--sideLabel { margin-block-start: 0; } - .spectrum-Picker-menuIcon { - margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)); - } - - &::after { + .spectrum-Picker-button { border: none; - block-size: auto; - inline-size: auto; - } - - &:hover { - background-color: var(--highcontrast-picker-background-color, transparent); - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--highcontrast-picker-background-color, transparent); + border-radius: 0; + color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - /* Focus indicator changes from a ring to a line underneath. */ &::after { border: none; - border-radius: 0; - box-shadow: 0 var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) 0 0 var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); - margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; + block-size: auto; + inline-size: auto; } - } - - &:active, - &.is-open { - background-color: var(--highcontrast-picker-background-color, transparent); - } - &.spectrum-Picker:disabled, - &.spectrum-Picker.is-disabled { - background-color: var(--highcontrast-picker-background-color, transparent); + &:focus-visible, + &.is-keyboardFocused { + /* Focus indicator changes from a ring to a line underneath. */ + &::after { + border: none; + border-radius: 0; + border-block-end: var(--mod-picker-focus-indicator-thickness, var(--spectrum-picker-focus-indicator-thickness)) solid var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))); + margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; + } + } } } @@ -472,16 +445,20 @@ vertical-align: top; } -/* Disabled state: - Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves - all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ -.spectrum-Picker:disabled, -.spectrum-Picker.is-disabled { +/* Disabled and loading states: + Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves + all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ +.spectrum-Picker-button:disabled, +.spectrum-Picker-button.is-disabled { cursor: default; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); - border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled)); + transform: none; + border-color: var(--highcontrast-picker-border-color-disabled, transparent); color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + &:not(.spectrum-Picker--quiet) { + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); + } + .spectrum-Picker-icon, .spectrum-Picker-menuIcon, .spectrum-Picker-validationIcon { @@ -492,3 +469,42 @@ color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); } } + +.spectrum-Picker.is-loading { + transform: none; + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + } +} + +/* Forced colors / high contrast mode */ +@media (forced-colors: active) { + .spectrum-Picker { + --highcontrast-picker-focus-indicator-color: Highlight; + + --highcontrast-picker-border-color-default: ButtonBorder; + --highcontrast-picker-border-color-hover: Highlight; + --highcontrast-picker-border-color-disabled: GrayText; + + --highcontrast-picker-content-color-default: ButtonText; + --highcontrast-picker-content-color-disabled: GrayText; + --highcontrast-picker-background-color: ButtonFace; + + &:focus-visible, + &.is-keyboardFocused { + --highcontrast-picker-border-color-hover: ButtonText; + } + + /* Focus indicator */ + &::after { + /* Make sure default transparent border stays transparent. */ + forced-color-adjust: none; + } + + .spectrum-Picker-label { + /* Remove additional text backplate added in WHCM (Edge). */ + forced-color-adjust: none; + } + } +} diff --git a/components/picker/package.json b/components/picker/package.json index 287a787289d..073d859645b 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/picker", - "version": "9.1.4", + "version": "10.0.0-next.3", "description": "The Spectrum CSS picker component", "license": "Apache-2.0", "author": "Adobe", @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/helptext": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/progresscircle": ">=6.0.0-next.0", + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { @@ -53,13 +53,13 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/menu": "9.2.0", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/commons": "12.0.0-next.0", + "@spectrum-css/helptext": "8.0.0-next.2", + "@spectrum-css/icon": "10.0.0-next.2", + "@spectrum-css/menu": "10.0.0-next.3", + "@spectrum-css/popover": "9.0.0-next.2", + "@spectrum-css/progresscircle": "6.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.5" }, "keywords": [ "design-system", diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index c2fa56e619d..306a1490bdf 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -1,5 +1,6 @@ +import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -17,7 +18,7 @@ export default { size: size(["s", "m", "l", "xl"]), label: { name: "Label", - description: "The text for the field label", + description: "The label text that is displayed above or to the side of the Picker. This uses a separate Label component outside of the Picker markup.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -32,16 +33,21 @@ export default { type: { summary: "string" }, category: "Component", }, + control: { + type: "select", + labels: { + side: "side (inline start)", + }, + }, options: ["top", "side"], - control: { type: "select" }, }, withSwitch: { - name: "Show switch component", - description: "Display a separate switch component after the picker. Helpful for testing alignment with the picker when using the side label.", + name: "Display Switch component", + description: "Displays a Switch component after the Picker. This is used for testing the vertical alignment between the side label, Picker, and Switch.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, - category: "Advanced", + category: "Content", }, control: "boolean", if: { arg: "labelPosition", eq: "side" }, @@ -54,11 +60,10 @@ export default { type: { summary: "boolean" }, category: "Advanced", }, - control: "boolean", }, placeholder: { - name: "Placeholder", - description: "The placeholder text prompts a user to select an option from the picker menu. It disappears once a user selects an option. This will not be displayed if the `value` control is set.", + name: "Value or placeholder", + description: "The text within the Picker that represents its current value or placeholder.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -66,15 +71,21 @@ export default { }, control: { type: "text" }, }, - currentValue: { - name: "Value", - description: "The value shows the option that a user has selected.", - type: { name: "string" }, + currentValue: { table: { disable: true } }, + contentIconName: { + ...(IconStories?.argTypes?.iconName ?? {}), + name: "Icon", + description: "Optional workflow icon that appears before the value/placeholder text within the picker.", + if: { arg: "showWorkflowIcon", eq: true }, table: { - type: { summary: "string" }, - category: "Content", + type: { summary: "boolean" }, + category: "Advanced", }, - control: { type: "text" }, + }, + isQuiet: { + ...isQuiet, + description: "An alternative way to display the Picker without a visible background.", + name: "Quiet styling", }, helpText: { name: "Help text", @@ -86,12 +97,18 @@ export default { }, control: { type: "text" }, }, - isQuiet, isOpen, isKeyboardFocused, isDisabled, - isLoading, - isInvalid, + isLoading: { + ...isLoading, + description: "When in the loading state, a progress circle will display next to the disclosure icon.", + if: { arg: "isDisabled", eq: false } + }, + isInvalid: { + ...isInvalid, + description: "When in the invalid state, some styles change on the Picker, and an invalid icon displays next to the disclosure icon.", + }, isHovered, isActive, popoverContent: { table: { disable: true } }, @@ -104,6 +121,7 @@ export default { placeholder: "Select a country", helpText: "", currentValue: "", + contentIconName: "Image", showWorkflowIcon: false, isQuiet: false, isKeyboardFocused: false, @@ -139,7 +157,17 @@ export default { }, packageJson, metadata, + downState: { + selectors: [".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"], + }, + status: { + type: "migrated", + }, }, + decorators: [ + withDownStateDimensionCapture, + ], + tags: ["migrated"], }; export const Default = PickerGroup.bind({}); diff --git a/components/picker/stories/picker.test.js b/components/picker/stories/picker.test.js index 82f7e060075..46c8e389348 100644 --- a/components/picker/stories/picker.test.js +++ b/components/picker/stories/picker.test.js @@ -24,6 +24,11 @@ export const PickerGroup = Variants({ testHeading: "Side label", labelPosition: "side", }, + { + testHeading: "Side label, quiet", + labelPosition: "side", + isQuiet: true, + }, { testHeading: "Side label, alignment with switch", labelPosition: "side", @@ -32,6 +37,7 @@ export const PickerGroup = Variants({ { testHeading: "With thumbnail icon", showWorkflowIcon: true, + contentIconName: "Image", }, ], stateData: [ diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 5bce15f0744..12947c0b76f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -1,30 +1,27 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { Template as Switch } from "@spectrum-css/switch/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** - * Template for Picker only (no popover or help text). + * Template for just the Picker. Does not include sibling Label and Help text. */ export const Picker = ({ rootClass = "spectrum-Picker", size = "m", - labelPosition, - placeholder = "", - currentValue = "", - isQuiet = false, + placeholder, + currentValue, + contentIconName, isKeyboardFocused = false, showWorkflowIcon = false, isOpen = false, @@ -33,18 +30,16 @@ export const Picker = ({ isDisabled = false, isHovered = false, isActive = false, + ariaLabeledBy, customClasses = [], customStyles = {}, - onclick, } = {}, context = {}) => { + const { updateArgs } = context; + return html`