Skip to content

feat(action-menu): S2 migration [CSS-1160] #4085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: spectrum-two
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .storybook/decorators/arg-events.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ export const withArgEvents = makeDecorator({
parameterName: "argEvents",
wrapper: (StoryFn, context) => {
/** @type {[Args, (newArgs: Partial<Args>) => void, (argNames?: (keyof Args)[]) => void]} */
const [, updateArgs] = useArgs(context.args);
const [, updateArgs, resetArgs] = useArgs(Object.keys(context.args));

// Bind the updateArgs function for use in nested templates
context.updateArgs = updateArgs;
context.resetArgs = resetArgs;

return StoryFn(context);
},
Expand Down
12 changes: 6 additions & 6 deletions components/actionbutton/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,16 @@
".spectrum-ActionButton-label",
".spectrum-ActionButton-label:empty",
".spectrum-ActionButton.is-disabled",
".spectrum-ActionButton.is-selected",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"])",
".spectrum-ActionButton.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
".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:is([aria-pressed=\"true\"])",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"])",
".spectrum-ActionButton::-moz-focus-inner",
".spectrum-ActionButton:active",
".spectrum-ActionButton:after",
Expand All @@ -35,6 +34,7 @@
".spectrum-ActionButton:focus-visible:after",
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
".spectrum-ActionButton:hover",
".spectrum-ActionButton:is([aria-pressed=\"true\"])",
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
"a.spectrum-ActionButton"
],
Expand Down
73 changes: 40 additions & 33 deletions components/actionbutton/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;

&.is-selected {
&:is([aria-pressed="true"]) {
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
}
}
Expand Down Expand Up @@ -119,7 +119,7 @@ governing permissions and limitations under the License.
}
}

&.is-selected {
&: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));
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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)));
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ [stylelint] <declaration-property-value-no-unknown> reported by reviewdog 🐶
Unexpected unknown value "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)" for property "clip-path"

}

@media (forced-colors: active) {
Expand Down Expand Up @@ -389,7 +396,7 @@ a.spectrum-ActionButton {
--highcontrast-actionbutton-background-color-disabled: Canvas;
--highcontrast-actionbutton-content-color-default: CanvasText;

&:disabled:not(.is-selected) {
&:disabled:not(:is([aria-pressed="true"])) {
--highcontrast-actionbutton-border-color: Canvas;
}
}
Expand All @@ -402,7 +409,7 @@ a.spectrum-ActionButton {
}

/* Selected always shows as a solid highlighted color. */
&.is-selected {
&:is([aria-pressed="true"]) {
--highcontrast-actionbutton-border-color: Highlight;
--highcontrast-actionbutton-background-color-default: Highlight;
--highcontrast-actionbutton-content-color-default: HighlightText;
Expand Down
24 changes: 21 additions & 3 deletions components/actionbutton/stories/actionbutton.stories.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
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";

/**
* The action button component represents an action a user can take.
*
Expand Down Expand Up @@ -66,6 +68,21 @@ 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 },
},
staticColor: {
...staticColor,
if: { arg: "isEmphasized", truthy: false },
Expand All @@ -77,6 +94,7 @@ export default {
isQuiet: false,
isEmphasized: false,
hasPopup: "false",
showPopup: false,
isActive: false,
isFocused: false,
isHovered: false,
Expand Down
21 changes: 5 additions & 16 deletions components/actionbutton/stories/template.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ export const Template = ({
isFocused = false,
isActive = false,
isDisabled = false,
isOpen = false,
hasPopup = "false",
showPopup = false,
popupId,
hideLabel = false,
staticColor,
Expand All @@ -72,7 +74,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()}`]:
Expand All @@ -82,7 +85,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,
Expand All @@ -105,20 +107,7 @@ export const Template = ({
updateArgs({ isFocused: false });
}}
>
${when(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,
Expand Down
2 changes: 1 addition & 1 deletion components/actiongroup/dist/metadata.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@
".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:has([aria-pressed=\"true\"])",
".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--justified .spectrum-ActionGroup-item",
Expand Down
2 changes: 1 addition & 1 deletion components/actiongroup/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
}

&.is-selected {
&:has([aria-pressed="true"]) {
z-index: 1;
}

Expand Down
9 changes: 9 additions & 0 deletions components/actionmenu/dist/metadata.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"sourceFile": "index.css",
"selectors": [".spectrum-ActionMenu", ".spectrum-ActionMenu-popover"],
"modifiers": ["--mod-actionmenu-button-to-menu-gap"],
"component": ["--spectrum-actionmenu-button-to-menu-gap"],
"global": ["--spectrum-spacing-100"],
"passthroughs": ["--mod-popover-animation-distance"],
"high-contrast": []
}
34 changes: 34 additions & 0 deletions components/actionmenu/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*!
* Copyright 2024 Adobe. All rights reserved.
*
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/

/*
* @spectrum-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:
* <div class="spectrum-ActionMenu"> <!-- This is the container -->
* <button class="spectrum-ActionMenu-trigger spectrum-ActionButton"> ... </button> <!-- This is the action button -->
* <div class="spectrum-ActionMenu-popover spectrum-Popover"> <!-- This is the popover that contains the menu -->
* <ul class="spectrum-ActionMenu-menu spectrum-Menu"> <!-- This is the menu -->
*/

.spectrum-ActionMenu {
--spectrum-actionmenu-button-to-menu-gap: var(--mod-actionmenu-button-to-menu-gap, var(--spectrum-spacing-100));
}

.spectrum-ActionMenu-popover {
/* @passthrough start -- popover */
/* note: right now this is already the same value as the popover animation distance */
--mod-popover-animation-distance: var(--spectrum-actionmenu-button-to-menu-gap);
/* @passthrough end */
}
17 changes: 17 additions & 0 deletions components/actionmenu/project.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"name": "actionmenu",
"tags": ["component"],
"targets": {
"build": {},
"clean": {},
"compare": {},
"format": {},
"lint": {},
"report": {},
"test": {
"defaultConfiguration": "scope"
},
"validate": {}
}
}
Loading
Loading