refactor(shell-panel)!: remove deprecated properties (#10794)

**Related Issue:** #9173 ## Summary BREAKING CHANGE: Removes the following deprecated properties from `calcite-shell-panel`: `detachedHeightScale`, `detached` and the `--calcite-shell-panel-detached-max-height` CSS property. Developers will need to replace `calcite-shell-panel`'s `detachedHeightScale` and `detached` properties with `heightScale` and `displayMode`.
Esri · Nov 20, 2024 · 8254164 · 8254164
1 parent 22f4c0f
commit 8254164
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 64 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
@@ -25,10 +25,6 @@ describe("calcite-shell-panel", () => {
         propertyName: "resizable",
         defaultValue: false,
       },
-      {
-        propertyName: "detached",
-        defaultValue: false,
-      },
       {
         propertyName: "displayMode",
         defaultValue: "dock",
@@ -144,7 +140,7 @@ describe("calcite-shell-panel", () => {
     `);
   });
 
-  it("should have detached class when detached", async () => {
+  it("should have floatContent class when detached", async () => {
     const page = await newE2EPage();
 
     await page.setContent("<calcite-shell-panel><div>content</div></calcite-shell-panel>");
@@ -155,14 +151,10 @@ describe("calcite-shell-panel", () => {
 
     const panel = await page.find("calcite-shell-panel");
 
-    expect(await panel.getProperty("detached")).toBe(false);
-
     panel.setProperty("displayMode", "float-content");
 
     await page.waitForChanges();
 
-    expect(await panel.getProperty("detached")).toBe(true);
-
     detachedElement = await page.find(`calcite-shell-panel >>> .${CSS.floatContent}`);
 
     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
@@ -9,7 +9,6 @@
  * @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.
  *
  */
@@ -21,7 +20,6 @@
     flex-initial
     items-stretch;
   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-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);
@@ -86,25 +84,16 @@
 }
 
 :host([layout="horizontal"][height-scale="s"]) .content {
-  --calcite-internal-shell-panel-max-height: var(
-    --calcite-shell-panel-max-height,
-    var(--calcite-shell-panel-detached-max-height, 20vh)
-  );
+  --calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 20vh);
 }
 
 :host([layout="horizontal"]) .content {
   --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)
-  );
+  --calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh);
 }
 
 :host([layout="horizontal"][height-scale="l"]) .content {
-  --calcite-internal-shell-panel-max-height: var(
-    --calcite-shell-panel-max-height,
-    var(--calcite-shell-panel-detached-max-height, 40vh)
-  );
+  --calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 40vh);
 }
 
 .container {

diff --git a/packages/calcite-components/src/components/shell-panel/shell-panel.tsx b/packages/calcite-components/src/components/shell-panel/shell-panel.tsx
@@ -158,20 +158,6 @@ export class ShellPanel extends LitElement {
   /** When `true`, hides the component's content area. */
   @property({ reflect: true }) collapsed = false;
 
-  /**
-   * When `true`, the content area displays like a floating panel.
-   *
-   * @deprecated Use `displayMode` instead.
-   */
-  @property({ reflect: true }) detached = false;
-
-  /**
-   * When `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
-   *
-   * @deprecated Use `heightScale` instead.
-   */
-  @property({ reflect: true }) detachedHeightScale: Scale;
-
   /**
    * Specifies the display mode of the component, where:
    *
@@ -231,22 +217,6 @@ export class ShellPanel extends LitElement {
     To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method
     Please refactor your code to reduce the need for this check.
     Docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-transition-from-stencil--docs#watching-for-property-changes */
-    if (changes.has("detached") && (this.hasUpdated || this.detached !== false)) {
-      this.handleDetached(this.detached);
-    }
-
-    if (changes.has("displayMode") && (this.hasUpdated || this.displayMode !== "dock")) {
-      this.detached = this.displayMode === "float-content" || this.displayMode === "float";
-    }
-
-    if (changes.has("detachedHeightScale")) {
-      this.heightScale = this.detachedHeightScale;
-    }
-
-    if (changes.has("heightScale")) {
-      this.detachedHeightScale = this.heightScale;
-    }
-
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.setActionBarsLayout(this.actionBars);
     }
@@ -264,14 +234,6 @@ export class ShellPanel extends LitElement {
 
   // #region Private Methods
 
-  private handleDetached(value: boolean): void {
-    if (value) {
-      this.displayMode = "float-content";
-    } else if (this.displayMode === "float-content" || this.displayMode === "float") {
-      this.displayMode = "dock";
-    }
-  }
-
   private setContentWidth(width: number): void {
     const { contentWidthMax, contentWidthMin } = this;
 
@@ -301,12 +263,12 @@ export class ShellPanel extends LitElement {
   private setContentHeight(height: number): void {
     const { contentHeightMax, contentHeightMin } = this;
 
-    const roundedWidth = Math.round(height);
+    const roundedHeight = Math.round(height);
 
     this.contentHeight =
       typeof contentHeightMax === "number" && typeof contentHeightMin === "number"
-        ? clamp(roundedWidth, contentHeightMin, contentHeightMax)
-        : roundedWidth;
+        ? clamp(roundedHeight, contentHeightMin, contentHeightMax)
+        : roundedHeight;
   }
 
   private updateWidths(computedStyle: CSSStyleDeclaration): void {