Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(sheet): Update default widths #7617

Merged
merged 5 commits into from
Aug 30, 2023
Merged

feat(sheet): Update default widths #7617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c91615e
feat(sheet): Update default widths
macandcheese Aug 29, 2023
afe33c3
Merge branch 'main' into macandcheese/improve-sheet-widths
macandcheese Aug 29, 2023
79593c3
Update tests
macandcheese Aug 29, 2023
7debbb5
Merge branch 'main' into macandcheese/improve-sheet-widths
macandcheese Aug 29, 2023
a342626
Merge branch 'main' into macandcheese/improve-sheet-widths
macandcheese Aug 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion packages/calcite-components/src/components/sheet/sheet.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,28 @@ describe("calcite-sheet properties", () => {
},
`.${CSS.content}`
);
expect(style).toEqual("432px");
expect(style).toEqual("420px");
});

it("sets custom width and max correctly", async () => {
const page = await newE2EPage();
// set large page to ensure test sheet isn't becoming fullscreen
await page.setViewport({ width: 1440, height: 1440 });
await page.setContent(
`<calcite-sheet position="inline-start" style="--calcite-sheet-width:600px;--calcite-sheet-max-width:600px;"></calcite-sheet>`
);
const sheet = await page.find("calcite-sheet");
sheet.setProperty("open", true);
await page.waitForChanges();
const style = await page.$eval(
"calcite-sheet",
(elm, selector: string) => {
const s = elm.shadowRoot.querySelector(selector);
return window.getComputedStyle(s).getPropertyValue("width");
},
`.${CSS.content}`
);
expect(style).toEqual("600px");
});

it("sets custom height correctly", async () => {
Expand Down
28 changes: 14 additions & 14 deletions packages/calcite-components/src/components/sheet/sheet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,37 +114,37 @@
}

:host([position^="inline"][width-scale="s"]) {
--calcite-sheet-width-internal: var(--calcite-sheet-width, 20vw);
--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 20vw);
--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 20vw);
--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);
--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);
--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px);
}

:host([position^="inline"][width-scale="m"]) {
--calcite-sheet-width-internal: var(--calcite-sheet-width, 30vw);
--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 30vw);
--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 30vw);
--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);
--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);
--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px);
}

:host([position^="inline"][width-scale="l"]) {
--calcite-sheet-width-internal: var(--calcite-sheet-width, 40vw);
--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 40vw);
--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 40vw);
--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);
--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);
--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px);
}

:host([position^="block"][height-scale="s"]) {
--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
--calcite-sheet-height-internal: var(--calcite-sheet-height, 20vh);
--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);
--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);
--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh);
}

:host([position^="block"][height-scale="m"]) {
--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
--calcite-sheet-height-internal: var(--calcite-sheet-height, 40vh);
--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);
--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);
--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh);
}

:host([position^="block"][height-scale="l"]) {
--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 10vh);
--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);
--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);
--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh);
}
Expand Down