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

Apply BEM refactor for toaster #7224

Merged
merged 5 commits into from
Dec 19, 2024
Merged

Apply BEM refactor for toaster #7224

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8dd0cfb
bem refactor toast
AlexanderSchmidtCE Dec 19, 2024
537bfd0
Merge branch 'develop' into 7036-bem-refactor-toaster
AlexanderSchmidtCE Dec 19, 2024
6a92cce
fixed footer background
AlexanderSchmidtCE Dec 19, 2024
5c23144
fixed wrong classname
AlexanderSchmidtCE Dec 19, 2024
bce4058
style fix
AlexanderSchmidtCE Dec 19, 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
2 changes: 1 addition & 1 deletion packages/components/src/components/toaster/shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export class KolToastContainer implements ToasterAPI {
{this.state._toastStates.length > 1 && (
<KolButtonTag
_label={translate('kol-toast-close-all')}
class="close-all"
class="kol-toast-container__button-close-all"
_on={{
onClick: () => {
void this.closeAll();
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/components/toaster/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@
z-index: 200;
}

.close-all {
align-self: flex-end;
.kol-toast-container {
&__close-all {
align-self: flex-end;
}
}
}
4 changes: 2 additions & 2 deletions packages/components/src/functional-components/ToastItem/ToastItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ const ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) =
const { type, label, description, variant, alertVariant } = toast;

return (
<div class={clsx('toast', status)}>
<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>
<KolAlertFc
class="alert"
class="kol-toast-item__alert"
alert={true}
label={label}
level={0}
Expand Down
4 changes: 2 additions & 2 deletions ...components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ToastItemFc should render with basic props and status 1`] = `
<div class="settled toast">
<div class="alert kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info" role="alert">
<div class="kol-toast-item kol-toast-item--settled">
<div class="kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info kol-toast-item__alert" role="alert">
<div class="kol-alert__container">
<kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
<div class="kol-alert__container-content">
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('ToastItemFc', () => {
for (const status of statuses) {
const page = await renderFunctionalComponentToSpecPage(() => <ToastItemFc toast={basicToast} onClose={mockOnClose} status={status} />);

expect(page.root?.classList.contains(status)).toBeTruthy();
expect(page.root?.classList.contains(`kol-toast-item--${status}`)).toBeTruthy();
}
});
});
6 changes: 3 additions & 3 deletions packages/themes/default/src/components/toast-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
@import '../mixins/alert-wc';

@layer kol-theme-component {
@include kol-alert-theme;

:host {
top: rem(16);
right: rem(16);
width: rem(440);
}

.toast {
.kol-toast-item {
margin-top: rem(16);
}

@include kol-alert-theme;
}
11 changes: 5 additions & 6 deletions packages/themes/ecl/src/ecl-ec/components/toast-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@
max-width: 100%;
}

.toast {
.kol-toast-item {
@include kol-alert-theme;
display: block;
background-color: #fff;
margin-top: rem(16);

@include kol-alert-theme;
}

.alert {
display: block;
&__alert {
display: block;
}
}
}
12 changes: 6 additions & 6 deletions packages/themes/ecl/src/ecl-eu/components/toast-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,16 @@
max-width: 100%;
}

.toast {
.kol-toast-item {
@include kol-alert-theme;

display: block;
background-color: #fff;
margin-top: rem(16);

@include kol-alert-theme;
&__alert {
display: block;
}

.heading {
width: 100%;
Expand All @@ -24,8 +28,4 @@
}
}
}

.alert {
display: block;
}
}
2 changes: 1 addition & 1 deletion packages/themes/itzbund/src/components/toast-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
transform: translateX(-50%);
}

.toast {
.kol-toast-item {
background-color: #fff;
margin-top: rem(16);

Expand Down
Loading