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 5 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
318 changes: 318 additions & 0 deletions src/components/notification/__snapshots__/notification.spec.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,3 +239,321 @@ snapshots["sbb-notification A11y tree Firefox"] =
`;
/* end snapshot sbb-notification A11y tree Firefox */

snapshots["sbb-notification renders Dom"] =
`<sbb-notification
data-slot-names="unnamed"
data-state="opened"
disable-animation=""
size="m"
style="--sbb-notification-height: auto;"
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
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="5"
>
<slot name="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="m"
tabindex="0"
>
</sbb-secondary-button>
</span>
</div>
</div>
`;
/* end snapshot sbb-notification renders ShadowDom */

snapshots["sbb-notification renders with a title Dom"] =
`<sbb-notification
data-slot-names="unnamed"
data-state="opened"
disable-animation=""
size="m"
style="--sbb-notification-height: auto;"
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
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="5"
>
<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="m"
tabindex="0"
>
</sbb-secondary-button>
</span>
</div>
</div>
`;
/* end snapshot sbb-notification renders with a title ShadowDom */

snapshots["sbb-notification renders with a slotted title Dom"] =
`<sbb-notification
data-slot-names="title unnamed"
data-state="opened"
disable-animation=""
size="m"
style="--sbb-notification-height: auto;"
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 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="5"
>
<slot name="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="m"
tabindex="0"
>
</sbb-secondary-button>
</span>
</div>
</div>
`;
/* end snapshot sbb-notification renders with a slotted title ShadowDom */

snapshots["sbb-notification renders without the close button Dom"] =
`<sbb-notification
data-slot-names="unnamed"
data-state="opened"
disable-animation=""
readonly=""
size="m"
style="--sbb-notification-height: auto;"
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 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="5"
>
<slot name="title">
Title
</slot>
</sbb-title>
<slot>
</slot>
</span>
</div>
</div>
`;
/* end snapshot sbb-notification renders without the close button ShadowDom */

snapshots["sbb-notification renders size s Dom"] =
`<sbb-notification
data-slot-names="unnamed"
data-state="opened"
disable-animation=""
size="s"
style="--sbb-notification-height: auto;"
title-content="Title"
type="info"
>
The quick brown fox jumps over the lazy dog.
</sbb-notification>
`;
/* end snapshot sbb-notification renders size s Dom */

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 renders size s ShadowDom */

24 changes: 23 additions & 1 deletion src/components/notification/notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,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 @@ -82,6 +84,18 @@
--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);
--sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs)
var(--sbb-spacing-responsive-xxs);

@include sbb.mq($to: small) {
TomMenga marked this conversation as resolved.
Show resolved Hide resolved
--sbb-notification-padding-inline: var(--sbb-spacing-responsive-xxs)
var(--sbb-spacing-responsive-xxxs);
}
}

.sbb-notification__wrapper {
position: relative;
margin: var(--sbb-notification-margin);
Expand Down Expand Up @@ -138,6 +152,10 @@
grid-template-columns: auto 1fr auto;
align-items: flex-start;
}

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

.sbb-notification__icon {
Expand All @@ -157,6 +175,10 @@
) / 2
);
}

:host([size='s']) & {
margin-block-start: 0;
jeripeierSBB marked this conversation as resolved.
Show resolved Hide resolved
}
}
}

Expand All @@ -178,7 +200,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