mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-05 11:38:36 +09:00
Bogdan Chadkin
9e23dc9580
Ref https://github.com/webstudio-is/webstudio/issues/2647 Here refactored overflow UI to update "overflow-x" and "overflow-y" longhands instead of "overflow" shorthand. Removed "overflow" from advanced panel suggestions. Added support for expanding overflow shorthand for webflow copy paste. And implemented very basic migrations utility which always run after data is loaded from server and sends patch for expanding overflow longhands. Patch is not sent when no properties are modified. Though eventually we will need to support versioning to avoid executing old migrations. <img width="279" alt="Screenshot 2024-06-18 at 19 33 21" src="https://github.com/webstudio-is/webstudio/assets/5635476/ce44385e-3316-4e34-bc9c-5f790cbdcd4f">
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import { expect, test } from "@jest/globals";
|
|
import type { WebstudioData } from "@webstudio-is/sdk";
|
|
import { createDefaultPages } from "@webstudio-is/project-build";
|
|
import type { StyleProperty } from "@webstudio-is/css-engine";
|
|
import { migrateWebstudioDataMutable } from "./webstudio-data-migrator";
|
|
|
|
const emptyData: WebstudioData = {
|
|
pages: createDefaultPages({
|
|
rootInstanceId: "rootInstanceId",
|
|
systemDataSourceId: "systemDataSourceId",
|
|
}),
|
|
assets: new Map(),
|
|
dataSources: new Map(),
|
|
resources: new Map(),
|
|
instances: new Map(),
|
|
props: new Map(),
|
|
breakpoints: new Map(),
|
|
styleSources: new Map(),
|
|
styleSourceSelections: new Map(),
|
|
styles: new Map(),
|
|
};
|
|
|
|
test("expand overflow shorthand", () => {
|
|
const data = structuredClone(emptyData);
|
|
data.styles.set("base:local:overflow::hover", {
|
|
breakpointId: "base",
|
|
styleSourceId: "local",
|
|
state: ":hover",
|
|
property: "overflow" as StyleProperty,
|
|
value: {
|
|
type: "tuple",
|
|
value: [
|
|
{ type: "keyword", value: "auto" },
|
|
{ type: "keyword", value: "hidden" },
|
|
],
|
|
},
|
|
});
|
|
migrateWebstudioDataMutable(data);
|
|
expect(Array.from(data.styles.values())).toEqual([
|
|
{
|
|
breakpointId: "base",
|
|
property: "overflowX",
|
|
state: ":hover",
|
|
styleSourceId: "local",
|
|
value: { type: "keyword", value: "auto" },
|
|
},
|
|
{
|
|
breakpointId: "base",
|
|
property: "overflowY",
|
|
state: ":hover",
|
|
styleSourceId: "local",
|
|
value: { type: "keyword", value: "hidden" },
|
|
},
|
|
]);
|
|
});
|