Skip to content

Commit c0bb641

Browse files
marissahuysentruytcastastrophe
marissahuysentruyt
authored and
castastrophe
committed
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 5b23091 commit c0bb641

File tree

13 files changed

+118
-73
lines changed

13 files changed

+118
-73
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
@@ -53,7 +53,7 @@
5353
--spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100);
5454
--spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100);
5555

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

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

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

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

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

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

‎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 & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,63 +14,60 @@
1414
@import "@spectrum-css/commons/overlay.css";
1515

1616
.spectrum-Popover {
17-
--spectrum-popover-border-width: var(--spectrum-border-width-100);
18-
19-
/* animation distance is equal to and responsible for popover offset */
17+
/* animation distance is equal to and responsible for popover offset ("spacing" tip to source) */
2018
--spectrum-popover-animation-distance: var(--spectrum-spacing-100);
2119

2220
--spectrum-popover-background-color: var(--spectrum-background-layer-2-color);
23-
--spectrum-popover-border-color: var(--spectrum-gray-400);
21+
22+
/* 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. */
23+
/* --spectrum-popover-border-color-default: var(--spectrum-popover-border-color); */
24+
--spectrum-popover-border-color-rgb: var(--spectrum-gray-200-rgb);
25+
--spectrum-popover-border-transparency: var(--spectrum-popover-border-opacity);
26+
--spectrum-popover-border-color-with-transparency: rgba(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency));
2427

2528
--spectrum-popover-border-width: var(--spectrum-border-width-100);
2629

2730
/* popover inner padding */
28-
--spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
31+
--spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area);
2932

3033
/* popover drop shadow */
31-
--spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
32-
--spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
33-
--spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
34-
--spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
34+
--spectrum-popover-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x);
35+
--spectrum-popover-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
36+
--spectrum-popover-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
37+
--spectrum-popover-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color);
3538

3639
/* popover corner radius */
37-
--spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
40+
--spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default);
3841

3942
/* pointer tip dimensions */
4043
--spectrum-popover-pointer-width: var(--spectrum-popover-tip-width);
4144
--spectrum-popover-pointer-height: var(--spectrum-popover-tip-height);
4245

4346
/* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */
44-
--spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2));
47+
--spectrum-popover-pointer-edge-offset: calc(var(--spectrum-popover-corner-radius) + (var(--spectrum-popover-tip-width) / 2));
4548

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

50-
/* windows high contrast mode */
51-
@media (forced-colors: active) {
52-
.spectrum-Popover {
53-
--highcontrast-popover-border-color: CanvasText;
54-
}
55-
}
56-
5753
.spectrum-Popover {
58-
--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)));
54+
--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)));
5955
@extend %spectrum-overlay;
6056

6157
box-sizing: border-box;
6258
position: absolute;
6359

6460
outline: none; /* Hide focus outline */
6561

66-
padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0;
62+
padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing));
6763

6864
display: inline-flex;
6965
flex-direction: column;
7066

7167
border-style: solid;
7268
border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius));
73-
border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
69+
border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
70+
7471
border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
7572

7673
background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
@@ -84,7 +81,7 @@
8481
stroke-linecap: square;
8582
stroke-linejoin: miter;
8683
fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
87-
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
84+
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
8885
stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
8986
}
9087
}
@@ -148,7 +145,7 @@
148145
&.spectrum-Popover--withTip {
149146
/* tip size minus where it overlaps with popover border */
150147
/* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */
151-
margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
148+
margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
152149
}
153150

154151
/* popover animates towards right ⮕ */
@@ -165,7 +162,7 @@
165162
&.spectrum-Popover--withTip {
166163
/* tip size minus where it overlaps with popover border */
167164
/* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */
168-
margin-right: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
165+
margin-right: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
169166
}
170167

171168
/* popover animates towards left ⬅ */
@@ -181,7 +178,7 @@
181178
/* spacing to include tip in calculation of offset from source */
182179
&.spectrum-Popover--withTip {
183180
/* tip size minus where it overlaps with popover border */
184-
margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
181+
margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
185182
}
186183

187184
/* LTR read, popover animates towards left ⬅ */
@@ -202,7 +199,7 @@
202199
/* spacing to include tip in calculation of offset from source */
203200
&.spectrum-Popover--withTip {
204201
/* tip size minus where it overlaps with popover border */
205-
margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
202+
margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
206203
}
207204

208205
/* LTR read, popover animates towards right ⮕ */
@@ -415,3 +412,10 @@
415412
}
416413
}
417414
}
415+
416+
/* windows high contrast mode */
417+
@media (forced-colors: active) {
418+
.spectrum-Popover {
419+
--highcontrast-popover-border-color: CanvasText;
420+
}
421+
}

0 commit comments

Comments
 (0)