Skip to content

Commit 4bf78fd

Browse files
committed
chore(ButtonSplit): update docs
1 parent d6f08cd commit 4bf78fd

1 file changed

Lines changed: 22 additions & 19 deletions

File tree

src/components/actions/ButtonSplit/ButtonSplit.docs.mdx

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ Customises the root wrapper element of the split button.
3737

3838
These properties allow direct styling without using the `styles` prop: `width`, `height`.
3939

40+
### Context Inheritance
41+
42+
`type`, `theme`, `size`, and `isDisabled` set on `Button.Split` are inherited by all child `Button` components via context. Explicitly passed props on individual buttons always take precedence.
43+
4044
## Modes
4145

4246
### Strict Mode
@@ -61,8 +65,6 @@ const actions = [
6165
/>
6266
```
6367

64-
<Story of={ButtonSplitStories.StrictUncontrolled} />
65-
6668
#### Controlled
6769

6870
Use `actionKey` and `onActionChange` for controlled state.
@@ -79,21 +81,23 @@ const [currentKey, setCurrentKey] = useState('deploy');
7981
/>
8082
```
8183

82-
<Story of={ButtonSplitStories.StrictControlled} />
84+
<Story of={ButtonSplitStories.Controlled} />
8385

8486
### Custom Mode
8587

86-
Pass `children` to render arbitrary buttons with split-group styling (joined radius, collapsed borders). Use `Menu.Trigger` and `Menu` for dropdown behavior.
88+
Pass `children` to render arbitrary buttons with split-group styling (joined radius, collapsed borders). Set `type` and `theme` on the wrapper -- child buttons inherit them via context.
8789

8890
```jsx
8991
import { Button, Menu } from '@cube-dev/ui-kit';
92+
import { DirectionIcon } from '@cube-dev/ui-kit';
9093

91-
<Button.Split>
92-
<Button type="primary" onPress={() => console.log('Save')}>
93-
Save
94-
</Button>
94+
<Button.Split type="primary">
95+
<Button onPress={() => console.log('Save')}>Save</Button>
9596
<Menu.Trigger placement="bottom end">
96-
<Button type="primary" aria-label="More save options" icon={true} />
97+
<Button
98+
aria-label="More save options"
99+
icon={({ pressed }) => <DirectionIcon to={pressed ? 'up' : 'down'} />}
100+
/>
97101
<Menu onAction={(key) => console.log(key)}>
98102
<Menu.Item key="save-draft">Save as Draft</Menu.Item>
99103
<Menu.Item key="save-publish">Save & Publish</Menu.Item>
@@ -109,10 +113,10 @@ import { Button, Menu } from '@cube-dev/ui-kit';
109113
More than two buttons are supported. Middle buttons have no border radius.
110114

111115
```jsx
112-
<Button.Split>
113-
<Button type="outline" icon={<IconPlus />}>Add</Button>
114-
<Button type="outline" icon={<IconCopy />}>Copy</Button>
115-
<Button type="outline" icon={<IconDownload />}>Export</Button>
116+
<Button.Split type="outline">
117+
<Button icon={<IconPlus />}>Add</Button>
118+
<Button icon={<IconCopy />}>Copy</Button>
119+
<Button icon={<IconDownload />}>Export</Button>
116120
</Button.Split>
117121
```
118122

@@ -122,7 +126,7 @@ More than two buttons are supported. Middle buttons have no border radius.
122126

123127
### Variants
124128

125-
Different types and themes can be applied in strict mode.
129+
Different types and themes can be applied. All child buttons inherit the styling.
126130

127131
<Story of={ButtonSplitStories.Variants} />
128132

@@ -136,7 +140,7 @@ Different types and themes can be applied in strict mode.
136140

137141
### Customizing Sub-Components
138142

139-
Use `actionProps`, `triggerProps`, and `menuProps` to customise individual parts.
143+
Use `actionProps`, `triggerProps`, and `menuProps` to customise individual parts in strict mode.
140144

141145
```jsx
142146
<Button.Split
@@ -176,10 +180,10 @@ Use `actionProps`, `triggerProps`, and `menuProps` to customise individual parts
176180
<Button.Split actions={actions} defaultActionKey="deploy" type="primary" />
177181
```
178182

179-
2. **Do**: Use custom mode when you need full control over button content and behavior.
183+
2. **Do**: Set `type` and `theme` on the wrapper instead of repeating on each child.
180184
```jsx
181-
<Button.Split>
182-
<Button>Primary</Button>
185+
<Button.Split type="primary">
186+
<Button>Save</Button>
183187
<Button icon={<DirectionIcon to="down" />} aria-label="Options" />
184188
</Button.Split>
185189
```
@@ -190,7 +194,6 @@ Use `actionProps`, `triggerProps`, and `menuProps` to customise individual parts
190194

191195
## Suggested Improvements
192196

193-
- Add `size` variants demo for strict mode across all sizes.
194197
- Support `isLoading` on the action button in strict mode.
195198
- Add keyboard shortcut display in menu items via `hotkeys` prop.
196199

0 commit comments

Comments
 (0)