fix: updates after feedback from design

Author: castastrophe

components/actionbutton/dist/metadata.json

@@ -14,16 +14,16 @@
     ".spectrum-ActionButton-label",
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
-    ".spectrum-ActionButton.spectrum-ActionButton--emphasized:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:has([aria-pressed=\"true\"]))",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:is([aria-pressed=\"true\"]))",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -33,8 +33,8 @@
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
     ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
-    ".spectrum-ActionButton:has([aria-pressed=\"true\"])",
     ".spectrum-ActionButton:hover",
+    ".spectrum-ActionButton:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
     "a.spectrum-ActionButton"
   ],

components/actionbutton/index.css

@@ -47,7 +47,7 @@ governing permissions and limitations under the License.
 	--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-hold-icon: var(--mod-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);
@@ -66,7 +66,7 @@ governing permissions and limitations under the License.
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-disabled: transparent;
 
-		&:has([aria-pressed="true"]) {
+		&:is([aria-pressed="true"]) {
 			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
 		}
 	}
@@ -119,7 +119,7 @@ governing permissions and limitations under the License.
 		}
 	}
 
-	&:has([aria-pressed="true"]) {
+	&:is([aria-pressed="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));
@@ -179,7 +179,7 @@ governing permissions and limitations under the License.
 	--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-hold-icon: var(--mod-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);
@@ -196,7 +196,7 @@ governing permissions and limitations under the License.
 	--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-hold-icon: var(--mod-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);
@@ -213,7 +213,7 @@ governing permissions and limitations under the License.
 	--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-hold-icon: var(--mod-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);
@@ -228,7 +228,7 @@ governing permissions and limitations under the License.
 	--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-hold-icon: var(--mod-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);
@@ -253,6 +253,18 @@ governing permissions and limitations under the License.
 	background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
 	color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));
 
+	transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
+
+	&::after {
+		position: absolute;
+		inset: 0;
+		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
+		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
+		transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
+		pointer-events: none;
+		content: "";
+	}
+
 	&: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)));
@@ -261,6 +273,13 @@ governing permissions and limitations under the License.
 	&:focus-visible {
 		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(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
+		}
 	}
 
 	&:active {
@@ -314,34 +333,22 @@ a.spectrum-ActionButton {
 
 .spectrum-ActionButton-hold {
 	position: absolute;
-	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));
+	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));
+	display: block;
 	color: inherit;
+	background-color: currentColor;
 	transform: var(--spectrum-logical-rotation);
-}
 
-/* Focus indicator */
-.spectrum-ActionButton {
-	transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
-
-	&::after {
-		position: absolute;
-		inset: 0;
-		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
-		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
-		transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
-		pointer-events: none;
-		content: "";
-	}
-
-	&:focus-visible {
-		box-shadow: none;
-		outline: none;
+	inline-size: 5px;
+	block-size: 5px;
 
-		&::after {
-			box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
-		}
-	}
+	/**
+	 * A few things to note here:
+	 * - cw = clockwise, ccw = counter-clockwise
+	 */
+	aspect-ratio: 1;
+	clip-path: shape(from 2.96% 82.89%, line to 82.92% 2.91%, arc to 100% 9.98% of 9.89% 9.84% small cw, vline to 84.97%, arc by -15.02% 15.03% of 15.02% 15.03% small cw, hline to 10.03%, arc by -7.09% -17.11% of 10.01% 10.02% small cw);
 }
 
 @media (forced-colors: active) {
@@ -389,7 +396,7 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-background-color-disabled: Canvas;
 			--highcontrast-actionbutton-content-color-default: CanvasText;
 
-			&:disabled:not(:has([aria-pressed="true"])) {
+			&:disabled:not(:is([aria-pressed="true"])) {
 				--highcontrast-actionbutton-border-color: Canvas;
 			}
 		}
@@ -402,7 +409,7 @@ a.spectrum-ActionButton {
 		}
 
 		/* Selected always shows as a solid highlighted color. */
-		&:has([aria-pressed="true"]) {
+		&:is([aria-pressed="true"]) {
 			--highcontrast-actionbutton-border-color: Highlight;
 			--highcontrast-actionbutton-background-color-default: Highlight;
 			--highcontrast-actionbutton-content-color-default: HighlightText;

components/actionbutton/stories/actionbutton.stories.js

@@ -68,6 +68,17 @@ export default {
 			control: "select",
 			options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
 		},
+		showPopup: {
+			name: "Show popup",
+			description: "If the button triggers a popup action, this should be set to reflect the type of element that pops-up.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Accessibility",
+			},
+			control: "boolean",
+			if: { arg: "hasPopup", truthy: true },
+		},
 		isOpen: {
 			...isOpen,
 			if: { arg: "hasPopup", truthy: true },
@@ -83,6 +94,7 @@ export default {
 		isQuiet: false,
 		isEmphasized: false,
 		hasPopup: "false",
+		showPopup: false,
 		isActive: false,
 		isFocused: false,
 		isHovered: false,

components/actionbutton/stories/template.js

@@ -74,7 +74,7 @@ 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,
@@ -107,20 +107,7 @@ export const Template = ({
 				updateArgs({ isFocused: false });
 			}}
 		>
-			${when(showPopup && hasPopup && hasPopup !== "false", () =>
-				Icon({
-					size,
-					iconName: "CornerTriangle" + ({
-						xs: "75",
-						s: "75",
-						m: "100",
-						l: "200",
-						xl: "300",
-					}[size] || "100"),
-					setName: "ui",
-					customClasses: [`${rootClass}-hold`],
-				}, context)
-			)}
+			${when(showPopup && hasPopup && hasPopup !== "false", () => html`<span class=${classMap({ [`${rootClass}-hold`]: true })}></span>`)}
 			${when(iconName, () =>
 				Icon({
 					size,