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` + + + + + + + + Next + + + +
Use layer effects sparingly, for emphasis
+
+
+ + + +
The viewers are going to love this
+
+
+ +
+
+
`;