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.

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(notice): add component tokens #11042

Merged
merged 12 commits into from
Jan 4, 2025
Prev Previous commit
Next Next commit
custom-theme adjustments
Elijbet committed Jan 4, 2025
commit c88029598c55b7572d4386a0b85656661575187e
5 changes: 3 additions & 2 deletions packages/calcite-components/src/custom-theme.stories.ts
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ import { label, labelTokens } from "./custom-theme/label";
import { link, linkTokens } from "./custom-theme/link";
import { list, listTokens } from "./custom-theme/list";
import { loader, loaderTokens } from "./custom-theme/loader";
import { notices } from "./custom-theme/notice";
import { notice, noticeTokens } from "./custom-theme/notice";
import { pagination } from "./custom-theme/pagination";
import { popover, popoverTokens } from "./custom-theme/popover";
import { progress, progressTokens } from "./custom-theme/progress";
@@ -113,7 +113,7 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
</style>
<div class="demo">
<div class="demo-column">
${accordion} ${actionBar} ${autocomplete} ${notices} ${segmentedControl}
${accordion} ${actionBar} ${autocomplete} ${notice} ${segmentedControl}
<div style="display: flex">
${actionPad}
<div style="width: 40px; height: 40px;">${actionMenu}</div>
@@ -164,6 +164,7 @@ const componentTokens = {
...navigationLogoTokens,
...navigationTokens,
...navigationUserTokens,
...noticeTokens,
...popoverTokens,
...progressTokens,
...sliderTokens,
28 changes: 12 additions & 16 deletions packages/calcite-components/src/custom-theme/notice.ts
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
import { html } from "../../support/formatting";

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

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