Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(panel): add content-top slot #9293

Merged
merged 8 commits into from
May 10, 2024
Merged

feat(panel): add content-top slot #9293

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b191268
feat(panel): add content-top slot
Elijbet May 9, 2024
1a43cb9
story
Elijbet May 9, 2024
f76e384
styling
Elijbet May 9, 2024
e402113
cleanup
Elijbet May 10, 2024
92521ba
cleanup
Elijbet May 10, 2024
5768cf0
clear docs vergiage
Elijbet May 10, 2024
c3dddca
merge
Elijbet May 10, 2024
ca14241
remove accidentally added file
Elijbet May 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions packages/calcite-components/src/components/panel/panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,25 @@

@import "../../assets/styles/header";

:host([scale="s"]) .content-top {
padding: var(--calcite-spacing-sm);
}

:host([scale="m"]) .content-top {
padding: var(--calcite-spacing-md);
}

:host([scale="l"]) .content-top {
padding: var(--calcite-spacing-xl);
}

.content-top {
@apply flex items-start self-stretch;

padding: var(--calcite-spacing-md);
border-block-start: 1px solid var(--calcite-color-border-3);
}

.container {
@apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;

Expand All @@ -31,8 +50,7 @@
}

.header {
@apply bg-foreground-1 flex flex-col
z-header;
@apply bg-foreground-1 flex flex-col z-header;
border-block-end: var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3));
}

Expand Down
19 changes: 19 additions & 0 deletions packages/calcite-components/src/components/panel/panel.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,3 +440,22 @@ export const withNoHeaderBorderBlockEnd_TestOnly = (): string =>
html`<calcite-panel style="--calcite-panel-header-border-block-end:none;" height-scale="s" heading="My Panel"
>Slotted content!</calcite-panel
>`;

export const contentTopSlot = (): string => html`
<div style="height: 300px; width: 400px; display: flex">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this outer element needed for the content-top slot screenshot?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The outer element is there to restrict the height of the panel so we can see how scrolling of the slotted content affects the header (it should be sticky).

<calcite-panel height-scale="s">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
<calcite-action text="Add" icon="plus"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
<div slot="content-top">Slot for a content-top.</div>
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p style="height: 400px">Hello world!</p>
<p slot="footer">Slotted content!</p>
</calcite-panel>
</div>
`;
16 changes: 16 additions & 0 deletions packages/calcite-components/src/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot - A slot for adding custom content.
* @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
* @slot content-top - A slot for adding the component's content header.
Elijbet marked this conversation as resolved.
Show resolved Hide resolved
* @slot header-actions-start - A slot for adding actions or content to the start side of the header.
* @slot header-actions-end - A slot for adding actions or content to the end side of the header.
* @slot header-content - A slot for adding custom content to the header.
Expand Down Expand Up @@ -207,6 +208,8 @@ export class Panel

@State() hasActionBar = false;

@State() hasContentTop = false;

@State() hasFooterContent = false;

@State() hasFooterActions = false;
Expand Down Expand Up @@ -328,6 +331,10 @@ export class Panel
this.hasFab = slotChangeHasAssignedElement(event);
};

private contentTopSlotChangeHandler = (event: Event): void => {
this.hasContentTop = slotChangeHasAssignedElement(event);
};

// --------------------------------------------------------------------------
//
// Methods
Expand Down Expand Up @@ -540,6 +547,7 @@ export class Panel
{this.renderHeaderActionsEnd()}
</div>
{this.renderActionBar()}
{this.renderContentTop()}
</header>
);
}
Expand Down Expand Up @@ -586,6 +594,14 @@ export class Panel
);
}

renderContentTop(): VNode {
return (
<div class={CSS.contentTop} hidden={!this.hasContentTop}>
<slot name={SLOTS.contentTop} onSlotchange={this.contentTopSlotChangeHandler} />
</div>
);
}

renderFab(): VNode {
return (
<div class={CSS.fabContainer} hidden={!this.hasFab}>
Expand Down
2 changes: 2 additions & 0 deletions packages/calcite-components/src/components/panel/resources.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export const CSS = {
actionBarContainer: "action-bar-container",
backButton: "back-button",
container: "container",
contentTop: "content-top",
header: "header",
headerContainer: "header-container",
headerContainerBorderEnd: "header-container--border-end",
Expand All @@ -28,6 +29,7 @@ export const ICONS = {

export const SLOTS = {
actionBar: "action-bar",
contentTop: "content-top",
headerActionsStart: "header-actions-start",
headerActionsEnd: "header-actions-end",
headerMenuActions: "header-menu-actions",
Expand Down
7 changes: 4 additions & 3 deletions packages/calcite-components/src/demos/panel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@
</div>
</div>

<!-- with action bar -->
<!-- with action bar and content top-->
<div class="parent">
<div class="child right-aligned-text">Slotted Action Bar</div>
<div class="child right-aligned-text">Slotted Action Bar + Slotted Content Top</div>
<div class="child">
<div style="height: 200px; display: flex">
<div style="height: 300px; width: 400px; display: flex">
<calcite-panel height-scale="s">
<calcite-action-bar slot="action-bar">
<calcite-action-group>
Expand All @@ -74,6 +74,7 @@
<calcite-action text="Layers" icon="layers"> </calcite-action>
</calcite-action-group>
</calcite-action-bar>
<div slot="content-top">Slot for a content-top.</div>
<div slot="header-content">Header!</div>
<p>Slotted content!</p>
<p style="height: 400px">Hello world!</p>
Expand Down
Loading