Skip to content

Commit 2eff5c1

Browse files
ArvinJ-Hkemister85tiny-ben-tran
authored
DOC-3147: Update split button documentation (#3793)
* DOC-3147: Update split button tooltips and documentation * Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard <[email protected]> * Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/custom-split-toolbar-button.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/custom-split-toolbar-button.adoc Co-authored-by: tiny-ben-tran <[email protected]> * Update modules/ROOT/pages/custom-split-toolbar-button.adoc Co-authored-by: tiny-ben-tran <[email protected]> * DOC-3147: Refactor split button documentation and CSS classes for clarity and consistency * DOC-3147: Update split button notes to reflect structural changes. * DOC-3147: Remove CSS classes section and related file for split buttons * Update modules/ROOT/pages/creating-a-skin.adoc * Update modules/ROOT/pages/8.0-release-notes.adoc * Update modules/ROOT/pages/8.0-release-notes.adoc --------- Co-authored-by: Karl Kemister-Sheppard <[email protected]> Co-authored-by: tiny-ben-tran <[email protected]>
1 parent b60934c commit 2eff5c1

File tree

4 files changed

+18
-2
lines changed

4 files changed

+18
-2
lines changed

modules/ROOT/examples/live-demos/custom-toolbar-split-button/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ tinymce.init({
66
editor.ui.registry.addSplitButton('myButton', {
77
text: 'My Button',
88
icon: 'info',
9-
tooltip: 'This is an example split-button',
9+
tooltip: 'Execute my action',
10+
chevronTooltip: 'My Button menu options',
1011
onAction: () => editor.insertContent('<p>You clicked the main button</p>'),
1112
onItemAction: (api, value) => editor.insertContent(value),
1213
fetch: (callback) => {

modules/ROOT/pages/8.0-release-notes.adoc

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,11 @@ editor.execCommand('ToggleToolbarDrawer', false, null, { skip_focus: true });
322322

323323
For more information on the `ToggleToolbarDrawer` command, see: xref:editor-command-identifiers.adoc[Available Commands].
324324

325+
=== Split buttons are now rendered as separate action and chevron buttons.
326+
// #TINY-8665
327+
328+
Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite element. The main button performs the primary action, while the chevron button controls the dropdown menu. This design improvement enhances accessibility by allowing separate focus targets and ARIA labels for each button.
329+
325330
=== The translate API now automatically replaces three dots in a row with an ellipsis character.
326331
// #TINY-12155
327332

@@ -339,6 +344,12 @@ Comments containing HTML-like content are removed from the editor's content by d
339344

340345
{productname} introduces a new configuration option, xref:content-filtering.adoc#allow_html_in_comments[allow_html_in_comments], to give users control over whether HTML-like content in comments should be retained or removed. By default, this content is removed for security, but setting the option to `true` allows HTML-like content in comments to be preserved when needed.
341346

347+
=== Split button tooltip configuration
348+
// #TINY-8665
349+
350+
The `+chevronTooltip+` property provides custom tooltip text for the chevron button portion of split buttons. When `+chevronTooltip+` is not specified, {productname} automatically generates tooltip text using the pattern `+"{tooltip} menu"+`. The `+setTooltip+` method updates both main and chevron tooltips to maintain consistency.
351+
352+
For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons].
342353

343354
[[changes]]
344355
== Changes
@@ -350,7 +361,6 @@ Comments containing HTML-like content are removed from the editor's content by d
350361

351362
// CCFR here.
352363

353-
354364
=== DomParser no longer tries to fix some nodes when parsed with a context
355365
// #TINY-8205
356366

modules/ROOT/pages/creating-a-skin.adoc

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ _Do not edit these files directly_. Instead, use them as references when creatin
6767
* `+modules/oxide/src/less/theme/components/toolbar-button/toolbar-button.less+`
6868
6969
The typical workflow involves copying variables from the theme folder into the skins `skin.less` file and modifying them as needed.
70+
71+
NOTE: Split buttons have undergone structural changes in {productname} {productmajorversion}. Previously they used a single component structure, but now use separate components for the main button and chevron areas. See xref:migration-from-7x.adoc#split-button-css-breaking-change[split button css breaking change]
7072
====
7173

7274
[NOTE]

modules/ROOT/pages/custom-split-toolbar-button.adoc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ A split button contains a basic button and a menu button, wrapped up into one to
1313
|text |string |Primary button |optional |Text displayed if no icon is found.
1414
|icon |string |Primary button |optional |
1515
include::partial$misc/admon-predefined-icons-only.adoc[]
16+
|tooltip |string |Primary button |optional |Text displayed when hovering over the main button.
17+
|chevronTooltip |string |Chevron button |optional |Text displayed when hovering over the chevron button. If not provided, it will be generated using the tooltip of the main button. ie: `+"{tooltip} menu"+`.
1618
|onAction |`+(api) => void+` |Primary button |required |Function invoked when the basic button section is clicked.
1719
|select |`+(value: string) => boolean+` |Choice menu items |optional |default: `false` - Function run on each option when the menu is opened to determine if it should be highlighted as active.
1820
|columns |number or `+'auto'+` |Drop-down menu |optional |default: `1` - Number of columns for the list of options. When set to more than 1 column, only the icon for each item will be shown.
@@ -35,6 +37,7 @@ include::partial$misc/admon-predefined-icons-only.adoc[]
3537
3+|
3638
|setText |`+(text: string) => void+` |Sets the text label to display.
3739
|setIcon |`+(icon: string) => void+` |Sets the icon of the button.
40+
|setTooltip |`+(tooltip: string) => void+` |Sets the main button tooltip.
3841
|===
3942

4043
[[split-button-example-and-explanation]]

0 commit comments

Comments
 (0)