diff --git a/core/lib/Drupal/Core/Render/Element/Splitbutton.php b/core/lib/Drupal/Core/Render/Element/Splitbutton.php index f3e350c1ec..9ef91adbf1 100644 --- a/core/lib/Drupal/Core/Render/Element/Splitbutton.php +++ b/core/lib/Drupal/Core/Render/Element/Splitbutton.php @@ -49,7 +49,7 @@ * 'added_link' => [ * '#type' => 'link', * '#title' => $this->t('Simple Form'), - * '#url' => Url::fromRoute('route.for.thelink'), + * '#url' => Url::fromRoute('route.for.the_link'), * ], * 'added_button' => [ * '#type' => 'button', diff --git a/core/misc/cspell/dictionary.txt b/core/misc/cspell/dictionary.txt index e736c74219..aa4ae60d15 100644 --- a/core/misc/cspell/dictionary.txt +++ b/core/misc/cspell/dictionary.txt @@ -163,6 +163,7 @@ beforeclose beforecreate beforeend behat +beihang bergmann berne bgblue @@ -559,6 +560,7 @@ entityreference entitytype entityviewedit entrypoint +ercim eridani errmode errored @@ -861,6 +863,7 @@ justifyright justinrainbow kakec kangarookitten +keio kerneltest kernighan keyframes @@ -1239,7 +1242,9 @@ overridetest overwritable pageable pagecache +pagedown pagetop +pageup pageviews pagina pangram @@ -1595,7 +1600,10 @@ spdx specialchar specialchars spiffiness +splitbutton splitbuttons +splitbutton's +splittextfield spreadsheetml sqlpassword sqlusername diff --git a/core/misc/splitbutton/splitbutton.es6.js b/core/misc/splitbutton/splitbutton.es6.js index 88fe3f5982..9042fc1e64 100644 --- a/core/misc/splitbutton/splitbutton.es6.js +++ b/core/misc/splitbutton/splitbutton.es6.js @@ -12,6 +12,14 @@ * - https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/menu-button/menu-button-1/js/MenuItemAction.js * - https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20161214/examples/menu-button/menu-button-1/js/PopupMenuAction.js * Copyright © 2020 W3C® (MIT, ERCIM, Keio, Beihang). + * + * This work is distributed under the W3C® Software License (link below) in the hope + * that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty + * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. + * + * This content is licensed according to the W3C Software License that is viewable at: + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * * The code was adapted for use in Drupal, to use modern ES6 syntax, and to * meet Drupal's JavaScript code standards. * diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css index 81e5d265e3..446eb73dd6 100644 --- a/core/themes/claro/css/base/variables.pcss.css +++ b/core/themes/claro/css/base/variables.pcss.css @@ -152,6 +152,32 @@ --button--small--horizontal-padding: calc(var(--space-m) - 1px); --button--extrasmall--vertical-padding: calc(calc(var(--space-xs) / 2) - 1px); --button--extrasmall--horizontal-padding: calc(var(--space-s) - 1px); + --dropbutton-spacing-size: var(--space-m); + --dropbutton-font-size: var(--font-size-base); + --dropbutton-line-height: var(--space-m); + --dropbutton-toggle-size: 3rem; + --dropbutton-border-size: 1px; + --dropbutton-item-padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)); + --dropbutton-toggle-size-spacing: var(--dropbutton-border-size); + --dropbutton-border-radius-size: 2px; + --dropbutton-small-spacing-size: 0.625rem; + --dropbutton-small-font-size: var(--font-size-xs); + --dropbutton-small-line-height: 0.75rem; + --dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height)); + --dropbutton-extrasmall-spacing-size: 0.375rem; + --dropbutton-extrasmall-font-size: var(--font-size-xs); + --dropbutton-extrasmall-line-height: 0.75rem; + --dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height)); + --splitbutton-item-border-size: var(--dropbutton-border-size); + --splitbutton-item-border-size--focus: 3px; + --splitbutton-item-font-size: var(--font-size-base); + --splitbutton-item-line-height: var(--font-size-base); + --splitbutton-item-padding: var(--dropbutton-item-padding); + --splitbutton-item-padding-vertical--small: var(--dropbutton-small-spacing-size); + --splitbutton-item-padding-vertical--extrasmall: var(--dropbutton-extrasmall-spacing-size); + --splitbutton-item-padding--focus: calc(var(--splitbutton-item-padding) - var(--splitbutton-item-border-size--focus) + var(--splitbutton-item-border-size)); + --splitbutton-item-padding-vertical--focus--small: calc(var(--splitbutton-item-padding-vertical--small) - var(--splitbutton-item-border-size--focus) + var(--splitbutton-item-border-size)); + --splitbutton-item-padding-vertical--focus--extrasmall: calc(var(--splitbutton-item-padding-vertical--extrasmall) - var(--splitbutton-item-border-size--focus) + var(--splitbutton-item-border-size)); /** * jQuery.UI dropdown. */ diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css index 18678113b7..4d35b53940 100644 --- a/core/themes/claro/css/components/dropbutton.css +++ b/core/themes/claro/css/components/dropbutton.css @@ -61,14 +61,6 @@ */ } -:root { - /** - * Dropbutton - */ - /* Variant variables: small. */ - /* Variant variables: extra small. */ -} - .dropbutton-wrapper { display: inline-flex; border-radius: 2px; diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css index 2da904bd59..6329320d4a 100644 --- a/core/themes/claro/css/components/dropbutton.pcss.css +++ b/core/themes/claro/css/components/dropbutton.pcss.css @@ -9,29 +9,6 @@ @import "../base/variables.pcss.css"; -:root { - /** - * Dropbutton - */ - --dropbutton-spacing-size: var(--space-m); - --dropbutton-font-size: var(--font-size-base); - --dropbutton-line-height: var(--space-m); - --dropbutton-toggle-size: 3rem; - --dropbutton-border-size: 1px; - --dropbutton-toggle-size-spacing: var(--dropbutton-border-size); - --dropbutton-border-radius-size: 2px; - /* Variant variables: small. */ - --dropbutton-small-spacing-size: 0.625rem; - --dropbutton-small-font-size: var(--font-size-xs); - --dropbutton-small-line-height: 0.75rem; - --dropbutton-small-toggle-size: calc((2 * var(--dropbutton-small-spacing-size)) + var(--dropbutton-small-line-height)); - /* Variant variables: extra small. */ - --dropbutton-extrasmall-spacing-size: 0.375rem; - --dropbutton-extrasmall-font-size: var(--font-size-xs); - --dropbutton-extrasmall-line-height: 0.75rem; - --dropbutton-extrasmall-toggle-size: calc((2 * var(--dropbutton-extrasmall-spacing-size)) + var(--dropbutton-extrasmall-line-height)); -} - .dropbutton-wrapper { display: inline-flex; border-radius: var(--button-border-radius-size); @@ -339,7 +316,7 @@ .dropbutton__item:first-of-type ~ .dropbutton__item > a, .dropbutton__item:first-of-type ~ .dropbutton__item > .button { position: relative; - padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size)); + padding: var(--dropbutton-item-padding); text-decoration: none; color: var(--color-davysgray); border: var(--dropbutton-border-size) solid transparent !important; /* 1 */ diff --git a/core/themes/claro/css/components/splitbutton.css b/core/themes/claro/css/components/splitbutton.css index 1b5c0a0332..d37f40383f 100644 --- a/core/themes/claro/css/components/splitbutton.css +++ b/core/themes/claro/css/components/splitbutton.css @@ -97,7 +97,7 @@ html:not(.js) .splitbutton { content: ""; transform: translate(50%, -50%) rotate(0); border: none; - background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center; + 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='%23222330'/%3e%3c/svg%3e") no-repeat center; background-size: contain; } @@ -129,16 +129,16 @@ html:not(.js) .splitbutton { margin: 0; padding: calc(1rem - 1px); text-align: left; + white-space: nowrap; text-decoration: none; color: #545560; /* * Styling for borders require !important due to .button having border styles * set to !important in button.pcss.css. */ - border-top: none !important; - border-right: 1px solid #d4d4d8 !important; - border-bottom: none !important; - border-left: 1px solid #d4d4d8 !important; + border: 1px solid #d4d4d8 !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; border-radius: 2px; background: #fff; box-shadow: none; @@ -150,7 +150,7 @@ html:not(.js) .splitbutton { .js .splitbutton__operation-list-item:focus { z-index: 5; - padding: calc(1rem - 4px) calc(1rem - 3px); + padding: calc(1rem - 3px); /* * Styling for borders require !important due to .button having border styles * set to !important in button.pcss.css. @@ -194,19 +194,29 @@ html:not(.js) .splitbutton { .js .splitbutton--primary .splitbutton__toggle::after, .js .splitbutton--danger .splitbutton__toggle::after { - background: url("data:image/svg+xml,%3Csvg width='14' height='9' fill='%23FF00FF' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='white'/%3E%3C/svg%3E") no-repeat center; + 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; } -.no-touchevents .splitbutton--small .splitbutton__operation-list-item { - padding-top: calc(0.625rem - 1px); - padding-bottom: calc(0.625rem - 1px); +.js .splitbutton--small .splitbutton__operation-list-item, +.js .splitbutton--extrasmall .splitbutton__operation-list-item { + padding-top: 0.625rem; + padding-bottom: 0.625rem; font-size: 0.79rem; - line-height: 0.75rem; + line-height: 0.79rem; } .no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item { - padding-top: calc(0.375rem - 1px); - padding-bottom: calc(0.375rem - 1px); - font-size: 0.79rem; - line-height: 0.75rem; + padding-top: 0.375rem; + padding-bottom: 0.375rem; +} + +.js .splitbutton--small .splitbutton__operation-list-item:focus, +.js .splitbutton--extrasmall .splitbutton__operation-list-item:focus { + padding-top: calc(0.625rem - 2px); + padding-bottom: calc(0.625rem - 2px); +} + +.no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item:focus { + padding-top: calc(0.375rem - 2px); + padding-bottom: calc(0.375rem - 2px); } diff --git a/core/themes/claro/css/components/splitbutton.pcss.css b/core/themes/claro/css/components/splitbutton.pcss.css index 32899f4b3e..3e0c4689ef 100644 --- a/core/themes/claro/css/components/splitbutton.pcss.css +++ b/core/themes/claro/css/components/splitbutton.pcss.css @@ -43,7 +43,7 @@ html:not(.js) .splitbutton { content: ""; transform: translate(50%, -50%) rotate(0); border: none; - background: url("data:image/svg+xml,%3Csvg width='14' height='9' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='%23222330'/%3E%3C/svg%3E") no-repeat center; + background: url(../../images/icons/222330/chevron-down.svg) no-repeat center; background-size: contain; } [data-drupal-splitbutton-open] .splitbutton__toggle::after { @@ -71,34 +71,34 @@ html:not(.js) .splitbutton { box-sizing: border-box; width: 100%; margin: 0; - padding: calc(1rem - 1px); + padding: var(--splitbutton-item-padding); text-align: left; + white-space: nowrap; text-decoration: none; color: #545560; /* * Styling for borders require !important due to .button having border styles * set to !important in button.pcss.css. */ - border-top: none !important; - border-right: 1px solid var(--color-lightgray) !important; - border-bottom: none !important; - border-left: 1px solid var(--color-lightgray) !important; + border: var(--splitbutton-item-border-size) solid var(--color-lightgray) !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; border-radius: 2px; background: #fff; box-shadow: none; - font-size: 1rem; + font-size: var(--splitbutton-item-font-size); font-weight: normal; - line-height: 1rem; + line-height: var(--splitbutton-item-line-height); -webkit-font-smoothing: antialiased; } .js .splitbutton__operation-list-item:focus { z-index: 5; - padding: calc(1rem - 4px) calc(1rem - 3px); + padding: var(--splitbutton-item-padding--focus); /* * Styling for borders require !important due to .button having border styles * set to !important in button.pcss.css. */ - border: 3px solid var(--color-focus) !important; + border: var(--splitbutton-item-border-size--focus) solid var(--color-focus) !important; outline: none; } .js .splitbutton__operation-list-item:hover { @@ -134,19 +134,29 @@ html:not(.js) .splitbutton { .js .splitbutton--primary .splitbutton__toggle::after, .js .splitbutton--danger .splitbutton__toggle::after { - background: url("data:image/svg+xml,%3Csvg width='14' height='9' fill='%23FF00FF' viewBox='0 0 14 9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.2384999,1.9384769 1.646703,0.5166019 7.0002189,5.8193359 12.353735,0.5166019 13.761938,1.9384769 7.0002189,8.635742Z' fill='white'/%3E%3C/svg%3E") no-repeat center; + background: url(../../images/icons/ffffff/chevron-down.svg) no-repeat center; } -.no-touchevents .splitbutton--small .splitbutton__operation-list-item { - padding-top: calc(0.625rem - 1px); - padding-bottom: calc(0.625rem - 1px); +.js .splitbutton--small .splitbutton__operation-list-item, +.js .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); - line-height: 0.75rem; + line-height: var(--font-size-xs); } .no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item { - padding-top: calc(0.375rem - 1px); - padding-bottom: calc(0.375rem - 1px); - font-size: var(--font-size-xs); - line-height: 0.75rem; + padding-top: var(--splitbutton-item-padding-vertical--extrasmall); + padding-bottom: var(--splitbutton-item-padding-vertical--extrasmall); +} + +.js .splitbutton--small .splitbutton__operation-list-item:focus, +.js .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); +} + +.no-touchevents .splitbutton--extrasmall .splitbutton__operation-list-item:focus { + padding-top: var(--splitbutton-item-padding-vertical--focus--extrasmall); + padding-bottom: var(--splitbutton-item-padding-vertical--focus--extrasmall); } diff --git a/core/themes/claro/images/icons/ffffff/chevron-down.svg b/core/themes/claro/images/icons/ffffff/chevron-down.svg new file mode 100644 index 0000000000..b4ddb8e8ff --- /dev/null +++ b/core/themes/claro/images/icons/ffffff/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file