[TASK] Use button group for create/filter in page tree

The buttons on top of the page tree behave like a button group and
should be styled as such.

Resolves: #86916
Releases: master
Change-Id: I04e4f65cda19d6e1ed808ebdaecb942e21b202fa
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63915


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Daniel Goerz <daniel.goerz@posteo.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>

Build/Sources/Sass/component/_svgtree.scss

@@ -302,10 +302,6 @@ $svgColors: (
         margin-bottom: 4px;
 
         .x-btn {
-            &:not(:last-child) {
-                margin-right: 4px;
-            }
-
             &:last-child {
                 float: right;
             }

typo3/sysext/backend/Resources/Public/JavaScript/PageTree/PageTreeToolbar.js

@@ -108,9 +108,11 @@ define(['jquery',
       var $template = $(
         '<div class="' + _this.settings.toolbarSelector + '">' +
         '<div class="svg-toolbar__menu">' +
+        '<div class="btn-group">' +
         '<div class="x-btn btn btn-default btn-sm x-btn-noicon" data-tree-show-submenu="filter">' +
         '<button class="svg-toolbar__btn" data-tree-icon="actions-filter" title="' + TYPO3.lang['tree.buttonFilter'] + '"></button>' +
         '</div>' +
+        '</div>' +
         '<div class="x-btn btn btn-default btn-sm x-btn-noicon js-svg-refresh">' +
         '<button class="svg-toolbar__btn" data-tree-icon="actions-refresh" title="' + TYPO3.lang['labels.refresh'] + '"></button>' +
         '</div>' +
@@ -127,7 +129,7 @@ define(['jquery',
 
       if (this.tree.settings.doktypes && this.tree.settings.doktypes.length) {
         var $buttons = $template.find('[data-tree-submenu=page-new]');
-        $template.find('.svg-toolbar__menu').prepend('<div class="x-btn btn btn-default btn-sm x-btn-noicon" data-tree-show-submenu="page-new">' +
+        $template.find('.svg-toolbar__menu .btn-group').prepend('<div class="x-btn btn btn-default btn-sm x-btn-noicon" data-tree-show-submenu="page-new">' +
           '<button class="svg-toolbar__btn" data-tree-icon="actions-page-new" title="' + TYPO3.lang['tree.buttonNewNode'] + '"></button>' +
           '</div>'
         );