Skip to content

feat(notice): add component tokens #11042

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

Merged
merged 12 commits into from
Jan 4, 2025
+93 −28
Merged

feat(notice): add component tokens #11042

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6c9e39d
feat(notice): add component tokens
Elijbet Dec 13, 2024
8c92ce1
Merge branch 'dev' into elijbet/7180-notice-design-tokens
Elijbet Dec 24, 2024
ab8dc73
var corrections
Elijbet Dec 31, 2024
2e63733
WIP: themed test
Elijbet Dec 31, 2024
9e5dbc1
Merge branch 'dev' into elijbet/7180-notice-design-tokens
Elijbet Jan 3, 2025
499d69a
correct token names and deprecation note
Elijbet Jan 3, 2025
6ff44a2
fix
Elijbet Jan 3, 2025
1890095
remove deprecation note - out of scope
Elijbet Jan 3, 2025
c880295
custom-theme adjustments
Elijbet Jan 4, 2025
56ab464
chore(themed): disable animations for consistent assertion results
jcfranco Jan 4, 2025
6cfc959
Merge branch 'jcfranco/ensure-theming-tests-have-no-transitions' into…
Elijbet Jan 4, 2025
943ca4e
rework tests so that states don't affect each other
Elijbet Jan 4, 2025
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
30 changes: 22 additions & 8 deletions packages/calcite-components/src/components/notice/notice.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-notice-width: The width of the component.
* @prop --calcite-notice-background: Specifies the background color of the component.
* @prop --calcite-notice-close-background-focus: Specifies the background color of the component when focused.
* @prop --calcite-notice-close-background-press: Specifies the background color of the component when active.
* @prop --calcite-notice-close-text-color-hover: Specifies the background color of component's close button when hovered.
* @prop --calcite-notice-close-text-color: Specifies the text color of component's close button.
* @prop --calcite-notice-content-text-color: Specifies the content text color of the component.
* @prop --calcite-notice-width: Specifies the width of the component.
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if we can evaluate this for removal. Not sure why we'd need this, vs. the user being able to set this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah WDYT @alisonailea?

Copy link
Contributor

Choose a reason for hiding this comment

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

I agree we could set this for removal

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@DitwanP @geospatialem is there any specific process/term we need for deprecation and removal for this or just [Deprecated] note for now is enough?

Copy link
Contributor

Choose a reason for hiding this comment

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

I think the [Deprecated] note is enough.

Copy link
Member

Choose a reason for hiding this comment

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

@Elijbet We have a new deprecate conventional commit, so would recommend we use that approach for the deprecation so users are aware of the deprecation via our changelog.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I will create a follow-up PR for this.

*/

// scale variables
Expand Down Expand Up @@ -71,20 +77,21 @@
}

.container {
@apply bg-foreground-1
pointer-events-none
@apply pointer-events-none
my-0
box-border
flex
w-full
opacity-0;

overflow: hidden;
max-block-size: 0;
transition-property: opacity, max-block-size;
transition-duration: var(--calcite-animation-timing);
text-align: start;
border-inline-start: var(--calcite-border-width-md) solid;
box-shadow: 0 0 0 0 transparent;
background-color: var(--calcite-notice-background, var(bg-foreground-1));
}

// focus styles
Expand All @@ -109,12 +116,16 @@
}

@include slotted("title", "*", ".container") {
@apply text-color-1 m-0 font-medium;
@apply m-0 font-medium;

color: var(--calcite-notice-close-text-color-hover, var(text-color-1));
}

@include slotted("message", "*", ".container") {
@apply text-color-2 m-0 inline font-normal;
@apply m-0 inline font-normal;

margin-inline-end: var(--calcite-notice-spacing-token-small);
color: var(--calcite-notice-content-text-color, var(--calcite-color-text-2));
}

@mixin notice-element-base() {
Expand Down Expand Up @@ -146,17 +157,20 @@
}

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

color: var(--calcite-notice-close-text-color, var(text-color-3));

&:hover,
&:focus {
@apply bg-foreground-2 text-color-1;
background-color: var(--calcite-notice-close-background-focus, var(bg-foreground-2));
color: var(--calcite-notice-close-text-color-hover, var(text-color-1));
}

&:active {
@apply bg-foreground-3;
background-color: var(--calcite-notice-close-background-press, var(bg-foreground-3));
}
}

Expand Down
Loading