Skip to content

Commit 785e3c8

Browse files
Copilotlaske185
Copilot
and
laske185
committed
feat(preview): add SplitButtonPreview component
Agent-Logs-Url: https://github.com/public-ui/public-ui.github.io/sessions/16e73908-7d54-4aad-9eae-209d7cdda43f Co-authored-by: laske185 <37439758+laske185@users.noreply.github.com>
1 parent 0c77600 commit 785e3c8

5 files changed

Lines changed: 116 additions & 31 deletions

File tree

‎docs/30-components/split-button.mdx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
11
---
22
title: Split-Button
33
description: Beschreibung, Spezifikation und Beispiele für die Split-Button-Komponente.
4-
tags:
5-
- Split-Button
6-
- Beschreibung
7-
- Spezifikation
8-
- Beispiele
94
---
105
import Readme from '../../readmes/split-button/readme.md';
11-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
126
import { ExampleLink } from '@site/src/components/ExampleLink';
7+
import SplitButtonPreview from '@site/src/components/previews/components/SplitButton';
138

149
# SplitButton
1510

@@ -24,11 +19,11 @@ dem sich weitere Aktionen verbergen.
2419

2520
## Konstruktion
2621

27-
### Code
28-
29-
```html
30-
<kol-split-button _label="Split-Button">Split-Button Popover</kol-split-button>
31-
```
22+
<SplitButtonPreview
23+
visibleProperties={['_label', '_variant', '_tooltipAlign', '_icons', '_disabled', '_hideLabel', '_slot']}
24+
codeCollapsable
25+
codeCollapsed
26+
/>
3227

3328
### Events
3429

@@ -41,14 +36,16 @@ Zur Behandlung von Events bzw. Callbacks siehe <kol-link _label="Events" _href="
4136

4237
### Beispiel
4338

44-
<kol-split-button _label="Split-Button">
45-
Split-Button Popover
46-
</kol-split-button>
39+
<SplitButtonPreview
40+
visibleProperties={[]}
41+
codeCollapsable
42+
codeCollapsed
43+
/>
4744

48-
<Readme />
45+
# API
4946

50-
<ExampleLink component="split-button" />
47+
<Readme />
5148

52-
## Live-Editor
49+
## Beispiele
5350

54-
<LiveEditorCompact component="split-button" />
51+
<ExampleLink component="split-button" />

‎i18n/de/code.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,21 @@
519519
"preview.component.image.label": {
520520
"message": "Beispielbild"
521521
},
522+
"preview.component.split-button.label": {
523+
"message": "Split-Button"
524+
},
525+
"preview.component.split-button.menu.edit": {
526+
"message": "Bearbeiten"
527+
},
528+
"preview.component.split-button.menu.copy": {
529+
"message": "Kopieren"
530+
},
531+
"preview.component.split-button.menu.archive": {
532+
"message": "Archivieren"
533+
},
534+
"preview.component.split-button.menu.delete": {
535+
"message": "Löschen"
536+
},
522537
"preview.property.remove": {
523538
"message": "Entfernen"
524539
},

‎i18n/en/code.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -519,6 +519,21 @@
519519
"preview.component.image.label": {
520520
"message": "Sample image"
521521
},
522+
"preview.component.split-button.label": {
523+
"message": "Split Button"
524+
},
525+
"preview.component.split-button.menu.edit": {
526+
"message": "Edit"
527+
},
528+
"preview.component.split-button.menu.copy": {
529+
"message": "Copy"
530+
},
531+
"preview.component.split-button.menu.archive": {
532+
"message": "Archive"
533+
},
534+
"preview.component.split-button.menu.delete": {
535+
"message": "Delete"
536+
},
522537
"preview.property.remove": {
523538
"message": "Remove"
524539
},

‎i18n/en/docusaurus-plugin-content-docs/current/30-components/split-button.mdx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ title: Split-Button
33
description: Description, specification and examples for the Split Button component.
44
---
55
import Readme from '/readmes/split-button/readme.md';
6-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
76
import { ExampleLink } from '@site/src/components/ExampleLink';
7+
import SplitButtonPreview from '@site/src/components/previews/components/SplitButton';
88

99
# Split-Button
1010

@@ -19,11 +19,11 @@ which further actions are hidden.
1919

2020
## Construction
2121

22-
### Code
23-
24-
```html
25-
<kol-split-button _label="Split-Button">Split-Button Popover</kol-split-button>
26-
```
22+
<SplitButtonPreview
23+
visibleProperties={['_label', '_variant', '_tooltipAlign', '_icons', '_disabled', '_hideLabel', '_slot']}
24+
codeCollapsable
25+
codeCollapsed
26+
/>
2727

2828
### Events
2929

@@ -36,14 +36,16 @@ For the handling of events or callbacks, see <kol-link _label="Events" _href="..
3636

3737
### Example
3838

39-
<kol-split-button _label="Split-Button">
40-
Split button popover
41-
</kol-split-button>
39+
<SplitButtonPreview
40+
visibleProperties={[]}
41+
codeCollapsable
42+
codeCollapsed
43+
/>
4244

43-
<Readme />
45+
# API
4446

45-
<ExampleLink component="split-button" />
47+
<Readme />
4648

47-
## Live editor
49+
## Examples
4850

49-
<LiveEditorCompact component="split-button" />
51+
<ExampleLink component="split-button" />

‎src/components/previews/components/SplitButton.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import Preview, { PreviewLayout } from '../Preview';
3+
import { BooleanProperty, AlignProperty, IconsProperty, ButtonVariantProperty } from '../properties';
4+
import type { JSX } from '@public-ui/components';
5+
import { KolInputText, KolSplitButton, KolToolbar } from '@public-ui/react-v19';
6+
import { translate } from '@docusaurus/Translate';
7+
8+
interface SplitButtonPreviewComponentProps {
9+
initialProps?: JSX.KolSplitButton;
10+
visibleProperties?: (keyof JSX.KolSplitButton)[];
11+
codeCollapsable?: boolean;
12+
codeCollapsed?: boolean;
13+
}
14+
15+
const toolbarItems: JSX.KolToolbar['_items'] = [
16+
{ type: 'button', _label: translate({ id: 'preview.component.split-button.menu.edit' }), _icons: { left: { icon: 'codicon-edit' } } },
17+
{ type: 'button', _label: translate({ id: 'preview.component.split-button.menu.copy' }), _icons: { left: { icon: 'codicon-copy' } } },
18+
{ type: 'button', _label: translate({ id: 'preview.component.split-button.menu.archive' }), _icons: { left: { icon: 'codicon-archive' } } },
19+
{ type: 'button', _label: translate({ id: 'preview.component.split-button.menu.delete' }), _icons: { left: { icon: 'codicon-trash' } } },
20+
];
21+
22+
const SplitButtonPreview: React.FC<SplitButtonPreviewComponentProps> = (props) => {
23+
const defaultProps = React.useMemo<JSX.KolSplitButton>(
24+
() => ({
25+
_label: translate({ id: 'preview.component.split-button.label' }),
26+
}),
27+
[],
28+
);
29+
30+
return (
31+
<Preview<JSX.KolSplitButton>
32+
propertyComponents={{
33+
_label: <KolInputText _label="Label" />,
34+
_variant: <ButtonVariantProperty label="Variant" defaultValue="normal" />,
35+
_tooltipAlign: <AlignProperty label="Tooltip Align" defaultValue="top" />,
36+
_icons: <IconsProperty label="Icons" />,
37+
_disabled: <BooleanProperty label="Disabled" />,
38+
_hideLabel: <BooleanProperty label="Hide Label" />,
39+
}}
40+
initialProps={{ ...defaultProps, ...props.initialProps }}
41+
componentName="KolSplitButton"
42+
visibleProperties={props.visibleProperties}
43+
codeCollapsable={props.codeCollapsable}
44+
codeCollapsed={props.codeCollapsed}
45+
layout={PreviewLayout.CENTERED}
46+
>
47+
{(componentProps) => (
48+
<KolSplitButton {...componentProps}>
49+
<KolToolbar _label="" _items={toolbarItems} _orientation="vertical" />
50+
</KolSplitButton>
51+
)}
52+
</Preview>
53+
);
54+
};
55+
56+
export default SplitButtonPreview;

0 commit comments

Comments
 (0)