Skip to content

Commit

Permalink
Toast Service: Convert Toast to internal functional component and all…
Browse files Browse the repository at this point in the history 
…ow render function instead of description string (#5477)
  • Loading branch information
@deleonio
deleonio committed Oct 25, 2023
2 parents 9bf2a71 + 52346cb commit d13d068
Show file tree
Hide file tree
Showing 44 changed files with 126 additions and 508 deletions.
51 changes: 2 additions & 49 deletions packages/components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ import { SpinVariantPropType } from "./types/props/variant/spin";
import { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types";
import { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
import { CSSResize } from "./components/textarea/types";
import { KoliBriToastEventCallbacks } from "./types/toast";
import { Toast, ToastState, ToastStatus } from "./components/toast-container/types";
import { Toast, ToastState } from "./components/toast-container/types";
export { LabelPropType, LabelWithExpertSlotPropType } from "./types/props/label";
export { TooltipAlignPropType } from "./types/props/tooltip-align";
export { HeadingLevel } from "./types/heading-level";
Expand Down Expand Up @@ -115,8 +114,7 @@ export { SpinVariantPropType } from "./types/props/variant/spin";
export { KoliBriTableDataType, KoliBriTableHeaders, KoliBriTablePaginationProps } from "./components/table/types";
export { KoliBriTabsCallbacks, TabButtonProps } from "./components/tabs/types";
export { CSSResize } from "./components/textarea/types";
export { KoliBriToastEventCallbacks } from "./types/toast";
export { Toast, ToastState, ToastStatus } from "./components/toast-container/types";
export { Toast, ToastState } from "./components/toast-container/types";
export namespace Components {
interface KolAbbr {
/**
Expand Down Expand Up @@ -2433,24 +2431,6 @@ export namespace Components {
*/
"_value"?: string;
}
interface KolToast {
/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
"_label": LabelPropType;
/**
* Defines the event callback functions for the component.
*/
"_on"?: KoliBriToastEventCallbacks;
/**
* Defines the current toast status.
*/
"_status": ToastStatus;
/**
* Defines either the type of the component or of the components interactive element.
*/
"_type"?: AlertType;
}
interface KolToastContainer {
"enqueue": (toast: Toast) => Promise<void>;
}
Expand Down Expand Up @@ -2809,12 +2789,6 @@ declare global {
prototype: HTMLKolTextareaElement;
new (): HTMLKolTextareaElement;
};
interface HTMLKolToastElement extends Components.KolToast, HTMLStencilElement {
}
var HTMLKolToastElement: {
prototype: HTMLKolToastElement;
new (): HTMLKolToastElement;
};
interface HTMLKolToastContainerElement extends Components.KolToastContainer, HTMLStencilElement {
}
var HTMLKolToastContainerElement: {
Expand Down Expand Up @@ -2889,7 +2863,6 @@ declare global {
"kol-table": HTMLKolTableElement;
"kol-tabs": HTMLKolTabsElement;
"kol-textarea": HTMLKolTextareaElement;
"kol-toast": HTMLKolToastElement;
"kol-toast-container": HTMLKolToastContainerElement;
"kol-tooltip-wc": HTMLKolTooltipWcElement;
"kol-version": HTMLKolVersionElement;
Expand Down Expand Up @@ -5211,24 +5184,6 @@ declare namespace LocalJSX {
*/
"_value"?: string;
}
interface KolToast {
/**
* Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
*/
"_label": LabelPropType;
/**
* Defines the event callback functions for the component.
*/
"_on"?: KoliBriToastEventCallbacks;
/**
* Defines the current toast status.
*/
"_status": ToastStatus;
/**
* Defines either the type of the component or of the components interactive element.
*/
"_type"?: AlertType;
}
interface KolToastContainer {
}
interface KolTooltipWc {
Expand Down Expand Up @@ -5307,7 +5262,6 @@ declare namespace LocalJSX {
"kol-table": KolTable;
"kol-tabs": KolTabs;
"kol-textarea": KolTextarea;
"kol-toast": KolToast;
"kol-toast-container": KolToastContainer;
"kol-tooltip-wc": KolTooltipWc;
"kol-version": KolVersion;
Expand Down Expand Up @@ -5375,7 +5329,6 @@ declare module "@stencil/core" {
"kol-table": LocalJSX.KolTable & JSXBase.HTMLAttributes<HTMLKolTableElement>;
"kol-tabs": LocalJSX.KolTabs & JSXBase.HTMLAttributes<HTMLKolTabsElement>;
"kol-textarea": LocalJSX.KolTextarea & JSXBase.HTMLAttributes<HTMLKolTextareaElement>;
"kol-toast": LocalJSX.KolToast & JSXBase.HTMLAttributes<HTMLKolToastElement>;
"kol-toast-container": LocalJSX.KolToastContainer & JSXBase.HTMLAttributes<HTMLKolToastContainerElement>;
"kol-tooltip-wc": LocalJSX.KolTooltipWc & JSXBase.HTMLAttributes<HTMLKolTooltipWcElement>;
"kol-version": LocalJSX.KolVersion & JSXBase.HTMLAttributes<HTMLKolVersionElement>;
Expand Down
2 changes: 0 additions & 2 deletions packages/components/src/components/button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ Probleme mit Disabled-Status
### Used by

- [kol-nav](../nav)
- [kol-pagination](../pagination)
- [kol-table](../table)
- [kol-toast-container](../toast-container)

Expand All @@ -140,7 +139,6 @@ graph TD;
kol-span-wc --> kol-icon
kol-tooltip-wc --> kol-span-wc
kol-nav --> kol-button
kol-pagination --> kol-button
kol-table --> kol-button
kol-toast-container --> kol-button
style kol-button fill:#f9f,stroke:#333,stroke-width:4px
Expand Down
2 changes: 0 additions & 2 deletions packages/components/src/components/component-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ import { KolTable } from './table/component';
import { KolTabs } from './tabs/component';
import { KolTextarea } from './textarea/component';
import { KolToastContainer } from './toast-container/component';
import { KolToast } from './toast/component';
import { KolTooltip } from './tooltip/component';
import { KolVersion } from './version/component';

Expand Down Expand Up @@ -114,7 +113,6 @@ export const COMPONENTS = [
KolTable,
KolTabs,
KolTextarea,
KolToast,
KolToastContainer,
KolTooltip,
KolVersion,
Expand Down
8 changes: 2 additions & 6 deletions packages/components/src/components/pagination/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
| `_pageSizeOptions` | `_page-size-options` | Defines the options for the page-size-select. | `number[] \| string` | `[]` |
| `_siblingCount` | `_sibling-count` | Defines the amount of pages to show next to the current page. | `number \| undefined` | `1` |
| `_tooltipAlign` | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left. | `"bottom" \| "left" \| "right" \| "top" \| undefined` | `'top'` |
| `_variant` | `_variant` | Defines which variant should be used for presentation. | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined` | `'normal'` |

## Dependencies

Expand All @@ -68,18 +67,15 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte

### Depends on

- [kol-button](../button)
- [kol-select](../select)
- kol-button-wc
- [kol-select](../select)

### Graph

```mermaid
graph TD;
kol-pagination --> kol-button
kol-pagination --> kol-select
kol-pagination --> kol-button-wc
kol-button --> kol-button-wc
kol-pagination --> kol-select
kol-button-wc --> kol-span-wc
kol-button-wc --> kol-tooltip-wc
kol-span-wc --> kol-icon
Expand Down
19 changes: 9 additions & 10 deletions packages/components/src/components/table/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,14 +121,14 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr

## Properties

| Property | Attribute | Description | Type | Default |
| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \| string` | `undefined` |
| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \| string \| undefined` | `undefined` |
| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \| { horizontal?: KoliBriTableHeaderCell[][] \| undefined; vertical?: KoliBriTableHeaderCell[][] \| undefined; }` | `undefined` |
| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
| `_minWidth` | `_min-width` | Defines the table min-width. | `string \| undefined` | `undefined` |
| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _max?: number \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified<PaginationHasButton> \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified<number[]> \| undefined; _siblingCount?: number \| undefined; _variant?: ButtonVariantPropType \| undefined; _customClass?: string \| undefined; _label?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ----------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \| string` | `undefined` |
| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \| string \| undefined` | `undefined` |
| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \| { horizontal?: KoliBriTableHeaderCell[][] \| undefined; vertical?: KoliBriTableHeaderCell[][] \| undefined; }` | `undefined` |
| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
| `_minWidth` | `_min-width` | Defines the table min-width. | `string \| undefined` | `undefined` |
| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _max?: number \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified<PaginationHasButton> \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified<number[]> \| undefined; _siblingCount?: number \| undefined; _customClass?: string \| undefined; _label?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |

## Dependencies

Expand All @@ -148,9 +148,8 @@ graph TD;
kol-button-wc --> kol-tooltip-wc
kol-span-wc --> kol-icon
kol-tooltip-wc --> kol-span-wc
kol-pagination --> kol-button
kol-pagination --> kol-select
kol-pagination --> kol-button-wc
kol-pagination --> kol-select
kol-select --> kol-input
kol-input --> kol-icon
kol-input --> kol-button-wc
Expand Down
Loading

0 comments on commit d13d068

Please sign in to comment.