({ ...a, [c]: true }), {}),
+ })}
+ id=${ifDefined(id)}
+ style=${styleMap({
+ inlineSize: `${size}px`,
+ blockSize: `${size}px`,
+ borderRadius: "10px",
+ position: "absolute",
+ ...customStyles,
+ display: "grid",
+ placeItems: "center",
+ })} @mouseover=${(event) => {
+ previousZIndex = event.target.style.zIndex;
+ event.target.style.zIndex = "100";
+ }} @mouseout=${(event) => {
+ event.target.style.zIndex = previousZIndex;
+ }}>
+ ${layer}
+
+ `;
+};
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..a3a50e1a905
--- /dev/null
+++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js
@@ -0,0 +1,101 @@
+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', 'migrated'],
+};
+
+const ActionButton = (args, context) => html`
+
+ ${Template({ ...args, iconName: undefined }, context)}
+
+`;
+
+const ActionButtonTable = (args, context) => {
+ return html`
+ | Token | +Value | +Medium example | +
|---|---|---|
| --spectrum-corner-radius-medium-size-extra-small | +6px | ++ ${ActionButton({ + ...args, + label: "Extra Small", + size: "xs" + }, context)} + | +
| --spectrum-corner-radius-medium-size-small | +7px | ++ ${ActionButton({ + ...args, + label: "Small", + size: "s" + }, context)} + | +
| --spectrum-corner-radius-medium-size-medium | +8px | ++ ${ActionButton({ + ...args, + label: "Medium", + size: "m" + }, context)} + | +
| --spectrum-corner-radius-medium-size-large | +9px | ++ ${ActionButton({ + ...args, + label: "Large", + size: "l" + }, context)} + | +
| --spectrum-corner-radius-medium-size-extra-large | +10px | ++ ${ActionButton({ + ...args, + label: "Extra Large", + size: "xl" + }, context)} + | +
+ ${Template({ ...args, iconName: undefined }, context)}
+
+`;
+
+const CheckboxTable = (args, context) => {
+ return html`
+ | Token | +Value | +Small example | +
|---|---|---|
| --spectrum-corner-radius-small-size-small | +3px | ++ ${Checkbox({ + ...args, + label: "Small", + size: "s" + }, context)} + | +
| --spectrum-corner-radius-small-size-medium | +4px | ++ ${Checkbox({ + ...args, + label: "Medium", + size: "m" + }, context)} + | +
| --spectrum-corner-radius-small-size-large | +5px | ++ ${Checkbox({ + ...args, + label: "Large", + size: "l" + }, context)} + | +
| --spectrum-corner-radius-small-size-extra-large | +6px | ++ ${Checkbox({ + ...args, + label: "Extra Large", + size: "xl" + }, context)} + | +
+
+
+
+
+`;
+
+export const CornerRounding = CornerRadiusGroup.bind({});
+CornerRounding.args = {};
+CornerRounding.parameters = {
+ chromatic: { disableSnapshot: true },
+};
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 | Token | +Value | +Example (No Border) |
+ Example (Border) |
+
|---|
+ ${DropShadowSwatch(args, context)}
+
+`;
+
+const DropShadowVariant = (args, context) => html`
+
+ ${DropShadowBackground({ ...args, color: "light" }, context)}
+ ${DropShadowBackground({ ...args, color: "dark" }, context)}
+
+`;
+
+export const DropShadowEmphasizedDefault = DropShadowVariant.bind({});
+DropShadowEmphasizedDefault.args = {
+ variant: "emphasized-default",
+ isDropShadow: true,
+};
+DropShadowEmphasizedDefault.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
+DropShadowEmphasizedHover.args = {
+ variant: "emphasized-hover",
+ isDropShadow: true,
+};
+DropShadowEmphasizedHover.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const DropShadowElevated = DropShadowVariant.bind({});
+DropShadowElevated.args = {
+ variant: "elevated",
+ isDropShadow: true,
+};
+DropShadowElevated.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({});
+BoxShadowEmphasizedDefault.args = {
+ variant: "emphasized-default",
+ isDropShadow: false,
+};
+BoxShadowEmphasizedDefault.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const BoxShadowEmphasizedHover = DropShadowVariant.bind({});
+BoxShadowEmphasizedHover.args = {
+ variant: "emphasized-hover",
+ isDropShadow: false,
+};
+BoxShadowEmphasizedHover.parameters = {
+ chromatic: { disableSnapshot: true },
+};
+
+export const BoxShadowElevated = DropShadowVariant.bind({});
+BoxShadowElevated.args = {
+ variant: "elevated",
+ isDropShadow: false,
+};
+BoxShadowElevated.parameters = {
+ chromatic: { disableSnapshot: true },
+};
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/chromatic-testing.mdx b/.storybook/guides/chromatic-testing.mdx
new file mode 100644
index 00000000000..881f9144cd1
--- /dev/null
+++ b/.storybook/guides/chromatic-testing.mdx
@@ -0,0 +1,79 @@
+import { Meta, Title } from "@storybook/blocks";
+
+
+
-
${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)}
-
+ ${heading}
+
+ ${when(
+ hasActionButton || hasSwitch,
+ () =>
+ html`
+
+ ${when(hasActionButton, () =>
+ ActionButton({
+ label: "", // icon-only
+ isQuiet: true,
+ customClasses: [`${rootClass}ActionButton`],
+ iconName: actionButtonIconName || "Circle",
+ isDisabled,
+ size,
+ }, context)
+ )}
+ ${when(hasSwitch, () =>
+ Switch({
+ label: "",
+ customClasses: [`${rootClass}Switch`],
+ isDisabled,
+ size
+ }, context))}
+
+ `)}
-
+
{
@@ -90,9 +134,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)}
@@ -106,6 +152,10 @@ export const Template = ({
rootClass: `${rootClass}-item`,
heading,
idx,
+ size,
+ hasActionButton: item.hasActionButton || hasActionButtons,
+ actionButtonIconName: item.actionButtonIconName || actionButtonIconName,
+ hasSwitch: item.hasSwitch || hasSwitches,
iconSize: `${size}`,
isDisabled: item.isDisabled || disableAll,
isOpen: collapseAll === true ? false : item.isOpen,
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
- *
- * 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
- *
- * 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
- *
- * 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 110b9315bcc..4aa1e2e4c58 100644
--- a/components/actionbar/CHANGELOG.md
+++ b/components/actionbar/CHANGELOG.md
@@ -1,5 +1,63 @@
# Change log
+## 11.0.0-next.3
+
+### Major Changes
+
+📝 [#4249](https://github.com/adobe/spectrum-css/pull/4249) [`9629fe3`](https://github.com/adobe/spectrum-css/commit/9629fe37cad996d47c827a3eabcdf39092a27b0d) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+
+- Remove all `--mod-*` custom property hooks.
+- Keep existing class selectors and variants unchanged.
+- Update stories to reflect the removal of the `--mod-*` override layer.
+
+Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.
+
+## 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.2.0
### Minor Changes
diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json
index 3632db90bf7..b0d9b4df5f2 100644
--- a/components/actionbar/dist/metadata.json
+++ b/components/actionbar/dist/metadata.json
@@ -2,96 +2,44 @@
"sourceFile": "index.css",
"selectors": [
".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 .spectrum-Popover",
".spectrum-ActionBar--emphasized .spectrum-FieldLabel",
+ ".spectrum-ActionBar--emphasized .spectrum-Popover",
".spectrum-ActionBar--fixed",
".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
".spectrum-ActionBar--sticky",
- ".spectrum-ActionBar.is-open",
- ".spectrum-ActionBar:lang(ja)",
- ".spectrum-ActionBar:lang(ko)",
- ".spectrum-ActionBar:lang(zh)"
- ],
- "modifiers": [
- "--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-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"
+ ".spectrum-ActionBar.is-open"
],
+ "modifiers": [],
"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-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-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-action-bar-label-to-action-group-area",
+ "--spectrum-action-bar-minimum-width",
+ "--spectrum-action-bar-top-to-content-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"
- ],
- "system-theme": [
- "--system-action-bar-popover-background-color",
- "--system-action-bar-popover-border-color"
+ "--spectrum-spacing-300"
],
"passthroughs": [],
- "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
+ "high-contrast": []
}
diff --git a/components/actionbar/index.css b/components/actionbar/index.css
index 474499e462f..fcb1554fcd3 100644
--- a/components/actionbar/index.css
+++ b/components/actionbar/index.css
@@ -11,66 +11,10 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
-.spectrum-ActionBar {
- --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-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);
-
- /* 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);
-
- /* cjk language support for item counter */
- &:lang(ja),
- &:lang(zh),
- &:lang(ko) {
- --spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
- }
-}
-
-/* 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 */
- padding: 0 var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge));
+ padding: 0 var(--spectrum-spacing-300);
inset-block-end: 0;
z-index: 1;
@@ -86,27 +30,28 @@
&.is-open {
/* add ActionBar bottom margin to height for correct spacing even when sticky */
- block-size: calc(var(--mod-actionbar-spacing-outer-edge, var(--spectrum-actionbar-spacing-outer-edge)) + var(--mod-actionbar-height, var(--spectrum-actionbar-height)));
+ block-size: calc(var(--spectrum-spacing-300) + var(--spectrum-action-bar-height));
opacity: 1;
}
- .spectrum-ActionBar-popover {
+ .spectrum-Popover {
/* popover is ActionBar height */
- block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height));
+ block-size: var(--spectrum-action-bar-height);
+ min-inline-size: var(--spectrum-action-bar-minimum-width);
box-sizing: border-box;
inline-size: 100%;
margin: auto;
- padding-block-start: 0;
- padding-block-end: 0;
+ padding-inline: var(--spectrum-action-bar-edge-to-content-area);
+ padding-block: var(--spectrum-action-bar-top-to-content-area) var(--spectrum-action-bar-bottom-to-content-area);
/* Be relative so our width can be restricted */
position: relative;
- border-radius: var(--mod-actionbar-corner-radius, var(--spectrum-actionbar-corner-radius));
- border-color: var(--highcontrast-actionbar-popover-border-color, var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color)));
- background-color: var(--mod-actionbar-popover-background-color, var(--spectrum-actionbar-popover-background-color));
+ border-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+ border-color: var(--spectrum-action-bar-border-color);
+ background-color: var(--spectrum-background-elevated-color);
- filter: drop-shadow(var(--mod-actionbar-shadow-horizontal, var(--spectrum-actionbar-shadow-horizontal)) var(--mod-actionbar-shadow-vertical, var(--spectrum-actionbar-shadow-vertical)) var(--mod-actionbar-shadow-blur, var(--spectrum-actionbar-shadow-blur)) var(--mod-actionbar-shadow-color, var(--spectrum-actionbar-shadow-color)));
+ filter: drop-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));
/* Let clicks do their thing */
pointer-events: auto;
@@ -114,58 +59,40 @@
/* 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(--spectrum-action-bar-counter-font-size);
+ line-height: var(--spectrum-line-height-100);
- font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size));
- 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));
+ color: var(--spectrum-neutral-content-color-default);
+ padding-inline-start: var(--spectrum-action-bar-close-button-to-counter);
/* cjk language support */
&:lang(ja),
&:lang(zh),
&:lang(ko) {
- line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
+ line-height: var(--spectrum-cjk-line-height-100);
}
}
/* 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;
+ padding-inline-start: var(--spectrum-action-bar-label-to-action-group-area);
}
}
.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;
+ .spectrum-FieldLabel {
+ color: var(--spectrum-gray-25);
}
- /* ensure text is legible on emphasized background */
- .spectrum-FieldLabel {
- color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color));
+ .spectrum-Popover {
+ background-color: var(--spectrum-neutral-content-color-default);
}
}
diff --git a/components/actionbar/package.json b/components/actionbar/package.json
index 8ea6fdde28d..639f40ab571 100644
--- a/components/actionbar/package.json
+++ b/components/actionbar/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionbar",
- "version": "10.2.0",
+ "version": "11.0.0-next.3",
"description": "The Spectrum CSS actionbar component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,18 +19,16 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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": {
@@ -50,11 +48,11 @@
}
},
"devDependencies": {
- "@spectrum-css/actiongroup": "6.2.0",
- "@spectrum-css/closebutton": "6.2.0",
- "@spectrum-css/fieldlabel": "10.2.0",
- "@spectrum-css/popover": "8.3.0",
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/actiongroup": "7.0.0-next.3",
+ "@spectrum-css/closebutton": "7.0.0-next.1",
+ "@spectrum-css/fieldlabel": "11.0.0-next.2",
+ "@spectrum-css/popover": "9.0.0-next.5",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"keywords": [
"design-system",
diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js
index aa2e867ea09..e3410ba3953 100644
--- a/components/actionbar/stories/actionbar.stories.js
+++ b/components/actionbar/stories/actionbar.stories.js
@@ -12,7 +12,7 @@ import { BehavioralTemplate } from "./template.js";
* The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
*
* ## Popover dependency
- * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component and can be overridden by using action bar's `--mod-*` prefixed custom properties. A [list of the properties](#modifiable-properties) can be found below.
+ * Action bar requires popover, which is nested within the action bar. Action bar background, border, and corner radius are applied to the nested popover component.
*/
export default {
title: "Action bar",
@@ -72,7 +72,11 @@ export default {
},
packageJson,
metadata,
+ status: {
+ type: "migrated",
+ },
},
+ tags: ["migrated"],
};
export const Default = ActionBarGroup.bind({});
@@ -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..865aee288c4 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 = ({
- *
- * 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-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--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-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);
-
- &.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
- *
- * 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
- *
- * 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 a4b3acd322f..fee0ec2c2c5 100644
--- a/components/actiongroup/CHANGELOG.md
+++ b/components/actiongroup/CHANGELOG.md
@@ -1,12 +1,93 @@
# Change log
-## 6.2.0
+## 7.0.0-next.3
-### Minor Changes
+### Patch Changes
+
+📝 [#4085](https://github.com/adobe/spectrum-css/pull/4085) [`082862e`](https://github.com/adobe/spectrum-css/commit/082862eb80c6e0ac1c801b1d538e4d2f2bb919b4) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+### Action menu component (now with custom styles!)
+
+Introduces `@spectrum-css/actionmenu`, a composition of `ActionButton`, `Popover`, and `Menu` to present action lists from a trigger. Now with custom styles!
+
+- Adds wrapper classes: `spectrum-ActionMenu`, `spectrum-ActionMenu-trigger`, `spectrum-ActionMenu-popover`, and `spectrum-ActionMenu-menu`.
+- Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
+- Design reference: [Figma S2 token specs](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=20959-21513&node-type=frame&t=jbePQKK1yLdrHG2M-11).
+
+#### Migration notes
+
+- If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has `aria-haspopup="menu"` and manages `aria-expanded` according to your application logic.
+- For spacing customizations previously done with ad‑hoc margins, switch to the new `--spectrum-actionmenu-button-to-menu-gap` custom property.
+
+Example markup:
+
+```html
+
- *
- * 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
- *
- * 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
- *
- * 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 be9a81e3903..275ba440829 100644
--- a/components/actionmenu/CHANGELOG.md
+++ b/components/actionmenu/CHANGELOG.md
@@ -1,5 +1,83 @@
# Change log
+## 8.0.0-next.2
+
+### Major Changes
+
+📝 [#4085](https://github.com/adobe/spectrum-css/pull/4085) [`082862e`](https://github.com/adobe/spectrum-css/commit/082862eb80c6e0ac1c801b1d538e4d2f2bb919b4) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+### Action menu component (now with custom styles!)
+
+Introduces `@spectrum-css/actionmenu`, a composition of `ActionButton`, `Popover`, and `Menu` to present action lists from a trigger. Now with custom styles!
+
+- Adds wrapper classes: `spectrum-ActionMenu`, `spectrum-ActionMenu-trigger`, `spectrum-ActionMenu-popover`, and `spectrum-ActionMenu-menu`.
+- Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
+- Design reference: [Figma S2 token specs](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=20959-21513&node-type=frame&t=jbePQKK1yLdrHG2M-11).
+
+#### Migration notes
+
+- If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has `aria-haspopup="menu"` and manages `aria-expanded` according to your application logic.
+- For spacing customizations previously done with ad‑hoc margins, switch to the new `--spectrum-actionmenu-button-to-menu-gap` custom property.
+
+Example markup:
+
+```html
+
+ *
+ * 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-css/actionmenu
+ * This component is a combination of a menu, popover, and action button.
+ * It is used to display a list of actions in a popover menu when the user clicks on an action button.
+ * The markup has the following structure:
+ *
`;
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
- *
- * 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
- *
- * 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
- *
- * 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 63d6a7a16c5..ef41b956272 100644
--- a/components/actionbutton/CHANGELOG.md
+++ b/components/actionbutton/CHANGELOG.md
@@ -1,5 +1,118 @@
# Change log
+## 8.0.0-next.4
+
+### Minor Changes
+
+📝 [#4085](https://github.com/adobe/spectrum-css/pull/4085) [`082862e`](https://github.com/adobe/spectrum-css/commit/082862eb80c6e0ac1c801b1d538e4d2f2bb919b4) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+### Action menu component (now with custom styles!)
+
+Introduces `@spectrum-css/actionmenu`, a composition of `ActionButton`, `Popover`, and `Menu` to present action lists from a trigger. Now with custom styles!
+
+- Adds wrapper classes: `spectrum-ActionMenu`, `spectrum-ActionMenu-trigger`, `spectrum-ActionMenu-popover`, and `spectrum-ActionMenu-menu`.
+- Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
+- Design reference: [Figma S2 token specs](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=20959-21513&node-type=frame&t=jbePQKK1yLdrHG2M-11).
+
+#### Migration notes
+
+- If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has `aria-haspopup="menu"` and manages `aria-expanded` according to your application logic.
+- For spacing customizations previously done with ad‑hoc margins, switch to the new `--spectrum-actionmenu-button-to-menu-gap` custom property.
+
+Example markup:
+
+```html
+
- *
- * 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.
- */
-
-@import "@spectrum-css/commons/basebutton.css";
-@import "./themes/spectrum-two.css";
+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
-@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;
- }
-
- &.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;
- }
- }
-}
+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-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);
+
+ --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;
- }
-
- /* 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));
+ --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;
+
+ &:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
+ --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));
- }
+ /* expanded is specific to action menu when the menu is open */
+ &:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
+ --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));
+ cursor: pointer;
+ user-select: none;
- --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)));
+ /* Contain halo */
+ position: relative;
- @extend %spectrum-BaseButton;
+ /* Show the button overflow in Edge. */
+ overflow: visible;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
- position: relative;
+ box-sizing: border-box;
+
+ /* Remove button the margin in Firefox and Safari. */
+ margin: 0;
+
+ font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack));
+
+ /* Adjacent buttons should be aligned correctly */
+ vertical-align: top;
- 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);
+ -webkit-font-smoothing: antialiased;
- border-radius: var(--spectrum-actionbutton-border-radius);
+ /* Font smoothing for Firefox */
+ -moz-osx-font-smoothing: grayscale;
+ text-decoration: none;
+
+ /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
+ text-transform: none;
+
+ /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */
+ -webkit-appearance: button;
+
+ transition:
+ 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;
+
+ 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(--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));
+ 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));
- /* Start with text-only padding */
- padding-inline: var(--spectrum-actionbutton-edge-to-text);
+ 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)));
- background-color: var(--spectrum-actionbutton-background-color);
- border-color: var(--spectrum-actionbutton-border-color);
- color: var(--spectrum-actionbutton-content-color);
+ /* Fix Firefox */
+ &::-moz-focus-inner {
+ margin-block-start: -2px;
+ margin-block-end: -2px;
+ padding: 0;
+ border: 0;
- transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
+ /* Remove the inner border and padding for button in Firefox. */
+ border-style: none;
+ }
&::after {
position: absolute;
inset: 0;
-
margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
+ border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius);
+ transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+ pointer-events: none;
+ content: "";
+ }
- border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)));
+ &:focus {
+ outline: none;
+ }
- transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out;
+ &:disabled,
+ &.is-disabled {
+ cursor: default;
+ }
- 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 */
+ 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)));
+
box-shadow: none;
outline: none;
&::after {
- box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color);
+ box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--highcontrast-actionbutton-focus-indicator-color, 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));
+ }
+
+ /* ideal when we want to disable the button but still allow its content to be focused */
+ &:is(:disabled, .is-disabled, [aria-disabled="true"]) {
+ 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)));
+ }
}
a.spectrum-ActionButton {
- @extend %spectrum-AnchorButton;
+ /* Make link text not selectable */
+ user-select: none;
+
+ /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */
+ -webkit-appearance: none;
}
-/* 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));
+ flex-shrink: 0;
+ max-block-size: 100%;
+ 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;
+ align-self: center;
+ justify-self: center;
+
+ /* Fixes horizontal alignment of text in anchor buttons */
+ text-align: center;
+
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);
text-overflow: ellipsis;
overflow: hidden;
+
+ &:empty {
+ display: none;
+ }
}
.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));
+ display: block;
color: inherit;
+ transform: var(--spectrum-logical-rotation);
+}
- transform: var(--spectrum-logical-rotation,);
+@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;
+ }
+
+ .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;
+
+ &:is(:disabled, .is-disabled, [aria-disabled="true"]):not(:where(.is-selected, [aria-pressed="true"], [aria-expanded="true"])) {
+ --highcontrast-actionbutton-border-color: Canvas;
+ }
+ }
+
+ /* Interaction shows a change in border color. */
+ &:hover,
+ &:active,
+ &:focus-visible {
+ --highcontrast-actionbutton-border-color: Highlight;
+ }
+
+ &:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
+ --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 400dfbfcaa8..09f5a7dfafd 100644
--- a/components/actionbutton/package.json
+++ b/components/actionbutton/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionbutton",
- "version": "7.2.0",
+ "version": "8.0.0-next.4",
"description": "The Spectrum CSS action button component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,15 +19,13 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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": {
@@ -38,9 +36,8 @@
}
},
"devDependencies": {
- "@spectrum-css/commons": "11.1.0",
- "@spectrum-css/icon": "9.2.0",
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/icon": "10.0.0-next.3",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"keywords": [
"design-system",
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index a08f0f7bbfc..fb5fc92084b 100644
--- a/components/actionbutton/stories/actionbutton.stories.js
+++ b/components/actionbutton/stories/actionbutton.stories.js
@@ -1,22 +1,20 @@
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 { isActive, isDisabled, isEmphasized, isFocused, isHovered, isOpen, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
+import { ActionButtonGroup } from "./actionbutton.test.js";
+import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js";
+
+// Local assets to render the component styles and structure
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
-import { ActionButtonGroup } from "./actionbutton.test.js";
-import { ActionButtonsWithIconOptions, IconOnlyOption, 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 +23,7 @@ export default {
size: size(["xs", "s", "m", "l", "xl"]),
iconName: {
...(IconStories?.argTypes?.iconName ?? {}),
+ name: "Workflow icon",
if: false,
},
label: {
@@ -37,9 +36,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,
@@ -53,8 +58,8 @@ export default {
control: "boolean",
},
hasPopup: {
- name: "Has popup",
- description: "If the button triggers a popup action, this should be set to reflect the type of element that pops-up.",
+ name: "Has pop-up",
+ description: "If the button triggers a popover element to open, this should be set to reflect the semantic type of that element.",
type: { name: "string" },
table: {
type: { summary: "string" },
@@ -63,7 +68,26 @@ export default {
control: "select",
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
},
- staticColor,
+ hasLongPress: {
+ name: "Long press",
+ description: "If the trigger supports a long-press action which triggers the menu, this should be set to true.",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Accessibility",
+ },
+ control: "boolean",
+ },
+ isOpen: {
+ ...isOpen,
+ name: "Popover open",
+ description: "This should be true when the popover element is open.",
+ if: { arg: "hasPopup", truthy: true },
+ },
+ staticColor: {
+ ...staticColor,
+ if: { arg: "isEmphasized", truthy: false },
+ },
},
args: {
rootClass: "spectrum-ActionButton",
@@ -71,6 +95,7 @@ export default {
isQuiet: false,
isEmphasized: false,
hasPopup: "false",
+ hasLongPress: false,
isActive: false,
isFocused: false,
isHovered: false,
@@ -82,20 +107,30 @@ export default {
},
parameters: {
actions: {
- handles: ["click .spectrum-ActionButton:not([disabled])"],
+ handles: ["click .spectrum-ActionButton:not([disabled])", "mousedown .spectrum-ActionButton:not([disabled])", "mouseup .spectrum-ActionButton:not([disabled])", "touchstart .spectrum-ActionButton:not([disabled])", "touchend .spectrum-ActionButton:not([disabled])"],
},
design: {
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 +141,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 +154,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 +169,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 +180,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 +197,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 (currently the standard is 300ms) 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 +229,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 +273,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..7e65e449655 100644
--- a/components/actionbutton/stories/actionbutton.test.js
+++ b/components/actionbutton/stories/actionbutton.test.js
@@ -17,12 +17,14 @@ export const ActionButtons = (args, context) => {
${Template({
...args,
hasPopup: "true",
+ hasLongPress: true,
hideLabel: true,
}, context)}
${Template({
...args,
iconName: undefined,
hasPopup: "true",
+ hasLongPress: true,
}, context)}
`;
@@ -62,11 +64,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 +73,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..a45b497b476 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
@@ -57,7 +54,9 @@ export const Template = ({
isFocused = false,
isActive = false,
isDisabled = false,
+ isOpen = false,
hasPopup = "false",
+ hasLongPress = false,
popupId,
hideLabel = false,
staticColor,
@@ -76,7 +75,8 @@ export const Template = ({
aria-label=${ifDefined(hideLabel ? label : undefined)}
aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
- aria-pressed=${isSelected ? "true" : "false"}
+ aria-pressed=${ifDefined(isSelected ? "true" : undefined)}
+ aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
class=${classMap({
[rootClass]: true,
[`${rootClass}--size${size?.toUpperCase()}`]:
@@ -86,7 +86,6 @@ export const Template = ({
[`${rootClass}--static${capitalize(staticColor)}`]:
typeof staticColor !== "undefined",
["is-disabled"]: isDisabled,
- ["is-selected"]: isSelected,
["is-hover"]: isHovered,
["is-focus-visible"]: isFocused,
["is-active"]: isActive,
@@ -94,25 +93,37 @@ export const Template = ({
})}
id=${id}
data-testid=${testId ?? id}
+ popovertarget=${ifDefined(hasPopup && hasPopup !== "false" ? popupId : undefined)}
role=${ifDefined(role)}
style=${styleMap(customStyles)}
?disabled=${isDisabled}
- @click=${onclick ?? function() {
- updateArgs({
- isSelected: !isSelected
- });
+ @click=${function () {
+ if (isDisabled) return;
+ if (typeof onclick === "function") onclick();
+ else {
+ updateArgs({
+ isSelected: !isSelected,
+ isOpen: !isOpen,
+ });
+ }
}}
- @focusin=${function() {
+ @focusin=${function () {
updateArgs({ isFocused: true });
}}
@focusout=${function() {
updateArgs({ isFocused: false });
}}
>
- ${when(hasPopup && hasPopup !== "false", () =>
+ ${when(hasLongPress && 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 +145,78 @@ export const Template = ({
`;
};
+/**
+ * Displays multiple action buttons in a row, with different combinations of
+ * label, icon, and hold button (has pop-up).
+ */
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({
+ hasLongPress: true,
+ }, context),
+ Template({
...args,
iconName: undefined,
hasPopup: "true",
- }, context)}
- `
+ hasLongPress: true,
+ }, context)
+ ],
}, context);
+/**
+ * Displays two action buttons in a row:
+ * - icon only action button
+ * - icon only action button with hold button (has pop-up)
+ */
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({
+ hasLongPress: true,
+ }, context),
+ Template({
...args,
hideLabel: true,
isQuiet: true,
hasPopup: "true",
- }, context)}
- `
+ hasLongPress: true,
+ }, 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 +225,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 be6353eb9cd..00000000000
--- a/components/actionbutton/themes/express.css
+++ /dev/null
@@ -1,77 +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
+
+
+```
+
+### Menu refinements
+
+Updates `@spectrum-css/menu` styles to align with latest Spectrum 2 design specifications and improve accessibility.
+
+- Updated `.is-selectableMultiple .spectrum-Menu-itemCheckbox` to `.is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox` to prevent clash with the `.is-selectable` placement.
+- Non-breaking; no class or DOM changes required.
+
+### Action button refinements
+
+- Selection styling now applies when components use ARIA pressed/expanded semantics, not just `.is-selected`.
+- Implemented with `:where()` to keep selector specificity low and prevent downstream specificity battles.
+- Non-breaking; no class changes required.
+
+### Action group refinements
+
+Aligns selection behavior of grouped items with action button updates.
+
+- Adds `:where([aria-pressed="true"], [aria-expanded="true"])` alongside `.is-selected` on items to cover more accessibility use-cases while keeping specificity low.
+- Non-breaking; no class changes required.
+
+## 8.0.0-next.3
+
+### Major Changes
+
+📝 [#4014](https://github.com/adobe/spectrum-css/pull/4014) [`35c066b`](https://github.com/adobe/spectrum-css/commit/35c066b29c311b1bfcf4507075f13b41222ffc84) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`.
+
+## 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.2.0
### Minor Changes
@@ -20,7 +133,9 @@ Minor linting fix of replacing `rgba` to the `rgb` shorthand syntax.
### 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..8a5fd1c4424 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -2,33 +2,28 @@
"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.spectrum-ActionButton--emphasized:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".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(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
+ ".spectrum-ActionButton.spectrum-ActionButton--quiet:is(:disabled, .is-disabled, [aria-disabled=\"true\"]):not(:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"]))",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
+ ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
+ ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton::-moz-focus-inner",
".spectrum-ActionButton:active",
".spectrum-ActionButton:after",
@@ -37,12 +32,14 @@
".spectrum-ActionButton:focus",
".spectrum-ActionButton:focus-visible",
".spectrum-ActionButton:focus-visible:after",
+ ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
".spectrum-ActionButton:hover",
- "[dir=\"rtl\"] .spectrum-ActionButton",
+ ".spectrum-ActionButton:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
+ ".spectrum-ActionButton:is(:disabled, .is-disabled, [aria-disabled=\"true\"])",
+ ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
"a.spectrum-ActionButton"
],
"modifiers": [
- "--mod-actionbutton-animation-duration",
"--mod-actionbutton-background-color-default",
"--mod-actionbutton-background-color-default-selected",
"--mod-actionbutton-background-color-default-selected-emphasized",
@@ -56,13 +53,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",
@@ -80,20 +71,15 @@
"--mod-actionbutton-edge-to-text",
"--mod-actionbutton-edge-to-visual",
"--mod-actionbutton-edge-to-visual-only",
- "--mod-actionbutton-focus-indicator-border-radius",
- "--mod-actionbutton-focus-indicator-color",
- "--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 +87,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 +147,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 +174,9 @@
"--spectrum-font-size-75",
"--spectrum-gray-100",
"--spectrum-gray-200",
- "--spectrum-gray-50",
- "--spectrum-line-height-100",
+ "--spectrum-gray-25",
"--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 +195,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 +210,17 @@
"--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"
+ "--mod-button-font-family"
],
"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..c9f7c7899a2 100644
--- a/components/actionbutton/index.css
+++ b/components/actionbutton/index.css
@@ -1,329 +1,478 @@
/*!
- * 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
+
+
+
+
+
+
+
+
+```
+
+### Menu refinements
+
+Updates `@spectrum-css/menu` styles to align with latest Spectrum 2 design specifications and improve accessibility.
+
+- Updated `.is-selectableMultiple .spectrum-Menu-itemCheckbox` to `.is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox` to prevent clash with the `.is-selectable` placement.
+- Non-breaking; no class or DOM changes required.
-📝 [#4218](https://github.com/adobe/spectrum-css/pull/4218) [`2df53f8`](https://github.com/adobe/spectrum-css/commit/2df53f8b9ef6d6a031ca99726aa7f0475443ca03) Thanks [@castastrophe](https://github.com/castastrophe)!
+### Action button refinements
+
+- Selection styling now applies when components use ARIA pressed/expanded semantics, not just `.is-selected`.
+- Implemented with `:where()` to keep selector specificity low and prevent downstream specificity battles.
+- Non-breaking; no class changes required.
+
+### Action group refinements
+
+Aligns selection behavior of grouped items with action button updates.
+
+- Adds `:where([aria-pressed="true"], [aria-expanded="true"])` alongside `.is-selected` on items to cover more accessibility use-cases while keeping specificity low.
+- Non-breaking; no class changes required.
+
+## 7.0.0-next.2
+
+### Major Changes
-Ensure accurate exports are present for each component. Specifically, adding `themes/*` assets where present and removing`index-*.css` exports where those assets do not exist.
+📝 [#4249](https://github.com/adobe/spectrum-css/pull/4249) [`9629fe3`](https://github.com/adobe/spectrum-css/commit/9629fe37cad996d47c827a3eabcdf39092a27b0d) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+This update removes `--mod-*` custom property hooks per SWC-1264, see also the RFC for extensible styling.
+
+- Remove all `--mod-*` custom property hooks.
+- Keep existing class selectors and variants unchanged.
+- Update stories to reflect the removal of the `--mod-*` override layer.
+
+Breaking change: the `--mod-*` override layer is removed. Consumers should set `--spectrum-*` variables directly where customization is needed.
+
+## 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
@@ -226,7 +307,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
@@ -342,7 +423,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
@@ -378,7 +459,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
@@ -431,6 +512,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..aee1c9d6b00 100644
--- a/components/actiongroup/dist/metadata.json
+++ b/components/actiongroup/dist/metadata.json
@@ -2,62 +2,36 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ActionGroup",
- ".spectrum-ActionGroup .spectrum-ActionGroup-item",
- ".spectrum-ActionGroup .spectrum-ActionGroup-item:focus-visible",
- ".spectrum-ActionGroup--compact",
- ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)",
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
- ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
- ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
+ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
- ".spectrum-ActionGroup--sizeL",
- ".spectrum-ActionGroup--sizeM",
- ".spectrum-ActionGroup--sizeS",
- ".spectrum-ActionGroup--sizeXL",
- ".spectrum-ActionGroup--sizeXS",
- ".spectrum-ActionGroup--vertical",
+ ".spectrum-ActionGroup-item",
+ ".spectrum-ActionGroup-item:focus-visible",
+ ".spectrum-ActionGroup.spectrum-ActionGroup--compact",
+ ".spectrum-ActionGroup.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)",
+ ".spectrum-ActionGroup.spectrum-ActionGroup--sizeS",
+ ".spectrum-ActionGroup.spectrum-ActionGroup--sizeXS",
+ ".spectrum-ActionGroup.spectrum-ActionGroup--vertical",
".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item"
],
- "modifiers": [
- "--mod-actiongroup-border-radius",
- "--mod-actiongroup-border-radius-reset",
- "--mod-actiongroup-button-spacing-reset",
- "--mod-actiongroup-gap-size-compact",
- "--mod-actiongroup-horizontal-spacing-compact",
- "--mod-actiongroup-horizontal-spacing-regular",
- "--mod-actiongroup-vertical-spacing-compact",
- "--mod-actiongroup-vertical-spacing-regular"
- ],
- "component": [
- "--spectrum-actiongroup-border-radius",
- "--spectrum-actiongroup-border-radius-reset",
- "--spectrum-actiongroup-button-spacing-reset",
- "--spectrum-actiongroup-gap-size-compact",
- "--spectrum-actiongroup-horizontal-spacing-compact",
- "--spectrum-actiongroup-horizontal-spacing-regular",
- "--spectrum-actiongroup-vertical-spacing-compact",
- "--spectrum-actiongroup-vertical-spacing-regular"
- ],
+ "modifiers": [],
+ "component": ["--spectrum-actiongroup-spacing"],
"global": [
+ "--spectrum-actionbutton-focus-indicator-border-radius",
"--spectrum-corner-radius-100",
"--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"],
+ "passthroughs": [],
"high-contrast": []
}
diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css
index bbd26cb0f65..56a619c4c23 100644
--- a/components/actiongroup/index.css
+++ b/components/actiongroup/index.css
@@ -11,94 +11,82 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-ActionGroup {
- --spectrum-actiongroup-button-spacing-reset: 0;
- --spectrum-actiongroup-border-radius-reset: 0;
- --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100);
-}
+ --spectrum-actiongroup-spacing: var(--spectrum-spacing-100);
-.spectrum-ActionGroup--sizeXS,
-.spectrum-ActionGroup--sizeS {
- --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-75);
- --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
-}
+ &.spectrum-ActionGroup--sizeXS,
+ &.spectrum-ActionGroup--sizeS {
+ --spectrum-actiongroup-spacing: var(--spectrum-spacing-75);
+ }
-.spectrum-ActionGroup--sizeM,
-.spectrum-ActionGroup--sizeL,
-.spectrum-ActionGroup--sizeXL {
- --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100);
- --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100);
-}
+ &.spectrum-ActionGroup--compact {
+ /* account for button border */
+ --spectrum-actiongroup-spacing: -1px;
+ }
-.spectrum-ActionGroup {
display: flex;
flex-wrap: wrap;
- gap: var(--mod-actiongroup-horizontal-spacing-regular, var(--spectrum-actiongroup-horizontal-spacing-regular));
-
- .spectrum-ActionGroup-item {
- flex-shrink: 0;
+ gap: var(--spectrum-actiongroup-spacing);
- /* Focus indicator should appear above hovered and selected borders */
- &:focus-visible {
- z-index: 3;
- }
+ &.spectrum-ActionGroup--vertical {
+ display: inline-flex;
+ flex-direction: column;
}
- &:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) {
- .spectrum-ActionGroup-item {
- flex-shrink: 0;
+ &.spectrum-ActionGroup--compact {
+ gap: 0;
+
+ &:not(.spectrum-ActionGroup--quiet) {
+ flex-wrap: nowrap;
}
}
}
-.spectrum-ActionGroup--vertical {
- gap: var(--mod-actiongroup-vertical-spacing-regular, var(--spectrum-actiongroup-vertical-spacing-regular));
- display: inline-flex;
- flex-direction: column;
-}
+.spectrum-ActionGroup-item {
+ flex-shrink: 0;
-.spectrum-ActionGroup--compact {
- gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
-}
+ /* Focus indicator should appear above hovered and selected borders */
+ &:focus-visible {
+ z-index: 3;
+ }
-.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) {
- flex-wrap: nowrap;
+ .spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) & {
+ flex-shrink: 0;
+ }
- .spectrum-ActionGroup-item {
+ .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) & {
position: relative;
- border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
+ border-radius: 0;
z-index: 0;
&:first-child {
/* @passthrough -- Action button styling */
- --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+ --spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-corner-radius-100) 0px 0px var(--spectrum-corner-radius-100);
- border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
+ border-start-start-radius: var(--spectrum-corner-radius-100);
+ border-end-start-radius: var(--spectrum-corner-radius-100);
+ margin-inline-start: 0;
}
& + .spectrum-ActionGroup-item {
/* @passthrough -- Action button styling */
- --mod-actionbutton-focus-indicator-border-radius: 0px;
+ --spectrum-actionbutton-focus-indicator-border-radius: 0px;
- margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
- margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
+ margin-inline-start: var(--spectrum-actiongroup-spacing);
+ margin-inline-end: var(--spectrum-actiongroup-spacing);
}
&:last-child {
/* @passthrough -- Action button styling */
- --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px;
+ --spectrum-actionbutton-focus-indicator-border-radius: 0px var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0px;
- border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact));
- margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
+ border-start-end-radius: var(--spectrum-corner-radius-100);
+ border-end-end-radius: var(--spectrum-corner-radius-100);
+ margin-inline-start: var(--spectrum-actiongroup-spacing);
+ margin-inline-end: 0;
}
- &.is-selected {
+ &:where(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
z-index: 1;
}
@@ -115,44 +103,40 @@
inline-size: auto;
}
}
-}
-
-.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) {
- gap: var(--mod-actiongroup-gap-size-compact, var(--spectrum-actiongroup-gap-size-compact));
- .spectrum-ActionGroup-item {
- border-radius: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
+ .spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) & {
+ border-radius: 0;
&:first-child {
/* @passthrough -- Action button styling */
- --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px;
+ --spectrum-actionbutton-focus-indicator-border-radius: var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100) 0px 0px;
- border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
- margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
- margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
+ border-start-start-radius: var(--spectrum-corner-radius-100);
+ border-start-end-radius: var(--spectrum-corner-radius-100);
+ margin-inline-end: 0;
+ margin-block-start: var(--spectrum-actiongroup-spacing);
+ margin-block-end: var(--spectrum-actiongroup-spacing);
}
& + .spectrum-ActionGroup-item {
- margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
- margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
- margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
- margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
+ margin-inline-start: 0;
+ margin-inline-end: 0;
+ margin-block-start: 0;
+ margin-block-end: var(--spectrum-actiongroup-spacing);
}
&:last-child {
/* @passthrough -- Action button styling */
- --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
+ --spectrum-actionbutton-focus-indicator-border-radius: 0px 0px var(--spectrum-corner-radius-100) var(--spectrum-corner-radius-100);
- border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
- margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact));
- margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset));
+ border-end-start-radius: var(--spectrum-corner-radius-100);
+ border-end-end-radius: var(--spectrum-corner-radius-100);
+ margin-block-start: var(--spectrum-actiongroup-spacing);
+ margin-block-end: 0;
}
}
-}
-.spectrum-ActionGroup--justified .spectrum-ActionGroup-item {
- flex-grow: 1;
+ .spectrum-ActionGroup--justified & {
+ flex-grow: 1;
+ }
}
diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json
index f4e5f9ef555..4ac00486f74 100644
--- a/components/actiongroup/package.json
+++ b/components/actiongroup/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actiongroup",
- "version": "6.2.0",
+ "version": "7.0.0-next.3",
"description": "The Spectrum CSS actiongroup component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,15 +19,13 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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": {
@@ -38,8 +36,8 @@
}
},
"devDependencies": {
- "@spectrum-css/actionbutton": "7.2.0",
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/actionbutton": "8.0.0-next.4",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"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
+
+
+
+
+
+
+
+
+```
+
+### Menu refinements
+
+Updates `@spectrum-css/menu` styles to align with latest Spectrum 2 design specifications and improve accessibility.
+
+- Updated `.is-selectableMultiple .spectrum-Menu-itemCheckbox` to `.is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox` to prevent clash with the `.is-selectable` placement.
+- Non-breaking; no class or DOM changes required.
+
+### Action button refinements
+
+- Selection styling now applies when components use ARIA pressed/expanded semantics, not just `.is-selected`.
+- Implemented with `:where()` to keep selector specificity low and prevent downstream specificity battles.
+- Non-breaking; no class changes required.
+
+### Action group refinements
+
+Aligns selection behavior of grouped items with action button updates.
+
+- Adds `:where([aria-pressed="true"], [aria-expanded="true"])` alongside `.is-selected` on items to cover more accessibility use-cases while keeping specificity low.
+- Non-breaking; no class changes required.
+
+## 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.2.0
### Minor Changes
@@ -174,6 +252,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/dist/metadata.json b/components/actionmenu/dist/metadata.json
new file mode 100644
index 00000000000..530a08aae34
--- /dev/null
+++ b/components/actionmenu/dist/metadata.json
@@ -0,0 +1,9 @@
+{
+ "sourceFile": "index.css",
+ "selectors": [".spectrum-ActionMenu", ".spectrum-ActionMenu-popover"],
+ "modifiers": [],
+ "component": ["--spectrum-actionmenu-button-to-menu-gap"],
+ "global": ["--spectrum-popover-animation-distance", "--spectrum-spacing-100"],
+ "passthroughs": [],
+ "high-contrast": []
+}
diff --git a/components/actionmenu/index.css b/components/actionmenu/index.css
new file mode 100644
index 00000000000..3d7598380aa
--- /dev/null
+++ b/components/actionmenu/index.css
@@ -0,0 +1,32 @@
+/*!
+ * 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
+
+
+
+
+
+
+ *
+ *
+ *
-
+ */
+
+.spectrum-ActionMenu {
+ --spectrum-actionmenu-button-to-menu-gap: var(--spectrum-spacing-100);
+}
+
+.spectrum-ActionMenu-popover {
+ /* @passthrough */
+ --spectrum-popover-animation-distance: var(--spectrum-actionmenu-button-to-menu-gap);
+}
diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json
index 10f8d6f2106..8412a69b1d4 100644
--- a/components/actionmenu/package.json
+++ b/components/actionmenu/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/actionmenu",
- "version": "7.2.0",
+ "version": "8.0.0-next.2",
"description": "The Spectrum CSS actionmenu component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -14,17 +14,21 @@
"url": "https://github.com/adobe/spectrum-css/issues"
},
"exports": {
+ ".": "./dist/index.css",
"./*.md": "./*.md",
"./package.json": "./package.json",
+ "./dist/*": "./dist/*",
+ "./index.css": "./dist/index.css",
+ "./metadata.json": "./dist/metadata.json",
"./stories/*": "./stories/*"
},
- "main": "README.md",
+ "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": {
@@ -44,18 +48,20 @@
}
},
"devDependencies": {
- "@spectrum-css/actionbutton": "7.2.0",
- "@spectrum-css/icon": "9.2.0",
- "@spectrum-css/menu": "9.3.0",
- "@spectrum-css/popover": "8.3.0",
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/actionbutton": "8.0.0-next.4",
+ "@spectrum-css/icon": "10.0.0-next.3",
+ "@spectrum-css/menu": "10.0.0-next.6",
+ "@spectrum-css/popover": "9.0.0-next.5",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"keywords": [
"design-system",
"spectrum",
"spectrum-css",
"adobe",
- "adobe-spectrum"
+ "adobe-spectrum",
+ "component",
+ "css"
],
"publishConfig": {
"access": "public"
diff --git a/tools/generator/templates/project.json.hbs b/components/actionmenu/project.json
similarity index 90%
rename from tools/generator/templates/project.json.hbs
rename to components/actionmenu/project.json
index 6f68b7e48f7..5b51f022edd 100644
--- a/tools/generator/templates/project.json.hbs
+++ b/components/actionmenu/project.json
@@ -1,6 +1,6 @@
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
- "name": "{{ folderName }}",
+ "name": "actionmenu",
"tags": ["component"],
"targets": {
"build": {},
diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js
index 04000663c59..4ca19fc6807 100644
--- a/components/actionmenu/stories/actionmenu.stories.js
+++ b/components/actionmenu/stories/actionmenu.stories.js
@@ -1,44 +1,58 @@
+import { ArgGrid, Container } from "@spectrum-css/preview/decorators/utilities.js";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { isOpen } from "@spectrum-css/preview/types";
+
import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
-import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
-import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isOpen } from "@spectrum-css/preview/types";
-import packageJson from "../package.json";
+
+import { Template as IconTemplate } from "@spectrum-css/icon/stories/template.js";
import { ActionMenuGroup } from "./actionmenu.test.js";
+import { Template } from "./template.js";
+
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
/**
- * The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu.
+ * Action menu allows users to access and execute various commands or tasks related to their current workflow. It's typically triggered from an action button by user interaction.
+ *
+ * Note that the accessibility roles are different for an action menu compared to a normal menu. The action menu is a combination of a menu, popover, and action button.
*/
export default {
title: "Action menu",
component: "ActionMenu",
argTypes: {
- withTip: Popover.argTypes.withTip,
- position: Popover.argTypes.position,
- isOpen,
- iconName: {
- ...(IconStories?.argTypes?.iconName ?? {}),
- if: false,
+ position: {
+ ...Popover.argTypes.position,
+ options: [
+ "bottom-start",
+ "bottom-end",
+ "start-top",
+ "end-top",
+ ]
},
- label: {
- name: "Label",
- type: { name: "string" },
+ isOpen,
+ hasLongPress: {
+ name: "Long press",
+ description: "If the trigger supports a long-press action which triggers the menu, this should be set to true.",
+ type: { name: "boolean" },
table: {
- type: { summary: "string" },
- category: "Content",
+ type: { summary: "boolean" },
+ category: "Accessibility",
},
- control: { type: "text" },
+ control: "boolean",
},
- items: { table: { disable: true } },
- id: { table: { disable: true } },
- testId: { table: { disable: true } },
- triggerId: { table: { disable: true } },
+ menuArgs: { table: { disable: true } },
+ triggerArgs: { table: { disable: true } },
},
args: {
- isOpen: false,
- withTip: Popover.args.withTip,
- position: Popover.args.position,
+ isOpen: true,
+ position: "bottom-start",
+ hasLongPress: false,
+ triggerArgs: {
+ iconName: "More",
+ iconSet: "workflow",
+ },
},
parameters: {
actions: {
@@ -53,36 +67,227 @@ export default {
url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=20959-21513&node-type=frame&t=jbePQKK1yLdrHG2M-11",
},
packageJson,
- docs: {
- story: {
- height: "200px",
- }
- }
+ metadata,
+ status: {
+ type: "migrated",
+ },
},
+ tags: ["migrated"],
};
export const Default = ActionMenuGroup.bind({});
Default.args = {
+ triggerArgs: {
+ iconName: "AddCircle",
+ label: "Add",
+ },
+ menuArgs: {
+ hasActions: true,
+ selectionMode: "multiple",
+ items: [{
+ heading: "Menu section header",
+ description: "Menu section description",
+ items: [{
+ label: "Menu item",
+ iconName: "Circle",
+ },
+ {
+ label: "Menu item",
+ iconName: "Circle",
+ },
+ {
+ label: "Menu item",
+ iconName: "Circle",
+ }],
+ }, {
+ heading: "Menu section header",
+ description: "Menu section description",
+ selectionMode: "none",
+ hasActions: false,
+ items: [{
+ label: "Menu item",
+ iconName: "Circle",
+ },
+ {
+ label: "Menu item",
+ iconName: "Circle",
+ },
+ {
+ label: "Menu item",
+ iconName: "Circle",
+ },],
+ }],
+ },
+};
+
+// ********* DOCS ONLY ********* //
+/**
+ * By default, the menu is opened by pressing the trigger element or activating it via the Space or Enter keys. However, there may be cases where the trigger should perform a separate action on press such as selection, and should only display the menu when long pressed. For this use-case, the menu will only be opened when pressing and holding the trigger or by using the Option (Alt on Windows) + Down arrow/Up arrow keys while focusing the trigger.
+ *
+ * This example illustrates the expected visuals and states of the action menu for a trigger with both long press and short press behaviors.
+ *
+ * Please note that the long press functionality is not implemented in this documentation and the example serves only as a visual reference.
+ */
+export const LongPress = Template.bind({});
+LongPress.args = {
+ position: "end-top",
+ hasLongPress: true,
isOpen: true,
- position: "bottom",
- label: "More actions",
- iconName: "More",
- items: [
- {
- label: "Action 1",
- },
- {
- label: "Action 2",
- },
- {
- label: "Action 3",
+ triggerArgs: {
+ iconName: "CropRotate",
+ },
+ menuArgs: {
+ customStyles: {
+ "--mod-menu-inline-size": "max-content",
},
- {
- label: "Action 4",
+ selectionMode: "single",
+ items: [{
+ label: "Crop rotate",
+ iconName: "CropRotate",
+ isSelected: true,
+ }, {
+ label: "Slice",
+ iconName: "VectorDraw",
+ }, {
+ label: "Clone stamp",
+ iconName: "StampClone",
+ }],
+ },
+};
+LongPress.tags = ["!dev"];
+LongPress.parameters = {
+ chromatic: {
+ disableSnapshot: true,
+ },
+};
+
+/**
+ * Action menus can be positioned in four locales relative to the trigger but only one menu can be triggered at a single time.
+ */
+export const PlacementOptions = (args, context) => ArgGrid({
+ Template,
+ argKey: "position",
+ withBorder: false,
+ ...args,
+}, context);
+PlacementOptions.args = {
+ triggerArgs: {
+ iconName: "More",
+ },
+ menuArgs: {
+ customStyles: {
+ "--mod-menu-inline-size": "max-content",
},
+ items: [{
+ label: "Details",
+ iconName: "FileText"
+ }, {
+ label: "Share",
+ iconName: "Share"
+ }, {
+ label: "Remove",
+ iconName: "Delete"
+ }],
+ },
+};
+PlacementOptions.tags = ["!dev"];
+PlacementOptions.parameters = {
+ chromatic: {
+ disableSnapshot: true,
+ },
+};
+
+/**
+ * Icon used is a placeholder and can be swapped with any other from icon set along with corresponding label.
+ */
+export const PlaceholderIcon = (args, context) => Container({
+ withBorder: false,
+ content: [
+ Template(args, context),
+ IconTemplate({
+ iconName: "ArrowRight400",
+ setName: "ui",
+ fill: "var(--spectrum-gray-400)",
+ customStyles: {
+ "margin-block-start": "var(--spectrum-spacing-200)",
+ },
+ }, context),
+ Template({
+ ...args,
+ isOpen: true,
+ triggerArgs: {
+ iconName: "AddCircle",
+ label: "Add",
+ },
+ menuArgs: {
+ items: [{
+ heading: "Add new page",
+ items: [
+ {
+ label: "Same size",
+ iconName: "Copy"
+ },
+ {
+ label: "Custom size",
+ iconName: "Properties"
+ },
+ {
+ label: "Duplicate",
+ iconName: "Duplicate"
+ }
+ ]
+ }, {
+ heading: "Edit page",
+ items: [{
+ label: "Edit timeline",
+ iconName: "Clock",
+ description: "Add time to this page"
+ }],
+ }]
+ },
+ }, context),
],
+});
+PlaceholderIcon.args = {
+ triggerArgs: {
+ iconName: "More",
+ label: "",
+ },
+ isOpen: true,
+ menuArgs: {
+ customStyles: {
+ "--mod-menu-inline-size": "max-content",
+ },
+ items: [{
+ heading: "Menu section header",
+ customStyles: {
+ "--mod-menu-inline-size": "100%",
+ },
+ items: [
+ {
+ label: "Menu item",
+ iconName: "Circle"
+ },
+ {
+ label: "Menu item",
+ iconName: "Circle"
+ },
+ {
+ label: "Menu item",
+ iconName: "Circle"
+ }
+ ]
+ }],
+ },
+};
+PlaceholderIcon.tags = ["!dev"];
+PlaceholderIcon.parameters = {
+ chromatic: {
+ disableSnapshot: true,
+ },
};
+
// ********* VRT ONLY ********* //
export const WithForcedColors = ActionMenuGroup.bind({});
WithForcedColors.args = Default.args;
diff --git a/components/actionmenu/stories/actionmenu.test.js b/components/actionmenu/stories/actionmenu.test.js
index 159a70c756b..e91cf61b34a 100644
--- a/components/actionmenu/stories/actionmenu.test.js
+++ b/components/actionmenu/stories/actionmenu.test.js
@@ -1,26 +1,25 @@
-import { Variants } from "@spectrum-css/preview/decorators";
+import { ArgGrid, Variants } from "@spectrum-css/preview/decorators";
import { Template } from "./template.js";
export const ActionMenuGroup = Variants({
Template,
- testData: [{
- wrapperStyles: {
- "min-block-size": "200px",
- "align-items": "flex-start",
- },
- }, {
- testHeading: "Closed menu",
+ withSizes: false,
+ testData: [{}, {
+ testHeading: "Positioning",
+ withStates: false,
+ Template: (args, context) => ArgGrid({
+ Template,
+ argKey: "position",
+ withBorder: false,
+ ...args,
+ }, context),
+ }],
+ stateData: [{
+ testHeading: "Closed",
isOpen: false,
- wrapperStyles: {
- "min-block-size": "50px",
- },
}, {
- testHeading: "Custom icon",
+ testHeading: "Has long press",
+ hasLongPress: true,
isOpen: false,
- iconName: "Add",
- iconSet: "workflow",
- wrapperStyles: {
- "min-block-size": "50px",
- },
- }],
+ }]
});
diff --git a/components/actionmenu/stories/template.js b/components/actionmenu/stories/template.js
index c4bc29768d9..574d7fcdf45 100644
--- a/components/actionmenu/stories/template.js
+++ b/components/actionmenu/stories/template.js
@@ -3,48 +3,75 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js";
import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
import { getRandomId } from "@spectrum-css/preview/decorators";
-export const Template = ({
- id = getRandomId("actionmenu"),
- testId,
- triggerId = getRandomId("actionmenu-trigger"),
- customClasses = [],
- customStyles = {},
- items = [],
- isOpen = false,
- label,
- iconName = "More",
- iconSet = "workflow",
- size = "m",
- ...popoverArgs
-} = {}, context = {}) => {
- return Popover({
- size,
- isOpen,
- withTip: false,
- id,
- testId: testId ?? id,
- triggerId,
- trigger: (passthroughs) =>
- ActionButton({
- ...passthroughs,
- size,
- label,
- hasPopup: "menu",
- iconName,
- iconSet,
- id: triggerId,
- customClasses,
- }, context),
- position: "bottom-start",
- customStyles,
- content: [
- (passthroughs) => Menu({
- ...passthroughs,
- items,
- isOpen,
- size
- }, context)
- ],
- ...popoverArgs,
- }, context);
+import "../index.css";
+
+export const Template = (
+ {
+ rootClass = "spectrum-ActionMenu",
+ id = getRandomId("actionmenu"),
+ testId,
+ triggerId = getRandomId("actionmenu-trigger"),
+ customClasses = [],
+ customStyles = {},
+ isOpen = false,
+ hasLongPress = false,
+ position = "bottom-start",
+ // Object should match the schema of the Menu component
+ menuArgs = {},
+ // Object should match the schema of the ActionButton component (or whatever component is used for the trigger)
+ triggerArgs = {},
+ ...popoverArgs
+ } = {},
+ context = {},
+) => {
+ return Popover(
+ {
+ ...popoverArgs,
+ isOpen,
+ withTip: false,
+ id,
+ testId: testId ?? id,
+ triggerId,
+ trigger: (passthroughs) =>
+ ActionButton(
+ {
+ ...passthroughs,
+ ...triggerArgs,
+ hasPopup: "menu",
+ hasLongPress,
+ id: triggerId,
+ isOpen,
+ isSelected: isOpen,
+ customClasses: [`${rootClass}-trigger`],
+ },
+ context,
+ ),
+ position,
+ customClasses: [`${rootClass}-popover`],
+ customWrapperClasses: [rootClass, ...customClasses],
+ customWrapperStyles: customStyles,
+ content: [
+ (passthroughs) =>
+ Menu(
+ {
+ ...passthroughs,
+ ...menuArgs,
+ customClasses: [
+ `${rootClass}-menu`,
+ ...(passthroughs?.customClasses ?? []),
+ ...(menuArgs?.customClasses ?? []),
+ ],
+ customStyles: {
+ "--mod-menu-inline-size": "100%",
+ ...(passthroughs?.customStyles ?? {}),
+ ...(menuArgs?.customStyles ?? {}),
+ },
+ isOpen,
+ },
+ context,
+ ),
+ ],
+ },
+ context,
+ );
};
diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md
index 30059766fb8..cb32cbfa901 100644
--- a/components/alertbanner/CHANGELOG.md
+++ b/components/alertbanner/CHANGELOG.md
@@ -1,5 +1,44 @@
# Change log
+## 4.0.0-next.3
+
+### Patch Changes
+
+📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+## Minor linting fixes
+
+- Removed unused custom properties across multiple components
+- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate
+- Removed duplicate custom property declarations
+- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`)
+- Removed unnecessary stylelint-disable comments
+
+_No visual or functional changes to components._
+
+## 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.2.0
### Minor Changes
@@ -20,7 +59,9 @@ Minor linting fix of replacing `rgba` to the `rgb` shorthand syntax.
### 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..deed56dd2c9 100644
--- a/components/alertbanner/dist/metadata.json
+++ b/components/alertbanner/dist/metadata.json
@@ -6,82 +6,89 @@
".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 7044f73c610..d3000e6d243 100644
--- a/components/alertbanner/index.css
+++ b/components/alertbanner/index.css
@@ -11,54 +11,65 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
.spectrum-AlertBanner {
--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-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);
/* 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);
+ --spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing);
+
+ /* 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);
- /* @passthrough start */
- /* 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;
- /* @passthrough end */
+.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 {
@@ -66,46 +77,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 8e89148a391..38b3e7f082f 100644
--- a/components/alertbanner/package.json
+++ b/components/alertbanner/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/alertbanner",
- "version": "3.2.0",
+ "version": "4.0.0-next.3",
"description": "The Spectrum CSS alertbanner component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,18 +19,16 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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": {
@@ -50,11 +48,11 @@
}
},
"devDependencies": {
- "@spectrum-css/button": "14.2.0",
- "@spectrum-css/closebutton": "6.2.0",
- "@spectrum-css/divider": "5.2.0",
- "@spectrum-css/icon": "9.2.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.3",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"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`
-
+ ${when(image, () =>
html`
` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, @@ -76,6 +79,7 @@ export const AssetListItem = ({ export const Template = ({ rootClass = "spectrum-AssetList", + isSelectable = false, items = [], customClasses = [], id = getRandomId("assetlist"), @@ -92,6 +96,7 @@ export const Template = ({ callback: AssetListItem, args: { rootClass: `${rootClass}-item`, + isSelectable, }, context })} 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
` 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 ` 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 e583f5f25ff..716193c8466 100644 --- a/components/badge/CHANGELOG.md +++ b/components/badge/CHANGELOG.md @@ -1,5 +1,45 @@ # 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.2.0 ### Minor Changes diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index c8be859d830..5f4c783c596 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -2,98 +2,82 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Badge", - ".spectrum-Badge--accent", - ".spectrum-Badge--blue", - ".spectrum-Badge--celery", - ".spectrum-Badge--chartreuse", - ".spectrum-Badge--cyan", ".spectrum-Badge--fixed-block-end", ".spectrum-Badge--fixed-block-start", ".spectrum-Badge--fixed-inline-end", ".spectrum-Badge--fixed-inline-start", - ".spectrum-Badge--fuchsia", - ".spectrum-Badge--gray", - ".spectrum-Badge--green", - ".spectrum-Badge--indigo", - ".spectrum-Badge--informative", - ".spectrum-Badge--magenta", - ".spectrum-Badge--negative", - ".spectrum-Badge--neutral", - ".spectrum-Badge--notice", - ".spectrum-Badge--orange", - ".spectrum-Badge--positive", - ".spectrum-Badge--purple", - ".spectrum-Badge--red", - ".spectrum-Badge--seafoam", + ".spectrum-Badge--outline:where(.spectrum-Badge--accent)", + ".spectrum-Badge--outline:where(.spectrum-Badge--informative)", + ".spectrum-Badge--outline:where(.spectrum-Badge--negative)", + ".spectrum-Badge--outline:where(.spectrum-Badge--neutral)", + ".spectrum-Badge--outline:where(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)", + ".spectrum-Badge--outline:where(.spectrum-Badge--notice)", + ".spectrum-Badge--outline:where(.spectrum-Badge--positive)", ".spectrum-Badge--sizeL", ".spectrum-Badge--sizeS", ".spectrum-Badge--sizeXL", - ".spectrum-Badge--yellow", + ".spectrum-Badge--subtle", + ".spectrum-Badge--subtle:where(.spectrum-Badge--accent)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--blue)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--brown)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--celery)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--chartreuse)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--cinnamon)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--cyan)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--fuchsia)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--gray)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--green)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--indigo)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--informative)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--magenta)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--negative)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--neutral)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--notice)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--orange)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--pink)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--positive)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--purple)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--red)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--seafoam)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--silver)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--turquoise)", + ".spectrum-Badge--subtle:where(.spectrum-Badge--yellow)", ".spectrum-Badge-icon", ".spectrum-Badge-icon + .spectrum-Badge-label", ".spectrum-Badge-icon--no-label", ".spectrum-Badge-label", ".spectrum-Badge-label:lang(ja)", ".spectrum-Badge-label:lang(ko)", - ".spectrum-Badge-label:lang(zh)" - ], - "modifiers": [ - "--mod-badge-background-color-accent", - "--mod-badge-background-color-blue", - "--mod-badge-background-color-celery", - "--mod-badge-background-color-chartreuse", - "--mod-badge-background-color-cyan", - "--mod-badge-background-color-default", - "--mod-badge-background-color-fuchsia", - "--mod-badge-background-color-gray", - "--mod-badge-background-color-green", - "--mod-badge-background-color-indigo", - "--mod-badge-background-color-informative", - "--mod-badge-background-color-magenta", - "--mod-badge-background-color-negative", - "--mod-badge-background-color-notice", - "--mod-badge-background-color-orange", - "--mod-badge-background-color-positive", - "--mod-badge-background-color-purple", - "--mod-badge-background-color-red", - "--mod-badge-background-color-seafoam", - "--mod-badge-background-color-yellow", - "--mod-badge-corner-radius", - "--mod-badge-font-size", - "--mod-badge-height", - "--mod-badge-icon-only-spacing-horizontal", - "--mod-badge-icon-spacing-horizontal", - "--mod-badge-icon-spacing-vertical-top", - "--mod-badge-icon-text-spacing", - "--mod-badge-label-icon-color", - "--mod-badge-label-spacing-horizontal", - "--mod-badge-label-spacing-vertical-bottom", - "--mod-badge-label-spacing-vertical-top", - "--mod-badge-line-height", - "--mod-badge-line-height-cjk", - "--mod-badge-workflow-icon-size" + ".spectrum-Badge-label:lang(zh)", + ".spectrum-Badge:where(.spectrum-Badge--accent)", + ".spectrum-Badge:where(.spectrum-Badge--blue)", + ".spectrum-Badge:where(.spectrum-Badge--brown)", + ".spectrum-Badge:where(.spectrum-Badge--celery)", + ".spectrum-Badge:where(.spectrum-Badge--chartreuse)", + ".spectrum-Badge:where(.spectrum-Badge--cinnamon)", + ".spectrum-Badge:where(.spectrum-Badge--cyan)", + ".spectrum-Badge:where(.spectrum-Badge--fuchsia)", + ".spectrum-Badge:where(.spectrum-Badge--gray)", + ".spectrum-Badge:where(.spectrum-Badge--green)", + ".spectrum-Badge:where(.spectrum-Badge--indigo)", + ".spectrum-Badge:where(.spectrum-Badge--informative)", + ".spectrum-Badge:where(.spectrum-Badge--magenta)", + ".spectrum-Badge:where(.spectrum-Badge--negative)", + ".spectrum-Badge:where(.spectrum-Badge--neutral)", + ".spectrum-Badge:where(.spectrum-Badge--notice)", + ".spectrum-Badge:where(.spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, .spectrum-Badge--celery)", + ".spectrum-Badge:where(.spectrum-Badge--orange)", + ".spectrum-Badge:where(.spectrum-Badge--pink)", + ".spectrum-Badge:where(.spectrum-Badge--positive)", + ".spectrum-Badge:where(.spectrum-Badge--purple)", + ".spectrum-Badge:where(.spectrum-Badge--red)", + ".spectrum-Badge:where(.spectrum-Badge--seafoam)", + ".spectrum-Badge:where(.spectrum-Badge--silver)", + ".spectrum-Badge:where(.spectrum-Badge--turquoise)", + ".spectrum-Badge:where(.spectrum-Badge--yellow)" ], + "modifiers": [], "component": [ - "--spectrum-badge-background-color-accent", - "--spectrum-badge-background-color-blue", - "--spectrum-badge-background-color-celery", - "--spectrum-badge-background-color-chartreuse", - "--spectrum-badge-background-color-cyan", - "--spectrum-badge-background-color-default", - "--spectrum-badge-background-color-fuchsia", - "--spectrum-badge-background-color-gray", - "--spectrum-badge-background-color-green", - "--spectrum-badge-background-color-indigo", - "--spectrum-badge-background-color-informative", - "--spectrum-badge-background-color-magenta", - "--spectrum-badge-background-color-negative", - "--spectrum-badge-background-color-notice", - "--spectrum-badge-background-color-orange", - "--spectrum-badge-background-color-positive", - "--spectrum-badge-background-color-purple", - "--spectrum-badge-background-color-red", - "--spectrum-badge-background-color-seafoam", - "--spectrum-badge-background-color-yellow", "--spectrum-badge-corner-radius", "--spectrum-badge-font-size", "--spectrum-badge-height", @@ -101,21 +85,28 @@ "--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-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 +134,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"] + "high-contrast": [] } diff --git a/components/badge/index.css b/components/badge/index.css index bf4e458aca8..647593d6906 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,89 +12,26 @@ */ .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ - --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - - /* 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); - - /* 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-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); - --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default); - - /* non-semantic background colors */ - --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default); - --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default); - --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default); - --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default); - --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default); - --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default); - --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default); - --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default); - --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default); - --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default); - --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default); - --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); - /*** 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 */ + /* label */ --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 */ + /* icon */ --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); --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100); - - --highcontrast-badge-border-color: CanvasText; -} - -/* text and icon color is black for these background colors */ -.spectrum-Badge--orange, -.spectrum-Badge--yellow, -.spectrum-Badge--chartreuse, -.spectrum-Badge--celery { - --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 +49,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 +67,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 */ @@ -145,114 +84,271 @@ --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300); } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Badge { - border-color: var(--highcontrast-badge-border-color); - } -} - .spectrum-Badge { - min-block-size: var(--mod-badge-height, var(--spectrum-badge-height)); + box-sizing: border-box; + min-block-size: var(--spectrum-badge-height); inline-size: auto; - display: inline-flex; vertical-align: middle; position: relative; - cursor: default; + border: var(--spectrum-border-width-200) solid transparent; + border-radius: var(--spectrum-badge-corner-radius); - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; + background: var(--spectrum-neutral-subdued-background-color-default); + color: var(--spectrum-white); - border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius)); - border: 1px solid transparent; + /* Show background color under transparent border to correct visual height */ + background-origin: border-box; - 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)); -} + /* Prevent stretch height behavior next to other flex/grid children */ + align-self: start; -/* background color variants */ -.spectrum-Badge--neutral { - background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default)); -} + /* text and icon color is black for these background colors */ + &:where(.spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow, .spectrum-Badge--chartreuse, .spectrum-Badge--celery) { + color: var(--spectrum-black); + } -.spectrum-Badge--accent { - background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent)); -} + /* background color variants */ + &:where(.spectrum-Badge--neutral) { + background: var(--spectrum-neutral-subdued-background-color-default); + } -.spectrum-Badge--informative { - background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative)); -} + &:where(.spectrum-Badge--accent) { + background: var(--spectrum-accent-background-color-default); + } -.spectrum-Badge--negative { - background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative)); -} + &:where(.spectrum-Badge--informative) { + background: var(--spectrum-informative-background-color-default); + } -.spectrum-Badge--positive { - background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive)); -} + &:where(.spectrum-Badge--negative) { + background: var(--spectrum-negative-background-color-default); + } -/* New in S2, not supporting in Foundations yet! */ -.spectrum-Badge--notice { - background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice)); -} + &:where(.spectrum-Badge--positive) { + background: var(--spectrum-positive-background-color-default); + } -/* non-semantic colors */ -.spectrum-Badge--gray { - background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray)); -} + &:where(.spectrum-Badge--notice) { + background: var(--spectrum-notice-background-color-default); + } -.spectrum-Badge--red { - background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red)); -} + /* non-semantic colors */ + &:where(.spectrum-Badge--gray) { + background: var(--spectrum-gray-background-color-default); + } -.spectrum-Badge--orange { - background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange)); -} + &:where(.spectrum-Badge--red) { + background: var(--spectrum-red-background-color-default); + } -.spectrum-Badge--yellow { - background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow)); -} + &:where(.spectrum-Badge--orange) { + background: var(--spectrum-orange-background-color-default); + } -.spectrum-Badge--chartreuse { - background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse)); -} + &:where(.spectrum-Badge--yellow) { + background: var(--spectrum-yellow-background-color-default); + } -.spectrum-Badge--celery { - background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery)); -} + &:where(.spectrum-Badge--chartreuse) { + background: var(--spectrum-chartreuse-background-color-default); + } -.spectrum-Badge--green { - background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green)); -} + &:where(.spectrum-Badge--celery) { + background: var(--spectrum-celery-background-color-default); + } -.spectrum-Badge--seafoam { - background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam)); -} + &:where(.spectrum-Badge--green) { + background: var(--spectrum-green-background-color-default); + } -.spectrum-Badge--cyan { - background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan)); -} + &:where(.spectrum-Badge--seafoam) { + background: var(--spectrum-seafoam-background-color-default); + } -.spectrum-Badge--blue { - background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue)); -} + &:where(.spectrum-Badge--cyan) { + background: var(--spectrum-cyan-background-color-default); + } -.spectrum-Badge--indigo { - background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo)); -} + &:where(.spectrum-Badge--blue) { + background: var(--spectrum-blue-background-color-default); + } + + &:where(.spectrum-Badge--indigo) { + background: var(--spectrum-indigo-background-color-default); + } + + &:where(.spectrum-Badge--purple) { + background: var(--spectrum-purple-background-color-default); + } + + &:where(.spectrum-Badge--fuchsia) { + background: var(--spectrum-fuchsia-background-color-default); + } + + &:where(.spectrum-Badge--magenta) { + background: var(--spectrum-magenta-background-color-default); + } + + &:where(.spectrum-Badge--pink) { + background: var(--spectrum-pink-background-color-default); + } + + &:where(.spectrum-Badge--turquoise) { + background: var(--spectrum-turquoise-background-color-default); + } + + &:where(.spectrum-Badge--brown) { + background: var(--spectrum-brown-background-color-default); + } + + &:where(.spectrum-Badge--cinnamon) { + background: var(--spectrum-cinnamon-background-color-default); + } -.spectrum-Badge--purple { - background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple)); + &:where(.spectrum-Badge--silver) { + background: var(--spectrum-silver-background-color-default); + } } -.spectrum-Badge--fuchsia { - background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia)); +/* Style = subtle */ +.spectrum-Badge--subtle { + color: var(--spectrum-gray-1000); + + /* background color variants */ + &:where(.spectrum-Badge--neutral) { + background: var(--spectrum-neutral-subtle-background-color-default); + } + + &:where(.spectrum-Badge--accent) { + background: var(--spectrum-accent-subtle-background-color-default); + } + + &:where(.spectrum-Badge--informative) { + background: var(--spectrum-informative-subtle-background-color-default); + } + + &:where(.spectrum-Badge--negative) { + background: var(--spectrum-negative-subtle-background-color-default); + } + + &:where(.spectrum-Badge--positive) { + background: var(--spectrum-positive-subtle-background-color-default); + } + + &:where(.spectrum-Badge--notice) { + background: var(--spectrum-notice-subtle-background-color-default); + } + + /* non-semantic colors */ + &:where(.spectrum-Badge--gray) { + background: var(--spectrum-gray-subtle-background-color-default); + } + + &:where(.spectrum-Badge--red) { + background: var(--spectrum-red-subtle-background-color-default); + } + + &:where(.spectrum-Badge--orange) { + background: var(--spectrum-orange-subtle-background-color-default); + } + + &:where(.spectrum-Badge--yellow) { + background: var(--spectrum-yellow-subtle-background-color-default); + } + + &:where(.spectrum-Badge--chartreuse) { + background: var(--spectrum-chartreuse-subtle-background-color-default); + } + + &:where(.spectrum-Badge--celery) { + background: var(--spectrum-celery-subtle-background-color-default); + } + + &:where(.spectrum-Badge--green) { + background: var(--spectrum-green-subtle-background-color-default); + } + + &:where(.spectrum-Badge--seafoam) { + background: var(--spectrum-seafoam-subtle-background-color-default); + } + + &:where(.spectrum-Badge--cyan) { + background: var(--spectrum-cyan-subtle-background-color-default); + } + + &:where(.spectrum-Badge--blue) { + background: var(--spectrum-blue-subtle-background-color-default); + } + + &:where(.spectrum-Badge--indigo) { + background: var(--spectrum-indigo-subtle-background-color-default); + } + + &:where(.spectrum-Badge--purple) { + background: var(--spectrum-purple-subtle-background-color-default); + } + + &:where(.spectrum-Badge--fuchsia) { + background: var(--spectrum-fuchsia-subtle-background-color-default); + } + + &:where(.spectrum-Badge--magenta) { + background: var(--spectrum-magenta-subtle-background-color-default); + } + + &:where(.spectrum-Badge--pink) { + background: var(--spectrum-pink-subtle-background-color-default); + } + + &:where(.spectrum-Badge--turquoise) { + background: var(--spectrum-turquoise-subtle-background-color-default); + } + + &:where(.spectrum-Badge--brown) { + background: var(--spectrum-brown-subtle-background-color-default); + } + + &:where(.spectrum-Badge--cinnamon) { + background: var(--spectrum-cinnamon-subtle-background-color-default); + } + + &:where(.spectrum-Badge--silver) { + background: var(--spectrum-silver-subtle-background-color-default); + } } -.spectrum-Badge--magenta { - background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta)); +/* Style = outline - only valid for semantic colors */ +.spectrum-Badge--outline { + &:where(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice) { + background: var(--spectrum-background-layer-2-color); + color: var(--spectrum-gray-1000); + } + + &:where(.spectrum-Badge--neutral) { + border-color: var(--spectrum-neutral-visual-color); + } + + &:where(.spectrum-Badge--accent) { + border-color: var(--spectrum-accent-visual-color); + } + + &:where(.spectrum-Badge--informative) { + border-color: var(--spectrum-informative-visual-color); + } + + &:where(.spectrum-Badge--negative) { + border-color: var(--spectrum-negative-visual-color); + } + + &:where(.spectrum-Badge--positive) { + border-color: var(--spectrum-positive-visual-color); + } + + &:where(.spectrum-Badge--notice) { + border-color: var(--spectrum-notice-visual-color); + } } /* fixed position variants with border radius 0 on the fixed edge of the component */ @@ -278,21 +374,21 @@ /* label */ .spectrum-Badge-label { - font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size)); - line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height)); + box-sizing: border-box; + font-size: var(--spectrum-badge-font-size); + font-weight: var(--spectrum-medium-font-weight); + line-height: var(--spectrum-line-height-100); - padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal)); - 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-inline-end: calc(var(--spectrum-badge-label-spacing-horizontal) - var(--spectrum-border-width-200)); + padding-inline-start: var(--spectrum-badge-label-spacing-horizontal); + padding-block-start: calc(var(--spectrum-badge-label-spacing-vertical-top) - var(--spectrum-border-width-200)); + padding-block-end: calc(var(--spectrum-badge-label-spacing-vertical-bottom) - var(--spectrum-border-width-200)); /* cjk language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk)); + line-height: var(--spectrum-cjk-line-height-100); } /* remove left padding from label if preceded by an icon */ @@ -303,24 +399,21 @@ /* optional icon */ .spectrum-Badge-icon { - block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); - inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size)); + box-sizing: border-box; + block-size: var(--spectrum-badge-workflow-icon-size); + inline-size: var(--spectrum-badge-workflow-icon-size); /* 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)); + flex: 0 0 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(--spectrum-badge-icon-spacing-horizontal) - var(--spectrum-border-width-200)); /* 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(--spectrum-badge-icon-text-spacing); + margin-block: calc(var(--spectrum-badge-icon-spacing-vertical-top) - var(--spectrum-border-width-200)); } .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: calc(var(--spectrum-badge-icon-only-spacing-horizontal) - var(--spectrum-border-width-200)); } diff --git a/components/badge/package.json b/components/badge/package.json index 2514dac1820..d0bf88e2846 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/badge", - "version": "6.2.0", + "version": "7.0.0-next.2", "description": "The Spectrum CSS badge component", "license": "Apache-2.0", "author": "Adobe", @@ -24,8 +24,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": { @@ -36,8 +36,8 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/icon": "10.0.0-next.3", + "@spectrum-css/tokens": "16.1.0-next.10" }, "keywords": [ "design-system", diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index fb9961227a2..104a0d6e1ca 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: ["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: { @@ -50,7 +61,7 @@ export default { type: { summary: "string" }, category: "Advanced", }, - options: ["none", "fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"], + options: ["fixed-inline-start", "fixed-inline-end", "fixed-block-start", "fixed-block-end"], control: "select", }, }, @@ -58,8 +69,7 @@ export default { rootClass: "spectrum-Badge", size: "m", variant: "neutral", - iconSet: "workflow", - fixed: "none" + iconSet: "workflow" }, parameters: { design: { @@ -68,7 +78,11 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"] }; /** @@ -76,7 +90,7 @@ export default { */ export const Default = BadgeGroup.bind({}); Default.args = { - iconName: "Info", + iconName: "InfoCircle", label: "Badge", }; @@ -84,7 +98,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 +123,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..9b2a21bd4be 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, fixed, customStyles = {}, customClasses = [], @@ -27,6 +28,7 @@ export const Template = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--${variant}`]: typeof variant !== "undefined", + [`${rootClass}--${style}`]: typeof style !== "undefined", [`${rootClass}--${fixed}`]: typeof fixed !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} diff --git a/components/breadcrumb/CHANGELOG.md b/components/breadcrumb/CHANGELOG.md index c97613159bc..c7deeb5318d 100644 --- a/components/breadcrumb/CHANGELOG.md +++ b/components/breadcrumb/CHANGELOG.md @@ -1,5 +1,44 @@ # Change log +## 12.0.0-next.3 + +### Patch Changes + +📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)! + +## Minor linting fixes + +- Removed unused custom properties across multiple components +- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate +- Removed duplicate custom property declarations +- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`) +- Removed unnecessary stylelint-disable comments + +_No visual or functional changes to components._ + +## 12.0.0-next.2 + +### Major Changes + +📝 [#4014](https://github.com/adobe/spectrum-css/pull/4014) [`35c066b`](https://github.com/adobe/spectrum-css/commit/35c066b29c311b1bfcf4507075f13b41222ffc84) Thanks [@castastrophe](https://github.com/castastrophe)! + +This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`. + +## 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.2.0 ### Minor Changes @@ -214,6 +253,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..01ed6639e32 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -2,80 +2,56 @@ "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", - ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Breadcrumbs-itemSeparator" + ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)" ], "modifiers": [ "--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 +61,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..bc62aafbc57 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: rgb(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 d45d2f9ef4a..5fee7b38c67 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/breadcrumb", - "version": "11.2.0", + "version": "12.0.0-next.3", "description": "The Spectrum CSS breadcrumb component", "license": "Apache-2.0", "author": "Adobe", @@ -24,9 +24,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": { @@ -40,9 +40,9 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.2.0", - "@spectrum-css/icon": "9.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.4", + "@spectrum-css/icon": "10.0.0-next.3", + "@spectrum-css/tokens": "16.1.0-next.10" }, "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.
Advanced:- To show an item as disabled, add a key named `isDisabled` with a value of `true`.
- The \"Show dragged item\" control will affect the item with `isDragged` set to `true`.
` )} ${when( - footer && !isQuiet && !isHorizontal && !isGallery, + footer && !isHorizontal && !isGallery, () => html`- * - * 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- -
+ * The clear button component is an in-field button used in [search](/docs/components-search-field--docs) and [tags](/docs/components-tag--docs). */ export default { title: "Clear button", @@ -46,17 +15,19 @@ export default { argTypes: { size: size(["s", "m", "l", "xl"]), isDisabled, - isQuiet, - staticColor: { - ...staticColor, - options: ["white"], + isHovered, + isActive, + isFocusable: { + table: { disable: true }, + type: { name: "boolean" }, }, }, args: { rootClass: "spectrum-ClearButton", size: "m", isDisabled: false, - isQuiet: false, + isHovered: false, + isActive: false, }, parameters: { design: { @@ -65,16 +36,19 @@ export default { }, packageJson, metadata, + status: { + type: "migrated", + }, }, + tags: ["migrated"], }; -/** - * The default size for clear button is medium. - */ - export const Default = ClearButtonGroup.bind({}); Default.args = {}; +/** + * When disabled, the clear button color changes to `--spectrum-disabled-content-color` and is not interactive. + */ export const Disabled = Template.bind({}); Disabled.args = { isDisabled: true, @@ -85,17 +59,36 @@ Disabled.parameters = { }; /** - * The `.spectrum-ClearButton--quiet` class will use a transparent background (including when the Express theme is active). - */ -export const Quiet = Template.bind({}); -Quiet.args = { - isQuiet: true, -}; -Quiet.tags = ["!dev"]; -Quiet.parameters = { - chromatic: { disableSnapshot: true }, -}; + * Use the correct cross icon size that corresponds to the t-shirt size you require for the clear button. The default size is medium. +- - - -**T-Shirt Size** -**Icon Size** -- -spectrum-ClearButton--sizeS -spectrum-css-icon-Cross75 -- -spectrum-ClearButton--sizeM -spectrum-css-icon-Cross100 -- -spectrum-ClearButton--sizeL -spectrum-css-icon-Cross200 -- - -spectrum-ClearButton--sizeXL -spectrum-css-icon-Cross300 -+ +
+ * + */ export const Sizing = (args, context) => Sizes({ Template, withHeading: false, @@ -109,15 +102,6 @@ Sizing.parameters = { }; -export const OverBackground = ClearButtonGroup.bind({}); -OverBackground.tags = ["!dev"]; -OverBackground.args = { - staticColor: "white", -}; -OverBackground.parameters = { - chromatic: { disableSnapshot: true }, -}; - // ********* VRT ONLY ********* // export const WithForcedColors = ClearButtonGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; diff --git a/components/clearbutton/stories/clearbutton.test.js b/components/clearbutton/stories/clearbutton.test.js index 6db9bf89dd4..3421b6cc114 100644 --- a/components/clearbutton/stories/clearbutton.test.js +++ b/components/clearbutton/stories/clearbutton.test.js @@ -9,24 +9,19 @@ export const ClearButtonGroup = Variants({ { testHeading: "Default", }, - { - testHeading: "Quiet", - isQuiet: true, - }, - { - testHeading: "Static white", - staticColor: "white", - }, - { - testHeading: "Static white - quiet", - staticColor: "white", - isQuiet: true, - }, ], stateData: [ { testHeading: "Disabled", isDisabled: true, }, + { + testHeading: "Hover", + isHovered: true, + }, + { + testHeading: "Down", + isActive: true, + }, ] }); diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index 58e90007c04..a8321f114f9 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, + isHovered = false, + isActive = false, size = "m", - isQuiet = false, - staticColor, + isFocusable = true, id = getRandomId("clearbutton"), + onclick = () => {}, customClasses = [], customStyles = {}, }, context) => html` @@ -25,19 +24,17 @@ export const Template = ({ class=${classMap({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - [`${rootClass}--quiet`]: isQuiet, - [`${rootClass}--overBackground`]: staticColor === "white", - /** - * There aren't styles for `--staticWhite` in clear button (yet) - * but this makes it easier to support in the testing grid - */ - [`${rootClass}--staticWhite`]: staticColor === "white", "is-disabled": isDisabled, + "is-hover": isHovered, + "is-active": isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} style=${styleMap(customStyles)} ?disabled=${isDisabled} + tabindex=${isFocusable ? 0 : -1} + aria-hidden=${isFocusable} + @click=${onclick} >+ + + +**T-Shirt Size** +**Icon Size** ++ +spectrum-ClearButton--sizeS +spectrum-css-icon-Cross75 ++ +spectrum-ClearButton--sizeM +spectrum-css-icon-Cross100 ++ +spectrum-ClearButton--sizeL +spectrum-css-icon-Cross200 ++ + +spectrum-ClearButton--sizeXL +spectrum-css-icon-Cross300 +${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`; }; @@ -28,50 +30,44 @@ 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, - isOpen: true, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50, white)" - }, + hasActionMenu: true, }, { 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..5852bca7f15 100644 --- a/components/coachmark/stories/template.js +++ b/components/coachmark/stories/template.js @@ -1,4 +1,4 @@ -import { Template as ActionMenu } from "@spectrum-css/actionmenu/stories/template.js"; +import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; import { Template as CoachIndicator } from "@spectrum-css/coachindicator/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; @@ -10,60 +10,77 @@ 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, + alt = "", + } = {}, + context = {}, +) => { const { globals = {} } = context; const scale = globals.scale ?? "medium"; return html` - ${when(hasImage, () => html` -({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} + id=${ifDefined(id)} > ${Array.from({ length: 3 }).map(() => html` diff --git a/components/coachmark/CHANGELOG.md b/components/coachmark/CHANGELOG.md index 2e57713408f..0c673855a47 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.2.0 ### Minor Changes diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 8bc036d5fca..9286c817c5f 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-edge-to-content-area", "--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..3d78766e888 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-edge-to-content-area); + 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 09e0e78d122..af849a2eda6 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/coachmark", - "version": "9.2.0", + "version": "10.0.0-next.1", "description": "The Spectrum CSS coachmark component", "license": "Apache-2.0", "author": "Adobe", @@ -24,13 +24,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": { @@ -56,13 +56,13 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.2.0", - "@spectrum-css/actionmenu": "7.2.0", - "@spectrum-css/button": "14.2.0", - "@spectrum-css/buttongroup": "9.2.0", - "@spectrum-css/menu": "9.3.0", - "@spectrum-css/popover": "8.3.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/actionbutton": "8.0.0-next.4", + "@spectrum-css/actionmenu": "8.0.0-next.2", + "@spectrum-css/button": "15.0.0-next.2", + "@spectrum-css/buttongroup": "10.0.0-next.1", + "@spectrum-css/menu": "10.0.0-next.6", + "@spectrum-css/popover": "9.0.0-next.5", + "@spectrum-css/tokens": "16.1.0-next.10" }, "keywords": [ "design-system", diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index e13b70fce24..a0fe9e0416c 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: { @@ -60,22 +94,22 @@ export default { }, packageJson, metadata, - docs: { - story: { - height: "300px", - } - } + 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 = { @@ -83,21 +117,45 @@ Standard.parameters = { disableSnapshot: true, }, }; +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", - }, +}; + +/** 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 = { + 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, }, }; @@ -107,6 +165,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..7189c7f0402 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)}+ > + ${CoachContainer(args, context)} +-- `)} -
- + ${when( + hasImage, + () => html` +`; }; 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++ `, + )} ++
-${title}- ${when(hasActionMenu, () => html` - ` + label: "More actions", + hideLabel: true, + customClasses: [`${rootClass}-action-menu`], + }, + context, + ), )}${content}++ ${content} +${ColorHandle({ isDisabled, + isFocused, customClasses: [`${rootClass}-handle`], customStyles: { "--spectrum-picked-color": selectedColor, diff --git a/components/colorhandle/CHANGELOG.md b/components/colorhandle/CHANGELOG.md index 26edda6a0e0..b8a3a0d3606 100644 --- a/components/colorhandle/CHANGELOG.md +++ b/components/colorhandle/CHANGELOG.md @@ -1,5 +1,42 @@ # Change log +## 11.0.0-next.2 + +### Patch Changes + +📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)! + +## Minor linting fixes + +- Removed unused custom properties across multiple components +- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate +- Removed duplicate custom property declarations +- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`) +- Removed unnecessary stylelint-disable comments + +_No visual or functional changes to components._ + +## 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.2.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 6597cfe59df..4a44307da48 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 dc89771d516..e472ef29c22 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorhandle", - "version": "10.2.0", + "version": "11.0.0-next.2", "description": "The Spectrum CSS Color Handle component", "license": "Apache-2.0", "author": "Adobe", @@ -24,9 +24,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": { @@ -40,9 +40,9 @@ } }, "devDependencies": { - "@spectrum-css/colorloupe": "7.2.0", - "@spectrum-css/opacitycheckerboard": "4.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorloupe": "8.0.0-next.1", + "@spectrum-css/opacitycheckerboard": "5.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.10" }, "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 e93f3015c43..9adf440c4bc 100644 --- a/components/colorloupe/CHANGELOG.md +++ b/components/colorloupe/CHANGELOG.md @@ -1,5 +1,20 @@ # Change log +## 8.0.0-next.1 + +### Major Changes + +📝 [#4014](https://github.com/adobe/spectrum-css/pull/4014) [`35c066b`](https://github.com/adobe/spectrum-css/commit/35c066b29c311b1bfcf4507075f13b41222ffc84) Thanks [@castastrophe](https://github.com/castastrophe)! + +This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`. + +## 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.2.0 ### Minor Changes diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 245bb476b1f..8ec7836e2ed 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -9,8 +9,7 @@ ".spectrum-ColorLoupe-outer-border", ".spectrum-ColorLoupe.is-disabled", ".spectrum-ColorLoupe.is-open", - ".spectrum-ColorLoupe:dir(rtl)", - "[dir=\"rtl\"] .spectrum-ColorLoupe" + ".spectrum-ColorLoupe:dir(rtl)" ], "modifiers": [ "--mod-colorloupe-animation-distance", @@ -26,26 +25,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 89d5b7b895f..8a5533c89a7 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorloupe", - "version": "7.2.0", + "version": "8.0.0-next.1", "description": "The Spectrum CSS Color Loupe component", "license": "Apache-2.0", "author": "Adobe", @@ -24,7 +24,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16.1.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -32,7 +32,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.10" }, "keywords": [ "design-system", diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index 33913ad09aa..663790bb246 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -49,7 +49,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 7df9a058794..324b5b405c2 100644 --- a/components/colorslider/CHANGELOG.md +++ b/components/colorslider/CHANGELOG.md @@ -1,5 +1,50 @@ # Change log +## 9.0.0-next.3 + +### Patch Changes + +📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)! + +## Minor linting fixes + +- Removed unused custom properties across multiple components +- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate +- Removed duplicate custom property declarations +- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`) +- Removed unnecessary stylelint-disable comments + +_No visual or functional changes to components._ + +## 9.0.0-next.2 + +### Major Changes + +📝 [#4014](https://github.com/adobe/spectrum-css/pull/4014) [`35c066b`](https://github.com/adobe/spectrum-css/commit/35c066b29c311b1bfcf4507075f13b41222ffc84) Thanks [@castastrophe](https://github.com/castastrophe)! + +This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`. + +## 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.2.0 ### Minor Changes diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index ea202a9f0a0..aad9494baf6 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -13,8 +13,7 @@ ".spectrum-ColorSlider.is-disabled", ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard", ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient", - ".spectrum-ColorSlider.is-focused", - "[dir=\"rtl\"] .spectrum-ColorSlider-gradient" + ".spectrum-ColorSlider.is-focused" ], "modifiers": [ "--mod-color-slider-background-color-disabled", @@ -37,15 +36,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 73d9f3a7b9a..8c34d8aa396 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: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-default: rgb(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 11be7eebb65..8cc3fcf00e3 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorslider", - "version": "8.2.0", + "version": "9.0.0-next.3", "description": "The Spectrum CSS Color slider component", "license": "Apache-2.0", "author": "Adobe", @@ -24,9 +24,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": { @@ -40,9 +40,9 @@ } }, "devDependencies": { - "@spectrum-css/colorhandle": "10.2.0", - "@spectrum-css/opacitycheckerboard": "4.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorhandle": "11.0.0-next.2", + "@spectrum-css/opacitycheckerboard": "5.0.0-next.0", + "@spectrum-css/tokens": "16.1.0-next.10" }, "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: - "Thevalue 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 backgroundproperty such as,linear-gradient(red, blue).", + 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` -({ ...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`- `; +
`,
- () => html`- styleMap({ - background: `linear-gradient(to ${ - vertical ? "bottom" : "right" - }, ${gradientStops.join(", ")})`, - }) - )} - >` - ), - ], - role: "presentation", - }, context)} - ${ColorHandle({ - isDisabled, - isFocused, - selectedColor, - customClasses: [`${rootClass}-handle`], - customStyles: colorHandleStyle, - }, context)} - -({ ...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`+ `; }; diff --git a/components/colorwheel/CHANGELOG.md b/components/colorwheel/CHANGELOG.md index 758d6a19230..34bee3ff5fc 100644 --- a/components/colorwheel/CHANGELOG.md +++ b/components/colorwheel/CHANGELOG.md @@ -1,5 +1,78 @@ # Change log +## 7.0.0-next.4 + +### Patch Changes + +📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)! + +## Minor linting fixes + +- Removed unused custom properties across multiple components +- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate +- Removed duplicate custom property declarations +- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`) +- Removed unnecessary stylelint-disable comments + +_No visual or functional changes to components._ + +## 7.0.0-next.3 + +### Major Changes + +📝 [#4014](https://github.com/adobe/spectrum-css/pull/4014) [`35c066b`](https://github.com/adobe/spectrum-css/commit/35c066b29c311b1bfcf4507075f13b41222ffc84) Thanks [@castastrophe](https://github.com/castastrophe)! + +This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`. + +## 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.2.0 ### Minor Changes diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index c321e1aca27..1c087a7f50f 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,46 @@ ".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", - "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" + ".spectrum-ColorWheel:after", + ".spectrum-ColorWheel:before" ], "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..d910165d5ac 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: rgb(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 17c0532e998..d74a81b081c 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorwheel", - "version": "6.2.0", + "version": "7.0.0-next.4", "description": "The Spectrum CSS Color Area component", "license": "Apache-2.0", "author": "Adobe", @@ -19,17 +19,15 @@ "./package.json": "./package.json", "./dist/*": "./dist/*", "./index.css": "./dist/index.css", - "./index-*.css": "./dist/index-*.css", "./metadata.json": "./dist/metadata.json", - "./themes/*": "./dist/themes/*", "./stories/*": "./stories/*" }, "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": { @@ -46,10 +44,10 @@ } }, "devDependencies": { - "@spectrum-css/colorarea": "7.2.0", - "@spectrum-css/colorhandle": "10.2.0", - "@spectrum-css/colorloupe": "7.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/colorarea": "8.0.0-next.2", + "@spectrum-css/colorhandle": "11.0.0-next.2", + "@spectrum-css/colorloupe": "8.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.10" }, "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` -`,
+ () =>
+ html``,
+ ),
+ ],
+ role: "presentation",
+ },
+ context,
+ )}
+ ${ColorHandle(
+ {
+ isDisabled,
+ isFocused,
+ selectedColor,
+ customClasses: [`${rootClass}-handle`],
+ customStyles: colorHandleStyle,
+ },
+ context,
+ )}
+
+ ({ ...a, [c]: true }), {}), - })}> +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({ ...a, [c]: true }), {}), + })} + style=${styleMap(customStyles)} + >${ColorHandle({ isDisabled, isFocused, customClasses: [`${rootClass}-handle`], selectedColor, customStyles: colorHandleStyle, + isWithColorLoupe, }, context)}${when(isWithColorArea, () => html` @@ -40,20 +43,16 @@ export const Template = ({- -+ })}>({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} data-testid=${ifDefined(testId ?? id)} style=${styleMap(customStyles)} + 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)} -- `; -}; - -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` -${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) )} - ${[ - 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), - ]} +`; }; +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+ ${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)} ++ ${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, + }, context)} + ${when(helpText, () => + HelpText({ + customClasses: [`${rootClass}-helptext`], + size, + isDisabled, + hideIcon: true, + text: helpText, + variant: isInvalid ? "negative" : "neutral", + }, context) + )} +ActionButton({ ...passthrough, - size: "xs", + size: scale === "medium" ? "xs" : "s", iconName, iconSet, customClasses: [`${rootClass}-button`], }, context), content: [ - title ? html``; diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md index 6d17c57139b..70646d572bf 100644 --- a/components/datepicker/CHANGELOG.md +++ b/components/datepicker/CHANGELOG.md @@ -1,5 +1,38 @@ # Change log +## 5.0.0-next.2 + +### Patch Changes + +📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)! + +## Minor linting fixes + +- Removed unused custom properties across multiple components +- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate +- Removed duplicate custom property declarations +- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`) +- Removed unnecessary stylelint-disable comments + +_No visual or functional changes to components._ + +## 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.2.0 ### Minor Changes @@ -258,6 +291,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..2890b5f54d1 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -11,13 +11,12 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DatePicker { --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 +84,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 f8506c329c6..d4593a127e4 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/datepicker", - "version": "4.2.0", + "version": "5.0.0-next.2", "description": "The Spectrum CSS datepicker component", "license": "Apache-2.0", "author": "Adobe", @@ -19,18 +19,16 @@ "./package.json": "./package.json", "./dist/*": "./dist/*", "./index.css": "./dist/index.css", - "./index-*.css": "./dist/index-*.css", "./metadata.json": "./dist/metadata.json", - "./themes/*": "./dist/themes/*", "./stories/*": "./stories/*" }, "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": { @@ -50,11 +48,11 @@ } }, "devDependencies": { - "@spectrum-css/calendar": "7.2.0", - "@spectrum-css/pickerbutton": "6.2.0", - "@spectrum-css/popover": "8.3.0", - "@spectrum-css/textfield": "8.2.0", - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/calendar": "8.0.0-next.3", + "@spectrum-css/pickerbutton": "7.0.0-next.2", + "@spectrum-css/popover": "9.0.0-next.5", + "@spectrum-css/textfield": "9.0.0-next.1", + "@spectrum-css/tokens": "16.1.0-next.10" }, "keywords": [ "design-system", diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index fa10174144c..1157597215d 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -74,14 +74,13 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=112153-679", }, - docs: { - story: { - height: "50px" - } - }, packageJson, metadata, + status: { + type: "unmigrated", + }, }, + tags: ["unmigrated"], play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -105,11 +104,6 @@ DefaultGroup.args = {}; DefaultGroup.tags = [ "!dev"]; DefaultGroup.storyName = "Default"; DefaultGroup.parameters = { - docs: { - story: { - height: "350px", - } - }, chromatic: { disableSnapshot: true }, }; @@ -123,11 +117,6 @@ Quiet.args = { }; Quiet.parameters = { chromatic: { disableSnapshot: true }, - docs: { - story: { - height: "350px", - } - }, }; /** diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24e..9f653cb8c92 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", @@ -88,12 +85,12 @@ export const DatePicker = ({ }, }, context))} ${PickerButton({ - customClasses: [`${rootClass}-button`], + customClasses: [`${rootClass}-button`, "spectrum-PickerButton--workflowicon"], size: "m", iconName: "Calendar", iconSet: "workflow", isQuiet, - customStyles: isReadOnly ? { "display": "none" } : undefined, + customStyles: isReadOnly ? { "display": "none" } : { "--mod-icon-size": "var(--spectrum-workflow-icon-size-50)" }, // @todo this is not added to the button on the website; need to make sure it's not a bug // isOpen, isInvalid, 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${title}
` : "", - body ? html`${body}
` : "", + title ? html`${title}
` : nothing, + body ? html`${body}
` : nothing, link ? Link({ - text: link.text, - url: link.url, + text: "Link text", + url: "#", customClasses: [`${rootClass}-link`], }) : nothing, @@ -53,8 +56,6 @@ export const Template = ({ position: popoverPlacement, customClasses: [`${rootClass}-popover`], customStyles, - popoverWidth: 275, - popoverHeight: 150, }, context)}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))} >`; 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 4d868c46086..a42904b1f61 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.2.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 3a88573338c..94c41fb8f89 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/divider", - "version": "5.2.0", + "version": "6.0.0-next.1", "description": "The Spectrum CSS divider component", "license": "Apache-2.0", "author": "Adobe", @@ -19,14 +19,12 @@ "./package.json": "./package.json", "./dist/*": "./dist/*", "./index.css": "./dist/index.css", - "./index-*.css": "./dist/index-*.css", "./metadata.json": "./dist/metadata.json", - "./themes/*": "./dist/themes/*", "./stories/*": "./stories/*" }, "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 +32,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.2" + "@spectrum-css/tokens": "16.1.0-next.10" }, "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" >- ${when(typeof heroImageUrl !== "undefined", () => + ${when(hasHeroImage, () => html`+ style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})">` )} - ${when(heading, () => html` -${heading}
- `)} - ${when(hasDivider, () => - Divider({ - horizontal: true, - customClasses: [`${rootClass}-divider`], - }, context), ++ ${when(heading, () => html` ++${heading}
+ `)} + ${when(header, () => html` +++ `, )} -+ ${renderContent(header)} ++- ${renderContent(content)} - - ${when(hasFooter, () => { - return html` - - `; - })} - ${when(isDismissible && layout !== "fullscreen" && layout !== "fullscreenTakeover", () => +${renderContent(content)} + ${when(isDismissible, () => CloseButton({ customClasses: [`${rootClass}-closeButton`], onclick: toggleOpen, }, context) )} + ${when(layout === "fullscreen" || layout === "fullscreenTakeover", () => html` + + `)} + ${when(hasFooter, () => html` + + `, + () => html` + + `)}({ ...a, [c]: true }), {}), - })} - id=${ifDefined(id)} - role="region" - tabindex="0" - style=${styleMap(customStyles)} - > - ${IllustratedMessage({ heading, description }, context)} - -- ${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(" ")} + > + +`; }; + +const customSvg = () => html` + +`; 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+ ${IllustratedMessage({ + title: title, + description: description, + customIllustration: customSvg, + size: size + }, context )} +- `; ++ ${isDragged && isFilled + ? Button({ + label: label, + customClasses: [`${rootClass}-button`], + variant: "accent", + }) + : Button({ + label: label, + size: size + })}
- ${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
- *
- * 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
- *
- * 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
- *
- * 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 6acbf0cf9ad..c052ad9c35e 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.2.0
### Minor Changes
diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json
index 03bf62123f2..bc28f998bbc 100644
--- a/components/alertdialog/dist/metadata.json
+++ b/components/alertdialog/dist/metadata.json
@@ -3,82 +3,42 @@
"selectors": [
".spectrum-AlertDialog",
".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-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-error-icon-color",
- "--mod-alert-dialog-icon-size",
- "--mod-alert-dialog-max-width",
- "--mod-alert-dialog-min-width",
- "--mod-alert-dialog-padding",
- "--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-warning-icon-color"
+ ".spectrum-AlertDialog-heading",
+ ".spectrum-AlertDialog:where(.spectrum-AlertDialog--error) .spectrum-AlertDialog-icon",
+ ".spectrum-AlertDialog:where(.spectrum-AlertDialog--warning) .spectrum-AlertDialog-icon"
],
+ "modifiers": [],
"component": [
- "--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-error-icon-color",
- "--spectrum-alert-dialog-icon-size",
- "--spectrum-alert-dialog-max-width",
+ "--spectrum-alert-dialog-description-font-size",
+ "--spectrum-alert-dialog-edge-to-content",
"--spectrum-alert-dialog-maximum-width",
- "--spectrum-alert-dialog-min-width",
"--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-warning-icon-color"
+ "--spectrum-alert-dialog-title-font-size"
],
"global": [
+ "--spectrum-background-layer-2-color",
"--spectrum-body-color",
"--spectrum-body-sans-serif-font-style",
"--spectrum-body-sans-serif-font-weight",
+ "--spectrum-border-width-100",
+ "--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"],
+ "passthroughs": [],
"high-contrast": []
}
diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css
index 14e6e555f2c..8bd7f7d3586 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
@@ -11,105 +11,73 @@
* governing permissions and limitations under the License.
*/
-.spectrum-AlertDialog {
- --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);
-
- /* color */
- --spectrum-alert-dialog-warning-icon-color: var(--spectrum-notice-visual-color);
- --spectrum-alert-dialog-error-icon-color: var(--spectrum-negative-visual-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-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-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);
-
- /* mods for nested component */
- --mod-buttongroup-justify-content: flex-end;
-}
-
.spectrum-AlertDialog {
display: flex;
box-sizing: border-box;
inline-size: fit-content;
- 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));
+ min-inline-size: var(--spectrum-alert-dialog-minimum-width);
+ max-inline-size: var(--spectrum-alert-dialog-maximum-width);
max-block-size: inherit;
+ background-color: var(--spectrum-background-layer-2-color);
outline: none;
- padding: var(--mod-alert-dialog-padding, var(--spectrum-alert-dialog-padding));
+ padding: var(--spectrum-alert-dialog-edge-to-content);
+
+ /* Adding a transparent border here allows the forced colors mode to default appropriately */
+ border: var(--spectrum-border-width-100) solid transparent;
+ border-radius: var(--spectrum-corner-radius-extra-large-default);
.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));
+ inline-size: var(--spectrum-workflow-icon-size-100);
+ block-size: var(--spectrum-workflow-icon-size-100);
flex-shrink: 0;
}
-}
-.spectrum-AlertDialog--warning {
- /* @passthrough */
- --mod-icon-color: var(--mod-alert-dialog-warning-icon-color, var(--spectrum-alert-dialog-warning-icon-color));
-}
+ &:where(.spectrum-AlertDialog--warning) .spectrum-AlertDialog-icon {
+ color: var(--spectrum-notice-visual-color);
+ }
-.spectrum-AlertDialog--error {
- /* @passthrough */
- --mod-icon-color: var(--mod-alert-dialog-error-icon-color, var(--spectrum-alert-dialog-error-icon-color));
+ &:where(.spectrum-AlertDialog--error) .spectrum-AlertDialog-icon {
+ color: var(--spectrum-negative-visual-color);
+ }
}
.spectrum-AlertDialog-grid {
display: grid;
+ inline-size: 100%;
}
.spectrum-AlertDialog-header {
display: flex;
- justify-content: space-between;
- align-items: baseline;
+ gap: var(--spectrum-spacing-100);
+ align-items: center;
+ margin-block-end: var(--spectrum-spacing-300);
}
.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));
- 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));
+ font-family: var(--spectrum-sans-font-family-stack);
+ font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ font-style: var(--spectrum-heading-sans-serif-font-style);
+ font-size: var(--spectrum-alert-dialog-title-font-size);
+ line-height: var(--spectrum-heading-line-height);
+ color: var(--spectrum-heading-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));
- 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));
+ font-family: var(--spectrum-sans-font-family-stack);
+ font-weight: var(--spectrum-body-sans-serif-font-weight);
+ font-style: var(--spectrum-body-sans-serif-font-style);
+ font-size: var(--spectrum-alert-dialog-description-font-size);
+ line-height: var(--spectrum-line-height-200);
+ color: var(--spectrum-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(--spectrum-spacing-500);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
-@media (forced-colors: active) {
- .spectrum-AlertDialog {
- border: solid;
- }
+.spectrum-AlertDialog-buttongroup {
+ display: flex;
+ justify-content: flex-end;
}
diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json
index 99e0cc134a2..596bc4c7ee9 100644
--- a/components/alertdialog/package.json
+++ b/components/alertdialog/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/alertdialog",
- "version": "4.2.0",
+ "version": "5.0.0-next.4",
"description": "The Spectrum CSS alertdialog component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -24,12 +24,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": {
@@ -52,12 +52,12 @@
}
},
"devDependencies": {
- "@spectrum-css/buttongroup": "9.2.0",
- "@spectrum-css/divider": "5.2.0",
- "@spectrum-css/icon": "9.2.0",
- "@spectrum-css/modal": "7.2.0",
- "@spectrum-css/tokens": "16.0.2",
- "@spectrum-css/underlay": "6.2.0"
+ "@spectrum-css/buttongroup": "10.0.0-next.1",
+ "@spectrum-css/divider": "6.0.0-next.1",
+ "@spectrum-css/icon": "10.0.0-next.3",
+ "@spectrum-css/modal": "8.0.0-next.1",
+ "@spectrum-css/tokens": "16.1.0-next.10",
+ "@spectrum-css/underlay": "7.0.0-next.1"
},
"keywords": [
"design-system",
diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js
index 87c83d18ff9..48594e7a80e 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,34 +66,25 @@ export default {
},
design: {
type: "figma",
- url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=21917-157",
- },
- docs: {
- story: {
- height: "300px",
- }
+ url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=21917-157",
},
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,19 +111,6 @@ 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 = {
@@ -129,16 +126,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 +142,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: "AlertTriangle",
+ content: "An error occurred while sharing your project. Please verify the email address and try again.",
};
Error.parameters = {
chromatic: { disableSnapshot: true },
@@ -179,36 +158,36 @@ 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 },
+};
+
+/**
+ * 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 +196,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..8d72b3a68c2 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 = ({
- *
- * 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
- *
- * 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
- *
- * 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 20009d901d0..273b735f02b 100644
--- a/components/assetcard/CHANGELOG.md
+++ b/components/assetcard/CHANGELOG.md
@@ -1,5 +1,35 @@
# Change log
+## 6.0.0-next.2
+
+### Patch Changes
+
+📝 [#4113](https://github.com/adobe/spectrum-css/pull/4113) [`cf4fc1a`](https://github.com/adobe/spectrum-css/commit/cf4fc1a01d23ba810f45a903ecc29a5c8aae33d1) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+## Minor linting fixes
+
+- Removed unused custom properties across multiple components
+- Fixed color function notation by converting `rgba()` to `rgb()` where appropriate
+- Removed duplicate custom property declarations
+- Fixed deprecated CSS properties (e.g., `word-wrap` → `overflow-wrap`)
+- Removed unnecessary stylelint-disable comments
+
+_No visual or functional changes to components._
+
+## 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.2.0
### Minor Changes
diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json
index 1c86dc47523..6e7fe700c4b 100644
--- a/components/assetcard/dist/metadata.json
+++ b/components/assetcard/dist/metadata.json
@@ -2,13 +2,15 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-AssetCard",
+ ".spectrum-AssetCard .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard .spectrum-AssetCard-selectionOrder",
+ ".spectrum-AssetCard .spectrum-Checkbox-box:before",
".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder",
".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--checkboxSelection:focus-visible .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--checkboxSelection:hover .spectrum-AssetCard-selectionIndicator",
- ".spectrum-AssetCard--highlightSelection.is-selected .spectrum-AssetCard-asset",
+ ".spectrum-AssetCard--highlightSelection:where(.is-selected) .spectrum-AssetCard-asset",
".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator",
".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-checkbox",
".spectrum-AssetCard--orderedSelection.is-selected .spectrum-AssetCard-selectionIndicator",
@@ -23,172 +25,77 @@
".spectrum-AssetCard-selectionOrder",
".spectrum-AssetCard-selectionOverlay",
".spectrum-AssetCard-title",
- ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-drop-target",
".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay",
- ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-drop-target:active",
+ ".spectrum-AssetCard.is-drop-target:hover",
+ ".spectrum-AssetCard.is-selected",
".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay",
- ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before",
- ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after",
+ ".spectrum-AssetCard.is-selected:active",
+ ".spectrum-AssetCard.is-selected:hover",
+ ".spectrum-AssetCard:active",
+ ".spectrum-AssetCard:focus-visible",
".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:before",
- ".spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before",
- ".spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after",
- ".spectrum-AssetCard:hover .spectrum-Checkbox-box:before",
+ ".spectrum-AssetCard:hover",
".spectrum-AssetCard:lang(ja)",
".spectrum-AssetCard:lang(ko)",
- ".spectrum-AssetCard:lang(zh)"
- ],
- "modifiers": [
- "--mod-assectcard-border-color-selected-down",
- "--mod-assectcard-focus-indicator-color",
- "--mod-assetcard-asset-animation-duration",
- "--mod-assetcard-asset-container-border-size",
- "--mod-assetcard-asset-size",
- "--mod-assetcard-background-color",
- "--mod-assetcard-border-color",
- "--mod-assetcard-border-color-down",
- "--mod-assetcard-border-color-hover",
- "--mod-assetcard-border-color-selected",
- "--mod-assetcard-border-color-selected-hover",
- "--mod-assetcard-border-radius",
- "--mod-assetcard-content-font-family",
- "--mod-assetcard-content-font-size",
- "--mod-assetcard-content-font-style",
- "--mod-assetcard-content-font-weight",
- "--mod-assetcard-content-letter-spacing",
- "--mod-assetcard-content-line-height",
- "--mod-assetcard-content-margin-block-start",
- "--mod-assetcard-content-text-color",
- "--mod-assetcard-focus-indicator-thickness",
- "--mod-assetcard-focus-ring-border-radius",
- "--mod-assetcard-focus-ring-gap",
- "--mod-assetcard-header-content-font-family",
- "--mod-assetcard-header-content-font-size",
- "--mod-assetcard-header-content-font-stlye",
- "--mod-assetcard-header-content-font-weight",
- "--mod-assetcard-header-content-letter-spacing",
- "--mod-assetcard-header-content-line-height",
- "--mod-assetcard-header-content-text-color",
- "--mod-assetcard-header-margin-block-start",
- "--mod-assetcard-overlay-background-color",
- "--mod-assetcard-selectionindicator-background-color-default",
- "--mod-assetcard-selectionindicator-background-color-ordered",
- "--mod-assetcard-selectionindicator-border-radius",
- "--mod-assetcard-selectionindicator-color",
- "--mod-assetcard-selectionindicator-font-size",
- "--mod-assetcard-selectionindicator-font-weight",
- "--mod-assetcard-selectionindicator-margin",
- "--mod-assetcard-selectionindicator-size",
- "--mod-assetcard-title-font-family",
- "--mod-assetcard-title-font-size",
- "--mod-assetcard-title-font-style",
- "--mod-assetcard-title-font-weight",
- "--mod-assetcard-title-letter-spacing",
- "--mod-assetcard-title-line-height",
- "--mod-assetcard-title-text-color"
+ ".spectrum-AssetCard:lang(zh)",
+ ".spectrum-AssetCard:where(.spectrum-AssetCard--orderedSelection) .spectrum-AssetCard-selectionIndicator"
],
+ "modifiers": [],
"component": [
- "--spectrum-assetcard-asset-animation-duration",
- "--spectrum-assetcard-asset-container-border-size",
"--spectrum-assetcard-asset-size",
- "--spectrum-assetcard-background-color",
"--spectrum-assetcard-border-color",
- "--spectrum-assetcard-border-color-down",
- "--spectrum-assetcard-border-color-hover",
"--spectrum-assetcard-border-color-selected",
"--spectrum-assetcard-border-color-selected-down",
"--spectrum-assetcard-border-color-selected-hover",
- "--spectrum-assetcard-border-radius",
- "--spectrum-assetcard-content-font-family",
- "--spectrum-assetcard-content-font-size",
- "--spectrum-assetcard-content-font-style",
- "--spectrum-assetcard-content-font-weight",
- "--spectrum-assetcard-content-letter-spacing",
- "--spectrum-assetcard-content-line-height",
- "--spectrum-assetcard-content-margin-block-start",
- "--spectrum-assetcard-content-text-color",
- "--spectrum-assetcard-focus-indicator-thickness",
"--spectrum-assetcard-focus-ring-border-radius",
- "--spectrum-assetcard-focus-ring-gap",
- "--spectrum-assetcard-header-content-font-family",
"--spectrum-assetcard-header-content-font-size",
- "--spectrum-assetcard-header-content-font-style",
- "--spectrum-assetcard-header-content-font-weight",
- "--spectrum-assetcard-header-content-letter-spacing",
- "--spectrum-assetcard-header-content-line-height",
- "--spectrum-assetcard-header-content-text-color",
- "--spectrum-assetcard-header-margin-block-start",
- "--spectrum-assetcard-overlay-background-color",
- "--spectrum-assetcard-selectionindicator-background-color-default",
"--spectrum-assetcard-selectionindicator-background-color-ordered",
- "--spectrum-assetcard-selectionindicator-blur",
- "--spectrum-assetcard-selectionindicator-border-radius",
- "--spectrum-assetcard-selectionindicator-box-shadow-color",
- "--spectrum-assetcard-selectionindicator-color",
- "--spectrum-assetcard-selectionindicator-font-size",
- "--spectrum-assetcard-selectionindicator-font-weight",
"--spectrum-assetcard-selectionindicator-margin",
- "--spectrum-assetcard-selectionindicator-offset-y",
- "--spectrum-assetcard-selectionindicator-size",
- "--spectrum-assetcard-title-font-family",
- "--spectrum-assetcard-title-font-size",
- "--spectrum-assetcard-title-font-style",
- "--spectrum-assetcard-title-font-weight",
- "--spectrum-assetcard-title-letter-spacing",
- "--spectrum-assetcard-title-line-height",
- "--spectrum-assetcard-title-text-color"
+ "--spectrum-assetcard-title-font-size"
],
"global": [
"--spectrum-animation-duration-100",
"--spectrum-assestcard-focus-indicator-color",
+ "--spectrum-blue-1000",
+ "--spectrum-blue-900",
"--spectrum-body-cjk-font-style",
"--spectrum-body-cjk-font-weight",
"--spectrum-body-cjk-line-height",
+ "--spectrum-body-line-height",
"--spectrum-body-sans-serif-font-weight",
- "--spectrum-bold-font-weight",
+ "--spectrum-border-width-100",
"--spectrum-card-selection-background-size",
"--spectrum-cjk-font-family-stack",
"--spectrum-cjk-letter-spacing",
"--spectrum-corner-radius-100",
"--spectrum-default-font-style",
+ "--spectrum-drop-shadow-blur",
+ "--spectrum-drop-shadow-color-200",
+ "--spectrum-drop-shadow-y-200",
+ "--spectrum-focus-indicator-gap",
"--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-400",
"--spectrum-gray-500",
"--spectrum-gray-600",
"--spectrum-gray-700",
"--spectrum-gray-75",
- "--spectrum-gray-75-rgb",
"--spectrum-gray-900",
- "--spectrum-heading-cjk-font-style",
"--spectrum-heading-cjk-font-weight",
"--spectrum-heading-cjk-line-height",
"--spectrum-heading-cjk-size-xs",
+ "--spectrum-heading-line-height",
"--spectrum-heading-sans-serif-font-weight",
- "--spectrum-line-height-100",
- "--spectrum-line-height-200",
+ "--spectrum-heading-size-s",
+ "--spectrum-heading-size-xs",
+ "--spectrum-heading-size-xxs",
"--spectrum-sans-font-family-stack",
"--spectrum-spacing-300",
"--spectrum-spacing-75",
- "--spectrum-transparent-black-300",
+ "--spectrum-stack-item-selected-background-color-emphasized",
+ "--spectrum-transparent-black-25",
"--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",
- "--highcontrast-assetcard-border-color-hover",
- "--highcontrast-assetcard-border-color-selected",
- "--highcontrast-assetcard-border-color-selected-hover",
- "--highcontrast-assetcard-selectionindicator-background-color-ordered",
- "--highcontrast-assetcard-selectionindicator-color"
- ]
+ "high-contrast": []
}
diff --git a/components/assetcard/index.css b/components/assetcard/index.css
index 26881a3f45f..7c698cb0302 100644
--- a/components/assetcard/index.css
+++ b/components/assetcard/index.css
@@ -11,117 +11,77 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
/* outer container, unstyled */
.spectrum-AssetCard {
/* 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-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);
-
- --spectrum-assetcard-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-assetcard-border-color: transparent;
- --spectrum-assetcard-border-color-hover: var(--spectrum-gray-500);
- --spectrum-assetcard-border-color-down: var(--spectrum-gray-600);
-
- --spectrum-assetcard-focus-ring-gap: 5px;
- --spectrum-assetcard-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-
- /* selection indicator - checkbox or number */
- --spectrum-assetcard-selectionindicator-size: var(--spectrum-card-selection-background-size);
- --spectrum-assetcard-selectionindicator-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-assetcard-selectionindicator-offset-y: 4px;
- --spectrum-assetcard-selectionindicator-blur: 6px;
- --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);
-
- /* title */
- --spectrum-assetcard-title-text-color: var(--spectrum-gray-900);
- --spectrum-assetcard-title-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-assetcard-title-font-weight: var(--spectrum-heading-sans-serif-font-weight);
- --spectrum-assetcard-title-font-style: var(--spectrum-default-font-style);
- --spectrum-assetcard-title-line-height: var(--spectrum-line-height-100);
- --spectrum-assetcard-title-letter-spacing: 0;
-
- /* header content */
- --spectrum-assetcard-header-content-text-color: var(--spectrum-gray-900);
- --spectrum-assetcard-header-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-assetcard-header-content-font-style: var(--spectrum-default-font-style);
- --spectrum-assetcard-header-content-line-height: var(--spectrum-line-height-200);
- --spectrum-assetcard-header-content-letter-spacing: 0;
-
- /* content */
- --spectrum-assetcard-content-text-color: var(--spectrum-gray-700);
- --spectrum-assetcard-content-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-assetcard-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
- --spectrum-assetcard-content-font-style: var(--spectrum-default-font-style);
- --spectrum-assetcard-content-line-height: var(--spectrum-line-height-200);
- --spectrum-assetcard-content-letter-spacing: 0;
-
- --spectrum-assetcard-content-margin-block-start: var(--spectrum-spacing-75);
+
+ --spectrum-assetcard-border-color: var(--spectrum-transparent-black-25);
/* contain selection indicator */
position: relative;
-
display: flex;
flex-direction: column;
-
- inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
-
+ inline-size: var(--spectrum-assetcard-asset-size);
+ font-family: var(--spectrum-sans-font-family-stack);
+ font-style: var(--spectrum-default-font-style);
+ font-weight: var(--spectrum-body-sans-serif-font-weight);
+ outline: none;
cursor: pointer;
&:lang(zh),
&:lang(ja),
&:lang(ko) {
- --spectrum-assetcard-title-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-assetcard-title-font-style: var(--spectrum-heading-cjk-font-style);
- --spectrum-assetcard-title-font-weight: var(--spectrum-heading-cjk-font-weight);
- --spectrum-assetcard-title-font-size: var(--spectrum-heading-cjk-size-xs);
- --spectrum-assetcard-title-line-height: var(--spectrum-heading-cjk-line-height);
- --spectrum-assetcard-title-letter-spacing: var(--spectrum-cjk-letter-spacing);
-
- --spectrum-assetcard-header-content-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-assetcard-header-content-font-weight: var(--spectrum-body-cjk-font-weight);
- --spectrum-assetcard-header-content-line-height: var(--spectrum-body-cjk-line-height);
- --spectrum-assetcard-header-content-font-style: var(--spectrum-body-cjk-font-style);
- --spectrum-assetcard-header-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
-
- --spectrum-assetcard-content-font-family: var(--spectrum-cjk-font-family-stack);
- --spectrum-assetcard-content-font-weight: var(--spectrum-body-cjk-font-weight);
- --spectrum-assetcard-content-line-height: var(--spectrum-body-cjk-line-height);
- --spectrum-assetcard-content-font-style: var(--spectrum-body-cjk-font-style);
- --spectrum-assetcard-content-letter-spacing: var(--spectrum-cjk-letter-spacing);
+ --spectrum-sans-font-family-stack: var(--spectrum-cjk-font-family-stack);
+ --spectrum-default-font-style: var(--spectrum-body-cjk-font-style);
+
+ --spectrum-heading-sans-serif-font-weight: var(--spectrum-heading-cjk-font-weight);
+ --spectrum-heading-size-xs: var(--spectrum-heading-cjk-size-xs);
+ --spectrum-heading-line-height: var(--spectrum-heading-cjk-line-height);
+
+ --spectrum-body-sans-serif-font-weight: var(--spectrum-body-cjk-font-weight);
+ --spectrum-body-line-height: var(--spectrum-body-cjk-line-height);
+
+ letter-spacing: var(--spectrum-cjk-letter-spacing);
}
&.is-selected,
&:hover,
&:focus-visible {
- .spectrum-AssetCard-assetContainer::after {
- border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
- }
-
- /* adds hover to checkbox when spectrum-AssetCard card receives hover */
- .spectrum-Checkbox-box::before {
- border-color: var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
- }
+ --spectrum-assetcard-border-color: var(--spectrum-gray-500);
}
&:active {
- .spectrum-AssetCard-assetContainer::after {
- border-color: var(--mod-assetcard-border-color-down, var(--spectrum-assetcard-border-color-down));
- }
+ --spectrum-assetcard-border-color: var(--spectrum-gray-600);
}
- outline: none;
+ &:focus-visible .spectrum-AssetCard-assetContainer::before {
+ opacity: 1;
+ }
- &:focus-visible {
- .spectrum-AssetCard-assetContainer::before {
- opacity: 1;
+ /* base selection styles shared by every selection mode */
+ /* drop target looks identical to selected */
+ &.is-drop-target,
+ &.is-selected {
+ --spectrum-assetcard-border-color: var(--spectrum-assetcard-border-color-selected, var(--spectrum-blue-900));
+
+ .spectrum-AssetCard-selectionOverlay {
+ /* was: rgb(27 127 245 / 10%); */
+ background-color: color-mix(in sRGB, var(--spectrum-stack-item-selected-background-color-emphasized) 10%, transparent);
+ }
+
+ &:hover {
+ --spectrum-assetcard-border-color: var(--spectrum-assetcard-border-color-selected-hover, var(--spectrum-blue-900));
}
+
+ &:active {
+ --spectrum-assetcard-border-color: var(--spectrum-assetcard-border-color-selected-down, var(--spectrum-blue-1000));
+ }
+ }
+
+ /* Aligns checkbox color indicator with the border when spectrum-AssetCard card receives state */
+ .spectrum-Checkbox-box::before {
+ border-color: var(--spectrum-assetcard-border-color);
}
}
@@ -134,29 +94,29 @@
align-items: center;
justify-content: center;
- inline-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
- block-size: var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
+ inline-size: var(--spectrum-assetcard-asset-size);
+ block-size: var(--spectrum-assetcard-asset-size);
- border-radius: var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius));
+ border-radius: var(--spectrum-corner-radius-100);
- background-color: var(--mod-assetcard-background-color, var(--spectrum-assetcard-background-color));
+ background-color: var(--spectrum-gray-75);
- transition: border var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
+ transition: border var(--spectrum-animation-duration-100) ease-in-out;
/* focus indicator */
&::before {
content: "";
position: absolute;
- inset: calc(-1 * var(--mod-assetcard-focus-ring-gap, var(--spectrum-assetcard-focus-ring-gap)));
+ inset: calc(-1 * var(--spectrum-focus-indicator-gap));
- border: var(--mod-assetcard-focus-indicator-thickness, var(--spectrum-assetcard-focus-indicator-thickness)) solid var(--mod-assectcard-focus-indicator-color, var(--spectrum-assestcard-focus-indicator-color));
+ border: var(--spectrum-focus-indicator-thickness) solid var(--spectrum-assestcard-focus-indicator-color);
- border-radius: var(--mod-assetcard-focus-ring-border-radius, var(--spectrum-assetcard-focus-ring-border-radius));
+ border-radius: var(--spectrum-assetcard-focus-ring-border-radius);
opacity: 0;
pointer-events: none;
- transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
+ transition: opacity var(--spectrum-animation-duration-100) ease-in-out;
}
/* border */
@@ -166,8 +126,8 @@
inset: 0;
z-index: 3;
- border: var(--mod-assetcard-asset-container-border-size, var(--spectrum-assetcard-asset-container-border-size)) solid var(--mod-assetcard-border-color, var(--spectrum-assetcard-border-color));
- border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
+ border: var(--spectrum-border-width-100) solid var(--spectrum-assetcard-border-color);
+ border-radius: calc(var(--spectrum-corner-radius-100) - var(--spectrum-border-width-100));
}
}
@@ -179,10 +139,19 @@
block-size: 100%;
transition:
- inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out,
- block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
+ inline-size var(--spectrum-animation-duration-100) ease-in-out,
+ block-size var(--spectrum-animation-duration-100) ease-in-out;
- border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
+ border-radius: calc(var(--spectrum-corner-radius-100) - var(--spectrum-border-width-100));
+}
+
+/* highlight */
+.spectrum-AssetCard--highlightSelection:where(.is-selected) .spectrum-AssetCard-asset {
+ inline-size: 90%;
+ block-size: 90%;
+
+ /* no radius, otherwise square assets get rounded */
+ border-radius: 0;
}
/* header area, contains the header and optional content */
@@ -192,33 +161,27 @@
align-items: center;
/* space between the asset and the header, place it on the header so header can be optional */
- margin-block-start: var(--mod-assetcard-header-margin-block-start, var(--spectrum-assetcard-header-margin-block-start));
+ margin-block-start: var(--spectrum-spacing-300);
}
/* bold title */
.spectrum-AssetCard-title {
flex-grow: 1;
- color: var(--mod-assetcard-title-text-color, var(--spectrum-assetcard-title-text-color));
+ color: var(--spectrum-gray-900);
- font-family: var(--mod-assetcard-title-font-family, var(--spectrum-assetcard-title-font-family));
- font-weight: var(--mod-assetcard-title-font-weight, var(--spectrum-assetcard-title-font-weight));
- font-size: var(--mod-assetcard-title-font-size, var(--spectrum-assetcard-title-font-size));
- line-height: var(--mod-assetcard-title-line-height, var(--spectrum-assetcard-title-line-height));
- font-style: var(--mod-assetcard-title-font-style, var(--spectrum-assetcard-title-font-style));
- letter-spacing: var(--mod-assetcard-title-letter-spacing, var(--spectrum-assetcard-title-letter-spacing));
+ font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ font-size: var(--spectrum-assetcard-title-font-size, var(--spectrum-heading-size-xs));
+ line-height: var(--spectrum-heading-line-height);
}
/* optional content placed to the right of the title */
.spectrum-AssetCard-headerContent {
- color: var(--mod-assetcard-header-content-text-color, var(--spectrum-assetcard-header-content-text-color));
-
- font-family: var(--mod-assetcard-header-content-font-family, var(--spectrum-assetcard-header-content-font-family));
- font-size: var(--mod-assetcard-header-content-font-size, var(--spectrum-assetcard-header-content-font-size));
- font-weight: var(--mod-assetcard-header-content-font-weight, var(--spectrum-assetcard-header-content-font-weight));
- line-height: var(--mod-assetcard-header-content-line-height, var(--spectrum-assetcard-header-content-line-height));
- font-style: var(--mod-assetcard-header-content-font-stlye, var(--spectrum-assetcard-header-content-font-style));
- letter-spacing: var(--mod-assetcard-header-content-letter-spacing, var(--spectrum-assetcard-header-content-letter-spacing));
+ color: var(--spectrum-gray-900);
+
+ font-size: var(--spectrum-assetcard-header-content-font-size, var(--spectrum-heading-size-xxs));
+ font-weight: var(--spectrum-body-sans-serif-font-weight);
+ line-height: var(--spectrum-body-line-height);
}
/* content area, the last thing in the card */
@@ -226,16 +189,9 @@
flex-grow: 1;
/* space between the content and the header, place it on the content so content can be optional */
- margin-block-start: var(--mod-assetcard-content-margin-block-start, var(--spectrum-assetcard-content-margin-block-start));
-
- color: var(--mod-assetcard-content-text-color, var(--spectrum-assetcard-content-text-color));
+ margin-block-start: var(--spectrum-spacing-75);
- font-family: var(--mod-assetcard-content-font-family, var(--spectrum-assetcard-content-font-family));
- font-size: var(--mod-assetcard-content-font-size, var(--spectrum-assetcard-content-font-size));
- font-weight: var(--mod-assetcard-content-font-weight, var(--spectrum-assetcard-content-font-weight));
- line-height: var(--mod-assetcard-content-line-height, var(--spectrum-assetcard-content-line-height));
- font-style: var(--mod-assetcard-content-font-style, var(--spectrum-assetcard-content-font-style));
- letter-spacing: var(--mod-assetcard-content-letter-spacing, var(--spectrum-assetcard-content-letter-spacing));
+ color: var(--spectrum-gray-700);
}
/* Selection styles */
@@ -247,34 +203,34 @@
background-color: transparent;
pointer-events: none;
- transition: background-color var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
+ transition: background-color var(--spectrum-animation-duration-100) ease-in-out;
- border-radius: calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
+ border-radius: calc(var(--spectrum-corner-radius-100) - 1px);
}
/* the checkbox or selection order indicator */
.spectrum-AssetCard-selectionIndicator {
position: absolute;
z-index: 2;
- inset-inline-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin));
- inset-block-start: var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin));
+ inset-inline-start: var(--spectrum-assetcard-selectionindicator-margin);
+ inset-block-start: var(--spectrum-assetcard-selectionindicator-margin);
display: none;
align-items: center;
justify-content: center;
- inline-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size));
- block-size: var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size));
+ inline-size: var(--spectrum-card-selection-background-size);
+ block-size: var(--spectrum-card-selection-background-size);
- border-radius: var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));
+ border-radius: var(--spectrum-corner-radius-100);
- box-shadow: 0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) var(--spectrum-assetcard-selectionindicator-box-shadow-color);
+ box-shadow: 0 var(--spectrum-drop-shadow-y-200) var(--spectrum-drop-shadow-blur) var(--spectrum-drop-shadow-color-200);
- color: var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
- font-weight: var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
- font-size: var(--mod-assetcard-selectionindicator-font-size, var(--spectrum-assetcard-selectionindicator-font-size));
+ color: var(--spectrum-white);
+ font-weight: var(--spectrum-heading-sans-serif-font-weight);
+ font-size: var(--spectrum-heading-size-s);
- transition: opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
+ transition: opacity var(--spectrum-animation-duration-100) ease-in-out;
background-color: transparent;
}
@@ -282,48 +238,10 @@
line-height: 0;
}
-/* base selection styles shared by every selection mode */
-/* drop target looks identical to selected */
-.spectrum-AssetCard.is-drop-target,
-.spectrum-AssetCard.is-selected {
- .spectrum-AssetCard-assetContainer::after {
- border-color: var(--highcontrast-assetcard-border-color-selected, var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected)));
- }
-
- .spectrum-AssetCard-selectionOverlay {
- background-color: var(--mod-assetcard-overlay-background-color, var(--spectrum-assetcard-overlay-background-color));
- }
-
- &:hover {
- .spectrum-AssetCard-assetContainer::after {
- border-color: var(--highcontrast-assetcard-border-color-selected-hover, var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover)));
- }
- }
-
- &:active {
- .spectrum-AssetCard-assetContainer::after {
- border-color: var(--highcontrast-assectcard-border-color-selected-down, var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down)));
- }
- }
-}
-
-/* highlight */
-.spectrum-AssetCard--highlightSelection {
- &.is-selected {
- .spectrum-AssetCard-asset {
- inline-size: 90%;
- block-size: 90%;
-
- /* no radius, otherwise square assets get rounded */
- border-radius: 0;
- }
- }
-}
-
/* with a checkbox */
.spectrum-AssetCard--checkboxSelection {
.spectrum-AssetCard-selectionIndicator {
- background-color: var(--mod-assetcard-selectionindicator-background-color-default, var(--spectrum-assetcard-selectionindicator-background-color-default));
+ background-color: color-mix(in sRGB, var(--spectrum-gray-75) 90%, transparent);
.spectrum-AssetCard-selectionOrder {
display: none;
@@ -343,29 +261,38 @@
/* with the little order flag that shows the selection order */
.spectrum-AssetCard--orderedSelection {
.spectrum-AssetCard-selectionIndicator {
- background-color: var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered)));
+ background-color: var(--spectrum-assetcard-selectionindicator-background-color-ordered, var(--spectrum-blue-900));
.spectrum-AssetCard-checkbox {
display: none;
}
}
- &.is-selected {
- .spectrum-AssetCard-selectionIndicator {
- display: flex;
- pointer-events: all;
- }
+ &.is-selected .spectrum-AssetCard-selectionIndicator {
+ display: flex;
+ pointer-events: all;
}
}
@media (forced-colors: active) {
.spectrum-AssetCard {
- --highcontrast-assetcard-border-color-hover: Highlight;
- --highcontrast-assetcard-border-color-selected: Highlight;
- --highcontrast-assetcard-border-color-selected-hover: Highlight;
- --highcontrast-assectcard-border-color-selected-down: Highlight;
- --highcontrast-assetcard-selectionindicator-background-color-ordered: Highlight;
- --highcontrast-assetcard-selectionindicator-color: SelectedItemText;
+ --spectrum-assetcard-border-color-selected: Highlight;
+ --spectrum-assetcard-border-color-selected-hover: Highlight;
+ --spectrum-assetcard-border-color-selected-down: Highlight;
+
+ &.is-selected,
+ &:hover,
+ &:focus-visible {
+ --spectrum-assetcard-border-color: Highlight;
+ }
+
+ .spectrum-AssetCard-selectionIndicator {
+ color: SelectedItemText;
+ }
+
+ &:where(.spectrum-AssetCard--orderedSelection) .spectrum-AssetCard-selectionIndicator {
+ background-color: Highlight;
+ }
.spectrum-AssetCard-selectionOrder {
/* prevents text backplate on displayed order number */
diff --git a/components/assetcard/package.json b/components/assetcard/package.json
index 68f8df5a7a9..40f0fac63b9 100644
--- a/components/assetcard/package.json
+++ b/components/assetcard/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/assetcard",
- "version": "5.2.0",
+ "version": "6.0.0-next.2",
"description": "The Spectrum CSS asset card component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,15 +19,13 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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": {
@@ -38,8 +36,8 @@
}
},
"devDependencies": {
- "@spectrum-css/checkbox": "10.2.0",
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/checkbox": "11.0.0-next.2",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"keywords": [
"design-system",
diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js
index da97f55a889..4e876cb2f6f 100644
--- a/components/assetcard/stories/assetcard.stories.js
+++ b/components/assetcard/stories/assetcard.stories.js
@@ -96,7 +96,11 @@ export default {
},
packageJson,
metadata,
+ status: {
+ type: "unmigrated",
+ },
},
+ tags: ["unmigrated"],
};
export const Default = AssetCardGroup.bind({});
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 0b95b3a3110..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
- *
- * 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: rgb(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 392a0a25751..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
- *
- * 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: rgb(27 127 245 / 10%);
- --spectrum-assetcard-background-color: var(--spectrum-gray-75);
- --spectrum-assetcard-selectionindicator-background-color-default: rgb(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 7c27603a92c..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
- *
- * 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: rgb(27 127 245 / 10%);
- --spectrum-assetcard-background-color: var(--spectrum-gray-200);
- --spectrum-assetcard-selectionindicator-background-color-default: rgb(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 c0ed9590802..bcfdb831ffc 100644
--- a/components/assetlist/CHANGELOG.md
+++ b/components/assetlist/CHANGELOG.md
@@ -1,5 +1,28 @@
# Change log
+## 9.0.0-next.2
+
+### Major Changes
+
+📝 [#4014](https://github.com/adobe/spectrum-css/pull/4014) [`35c066b`](https://github.com/adobe/spectrum-css/commit/35c066b29c311b1bfcf4507075f13b41222ffc84) Thanks [@castastrophe](https://github.com/castastrophe)!
+
+This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`.
+
+## 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.3.0
### Minor Changes
@@ -12,7 +35,9 @@ Ensure accurate exports are present for each component. Specifically, adding `th
### 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..57d1970ac18 100644
--- a/components/assetlist/dist/metadata.json
+++ b/components/assetlist/dist/metadata.json
@@ -15,7 +15,6 @@
".spectrum-AssetList-item.is-selected .spectrum-Checkbox",
".spectrum-AssetList-item.is-selected:focus",
".spectrum-AssetList-item.is-selected:hover",
- ".spectrum-AssetList-item:before",
".spectrum-AssetList-item:focus .spectrum-Checkbox",
".spectrum-AssetList-item:focus-within:focus-visible",
".spectrum-AssetList-item:focus-within:focus-visible:before",
@@ -24,55 +23,20 @@
".spectrum-AssetList-itemChildIndicator",
".spectrum-AssetList-itemLabel",
".spectrum-AssetList-itemSelector",
- ".spectrum-AssetList:dir(rtl)",
- "[dir=\"rtl\"] .spectrum-AssetList"
- ],
- "modifiers": [
- "--mod-assetlist-border-color-key-focus",
- "--mod-assetlist-child-indicator-animation",
- "--mod-assetlist-item-animation",
- "--mod-assetlist-item-background-color-down",
- "--mod-assetlist-item-background-color-hover",
- "--mod-assetlist-item-background-color-selected",
- "--mod-assetlist-item-background-color-selected-hover",
- "--mod-assetlist-item-border-radius",
- "--mod-assetlist-item-font-size",
- "--mod-assetlist-item-font-weight",
- "--mod-assetlist-item-height",
- "--mod-assetlist-item-label-padding-inline-start",
- "--mod-assetlist-item-margin-bottom",
- "--mod-assetlist-item-padding-inline-end",
- "--mod-assetlist-item-padding-inline-start",
- "--mod-assetlist-label-color",
- "--mod-assetlist-thumbnail-margin-left",
- "--mod-assetlist-thumbnail-width",
- "--mod-assetlist-thumnail-height",
- "--mod-assetlist-width"
+ ".spectrum-AssetList:dir(rtl)"
],
+ "modifiers": [],
"component": [
- "--spectrum-assetlist-border-color-key-focus",
- "--spectrum-assetlist-child-indicator-animation",
- "--spectrum-assetlist-item-animation",
- "--spectrum-assetlist-item-background-color-down",
- "--spectrum-assetlist-item-background-color-hover",
"--spectrum-assetlist-item-background-color-selected",
- "--spectrum-assetlist-item-background-color-selected-hover",
- "--spectrum-assetlist-item-border-radius",
- "--spectrum-assetlist-item-font-size",
- "--spectrum-assetlist-item-font-weight",
- "--spectrum-assetlist-item-height",
- "--spectrum-assetlist-item-label-padding-inline-start",
- "--spectrum-assetlist-item-margin-block-end",
- "--spectrum-assetlist-item-padding-inline-end",
- "--spectrum-assetlist-item-padding-inline-start",
- "--spectrum-assetlist-label-color",
- "--spectrum-assetlist-thumbnail-height",
- "--spectrum-assetlist-thumbnail-margin-inline-start",
- "--spectrum-assetlist-thumbnail-width",
- "--spectrum-assetlist-width"
+ "--spectrum-assetlist-item-background-color-selected-hover"
],
"global": [
"--spectrum-animation-duration-100",
+ "--spectrum-component-height-200",
+ "--spectrum-corner-radius-100",
+ "--spectrum-field-default-width-large",
+ "--spectrum-focus-indicator-color",
+ "--spectrum-focus-indicator-thickness",
"--spectrum-font-size-100",
"--spectrum-gray-100",
"--spectrum-gray-200",
@@ -81,20 +45,9 @@
"--spectrum-regular-font-weight",
"--spectrum-spacing-100",
"--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-spacing-600",
- "--spectrum-spacing-75"
- ],
- "system-theme": [
- "--system-asset-list-item-background-color-down",
- "--system-asset-list-item-background-color-hover"
+ "--spectrum-spacing-75",
+ "--spectrum-thumbnail-size-100"
],
"passthroughs": [],
- "high-contrast": [
- "--highcontrast-assetlist-border-color-key-focus",
- "--highcontrast-assetlist-item-background-color-hover",
- "--highcontrast-assetlist-item-background-color-selected",
- "--highcontrast-assetlist-item-background-color-selected-hover",
- "--highcontrast-assetlist-label-color"
- ]
+ "high-contrast": []
}
diff --git a/components/assetlist/index.css b/components/assetlist/index.css
index 742070edbd4..42b2e96a58b 100644
--- a/components/assetlist/index.css
+++ b/components/assetlist/index.css
@@ -11,31 +11,8 @@
* governing permissions and limitations under the License.
*/
-@import "./themes/spectrum-two.css";
-
+/* Container */
.spectrum-AssetList {
- --spectrum-assetlist-width: 272px;
- --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100);
-
- /* item */
- --spectrum-assetlist-item-height: var(--spectrum-spacing-600);
- --spectrum-assetlist-item-padding-inline-start: var(--spectrum-spacing-300);
- --spectrum-assetlist-item-padding-inline-end: var(--spectrum-spacing-300);
- --spectrum-assetlist-item-margin-block-end: var(--spectrum-spacing-75);
- --spectrum-assetlist-item-border-radius: var(--spectrum-spacing-75);
- --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100);
- --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100);
- --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight);
-
- /* thumbnail */
- --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400);
- --spectrum-assetlist-thumbnail-height: var(--spectrum-spacing-400);
- --spectrum-assetlist-thumbnail-margin-inline-start: var(--spectrum-spacing-100);
-
- /* label */
- --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100);
- --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default);
-
margin-block-start: 0;
margin-block-end: 0;
padding: 0;
@@ -45,48 +22,27 @@
}
}
+/* Iterable children */
.spectrum-AssetList-item {
position: relative;
- color: var(--highcontrast-assetlist-label-color, var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color)));
-
display: flex;
box-sizing: border-box;
align-items: center;
-
- inline-size: var(--mod-assetlist-width, var(--spectrum-assetlist-width));
- block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
-
+ inline-size: var(--spectrum-field-default-width-large);
+ block-size: var(--spectrum-component-height-200);
padding-block: 0;
- padding-inline: var(--mod-assetlist-item-padding-inline-start, var(--spectrum-assetlist-item-padding-inline-start)) var(--mod-assetlist-item-padding-inline-end, var(--spectrum-assetlist-item-padding-inline-end));
- margin-block: 0 var(--mod-assetlist-item-margin-bottom, var(--spectrum-assetlist-item-margin-block-end));
+ padding-inline: var(--spectrum-spacing-300);
+ margin-block: 0 var(--spectrum-spacing-75);
margin-inline: 0;
-
- border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
-
- transition: background-color var(--mod-assetlist-item-animation, var(--spectrum-assetlist-item-animation)) ease-in-out;
-
- font-size: var(--mod-assetlist-item-font-size, var(--spectrum-assetlist-item-font-size));
- font-weight: var(--mod-assetlist-item-font-weight, var(--spectrum-assetlist-item-font-weight));
+ border-radius: var(--spectrum-corner-radius-100);
+ transition: background-color var(--spectrum-animation-duration-100) ease-in-out;
+ color: var(--spectrum-neutral-content-color-default);
+ font-size: var(--spectrum-font-size-100);
+ font-weight: var(--spectrum-regular-font-weight);
font-style: normal;
-
cursor: pointer;
-
outline: none;
- &::before {
- content: "";
-
- position: absolute;
- inset-inline-start: 0;
- inset-inline-end: 0;
-
- block-size: var(--mod-assetlist-item-height, var(--spectrum-assetlist-item-height));
-
- background-color: transparent;
-
- border-radius: var(--mod-assetlist-item-border-radius, var(--spectrum-assetlist-item-border-radius));
- }
-
&.is-selectable,
&.is-selected,
&:hover,
@@ -97,55 +53,81 @@
}
}
- &.is-branch {
- /* show chevron */
- .spectrum-AssetList-itemChildIndicator {
- display: block;
- }
+ /* show chevron */
+ &.is-branch .spectrum-AssetList-itemChildIndicator {
+ display: block;
}
.spectrum-AssetList-itemThumbnail {
/* Remove the border on images inside links in IE 10-. */
border-style: none;
-
- inline-size: var(--mod-assetlist-thumbnail-width, var(--spectrum-assetlist-thumbnail-width));
- block-size: var(--mod-assetlist-thumnail-height, var(--spectrum-assetlist-thumbnail-height));
- margin-inline-start: var(--mod-assetlist-thumbnail-margin-left, var(--spectrum-assetlist-thumbnail-margin-inline-start));
+ inline-size: var(--spectrum-thumbnail-size-100);
+ block-size: var(--spectrum-thumbnail-size-100);
+ margin-inline-start: var(--spectrum-spacing-100);
vertical-align: middle;
}
&:hover {
- background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)));
+ background-color: var(--spectrum-gray-100);
+
+ @media (forced-colors: active) {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ }
}
&:focus-within {
&:focus-visible,
&.is-focused {
- background-color: var(--highcontrast-assetlist-item-background-color-hover, var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover)));
+ background-color: var(--spectrum-gray-100);
+
+ @media (forced-colors: active) {
+ forced-color-adjust: none;
+ background-color: Highlight;
+ color: HighlightText;
+ }
&::before {
- /* we cannot achieve rounded corners with outline so we use box-shadow instead */
- box-shadow: 0 0 0 2px var(--highcontrast-assetlist-border-color-key-focus, var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))) inset;
+ content: "";
+ position: absolute;
+ inset-inline-start: 0;
+ inset-inline-end: 0;
+ block-size: 100%;
+ border-radius: var(--spectrum-corner-radius-100);
+
+ /* outline clips so we use box-shadow instead */
+ box-shadow: 0 0 0 var(--spectrum-focus-indicator-thickness) var(--spectrum-focus-indicator-color) inset;
}
}
}
&.is-navigated {
- /* gray background */
- background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
-
+ &,
&:hover,
&:focus {
- background-color: var(--mod-assetlist-item-background-color-down, var(--spectrum-assetlist-item-background-color-down));
+ background-color: var(--spectrum-gray-200);
}
}
&.is-selected {
- background-color: var(--highcontrast-assetlist-item-background-color-selected, var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected)));
+ background-color: var(--spectrum-assetlist-item-background-color-selected);
+
+ @media (forced-colors: active) {
+ forced-color-adjust: none;
+ background-color: SelectedItem;
+ color: SelectedItemText;
+ }
&:hover,
&:focus {
- background-color: var(--highcontrast-assetlist-item-background-color-selected-hover, var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover)));
+ background-color: var(--spectrum-assetlist-item-background-color-selected-hover);
+
+ @media (forced-colors: active) {
+ forced-color-adjust: none;
+ background-color: SelectedItem;
+ color: SelectedItemText;
+ }
}
}
}
@@ -156,33 +138,14 @@
.spectrum-AssetList-itemChildIndicator {
display: none;
- transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation));
+ transition: transform ease var(--spectrum-animation-duration-100);
transform: var(--spectrum-logical-rotation,);
}
.spectrum-AssetList-itemLabel {
flex: 1;
- padding-inline-start: var(--mod-assetlist-item-label-padding-inline-start, var(--spectrum-assetlist-item-label-padding-inline-start));
-
+ padding-inline-start: var(--spectrum-spacing-100);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
-
-@media (forced-colors: active) {
- .spectrum-AssetList-item {
- --highcontrast-assetlist-border-color-key-focus: Highlight;
- --highcontrast-assetlist-item-background-color-hover: Highlight;
- --highcontrast-assetlist-item-background-color-selected-hover: Highlight;
- --highcontrast-assetlist-label-color: ButtonText;
- --highcontrast-assetlist-item-background-color-selected: SelectedItem;
-
- forced-color-adjust: none;
-
- &:hover,
- &.is-selected,
- &.is-navigated {
- --highcontrast-assetlist-label-color: HighlightText;
- }
- }
-}
diff --git a/components/assetlist/package.json b/components/assetlist/package.json
index 40a1e2ee1b9..4dd940cc5d4 100644
--- a/components/assetlist/package.json
+++ b/components/assetlist/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/assetlist",
- "version": "8.3.0",
+ "version": "9.0.0-next.2",
"description": "The Spectrum CSS assetlist component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,16 +19,14 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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": {
@@ -42,9 +40,9 @@
}
},
"devDependencies": {
- "@spectrum-css/checkbox": "10.2.0",
- "@spectrum-css/icon": "9.2.0",
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/checkbox": "11.0.0-next.2",
+ "@spectrum-css/icon": "10.0.0-next.3",
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"keywords": [
"design-system",
diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js
index d421267b95d..23936f901da 100644
--- a/components/assetlist/stories/assetlist.stories.js
+++ b/components/assetlist/stories/assetlist.stories.js
@@ -1,8 +1,9 @@
import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { AssetListGroup } from "./assetlist.test.js";
+
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
-import { AssetListGroup } from "./assetlist.test.js";
/**
* A selectable list of assets, often used inside of miller columns.
@@ -12,9 +13,56 @@ export default {
component: "AssetList",
argTypes: {
items: { table: { disable: true } },
+ isSelectable: {
+ name: "Selectable",
+ type: { name: "boolean" },
+ table: {
+ type: { summary: "boolean" },
+ category: "Component",
+ },
+ control: "boolean",
+ },
},
args: {
rootClass: "spectrum-AssetList",
+ isSelectable: false,
+ items: [
+ {
+ image: "example-ava.png",
+ label: "Shantanu.jpg",
+ isSelectable: true,
+ ariaLabelledBy: "assetitemlabel-1",
+ checkboxId: "checkbox-1"
+ },
+ {
+ iconName: "Document",
+ iconSet: "workflow",
+ label: "Resource allocation documentation should truncate",
+ isSelectable: true,
+ ariaLabelledby: "assetitemlabel-2",
+ checkboxId: "checkbox-2",
+ },
+ {
+ iconName: "Folder",
+ iconSet: "workflow",
+ label: "Front-end Projects",
+ isSelectable: true,
+ isBranch: true,
+ isSelected: true,
+ ariaLabelledby: "assetitemlabel-3",
+ checkboxId: "checkbox-3",
+ },
+ {
+ iconName: "Folder",
+ iconSet: "workflow",
+ label: "Downloads",
+ isSelectable: true,
+ isBranch: true,
+ isNavigated: true,
+ ariaLabelledby: "assetitemlabel-4",
+ checkboxId: "checkbox-4",
+ },
+ ],
},
parameters: {
actions: {
@@ -22,50 +70,15 @@ export default {
},
packageJson,
metadata,
+ status: {
+ type: "migrated",
+ },
},
+ tags: ["migrated"],
};
export const Default = AssetListGroup.bind({});
-Default.args = {
- items: [
- {
- image: "example-ava.png",
- label: "Shantanu.jpg",
- isSelectable: true,
- ariaLabelledBy: "assetitemlabel-1",
- checkboxId: "checkbox-1"
- },
- {
- iconName: "Document",
- iconSet: "workflow",
- label: "Resource allocation documentation should truncate",
- isSelectable: true,
- ariaLabelledby: "assetitemlabel-2",
- checkboxId: "checkbox-2",
- },
- {
- iconName: "Folder",
- iconSet: "workflow",
- label: "Front-end Projects",
- isSelectable: true,
- isBranch: true,
- isSelected: true,
- ariaLabelledby: "assetitemlabel-3",
- checkboxId: "checkbox-3",
- },
- {
- iconName: "Folder",
- iconSet: "workflow",
- label: "Downloads",
- isSelectable: true,
- isBranch: true,
- isSelected: false,
- isNavigated: true,
- ariaLabelledby: "assetitemlabel-4",
- checkboxId: "checkbox-4",
- },
- ],
-};
+Default.args = {};
// ********* VRT ONLY ********* //
export const WithForcedColors = AssetListGroup.bind({});
diff --git a/components/assetlist/stories/assetlist.test.js b/components/assetlist/stories/assetlist.test.js
index 24f14f7971e..d92fc29aa2a 100644
--- a/components/assetlist/stories/assetlist.test.js
+++ b/components/assetlist/stories/assetlist.test.js
@@ -1,4 +1,73 @@
import { Variants } from "@spectrum-css/preview/decorators";
import { Template } from "./template.js";
-export const AssetListGroup = Variants({ Template });
+const items = [
+ {
+ image: "example-ava.png",
+ label: "Shantanu.jpg",
+ ariaLabelledBy: "assetitemlabel-1",
+ checkboxId: "checkbox-1"
+ },
+ {
+ iconName: "Document",
+ iconSet: "workflow",
+ label: "Resource allocation documentation should truncate",
+ ariaLabelledby: "assetitemlabel-2",
+ checkboxId: "checkbox-2",
+ },
+ {
+ iconName: "Folder",
+ iconSet: "workflow",
+ label: "Front-end projects",
+ ariaLabelledby: "assetitemlabel-3",
+ checkboxId: "checkbox-3",
+ isBranch: true,
+ },
+ {
+ iconName: "Folder",
+ iconSet: "workflow",
+ label: "Downloads",
+ ariaLabelledby: "assetitemlabel-4",
+ checkboxId: "checkbox-4",
+ isBranch: true,
+ },
+];
+export const AssetListGroup = Variants({
+ Template,
+ testData: [
+ {
+ testHeading: "Default",
+ items,
+ },
+ {
+ testHeading: "Selectable",
+ isSelectable: true,
+ }
+ ],
+ stateData: [{
+ testHeading: "Navigated",
+ items: items.map((item, idx) => ({ ...item, isNavigated: idx === 2 })),
+ }, {
+ testHeading: "Selected",
+ items: items.map((item, idx) => ({ ...item, isSelected: idx < 2 })),
+ }, {
+ testHeading: "Focused",
+ items: items.map((item, idx) => ({
+ ...item,
+ isFocused: idx % 2
+ })),
+ }, {
+ testHeading: "Hovered",
+ items: items.map((item) => ({
+ ...item,
+ isHovered: true
+ })),
+ }, {
+ testHeading: "Hovered + selected",
+ items: items.map((item) => ({
+ ...item,
+ isSelected: true,
+ isHovered: true
+ })),
+ }]
+});
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index 96d8f75a80c..d0b5bf0620e 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",
@@ -23,6 +20,8 @@ export const AssetListItem = ({
isSelectable = false,
isSelected = false,
isBranch = false,
+ isFocused = false,
+ isHovered = false,
onclick = () => {},
} = {}, context = {}) => html`
({ ...a, [c]: true }), {}),
})}
id=${ifDefined(id)}
@@ -38,20 +93,21 @@ export const Dialog = ({
>
${content}
- ${ButtonGroup({ items: buttons }, context)}
+
`;
@@ -59,7 +115,6 @@ export const Dialog = ({
export const Template = ({
isOpen = true,
- customModalStyles = {},
skipWrapper = false,
...args
} = {}, context = {}) => {
@@ -68,7 +123,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 aacdb69b1a7..b68e82c60ef 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.2.0
### Minor Changes
diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json
index 306c123b1b6..fd0baac95cd 100644
--- a/components/asset/dist/metadata.json
+++ b/components/asset/dist/metadata.json
@@ -10,34 +10,13 @@
".spectrum-Asset-folderOutline",
".spectrum-Asset-image"
],
- "modifiers": [
- "--mod-asset-file-background-color",
- "--mod-asset-folder-background-color",
- "--mod-asset-icon-margin",
- "--mod-asset-icon-max-width",
- "--mod-asset-icon-min-width",
- "--mod-asset-icon-outline-color"
- ],
- "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"
- ],
+ "modifiers": [],
+ "component": [],
"global": [
- "--spectrum-animation-duration-100",
"--spectrum-gray-200",
"--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"]
+ "high-contrast": []
}
diff --git a/components/asset/index.css b/components/asset/index.css
index abf5d42572f..b283a1c58b0 100644
--- a/components/asset/index.css
+++ b/components/asset/index.css
@@ -11,14 +11,7 @@
* 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));
-
display: flex;
align-items: center;
justify-content: center;
@@ -31,34 +24,27 @@
max-inline-size: 100%;
max-block-size: 100%;
object-fit: contain;
- transition: opacity var(--spectrum-animation-duration-100);
}
.spectrum-Asset-folder,
.spectrum-Asset-file {
- inline-size: clamp(var(--mod-asset-icon-min-width, 48px), 100%, var(--mod-asset-icon-max-width, 80px));
+ inline-size: clamp(48px, 100%, 80px);
block-size: 100%;
- margin: var(--mod-asset-icon-margin, 20px);
+ margin: 20px;
}
.spectrum-Asset-folderBackground {
- fill: var(--spectrum-asset-folder-background);
+ fill: var(--spectrum-gray-200);
}
.spectrum-Asset-fileBackground {
- fill: var(--spectrum-asset-file-background);
+ fill: var(--spectrum-gray-25);
}
.spectrum-Asset-folderOutline {
- fill: var(--spectrum-asset-folder-outline);
+ fill: var(--spectrum-gray-500);
}
.spectrum-Asset-fileOutline {
- fill: var(--spectrum-asset-file-outline);
-}
-
-@media (forced-colors: active) {
- .spectrum-Asset {
- --highcontrast-asset-icon-background-color: currentColor;
- }
+ fill: var(--spectrum-gray-500);
}
diff --git a/components/asset/package.json b/components/asset/package.json
index 3a0a81666ec..d1e54ab6159 100644
--- a/components/asset/package.json
+++ b/components/asset/package.json
@@ -1,6 +1,6 @@
{
"name": "@spectrum-css/asset",
- "version": "7.2.0",
+ "version": "8.0.0-next.0",
"description": "The Spectrum CSS asset component",
"license": "Apache-2.0",
"author": "Adobe",
@@ -19,14 +19,12 @@
"./package.json": "./package.json",
"./dist/*": "./dist/*",
"./index.css": "./dist/index.css",
- "./index-*.css": "./dist/index-*.css",
"./metadata.json": "./dist/metadata.json",
- "./themes/*": "./dist/themes/*",
"./stories/*": "./stories/*"
},
"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 +32,7 @@
}
},
"devDependencies": {
- "@spectrum-css/tokens": "16.0.2"
+ "@spectrum-css/tokens": "16.1.0-next.10"
},
"keywords": [
"design-system",
diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js
index 927c1009aad..01bbe81fad3 100644
--- a/components/asset/stories/asset.stories.js
+++ b/components/asset/stories/asset.stories.js
@@ -38,7 +38,11 @@ export default {
parameters: {
packageJson,
metadata,
+ status: {
+ type: "migrated",
+ },
},
+ tags: ["migrated"],
};
export const Default = AssetGroup.bind({});
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
-
- ${Divider({
- horizontal: true,
- customClasses: [`${rootClass}-divider`],
- }, context)}