Skip to content

Commit 581de70

Browse files
castastrophecastastrophe
committed
chore(popover): adjust/enhance popover spacing by default
1 parent 5bf2d51 commit 581de70

File tree

18 files changed

+227
-561
lines changed

18 files changed

+227
-561
lines changed

‎components/actionbar/stories/template.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,6 @@ export const Template = ({
7474
],
7575
}, context),
7676
],
77-
popoverHeight: 42,
78-
popoverWidth: 500,
7977
}, context)}
8078
</div>
8179
`;

‎components/alertdialog/stories/alertdialog.stories.js‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -68,11 +68,6 @@ export default {
6868
type: "figma",
6969
url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2---Desktop?node-id=21917-157",
7070
},
71-
docs: {
72-
story: {
73-
height: "300px",
74-
}
75-
},
7671
packageJson,
7772
metadata,
7873
status: {
@@ -119,11 +114,6 @@ Information.args = {
119114
content: "If you enjoy our app, would you mind taking a moment to rate it?",
120115
};
121116
Information.parameters = {
122-
docs: {
123-
story: {
124-
height: "400px",
125-
}
126-
},
127117
chromatic: { disableSnapshot: true },
128118
};
129119

@@ -187,11 +177,6 @@ Overflow.args = {
187177
};
188178
Overflow.parameters = {
189179
chromatic: { disableSnapshot: true },
190-
docs: {
191-
story: {
192-
height: "525px",
193-
},
194-
},
195180
};
196181

197182
/**

‎components/coachmark/stories/coachmark.stories.js‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,6 @@ export default {
9494
},
9595
packageJson,
9696
metadata,
97-
docs: {
98-
story: {
99-
height: "525px",
100-
},
101-
},
10297
status: {
10398
type: "migrated",
10499
},
@@ -121,11 +116,6 @@ Standard.parameters = {
121116
chromatic: {
122117
disableSnapshot: true,
123118
},
124-
docs: {
125-
story: {
126-
height: "475px",
127-
},
128-
},
129119
};
130120
Standard.args = {
131121
imageSource: "example-card-landscape.png",
@@ -141,11 +131,6 @@ StandardNoMedia.parameters = {
141131
chromatic: {
142132
disableSnapshot: true,
143133
},
144-
docs: {
145-
story: {
146-
height: "250px",
147-
},
148-
},
149134
};
150135

151136
/** Images and media have a minimum height and can grow with the parent component. Fixed height media is constrained to a 4:3 aspect ratio by applying the `spectrum-CoachMark-image-wrapper--fixedHeight` class. When this fixed height class is used, the height can be customized using the modifiable custom property `--mod-coachmark-media-fixed-height`. */
@@ -155,11 +140,6 @@ MediaOptions.args = {
155140
imageSource: "example-card-portrait.png",
156141
};
157142
MediaOptions.parameters = {
158-
docs: {
159-
story: {
160-
height: "725px",
161-
},
162-
},
163143
chromatic: {
164144
disableSnapshot: true,
165145
},

‎components/coachmark/stories/template.js‎

Lines changed: 17 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -55,20 +55,22 @@ export const CoachContainer = (
5555
html` <div class="spectrum-CoachMark-action-menu">
5656
${ActionMenu(
5757
{
58-
isOpen,
58+
isOpen: false,
5959
position: "bottom-start",
60-
iconName: "More",
61-
size: scale === "large" ? "s" : "m",
62-
items: [
63-
{
64-
label: "Skip tour",
65-
},
66-
{
67-
label: "Reset tour",
68-
},
69-
],
70-
popoverHeight: 68,
71-
popoverWidth: 84,
60+
triggerArgs: {
61+
iconName: "More",
62+
size: scale === "large" ? "s" : "m",
63+
},
64+
menuArgs: {
65+
items: [
66+
{
67+
label: "Skip tour",
68+
},
69+
{
70+
label: "Reset tour",
71+
},
72+
],
73+
}
7274
},
7375
context,
7476
)}
@@ -165,15 +167,7 @@ export const CoachmarkMenuStatesTemplate = (args, context) =>
165167
Container({
166168
withBorder: false,
167169
heading: "With action menu (closed) and media",
168-
content: Template(
169-
{
170-
...args,
171-
customStyles: {
172-
"height": "265px"
173-
}
174-
},
175-
context,
176-
),
170+
content: Template(args, context),
177171
}),
178172
Container({
179173
withBorder: false,
@@ -183,10 +177,7 @@ export const CoachmarkMenuStatesTemplate = (args, context) =>
183177
...args,
184178
hasImage: false,
185179
hasActionMenu: true,
186-
isOpen: true,
187-
customStyles: {
188-
"height": "260px"
189-
}
180+
isOpen: true
190181
},
191182
context,
192183
),

‎components/combobox/stories/combobox.stories.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -181,10 +181,10 @@ export default {
181181
status: {
182182
type: "migrated",
183183
},
184-
tags: ["migrated"],
185184
packageJson,
186185
metadata,
187186
},
187+
tags: ["migrated"],
188188
decorators: [
189189
withDownStateDimensionCapture,
190190
],
@@ -211,11 +211,6 @@ DefaultGroup.args = {
211211
DefaultGroup.tags = ["!dev"];
212212
DefaultGroup.parameters = {
213213
chromatic: { disableSnapshot: true },
214-
docs: {
215-
story: {
216-
height: "360px",
217-
},
218-
},
219214
};
220215

221216
/**

‎components/combobox/stories/combobox.test.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@ export const ComboBoxGroup = Variants({
1616
{
1717
testHeading: "Open",
1818
isOpen: true,
19-
wrapperStyles: {
20-
"min-block-size": "250px",
21-
},
2219
},
2320
{
2421
testHeading: "Help text with label",

‎components/combobox/stories/template.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,6 @@ export const Template = ({
5656
}, 0);
5757
}
5858

59-
const popoverHeight = size === "s" ? 106 : size === "l" ? 170 : size === "xl" ? 229 : 142; // default value is "m"
60-
const adjustedPopoverHeight = showFieldLabel ? popoverHeight : popoverHeight + 32; // Subtract label height when no label
61-
6259
return html`
6360
<div
6461
class=${classMap({
@@ -78,10 +75,7 @@ export const Template = ({
7875
})}
7976
id=${ifDefined(id)}
8077
data-testid=${ifDefined(testId ?? id)}
81-
style=${styleMap({
82-
...customStyles,
83-
["margin-block-end"]: !isReadOnly && isOpen && !isDisabled ? `${adjustedPopoverHeight}px` : undefined,
84-
})}
78+
style=${styleMap(customStyles)}
8579
role="combobox"
8680
aria-expanded=${isOpen}
8781
aria-haspopup="listbox"
@@ -150,7 +144,6 @@ export const Template = ({
150144
"inline-size": size === "s" ? "192px" : size === "l" ? "224px" : size === "xl" ? "240px" : "208px",
151145
},
152146
content,
153-
popoverHeight,
154147
}, context)}
155148
${when(helpText, () =>
156149
HelpText({

‎components/contextualhelp/stories/contextualhelp.stories.js‎

Lines changed: 6 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
2+
import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
23
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3-
import metadata from "../dist/metadata.json";
4-
import packageJson from "../package.json";
54
import { ContextualHelpGroup } from "./contextualhelp.test.js";
65
import { Template } from "./template.js";
76

7+
import metadata from "../dist/metadata.json";
8+
import packageJson from "../package.json";
9+
810
/**
911
* Contextual help shows a user extra information in relation to another component or view.
1012
*/
@@ -42,39 +44,8 @@ export default {
4244
},
4345
iconSet: { table: { disable: true } },
4446
popoverPlacement: {
45-
name: "Popover Placement",
46-
type: { name: "string", required: true },
47-
defaultValue: "bottom-start",
48-
table: {
49-
type: { summary: "string" },
50-
category: "Component",
51-
defaultValue: { summary: "Info" },
52-
},
53-
options: [
54-
"top",
55-
"top-left",
56-
"top-right",
57-
"top-start",
58-
"top-end",
59-
"bottom",
60-
"bottom-left",
61-
"bottom-right",
62-
"bottom-start",
63-
"bottom-end",
64-
"left",
65-
"left-top",
66-
"left-bottom",
67-
"start",
68-
"start-top",
69-
"start-bottom",
70-
"right",
71-
"right-top",
72-
"right-bottom",
73-
"end",
74-
"end-top",
75-
"end-bottom",
76-
],
77-
control: "select",
47+
...Popover.argTypes.position,
48+
name: "Popover placement",
7849
},
7950
link: {
8051
name: "Has link",
@@ -107,11 +78,6 @@ export default {
10778
},
10879
packageJson,
10980
metadata,
110-
docs: {
111-
story: {
112-
height: "200px",
113-
},
114-
},
11581
status: {
11682
type: "migrated",
11783
},
@@ -151,17 +117,9 @@ export const TopPopover = Template.bind({});
151117
TopPopover.tags = ["!dev"];
152118
TopPopover.args = {
153119
popoverPlacement: "top",
154-
customStyles: {
155-
"margin-top": "170px",
156-
},
157120
};
158121
TopPopover.parameters = {
159122
chromatic: { disableSnapshot: true },
160-
docs: {
161-
story: {
162-
height: "auto",
163-
},
164-
},
165123
};
166124
TopPopover.storyName = "Default - top popover";
167125

‎components/contextualhelp/stories/contextualhelp.test.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,26 +6,14 @@ export const ContextualHelpGroup = Variants({
66
testData: [
77
{
88
testHeading: "Default",
9-
customStyles: {
10-
"inline-size": "275px",
11-
"margin-bottom": "200px",
12-
},
139
},
1410
{
1511
testHeading: "With link",
16-
customStyles: {
17-
"inline-size": "275px",
18-
"margin-bottom": "200px",
19-
},
2012
link: true,
2113
},
2214
{
2315
testHeading: "Help",
2416
iconName: "HelpCircle",
25-
customStyles: {
26-
"inline-size": "275px",
27-
"margin-bottom": "200px",
28-
},
2917
},
3018
],
3119
});

‎components/contextualhelp/stories/template.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ export const Template = ({
4343
customClasses: [`${rootClass}-button`],
4444
}, context),
4545
content: [
46-
title ? html`<h2 class="${rootClass}-heading">${title}</h2>` : "",
47-
body ? html`<p class="${rootClass}-body">${body}</p>` : "",
46+
title ? html`<h2 class="${rootClass}-heading">${title}</h2>` : nothing,
47+
body ? html`<p class="${rootClass}-body">${body}</p>` : nothing,
4848
link
4949
? Link({
5050
text: "Link text",
@@ -56,8 +56,6 @@ export const Template = ({
5656
position: popoverPlacement,
5757
customClasses: [`${rootClass}-popover`],
5858
customStyles,
59-
popoverWidth: 275,
60-
popoverHeight: 150,
6159
}, context)}
6260
</div>
6361
`;

0 commit comments

Comments
 (0)