From 2d1a1e2064e8a8163f03112c28ed6f6b0cdd36e6 Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Thu, 7 Dec 2023 12:31:17 -0600
Subject: [PATCH] fix(shell-panel): adds border at the start when slotted in
 `panel-end` (#8314)

**Related Issue:** #7929

## Summary

Adds border to the `calcite-shell-panel` when slotted in `panel-end` of
`calcite-shell`.
---
 .../components/shell-panel/shell-panel.scss   | 22 ++++++++++------
 .../src/components/shell/shell.stories.ts     | 26 +++++++++++++++++++
 2 files changed, 40 insertions(+), 8 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 d5ff56678dd..1a100f98ee8 100755
--- a/packages/calcite-components/src/components/shell-panel/shell-panel.scss
+++ b/packages/calcite-components/src/components/shell-panel/shell-panel.scss
@@ -288,16 +288,22 @@ slot[name="action-bar"]::slotted(calcite-action-bar),
   @apply border-color-3 border border-solid;
 }
 
-:host([position="start"]) slot[name="action-bar"]::slotted(calcite-action-bar),
-:host([position="start"]) .content ::slotted(calcite-flow),
-:host([position="start"]) .content ::slotted(calcite-panel) {
-  border-inline-start: none;
+:host([position="start"]:not([slot="panel-end"])),
+:host([position="end"][slot="panel-start"]) {
+  slot[name="action-bar"]::slotted(calcite-action-bar),
+  .content ::slotted(calcite-flow),
+  .content ::slotted(calcite-panel) {
+    border-inline-start: none;
+  }
 }
 
-:host([position="end"]) slot[name="action-bar"]::slotted(calcite-action-bar),
-:host([position="end"]) .content ::slotted(calcite-flow),
-:host([position="end"]) .content ::slotted(calcite-panel) {
-  border-inline-end: none;
+:host([position="end"]:not([slot="panel-start"])),
+:host([position="start"][slot="panel-end"]) {
+  slot[name="action-bar"]::slotted(calcite-action-bar),
+  .content ::slotted(calcite-flow),
+  .content ::slotted(calcite-panel) {
+    border-inline-end: none;
+  }
 }
 
 :host([layout="horizontal"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
diff --git a/packages/calcite-components/src/components/shell/shell.stories.ts b/packages/calcite-components/src/components/shell/shell.stories.ts
index 44d69ccf256..a7b5d479128 100644
--- a/packages/calcite-components/src/components/shell/shell.stories.ts
+++ b/packages/calcite-components/src/components/shell/shell.stories.ts
@@ -1323,3 +1323,29 @@ position:relative;
 overlayDisplayMode_TestOnly.parameters = {
   chromatic: { delay: 500 },
 };
+
+export const panelEndWithPositionStart_TestOnly = (): string => html`<calcite-shell>
+  <calcite-shell-panel slot="panel-end" width-scale="l" position="start" display-mode="block" resizable>
+    <calcite-action-bar slot="action-bar">
+      <calcite-action text="Save" icon="save" indicator></calcite-action>
+      <calcite-action active icon="map" text="Map"></calcite-action>
+      <calcite-action icon="layer" text="Layer"></calcite-action>
+    </calcite-action-bar>
+    <calcite-panel heading="Map Options">
+      <calcite-button width="half" slot="footer"> Next </calcite-button>
+      <calcite-block collapsible heading="Layer effects" description="Adjust blur, highlight, and more">
+        <calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
+        <calcite-notice open>
+          <div slot="message">Use layer effects sparingly, for emphasis</div>
+        </calcite-notice>
+      </calcite-block>
+      <calcite-block collapsible heading="Symbology" description="Select type, color, and transparency">
+        <calcite-icon scale="s" slot="icon" icon="map-pin"></calcite-icon>
+        <calcite-notice open>
+          <div slot="message">The viewers are going to love this</div>
+        </calcite-notice>
+      </calcite-block>
+      <calcite-fab slot="fab"></calcite-fab>
+    </calcite-panel>
+  </calcite-shell-panel>
+</calcite-shell>`;