Skip to content

Commit 3d40a2f

Browse files
driskullbenelan
driskull
authored and
benelan
committed
feat(sheet): add component tokens (#12023)
**Related Issue:** #7180 ## Summary Adds the following tokens: - --calcite-sheet-background-color: Specifies the background color of the sheet. - --calcite-sheet-corner-radius: Specifies the corner radius of the component. - --calcite-sheet-shadow: Specifies the shadow of the component. - --calcite-sheet-text-color: Specifies the text color of the component. - --calcite-sheet-resize-background-color: Specifies the background color of the resize handle. - --calcite-sheet-resize-icon-color: Specifies the text color of the resize handle.
1 parent bf24d1d commit 3d40a2f

File tree

3 files changed

+95
-18
lines changed

3 files changed

+95
-18
lines changed

‎packages/calcite-components/src/components/sheet/sheet.e2e.ts

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
33
import { describe, expect, it, vi } from "vitest";
44
import { html } from "../../../support/formatting";
5-
import { accessible, defaults, focusable, hidden, openClose, reflects, renders } from "../../tests/commonTests";
5+
import { accessible, defaults, focusable, hidden, openClose, reflects, renders, themed } from "../../tests/commonTests";
66
import { GlobalTestProps, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils/puppeteer";
77
import { resizeStep, resizeShiftStep } from "../../utils/resources";
88
import { CSS } from "./resources";
@@ -761,4 +761,58 @@ describe("calcite-sheet properties", () => {
761761
expect(computedStyle.blockSize).toBe(`${minSize}px`);
762762
});
763763
});
764+
765+
describe("themed", () => {
766+
describe("default", () => {
767+
themed(
768+
html`<calcite-sheet open resizable display-mode="float" position="inline-start" width="l" height="m">
769+
<calcite-panel heading="hello world">test!</calcite-panel>
770+
</calcite-sheet>`,
771+
{
772+
"--calcite-sheet-background-color": {
773+
shadowSelector: `#sheet-content.${CSS.content}`,
774+
targetProp: "backgroundColor",
775+
},
776+
"--calcite-sheet-border-color": {
777+
shadowSelector: `.${CSS.resizeHandleBar}`,
778+
targetProp: "borderInlineStartColor",
779+
},
780+
"--calcite-sheet-corner-radius": [
781+
{
782+
shadowSelector: `#sheet-content.${CSS.content}`,
783+
targetProp: "borderRadius",
784+
},
785+
{
786+
shadowSelector: `.${CSS.contentContainer}`,
787+
targetProp: "borderRadius",
788+
},
789+
{
790+
shadowSelector: `.${CSS.container}`,
791+
targetProp: "borderRadius",
792+
},
793+
{
794+
shadowSelector: `.${CSS.resizeHandleBar}`,
795+
targetProp: "borderStartEndRadius",
796+
},
797+
],
798+
"--calcite-sheet-text-color": {
799+
shadowSelector: `.${CSS.container}`,
800+
targetProp: "color",
801+
},
802+
"--calcite-sheet-shadow": {
803+
shadowSelector: `#sheet-content.${CSS.content}`,
804+
targetProp: "boxShadow",
805+
},
806+
"--calcite-sheet-resize-background-color": {
807+
shadowSelector: `.${CSS.resizeHandleBar}`,
808+
targetProp: "backgroundColor",
809+
},
810+
"--calcite-sheet-resize-icon-color": {
811+
shadowSelector: `.${CSS.resizeHandleBar}`,
812+
targetProp: "color",
813+
},
814+
},
815+
);
816+
});
817+
});
764818
});

‎packages/calcite-components/src/components/sheet/sheet.scss

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
* CSS Custom Properties
33
*
44
* These properties can be overridden using the component's tag as selector.
5+
* @prop --calcite-sheet-background-color: Specifies the background color of the sheet.
6+
* @prop --calcite-sheet-corner-radius: Specifies the corner radius of the component.
7+
* @prop --calcite-sheet-shadow: Specifies the shadow of the component.
8+
* @prop --calcite-sheet-text-color: Specifies the text color of the component.
9+
*
10+
* @prop --calcite-sheet-resize-background-color: Specifies the background color of the resize handle.
11+
* @prop --calcite-sheet-resize-icon-color: Specifies the text color of the resize handle.
512
*
613
* @prop --calcite-sheet-scrim-background: Specifies the background color of the sheet scrim.
714
* @prop --calcite-sheet-width: When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
@@ -25,7 +32,8 @@
2532
}
2633

2734
.calcite--rtl {
28-
--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
35+
--calcite-scrim-shadow-inline-start-internal:
36+
-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
2937
--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);
3038
}
3139

@@ -34,13 +42,13 @@
3442
}
3543

3644
.container {
37-
@apply text-color-2
38-
box-border
45+
@apply box-border
3946
fixed
4047
flex
4148
opacity-0
4249
z-overlay
4350
invisible;
51+
color: var(--calcite-sheet-text-color, var(--calcite-color-text-2));
4452
transition:
4553
visibility 0ms linear var(--calcite-internal-animation-timing-medium),
4654
opacity var(--calcite-internal-animation-timing-medium) $easing-function;
@@ -75,7 +83,14 @@
7583
}
7684

7785
:host([display-mode="float"]) .content {
78-
@apply shadow-2-sm;
86+
--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
87+
--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
88+
box-shadow: var(
89+
--calcite-sheet-shadow,
90+
var(--tw-ring-offset-shadow, 0 0 #0000),
91+
var(--tw-ring-shadow, 0 0 #0000),
92+
var(--tw-shadow)
93+
);
7994
}
8095

8196
:host([display-mode="overlay"][position="inline-start"]) .container {
@@ -153,7 +168,7 @@
153168

154169
.content {
155170
@apply flex relative box-border p-0 z-modal max-h-full max-w-full;
156-
background-color: theme("colors.background.foreground.1");
171+
background-color: var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));
157172
max-block-size: 100%;
158173
visibility: hidden;
159174
transition:
@@ -174,11 +189,11 @@
174189
:host([display-mode="float"]) .content,
175190
:host([display-mode="float"]) .container,
176191
:host([display-mode="float"]) .content-container {
177-
@apply rounded;
192+
border-radius: var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));
178193
}
179194

180195
:host([display-mode="float"]) .container {
181-
@apply p-3;
196+
padding: var(--calcite-spacing-md);
182197
}
183198

184199
.container--open {
@@ -257,13 +272,15 @@
257272
.resize-handle:active,
258273
.resize-handle:hover {
259274
.resize-handle-bar {
260-
@apply text-color-1 bg-foreground-3;
275+
color: var(--calcite-sheet-resize-icon-color, var(--calcite-color-text-1));
276+
background-color: var(--calcite-sheet-resize-background-color, var(--calcite-color-foreground-3));
261277
}
262278
}
263279

264280
.resize-handle-bar {
265-
@apply flex bg-background justify-center items-center pointer-events-none;
266-
color: var(--calcite-color-border-input);
281+
@apply flex justify-center items-center pointer-events-none;
282+
color: var(--calcite-sheet-resize-icon-color, var(--calcite-color-border-input));
283+
background-color: var(--calcite-sheet-resize-background-color, var(--calcite-color-background));
267284
}
268285

269286
.resize-handle:focus .resize-handle-bar {
@@ -281,11 +298,13 @@
281298
.resize-handle-bar {
282299
block-size: 100%;
283300
inline-size: var(--calcite-size-fixed-sm-plus);
284-
border-inline-start: 1px solid var(--calcite-color-border-3);
301+
border-inline-start: var(--calcite-border-width-sm) solid
302+
var(--calcite-sheet-border-color, var(--calcite-color-border-3));
285303
}
286304

287305
&:host([display-mode="float"]) .resize-handle-bar {
288-
@apply rounded-e;
306+
border-start-end-radius: var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));
307+
border-end-end-radius: var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));
289308
}
290309
}
291310

@@ -300,7 +319,8 @@
300319
.resize-handle-bar {
301320
block-size: 100%;
302321
inline-size: var(--calcite-size-fixed-sm-plus);
303-
border-inline-end: 1px solid var(--calcite-color-border-3);
322+
border-inline-end: var(--calcite-border-width-sm) solid
323+
var(--calcite-sheet-border-color, var(--calcite-color-border-3));
304324
}
305325

306326
&:host([display-mode="float"]) .resize-handle-bar {
@@ -318,7 +338,8 @@
318338
.resize-handle-bar {
319339
inline-size: 100%;
320340
block-size: var(--calcite-size-fixed-sm-plus);
321-
border-block-start: 1px solid var(--calcite-color-border-3);
341+
border-block-start: var(--calcite-border-width-sm) solid
342+
var(--calcite-sheet-border-color, var(--calcite-color-border-3));
322343
}
323344

324345
&:host([display-mode="float"]) .resize-handle-bar {
@@ -336,11 +357,13 @@
336357
.resize-handle-bar {
337358
inline-size: 100%;
338359
block-size: var(--calcite-size-fixed-sm-plus);
339-
border-block-end: 1px solid var(--calcite-color-border-3);
360+
border-block-end: var(--calcite-border-width-sm) solid
361+
var(--calcite-sheet-border-color, var(--calcite-color-border-3));
340362
}
341363

342364
&:host([display-mode="float"]) .resize-handle-bar {
343-
@apply rounded-t;
365+
border-top-left-radius: var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));
366+
border-top-right-radius: var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));
344367
}
345368
}
346369

‎packages/calcite-components/src/components/sheet/sheet.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -621,7 +621,7 @@ export class Sheet extends LitElement implements OpenCloseComponent {
621621
ref={this.setTransitionEl}
622622
>
623623
<calcite-scrim class={CSS.scrim} onClick={this.handleOutsideClose} />
624-
<div class={CSS.content} ref={this.setContentEl}>
624+
<div class={CSS.content} id="sheet-content" ref={this.setContentEl}>
625625
<div class={CSS.contentContainer}>
626626
<slot />
627627
</div>

0 commit comments

Comments
 (0)