Skip to content

Commit 313ee43

Browse files
castastrophecastastrophe
committed
fix: updates after feedback from design
1 parent 843547e commit 313ee43

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+414
-612
lines changed

‎components/accordion/dist/metadata.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@
3333
".spectrum-Accordion-itemTitle",
3434
".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
3535
".spectrum-Accordion:dir(rtl)",
36-
".spectrum-Accordion:lang(ja)",
37-
".spectrum-Accordion:lang(ko)",
38-
".spectrum-Accordion:lang(zh)"
36+
".spectrum-Accordion:lang(ja, zh, ko)"
3937
],
4038
"modifiers": [
4139
"--mod-accordion-animation-duration",

‎components/accordion/index.css

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,7 @@
8484
}
8585

8686
/* CJK (Chinese, Japanese, and Korean) language support */
87-
&:lang(ja),
88-
&:lang(zh),
89-
&:lang(ko) {
87+
&:lang(ja, zh, ko) {
9088
--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
9189
--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
9290
}

‎components/actionbar/dist/metadata.json

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,13 @@
55
".spectrum-ActionBar .spectrum-ActionBar-popover",
66
".spectrum-ActionBar .spectrum-ActionGroup",
77
".spectrum-ActionBar .spectrum-FieldLabel",
8-
".spectrum-ActionBar .spectrum-FieldLabel:lang(ja)",
9-
".spectrum-ActionBar .spectrum-FieldLabel:lang(ko)",
10-
".spectrum-ActionBar .spectrum-FieldLabel:lang(zh)",
8+
".spectrum-ActionBar .spectrum-FieldLabel:lang(ja, zh, ko)",
119
".spectrum-ActionBar--fixed",
1210
".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
1311
".spectrum-ActionBar--sticky",
1412
".spectrum-ActionBar.is-open",
1513
".spectrum-ActionBar.spectrum-ActionBar--emphasized",
16-
".spectrum-ActionBar:lang(ja)",
17-
".spectrum-ActionBar:lang(ko)",
18-
".spectrum-ActionBar:lang(zh)"
14+
".spectrum-ActionBar:lang(ja, zh, ko)"
1915
],
2016
"modifiers": [
2117
"--mod-actionbar-close-button-to-counter",

‎components/actionbar/index.css

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,7 @@
4444
}
4545

4646
/* cjk language support for item counter */
47-
&:lang(ja),
48-
&:lang(zh),
49-
&:lang(ko) {
47+
&:lang(ja, zh, ko) {
5048
--spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
5149
}
5250
}
@@ -110,9 +108,7 @@
110108
padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter));
111109

112110
/* cjk language support */
113-
&:lang(ja),
114-
&:lang(zh),
115-
&:lang(ko) {
111+
&:lang(ja, zh, ko) {
116112
line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
117113
}
118114
}

‎components/actionbutton/dist/metadata.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
".spectrum-ActionButton-label",
1515
".spectrum-ActionButton-label:empty",
1616
".spectrum-ActionButton.is-disabled",
17-
".spectrum-ActionButton.spectrum-ActionButton--emphasized:has([aria-pressed=\"true\"])",
17+
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"])",
1818
".spectrum-ActionButton.spectrum-ActionButton--quiet",
19-
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:has([aria-pressed=\"true\"]))",
20-
".spectrum-ActionButton.spectrum-ActionButton--quiet:has([aria-pressed=\"true\"])",
19+
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:is([aria-pressed=\"true\"]))",
20+
".spectrum-ActionButton.spectrum-ActionButton--quiet:is([aria-pressed=\"true\"])",
2121
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
2222
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
23-
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:has([aria-pressed=\"true\"])",
23+
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"])",
2424
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
2525
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
26-
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:has([aria-pressed=\"true\"])",
26+
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"])",
2727
".spectrum-ActionButton::-moz-focus-inner",
2828
".spectrum-ActionButton:active",
2929
".spectrum-ActionButton:after",
@@ -33,8 +33,8 @@
3333
".spectrum-ActionButton:focus-visible",
3434
".spectrum-ActionButton:focus-visible:after",
3535
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
36-
".spectrum-ActionButton:has([aria-pressed=\"true\"])",
3736
".spectrum-ActionButton:hover",
37+
".spectrum-ActionButton:is([aria-pressed=\"true\"])",
3838
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
3939
"a.spectrum-ActionButton"
4040
],

‎components/actionbutton/index.css

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ governing permissions and limitations under the License.
4747
--spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
4848

4949
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
50-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
50+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium));
5151
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
5252
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
5353
--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.
6666
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
6767
--spectrum-actionbutton-background-color-disabled: transparent;
6868

69-
&:has([aria-pressed="true"]) {
69+
&:is([aria-pressed="true"]) {
7070
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
7171
}
7272
}
@@ -119,7 +119,7 @@ governing permissions and limitations under the License.
119119
}
120120
}
121121

122-
&:has([aria-pressed="true"]) {
122+
&:is([aria-pressed="true"]) {
123123
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
124124
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
125125
--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.
179179
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
180180
--spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
181181
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
182-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
182+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small));
183183
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
184184
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50);
185185
--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.
196196
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
197197
--spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
198198
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
199-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
199+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small));
200200
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
201201
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75);
202202
--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.
213213
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
214214
--spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
215215
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
216-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
216+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large));
217217
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
218218
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200);
219219
--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.
228228
--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
229229
--spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
230230
--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
231-
--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
231+
--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large));
232232
--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
233233
--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
234234
--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
@@ -314,10 +314,22 @@ a.spectrum-ActionButton {
314314

315315
.spectrum-ActionButton-hold {
316316
position: absolute;
317-
inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
318-
inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
317+
inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
318+
inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
319+
display: block;
319320
color: inherit;
321+
background-color: currentColor;
320322
transform: var(--spectrum-logical-rotation);
323+
324+
inline-size: 5px;
325+
block-size: 5px;
326+
327+
/**
328+
* A few things to note here:
329+
* - cw = clockwise, ccw = counter-clockwise
330+
*/
331+
aspect-ratio: 1;
332+
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);
321333
}
322334

323335
/* Focus indicator */
@@ -389,7 +401,7 @@ a.spectrum-ActionButton {
389401
--highcontrast-actionbutton-background-color-disabled: Canvas;
390402
--highcontrast-actionbutton-content-color-default: CanvasText;
391403

392-
&:disabled:not(:has([aria-pressed="true"])) {
404+
&:disabled:not(:is([aria-pressed="true"])) {
393405
--highcontrast-actionbutton-border-color: Canvas;
394406
}
395407
}
@@ -402,7 +414,7 @@ a.spectrum-ActionButton {
402414
}
403415

404416
/* Selected always shows as a solid highlighted color. */
405-
&:has([aria-pressed="true"]) {
417+
&:is([aria-pressed="true"]) {
406418
--highcontrast-actionbutton-border-color: Highlight;
407419
--highcontrast-actionbutton-background-color-default: Highlight;
408420
--highcontrast-actionbutton-content-color-default: HighlightText;

‎components/actionbutton/stories/actionbutton.stories.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,17 @@ export default {
6868
control: "select",
6969
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
7070
},
71+
showPopup: {
72+
name: "Show popup",
73+
description: "If the button triggers a popup action, this should be set to reflect the type of element that pops-up.",
74+
type: { name: "boolean" },
75+
table: {
76+
type: { summary: "boolean" },
77+
category: "Accessibility",
78+
},
79+
control: "boolean",
80+
if: { arg: "hasPopup", truthy: true },
81+
},
7182
isOpen: {
7283
...isOpen,
7384
if: { arg: "hasPopup", truthy: true },
@@ -83,6 +94,7 @@ export default {
8394
isQuiet: false,
8495
isEmphasized: false,
8596
hasPopup: "false",
97+
showPopup: false,
8698
isActive: false,
8799
isFocused: false,
88100
isHovered: false,

‎components/actionbutton/stories/template.js

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const Template = ({
7474
aria-label=${ifDefined(hideLabel ? label : undefined)}
7575
aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
7676
aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
77-
aria-pressed=${isSelected ? "true" : "false"}
77+
aria-pressed=${ifDefined(isSelected ? "true" : undefined)}
7878
aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
7979
class=${classMap({
8080
[rootClass]: true,
@@ -107,20 +107,7 @@ export const Template = ({
107107
updateArgs({ isFocused: false });
108108
}}
109109
>
110-
${when(showPopup && hasPopup && hasPopup !== "false", () =>
111-
Icon({
112-
size,
113-
iconName: "CornerTriangle" + ({
114-
xs: "75",
115-
s: "75",
116-
m: "100",
117-
l: "200",
118-
xl: "300",
119-
}[size] || "100"),
120-
setName: "ui",
121-
customClasses: [`${rootClass}-hold`],
122-
}, context)
123-
)}
110+
${when(showPopup && hasPopup && hasPopup !== "false", () => html`<span class=${classMap({ [`${rootClass}-hold`]: true })}></span>`)}
124111
${when(iconName, () =>
125112
Icon({
126113
size,

0 commit comments

Comments
 (0)