Skip to content

Commit 0f14273

Browse files
cdransfcastastrophe
cdransf
authored and
castastrophe
committed
fix(combobox): corrects cases where open combobx stories and testing previews could overlap adjacent components (#3568)
1 parent a25e0a9 commit 0f14273

File tree

8 files changed

+286
-277
lines changed

8 files changed

+286
-277
lines changed

‎.storybook/decorators/context.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { makeDecorator, useEffect } from "@storybook/preview-api";
22
import { fetchContainers, toggleStyles } from "./helpers.js";
33

4-
import tokens from "@spectrum-css/tokens/dist/index.css?inline";
4+
import tokens from "@spectrum-css/tokens/dist/css/index.css?inline";
55

66
/**
77
* @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework>

‎.storybook/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/preview",
3-
"version": "11.0.1-next.2",
3+
"version": "12.0.3",
44
"description": "A Spectrum CSS preview",
55
"license": "Apache-2.0",
66
"author": "Adobe",
@@ -40,8 +40,8 @@
4040
},
4141
"dependencies": {
4242
"@adobe/spectrum-css-workflow-icons": "^4.0.0",
43-
"@spectrum-css/bundle": "workspace:^",
44-
"@spectrum-css/tokens": "14.0.0-next.2",
43+
"@spectrum-css/bundle": "1.0.0",
44+
"@spectrum-css/tokens": "16.0.1",
4545
"@spectrum-css/ui-icons": "1.1.2"
4646
},
4747
"devDependencies": {

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,11 @@ DefaultGroup.args = Default.args;
171171
DefaultGroup.tags = ["!dev"];
172172
DefaultGroup.parameters = {
173173
chromatic: { disableSnapshot: true },
174+
docs: {
175+
story: {
176+
height: "360px",
177+
},
178+
},
174179
};
175180

176181
export const QuietGroup = VariantGroup.bind({});
@@ -182,6 +187,11 @@ QuietGroup.args = {
182187
QuietGroup.tags = ["!dev"];
183188
QuietGroup.parameters = {
184189
chromatic: { disableSnapshot: true },
190+
docs: {
191+
story: {
192+
height: "360px",
193+
},
194+
},
185195
};
186196

187197
/**

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,6 @@ import { Template } from "./template.js";
44
export const ComboBoxGroup = Variants({
55
Template,
66
sizeDirection: "row",
7-
wrapperStyles: {
8-
"align-items": "flex-start",
9-
},
107
testData: [
118
{
129
testHeading: "Default",
@@ -20,11 +17,17 @@ export const ComboBoxGroup = Variants({
2017
{
2118
testHeading: "Open",
2219
isOpen: true,
20+
wrapperStyles: {
21+
"min-block-size": "250px",
22+
},
2323
},
2424
{
2525
testHeading: "Quiet + open",
2626
isQuiet: true,
2727
isOpen: true,
28+
wrapperStyles: {
29+
"min-block-size": "250px",
30+
},
2831
},
2932
{
3033
testHeading: "With field label top",

‎components/dialog/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
},
2626
"main": "dist/index.css",
2727
"peerDependencies": {
28-
"@spectrum-css/button": ">=14.0.0-next.0",
28+
"@spectrum-css/button": ">=14.0.0 <15.0.0",
2929
"@spectrum-css/buttongroup": ">=9.0.0 <10.0.0",
3030
"@spectrum-css/closebutton": ">=6.0.0 <7.0.0",
3131
"@spectrum-css/divider": ">=5.0.0 <6.0.0",

‎tools/bundle/package.json

Lines changed: 85 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -30,92 +30,91 @@
3030
},
3131
"main": "dist/index.css",
3232
"devDependencies": {
33-
"@spectrum-css/accordion": "workspace:^",
34-
"@spectrum-css/actionbar": "workspace:^",
35-
"@spectrum-css/actionbutton": "workspace:^",
36-
"@spectrum-css/actiongroup": "workspace:^",
37-
"@spectrum-css/actionmenu": "workspace:^",
38-
"@spectrum-css/alertbanner": "workspace:^",
39-
"@spectrum-css/alertdialog": "workspace:^",
40-
"@spectrum-css/asset": "workspace:^",
41-
"@spectrum-css/assetcard": "workspace:^",
42-
"@spectrum-css/assetlist": "workspace:^",
43-
"@spectrum-css/avatar": "workspace:^",
44-
"@spectrum-css/badge": "workspace:^",
45-
"@spectrum-css/breadcrumb": "workspace:^",
46-
"@spectrum-css/button": "workspace:^",
47-
"@spectrum-css/buttongroup": "workspace:^",
48-
"@spectrum-css/calendar": "workspace:^",
49-
"@spectrum-css/card": "workspace:^",
50-
"@spectrum-css/checkbox": "workspace:^",
51-
"@spectrum-css/clearbutton": "workspace:^",
52-
"@spectrum-css/closebutton": "workspace:^",
53-
"@spectrum-css/coachindicator": "workspace:^",
54-
"@spectrum-css/coachmark": "workspace:^",
55-
"@spectrum-css/colorarea": "workspace:^",
56-
"@spectrum-css/colorhandle": "workspace:^",
57-
"@spectrum-css/colorloupe": "workspace:^",
58-
"@spectrum-css/colorslider": "workspace:^",
59-
"@spectrum-css/colorwheel": "workspace:^",
60-
"@spectrum-css/combobox": "workspace:^",
61-
"@spectrum-css/commons": "workspace:^",
62-
"@spectrum-css/contextualhelp": "workspace:^",
63-
"@spectrum-css/datepicker": "workspace:^",
64-
"@spectrum-css/dial": "workspace:^",
65-
"@spectrum-css/dialog": "workspace:^",
66-
"@spectrum-css/divider": "workspace:^",
67-
"@spectrum-css/dropindicator": "workspace:^",
68-
"@spectrum-css/dropzone": "workspace:^",
69-
"@spectrum-css/fieldgroup": "workspace:^",
70-
"@spectrum-css/fieldlabel": "workspace:^",
71-
"@spectrum-css/floatingactionbutton": "workspace:^",
72-
"@spectrum-css/form": "workspace:^",
73-
"@spectrum-css/helptext": "workspace:^",
74-
"@spectrum-css/icon": "workspace:^",
75-
"@spectrum-css/illustratedmessage": "workspace:^",
76-
"@spectrum-css/infieldbutton": "workspace:^",
77-
"@spectrum-css/infieldprogresscircle": "workspace:^",
78-
"@spectrum-css/inlinealert": "workspace:^",
79-
"@spectrum-css/link": "workspace:^",
80-
"@spectrum-css/logicbutton": "workspace:^",
81-
"@spectrum-css/menu": "workspace:^",
82-
"@spectrum-css/meter": "workspace:^",
83-
"@spectrum-css/miller": "workspace:^",
84-
"@spectrum-css/modal": "workspace:^",
85-
"@spectrum-css/opacitycheckerboard": "workspace:^",
86-
"@spectrum-css/page": "workspace:^",
87-
"@spectrum-css/pagination": "workspace:^",
88-
"@spectrum-css/picker": "workspace:^",
89-
"@spectrum-css/pickerbutton": "workspace:^",
90-
"@spectrum-css/popover": "workspace:^",
91-
"@spectrum-css/progressbar": "workspace:^",
92-
"@spectrum-css/progresscircle": "workspace:^",
93-
"@spectrum-css/radio": "workspace:^",
94-
"@spectrum-css/rating": "workspace:^",
95-
"@spectrum-css/search": "workspace:^",
96-
"@spectrum-css/sidenav": "workspace:^",
97-
"@spectrum-css/slider": "workspace:^",
98-
"@spectrum-css/splitview": "workspace:^",
99-
"@spectrum-css/statuslight": "workspace:^",
100-
"@spectrum-css/steplist": "workspace:^",
101-
"@spectrum-css/stepper": "workspace:^",
102-
"@spectrum-css/swatch": "workspace:^",
103-
"@spectrum-css/swatchgroup": "workspace:^",
104-
"@spectrum-css/switch": "workspace:^",
105-
"@spectrum-css/table": "workspace:^",
106-
"@spectrum-css/tabs": "workspace:^",
107-
"@spectrum-css/tag": "workspace:^",
108-
"@spectrum-css/taggroup": "workspace:^",
109-
"@spectrum-css/textfield": "workspace:^",
110-
"@spectrum-css/thumbnail": "workspace:^",
111-
"@spectrum-css/toast": "workspace:^",
112-
"@spectrum-css/tokens": "workspace:^",
113-
"@spectrum-css/tooltip": "workspace:^",
114-
"@spectrum-css/tray": "workspace:^",
115-
"@spectrum-css/treeview": "workspace:^",
116-
"@spectrum-css/typography": "workspace:^",
117-
"@spectrum-css/underlay": "workspace:^",
118-
"@spectrum-css/well": "workspace:^",
33+
"@spectrum-css/accordion": "7.1.0",
34+
"@spectrum-css/actionbar": "10.1.1",
35+
"@spectrum-css/actionbutton": "7.1.1",
36+
"@spectrum-css/actiongroup": "6.1.0",
37+
"@spectrum-css/actionmenu": "7.1.1",
38+
"@spectrum-css/alertbanner": "3.1.0",
39+
"@spectrum-css/alertdialog": "4.1.0",
40+
"@spectrum-css/asset": "7.1.0",
41+
"@spectrum-css/assetcard": "5.1.0",
42+
"@spectrum-css/assetlist": "8.1.0",
43+
"@spectrum-css/avatar": "9.1.0",
44+
"@spectrum-css/badge": "6.1.0",
45+
"@spectrum-css/breadcrumb": "11.1.0",
46+
"@spectrum-css/button": "14.1.1",
47+
"@spectrum-css/buttongroup": "9.1.0",
48+
"@spectrum-css/calendar": "7.1.0",
49+
"@spectrum-css/card": "11.1.0",
50+
"@spectrum-css/checkbox": "10.1.0",
51+
"@spectrum-css/clearbutton": "7.1.0",
52+
"@spectrum-css/closebutton": "6.1.0",
53+
"@spectrum-css/coachindicator": "4.1.0",
54+
"@spectrum-css/coachmark": "9.1.1",
55+
"@spectrum-css/colorarea": "7.1.0",
56+
"@spectrum-css/colorhandle": "10.1.0",
57+
"@spectrum-css/colorloupe": "7.1.0",
58+
"@spectrum-css/colorslider": "8.1.0",
59+
"@spectrum-css/colorwheel": "6.1.0",
60+
"@spectrum-css/combobox": "4.1.1",
61+
"@spectrum-css/commons": "11.0.0",
62+
"@spectrum-css/contextualhelp": "5.1.2",
63+
"@spectrum-css/datepicker": "4.1.1",
64+
"@spectrum-css/dial": "5.1.0",
65+
"@spectrum-css/dialog": "12.1.0",
66+
"@spectrum-css/divider": "5.1.0",
67+
"@spectrum-css/dropindicator": "7.1.0",
68+
"@spectrum-css/dropzone": "8.1.0",
69+
"@spectrum-css/fieldgroup": "7.1.0",
70+
"@spectrum-css/fieldlabel": "10.1.0",
71+
"@spectrum-css/floatingactionbutton": "4.1.0",
72+
"@spectrum-css/form": "1.1.0",
73+
"@spectrum-css/helptext": "7.1.0",
74+
"@spectrum-css/icon": "9.1.0",
75+
"@spectrum-css/illustratedmessage": "9.1.0",
76+
"@spectrum-css/infieldbutton": "6.1.0",
77+
"@spectrum-css/infieldprogresscircle": "0.0.0",
78+
"@spectrum-css/inlinealert": "10.1.0",
79+
"@spectrum-css/link": "7.1.0",
80+
"@spectrum-css/logicbutton": "6.1.0",
81+
"@spectrum-css/menu": "9.1.0",
82+
"@spectrum-css/meter": "1.1.0",
83+
"@spectrum-css/miller": "8.1.0",
84+
"@spectrum-css/modal": "7.1.0",
85+
"@spectrum-css/opacitycheckerboard": "4.1.0",
86+
"@spectrum-css/page": "9.1.0",
87+
"@spectrum-css/pagination": "10.1.0",
88+
"@spectrum-css/picker": "9.1.1",
89+
"@spectrum-css/pickerbutton": "6.1.1",
90+
"@spectrum-css/popover": "8.2.0",
91+
"@spectrum-css/progressbar": "6.1.0",
92+
"@spectrum-css/progresscircle": "5.1.0",
93+
"@spectrum-css/radio": "10.1.0",
94+
"@spectrum-css/rating": "6.1.0",
95+
"@spectrum-css/search": "8.1.0",
96+
"@spectrum-css/sidenav": "7.1.0",
97+
"@spectrum-css/slider": "6.1.0",
98+
"@spectrum-css/splitview": "7.1.0",
99+
"@spectrum-css/statuslight": "9.1.0",
100+
"@spectrum-css/steplist": "7.1.0",
101+
"@spectrum-css/stepper": "7.1.0",
102+
"@spectrum-css/swatch": "8.1.0",
103+
"@spectrum-css/swatchgroup": "5.1.0",
104+
"@spectrum-css/switch": "6.1.0",
105+
"@spectrum-css/table": "8.1.0",
106+
"@spectrum-css/tabs": "6.1.1",
107+
"@spectrum-css/tag": "10.1.0",
108+
"@spectrum-css/taggroup": "7.1.0",
109+
"@spectrum-css/textfield": "8.1.0",
110+
"@spectrum-css/thumbnail": "8.1.0",
111+
"@spectrum-css/toast": "11.1.0",
112+
"@spectrum-css/tooltip": "7.1.0",
113+
"@spectrum-css/tray": "5.1.0",
114+
"@spectrum-css/treeview": "12.1.0",
115+
"@spectrum-css/typography": "8.1.0",
116+
"@spectrum-css/underlay": "6.1.0",
117+
"@spectrum-css/well": "7.1.0",
119118
"colors": "^1.4.0",
120119
"postcss": "^8.5.3",
121120
"postcss-licensing": "^2.0.0"

‎tools/bundle/tasks/bundler.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ const bundleRoot = path.resolve(dirs.root, "tools", "bundle");
2929
* @returns {Promise<string[]>}
3030
*/
3131
async function validateDependencies(components) {
32+
// This is the bundle's package.json
3233
const localPackage = path.join(bundleRoot, "package.json");
34+
3335
// Confirm the dependencies listed in this package.json match the components in the components directory
3436
const packageJSON = JSON.parse(fs.readFileSync(localPackage, "utf8"));
3537

@@ -51,8 +53,11 @@ async function validateDependencies(components) {
5153

5254
// Update the package.json dependencies
5355
missing.forEach((dependency) => {
56+
// Fetch the package.json for the component to get the version
57+
const componentPackage = JSON.parse(fs.readFileSync(path.join(dirs.components, dependency, "package.json"), "utf8"));
58+
5459
reports.push(`${"+".green} ${`@spectrum-css/${dependency} to package.json`.gray}`);
55-
packageJSON.devDependencies[`@spectrum-css/${dependency}`] = "workspace:^";
60+
packageJSON.devDependencies[`@spectrum-css/${dependency}`] = componentPackage?.version ?? "workspace:^";
5661
});
5762
}
5863

0 commit comments

Comments
 (0)