diff --git a/core/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php index db568eb4c3..31376ac731 100644 --- a/core/lib/Drupal/Core/Render/Element/Dropbutton.php +++ b/core/lib/Drupal/Core/Render/Element/Dropbutton.php @@ -48,6 +48,7 @@ class Dropbutton extends RenderElement { * {@inheritdoc} */ public function getInfo() { + @trigger_error("The Dropbutton render element is deprecated in drupal:9.1.0 and is removed from drupal:10.0.0. Use the Splitbutton render element instead. See https://www.drupal.org/node/3169786.", E_USER_DEPRECATED); $class = static::class; return [ '#pre_render' => [ diff --git a/core/misc/splitbutton/splitbutton.es6.js b/core/misc/splitbutton/splitbutton.es6.js index 9042fc1e64..071c9ab83b 100644 --- a/core/misc/splitbutton/splitbutton.es6.js +++ b/core/misc/splitbutton/splitbutton.es6.js @@ -110,10 +110,6 @@ * Initialize positioning of items with PopperJS. */ initPopper() { - // The items width should be at least as wide as the element that - // triggered their visibility. - this.menu.style['min-width'] = `${this.triggerContainer.offsetWidth}px`; - this.popper = Popper.createPopper(this.triggerContainer, this.menu, { placement: 'bottom-start', modifiers: [ @@ -166,8 +162,14 @@ /** * Opens splitbutton menu. + * + * @param {bool} focusFirst + * If true the first item in the list will be focused. */ open(focusFirst = true) { + // The items width should be at least as wide as the main splitbutton + // element. + this.menu.style['min-width'] = `${this.triggerContainer.offsetWidth}px`; this.initMenuItems(); this.toggle(true); if (!this.hasOwnProperty('popper')) { diff --git a/core/misc/splitbutton/splitbutton.js b/core/misc/splitbutton/splitbutton.js index 645be5dac1..9fd16bfa96 100644 --- a/core/misc/splitbutton/splitbutton.js +++ b/core/misc/splitbutton/splitbutton.js @@ -89,7 +89,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d }, { key: "initPopper", value: function initPopper() { - this.menu.style['min-width'] = "".concat(this.triggerContainer.offsetWidth, "px"); this.popper = Popper.createPopper(this.triggerContainer, this.menu, { placement: 'bottom-start', modifiers: [{ @@ -129,6 +128,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d var _this3 = this; var focusFirst = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + this.menu.style['min-width'] = "".concat(this.triggerContainer.offsetWidth, "px"); this.initMenuItems(); this.toggle(true); diff --git a/core/tests/Drupal/Tests/Listeners/DeprecationListenerTrait.php b/core/tests/Drupal/Tests/Listeners/DeprecationListenerTrait.php index 1895054764..7bce2b6ffb 100644 --- a/core/tests/Drupal/Tests/Listeners/DeprecationListenerTrait.php +++ b/core/tests/Drupal/Tests/Listeners/DeprecationListenerTrait.php @@ -98,6 +98,7 @@ public static function isDeprecationSkipped($message) { */ public static function getSkippedDeprecations() { return [ + 'The Dropbutton render element is deprecated in drupal:9.1.0 and is removed from drupal:10.0.0. Use the Splitbutton render element instead. See https://www.drupal.org/node/3169786.', // The following deprecation message is skipped for testing purposes. '\Drupal\Tests\SkippedDeprecationTest deprecation', // The following Symfony deprecations are introduced in the Symfony 4 diff --git a/core/themes/claro/css/components/splitbutton.css b/core/themes/claro/css/components/splitbutton.css index d37f40383f..e9a0f753e2 100644 --- a/core/themes/claro/css/components/splitbutton.css +++ b/core/themes/claro/css/components/splitbutton.css @@ -110,7 +110,12 @@ html:not(.js) .splitbutton { } .splitbutton__toggle--with-title.button { - padding-right: calc(3rem - 2px); + padding-right: calc(3rem - 2px); /* LTR */ +} + +[dir="rtl"] .splitbutton__toggle--with-title.button { + padding-right: calc(1.5rem - 1px); + padding-left: calc(3rem - 2px); } .js .splitbutton__operation-list { @@ -180,7 +185,7 @@ html:not(.js) .splitbutton { width: 0.75rem; } -.js .splitbutton__toggle--with-title.button--small { +.no-touchevents .splitbutton__toggle--with-title.button--small { padding-right: 2rem; } @@ -188,7 +193,7 @@ html:not(.js) .splitbutton { right: calc(0.75rem - 1px); } -.js .splitbutton__toggle--with-title.button--extrasmall { +.no-touchevents .splitbutton__toggle--with-title.button--extrasmall { padding-right: calc(1.5rem + 2px); } @@ -197,8 +202,8 @@ html:not(.js) .splitbutton { background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23ffffff'/%3e%3c/svg%3e") no-repeat center; } -.js .splitbutton--small .splitbutton__operation-list-item, -.js .splitbutton--extrasmall .splitbutton__operation-list-item { +.no-touchevents .splitbutton--small .splitbutton__operation-list-item, +.no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item { padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 0.79rem; @@ -210,8 +215,8 @@ html:not(.js) .splitbutton { padding-bottom: 0.375rem; } -.js .splitbutton--small .splitbutton__operation-list-item:focus, -.js .splitbutton--extrasmall .splitbutton__operation-list-item:focus { +.no-touchevents .splitbutton--small .splitbutton__operation-list-item:focus, +.no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item:focus { padding-top: calc(0.625rem - 2px); padding-bottom: calc(0.625rem - 2px); } diff --git a/core/themes/claro/css/components/splitbutton.pcss.css b/core/themes/claro/css/components/splitbutton.pcss.css index 3e0c4689ef..7d12e1c835 100644 --- a/core/themes/claro/css/components/splitbutton.pcss.css +++ b/core/themes/claro/css/components/splitbutton.pcss.css @@ -53,8 +53,13 @@ html:not(.js) .splitbutton { transform: translate(50%, -50%) rotate(-180deg); } + .splitbutton__toggle--with-title.button { - padding-right: calc(var(--button--horizontal-padding) * 2); + padding-right: calc(var(--button--horizontal-padding) * 2); /* LTR */ +} +[dir="rtl"] .splitbutton__toggle--with-title.button { + padding-right: var(--button--horizontal-padding); + padding-left: calc(var(--button--horizontal-padding) * 2); } .js .splitbutton__operation-list { @@ -120,7 +125,7 @@ html:not(.js) .splitbutton { width: 0.75rem; } -.js .splitbutton__toggle--with-title.button--small { +.no-touchevents .splitbutton__toggle--with-title.button--small { padding-right: calc(var(--button--small--horizontal-padding) * 2 + 2px); } @@ -128,7 +133,7 @@ html:not(.js) .splitbutton { right: var(--button--extrasmall--horizontal-padding); } -.js .splitbutton__toggle--with-title.button--extrasmall { +.no-touchevents .splitbutton__toggle--with-title.button--extrasmall { padding-right: calc(var(--button--extrasmall--horizontal-padding) * 2 + 4px); } @@ -137,8 +142,8 @@ html:not(.js) .splitbutton { background: url(../../images/icons/ffffff/chevron-down.svg) no-repeat center; } -.js .splitbutton--small .splitbutton__operation-list-item, -.js .splitbutton--extrasmall .splitbutton__operation-list-item { +.no-touchevents .splitbutton--small .splitbutton__operation-list-item, +.no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item { padding-top: var(--splitbutton-item-padding-vertical--small); padding-bottom: var(--splitbutton-item-padding-vertical--small); font-size: var(--font-size-xs); @@ -150,8 +155,8 @@ html:not(.js) .splitbutton { padding-bottom: var(--splitbutton-item-padding-vertical--extrasmall); } -.js .splitbutton--small .splitbutton__operation-list-item:focus, -.js .splitbutton--extrasmall .splitbutton__operation-list-item:focus { +.no-touchevents .splitbutton--small .splitbutton__operation-list-item:focus, +.no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item:focus { padding-top: var(--splitbutton-item-padding-vertical--focus--small); padding-bottom: var(--splitbutton-item-padding-vertical--focus--small); }