diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 4c11468a907..ac63d263b95 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4518,12 +4518,12 @@ export namespace Components { */ "detached": boolean; /** - * When `displayMode` is `float`, specifies the maximum height of the component. + * When `displayMode` is `float-content`, specifies the maximum height of the component. * @deprecated Use `heightScale` instead. */ "detachedHeightScale": Scale; /** - * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. + * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. */ "displayMode": DisplayMode1; /** @@ -4547,7 +4547,7 @@ export namespace Components { */ "position": Extract<"start" | "end", Position>; /** - * When `true` and `displayMode` is not `float`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content`, the component's content area is resizable. */ "resizable": boolean; /** @@ -12638,12 +12638,12 @@ declare namespace LocalJSX { */ "detached"?: boolean; /** - * When `displayMode` is `float`, specifies the maximum height of the component. + * When `displayMode` is `float-content`, specifies the maximum height of the component. * @deprecated Use `heightScale` instead. */ "detachedHeightScale"?: Scale; /** - * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. + * Specifies the display mode of the component, where: `"dock"` displays at full height adjacent to center content, `"overlay"` displays at full height on top of center content, and `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. */ "displayMode"?: DisplayMode1; /** @@ -12669,7 +12669,7 @@ declare namespace LocalJSX { */ "position"?: Extract<"start" | "end", Position>; /** - * When `true` and `displayMode` is not `float`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content`, the component's content area is resizable. */ "resizable"?: boolean; /** diff --git a/packages/calcite-components/src/components/shell-panel/interfaces.d.ts b/packages/calcite-components/src/components/shell-panel/interfaces.d.ts index 6074d7ebd20..edd95048bba 100644 --- a/packages/calcite-components/src/components/shell-panel/interfaces.d.ts +++ b/packages/calcite-components/src/components/shell-panel/interfaces.d.ts @@ -1 +1 @@ -export type DisplayMode = "dock" | "float" | "overlay"; +export type DisplayMode = "dock" | "float" | "overlay" | "float-content" | "float-all"; diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts index 3ca2341628d..7f437f725b9 100644 --- a/packages/calcite-components/src/components/shell-panel/resources.ts +++ b/packages/calcite-components/src/components/shell-panel/resources.ts @@ -3,9 +3,11 @@ export const CSS = { content: "content", contentHeader: "content__header", contentBody: "content__body", - contentFloat: "content--float", + floatContent: "float--content", contentOverlay: "content--overlay", separator: "separator", + float: "float", + floatAll: "float-all", }; export const SLOTS = { diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts index fa936804f24..2df4cb585e2 100644 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts @@ -147,7 +147,7 @@ describe("calcite-shell-panel", () => { await page.setContent("
content
"); - let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentFloat}`); + let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatContent}`); expect(detachedElement).toBeNull(); @@ -155,13 +155,13 @@ describe("calcite-shell-panel", () => { expect(await panel.getProperty("detached")).toBe(false); - panel.setProperty("displayMode", "float"); + panel.setProperty("displayMode", "float-content"); await page.waitForChanges(); expect(await panel.getProperty("detached")).toBe(true); - detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentFloat}`); + detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatContent}`); expect(detachedElement).not.toBeNull(); }); @@ -556,7 +556,7 @@ describe("calcite-shell-panel", () => { const page = await newE2EPage(); await page.setContent( ` - + `, ); diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.scss b/packages/calcite-components/src/components/shell-panel/shell-panel.scss index 5d84f593a0a..4a052668bbd 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -6,10 +6,10 @@ * @prop --calcite-shell-panel-width: Specifies the width of the component. * @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component. * @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component. - * @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component. - * @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component. - * @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component. - * @prop --calcite-shell-panel-detached-max-height: [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float`, specifies the maximum height of the component. + * @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component. + * @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component. + * @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component. + * @prop --calcite-shell-panel-detached-max-height: [Deprecated] Use the `heightScale` property instead. When `displayMode` is `float-content` or `float`, specifies the maximum height of the component. * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component. * */ @@ -23,20 +23,20 @@ z-index: var(--calcite-shell-panel-z-index, theme("zIndex.default")); --calcite-shell-panel-detached-max-height: unset; --calcite-shell-panel-max-height: unset; - --calcite-shell-panel-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08), + --calcite-internal-shell-panel-shadow-block-start: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); - --calcite-shell-panel-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, 0.08), + --calcite-internal-shell-panel-shadow-block-end: 0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04); - --calcite-shell-panel-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08), + --calcite-internal-shell-panel-shadow-inline-start: 4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04); - --calcite-shell-panel-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08), + --calcite-internal-shell-panel-shadow-inline-end: -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04); } .calcite--rtl.content--overlay { - --calcite-shell-panel-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08), + --calcite-internal-shell-panel-shadow-inline-start: -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04); - --calcite-shell-panel-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08), + --calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04); } @@ -48,41 +48,60 @@ z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.header") + 1)); } -:host([layout="vertical"][width-scale="s"]) .content { - --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw); - --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 300px); - --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px); +:host([layout="vertical"][display-mode="float-all"]) .content { + flex: 2; } -:host([layout="vertical"][width-scale="m"]) .content { - --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw); - --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 420px); - --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px); +:host([layout="vertical"][width-scale="s"]:not([display-mode="float-all"])) .content { + --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw); + --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px); + --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px); } -:host([layout="vertical"][width-scale="l"]) .content { - --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw); - --calcite-shell-panel-max-width-internal: var(--calcite-shell-panel-max-width, 680px); - --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px); +:host([layout="vertical"][width-scale="s"][display-mode="float-all"]) .content { + --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw); + --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px); +} + +:host([layout="vertical"][width-scale="m"]:not([display-mode="float-all"])) .content { + --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw); + --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px); + --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px); +} + +:host([layout="vertical"][width-scale="m"][display-mode="float-all"]) .content { + --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw); + --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px); +} + +:host([layout="vertical"][width-scale="l"]:not([display-mode="float-all"])) .content { + --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw); + --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px); + --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px); +} + +:host([layout="vertical"][width-scale="l"][display-mode="float-all"]) .content { + --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw); + --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px); } :host([layout="horizontal"][height-scale="s"]) .content { - --calcite-shell-panel-max-height-internal: var( + --calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 20vh) ); } :host([layout="horizontal"]) .content { - --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 5vh); - --calcite-shell-panel-max-height-internal: var( + --calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh); + --calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 30vh) ); } :host([layout="horizontal"][height-scale="l"]) .content { - --calcite-shell-panel-max-height-internal: var( + --calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 40vh) ); @@ -101,6 +120,11 @@ * { @apply box-border; } + + &.float-all { + margin-block: 0.5rem; + margin-inline: 0.5rem; + } } :host([layout="horizontal"]) .container { @@ -193,16 +217,21 @@ max-inline-size var(--calcite-animation-timing); } -:host([layout="vertical"]) .content { - inline-size: var(--calcite-shell-panel-width-internal); - max-inline-size: var(--calcite-shell-panel-max-width-internal); - min-inline-size: var(--calcite-shell-panel-min-width-internal); +:host([layout="vertical"]:not([display-mode="float-all"])) .content { + inline-size: var(--calcite-internal-shell-panel-width); + max-inline-size: var(--calcite-internal-shell-panel-max-width); + min-inline-size: var(--calcite-internal-shell-panel-min-width); +} + +:host([layout="vertical"][display-mode="float-all"]) .content { + inline-size: var(--calcite-internal-shell-panel-width); + min-inline-size: var(--calcite-internal-shell-panel-min-width); } :host([layout="horizontal"]) .content { - block-size: var(--calcite-shell-panel-height-internal); - max-block-size: var(--calcite-shell-panel-max-height-internal); - min-block-size: var(--calcite-shell-panel-min-height-internal); + block-size: var(--calcite-internal-shell-panel-height); + max-block-size: var(--calcite-internal-shell-panel-max-height); + min-block-size: var(--calcite-internal-shell-panel-min-height); } .content__header { @@ -235,25 +264,25 @@ :host([layout="vertical"][position="start"]) .content--overlay { inset-inline-start: 100%; - box-shadow: var(--calcite-shell-panel-shadow-inline-start-internal); + box-shadow: var(--calcite-internal-shell-panel-shadow-inline-start); } :host([layout="vertical"][position="end"]) .content--overlay { inset-inline-end: 100%; - box-shadow: var(--calcite-shell-panel-shadow-inline-end-internal); + box-shadow: var(--calcite-internal-shell-panel-shadow-inline-end); } :host([layout="horizontal"][position="start"]) .content--overlay { inset-block-start: 100%; - box-shadow: var(--calcite-shell-panel-shadow-block-start-internal); + box-shadow: var(--calcite-internal-shell-panel-shadow-block-start); } :host([layout="horizontal"][position="end"]) .content--overlay { inset-block-end: 100%; - box-shadow: var(--calcite-shell-panel-shadow-block-end-internal); + box-shadow: var(--calcite-internal-shell-panel-shadow-block-end); } -.content--float { +.float--content { @apply shadow-0 mx-2 mt-2 @@ -261,19 +290,19 @@ h-auto overflow-hidden rounded; - max-block-size: var(--calcite-shell-panel-max-height-internal, calc(100% - 1rem)); + max-block-size: var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem)); ::slotted(calcite-panel), ::slotted(calcite-flow) { max-block-size: unset; } } -:host([layout="horizontal"]) .content--float { +:host([layout="horizontal"]) .float--content { @apply my-2; } -:host([position="start"]) .content--float, -:host([position="end"]) .content--float { +:host([position="start"]) .float--content, +:host([position="end"]) .float--content { ::slotted(calcite-panel), ::slotted(calcite-flow) { @apply border-none; @@ -290,7 +319,7 @@ slot[name="action-bar"]::slotted(calcite-action-bar), @apply border-color-3 border border-solid; } -:host([position="start"]:not([slot="panel-end"])), +:host([position="start"]:not([slot="panel-end"]):not([display-mode="float-all"])), :host([position="end"][slot="panel-start"]) { slot[name="action-bar"]::slotted(calcite-action-bar), .content ::slotted(calcite-flow), @@ -308,12 +337,12 @@ slot[name="action-bar"]::slotted(calcite-action-bar), } } -:host([layout="horizontal"]) slot[name="action-bar"]::slotted(calcite-action-bar) { +:host([layout="horizontal"]:not([display-mode="float-all"])) slot[name="action-bar"]::slotted(calcite-action-bar) { border-inline: 0; } -:host([layout="horizontal"][position="start"]) .content ::slotted(calcite-flow), -:host([layout="horizontal"][position="start"]) .content ::slotted(calcite-panel) { +:host([layout="horizontal"][position="start"]:not([display-mode="float-all"])) .content ::slotted(calcite-flow), +:host([layout="horizontal"][position="start"]:not([display-mode="float-all"])) .content ::slotted(calcite-panel) { border-inline: 0; border-block-start: 0; } diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx index 0ee7f5ba427..eaca7014097 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -68,8 +68,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, @Watch("detached") handleDetached(value: boolean): void { if (value) { - this.displayMode = "float"; - } else if (this.displayMode === "float") { + this.displayMode = "float-content"; + } else if (this.displayMode === "float-content" || this.displayMode === "float") { this.displayMode = "dock"; } } @@ -81,17 +81,21 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, * * `"overlay"` displays at full height on top of center content, and * - * `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. + * `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content. + * + * `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. + * + * `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content. */ @Prop({ reflect: true }) displayMode: DisplayMode = "dock"; @Watch("displayMode") handleDisplayMode(value: DisplayMode): void { - this.detached = value === "float"; + this.detached = value === "float-content" || value === "float"; } /** - * When `displayMode` is `float`, specifies the maximum height of the component. + * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component. * * @deprecated Use `heightScale` instead. */ @@ -134,7 +138,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "start"; /** - * When `true` and `displayMode` is not `float`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable. */ @Prop({ reflect: true }) resizable = false; @@ -280,7 +284,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const dir = getElementDir(this.el); - const allowResizing = displayMode !== "float" && resizable; + const allowResizing = displayMode !== "float-content" && displayMode !== "float" && resizable; const style = allowResizing ? layout === "horizontal" @@ -301,8 +305,8 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, aria-valuemin={layout == "horizontal" ? contentHeightMin : contentWidthMin} aria-valuenow={ layout == "horizontal" - ? contentHeight ?? initialContentHeight - : contentWidth ?? initialContentWidth + ? (contentHeight ?? initialContentHeight) + : (contentWidth ?? initialContentWidth) } class={CSS.separator} key="separator" @@ -332,7 +336,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, [CSS_UTILITY.rtl]: dir === "rtl", [CSS.content]: true, [CSS.contentOverlay]: displayMode === "overlay", - [CSS.contentFloat]: displayMode === "float", + [CSS.floatContent]: displayMode === "float-content" || displayMode === "float", [CSS_UTILITY.calciteAnimate]: displayMode === "overlay", [getAnimationDir()]: displayMode === "overlay", }} @@ -359,7 +363,11 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, mainNodes.reverse(); } - return
{mainNodes}
; + return ( +
+ {mainNodes} +
+ ); } // -------------------------------------------------------------------------- diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index d1583e947e4..db68285ae00 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -358,36 +358,41 @@ export const darkModeRTL_TestOnly = (): string => html` darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; -export const closedPanels = (): string => - html(` - - - - - - - - - -
- - -
- - -
- - -
- - - - - -`); +const closedPanelsHtml: string[] = []; +["float", "float-content"].forEach((d, i) => { + closedPanelsHtml[i] = html(` + + + + + + + + + +
+ + +
+ + +
+ + +
+ + + + + + `); +}); +export const closedPanelsFloat = (): string => closedPanelsHtml[0]; +export const closedPanelsFloatContent = (): string => closedPanelsHtml[1]; -export const endPanel_TestOnly = (): string => - html(` +const endPanelHtml: string[] = []; +["float", "float-content"].forEach((d, i) => { + endPanelHtml[i] = html(`

My Shell Header

@@ -403,7 +408,7 @@ background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; " > - + @@ -552,6 +557,9 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
My Shell Footer
`); +}); +export const endPanelFloat_TestOnly = (): string => endPanelHtml[0]; +export const endPanelFloatContent_TestOnly = (): string => endPanelHtml[1]; export const slottedModalAndAlert = (): string => html(` @@ -722,8 +730,9 @@ export const slottedSheetOverlay = (): string => `); -export const slottedSheetFloat = (): string => - html(` +const slottedSheetHtml: string[] = []; +["float", "float-content"].forEach((d, i) => { + slottedSheetHtml[i] = html(`

Other page content outside of shell Master cleanse occupy lo-fi meh. Green juice williamsburg XOXO man bun ascot fit. Knausgaard heirloom four dollar @@ -741,7 +750,7 @@ export const slottedSheetFloat = (): string => " >

Header Example
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et @@ -812,6 +821,9 @@ export const slottedSheetFloat = (): string => }); `); +}); +export const slottedSheetFloat = (): string => slottedSheetHtml[0]; +export const slottedSheetFloatContent = (): string => slottedSheetHtml[1]; export const contentBehind = (): string => html(` @@ -848,29 +860,33 @@ export const slottedPanelTop_TestOnly = (): string => `); -export const contentBehindPanelBottom = (): string => - html(` - -

{ + contentBehindPanelBottomHtml[i] = html(` +
- ${bottomPanelHTML} - - `); + width:700px; + height:700px; + position:relative; + " + > +
+ ${bottomPanelHTML} + + `); +}); +export const contentBehindPanelBottomFloat = (): string => contentBehindPanelBottomHtml[0]; +export const contentBehindPanelBottomFloatContent = (): string => contentBehindPanelBottomHtml[1]; export const slottedPanelBottom_TestOnly = (): string => html(` @@ -1402,3 +1418,228 @@ export const panelEndWithPositionStart_TestOnly = (): string => `; + +export const panelTopFloatHorizontal_TestOnly = (): string => + html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + dock + float content + overlay + float all + + + Vertical + Horizontal + + + + + + `; + +export const panelTopFloatVertical_TestOnly = (): string => + html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + dock + float content + overlay + float all + + + Vertical + Horizontal + + + + + + `; diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html index fe241d016af..5b7defea4ae 100644 --- a/packages/calcite-components/src/demos/shell-panel.html +++ b/packages/calcite-components/src/demos/shell-panel.html @@ -137,8 +137,9 @@ dock - float + float content overlay + float all @@ -183,8 +184,9 @@ dock - float + float content overlay + float all @@ -217,8 +219,14 @@ dock + float content float overlay + float all + + + Vertical + Horizontal @@ -251,8 +259,9 @@ dock - float + float content overlay + float all @@ -297,6 +306,13 @@ }); }); + const chipsLayout = document.getElementById("chip-layout-panel-top"); + chipsLayout.addEventListener("calciteChipGroupSelect", function (event) { + const shellPanel = event.target.closest("calcite-shell-panel"); + const prop = event.target.selectedItems[0].value; + shellPanel.layout = prop; + }); + const panelTop = document.getElementById("panel-top"); const panelBottom = document.getElementById("panel-bottom"); const panelStart = document.getElementById("panel-start");