Skip to content

Commit

Permalink
Merge branch 'epic/7180-component-tokens' into macandcheese/token-upd…
Browse files Browse the repository at this point in the history 
…ate-chip
  • Loading branch information
@macandcheese
macandcheese committed Feb 12, 2024
2 parents d5af0a3 + 94b090b commit a683f26
Show file tree
Hide file tree
Showing 2 changed files with 163 additions and 64 deletions.
184 changes: 120 additions & 64 deletions packages/calcite-components/src/components/panel/panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,130 +3,186 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
* @prop --calcite-panel-header-border-block-end: Specifies the component header's block end border.
* @prop --calcite-panel-background-color: Specifies the background color of the component.
* @prop --calcite-panel-border-color: Specifies the border color of the component.
* @prop --calcite-panel-description-text-color: Specifies the text color of the component's description.
* @prop --calcite-panel-fab-z-index: Specifies the component fab's z-index.
* @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
* @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
* @prop --calcite-panel-footer-space: Specifies the spacing of the component's footer.
* @prop --calcite-panel-header-background-color: Specifies the component header's background color.
* @prop --calcite-panel-header-border-block-end: [Deprecated] No longer necessary. Specifies the component header's block end border.
* @prop --calcite-panel-header-color: [Deprecated] Use `--calcite-panel-heading-text-color` instead. Specifies the component header's color.
* @prop --calcite-panel-heading-text-color: Specifies the component's heading text color.
* @prop --calcite-panel-header-z-index: Specifies the component header's z-index.
*/

:host {
@extend %component-host;
@apply relative flex w-full h-full flex-auto;
position: relative;
display: flex;
inline-size: var(--calcite-container-size-content-fluid);
block-size: var(--calcite-container-size-content-fluid);
flex: 1 1 auto;
--calcite-internal-panel-transition: max-block-size var(--calcite-animation-timing),
inline-size var(--calcite-animation-timing);

--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
--calcite-panel-background-color: var(--calcite-color-background);
--calcite-panel-border-color: var(--calcite-color-border-3);
--calcite-panel-description-text-color: var(--calcite-color-text-2);
--calcite-panel-fab-z-index: var(--calcite-z-index-sticky);
--calcite-panel-footer-background-color: var(--calcite-color-foreground-1);
--calcite-panel-footer-space: var(--calcite-panel-footer-padding, var(--calcite-spacing-xxs));
--calcite-panel-heading-text-color: var(--calcite-panel-header-color, var(--calcite-color-text-2));
--calcite-panel-header-background-color: var(--calcite-color-foreground-1);
--calcite-panel-header-z-index: var(--calcite-z-index-header);
--calcite-panel-header-border-width: var(--calcite-border-width-sm);
--calcite-panel-header-border-block-end: var(--calcite-border-width-sm) solid var(--calcite-panel-border-color);
}

@include disabled();

@import "../../assets/styles/header";
.header {
color: var(--calcite-panel-heading-text-color);
margin: 0;
align-content: space-between;
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
z-index: var(--calcite-panel-header-z-index);
background-color: var(--calcite-panel-header-background-color);
border-block-end: var(
--calcite-panel-header-border-block-end,
var(--calcite-panel-header-border-width) solid var(--calcite-panel-border-color)
);
}

.container {
@apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
.heading {
margin: 0;
padding: 0;
font-weight: var(--calcite-font-weight-medium);
}

transition:
max-block-size var(--calcite-animation-timing),
inline-size var(--calcite-animation-timing);
.header .heading {
flex: 1 1 auto;
padding: var(--calcite-spacing-xxs);
}

.container[hidden] {
@apply hidden;
.container {
background-color: var(--calcite-panel-background-color);
margin: 0;
display: flex;
inline-size: var(--calcite-container-size-content-fluid);
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
padding: 0;
transition: var(--calcite-internal-panel-transition);
}

.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));
.container[hidden] {
display: none;
}

.header-container {
@apply flex flex-row w-full
items-stretch
justify-start;
display: flex;
flex-direction: row;
inline-size: var(--calcite-container-size-content-fluid);
align-items: stretch;
justify-content: flex-start;
flex: 0 0 auto;
}

.header-container--border-end {
border-block-end: 1px solid var(--calcite-color-border-3);
border-block-end: var(--calcite-border-width-sm) solid var(--calcite-panel-border-color);
}

.action-bar-container {
@apply w-full;
inline-size: var(--calcite-container-size-content-fluid);
}

.action-bar-container ::slotted(calcite-action-bar) {
@apply w-full;
inline-size: var(--calcite-container-size-content-fluid);
}

.header-content {
@apply flex
flex-col
overflow-hidden
px-3
py-3.5;
flex-direction: column;
display: flex;
overflow: hidden;
padding-inline: var(--calcite-spacing-sm);
padding-block: var(--calcite-spacing-md);
margin-inline-end: auto;
.heading,
.description {
@apply block
break-words
p-0;
display: block;
overflow-wrap: break-word;
padding: 0;
}
.heading {
@apply text-0h mx-0 mt-0 mb-1 font-medium;
margin-inline: 0px;
margin-block: 0px var(--calcite-spacing-xxs);
font-weight: var(--calcite-font-weight-medium);
font-size: var(--calcite-font-size-0);
line-height: var(--calcite-font-line-height-relative-tight);
&:only-child {
@apply mb-0;
margin-block-end: 0;
}
}
.description {
@apply text-color-2 text-n1h;
color: var(--calcite-panel-description-text-color);
font-size: var(--calcite-font-size--1);
line-height: var(--calcite-font-line-height-relative);
}
}

.back-button {
@apply border-color-3
border-0
border-solid;
border-inline-end-width: theme("borderWidth.DEFAULT");
border-color: var(--calcite-panel-border-color);
border-style: solid;
border-width: 0px;
border-inline-end-width: var(--calcite-border-width-sm);
}

.header-actions {
@apply flex
flex-row
flex-nowrap
items-stretch;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
}

.header-actions--end {
margin-inline-start: theme("margin.auto");
margin-inline-start: "auto";
}

.content-wrapper {
@apply flex
flex-auto
flex-col
flex-nowrap
items-stretch
bg-background
overflow-auto
h-full;
display: flex;
flex: 1 1 auto;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
background-color: var(--calcite-panel-background-color);
overflow: auto;
block-size: var(--calcite-container-size-content-fluid);
}

.footer {
@apply bg-foreground-1
flex
w-full
justify-evenly;

background-color: var(--calcite-panel-footer-background-color);
inline-size: var(--calcite-container-size-content-fluid);
display: flex;
justify-content: space-evenly;
flex: 0 0 auto;
padding: var(--calcite-panel-footer-padding, theme("spacing.2"));
border-block-start: 1px solid var(--calcite-color-border-3);
padding: var(--calcite-panel-footer-space);
border-block-start: var(--calcite-border-width-sm) solid var(--calcite-panel-border-color);
}

.fab-container {
@apply sticky
bottom-0
my-0
mx-auto
block
p-2
z-sticky;
position: sticky;
inset-block-end: 0;
margin-inline: auto;
margin-block: 0;
display: block;
z-index: var(--calcite-panel-fab-z-index);
padding: var(--calcite-spacing-xxs);
inset-inline: 0;
inline-size: fit-content;
}
Expand Down
43 changes: 43 additions & 0 deletions packages/calcite-components/src/components/panel/panel.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,3 +446,46 @@ 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 theming_TestOnly = (): string => html`
<style>
.container {
max-height: 300px;
width: 300px;
}
</style>
<div class="container">
<calcite-panel
heading="My Panel"
description="My description"
style="
--calcite-panel-background-color: lightblue;
--calcite-panel-border-color: red;
--calcite-panel-description-color: purple;
--calcite-panel-footer-background-color: lightgreen;
--calcite-panel-footer-space: 24px;
--calcite-panel-header-background-color: yellow;
--calcite-panel-header-border-width: 1px;
--calcite-panel-heading-text-color: orange;
--calcite-panel-header-z-index: 999;
--calcite-panel-fab-z-index: 998;
"
>
<calcite-list>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
<calcite-list-item label="My list item" description="My description"></calcite-list-item>
</calcite-list>
<calcite-fab slot="fab"></calcite-fab>
${footerHTML}
</calcite-panel>
</div>
`;

0 comments on commit a683f26

Please sign in to comment.