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.

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

feat(notification): add size 's' #2606

Merged
merged 10 commits into from
Apr 24, 2024
Merged

feat(notification): add size 's' #2606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
545bb79
feat(notification): add size 's'
TomMenga Apr 18, 2024
99fe2eb
docs(notification): add size 's'
TomMenga Apr 22, 2024
8a8ef00
feat(notification): update tests
TomMenga Apr 22, 2024
9f2910b
docs(notification): add size 's'
TomMenga Apr 22, 2024
5d5dd52
feat(notification): fix icon placing on size 's'
TomMenga Apr 22, 2024
8d27de7
style(notification): pr feedbacks
TomMenga Apr 22, 2024
e7e6eb6
style(notification): pr feedbacks
TomMenga Apr 23, 2024
1a1947b
Merge branch 'main' into feat/notification-size-s
TomMenga Apr 24, 2024
fc3d112
chore: udpate snapshots
TomMenga Apr 24, 2024
1d045e6
chore: udpate snapshots
TomMenga Apr 24, 2024
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
233 changes: 179 additions & 54 deletions src/components/notification/__snapshots__/notification.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,70 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-notification renders"] =
snapshots["sbb-notification A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "heading",
"name": "Test title",
"level": 3
},
{
"role": "text",
"name": "Lorem ipsum ..."
},
{
"role": "button",
"name": "Close message"
}
]
}
</p>
`;
/* end snapshot sbb-notification A11y tree Chrome */

snapshots["sbb-notification A11y tree Firefox"] =
`<p>
{
"role": "document",
"name": "",
"children": [
{
"role": "heading",
"name": "Test title",
"level": 3
},
{
"role": "text leaf",
"name": "Lorem ipsum ..."
},
{
"role": "button",
"name": "Close message"
}
]
}
</p>
`;
/* end snapshot sbb-notification A11y tree Firefox */

snapshots["sbb-notification renders Dom"] =
`<sbb-notification
animation="all"
data-slot-names="unnamed"
data-state="opening"
size="m"
type="info"
>
The quick brown fox jumps over the lazy dog.
</sbb-notification>
`;
/* end snapshot sbb-notification renders Dom */

snapshots["sbb-notification renders ShadowDom"] =
`<div class="sbb-notification__wrapper">
<div class="sbb-notification">
<sbb-icon
Expand Down Expand Up @@ -51,9 +114,23 @@ snapshots["sbb-notification renders"] =
</div>
</div>
`;
/* end snapshot sbb-notification renders */
/* end snapshot sbb-notification renders ShadowDom */

snapshots["sbb-notification renders with a title"] =
snapshots["sbb-notification renders with a title Dom"] =
`<sbb-notification
animation="all"
data-slot-names="unnamed"
data-state="opening"
size="m"
title-content="Title"
type="info"
>
The quick brown fox jumps over the lazy dog.
</sbb-notification>
`;
/* end snapshot sbb-notification renders with a title Dom */

snapshots["sbb-notification renders with a title ShadowDom"] =
`<div class="sbb-notification__wrapper">
<div class="sbb-notification">
<sbb-icon
Expand Down Expand Up @@ -104,9 +181,25 @@ snapshots["sbb-notification renders with a title"] =
</div>
</div>
`;
/* end snapshot sbb-notification renders with a title */
/* end snapshot sbb-notification renders with a title ShadowDom */

snapshots["sbb-notification renders with a slotted title Dom"] =
`<sbb-notification
animation="all"
data-slot-names="title unnamed"
data-state="opening"
size="m"
type="info"
>
<span slot="title">
Slotted title
</span>
The quick brown fox jumps over the lazy dog.
</sbb-notification>
`;
/* end snapshot sbb-notification renders with a slotted title Dom */

snapshots["sbb-notification renders with a slotted title"] =
snapshots["sbb-notification renders with a slotted title ShadowDom"] =
`<div class="sbb-notification__wrapper">
<div class="sbb-notification">
<sbb-icon
Expand Down Expand Up @@ -156,9 +249,24 @@ snapshots["sbb-notification renders with a slotted title"] =
</div>
</div>
`;
/* end snapshot sbb-notification renders with a slotted title */
/* end snapshot sbb-notification renders with a slotted title ShadowDom */

snapshots["sbb-notification renders without the close button Dom"] =
`<sbb-notification
animation="all"
data-slot-names="unnamed"
data-state="opening"
readonly=""
size="m"
title-content="Title"
type="info"
>
The quick brown fox jumps over the lazy dog.
</sbb-notification>
`;
/* end snapshot sbb-notification renders without the close button Dom */

snapshots["sbb-notification renders without the close button"] =
snapshots["sbb-notification renders without the close button ShadowDom"] =
`<div class="sbb-notification__wrapper">
<div class="sbb-notification">
<sbb-icon
Expand Down Expand Up @@ -187,55 +295,72 @@ snapshots["sbb-notification renders without the close button"] =
</div>
</div>
`;
/* end snapshot sbb-notification renders without the close button */
/* end snapshot sbb-notification renders without the close button ShadowDom */

snapshots["sbb-notification A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "heading",
"name": "Test title",
"level": 3
},
{
"role": "text",
"name": "Lorem ipsum ..."
},
{
"role": "button",
"name": "Close message"
}
]
}
</p>
snapshots["sbb-notification renders size s Dom"] =
`<sbb-notification
animation="all"
data-slot-names="unnamed"
data-state="opening"
size="s"
title-content="Title"
type="info"
>
The quick brown fox jumps over the lazy dog.
</sbb-notification>
`;
/* end snapshot sbb-notification A11y tree Chrome */
/* end snapshot sbb-notification renders size s Dom */

snapshots["sbb-notification A11y tree Firefox"] =
`<p>
{
"role": "document",
"name": "",
"children": [
{
"role": "heading",
"name": "Test title",
"level": 3
},
{
"role": "text leaf",
"name": "Lorem ipsum ..."
},
{
"role": "button",
"name": "Close message"
}
]
}
</p>
snapshots["sbb-notification renders size s ShadowDom"] =
`<div class="sbb-notification__wrapper">
<div class="sbb-notification">
<sbb-icon
aria-hidden="true"
class="sbb-notification__icon"
data-namespace="default"
name="circle-information-small"
role="img"
>
</sbb-icon>
<span class="sbb-notification__content">
<sbb-title
aria-level="3"
class="sbb-notification__title"
level="3"
role="heading"
visual-level="6"
>
<slot name="title">
Title
</slot>
</sbb-title>
<slot>
</slot>
</span>
<span class="sbb-notification__close-wrapper">
<sbb-divider
aria-orientation="vertical"
class="sbb-notification__divider"
orientation="vertical"
role="separator"
>
</sbb-divider>
<sbb-secondary-button
aria-label="Close message"
class="sbb-notification__close"
data-action=""
data-button=""
data-sbb-button=""
dir="ltr"
icon-name="cross-small"
role="button"
size="s"
tabindex="0"
>
</sbb-secondary-button>
</span>
</div>
</div>
`;
/* end snapshot sbb-notification A11y tree Firefox */
/* end snapshot sbb-notification renders size s ShadowDom */

57 changes: 40 additions & 17 deletions src/components/notification/notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
--sbb-notification-color: var(--sbb-color-charcoal);
--sbb-notification-icon-color: var(--sbb-notification-type-color);
--sbb-notification-icon-margin-block-start: 0;
--sbb-notification-border-width: var(--sbb-border-width-1x);
--sbb-notification-border: var(--sbb-notification-border-width) solid
var(--sbb-notification-type-color);
Expand All @@ -33,6 +34,8 @@
border var(--sbb-notification-animation-duration) var(--sbb-animation-duration-2x)
var(--sbb-notification-timing-function),
opacity var(--sbb-notification-animation-duration) var(--sbb-notification-timing-function);
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)
var(--sbb-spacing-responsive-xs);

// As the notification has always a light background, we have to fix the focus outline color
// to default color for cases where the notification is used in a negative context.
Expand Down Expand Up @@ -94,6 +97,37 @@
--sbb-notification-type-color-sass: #{color.mix(sbb-tokens.$sbb-color-red, white, 5%)};
}

:host([size='s']) {
--sbb-notification-padding-block: var(--sbb-spacing-responsive-xxxs);
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
var(--sbb-spacing-responsive-xxxs);
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)
var(--sbb-spacing-responsive-xxs);
}

@include sbb.mq($from: small) {
:host {
--sbb-notification-icon-margin-block-start: calc(
((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2
);
}

:host(:where([data-slot-names~='title'], [title-content])) {
--sbb-notification-icon-margin-block-start: calc(
(
(var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var(
--sbb-size-icon-ui-small
)
) / 2
);
}

:host([size='s']) {
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs);
--sbb-notification-icon-margin-block-start: 0;
}
}

.sbb-notification__wrapper {
position: relative;
margin: var(--sbb-notification-margin);
Expand Down Expand Up @@ -150,26 +184,15 @@
grid-template-columns: auto 1fr auto;
align-items: flex-start;
}

:host([size='s']) & {
@include sbb.text-xs--regular;
}
}

.sbb-notification__icon {
color: var(--sbb-notification-icon-color);

@include sbb.mq($from: small) {
margin-block-start: calc(
((1em * var(--sbb-typo-line-height-body-text)) - var(--sbb-size-icon-ui-small)) / 2
);

:host(:where([data-slot-names~='title'], [title-content])) & {
margin-block-start: calc(
(
(var(--sbb-font-size-title-5) * var(--sbb-typo-line-height-body-text)) - var(
--sbb-size-icon-ui-small
)
) / 2
);
}
}
margin-block-start: var(--sbb-notification-icon-margin-block-start);
}

.sbb-notification__title {
Expand All @@ -190,7 +213,7 @@
order: initial;
grid-area: initial;
margin-block-start: 0;
padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
padding-inline: var(--sbb-notification-content-padding-inline);
}
}

Expand Down
Loading
Loading