From 725a45efb77af87135dc293b95cfb25026cce0bc Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Tue, 16 Jul 2024 12:48:10 -0700 Subject: [PATCH 01/17] fix(shell-panel): implement float display mode --- .../calcite-components/src/components.d.ts | 28 +++++------ .../src/components/action-bar/action-bar.tsx | 24 +++++++++ .../components/functional/ExpandToggle.tsx | 2 +- .../components/shell-panel/interfaces.d.ts | 2 +- .../src/components/shell-panel/resources.ts | 3 +- .../components/shell-panel/shell-panel.e2e.ts | 4 +- .../components/shell-panel/shell-panel.scss | 29 ++++++----- .../components/shell-panel/shell-panel.tsx | 49 ++++++++++--------- .../src/demos/shell-panel.html | 23 +++++++-- 9 files changed, 107 insertions(+), 57 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index a664d928d58..701250951bc 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4401,6 +4401,10 @@ export namespace Components { "position": Extract<"start" | "end", Position>; } interface CalciteShellPanel { + /** + * Specifies the action bar's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "actionBarPosition": Extract<"start" | "end", Position>; /** * When `true`, hides the component's content area. */ @@ -4411,12 +4415,12 @@ export namespace Components { */ "detached": boolean; /** - * When `displayMode` is `float`, specifies the maximum height of the component. + * When `displayMode` is `content-detached`, 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 `"content-detached"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. */ "displayMode": DisplayMode1; /** @@ -4436,11 +4440,7 @@ export namespace Components { */ "messages": ShellPanelMessages; /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - "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 `content-detached`, the component's content area is resizable. */ "resizable": boolean; /** @@ -12408,6 +12408,10 @@ declare namespace LocalJSX { "position"?: Extract<"start" | "end", Position>; } interface CalciteShellPanel { + /** + * Specifies the action bar's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "actionBarPosition"?: Extract<"start" | "end", Position>; /** * When `true`, hides the component's content area. */ @@ -12418,12 +12422,12 @@ declare namespace LocalJSX { */ "detached"?: boolean; /** - * When `displayMode` is `float`, specifies the maximum height of the component. + * When `displayMode` is `content-detached`, 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 `"content-detached"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. */ "displayMode"?: DisplayMode1; /** @@ -12445,11 +12449,7 @@ declare namespace LocalJSX { "onCalciteInternalShellPanelResizeEnd"?: (event: CalciteShellPanelCustomEvent) => void; "onCalciteInternalShellPanelResizeStart"?: (event: CalciteShellPanelCustomEvent) => void; /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - "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 `content-detached`, the component's content area is resizable. */ "resizable"?: boolean; /** diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 21e37492fb7..7170edb178d 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -342,8 +342,32 @@ export class ActionBar expanded, overflowCount, }); + + this.removeOverflowGroups(height, actionGroups, layout); }, overflowActionsDebounceInMs); + private removeOverflowGroups( + height: number, + actionGroups: HTMLCalciteActionGroupElement[], + layout: "horizontal" | "vertical", + ) { + let groupHeight = 0; + if (layout === "vertical") { + actionGroups.forEach((group) => { + groupHeight += group.clientHeight; + }); + while (height > groupHeight || Math.abs(height - groupHeight) <= 20) { + const group = actionGroups.shift(); + group.style.display = "none"; + actionGroups.forEach((group) => { + groupHeight += group.clientHeight; + }); + } + } else { + actionGroups.forEach((a) => (a.style.display = "inline-block")); + } + } + toggleExpand = (): void => { this.expanded = !this.expanded; this.calciteActionBarToggle.emit(); diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx index b0608fbc241..3054ca17e75 100644 --- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx +++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx @@ -24,7 +24,7 @@ const ICONS = { } as const; function getCalcitePosition(position: Position, el: HTMLElement): Position { - return position || el.closest("calcite-shell-panel")?.position || "start"; + return position || el.closest("calcite-shell-panel")?.actionBarPosition || "start"; } export function toggleChildActionText({ 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..094e1e455e6 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" | "content-detached"; diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts index 3ca2341628d..7c38c7a1d90 100644 --- a/packages/calcite-components/src/components/shell-panel/resources.ts +++ b/packages/calcite-components/src/components/shell-panel/resources.ts @@ -3,9 +3,10 @@ export const CSS = { content: "content", contentHeader: "content__header", contentBody: "content__body", - contentFloat: "content--float", + contentDetached: "content--detached", contentOverlay: "content--overlay", separator: "separator", + float: "float", }; 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..334c0bb478d 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.contentDetached}`); expect(detachedElement).toBeNull(); @@ -161,7 +161,7 @@ describe("calcite-shell-panel", () => { expect(await panel.getProperty("detached")).toBe(true); - detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentFloat}`); + detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentDetached}`); expect(detachedElement).not.toBeNull(); }); 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..24f2e12ae97 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -48,21 +48,23 @@ z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.header") + 1)); } +:host([layout="vertical"][display-mode="float"]) .content, +:host([layout="vertical"][display-mode="content-detached"]) .content { + flex: 2; +} + :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"][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="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); } @@ -101,6 +103,11 @@ * { @apply box-border; } + + &.float { + margin-block: 0.5rem; + margin-inline: 0.5rem; + } } :host([layout="horizontal"]) .container { @@ -253,7 +260,7 @@ box-shadow: var(--calcite-shell-panel-shadow-block-end-internal); } -.content--float { +.content--detached { @apply shadow-0 mx-2 mt-2 @@ -268,12 +275,12 @@ } } -:host([layout="horizontal"]) .content--float { +:host([layout="horizontal"]) .content--detached { @apply my-2; } -:host([position="start"]) .content--float, -:host([position="end"]) .content--float { +:host([position="start"]) .content--detached, +:host([position="end"]) .content--detached { ::slotted(calcite-panel), ::slotted(calcite-flow) { @apply border-none; @@ -290,7 +297,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"])), :host([position="end"][slot="panel-start"]) { slot[name="action-bar"]::slotted(calcite-action-bar), .content ::slotted(calcite-flow), @@ -308,12 +315,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"])) 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"])) .content ::slotted(calcite-flow), +:host([layout="horizontal"][position="start"]:not([display-mode="float"])) .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..345834778ba 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 = "content-detached"; + } else if (this.displayMode === "content-detached") { this.displayMode = "dock"; } } @@ -81,17 +81,17 @@ 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. + * `"content-detached"` does not display at full height with content separately detached from `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 === "content-detached"; } /** - * When `displayMode` is `float`, specifies the maximum height of the component. + * When `displayMode` is `content-detached`, specifies the maximum height of the component. * * @deprecated Use `heightScale` instead. */ @@ -129,12 +129,12 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, } /** - * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + * Specifies the action bar's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "start"; + @Prop({ reflect: true }) actionBarPosition: 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 `content-detached`, the component's content area is resizable. */ @Prop({ reflect: true }) resizable = false; @@ -264,7 +264,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, render(): VNode { const { collapsed, - position, + actionBarPosition, initialContentWidth, initialContentHeight, contentWidth, @@ -280,7 +280,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const dir = getElementDir(this.el); - const allowResizing = displayMode !== "float" && resizable; + const allowResizing = displayMode !== "content-detached" && resizable; const style = allowResizing ? layout === "horizontal" @@ -316,12 +316,13 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const getAnimationDir = (): string => { if (layout === "horizontal") { - return position === "start" + return actionBarPosition === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp; } else { const isStart = - (dir === "ltr" && position === "end") || (dir === "rtl" && position === "start"); + (dir === "ltr" && actionBarPosition === "end") || + (dir === "rtl" && actionBarPosition === "start"); return isStart ? CSS_UTILITY.calciteAnimateInLeft : CSS_UTILITY.calciteAnimateInRight; } }; @@ -332,7 +333,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, [CSS_UTILITY.rtl]: dir === "rtl", [CSS.content]: true, [CSS.contentOverlay]: displayMode === "overlay", - [CSS.contentFloat]: displayMode === "float", + [CSS.contentDetached]: displayMode === "content-detached", [CSS_UTILITY.calciteAnimate]: displayMode === "overlay", [getAnimationDir()]: displayMode === "overlay", }} @@ -355,11 +356,13 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const mainNodes = [actionBarNode, contentNode]; - if (position === "end") { + if (actionBarPosition === "end") { mainNodes.reverse(); } - return
{mainNodes}
; + return ( +
{mainNodes}
+ ); } // -------------------------------------------------------------------------- @@ -458,7 +461,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, initialContentHeight, contentHeightMin, contentHeightMax, - position, + actionBarPosition, } = this; const multipliedStep = step * stepMultiplier; @@ -485,11 +488,11 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const increaseKeys = layout === "horizontal" - ? position === "end" + ? actionBarPosition === "end" ? key === verticalKeys[1] || key === horizontalKeys[0] : key === verticalKeys[0] || key === horizontalKeys[1] : key === verticalKeys[1] || - (position === "end" ? key === horizontalKeys[0] : key === horizontalKeys[1]); + (actionBarPosition === "end" ? key === horizontalKeys[0] : key === horizontalKeys[1]); if (increaseKeys) { const stepValue = event.shiftKey ? multipliedStep : step; @@ -501,11 +504,11 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const decreaseKeys = layout === "horizontal" - ? position === "end" + ? actionBarPosition === "end" ? key === verticalKeys[0] || key === horizontalKeys[0] : key === verticalKeys[1] || key === horizontalKeys[1] : key === verticalKeys[0] || - (position === "end" ? key === horizontalKeys[1] : key === horizontalKeys[0]); + (actionBarPosition === "end" ? key === horizontalKeys[1] : key === horizontalKeys[0]); if (decreaseKeys) { const stepValue = event.shiftKey ? multipliedStep : step; @@ -578,7 +581,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, layout, initialContentWidth, initialContentHeight, - position, + actionBarPosition, initialClientX, initialClientY, } = this; @@ -590,10 +593,10 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const adjustedOffset = layout === "horizontal" - ? position === "end" + ? actionBarPosition === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset - : position === "end" + : actionBarPosition === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset; diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html index fe241d016af..4326119065b 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 + content-detached overlay + float @@ -183,8 +184,9 @@ dock - float + content-detached overlay + float @@ -217,8 +219,13 @@ dock - float + content-detached overlay + float + + + Vertical + Horizontal @@ -251,8 +258,9 @@ dock - float + content-detached overlay + float @@ -297,6 +305,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"); From b9c0b6cc7151a220ebb7c1e7ba1201e807e0e3b3 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Fri, 19 Jul 2024 14:56:42 -0700 Subject: [PATCH 02/17] Removed code that reduced action bar size per code review --- .../src/components/action-bar/action-bar.tsx | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/packages/calcite-components/src/components/action-bar/action-bar.tsx b/packages/calcite-components/src/components/action-bar/action-bar.tsx index 7170edb178d..21e37492fb7 100755 --- a/packages/calcite-components/src/components/action-bar/action-bar.tsx +++ b/packages/calcite-components/src/components/action-bar/action-bar.tsx @@ -342,32 +342,8 @@ export class ActionBar expanded, overflowCount, }); - - this.removeOverflowGroups(height, actionGroups, layout); }, overflowActionsDebounceInMs); - private removeOverflowGroups( - height: number, - actionGroups: HTMLCalciteActionGroupElement[], - layout: "horizontal" | "vertical", - ) { - let groupHeight = 0; - if (layout === "vertical") { - actionGroups.forEach((group) => { - groupHeight += group.clientHeight; - }); - while (height > groupHeight || Math.abs(height - groupHeight) <= 20) { - const group = actionGroups.shift(); - group.style.display = "none"; - actionGroups.forEach((group) => { - groupHeight += group.clientHeight; - }); - } - } else { - actionGroups.forEach((a) => (a.style.display = "inline-block")); - } - } - toggleExpand = (): void => { this.expanded = !this.expanded; this.calciteActionBarToggle.emit(); From 57c8731e7f482ce01c6e8d550fe007230b6dd118 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Fri, 19 Jul 2024 15:03:26 -0700 Subject: [PATCH 03/17] REmoved undefined --calcite-shell-panel-max-width-internal --- .../src/components/shell-panel/shell-panel.scss | 1 - 1 file changed, 1 deletion(-) 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 24f2e12ae97..55dedf13372 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -202,7 +202,6 @@ :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); } From e58b0d53566d3f42655ca92b835af909c3ef9a59 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Mon, 22 Jul 2024 08:40:30 -0700 Subject: [PATCH 04/17] Removed unused line; renamed display-mode values; other --- packages/calcite-components/src/components.d.ts | 12 ++++++------ .../src/components/shell-panel/interfaces.d.ts | 2 +- .../src/components/shell-panel/shell-panel.scss | 2 +- .../src/components/shell-panel/shell-panel.tsx | 16 ++++++++-------- .../src/demos/shell-panel.html | 8 ++++---- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 1bd5fcef624..0d77ba2705a 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4423,12 +4423,12 @@ export namespace Components { */ "detached": boolean; /** - * When `displayMode` is `content-detached`, specifies the maximum height of the component. + * When `displayMode` is `float-detach`, 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 `"content-detached"` 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-detach"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. */ "displayMode": DisplayMode1; /** @@ -4448,7 +4448,7 @@ export namespace Components { */ "messages": ShellPanelMessages; /** - * When `true` and `displayMode` is not `content-detached`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-detach`, the component's content area is resizable. */ "resizable": boolean; /** @@ -12438,12 +12438,12 @@ declare namespace LocalJSX { */ "detached"?: boolean; /** - * When `displayMode` is `content-detached`, specifies the maximum height of the component. + * When `displayMode` is `float-detach`, 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 `"content-detached"` 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-detach"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. */ "displayMode"?: DisplayMode1; /** @@ -12465,7 +12465,7 @@ declare namespace LocalJSX { "onCalciteInternalShellPanelResizeEnd"?: (event: CalciteShellPanelCustomEvent) => void; "onCalciteInternalShellPanelResizeStart"?: (event: CalciteShellPanelCustomEvent) => void; /** - * When `true` and `displayMode` is not `content-detached`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-detach`, 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 094e1e455e6..fde062b7515 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" | "content-detached"; +export type DisplayMode = "dock" | "float" | "overlay" | "float-detach"; 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 55dedf13372..9338a908e74 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -49,7 +49,7 @@ } :host([layout="vertical"][display-mode="float"]) .content, -:host([layout="vertical"][display-mode="content-detached"]) .content { +:host([layout="vertical"][display-mode="float-detach"]) .content { flex: 2; } 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 345834778ba..1ddc8cd8e39 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 = "content-detached"; - } else if (this.displayMode === "content-detached") { + this.displayMode = "float-detach"; + } else if (this.displayMode === "float-detach") { this.displayMode = "dock"; } } @@ -81,17 +81,17 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, * * `"overlay"` displays at full height on top of center content, and * - * `"content-detached"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. + * `"float-detach"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. */ @Prop({ reflect: true }) displayMode: DisplayMode = "dock"; @Watch("displayMode") handleDisplayMode(value: DisplayMode): void { - this.detached = value === "content-detached"; + this.detached = value === "float-detach"; } /** - * When `displayMode` is `content-detached`, specifies the maximum height of the component. + * When `displayMode` is `float-detach`, specifies the maximum height of the component. * * @deprecated Use `heightScale` instead. */ @@ -134,7 +134,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, @Prop({ reflect: true }) actionBarPosition: Extract<"start" | "end", Position> = "start"; /** - * When `true` and `displayMode` is not `content-detached`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-detach`, the component's content area is resizable. */ @Prop({ reflect: true }) resizable = false; @@ -280,7 +280,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const dir = getElementDir(this.el); - const allowResizing = displayMode !== "content-detached" && resizable; + const allowResizing = displayMode !== "float-detach" && resizable; const style = allowResizing ? layout === "horizontal" @@ -333,7 +333,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, [CSS_UTILITY.rtl]: dir === "rtl", [CSS.content]: true, [CSS.contentOverlay]: displayMode === "overlay", - [CSS.contentDetached]: displayMode === "content-detached", + [CSS.contentDetached]: displayMode === "float-detach", [CSS_UTILITY.calciteAnimate]: displayMode === "overlay", [getAnimationDir()]: displayMode === "overlay", }} diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html index 4326119065b..497475cb4b4 100644 --- a/packages/calcite-components/src/demos/shell-panel.html +++ b/packages/calcite-components/src/demos/shell-panel.html @@ -137,7 +137,7 @@ dock - content-detached + float-detach overlay float @@ -184,7 +184,7 @@ dock - content-detached + float-detach overlay float @@ -219,7 +219,7 @@ dock - content-detached + float-detach overlay float @@ -258,7 +258,7 @@ dock - content-detached + float-detach overlay float From f7789317306fab2824ba54de9bd5d88dacdc681d Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Mon, 22 Jul 2024 09:39:23 -0700 Subject: [PATCH 05/17] Made further changes to code --- .../src/components/shell-panel/resources.ts | 2 +- .../src/components/shell-panel/shell-panel.e2e.ts | 4 ++-- .../src/components/shell-panel/shell-panel.scss | 8 ++++---- .../src/components/shell-panel/shell-panel.tsx | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/shell-panel/resources.ts b/packages/calcite-components/src/components/shell-panel/resources.ts index 7c38c7a1d90..838b58d7f1b 100644 --- a/packages/calcite-components/src/components/shell-panel/resources.ts +++ b/packages/calcite-components/src/components/shell-panel/resources.ts @@ -3,7 +3,7 @@ export const CSS = { content: "content", contentHeader: "content__header", contentBody: "content__body", - contentDetached: "content--detached", + floatDetach: "float--detach", contentOverlay: "content--overlay", separator: "separator", float: "float", 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 334c0bb478d..dd5a9c90c03 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.contentDetached}`); + let detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatDetach}`); expect(detachedElement).toBeNull(); @@ -161,7 +161,7 @@ describe("calcite-shell-panel", () => { expect(await panel.getProperty("detached")).toBe(true); - detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.contentDetached}`); + detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatDetach}`); expect(detachedElement).not.toBeNull(); }); 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 9338a908e74..a43a7dadb35 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -259,7 +259,7 @@ box-shadow: var(--calcite-shell-panel-shadow-block-end-internal); } -.content--detached { +.float--detach { @apply shadow-0 mx-2 mt-2 @@ -274,12 +274,12 @@ } } -:host([layout="horizontal"]) .content--detached { +:host([layout="horizontal"]) .float--detach { @apply my-2; } -:host([position="start"]) .content--detached, -:host([position="end"]) .content--detached { +:host([position="start"]) .float--detach, +:host([position="end"]) .float--detach { ::slotted(calcite-panel), ::slotted(calcite-flow) { @apply border-none; 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 1ddc8cd8e39..423662bd583 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -333,7 +333,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, [CSS_UTILITY.rtl]: dir === "rtl", [CSS.content]: true, [CSS.contentOverlay]: displayMode === "overlay", - [CSS.contentDetached]: displayMode === "float-detach", + [CSS.floatDetach]: displayMode === "float-detach", [CSS_UTILITY.calciteAnimate]: displayMode === "overlay", [getAnimationDir()]: displayMode === "overlay", }} From 38069e21fab65805c1c4848ea76d8d995b93f38c Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Tue, 23 Jul 2024 14:30:39 -0700 Subject: [PATCH 06/17] Reverted name change --- .../components/functional/ExpandToggle.tsx | 2 +- .../components/shell-panel/shell-panel.tsx | 29 +++++++++---------- 2 files changed, 15 insertions(+), 16 deletions(-) diff --git a/packages/calcite-components/src/components/functional/ExpandToggle.tsx b/packages/calcite-components/src/components/functional/ExpandToggle.tsx index 3054ca17e75..b0608fbc241 100644 --- a/packages/calcite-components/src/components/functional/ExpandToggle.tsx +++ b/packages/calcite-components/src/components/functional/ExpandToggle.tsx @@ -24,7 +24,7 @@ const ICONS = { } as const; function getCalcitePosition(position: Position, el: HTMLElement): Position { - return position || el.closest("calcite-shell-panel")?.actionBarPosition || "start"; + return position || el.closest("calcite-shell-panel")?.position || "start"; } export function toggleChildActionText({ 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 423662bd583..df55cd3b01b 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -129,9 +129,9 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, } /** - * Specifies the action bar's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */ - @Prop({ reflect: true }) actionBarPosition: Extract<"start" | "end", Position> = "start"; + @Prop({ reflect: true }) position: Extract<"start" | "end", Position> = "start"; /** * When `true` and `displayMode` is not `float-detach`, the component's content area is resizable. @@ -264,7 +264,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, render(): VNode { const { collapsed, - actionBarPosition, + position, initialContentWidth, initialContentHeight, contentWidth, @@ -316,13 +316,12 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const getAnimationDir = (): string => { if (layout === "horizontal") { - return actionBarPosition === "start" + return position === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp; } else { const isStart = - (dir === "ltr" && actionBarPosition === "end") || - (dir === "rtl" && actionBarPosition === "start"); + (dir === "ltr" && position === "end") || (dir === "rtl" && position === "start"); return isStart ? CSS_UTILITY.calciteAnimateInLeft : CSS_UTILITY.calciteAnimateInRight; } }; @@ -356,7 +355,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const mainNodes = [actionBarNode, contentNode]; - if (actionBarPosition === "end") { + if (position === "end") { mainNodes.reverse(); } @@ -461,7 +460,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, initialContentHeight, contentHeightMin, contentHeightMax, - actionBarPosition, + position, } = this; const multipliedStep = step * stepMultiplier; @@ -488,11 +487,11 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const increaseKeys = layout === "horizontal" - ? actionBarPosition === "end" + ? position === "end" ? key === verticalKeys[1] || key === horizontalKeys[0] : key === verticalKeys[0] || key === horizontalKeys[1] : key === verticalKeys[1] || - (actionBarPosition === "end" ? key === horizontalKeys[0] : key === horizontalKeys[1]); + (position === "end" ? key === horizontalKeys[0] : key === horizontalKeys[1]); if (increaseKeys) { const stepValue = event.shiftKey ? multipliedStep : step; @@ -504,11 +503,11 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const decreaseKeys = layout === "horizontal" - ? actionBarPosition === "end" + ? position === "end" ? key === verticalKeys[0] || key === horizontalKeys[0] : key === verticalKeys[1] || key === horizontalKeys[1] : key === verticalKeys[0] || - (actionBarPosition === "end" ? key === horizontalKeys[1] : key === horizontalKeys[0]); + (position === "end" ? key === horizontalKeys[1] : key === horizontalKeys[0]); if (decreaseKeys) { const stepValue = event.shiftKey ? multipliedStep : step; @@ -581,7 +580,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, layout, initialContentWidth, initialContentHeight, - actionBarPosition, + position, initialClientX, initialClientY, } = this; @@ -593,10 +592,10 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, const adjustedOffset = layout === "horizontal" - ? actionBarPosition === "end" + ? position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset - : actionBarPosition === "end" + : position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset; From 6c4d1288c50f797c86b3b27aa85a613e230d6077 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Tue, 23 Jul 2024 15:37:25 -0700 Subject: [PATCH 07/17] Reverted name change --- .../calcite-components/src/components.d.ts | 66 ++++++++++--------- 1 file changed, 34 insertions(+), 32 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 7a5e7599d99..1b89691bc52 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -83,6 +83,7 @@ import { StepperMessages } from "./components/stepper/assets/stepper/t9n"; import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; +import { Element } from "@stencil/core"; import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; @@ -175,6 +176,7 @@ export { StepperMessages } from "./components/stepper/assets/stepper/t9n"; export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n"; export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces"; export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n"; +export { Element } from "@stencil/core"; export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces"; export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n"; export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces"; @@ -983,7 +985,7 @@ export namespace Components { "status": Status; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -1347,7 +1349,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2282,7 +2284,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2405,7 +2407,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2600,7 +2602,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2741,7 +2743,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2841,7 +2843,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -2929,7 +2931,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -4225,7 +4227,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -4320,7 +4322,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -4413,10 +4415,6 @@ export namespace Components { "position": Extract<"start" | "end", Position>; } interface CalciteShellPanel { - /** - * Specifies the action bar's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - "actionBarPosition": Extract<"start" | "end", Position>; /** * When `true`, hides the component's content area. */ @@ -4451,6 +4449,10 @@ export namespace Components { * Made into a prop for testing purposes only */ "messages": ShellPanelMessages; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position": Extract<"start" | "end", Position>; /** * When `true` and `displayMode` is not `float-detach`, the component's content area is resizable. */ @@ -5230,7 +5232,7 @@ export namespace Components { "placeholder": string; /** * When `true`, the component's `value` can be read, but cannot be modified. - * @readonly + * @readonly * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) */ "readOnly": boolean; @@ -5274,7 +5276,7 @@ export namespace Components { "validationMessage": string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity": MutableValidityState; @@ -8795,7 +8797,7 @@ declare namespace LocalJSX { "status"?: Status; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -9188,7 +9190,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10164,7 +10166,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10298,7 +10300,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10495,7 +10497,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10641,7 +10643,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10752,7 +10754,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -10859,7 +10861,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -12218,7 +12220,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -12317,7 +12319,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; @@ -12418,10 +12420,6 @@ declare namespace LocalJSX { "position"?: Extract<"start" | "end", Position>; } interface CalciteShellPanel { - /** - * Specifies the action bar's position. Will be flipped when the element direction is right-to-left (`"rtl"`). - */ - "actionBarPosition"?: Extract<"start" | "end", Position>; /** * When `true`, hides the component's content area. */ @@ -12458,6 +12456,10 @@ declare namespace LocalJSX { "messages"?: ShellPanelMessages; "onCalciteInternalShellPanelResizeEnd"?: (event: CalciteShellPanelCustomEvent) => void; "onCalciteInternalShellPanelResizeStart"?: (event: CalciteShellPanelCustomEvent) => void; + /** + * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). + */ + "position"?: Extract<"start" | "end", Position>; /** * When `true` and `displayMode` is not `float-detach`, the component's content area is resizable. */ @@ -13264,7 +13266,7 @@ declare namespace LocalJSX { "placeholder"?: string; /** * When `true`, the component's `value` can be read, but cannot be modified. - * @readonly + * @readonly * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) */ "readOnly"?: boolean; @@ -13300,7 +13302,7 @@ declare namespace LocalJSX { "validationMessage"?: string; /** * The current validation state of the component. - * @readonly + * @readonly * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) */ "validity"?: MutableValidityState; From e3b608d87921c72ec7cd68fa1ea26aea785b84f0 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Tue, 23 Jul 2024 17:48:56 -0700 Subject: [PATCH 08/17] Separated rules for float-detach and float --- .../components/shell-panel/shell-panel.scss | 35 +++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) 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 a43a7dadb35..fb8ae9f3143 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -48,22 +48,39 @@ z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.header") + 1)); } -:host([layout="vertical"][display-mode="float"]) .content, -:host([layout="vertical"][display-mode="float-detach"]) .content { +:host([layout="vertical"][display-mode="float"]) .content { flex: 2; } -:host([layout="vertical"][width-scale="s"]) .content { +:host([layout="vertical"][width-scale="s"]:not([display-mode="float"])) .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"][width-scale="m"]) .content { +:host([layout="vertical"][width-scale="s"][display-mode="float"]) .content { + --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw); + --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px); +} + +:host([layout="vertical"][width-scale="m"]:not([display-mode="float"])) .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="m"][display-mode="float"]) .content { --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw); --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px); } -:host([layout="vertical"][width-scale="l"]) .content { +:host([layout="vertical"][width-scale="l"]:not([display-mode="float"])) .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="l"][display-mode="float"]) .content { --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw); --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px); } @@ -200,7 +217,13 @@ max-inline-size var(--calcite-animation-timing); } -:host([layout="vertical"]) .content { +:host([layout="vertical"]:not([display-mode="float"])) .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"][display-mode="float"]) .content { inline-size: var(--calcite-shell-panel-width-internal); min-inline-size: var(--calcite-shell-panel-min-width-internal); } From 7722db79e98718f2187b3cab02a05dccc23fc410 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Wed, 24 Jul 2024 10:16:34 -0700 Subject: [PATCH 09/17] Fixing failed test --- .../src/components/shell-panel/shell-panel.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 dd5a9c90c03..204fd62c524 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 @@ -153,13 +153,13 @@ describe("calcite-shell-panel", () => { const panel = await page.find("calcite-shell-panel"); - expect(await panel.getProperty("detached")).toBe(false); + expect(await panel.getProperty("float-detach")).toBe(false); panel.setProperty("displayMode", "float"); await page.waitForChanges(); - expect(await panel.getProperty("detached")).toBe(true); + expect(await panel.getProperty("float-detach")).toBe(true); detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatDetach}`); From 84b1026f27aa41c06a8dd15c5b443433e94021db Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Wed, 24 Jul 2024 10:35:19 -0700 Subject: [PATCH 10/17] Fixing failed test --- .../src/components/shell-panel/shell-panel.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 204fd62c524..dd5a9c90c03 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 @@ -153,13 +153,13 @@ describe("calcite-shell-panel", () => { const panel = await page.find("calcite-shell-panel"); - expect(await panel.getProperty("float-detach")).toBe(false); + expect(await panel.getProperty("detached")).toBe(false); panel.setProperty("displayMode", "float"); await page.waitForChanges(); - expect(await panel.getProperty("float-detach")).toBe(true); + expect(await panel.getProperty("detached")).toBe(true); detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatDetach}`); From 957b67893de589e3e61a614d888ab062a792b898 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Wed, 24 Jul 2024 11:07:41 -0700 Subject: [PATCH 11/17] Fixing failed test --- .../src/components/shell-panel/shell-panel.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 dd5a9c90c03..929624fa304 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 @@ -155,7 +155,7 @@ describe("calcite-shell-panel", () => { expect(await panel.getProperty("detached")).toBe(false); - panel.setProperty("displayMode", "float"); + panel.setProperty("displayMode", "float-detach"); await page.waitForChanges(); From 50f283fc98ce298fa6e97074cc0e467d982961d5 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Wed, 24 Jul 2024 11:23:26 -0700 Subject: [PATCH 12/17] Fixing failed test --- .../src/components/shell-panel/shell-panel.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 929624fa304..d425fe77079 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 @@ -556,7 +556,7 @@ describe("calcite-shell-panel", () => { const page = await newE2EPage(); await page.setContent( ` - + `, ); From abf80a56e19427f6639922ff1ba108dac7909d0a Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Wed, 24 Jul 2024 12:49:36 -0700 Subject: [PATCH 13/17] Moved the '-internal' ending right after 'calcite' for each rule --- .../components/shell-panel/shell-panel.scss | 76 +++++++++---------- 1 file changed, 38 insertions(+), 38 deletions(-) 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 fb8ae9f3143..385f4b0d5b6 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss @@ -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); } @@ -53,55 +53,55 @@ } :host([layout="vertical"][width-scale="s"]:not([display-mode="float"])) .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); + --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="s"][display-mode="float"]) .content { - --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 12vw); - --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 150px); + --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"])) .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); + --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"]) .content { - --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 20vw); - --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 240px); + --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"])) .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); + --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"]) .content { - --calcite-shell-panel-width-internal: var(--calcite-shell-panel-width, 45vw); - --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px); + --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) ); @@ -218,20 +218,20 @@ } :host([layout="vertical"]:not([display-mode="float"])) .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); + 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"]) .content { - inline-size: var(--calcite-shell-panel-width-internal); - min-inline-size: var(--calcite-shell-panel-min-width-internal); + 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 { @@ -264,22 +264,22 @@ :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); } .float--detach { @@ -290,7 +290,7 @@ 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; From 3540fba21208cf3e3dc1b2c0698a9064da47324b Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Wed, 24 Jul 2024 15:15:59 -0700 Subject: [PATCH 14/17] Changed display-mode from float to float-detach --- .../src/components/shell/shell.stories.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index d1583e947e4..9178c50ba8c 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -360,7 +360,7 @@ darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; export const closedPanels = (): string => html(` - + @@ -403,7 +403,7 @@ background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; " > - + @@ -741,7 +741,7 @@ export const slottedSheetFloat = (): string => " >
Header Example
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et @@ -868,7 +868,7 @@ export const contentBehindPanelBottom = (): string => linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"> - ${bottomPanelHTML} + ${bottomPanelHTML} `); From 46b45f81fb30cd031d15891d23705902f58694a4 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Thu, 25 Jul 2024 12:18:57 -0700 Subject: [PATCH 15/17] Added stories for vertical and horizontal float --- .../src/components/shell/shell.stories.ts | 225 ++++++++++++++++++ 1 file changed, 225 insertions(+) diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index 9178c50ba8c..8bf5d09701b 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -1402,3 +1402,228 @@ export const panelEndWithPositionStart_TestOnly = (): string => `; + +export const panelTopFloatHorizontal_TestOnly = (): string => + html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + dock + float-detach + overlay + float + + + Vertical + Horizontal + +

+ + + + `; + +export const panelTopFloatVertical_TestOnly = (): string => + html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + dock + float-detach + overlay + float + + + Vertical + Horizontal + + + + + + `; From c31251432583c9f67e34bd8839b20b48afa315f0 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Mon, 29 Jul 2024 15:53:24 -0700 Subject: [PATCH 16/17] Deprecated display mode float and added float-content and float-all --- .../calcite-components/src/components.d.ts | 12 ++--- .../components/shell-panel/interfaces.d.ts | 2 +- .../src/components/shell-panel/resources.ts | 3 +- .../components/shell-panel/shell-panel.e2e.ts | 8 ++-- .../components/shell-panel/shell-panel.scss | 44 +++++++++---------- .../components/shell-panel/shell-panel.tsx | 28 +++++++----- .../src/components/shell/shell.stories.ts | 28 ++++++------ .../src/demos/shell-panel.html | 17 +++---- 8 files changed, 75 insertions(+), 67 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 898c70e3fc9..4b1b94669dc 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -4425,12 +4425,12 @@ export namespace Components { */ "detached": boolean; /** - * When `displayMode` is `float-detach`, 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-detach"` 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; /** @@ -4454,7 +4454,7 @@ export namespace Components { */ "position": Extract<"start" | "end", Position>; /** - * When `true` and `displayMode` is not `float-detach`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content`, the component's content area is resizable. */ "resizable": boolean; /** @@ -12428,12 +12428,12 @@ declare namespace LocalJSX { */ "detached"?: boolean; /** - * When `displayMode` is `float-detach`, 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-detach"` 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; /** @@ -12459,7 +12459,7 @@ declare namespace LocalJSX { */ "position"?: Extract<"start" | "end", Position>; /** - * When `true` and `displayMode` is not `float-detach`, 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 fde062b7515..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" | "float-detach"; +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 838b58d7f1b..7f437f725b9 100644 --- a/packages/calcite-components/src/components/shell-panel/resources.ts +++ b/packages/calcite-components/src/components/shell-panel/resources.ts @@ -3,10 +3,11 @@ export const CSS = { content: "content", contentHeader: "content__header", contentBody: "content__body", - floatDetach: "float--detach", + 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 d425fe77079..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.floatDetach}`); + 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-detach"); + panel.setProperty("displayMode", "float-content"); await page.waitForChanges(); expect(await panel.getProperty("detached")).toBe(true); - detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatDetach}`); + 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 385f4b0d5b6..b389bc2fb6e 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`, 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`, 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`, 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`, specifies the maximum height of the component. * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component. * */ @@ -48,39 +48,39 @@ z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.header") + 1)); } -:host([layout="vertical"][display-mode="float"]) .content { +:host([layout="vertical"][display-mode="float-all"]) .content { flex: 2; } -:host([layout="vertical"][width-scale="s"]:not([display-mode="float"])) .content { +: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="s"][display-mode="float"]) .content { +: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"])) .content { +: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"]) .content { +: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"])) .content { +: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"]) .content { +: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); } @@ -121,7 +121,7 @@ @apply box-border; } - &.float { + &.float-all { margin-block: 0.5rem; margin-inline: 0.5rem; } @@ -217,13 +217,13 @@ max-inline-size var(--calcite-animation-timing); } -:host([layout="vertical"]:not([display-mode="float"])) .content { +: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"]) .content { +: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); } @@ -282,7 +282,7 @@ box-shadow: var(--calcite-internal-shell-panel-shadow-block-end); } -.float--detach { +.float--content { @apply shadow-0 mx-2 mt-2 @@ -297,12 +297,12 @@ } } -:host([layout="horizontal"]) .float--detach { +:host([layout="horizontal"]) .float--content { @apply my-2; } -:host([position="start"]) .float--detach, -:host([position="end"]) .float--detach { +:host([position="start"]) .float--content, +:host([position="end"]) .float--content { ::slotted(calcite-panel), ::slotted(calcite-flow) { @apply border-none; @@ -319,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"]):not([display-mode="float"])), +: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), @@ -337,12 +337,12 @@ slot[name="action-bar"]::slotted(calcite-action-bar), } } -:host([layout="horizontal"]:not([display-mode="float"])) 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"]:not([display-mode="float"])) .content ::slotted(calcite-flow), -:host([layout="horizontal"][position="start"]:not([display-mode="float"])) .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 df55cd3b01b..fd5f30798b4 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-detach"; - } else if (this.displayMode === "float-detach") { + 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-detach"` 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-detach"; + this.detached = value === "float-content" || value === "float"; } /** - * When `displayMode` is `float-detach`, specifies the maximum height of the component. + * When `displayMode` is `float-content`, 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-detach`, the component's content area is resizable. + * When `true` and `displayMode` is not `float-content`, 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-detach" && 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.floatDetach]: displayMode === "float-detach", + [CSS.floatContent]: displayMode === "float-content" || displayMode === "float", [CSS_UTILITY.calciteAnimate]: displayMode === "overlay", [getAnimationDir()]: displayMode === "overlay", }} @@ -360,7 +364,9 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, } return ( -
{mainNodes}
+
+ {mainNodes} +
); } diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index 8bf5d09701b..03f87de38f2 100644 --- a/packages/calcite-components/src/components/shell/shell.stories.ts +++ b/packages/calcite-components/src/components/shell/shell.stories.ts @@ -360,7 +360,7 @@ darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault }; export const closedPanels = (): string => html(` - + @@ -403,7 +403,7 @@ background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; " > - + @@ -741,7 +741,7 @@ export const slottedSheetFloat = (): string => " >
Header Example
- +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et @@ -868,7 +868,7 @@ export const contentBehindPanelBottom = (): string => linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;"> - ${bottomPanelHTML} + ${bottomPanelHTML} `); @@ -1409,7 +1409,7 @@ export const panelTopFloatHorizontal_TestOnly = (): string => layout="horizontal" slot="panel-top" position="start" - display-mode="float" + display-mode="float-all" width-scale="m" calcite-hydrated="" > @@ -1471,14 +1471,14 @@ export const panelTopFloatHorizontal_TestOnly = (): string => dock - float-detachfloat content overlay - floatfloat all @@ -1501,7 +1501,7 @@ export const panelTopFloatVertical_TestOnly = (): string => layout="vertical" slot="panel-top" position="start" - display-mode="float" + display-mode="float-all" width-scale="m" calcite-hydrated="" > @@ -1604,14 +1604,14 @@ export const panelTopFloatVertical_TestOnly = (): string => dock - float-detachfloat content overlay - floatfloat all diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html index 497475cb4b4..5b7defea4ae 100644 --- a/packages/calcite-components/src/demos/shell-panel.html +++ b/packages/calcite-components/src/demos/shell-panel.html @@ -137,9 +137,9 @@ dock - float-detach + float content overlay - float + float all

@@ -184,9 +184,9 @@ dock - float-detach + float content overlay - float + float all @@ -219,9 +219,10 @@ dock - float-detach - overlay + float content float + overlay + float all Vertical @@ -258,9 +259,9 @@ dock - float-detach + float content overlay - float + float all From dd6c2f677962b0e872cc5f2a59587273c51905d8 Mon Sep 17 00:00:00 2001 From: Jose Carcamo Date: Mon, 29 Jul 2024 17:43:57 -0700 Subject: [PATCH 17/17] Made tests for float and float-content --- .../components/shell-panel/shell-panel.scss | 8 +- .../components/shell-panel/shell-panel.tsx | 4 +- .../src/components/shell/shell.stories.ts | 126 ++++++++++-------- 3 files changed, 77 insertions(+), 61 deletions(-) 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 b389bc2fb6e..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-content`, 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`, 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`, 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`, 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. * */ 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 fd5f30798b4..eaca7014097 100755 --- a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx +++ b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx @@ -95,7 +95,7 @@ export class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, } /** - * When `displayMode` is `float-content`, 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. */ @@ -138,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-content`, 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; diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts index 03f87de38f2..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(`