Skip to content

Commit 6423e8f

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 cb66626 commit 6423e8f

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
@@ -105,48 +105,51 @@
105105
"--mod-popover-background-color",
106106
"--mod-popover-border-color",
107107
"--mod-popover-border-width",
108-
"--mod-popover-content-area-spacing-vertical",
108+
"--mod-popover-content-area-spacing",
109109
"--mod-popover-corner-radius",
110+
"--mod-popover-drop-shadow-blur",
111+
"--mod-popover-drop-shadow-color",
112+
"--mod-popover-drop-shadow-x",
113+
"--mod-popover-drop-shadow-y",
110114
"--mod-popover-filter",
111115
"--mod-popover-pointer-edge-spacing",
112116
"--mod-popover-pointer-height",
113-
"--mod-popover-pointer-width",
114-
"--mod-popover-shadow-blur",
115-
"--mod-popover-shadow-color",
116-
"--mod-popover-shadow-horizontal",
117-
"--mod-popover-shadow-vertical"
117+
"--mod-popover-pointer-width"
118118
],
119119
"component": [
120120
"--spectrum-popover-animation-distance",
121121
"--spectrum-popover-background-color",
122-
"--spectrum-popover-border-color",
122+
"--spectrum-popover-border-color-rgb",
123+
"--spectrum-popover-border-color-with-transparency",
124+
"--spectrum-popover-border-opacity",
125+
"--spectrum-popover-border-transparency",
123126
"--spectrum-popover-border-width",
124-
"--spectrum-popover-content-area-spacing-vertical",
127+
"--spectrum-popover-content-area-spacing",
125128
"--spectrum-popover-corner-radius",
129+
"--spectrum-popover-drop-shadow-blur",
130+
"--spectrum-popover-drop-shadow-color",
131+
"--spectrum-popover-drop-shadow-x",
132+
"--spectrum-popover-drop-shadow-y",
133+
"--spectrum-popover-edge-to-content-area",
126134
"--spectrum-popover-filter",
127135
"--spectrum-popover-pointer-edge-offset",
128136
"--spectrum-popover-pointer-edge-spacing",
129137
"--spectrum-popover-pointer-height",
130138
"--spectrum-popover-pointer-width",
131-
"--spectrum-popover-shadow-blur",
132-
"--spectrum-popover-shadow-color",
133-
"--spectrum-popover-shadow-horizontal",
134-
"--spectrum-popover-shadow-vertical",
135139
"--spectrum-popover-tip-height",
136-
"--spectrum-popover-tip-width",
137-
"--spectrum-popover-top-to-content-area"
140+
"--spectrum-popover-tip-width"
138141
],
139142
"global": [
140143
"--spectrum-animation-duration-0",
141144
"--spectrum-animation-duration-100",
142145
"--spectrum-background-layer-2-color",
143146
"--spectrum-border-width-100",
144-
"--spectrum-corner-radius-100",
145-
"--spectrum-drop-shadow-blur",
146-
"--spectrum-drop-shadow-color",
147-
"--spectrum-drop-shadow-x",
148-
"--spectrum-drop-shadow-y",
149-
"--spectrum-gray-400",
147+
"--spectrum-corner-radius-large-default",
148+
"--spectrum-drop-shadow-elevated-blur",
149+
"--spectrum-drop-shadow-elevated-color",
150+
"--spectrum-drop-shadow-elevated-x",
151+
"--spectrum-drop-shadow-elevated-y",
152+
"--spectrum-gray-200-rgb",
150153
"--spectrum-spacing-100"
151154
],
152155
"passthroughs": [],

‎components/popover/index.css‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,61 +14,58 @@
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
/* popover inner padding */
26-
--spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area);
29+
--spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area);
2730

2831
/* popover drop shadow */
29-
--spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x);
30-
--spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y);
31-
--spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur);
32-
--spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color);
32+
--spectrum-popover-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x);
33+
--spectrum-popover-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y);
34+
--spectrum-popover-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
35+
--spectrum-popover-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color);
3336

3437
/* popover corner radius */
35-
--spectrum-popover-corner-radius: var(--spectrum-corner-radius-100);
38+
--spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default);
3639

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

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

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

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

5955
box-sizing: border-box;
6056
position: absolute;
6157

6258
outline: none; /* Hide focus outline */
6359

64-
padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0;
60+
padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing));
6561

6662
display: inline-flex;
6763
flex-direction: column;
6864

6965
border-style: solid;
7066
border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius));
71-
border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
67+
border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
68+
7269
border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
7370

7471
background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
@@ -85,7 +82,7 @@
8582
stroke-linecap: square;
8683
stroke-linejoin: miter;
8784
fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
88-
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
85+
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
8986
stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
9087
}
9188
}
@@ -151,7 +148,7 @@
151148
&.spectrum-Popover--withTip {
152149
/* tip size minus where it overlaps with popover border */
153150
/* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */
154-
margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
151+
margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
155152
}
156153

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

175172
/* popover animates towards left ⬅ */
@@ -186,7 +183,7 @@
186183
/* spacing to include tip in calculation of offset from source */
187184
&.spectrum-Popover--withTip {
188185
/* tip size minus where it overlaps with popover border */
189-
margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
186+
margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
190187
}
191188

192189
/* LTR read, popover animates towards left ⬅ */
@@ -208,7 +205,7 @@
208205
/* spacing to include tip in calculation of offset from source */
209206
&.spectrum-Popover--withTip {
210207
/* tip size minus where it overlaps with popover border */
211-
margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
208+
margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
212209
}
213210

214211
/* LTR read, popover animates towards right ⮕ */
@@ -423,3 +420,10 @@
423420
}
424421
}
425422
}
423+
424+
/* windows high contrast mode */
425+
@media (forced-colors: active) {
426+
.spectrum-Popover {
427+
--highcontrast-popover-border-color: CanvasText;
428+
}
429+
}

0 commit comments

Comments
 (0)