Skip to content

Commit 520a8a4

Browse files
marissahuysentruytmarissahuysentruyt
authored
feat(popover)!: S2 popover migration (#3365)
feat(popover): new S2 popover styles - new tokens and token values used for popover - create changeset - rebuild metadata.json - adjust popoverWidth and popoverHeight args to accommodate new padding - update test file with new popoverWidth and popoverHeight - correct side aligned popovers distance to source * fix(coachmark): nested popover style updates - update the border radius of the popover nested in coachmark to match S2 popover specs - update popover `--mod-popover-content-area-spacing` variable name (previously --mod-popover-content-area-spacing-vertical) - rebuild metadata.json * fix(picker): update popover selector class - with the new default position for popover, the selector class for the popover in picker also needed to be updated. (--bottom-start) - create changeset - rebuild metadata.json * docs(popover): fixup some docs wording - add down state link
1 parent c297d1c commit 520a8a4

File tree

13 files changed

+118
-71
lines changed

13 files changed

+118
-71
lines changed

‎.changeset/itchy-shrimps-help.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/picker": patch
3+
---
4+
5+
S2 Popover has an updated default position, bottom-start. The correct `.spectrum-Popover--bottom-start` class was added to the open popover selector blocks for picker so that the spacing from the picker to the popover is correctly adjusted.

‎.changeset/rotten-meals-share.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
"@spectrum-css/popover": major
3+
---
4+
5+
S2 Popover Migration
6+
7+
The S2 popover using new tokens for border color, padding, corner radius and elevation/drop shadows.
8+
9+
Renamed Mods
10+
11+
| Old mod | New mod |
12+
| --------------------------------------------- | ------------------------------------ |
13+
| `--mod-popover-shadow-blur` | `--mod-popover-drop-shadow-blur` |
14+
| `--mod-popover-shadow-color` | `--mod-popover-drop-shadow-color` |
15+
| `--mod-popover-shadow-horizontal` | `--mod-popover-drop-shadow-x` |
16+
| `--mod-popover-shadow-vertical` | `--mod-popover-drop-shadow-y` |
17+
| `--mod-popover-content-area-spacing-vertical` | `--mod-popover-content-area-spacing` |

‎.changeset/twenty-ravens-divide.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@spectrum-css/coachmark": minor
3+
---
4+
5+
CSS references to popover custom properties/tokens were updated to reflect some mod name changes in the S2 popover (#3365). The corner radius token was updated to correspond to the new S2 popover corner radius, as well as some updated popover mod names:
6+
7+
- `--mod-popover-content-area-spacing-vertical` was updated to `--mod-popover-content-area-spacing`.
8+
- `--spectrum-border-width-100` was updated to `--spectrum-corner-radius-large-default`

‎components/coachmark/dist/metadata.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
"--spectrum-body-sans-serif-font-style",
7272
"--spectrum-body-sans-serif-font-weight",
7373
"--spectrum-border-width-100",
74-
"--spectrum-corner-radius-100",
74+
"--spectrum-corner-radius-large-default",
7575
"--spectrum-heading-color",
7676
"--spectrum-heading-line-height",
7777
"--spectrum-heading-sans-serif-font-weight",
@@ -86,7 +86,7 @@
8686
"--mod-buttongroup-justify-content",
8787
"--mod-buttongroup-spacing",
8888
"--mod-popover-border-width",
89-
"--mod-popover-content-area-spacing-vertical",
89+
"--mod-popover-content-area-spacing",
9090
"--mod-popover-corner-radius"
9191
],
9292
"high-contrast": []

‎components/coachmark/index.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
/* @passthrough start */
1919
--mod-buttongroup-justify-content: flex-end;
2020
--mod-popover-border-width: var(--spectrum-border-width-100);
21-
--mod-popover-corner-radius: var(--spectrum-corner-radius-100);
22-
--mod-popover-content-area-spacing-vertical: 0;
21+
--mod-popover-corner-radius: var(--spectrum-corner-radius-large-default);
22+
--mod-popover-content-area-spacing: 0;
2323
--mod-button-edge-to-visual-only: 9px;
2424
/* @passthrough end */
2525

‎components/picker/dist/metadata.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-Picker",
5-
".spectrum-Picker + .spectrum-Popover--bottom.is-open",
5+
".spectrum-Picker + .spectrum-Popover--bottom-start.is-open",
66
".spectrum-Picker .spectrum-Picker-icon",
77
".spectrum-Picker .spectrum-Picker-label",
88
".spectrum-Picker .spectrum-ProgressCircle",
@@ -13,11 +13,11 @@
1313
".spectrum-Picker--quiet:focus-visible:after",
1414
".spectrum-Picker--sideLabel",
1515
".spectrum-Picker--sizeL",
16-
".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open",
16+
".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open",
1717
".spectrum-Picker--sizeS",
18-
".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open",
18+
".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open",
1919
".spectrum-Picker--sizeXL",
20-
".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open",
20+
".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open",
2121
".spectrum-Picker-label",
2222
".spectrum-Picker-label.is-placeholder",
2323
".spectrum-Picker-label.is-placeholder:active",

‎components/picker/index.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
5353
--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
5454

55-
& + .spectrum-Popover--bottom.is-open {
55+
& + .spectrum-Popover--bottom-start.is-open {
5656
--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium);
5757
}
5858

@@ -124,7 +124,7 @@
124124
--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75);
125125
--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75);
126126

127-
& + .spectrum-Popover--bottom.is-open {
127+
& + .spectrum-Popover--bottom-start.is-open {
128128
--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small);
129129
}
130130
}
@@ -146,7 +146,7 @@
146146
--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200);
147147
--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200);
148148

149-
& + .spectrum-Popover--bottom.is-open {
149+
& + .spectrum-Popover--bottom-start.is-open {
150150
--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large);
151151
}
152152
}
@@ -168,7 +168,7 @@
168168
--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300);
169169
--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300);
170170

171-
& + .spectrum-Popover--bottom.is-open {
171+
& + .spectrum-Popover--bottom-start.is-open {
172172
--spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large);
173173
}
174174
}
@@ -409,7 +409,7 @@
409409
margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon));
410410
}
411411

412-
.spectrum-Picker + .spectrum-Popover--bottom.is-open {
412+
.spectrum-Picker + .spectrum-Popover--bottom-start.is-open {
413413
transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover)));
414414
}
415415

‎components/picker/stories/template.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,11 +143,14 @@ export const Template = ({
143143
const popoverMarkup = popoverContent.length !== 0 ? Popover({
144144
isOpen: isOpen && !isDisabled && !isLoading,
145145
withTip: false,
146-
position: "bottom",
146+
position: "bottom-start",
147147
isQuiet,
148148
content: popoverContent,
149149
size,
150150
customStyles: customPopoverStyles,
151+
popoverWrapperStyles: {
152+
"display": "block",
153+
},
151154
}, context) : "";
152155

153156
const helpTextMarkup = helpText ? HelpText({

‎components/popover/dist/metadata.json‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -104,48 +104,51 @@
104104
"--mod-popover-background-color",
105105
"--mod-popover-border-color",
106106
"--mod-popover-border-width",
107-
"--mod-popover-content-area-spacing-vertical",
107+
"--mod-popover-content-area-spacing",
108108
"--mod-popover-corner-radius",
109+
"--mod-popover-drop-shadow-blur",
110+
"--mod-popover-drop-shadow-color",
111+
"--mod-popover-drop-shadow-x",
112+
"--mod-popover-drop-shadow-y",
109113
"--mod-popover-filter",
110114
"--mod-popover-pointer-edge-spacing",
111115
"--mod-popover-pointer-height",
112-
"--mod-popover-pointer-width",
113-
"--mod-popover-shadow-blur",
114-
"--mod-popover-shadow-color",
115-
"--mod-popover-shadow-horizontal",
116-
"--mod-popover-shadow-vertical"
116+
"--mod-popover-pointer-width"
117117
],
118118
"component": [
119119
"--spectrum-popover-animation-distance",
120120
"--spectrum-popover-background-color",
121-
"--spectrum-popover-border-color",
121+
"--spectrum-popover-border-color-rgb",
122+
"--spectrum-popover-border-color-with-transparency",
123+
"--spectrum-popover-border-opacity",
124+
"--spectrum-popover-border-transparency",
122125
"--spectrum-popover-border-width",
123-
"--spectrum-popover-content-area-spacing-vertical",
126+
"--spectrum-popover-content-area-spacing",
124127
"--spectrum-popover-corner-radius",
128+
"--spectrum-popover-drop-shadow-blur",
129+
"--spectrum-popover-drop-shadow-color",
130+
"--spectrum-popover-drop-shadow-x",
131+
"--spectrum-popover-drop-shadow-y",
132+
"--spectrum-popover-edge-to-content-area",
125133
"--spectrum-popover-filter",
126134
"--spectrum-popover-pointer-edge-offset",
127135
"--spectrum-popover-pointer-edge-spacing",
128136
"--spectrum-popover-pointer-height",
129137
"--spectrum-popover-pointer-width",
130-
"--spectrum-popover-shadow-blur",
131-
"--spectrum-popover-shadow-color",
132-
"--spectrum-popover-shadow-horizontal",
133-
"--spectrum-popover-shadow-vertical",
134138
"--spectrum-popover-tip-height",
135-
"--spectrum-popover-tip-width",
136-
"--spectrum-popover-top-to-content-area"
139+
"--spectrum-popover-tip-width"
137140
],
138141
"global": [
139142
"--spectrum-animation-duration-0",
140143
"--spectrum-animation-duration-100",
141144
"--spectrum-background-layer-2-color",
142145
"--spectrum-border-width-100",
143-
"--spectrum-corner-radius-100",
144-
"--spectrum-drop-shadow-blur",
145-
"--spectrum-drop-shadow-color",
146-
"--spectrum-drop-shadow-x",
147-
"--spectrum-drop-shadow-y",
148-
"--spectrum-gray-400",
146+
"--spectrum-corner-radius-large-default",
147+
"--spectrum-drop-shadow-elevated-blur",
148+
"--spectrum-drop-shadow-elevated-color",
149+
"--spectrum-drop-shadow-elevated-x",
150+
"--spectrum-drop-shadow-elevated-y",
151+
"--spectrum-gray-200-rgb",
149152
"--spectrum-spacing-100"
150153
],
151154
"passthroughs": [],

‎components/popover/index.css‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,61 +13,60 @@
1313
@import "@spectrum-css/commons/overlay.css";
1414

1515
.spectrum-Popover {
16-
/* animation distance is equal to and responsible for popover offset */
16+
/* animation distance is equal to and responsible for popover offset ("spacing" tip to source) */
1717
--spectrum-popover-animation-distance: var(--spectrum-spacing-100);
1818

1919
--spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
20-
--spectrum-popover-border-color: var(--spectrum-gray-400);
20+
21+
/* TODO: Cannot use popover-border-color token until the value no longer has the rgba() function alpha/opacity. We should be able to refactor instances of `--spectrum-popover-border-color-rgb` with `--spectrum-popover-border-color` once this is available. */
22+
/* --spectrum-popover-border-color-default: var(--spectrum-popover-border-color); */
23+
--spectrum-popover-border-color-rgb: var(--spectrum-gray-200-rgb);
24+
--spectrum-popover-border-transparency: var(--spectrum-popover-border-opacity);
25+
--spectrum-popover-border-color-with-transparency: rgba(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency));
2126

2227
--spectrum-popover-border-width: var(--spectrum-border-width-100);
2328

2429
/* popover inner padding */
25-
--spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
30+
--spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area);
2631

2732
/* popover drop shadow */
28-
--spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
29-
--spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
30-
--spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
31-
--spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
33+
--spectrum-popover-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x);
34+
--spectrum-popover-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
35+
--spectrum-popover-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
36+
--spectrum-popover-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color);
3237

3338
/* popover corner radius */
34-
--spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
39+
--spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default);
3540

3641
/* pointer tip dimensions */
3742
--spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
3843
--spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
3944

4045
/* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
41-
--spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2));
46+
--spectrum-popover-pointer-edge-offset: calc(var(--spectrum-popover-corner-radius) + (var(--spectrum-popover-tip-width) / 2));
4247

4348
/* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */
4449
--spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2));
4550
}
4651

47-
/* windows high contrast mode */
48-
@media (forced-colors: active) {
49-
.spectrum-Popover {
50-
--highcontrast-popover-border-color: CanvasText;
51-
}
52-
}
53-
5452
.spectrum-Popover {
55-
--spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color)));
53+
--spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)));
5654
@extend %spectrum-overlay;
5755

5856
box-sizing: border-box;
5957
position: absolute;
6058

6159
outline: none; /* Hide focus outline */
6260

63-
padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0;
61+
padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing));
6462

6563
display: inline-flex;
6664
flex-direction: column;
6765

6866
border-style: solid;
6967
border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius));
70-
border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
68+
border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
69+
7170
border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
7271

7372
background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
@@ -81,7 +80,7 @@
8180
stroke-linecap: square;
8281
stroke-linejoin: miter;
8382
fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
84-
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
83+
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
8584
stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
8685
}
8786
}
@@ -145,7 +144,7 @@
145144
&.spectrum-Popover--withTip {
146145
/* tip size minus where it overlaps with popover border */
147146
/* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */
148-
margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
147+
margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
149148
}
150149

151150
/* popover animates towards right ⮕ */
@@ -162,7 +161,7 @@
162161
&.spectrum-Popover--withTip {
163162
/* tip size minus where it overlaps with popover border */
164163
/* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */
165-
margin-right: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
164+
margin-right: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
166165
}
167166

168167
/* popover animates towards left ⬅ */
@@ -178,7 +177,7 @@
178177
/* spacing to include tip in calculation of offset from source */
179178
&.spectrum-Popover--withTip {
180179
/* tip size minus where it overlaps with popover border */
181-
margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
180+
margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
182181
}
183182

184183
/* LTR read, popover animates towards left ⬅ */
@@ -199,7 +198,7 @@
199198
/* spacing to include tip in calculation of offset from source */
200199
&.spectrum-Popover--withTip {
201200
/* tip size minus where it overlaps with popover border */
202-
margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
201+
margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
203202
}
204203

205204
/* LTR read, popover animates towards right ⮕ */
@@ -412,3 +411,10 @@
412411
}
413412
}
414413
}
414+
415+
/* windows high contrast mode */
416+
@media (forced-colors: active) {
417+
.spectrum-Popover {
418+
--highcontrast-popover-border-color: CanvasText;
419+
}
420+
}

0 commit comments

Comments
 (0)