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

Jump to bottom

fix(toast-notification): restore bottom margin on details container #17578

Merged
merged 3 commits into from
Sep 30, 2024
Merged

fix(toast-notification): restore bottom margin on details container #17578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef6667c
fix(toast-notification): place bottom margin on details container
emyarod Sep 25, 2024
512dc17
test(Notification): add snapshots for VRT
emyarod Sep 25, 2024
3287460
Merge branch 'main' into 17523-fix/toast-notifications-bottom-margin
riddhybansal Sep 26, 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
26 changes: 25 additions & 1 deletion ...ponents/Notification/Notification-test.js → ...tification/__tests__/Notification-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
ToastNotification,
InlineNotification,
ActionableNotification,
} from './Notification';
} from '../Notification';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

Expand Down Expand Up @@ -55,6 +55,14 @@ describe('NotificationButton', () => {
});

describe('ToastNotification', () => {
it('should render', () => {
const { asFragment } = render(
<ToastNotification title="Notification title" />
);

expect(asFragment()).toMatchSnapshot();
});

it('should have role=status by default', () => {
const { container } = render(
<ToastNotification title="Notification title" />
Expand Down Expand Up @@ -178,6 +186,14 @@ describe('ToastNotification', () => {
});

describe('InlineNotification', () => {
it('should render', () => {
const { asFragment } = render(
<InlineNotification title="Notification title" />
);

expect(asFragment()).toMatchSnapshot();
});

it('should have role=status by default', () => {
const { container } = render(
<InlineNotification title="Notification title" />
Expand Down Expand Up @@ -300,6 +316,14 @@ describe('InlineNotification', () => {
});

describe('ActionableNotification', () => {
it('should render', () => {
const { asFragment } = render(
<ActionableNotification actionButtonLabel="My custom action" />
);

expect(asFragment()).toMatchSnapshot();
});

it('uses role=alertdialog', () => {
const { container } = render(
<ActionableNotification actionButtonLabel="My custom action" />
Expand Down
230 changes: 230 additions & 0 deletions packages/react/src/components/Notification/__tests__/__snapshots__/Notification-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,230 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ActionableNotification should render 1`] = `
<DocumentFragment>
<div
aria-labelledby="actionable-notification-subtitle-:r1:"
class="cds--actionable-notification cds--actionable-notification--toast cds--actionable-notification--error"
role="alertdialog"
>
<span
class="cds--visually-hidden"
role="link"
tabindex="0"
>
Focus sentinel
</span>
<div
class="cds--actionable-notification__details"
>
<svg
aria-hidden="true"
class="cds--toast-notification__icon"
fill="currentColor"
focusable="false"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
/>
<path
d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
data-icon-path="inner-path"
opacity="0"
/>
<title>
error icon
</title>
</svg>
<div
class="cds--actionable-notification__text-wrapper"
>
<div
class="cds--actionable-notification__content"
/>
</div>
</div>
<div
class="cds--actionable-notification__button-wrapper"
>
<button
class="cds--actionable-notification__action-button cds--btn cds--btn--sm cds--layout--size-sm cds--btn--tertiary"
type="button"
>
My custom action
</button>
<button
aria-label="close notification"
class="cds--actionable-notification__close-button"
title="close notification"
type="button"
>
<svg
aria-hidden="true"
class="cds--actionable-notification__close-icon"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"
/>
</svg>
</button>
</div>
<span
class="cds--visually-hidden"
role="link"
tabindex="0"
>
Focus sentinel
</span>
</div>
</DocumentFragment>
`;

exports[`InlineNotification should render 1`] = `
<DocumentFragment>
<div
class="cds--inline-notification cds--inline-notification--error"
role="status"
>
<div
class="cds--inline-notification__details"
>
<svg
aria-hidden="true"
class="cds--inline-notification__icon"
fill="currentColor"
focusable="false"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
/>
<path
d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
data-icon-path="inner-path"
opacity="0"
/>
<title>
error icon
</title>
</svg>
<div
class="cds--inline-notification__text-wrapper"
>
<div
class="cds--inline-notification__title"
dir="auto"
>
Notification title
</div>
</div>
</div>
<button
aria-hidden="true"
aria-label="close notification"
class="cds--inline-notification__close-button"
tabindex="-1"
title="close notification"
type="button"
>
<svg
aria-hidden="true"
class="cds--inline-notification__close-icon"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"
/>
</svg>
</button>
</div>
</DocumentFragment>
`;

exports[`ToastNotification should render 1`] = `
<DocumentFragment>
<div
class="cds--toast-notification cds--toast-notification--error"
role="status"
>
<svg
aria-hidden="true"
class="cds--toast-notification__icon"
fill="currentColor"
focusable="false"
height="20"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
/>
<path
d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
data-icon-path="inner-path"
opacity="0"
/>
<title>
error icon
</title>
</svg>
<div
class="cds--toast-notification__details"
>
<div
class="cds--toast-notification__title"
dir="auto"
>
Notification title
</div>
</div>
<button
aria-hidden="true"
aria-label="close notification"
class="cds--toast-notification__close-button"
tabindex="-1"
title="close notification"
type="button"
>
<svg
aria-hidden="true"
class="cds--toast-notification__close-icon"
fill="currentColor"
focusable="false"
height="16"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 32 32"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.4141 16L24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"
/>
</svg>
</button>
</div>
</DocumentFragment>
`;
2 changes: 1 addition & 1 deletion packages/styles/scss/components/notification/_toast-notification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@
}

.#{$prefix}--toast-notification__details {
margin-block-end: $spacing-05;
margin-inline-end: $spacing-05;
}

Expand Down Expand Up @@ -212,7 +213,6 @@
@include type-style('body-compact-01');

color: $text-inverse;
margin-block-end: $spacing-05;
padding-block-start: $spacing-03;
}

Expand Down
Loading