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`.
Esri · Dec 7, 2023 · 161502a · 161502a
1 parent 5953ada
commit 161502a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 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
@@ -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
@@ -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>`;