From 148299c97a6b374513273ee124bb90f8b546183c Mon Sep 17 00:00:00 2001 From: Franziska Bartsch Date: Tue, 11 Aug 2026 09:25:37 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Text=20=C3=BCberarbeitet=20allgemeine=20Var?= =?UTF-8?q?ianten=20Componente=20mit=20richtigen=20Varianten=20Bezeichunge?= =?UTF-8?q?n=20eingebaut?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/30-components/dialog.mdx | 32 ++++++++-------- src/components/previews/components/Dialog.tsx | 5 ++- .../properties/DialogVariantProperty.tsx | 38 ------------------- .../previews/properties/VariantProperty.tsx | 1 + src/components/previews/properties/index.ts | 1 - 5 files changed, 21 insertions(+), 56 deletions(-) delete mode 100644 src/components/previews/properties/DialogVariantProperty.tsx diff --git a/docs/30-components/dialog.mdx b/docs/30-components/dialog.mdx index db749ec0d0..9cabbd3c52 100644 --- a/docs/30-components/dialog.mdx +++ b/docs/30-components/dialog.mdx @@ -106,37 +106,39 @@ Die Beschriftung wird über `_label` gesetzt. Der Inhalt wird über den Slot ber sourceCodeDetailsCollapsed /> -#### Varianten +#### Breite -Der Dialog unterstützt zwei Varianten: +Die Breite des Dialogs wird über `_width` gesteuert: -**Verfügbare Varianten:** -- `blank`: Volle Breite, minimales Styling (Standard) -- `card`: Mit Abstand und Kartendesign +**Hinweis:** Die maximale Breite ist auf 100% begrenzt. -#### Breite +#### Varianten -Die Breite des Dialogs wird über `_width` gesteuert: +Der Dialog unterstützt zwei Varianten: -**Hinweis:** Die maximale Breite ist auf 100% begrenzt. +**Verfügbare Varianten:** +- `blank`: Kein Design, bitte selbst stylen +- `card`: Nutzt das Design der Karte + + #### Callback-Handling @@ -152,4 +154,4 @@ Der `onClose`-Callback wird aufgerufen, wenn der Dialog geschlossen wird (durch ## API - \ No newline at end of file + diff --git a/src/components/previews/components/Dialog.tsx b/src/components/previews/components/Dialog.tsx index 3ff322b48c..a505bddf29 100644 --- a/src/components/previews/components/Dialog.tsx +++ b/src/components/previews/components/Dialog.tsx @@ -4,9 +4,10 @@ import { KolButton, KolInputText, KolDialog } from '@public-ui/react-v19'; import { translate } from '@docusaurus/Translate'; import { sanitizeHtml } from '../../../shares/sanitize'; import type { JSX } from '@public-ui/components'; -import { DialogVariantProperty, MultiLineTextProperty } from '../properties'; +import { MultiLineTextProperty, VariantProperty } from '../properties'; import type { PreviewDefaults } from '../utils'; import { getPreviewDefaults } from '../utils'; +import { variantDialogOptions } from '../properties/VariantProperty'; interface DialogPreviewProps extends JSX.KolDialog { _slot?: string; @@ -31,7 +32,7 @@ const DialogPreview: React.FC> = (props) => propertyComponents={{ _label: , _width: , - _variant: , + _variant: , _slot: , }} componentName="KolDialog" diff --git a/src/components/previews/properties/DialogVariantProperty.tsx b/src/components/previews/properties/DialogVariantProperty.tsx deleted file mode 100644 index 0153eeca8f..0000000000 --- a/src/components/previews/properties/DialogVariantProperty.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { KolInputCheckbox } from '@public-ui/react-v19'; -import React from 'react'; - -const variantOptions = ['card', 'blank'] as const; - -const DialogVariantProperty = (props: { - label: string; - defaultValue: string; - _value?: string; - _on?: { - onInput?: (event: Event, value: unknown) => void; - }; -}) => { - return ( -
- {props.label} -
- {variantOptions.map((variant) => ( - { - if (value) { - props._on?.onInput?.(event, variant); - } - }, - }} - /> - ))} -
-
- ); -}; - -export default DialogVariantProperty; diff --git a/src/components/previews/properties/VariantProperty.tsx b/src/components/previews/properties/VariantProperty.tsx index 470b8d7f31..84941c9854 100644 --- a/src/components/previews/properties/VariantProperty.tsx +++ b/src/components/previews/properties/VariantProperty.tsx @@ -3,6 +3,7 @@ import React from 'react'; export const variantButtonOptions = ['normal', 'primary', 'secondary', 'tertiary', 'danger', 'ghost']; export const variantLinkOptions = ['normal', 'small']; +export const variantDialogOptions = ['card', 'blank']; const VariantProperty = (props: { label: string; diff --git a/src/components/previews/properties/index.ts b/src/components/previews/properties/index.ts index 3091afc275..d5088083f8 100644 --- a/src/components/previews/properties/index.ts +++ b/src/components/previews/properties/index.ts @@ -6,7 +6,6 @@ export { default as BoundedNumberProperty } from './BoundedNumberProperty'; export { default as VariantProperty } from './VariantProperty'; export { default as ClampedNumberProperty } from './ClampedNumberProperty'; export { default as CustomCssProperty } from './CustomCssProperty'; -export { default as DialogVariantProperty } from './DialogVariantProperty'; export { default as IconsProperty } from './IconsProperty'; export { default as LevelProperty } from './LevelProperty'; export { default as LinksProperty } from './LinksProperty'; From b710b35aae02d8a90347519602435e06fc90ea58 Mon Sep 17 00:00:00 2001 From: Franziska Bartsch Date: Tue, 11 Aug 2026 09:56:54 +0200 Subject: [PATCH 2/3] text angepasst --- docs/30-components/dialog.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/30-components/dialog.mdx b/docs/30-components/dialog.mdx index 9cabbd3c52..1f71674076 100644 --- a/docs/30-components/dialog.mdx +++ b/docs/30-components/dialog.mdx @@ -135,7 +135,7 @@ Der Dialog unterstützt zwei Varianten: /> **Verfügbare Varianten:** -- `blank`: Kein Design, bitte selbst stylen +- `blank`: Minimales Design - Themeabhängig Hintergrund und Abrundung - `card`: Nutzt das Design der Karte From de4502f7ed2b68c1d74bfb172f6668a3adce5248 Mon Sep 17 00:00:00 2001 From: Franziska Bartsch Date: Tue, 11 Aug 2026 10:23:22 +0200 Subject: [PATCH 3/3] fixed modal docu --- src/components/previews/components/Modal.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/previews/components/Modal.tsx b/src/components/previews/components/Modal.tsx index 05f9ecbaa4..31ae4044d3 100644 --- a/src/components/previews/components/Modal.tsx +++ b/src/components/previews/components/Modal.tsx @@ -1,12 +1,13 @@ import React, { useRef } from 'react'; import Preview, { PreviewLayout } from '../Preview'; -import { DialogVariantProperty, MultiLineTextProperty } from '../properties'; +import { VariantProperty, MultiLineTextProperty } from '../properties'; import type { JSX } from '@public-ui/components'; import { KolButton, KolInputText, KolModal } from '@public-ui/react-v19'; import { translate } from '@docusaurus/Translate'; import { sanitizeHtml } from '../../../shares/sanitize'; import type { PreviewDefaults } from '../utils'; import { getPreviewDefaults } from '../utils'; +import { variantDialogOptions } from '../properties/VariantProperty'; interface ModalPreviewProps extends JSX.KolModal { _slot?: string; @@ -30,7 +31,7 @@ const ModalPreview = (props: PreviewDefaults) => { _label: , _width: , _slot: , - _variant: , + _variant: , }} componentName="KolModal" layout={PreviewLayout.CENTERED}