From dd4fae9c16a696ea65a7eaa3d00cf35281453a7e Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 8 Oct 2024 12:12:49 +0200 Subject: [PATCH 1/7] set alertVariant to deprecated und include variant Refs: #6662 --- packages/components/src/components/toaster/InternalToast.tsx | 2 +- packages/components/src/components/toaster/toaster.tsx | 2 ++ packages/components/src/schema/components/toaster.ts | 4 ++++ 3 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/toaster/InternalToast.tsx b/packages/components/src/components/toaster/InternalToast.tsx index a5b167830d..39cbce2cd2 100644 --- a/packages/components/src/components/toaster/InternalToast.tsx +++ b/packages/components/src/components/toaster/InternalToast.tsx @@ -19,7 +19,7 @@ export const InternalToast = ({ key, onClose, onRef, toastState }: Props) => { _level={0} _hasCloser={true} _type={toastState.toast.type} - _variant={toastState.toast.alertVariant || 'card'} + _variant={toastState.toast.alertVariant || toastState.toast.variant || 'card'} _on={{ onClose }} >
{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}
diff --git a/packages/components/src/components/toaster/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx index 01c7f07a1e..072e6529d6 100644 --- a/packages/components/src/components/toaster/toaster.tsx +++ b/packages/components/src/components/toaster/toaster.tsx @@ -50,6 +50,8 @@ export class ToasterService { if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') { if (!toast.alertVariant && this.options?.defaultAlertVariant) { toast.alertVariant = this.options?.defaultAlertVariant; + } else if (!toast.variant && this.options?.defaultAlertVariant) { + toast.variant = this.options?.defaultAlertVariant; } return this.toastContainerElement.enqueue(toast); diff --git a/packages/components/src/schema/components/toaster.ts b/packages/components/src/schema/components/toaster.ts index 001d386b1e..d36abc9979 100644 --- a/packages/components/src/schema/components/toaster.ts +++ b/packages/components/src/schema/components/toaster.ts @@ -13,7 +13,11 @@ export type Toast = { render?: ToastRenderFunction; label: LabelPropType; type: AlertType; + /** + * @deprecated Use variant instead + */ alertVariant?: AlertVariant; + variant?: AlertVariant; }; export type ToastState = { From ab8917386c7670ef576434a372d87f0991292b96 Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 8 Oct 2024 12:55:18 +0200 Subject: [PATCH 2/7] updated readme and sample Refs: #6662 --- packages/components/src/components/toaster/readme.md | 2 +- packages/samples/react/src/components/toast/basic.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md index 3d75e49d04..7d1e0f1e06 100644 --- a/packages/components/src/components/toaster/readme.md +++ b/packages/components/src/components/toaster/readme.md @@ -24,7 +24,7 @@ toaster.enqueue({ label: 'This is the title', description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', type: 'info', - alertType: 'msg', // Standard: 'card' + variant: 'msg', // Standard: 'card' }); ``` diff --git a/packages/samples/react/src/components/toast/basic.tsx b/packages/samples/react/src/components/toast/basic.tsx index faeefb9827..3f9d04d5ab 100644 --- a/packages/samples/react/src/components/toast/basic.tsx +++ b/packages/samples/react/src/components/toast/basic.tsx @@ -23,7 +23,7 @@ export const ToastBasic: FC = () => { description: 'Toasty', label: `Toast with variant 'msg'`, type: 'warning', - alertVariant: 'msg', + variant: 'msg', }); }; From 052e3aacd9ae3d68ce8043c666c61ace9e18726d Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 8 Oct 2024 12:57:10 +0200 Subject: [PATCH 3/7] rename defaultAlertVariant to defaultVariant Refs: #6662 --- packages/components/src/components/toaster/readme.md | 6 +++--- packages/components/src/components/toaster/toaster.tsx | 8 ++++---- packages/components/src/schema/components/toaster.ts | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md index 7d1e0f1e06..cf072d59d7 100644 --- a/packages/components/src/components/toaster/readme.md +++ b/packages/components/src/components/toaster/readme.md @@ -90,9 +90,9 @@ Type: `Promise` #### Parameters -| Name | Type | Description | -| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `toast` | `{ description?: string \| undefined; render?: ToastRenderFunction \| undefined; label: string; type: "default" \| "info" \| "success" \| "warning" \| "error"; alertVariant?: "card" \| "msg" \| undefined; }` | | +| Name | Type | Description | +| ------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------- | +| `toast` | `{ description?: string \| undefined; render?: ToastRenderFunction \| undefined; label: string; type: "default" \| "info" \| "success" \| "warning" \| "error"; variant?: "card" \| "msg" \| undefined; }` | | #### Returns diff --git a/packages/components/src/components/toaster/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx index 072e6529d6..8d86a4b280 100644 --- a/packages/components/src/components/toaster/toaster.tsx +++ b/packages/components/src/components/toaster/toaster.tsx @@ -48,10 +48,10 @@ export class ToasterService { * so we can't enqueue toasts. */ if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') { - if (!toast.alertVariant && this.options?.defaultAlertVariant) { - toast.alertVariant = this.options?.defaultAlertVariant; - } else if (!toast.variant && this.options?.defaultAlertVariant) { - toast.variant = this.options?.defaultAlertVariant; + if (!toast.alertVariant && this.options?.defaultVariant) { + toast.alertVariant = this.options?.defaultVariant; + } else if (!toast.variant && this.options?.defaultVariant) { + toast.variant = this.options?.defaultVariant; } return this.toastContainerElement.enqueue(toast); diff --git a/packages/components/src/schema/components/toaster.ts b/packages/components/src/schema/components/toaster.ts index d36abc9979..bf68641904 100644 --- a/packages/components/src/schema/components/toaster.ts +++ b/packages/components/src/schema/components/toaster.ts @@ -27,7 +27,7 @@ export type ToastState = { }; export type ToasterOptions = { - defaultAlertVariant: AlertVariant; + defaultVariant: AlertVariant; }; type RequiredProps = NonNullable; From 28c3a9dc7d5a09c53d77b9428810524104c0e9e6 Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 8 Oct 2024 13:25:07 +0200 Subject: [PATCH 4/7] format Refs: #6662 --- .../src/components/toaster/readme.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md index cf072d59d7..5352f6f75a 100644 --- a/packages/components/src/components/toaster/readme.md +++ b/packages/components/src/components/toaster/readme.md @@ -16,14 +16,14 @@ import { ToasterService } from '@public-ui/components'; // Get the toaster instance for the current HTML document. const toaster = ToasterService.getInstance(document, { - defaultAlertType: 'msg', // Standard: 'card' + defaultAlertType: 'msg', // Standard: 'card' }); // Enqueue a new toast to the toaster to display: toaster.enqueue({ - label: 'This is the title', - description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', - type: 'info', + label: 'This is the title', + description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', + type: 'info', variant: 'msg', // Standard: 'card' }); ``` @@ -48,13 +48,13 @@ HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeb ```ts const closeToast = toaster.enqueue({ - render: (element: HTMLElement, { close }) => { - element.textContent = 'Mein Inhalt'; - const customCloseButton = document.createElement('button'); - customCloseButton.textContent = 'Toast schließen'; - element.appendChild(customCloseButton); - customCloseButton.addEventListener('click', close, { once: true }); - }, + render: (element: HTMLElement, {close}) => { + element.textContent = 'Mein Inhalt'; + const customCloseButton = document.createElement('button'); + customCloseButton.textContent = 'Toast schließen'; + element.appendChild(customCloseButton); + customCloseButton.addEventListener('click', close, {once: true}); + }, }); /* Optional: Toast wieder schließen mit `closeToast()` */ @@ -79,7 +79,7 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl #### Parameters | Name | Type | Description | -| ----------- | --------- | ----------- | +|-------------|-----------|-------------| | `immediate` | `boolean` | | #### Returns @@ -91,7 +91,7 @@ Type: `Promise` #### Parameters | Name | Type | Description | -| ------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ----------- | +|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------| | `toast` | `{ description?: string \| undefined; render?: ToastRenderFunction \| undefined; label: string; type: "default" \| "info" \| "success" \| "warning" \| "error"; variant?: "card" \| "msg" \| undefined; }` | | #### Returns From 919e910a729085599f69709cf4b3a523f9f1ed2c Mon Sep 17 00:00:00 2001 From: alex_ Date: Tue, 8 Oct 2024 13:30:18 +0200 Subject: [PATCH 5/7] format Refs: #6662 --- .../src/components/toaster/readme.md | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md index 5352f6f75a..0bce7da354 100644 --- a/packages/components/src/components/toaster/readme.md +++ b/packages/components/src/components/toaster/readme.md @@ -16,15 +16,15 @@ import { ToasterService } from '@public-ui/components'; // Get the toaster instance for the current HTML document. const toaster = ToasterService.getInstance(document, { - defaultAlertType: 'msg', // Standard: 'card' + defaultAlertType: 'msg', // Standard: 'card' }); // Enqueue a new toast to the toaster to display: toaster.enqueue({ - label: 'This is the title', - description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', - type: 'info', - variant: 'msg', // Standard: 'card' + label: 'This is the title', + description: 'Magna eu sit adipisicing cillum amet esse in aute quis in dolore.', + type: 'info', + variant: 'msg', // Standard: 'card' }); ``` @@ -48,13 +48,13 @@ HTMLElement der Toast-Komponente aufgerufen. Zudem wird auch ein Objekt übergeb ```ts const closeToast = toaster.enqueue({ - render: (element: HTMLElement, {close}) => { - element.textContent = 'Mein Inhalt'; - const customCloseButton = document.createElement('button'); - customCloseButton.textContent = 'Toast schließen'; - element.appendChild(customCloseButton); - customCloseButton.addEventListener('click', close, {once: true}); - }, + render: (element: HTMLElement, { close }) => { + element.textContent = 'Mein Inhalt'; + const customCloseButton = document.createElement('button'); + customCloseButton.textContent = 'Toast schließen'; + element.appendChild(customCloseButton); + customCloseButton.addEventListener('click', close, { once: true }); + }, }); /* Optional: Toast wieder schließen mit `closeToast()` */ @@ -79,7 +79,7 @@ Verwenden Sie das Attribut **`_type`**, um den Typ des Toasts festzulegen. Mögl #### Parameters | Name | Type | Description | -|-------------|-----------|-------------| +| ----------- | --------- | ----------- | | `immediate` | `boolean` | | #### Returns @@ -91,7 +91,7 @@ Type: `Promise` #### Parameters | Name | Type | Description | -|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------| +| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `toast` | `{ description?: string \| undefined; render?: ToastRenderFunction \| undefined; label: string; type: "default" \| "info" \| "success" \| "warning" \| "error"; variant?: "card" \| "msg" \| undefined; }` | | #### Returns From bc30ee32fe22a080349338df9fbe73d051db6922 Mon Sep 17 00:00:00 2001 From: alex_ Date: Wed, 9 Oct 2024 16:00:17 +0200 Subject: [PATCH 6/7] deprecated defaultAlertVariant Refs: #6662 --- packages/components/src/components/toaster/toaster.tsx | 10 ++++++---- packages/components/src/schema/components/toaster.ts | 4 ++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/toaster/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx index 8d86a4b280..25266edd94 100644 --- a/packages/components/src/components/toaster/toaster.tsx +++ b/packages/components/src/components/toaster/toaster.tsx @@ -48,10 +48,12 @@ export class ToasterService { * so we can't enqueue toasts. */ if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') { - if (!toast.alertVariant && this.options?.defaultVariant) { - toast.alertVariant = this.options?.defaultVariant; - } else if (!toast.variant && this.options?.defaultVariant) { - toast.variant = this.options?.defaultVariant; + const defaultVariant = this.options?.defaultVariant ?? undefined; + const defaultAlertVariant = this.options?.defaultAlertVariant ?? undefined; + if (!toast.alertVariant && this.options) { + toast.alertVariant = defaultAlertVariant ?? defaultVariant; + } else if (!toast.variant && this.options) { + toast.variant = defaultAlertVariant ?? defaultVariant; } return this.toastContainerElement.enqueue(toast); diff --git a/packages/components/src/schema/components/toaster.ts b/packages/components/src/schema/components/toaster.ts index bf68641904..35f23c464d 100644 --- a/packages/components/src/schema/components/toaster.ts +++ b/packages/components/src/schema/components/toaster.ts @@ -27,6 +27,10 @@ export type ToastState = { }; export type ToasterOptions = { + /** + * @deprecated Use defaultVariant instead + */ + defaultAlertVariant: AlertVariant; defaultVariant: AlertVariant; }; From 036b0ee488234b485d09817e778c6468915a75b3 Mon Sep 17 00:00:00 2001 From: alex_ Date: Fri, 11 Oct 2024 10:09:12 +0200 Subject: [PATCH 7/7] fixed defaultVariant Bug Refs: #6662 --- packages/components/src/components/toaster/toaster.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/components/toaster/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx index 25266edd94..88351a6152 100644 --- a/packages/components/src/components/toaster/toaster.tsx +++ b/packages/components/src/components/toaster/toaster.tsx @@ -50,9 +50,7 @@ export class ToasterService { if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') { const defaultVariant = this.options?.defaultVariant ?? undefined; const defaultAlertVariant = this.options?.defaultAlertVariant ?? undefined; - if (!toast.alertVariant && this.options) { - toast.alertVariant = defaultAlertVariant ?? defaultVariant; - } else if (!toast.variant && this.options) { + if (!toast.alertVariant && !toast.variant && this.options) { toast.variant = defaultAlertVariant ?? defaultVariant; }