Skip to content

Commit

Permalink
feat(shell): Add "Sheets" Slot (#7579)
Browse files Browse the repository at this point in the history 
**Related Issue:** #7154

## Summary

- depends on #7561
- Adds `sheets` slot to the shell where users can place `calcite-sheet`
components
- Adds screenshot test
- Adds example HTML

cc @macandcheese

---------

Co-authored-by: Adam <adam@tirel.la>
  • Loading branch information
@driskull @macandcheese
driskull and macandcheese committed Aug 28, 2023
1 parent 2a9fb33 commit e798765
Show file tree
Hide file tree
Showing 5 changed files with 236 additions and 6 deletions.
21 changes: 15 additions & 6 deletions packages/calcite-components/src/components/sheet/sheet.scss
View file
Expand Up @@ -69,19 +69,22 @@
--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0);
}

:host([display-mode="float"][position="inline-start"]) .container {
:host([display-mode="float"]) .container {
@apply shadow-2;
}
:host([display-mode="overlay"][position="inline-start"]) .container {
box-shadow: var(--calcite-scrim-shadow-inline-start-internal);
}

:host([display-mode="float"][position="inline-end"]) .container {
:host([display-mode="overlay"][position="inline-end"]) .container {
box-shadow: var(--calcite-scrim-shadow-inline-end-internal);
}

:host([display-mode="float"][position="block-start"]) .container {
:host([display-mode="overlay"][position="block-start"]) .container {
box-shadow: var(--calcite-scrim-shadow-block-start-internal);
}

:host([display-mode="float"][position="block-end"]) .container {
:host([display-mode="overlay"][position="block-end"]) .container {
box-shadow: var(--calcite-scrim-shadow-block-end-internal);
}

Expand Down Expand Up @@ -176,7 +179,7 @@
}

:host([display-mode="float"]) .container {
@apply m-3;
@apply p-3;
}

.container--open {
Expand Down Expand Up @@ -205,8 +208,14 @@
/**
* Conditional styles for when Sheet is slotted in Shell
*/
.container--slotted-in-shell {
:host([position]) .container--slotted-in-shell {
@apply absolute pointer-events-auto;
inline-size: 100%;
max-inline-size: 100%;
min-inline-size: 100%;
block-size: 100%;
max-block-size: 100%;
min-block-size: 100%;
calcite-scrim {
@apply absolute;
}
Expand Down
1 change: 1 addition & 0 deletions packages/calcite-components/src/components/shell/resources.ts
View file
Expand Up @@ -17,5 +17,6 @@ export const SLOTS = {
header: "header",
footer: "footer",
alerts: "alerts",
sheets: "sheets",
modals: "modals",
};
182 changes: 182 additions & 0 deletions packages/calcite-components/src/components/shell/shell.stories.ts
View file
Expand Up @@ -628,6 +628,188 @@ export const slottedModalAndAlert = (): string =>
</p>
</main>`);

export const slottedSheetOverlay = (): string =>
html(`
<p class="padded-content">
<calcite-notice width="full" open><span slot="title">Other page content outside of shell</span></calcite-notice>
Master cleanse occupy lo-fi meh. Green juice williamsburg XOXO man bun ascot fit. Knausgaard heirloom four dollar
toast DSA chicharrones, typewriter chia raw denim. Bicycle rights mustache humblebrag, mixtape slow-carb retro
vibecession franzen chia. Bespoke coloring book hot chicken literally bushwick succulents wayfarers. Dreamcatcher
taiyaki celiac pork belly migas, fashion axe beard shabby chic. Forage chia twee bushwick readymade yuccie praxis
enamel pin cred mukbang bicycle rights VHS iPhone pour-over subway tile.
</p>
<calcite-shell
style="
width:100%;
height:500px;
max-height:80%;
position:relative;
"
>
<div class="gnav" slot="header">Header Example</div>
<calcite-sheet open slot="sheets" label="libero nunc" position="inline-start" display-mode="overlay">
<calcite-panel closable heading="Ultrices neque"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button>
<calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
</calcite-panel>
</calcite-sheet>
<calcite-shell-panel id="primary-panel" slot="panel-start" position="start">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
<calcite-action text="Save" icon="save" indicator> </calcite-action>
<calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
<calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action icon="layers" text="Layers" active> </calcite-action>
<calcite-action icon="basemap" text="Basemaps"> </calcite-action>
<calcite-action icon="legend" text="Legend"> </calcite-action>
<calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-panel heading="Panel">
<div class="padded-content">Panel content<br />Padding is fake.</div>
</calcite-panel>
</calcite-shell-panel>
<calcite-shell-panel slot="panel-end" position="end">
<calcite-action-bar slot="action-bar">
<calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
<calcite-action-group>
<calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
<calcite-action text="Styles" icon="shapes"> </calcite-action>
<calcite-action text="Filter" icon="layer-filter"> </calcite-action>
<calcite-action text="Configure pop-ups" icon="popup" active> </calcite-action>
<calcite-action text-enabled text="Configure attributes" icon="feature-details" slot="menu-actions">
</calcite-action>
<calcite-action text-enabled text="Labels" icon="label" slot="menu-actions"> </calcite-action>
<calcite-action text-enabled text="Tablew" icon="table" slot="menu-actions"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-flow>
<calcite-flow-item heading="Flow 01">
<div class="padded-content">Flow 01 content<br />Padding is fake.</div>
</calcite-flow-item>
<calcite-flow-item heading="Flow 02">
<div class="padded-content">Flow 02 content<br />Padding is fake.</div>
</calcite-flow-item>
</calcite-flow>
</calcite-shell-panel>
<calcite-panel heading="Main content">
<div class="padded-content">The borders are only applied to "known" components.<br />Padding is fake.</div>
</calcite-panel>
<footer slot="footer">Footer Example</footer>
</calcite-shell>
<p class="padded-content">
<calcite-notice width="full" open><span slot="title">Notice outside of shell</span></calcite-notice>
Edison bulb iceland narwhal fit DSA. Activated charcoal dreamcatcher shabby chic, microdosing gluten-free locavore
chambray tumblr hella sus ugh cronut tofu. Vibecession air plant etsy, vape church-key narwhal activated charcoal
offal kombucha hella. Actually mumblecore butcher, iceland man bun prism blog taiyaki roof party portland hashtag.
</p>
<script>
document.addEventListener("calcitePanelClose", () => {
document.querySelector("calcite-sheet").open = false;
});
</script>
`);

export const slottedSheetFloat = (): string =>
html(`
<p class="padded-content">
<calcite-notice width="full" open><span slot="title">Other page content outside of shell</span></calcite-notice>
Master cleanse occupy lo-fi meh. Green juice williamsburg XOXO man bun ascot fit. Knausgaard heirloom four dollar
toast DSA chicharrones, typewriter chia raw denim. Bicycle rights mustache humblebrag, mixtape slow-carb retro
vibecession franzen chia. Bespoke coloring book hot chicken literally bushwick succulents wayfarers. Dreamcatcher
taiyaki celiac pork belly migas, fashion axe beard shabby chic. Forage chia twee bushwick readymade yuccie praxis
enamel pin cred mukbang bicycle rights VHS iPhone pour-over subway tile.
</p>
<calcite-shell
style="
width:100%;
height:500px;
max-height:80%;
position:relative;
"
>
<div class="gnav" slot="header">Header Example</div>
<calcite-sheet open slot="sheets" label="libero nunc" position="inline-start" display-mode="float">
<calcite-panel closable heading="Ultrices neque"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button>
<calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
</calcite-panel>
</calcite-sheet>
<calcite-shell-panel id="primary-panel" slot="panel-start" position="start">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
<calcite-action text="Save" icon="save" indicator> </calcite-action>
<calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
<calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action icon="layers" text="Layers" active> </calcite-action>
<calcite-action icon="basemap" text="Basemaps"> </calcite-action>
<calcite-action icon="legend" text="Legend"> </calcite-action>
<calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-panel heading="Panel">
<div class="padded-content">Panel content<br />Padding is fake.</div>
</calcite-panel>
</calcite-shell-panel>
<calcite-shell-panel slot="panel-end" position="end">
<calcite-action-bar slot="action-bar">
<calcite-tooltip slot="expand-tooltip" label="tooltip" disable-pointer>Add layers</calcite-tooltip>
<calcite-action-group>
<calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
<calcite-action text="Styles" icon="shapes"> </calcite-action>
<calcite-action text="Filter" icon="layer-filter"> </calcite-action>
<calcite-action text="Configure pop-ups" icon="popup" active> </calcite-action>
<calcite-action text-enabled text="Configure attributes" icon="feature-details" slot="menu-actions">
</calcite-action>
<calcite-action text-enabled text="Labels" icon="label" slot="menu-actions"> </calcite-action>
<calcite-action text-enabled text="Tablew" icon="table" slot="menu-actions"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
<calcite-flow>
<calcite-flow-item heading="Flow 01">
<div class="padded-content">Flow 01 content<br />Padding is fake.</div>
</calcite-flow-item>
<calcite-flow-item heading="Flow 02">
<div class="padded-content">Flow 02 content<br />Padding is fake.</div>
</calcite-flow-item>
</calcite-flow>
</calcite-shell-panel>
<calcite-panel heading="Main content">
<div class="padded-content">The borders are only applied to "known" components.<br />Padding is fake.</div>
</calcite-panel>
<footer slot="footer">Footer Example</footer>
</calcite-shell>
<p class="padded-content">
<calcite-notice width="full" open><span slot="title">Notice outside of shell</span></calcite-notice>
Edison bulb iceland narwhal fit DSA. Activated charcoal dreamcatcher shabby chic, microdosing gluten-free locavore
chambray tumblr hella sus ugh cronut tofu. Vibecession air plant etsy, vape church-key narwhal activated charcoal
offal kombucha hella. Actually mumblecore butcher, iceland man bun prism blog taiyaki roof party portland hashtag.
</p>
<script>
document.addEventListener("calcitePanelClose", () => {
document.querySelector("calcite-sheet").open = false;
});
</script>
`);

export const contentBehind = (): string =>
html(`<calcite-shell content-behind>
${headerHTML}
Expand Down
21 changes: 21 additions & 0 deletions packages/calcite-components/src/components/shell/shell.tsx
View file
Expand Up @@ -18,6 +18,7 @@ import { CSS, SLOTS } from "./resources";
* @slot center-row - [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.
* @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
* @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
* @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
*/

@Component({
Expand Down Expand Up @@ -53,6 +54,8 @@ export class Shell implements ConditionalSlotComponent {

@State() hasModals = false;

@State() hasSheets = false;

// --------------------------------------------------------------------------
//
// Lifecycle
Expand Down Expand Up @@ -90,6 +93,15 @@ export class Shell implements ConditionalSlotComponent {
});
};

handleSheetsSlotChange = (event: Event): void => {
this.hasSheets = !!slotChangeHasAssignedElement(event);
slotChangeGetAssignedElements(event)?.map((el) => {
if (el.nodeName === "CALCITE-SHEET") {
(el as HTMLCalciteSheetElement).slottedInShell = true;
}
});
};

handleModalsSlotChange = (event: Event): void => {
this.hasModals = !!slotChangeHasAssignedElement(event);
slotChangeGetAssignedElements(event)?.map((el) => {
Expand Down Expand Up @@ -129,6 +141,14 @@ export class Shell implements ConditionalSlotComponent {
);
}

renderSheets(): VNode {
return (
<div hidden={!this.hasSheets}>
<slot key="sheets" name={SLOTS.sheets} onSlotchange={this.handleSheetsSlotChange} />
</div>
);
}

renderModals(): VNode {
return (
<div hidden={!this.hasModals}>
Expand Down Expand Up @@ -191,6 +211,7 @@ export class Shell implements ConditionalSlotComponent {
<div class={CSS.positionedSlotWrapper}>
{this.renderAlerts()}
{this.renderModals()}
{this.renderSheets()}
</div>
);
}
Expand Down
17 changes: 17 additions & 0 deletions packages/calcite-components/src/demos/shell/basic-slotted-elements.html
View file
Expand Up @@ -47,6 +47,19 @@
<calcite-alert open slot="alerts" placement="top-end"
><span slot="title">Alert slotted in Shell</span>
</calcite-alert>
<calcite-sheet open slot="sheets" label="libero nunc" position="inline-start" display-mode="overlay">
<calcite-panel closable heading="Ultrices neque"
><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
<calcite-button slot="footer" width="half" appearance="outline">tincidunt lobortis</calcite-button>
<calcite-button slot="footer" width="half" appearance="outline">amet porttitor</calcite-button>
</calcite-panel>
</calcite-sheet>
<calcite-shell-panel id="primary-panel" slot="panel-start" position="start">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
Expand Down Expand Up @@ -243,6 +256,10 @@ <h3 slot="header">Test custom modal sizes in slotted modal in shell</h3>
customSizeModal.style.setProperty("--calcite-modal-height", heightInput.value);
customSizeModal.style.setProperty("--calcite-modal-width", widthInput.value);
});

document.addEventListener("calcitePanelClose", () => {
document.querySelector("calcite-sheet").open = false;
});
</script>
</body>
</html>

0 comments on commit e798765

Please sign in to comment.