feat(shell-panel): deprecate float displayMode and add float-content and float-all

packages/calcite-components/src/components.d.ts

@@ -4311,6 +4311,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.
          */
@@ -4321,12 +4325,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;
         /**
@@ -4346,11 +4350,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;
         /**
@@ -12326,6 +12326,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.
          */
@@ -12336,12 +12340,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;
         /**
@@ -12363,11 +12367,7 @@ declare namespace LocalJSX {
         "onCalciteInternalShellPanelResizeEnd"?: (event: CalciteShellPanelCustomEvent<void>) => void;
         "onCalciteInternalShellPanelResizeStart"?: (event: CalciteShellPanelCustomEvent<void>) => 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;
         /**

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();

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({

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";

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 = {

packages/calcite-components/src/components/shell-panel/shell-panel.e2e.ts

@@ -147,7 +147,7 @@ describe("calcite-shell-panel", () => {
 
     await page.setContent("<calcite-shell-panel><div>content</div></calcite-shell-panel>");
 
-    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();
   });

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;
 }