Skip to content

Commit a61c15a

Browse files
ElijbetElijbet
authored
feat(notice): add component tokens (#11042)
**Related Issue:** #7180 ## Summary Adds the following subcomponent tokens (CSS props): - `--calcite-notice-background-color` - `--calcite-notice-close-background-color-focus` - `--calcite-notice-close-background-color-press` - `--calcite-notice-close-text-color-hover` - `--calcite-notice-close-text-color` - `--calcite-notice-content-text-color`
1 parent dc55d75 commit a61c15a

File tree

4 files changed

+91
-27
lines changed

4 files changed

+91
-27
lines changed

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

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { newE2EPage } from "@arcgis/lumina-compiler/puppeteerTesting";
22
import { describe, expect, it } from "vitest";
3-
import { accessible, focusable, renders, slots, hidden, t9n } from "../../tests/commonTests";
3+
import { accessible, focusable, renders, slots, hidden, themed, t9n } from "../../tests/commonTests";
44
import { html } from "../../../support/formatting";
55
import { openClose } from "../../tests/commonTests";
66
import { CSS, SLOTS } from "./resources";
@@ -129,4 +129,57 @@ describe("calcite-notice", () => {
129129
describe("translation support", () => {
130130
t9n("calcite-notice");
131131
});
132+
133+
describe("theme", () => {
134+
describe("default", () => {
135+
themed(
136+
html`
137+
<calcite-notice kind="danger" open closable>
138+
<div slot="title">Title</div>
139+
<div slot="message">Message</div>
140+
<calcite-link slot="link" title="my action">Retry</calcite-link>
141+
</calcite-notice>
142+
`,
143+
{
144+
"--calcite-notice-background-color": {
145+
shadowSelector: `.${CSS.container}`,
146+
targetProp: "backgroundColor",
147+
},
148+
"--calcite-notice-close-text-color": {
149+
shadowSelector: `.${CSS.close}`,
150+
targetProp: "color",
151+
},
152+
"--calcite-notice-close-text-color-hover": [
153+
{
154+
shadowSelector: `.${CSS.close}`,
155+
targetProp: "color",
156+
state: "focus",
157+
},
158+
{
159+
shadowSelector: `.${CSS.close}`,
160+
targetProp: "color",
161+
state: "hover",
162+
},
163+
],
164+
"--calcite-notice-close-background-color-focus": [
165+
{
166+
shadowSelector: `.${CSS.close}`,
167+
targetProp: "backgroundColor",
168+
state: "focus",
169+
},
170+
{
171+
shadowSelector: `.${CSS.close}`,
172+
targetProp: "backgroundColor",
173+
state: "hover",
174+
},
175+
],
176+
"--calcite-notice-close-background-color-press": {
177+
shadowSelector: `.${CSS.close}`,
178+
targetProp: "backgroundColor",
179+
state: { press: { attribute: "class", value: CSS.close } },
180+
},
181+
},
182+
);
183+
});
184+
});
132185
});

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

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@
33
*
44
* These properties can be overridden using the component's tag as selector.
55
*
6-
* @prop --calcite-notice-width: The width of the component.
6+
* @prop --calcite-notice-background-color: Specifies the background color of the component.
7+
* @prop --calcite-notice-close-background-color-focus: Specifies the background color of the component when focused.
8+
* @prop --calcite-notice-close-background-color-press: Specifies the background color of the component when active.
9+
* @prop --calcite-notice-close-text-color-hover: Specifies the background color of component's close button when hovered.
10+
* @prop --calcite-notice-close-text-color: Specifies the text color of component's close button.
11+
* @prop --calcite-notice-content-text-color: Specifies the content text color of the component.
12+
* @prop --calcite-notice-width: Specifies the width of the component.
713
*/
814

915
// scale variables
@@ -71,20 +77,21 @@
7177
}
7278

7379
.container {
74-
@apply bg-foreground-1
75-
pointer-events-none
80+
@apply pointer-events-none
7681
my-0
7782
box-border
7883
flex
7984
w-full
8085
opacity-0;
86+
8187
overflow: hidden;
8288
max-block-size: 0;
8389
transition-property: opacity, max-block-size;
8490
transition-duration: var(--calcite-animation-timing);
8591
text-align: start;
8692
border-inline-start: var(--calcite-border-width-md) solid;
8793
box-shadow: 0 0 0 0 transparent;
94+
background-color: var(--calcite-notice-background-color, var(--calcite-color-foreground-1));
8895
}
8996

9097
// focus styles
@@ -109,12 +116,16 @@
109116
}
110117

111118
@include slotted("title", "*", ".container") {
112-
@apply text-color-1 m-0 font-medium;
119+
@apply m-0 font-medium;
120+
121+
color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
113122
}
114123

115124
@include slotted("message", "*", ".container") {
116-
@apply text-color-2 m-0 inline font-normal;
125+
@apply m-0 inline font-normal;
126+
117127
margin-inline-end: var(--calcite-notice-spacing-token-small);
128+
color: var(--calcite-notice-content-text-color, var(--calcite-color-text-2));
118129
}
119130

120131
@mixin notice-element-base() {
@@ -146,17 +157,20 @@
146157
}
147158

148159
.notice-close {
149-
@apply text-color-3 flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;
160+
@apply flex cursor-pointer items-center self-stretch border-none bg-transparent outline-none;
150161
@include notice-element-base;
151162
-webkit-appearance: none;
152163

164+
color: var(--calcite-notice-close-text-color, var(--calcite-color-text-3));
165+
153166
&:hover,
154167
&:focus {
155-
@apply bg-foreground-2 text-color-1;
168+
background-color: var(--calcite-notice-close-background-color-focus, var(--calcite-color-foreground-2));
169+
color: var(--calcite-notice-close-text-color-hover, var(--calcite-color-text-1));
156170
}
157171

158172
&:active {
159-
@apply bg-foreground-3;
173+
background-color: var(--calcite-notice-close-background-color-press, var(--calcite-color-foreground-3));
160174
}
161175
}
162176

‎packages/calcite-components/src/custom-theme.stories.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { label, labelTokens } from "./custom-theme/label";
3333
import { link, linkTokens } from "./custom-theme/link";
3434
import { list, listTokens } from "./custom-theme/list";
3535
import { loader, loaderTokens } from "./custom-theme/loader";
36-
import { notices } from "./custom-theme/notice";
36+
import { notice, noticeTokens } from "./custom-theme/notice";
3737
import { pagination } from "./custom-theme/pagination";
3838
import { popover, popoverTokens } from "./custom-theme/popover";
3939
import { progress, progressTokens } from "./custom-theme/progress";
@@ -113,7 +113,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
113113
</style>
114114
<div class="demo">
115115
<div class="demo-column">
116-
${accordion} ${actionBar} ${autocomplete} ${notices} ${segmentedControl}
116+
${accordion} ${actionBar} ${autocomplete} ${notice} ${segmentedControl}
117117
<div style="display: flex">
118118
${actionPad}
119119
<div style="width: 40px; height: 40px;">${actionMenu}</div>
@@ -164,6 +164,7 @@ const componentTokens = {
164164
...navigationLogoTokens,
165165
...navigationTokens,
166166
...navigationUserTokens,
167+
...noticeTokens,
167168
...popoverTokens,
168169
...progressTokens,
169170
...sliderTokens,

‎packages/calcite-components/src/custom-theme/notice.ts

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
import { html } from "../../support/formatting";
22

3-
export const notice = ({ kind, message, title }: { kind: string; message: string; title: string }): string =>
4-
html`<calcite-notice kind=${kind} scale="s" open closable>
5-
<div slot="title">${title}</div>
6-
<div slot="message">${message}</div>
7-
${kind === "danger" ? html`<calcite-link slot="link" title="my action">Retry</calcite-link>` : null}
8-
</calcite-notice>`;
3+
export const noticeTokens = {
4+
calciteNoticeBackgroundColor: "",
5+
calciteNoticeCloseBackgroundColorFocus: "",
6+
calciteNoticeCloseBackgroundColorPress: "",
7+
calciteNoticeCloseTextColorHover: "",
8+
calciteNoticeCloseTextColor: "",
9+
calciteNoticeContentTextColor: "",
10+
};
911

10-
export const notices = html`${notice({
11-
kind: "danger",
12-
message: "There was an error while performing the task.",
13-
title: "Something failed",
14-
})}
15-
${notice({
16-
kind: "success",
17-
message: "That thing you wanted to do worked as expected",
18-
title: "Something worked",
19-
})}`;
12+
export const notice = html`<calcite-notice kind="success" scale="s" open closable>
13+
<div slot="title">Something worked</div>
14+
<div slot="message">That thing you wanted to do worked as expected</div>
15+
</calcite-notice>`;

0 commit comments

Comments
 (0)