Skip to content

Commit 874c4d6

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 f095a17 commit 874c4d6

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,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));
@@ -82,7 +79,7 @@
8279
stroke-linecap: square;
8380
stroke-linejoin: miter;
8481
fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
85-
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color)));
82+
stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency)));
8683
stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width));
8784
}
8885
}
@@ -146,7 +143,7 @@
146143
&.spectrum-Popover--withTip {
147144
/* tip size minus where it overlaps with popover border */
148145
/* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */
149-
margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
146+
margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
150147
}
151148

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

169166
/* popover animates towards left ⬅ */
@@ -179,7 +176,7 @@
179176
/* spacing to include tip in calculation of offset from source */
180177
&.spectrum-Popover--withTip {
181178
/* tip size minus where it overlaps with popover border */
182-
margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
179+
margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
183180
}
184181

185182
/* LTR read, popover animates towards left ⬅ */
@@ -200,7 +197,7 @@
200197
/* spacing to include tip in calculation of offset from source */
201198
&.spectrum-Popover--withTip {
202199
/* tip size minus where it overlaps with popover border */
203-
margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
200+
margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width)));
204201
}
205202

206203
/* LTR read, popover animates towards right ⮕ */
@@ -413,3 +410,10 @@
413410
}
414411
}
415412
}
413+
414+
/* windows high contrast mode */
415+
@media (forced-colors: active) {
416+
.spectrum-Popover {
417+
--highcontrast-popover-border-color: CanvasText;
418+
}
419+
}

0 commit comments

Comments
 (0)