From b66211d88767a9c65fafbafdff324c6b21394a23 Mon Sep 17 00:00:00 2001 From: Arvin Han <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 7 Jul 2025 19:52:28 +1000 Subject: [PATCH 01/14] DOC-3147: Update split button tooltips and documentation --- .../custom-toolbar-split-button/index.js | 3 ++- modules/ROOT/pages/8.0-release-notes.adoc | 17 +++++++++++++++++ modules/ROOT/pages/creating-a-skin.adoc | 2 ++ .../pages/custom-split-toolbar-button.adoc | 19 +++++++++++++++++++ 4 files changed, 40 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/examples/live-demos/custom-toolbar-split-button/index.js b/modules/ROOT/examples/live-demos/custom-toolbar-split-button/index.js index 256c3488f5..f60882e3e6 100644 --- a/modules/ROOT/examples/live-demos/custom-toolbar-split-button/index.js +++ b/modules/ROOT/examples/live-demos/custom-toolbar-split-button/index.js @@ -6,7 +6,8 @@ tinymce.init({ editor.ui.registry.addSplitButton('myButton', { text: 'My Button', icon: 'info', - tooltip: 'This is an example split-button', + tooltip: 'Execute my action', + chevronTooltip: 'My Button menu options', onAction: () => editor.insertContent('

You clicked the main button

'), onItemAction: (api, value) => editor.insertContent(value), fetch: (callback) => { diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index 7c62f25b54..22460e578d 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -104,6 +104,11 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a // CCFR here. +=== Split button component architecture +// #TINY-8665 + +Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite component. The main button handles primary actions while the chevron button controls dropdown functionality. This architectural change improves accessibility by providing separate focus targets and ARIA labels for each component. The `+setTooltip+` method has been enhanced to update both main and chevron button tooltips simultaneously. + [[additions]] == Additions @@ -115,6 +120,13 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a // CCFR here. +=== Split button tooltip configuration +// #TINY-8665 + +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 enhanced `+setTooltip+` method intelligently updates both main and chevron tooltips to maintain consistency. + +For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons]. + [[changes]] == Changes @@ -126,6 +138,11 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a // CCFR here. +=== Split button DOM structure changes +// #TINY-8665 + +The internal DOM structure of split buttons has been updated to support the new component architecture. Split button components now use `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes instead of the previous composite structure. Each component renders as a separate DOM element with independent event handling and focus management. Custom CSS targeting split button internals may require updates to accommodate the new structure. + [[removed]] == Removed diff --git a/modules/ROOT/pages/creating-a-skin.adoc b/modules/ROOT/pages/creating-a-skin.adoc index 5ff800439f..6294251eb8 100644 --- a/modules/ROOT/pages/creating-a-skin.adoc +++ b/modules/ROOT/pages/creating-a-skin.adoc @@ -67,6 +67,8 @@ _Do not edit these files directly_. Instead, use them as references when creatin * `+modules/oxide/src/less/theme/components/toolbar-button/toolbar-button.less+` The typical workflow involves copying variables from the theme folder into the skins `skin.less` file and modifying them as needed. + +NOTE: As of {productname} 8.0, split buttons use `.tox-split-button__main` and `.tox-split-button__chevron` CSS classes. If your skin targets split button components, you may need to update your CSS selectors. ==== [NOTE] diff --git a/modules/ROOT/pages/custom-split-toolbar-button.adoc b/modules/ROOT/pages/custom-split-toolbar-button.adoc index 63fafd4f00..526ad0cdd3 100644 --- a/modules/ROOT/pages/custom-split-toolbar-button.adoc +++ b/modules/ROOT/pages/custom-split-toolbar-button.adoc @@ -13,6 +13,8 @@ A split button contains a basic button and a menu button, wrapped up into one to |text |string |Primary button |optional |Text displayed if no icon is found. |icon |string |Primary button |optional | include::partial$misc/admon-predefined-icons-only.adoc[] +|tooltip |string |Primary button |optional |Text displayed when hovering over the main button. If `+chevronTooltip+` is not provided, this will be used to auto-generate the chevron tooltip as `+"{tooltip} menu"+`. +|chevronTooltip |string |Chevron button |optional |Text displayed when hovering over the chevron button. If not provided, auto-generates as `+"{tooltip} menu"+`. |onAction |`+(api) => void+` |Primary button |required |Function invoked when the basic button section is clicked. |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. |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[] 3+| |setText |`+(text: string) => void+` |Sets the text label to display. |setIcon |`+(icon: string) => void+` |Sets the icon of the button. +|setTooltip |`+(tooltip: string) => void+` |Sets the main button tooltip and auto-updates the chevron tooltip. |=== [[split-button-example-and-explanation]] @@ -52,4 +55,20 @@ The `+fetch+` function is called whenever the split button's drop-down menu is o include::partial$components/choice-menu-items.adoc[] +== CSS Classes + +As of {productname} 8.0, split buttons render as two separate components: + +* `.tox-split-button__main` - Main action button +* `.tox-split-button__chevron` - Dropdown chevron button + +If you have custom CSS targeting split button internals, you may need to update your selectors. + +[source,css] +---- +/* TinyMCE 8.0+ */ +.tox-split-button__main +.tox-split-button__chevron +---- + include::partial$misc/onSetup.adoc[] From 28db9e78dd71d4e41ba4441b57ff15f0023caf15 Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:21:44 +1000 Subject: [PATCH 02/14] Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard --- modules/ROOT/pages/8.0-release-notes.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index 22460e578d..93c1549dc9 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -104,7 +104,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a // CCFR here. -=== Split button component architecture +=== Split buttons are now rendered as separate action and chevron buttons. // #TINY-8665 Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite component. The main button handles primary actions while the chevron button controls dropdown functionality. This architectural change improves accessibility by providing separate focus targets and ARIA labels for each component. The `+setTooltip+` method has been enhanced to update both main and chevron button tooltips simultaneously. From 59e11bc0219afd0f0354f0461a4b8fd39a9f9a94 Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:36:49 +1000 Subject: [PATCH 03/14] Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard --- modules/ROOT/pages/8.0-release-notes.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index 93c1549dc9..db352a1beb 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -107,7 +107,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a === Split buttons are now rendered as separate action and chevron buttons. // #TINY-8665 -Split buttons in {productname} {release-version} now render as two independent, focusable components instead of a single composite component. The main button handles primary actions while the chevron button controls dropdown functionality. This architectural change improves accessibility by providing separate focus targets and ARIA labels for each component. The `+setTooltip+` method has been enhanced to update both main and chevron button tooltips simultaneously. +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. Additionally, the `+setTooltip+` method has been updated to apply tooltip content to both the main and chevron buttons simultaneously, ensuring consistent guidance for users. [[additions]] From 6d168927bbe94ec7cad7d079f5758eee5dc9991c Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:36:55 +1000 Subject: [PATCH 04/14] Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: Karl Kemister-Sheppard --- modules/ROOT/pages/8.0-release-notes.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index db352a1beb..74c2991042 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -141,7 +141,7 @@ For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar bu === Split button DOM structure changes // #TINY-8665 -The internal DOM structure of split buttons has been updated to support the new component architecture. Split button components now use `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes instead of the previous composite structure. Each component renders as a separate DOM element with independent event handling and focus management. Custom CSS targeting split button internals may require updates to accommodate the new structure. +The internal DOM structure of split buttons has been updated to align with the new component-based architecture. Split button components now use the `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes in place of the previous composite layout. Each part of the split button is rendered as an independent DOM element with separate event handling and focus management. Custom CSS that targets split button internals may need to be updated to reflect these changes. [[removed]] From a082c3e05274ec414874910e4953333dd0f3e90b Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:37:10 +1000 Subject: [PATCH 05/14] Update modules/ROOT/pages/8.0-release-notes.adoc Co-authored-by: tiny-ben-tran --- modules/ROOT/pages/8.0-release-notes.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index 74c2991042..a3fe397611 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -123,7 +123,7 @@ Split buttons in {productname} {release-version} now render as two independent, === Split button tooltip configuration // #TINY-8665 -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 enhanced `+setTooltip+` method intelligently updates both main and chevron tooltips to maintain consistency. +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 enhanced `+setTooltip+` method updates both main and chevron tooltips to maintain consistency. For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons]. From 1168202db81b58958611c6ba93dd8c467364d791 Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:37:16 +1000 Subject: [PATCH 06/14] Update modules/ROOT/pages/custom-split-toolbar-button.adoc Co-authored-by: tiny-ben-tran --- modules/ROOT/pages/custom-split-toolbar-button.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/custom-split-toolbar-button.adoc b/modules/ROOT/pages/custom-split-toolbar-button.adoc index 526ad0cdd3..89f4350474 100644 --- a/modules/ROOT/pages/custom-split-toolbar-button.adoc +++ b/modules/ROOT/pages/custom-split-toolbar-button.adoc @@ -37,7 +37,7 @@ include::partial$misc/admon-predefined-icons-only.adoc[] 3+| |setText |`+(text: string) => void+` |Sets the text label to display. |setIcon |`+(icon: string) => void+` |Sets the icon of the button. -|setTooltip |`+(tooltip: string) => void+` |Sets the main button tooltip and auto-updates the chevron tooltip. +|setTooltip |`+(tooltip: string) => void+` |Sets the main button tooltip. |=== [[split-button-example-and-explanation]] From b005b4782d46a818b4152d432b9ba401013bc985 Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:37:21 +1000 Subject: [PATCH 07/14] Update modules/ROOT/pages/custom-split-toolbar-button.adoc Co-authored-by: tiny-ben-tran --- modules/ROOT/pages/custom-split-toolbar-button.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/custom-split-toolbar-button.adoc b/modules/ROOT/pages/custom-split-toolbar-button.adoc index 89f4350474..25f6b806e8 100644 --- a/modules/ROOT/pages/custom-split-toolbar-button.adoc +++ b/modules/ROOT/pages/custom-split-toolbar-button.adoc @@ -14,7 +14,7 @@ A split button contains a basic button and a menu button, wrapped up into one to |icon |string |Primary button |optional | include::partial$misc/admon-predefined-icons-only.adoc[] |tooltip |string |Primary button |optional |Text displayed when hovering over the main button. If `+chevronTooltip+` is not provided, this will be used to auto-generate the chevron tooltip as `+"{tooltip} menu"+`. -|chevronTooltip |string |Chevron button |optional |Text displayed when hovering over the chevron button. If not provided, auto-generates as `+"{tooltip} menu"+`. +|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"+`. |onAction |`+(api) => void+` |Primary button |required |Function invoked when the basic button section is clicked. |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. |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. From 75d5537109d70ec25cbd30f882af2a8522218c0f Mon Sep 17 00:00:00 2001 From: "Arvin(Jintao) Han" <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 14:37:28 +1000 Subject: [PATCH 08/14] Update modules/ROOT/pages/custom-split-toolbar-button.adoc Co-authored-by: tiny-ben-tran --- modules/ROOT/pages/custom-split-toolbar-button.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/custom-split-toolbar-button.adoc b/modules/ROOT/pages/custom-split-toolbar-button.adoc index 25f6b806e8..80dece6403 100644 --- a/modules/ROOT/pages/custom-split-toolbar-button.adoc +++ b/modules/ROOT/pages/custom-split-toolbar-button.adoc @@ -13,7 +13,7 @@ A split button contains a basic button and a menu button, wrapped up into one to |text |string |Primary button |optional |Text displayed if no icon is found. |icon |string |Primary button |optional | include::partial$misc/admon-predefined-icons-only.adoc[] -|tooltip |string |Primary button |optional |Text displayed when hovering over the main button. If `+chevronTooltip+` is not provided, this will be used to auto-generate the chevron tooltip as `+"{tooltip} menu"+`. +|tooltip |string |Primary button |optional |Text displayed when hovering over the main button. |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"+`. |onAction |`+(api) => void+` |Primary button |required |Function invoked when the basic button section is clicked. |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. From 45eaf2abaef1e5bf8aa68f2aea098322f0a38392 Mon Sep 17 00:00:00 2001 From: Arvin Han <20640097+ArvinJ-H@users.noreply.github.com> Date: Mon, 14 Jul 2025 17:05:20 +1000 Subject: [PATCH 09/14] DOC-3147: Refactor split button documentation and CSS classes for clarity and consistency --- modules/ROOT/pages/8.0-release-notes.adoc | 6 ++--- modules/ROOT/pages/creating-a-skin.adoc | 24 ++++++++++++++++++- .../pages/custom-split-toolbar-button.adoc | 14 +---------- .../components/split-button-css-classes.adoc | 15 ++++++++++++ 4 files changed, 42 insertions(+), 17 deletions(-) create mode 100644 modules/ROOT/partials/components/split-button-css-classes.adoc diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index a3fe397611..9b66ec35ce 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -107,7 +107,7 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a === Split buttons are now rendered as separate action and chevron buttons. // #TINY-8665 -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. Additionally, the `+setTooltip+` method has been updated to apply tooltip content to both the main and chevron buttons simultaneously, ensuring consistent guidance for users. +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. [[additions]] @@ -123,7 +123,7 @@ Split buttons in {productname} {release-version} now render as two independent, === Split button tooltip configuration // #TINY-8665 -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 enhanced `+setTooltip+` method updates both main and chevron tooltips to maintain consistency. +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. For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons]. @@ -141,7 +141,7 @@ For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar bu === Split button DOM structure changes // #TINY-8665 -The internal DOM structure of split buttons has been updated to align with the new component-based architecture. Split button components now use the `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes in place of the previous composite layout. Each part of the split button is rendered as an independent DOM element with separate event handling and focus management. Custom CSS that targets split button internals may need to be updated to reflect these changes. +The split buttons are now rendered as two separate buttons: action and dropdown. Each has its own event handling and focus management. Split button components now use `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes. Custom CSS that targets split button internals may need to be updated to reflect these changes. [[removed]] diff --git a/modules/ROOT/pages/creating-a-skin.adoc b/modules/ROOT/pages/creating-a-skin.adoc index 6294251eb8..742716b575 100644 --- a/modules/ROOT/pages/creating-a-skin.adoc +++ b/modules/ROOT/pages/creating-a-skin.adoc @@ -68,7 +68,29 @@ _Do not edit these files directly_. Instead, use them as references when creatin The typical workflow involves copying variables from the theme folder into the skins `skin.less` file and modifying them as needed. -NOTE: As of {productname} 8.0, split buttons use `.tox-split-button__main` and `.tox-split-button__chevron` CSS classes. If your skin targets split button components, you may need to update your CSS selectors. +NOTE: Split buttons use `.tox-split-button__main` and `.tox-split-button__chevron` CSS classes. If your skin targets split button components, you may need to update your CSS selectors. + +.Example: Updating split button CSS selectors +[source,css] +---- +/* Before: targeting the composite split button */ +.tox-split-button { + /* Previous styling approach */ +} + +/* After: targeting individual components */ +.tox-split-button__main { + /* Main button styling */ + background-color: #blue; + border-radius: 4px 0 0 4px; +} + +.tox-split-button__chevron { + /* Chevron button styling */ + background-color: #darkblue; + border-radius: 0 4px 4px 0; +} +---- ==== [NOTE] diff --git a/modules/ROOT/pages/custom-split-toolbar-button.adoc b/modules/ROOT/pages/custom-split-toolbar-button.adoc index 80dece6403..8ddfca0683 100644 --- a/modules/ROOT/pages/custom-split-toolbar-button.adoc +++ b/modules/ROOT/pages/custom-split-toolbar-button.adoc @@ -57,18 +57,6 @@ include::partial$components/choice-menu-items.adoc[] == CSS Classes -As of {productname} 8.0, split buttons render as two separate components: - -* `.tox-split-button__main` - Main action button -* `.tox-split-button__chevron` - Dropdown chevron button - -If you have custom CSS targeting split button internals, you may need to update your selectors. - -[source,css] ----- -/* TinyMCE 8.0+ */ -.tox-split-button__main -.tox-split-button__chevron ----- +include::partial$components/split-button-css-classes.adoc[] include::partial$misc/onSetup.adoc[] diff --git a/modules/ROOT/partials/components/split-button-css-classes.adoc b/modules/ROOT/partials/components/split-button-css-classes.adoc new file mode 100644 index 0000000000..010ce15d4e --- /dev/null +++ b/modules/ROOT/partials/components/split-button-css-classes.adoc @@ -0,0 +1,15 @@ +Split buttons render as two separate components, each with their own CSS classes for targeted styling: + +* `.tox-split-button__main` - Main action button +* `.tox-split-button__chevron` - Dropdown chevron button + +[source,css] +---- +.tox-split-button__main { + /* Main button styling */ +} + +.tox-split-button__chevron { + /* Chevron button styling */ +} +---- \ No newline at end of file From 4fef010d7c534cef866377dea35f6b697814dd7d Mon Sep 17 00:00:00 2001 From: Arvin Han <20640097+ArvinJ-H@users.noreply.github.com> Date: Fri, 18 Jul 2025 15:37:04 +1000 Subject: [PATCH 10/14] DOC-3147: Update split button notes to reflect structural changes. --- modules/ROOT/pages/creating-a-skin.adoc | 24 +----------------------- 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/modules/ROOT/pages/creating-a-skin.adoc b/modules/ROOT/pages/creating-a-skin.adoc index 742716b575..d8dade43e7 100644 --- a/modules/ROOT/pages/creating-a-skin.adoc +++ b/modules/ROOT/pages/creating-a-skin.adoc @@ -68,29 +68,7 @@ _Do not edit these files directly_. Instead, use them as references when creatin The typical workflow involves copying variables from the theme folder into the skins `skin.less` file and modifying them as needed. -NOTE: Split buttons use `.tox-split-button__main` and `.tox-split-button__chevron` CSS classes. If your skin targets split button components, you may need to update your CSS selectors. - -.Example: Updating split button CSS selectors -[source,css] ----- -/* Before: targeting the composite split button */ -.tox-split-button { - /* Previous styling approach */ -} - -/* After: targeting individual components */ -.tox-split-button__main { - /* Main button styling */ - background-color: #blue; - border-radius: 4px 0 0 4px; -} - -.tox-split-button__chevron { - /* Chevron button styling */ - background-color: #darkblue; - border-radius: 0 4px 4px 0; -} ----- +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. ==== [NOTE] From 57fac1843befc4f834f245b6e9f7fcae1713b2a8 Mon Sep 17 00:00:00 2001 From: Arvin Han <20640097+ArvinJ-H@users.noreply.github.com> Date: Fri, 18 Jul 2025 15:57:42 +1000 Subject: [PATCH 11/14] DOC-3147: Remove CSS classes section and related file for split buttons --- .../ROOT/pages/custom-split-toolbar-button.adoc | 4 ---- .../components/split-button-css-classes.adoc | 15 --------------- 2 files changed, 19 deletions(-) delete mode 100644 modules/ROOT/partials/components/split-button-css-classes.adoc diff --git a/modules/ROOT/pages/custom-split-toolbar-button.adoc b/modules/ROOT/pages/custom-split-toolbar-button.adoc index 8ddfca0683..c379abd2ba 100644 --- a/modules/ROOT/pages/custom-split-toolbar-button.adoc +++ b/modules/ROOT/pages/custom-split-toolbar-button.adoc @@ -55,8 +55,4 @@ The `+fetch+` function is called whenever the split button's drop-down menu is o include::partial$components/choice-menu-items.adoc[] -== CSS Classes - -include::partial$components/split-button-css-classes.adoc[] - include::partial$misc/onSetup.adoc[] diff --git a/modules/ROOT/partials/components/split-button-css-classes.adoc b/modules/ROOT/partials/components/split-button-css-classes.adoc deleted file mode 100644 index 010ce15d4e..0000000000 --- a/modules/ROOT/partials/components/split-button-css-classes.adoc +++ /dev/null @@ -1,15 +0,0 @@ -Split buttons render as two separate components, each with their own CSS classes for targeted styling: - -* `.tox-split-button__main` - Main action button -* `.tox-split-button__chevron` - Dropdown chevron button - -[source,css] ----- -.tox-split-button__main { - /* Main button styling */ -} - -.tox-split-button__chevron { - /* Chevron button styling */ -} ----- \ No newline at end of file From cfc93ff50f4d73dc0667852c43392c941b64fa12 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Fri, 18 Jul 2025 15:58:07 +1000 Subject: [PATCH 12/14] Update modules/ROOT/pages/creating-a-skin.adoc --- modules/ROOT/pages/creating-a-skin.adoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/ROOT/pages/creating-a-skin.adoc b/modules/ROOT/pages/creating-a-skin.adoc index d8dade43e7..19f20e2fbe 100644 --- a/modules/ROOT/pages/creating-a-skin.adoc +++ b/modules/ROOT/pages/creating-a-skin.adoc @@ -68,7 +68,7 @@ _Do not edit these files directly_. Instead, use them as references when creatin The typical workflow involves copying variables from the theme folder into the skins `skin.less` file and modifying them as needed. -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. +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] ==== [NOTE] From 751ebb5c311395651245d6646f35d074ac1fa512 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Fri, 18 Jul 2025 16:00:42 +1000 Subject: [PATCH 13/14] Update modules/ROOT/pages/8.0-release-notes.adoc --- modules/ROOT/pages/8.0-release-notes.adoc | 4 ---- 1 file changed, 4 deletions(-) diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index 9b66ec35ce..d23df5a503 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -138,10 +138,6 @@ For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar bu // CCFR here. -=== Split button DOM structure changes -// #TINY-8665 - -The split buttons are now rendered as two separate buttons: action and dropdown. Each has its own event handling and focus management. Split button components now use `+.tox-split-button__main+` and `+.tox-split-button__chevron+` CSS classes. Custom CSS that targets split button internals may need to be updated to reflect these changes. [[removed]] From 03dd6b6cac1240908e871881cc634e72669748f6 Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Fri, 18 Jul 2025 16:00:56 +1000 Subject: [PATCH 14/14] Update modules/ROOT/pages/8.0-release-notes.adoc --- modules/ROOT/pages/8.0-release-notes.adoc | 1 - 1 file changed, 1 deletion(-) diff --git a/modules/ROOT/pages/8.0-release-notes.adoc b/modules/ROOT/pages/8.0-release-notes.adoc index d23df5a503..f2716540aa 100644 --- a/modules/ROOT/pages/8.0-release-notes.adoc +++ b/modules/ROOT/pages/8.0-release-notes.adoc @@ -127,7 +127,6 @@ The `+chevronTooltip+` property provides custom tooltip text for the chevron but For more information, see xref:custom-split-toolbar-button.adoc[Split toolbar buttons]. - [[changes]] == Changes