From 68239ae3446e12f9287d112bebb28f9e6ba106dc Mon Sep 17 00:00:00 2001 From: Jon Robson Date: Thu, 27 Apr 2023 13:39:40 -0700 Subject: [PATCH] Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226 --- bundlesize.config.json | 6 +- includes/Components/VectorComponentButton.php | 15 ++-- .../Components/VectorComponentDropdown.php | 6 +- .../VectorComponentLanguageDropdown.php | 13 ++- .../Components/VectorComponentUserLinks.php | 2 +- includes/Hooks.php | 35 ++++---- includes/SkinVector22.php | 6 +- includes/templates/Icon.mustache | 2 +- includes/templates/PageTitlebar.mustache | 4 +- includes/templates/StickyHeader.mustache | 2 +- .../templates/TableOfContents__line.mustache | 5 +- .../components/MenuDropdownCheckbox.less | 2 +- resources/common/components/SearchBox.less | 5 +- resources/common/mixins.less | 23 ++++-- resources/common/variables.less | 3 - resources/skins.vector.js/dropdownMenus.js | 2 +- resources/skins.vector.js/echo.js | 25 ++++-- .../skins.vector.js/limitedWidthToggle.js | 3 +- resources/skins.vector.js/stickyHeader.js | 3 +- resources/skins.vector.js/tableOfContents.js | 4 +- resources/skins.vector.js/watchstar.js | 3 +- .../components/MenuDropdown.less | 3 +- .../components/Button.less | 82 +++++++++++++++++++ .../components/Dropdown.less | 11 +-- .../skins.vector.styles/components/Icon.less | 19 +++++ .../components/LanguageDropdown.less | 38 +++++---- .../components/MenuTabs.less | 9 +- .../components/PageTitlebar.less | 23 ++++-- .../components/PageToolbar.less | 16 +++- .../components/StickyHeader.less | 3 +- .../components/TableOfContents.less | 9 +- .../components/UserLinks.less | 11 +-- .../components/Watchstar.less | 4 +- .../layouts/toc/unpinned.less | 9 -- resources/skins.vector.styles/skin.less | 3 +- .../components/Dropdown.less | 9 +- .../components/StickyHeader.less | 3 +- .../components/TableOfContents.less | 12 +-- .../layouts/toc/unpinned.less | 9 -- .../skins.vector.zebra.styles/mixins.less | 23 ++++-- .../skins.vector.zebra.styles/variables.less | 3 - skin.json | 15 ++-- skinStyles/ext.echo.styles.alert.less | 4 - skinStyles/ext.echo.styles.badge.less | 15 ++-- skinStyles/ext.uls.pt.less | 2 + .../__snapshots__/stickyHeader.test.js.snap | 20 ++--- .../tableOfContents.test.js.snap | 20 +++-- .../jest/__snapshots__/userLinks.test.js.snap | 22 ++--- .../skins.vector.js/dropdownMenus.test.js | 12 +-- tests/jest/stickyHeader.test.js | 18 ++-- tests/jest/userLinksData.js | 22 ++--- tests/phpunit/integration/VectorHooksTest.php | 44 ++++++---- 52 files changed, 411 insertions(+), 251 deletions(-) create mode 100644 resources/skins.vector.styles/components/Button.less diff --git a/bundlesize.config.json b/bundlesize.config.json index d757562ac..850683a1b 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -3,9 +3,13 @@ "resourceModule": "skins.vector.styles.legacy", "maxSize": "8.4 kB" }, + { + "resourceModule": "codex-search-styles", + "maxSize": "4.2 kB" + }, { "resourceModule": "skins.vector.styles", - "maxSize": "12.3 kB" + "maxSize": "12.7 kB" }, { "resourceModule": "skins.vector.js", diff --git a/includes/Components/VectorComponentButton.php b/includes/Components/VectorComponentButton.php index 66853f955..7a21b4afb 100644 --- a/includes/Components/VectorComponentButton.php +++ b/includes/Components/VectorComponentButton.php @@ -70,25 +70,28 @@ class VectorComponentButton implements VectorComponent { * Constructs button classes based on the props */ private function getClasses(): string { - $classes = 'mw-ui-button'; + $classes = 'cdx-button'; + if ( $this->href ) { + $classes .= ' cdx-button--fake-button cdx-button--fake-button--enabled'; + } switch ( $this->weight ) { case 'primary': - $classes .= ' mw-ui-primary'; + $classes .= ' cdx-button--weight-primary'; break; case 'quiet': - $classes .= ' mw-ui-quiet'; + $classes .= ' cdx-button--weight-quiet'; break; } switch ( $this->action ) { case 'progressive': - $classes .= ' mw-ui-progressive'; + $classes .= ' cdx-button--action-progressive'; break; case 'destructive': - $classes .= ' mw-ui-destructive'; + $classes .= ' cdx-button--action-destructive'; break; } if ( $this->iconOnly ) { - $classes .= ' mw-ui-icon-element'; + $classes .= ' cdx-button--icon-only'; } if ( $this->class ) { $classes .= ' ' . $this->class; diff --git a/includes/Components/VectorComponentDropdown.php b/includes/Components/VectorComponentDropdown.php index 79c041dad..dfa4d64de 100644 --- a/includes/Components/VectorComponentDropdown.php +++ b/includes/Components/VectorComponentDropdown.php @@ -38,13 +38,13 @@ class VectorComponentDropdown implements VectorComponent { // FIXME: Stop hardcoding button and icon styles, this assumes all dropdowns with icons are icon buttons // Not the case for the language dropdown, page tools, etc $icon = $this->icon; - $headingClass = $icon ? - 'mw-ui-button mw-ui-quiet mw-ui-icon-element ' : ''; + $buttonClass = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet'; + $iconButtonClass = $icon ? ' cdx-button--icon-only ' : ''; return [ 'id' => $this->id, 'label' => $this->label, - 'heading-class' => $headingClass, + 'heading-class' => $buttonClass . $iconButtonClass, 'icon' => $this->icon, 'html-vector-menu-heading-attributes' => '', 'html-vector-menu-checkbox-attributes' => '', diff --git a/includes/Components/VectorComponentLanguageDropdown.php b/includes/Components/VectorComponentLanguageDropdown.php index fb06cdab6..0015175f6 100644 --- a/includes/Components/VectorComponentLanguageDropdown.php +++ b/includes/Components/VectorComponentLanguageDropdown.php @@ -7,7 +7,6 @@ use Title; * VectorComponentLanguageButton component */ class VectorComponentLanguageDropdown implements VectorComponent { - private const CLASS_PROGRESSIVE = 'mw-ui-progressive'; /** @var string */ private $label; /** @var string */ @@ -58,19 +57,19 @@ class VectorComponentLanguageDropdown implements VectorComponent { // display a less prominent "language" button, without a label, and // quiet instead of progressive. For this reason some default values // should be updated for this case. (T316559) + $buttonClasses = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet'; if ( !$isSubjectPage ) { $icon = 'language'; - $label = ''; - $headingClass = 'mw-ui-button mw-ui-quiet mw-portlet-lang-heading-empty'; + $this->class .= ' mw-portlet-lang-icon-only'; + $headingClass = $buttonClasses . ' cdx-button--icon-only mw-portlet-lang-heading-empty'; $checkboxClass = 'mw-interlanguage-selector-empty'; } else { $icon = 'language-progressive'; - $label = $this->label; - $headingClass = 'mw-ui-button mw-ui-quiet ' - . self::CLASS_PROGRESSIVE . ' mw-portlet-lang-heading-' . strval( $this->numLanguages ); + $headingClass = $buttonClasses . ' cdx-button--action-progressive' + . ' mw-portlet-lang-heading-' . strval( $this->numLanguages ); $checkboxClass = 'mw-interlanguage-selector'; } - $dropdown = new VectorComponentDropdown( 'p-lang-btn', $label, $this->class ); + $dropdown = new VectorComponentDropdown( 'p-lang-btn', $this->label, $this->class ); $dropdownData = $dropdown->getTemplateData(); // override default heading class. $dropdownData['heading-class'] = $headingClass; diff --git a/includes/Components/VectorComponentUserLinks.php b/includes/Components/VectorComponentUserLinks.php index 0657fa8d5..0f852d3db 100644 --- a/includes/Components/VectorComponentUserLinks.php +++ b/includes/Components/VectorComponentUserLinks.php @@ -62,7 +62,7 @@ class VectorComponentUserLinks implements VectorComponent { $isAnon = !$user->isRegistered(); $class = 'vector-user-menu'; - $class .= ' mw-ui-icon-flush-right'; + $class .= ' vector-button-flush-right'; $class .= !$isAnon ? ' vector-user-menu-logged-in' : ' vector-user-menu-logged-out'; diff --git a/includes/Hooks.php b/includes/Hooks.php index c53dc2fe6..c01b81c9a 100644 --- a/includes/Hooks.php +++ b/includes/Hooks.php @@ -177,7 +177,7 @@ class Hooks implements // Force the item as a button with hidden text. $item['button'] = true; $item['text-hidden'] = true; - $item = self::updateMenuItemData( $item, true, false ); + $item = self::updateMenuItemData( $item, false ); } } elseif ( !$isLegacy ) { // The vector-tab-noicon class is only used in Vector-22. @@ -436,16 +436,11 @@ class Hooks implements * * @internal for use inside Vector skin. * @param string $name - * @param bool $isSmall * @return string of HTML */ - public static function makeIcon( $name, $isSmall = false ) { + public static function makeIcon( $name ) { // Html::makeLink will pass this through rawElement - $iconClasses = 'mw-ui-icon'; - if ( $isSmall ) { - $iconClasses .= ' mw-ui-icon-small'; - } - return ''; + return ''; } /** @@ -455,12 +450,11 @@ class Hooks implements * @param array $item data to update * @param string $buttonClassProp property to append button classes * @param string $iconHtmlProp property to set icon HTML - * @param bool $isSmallIcon when set a small icon will be applied rather than the standard icon size * @param bool $unsetIcon should the icon field be unset? * @return array $item Updated data */ private static function updateItemData( - $item, $buttonClassProp, $iconHtmlProp, $isSmallIcon = false, $unsetIcon = true + $item, $buttonClassProp, $iconHtmlProp, $unsetIcon = true ) { $hasButton = $item['button'] ?? false; $hideText = $item['text-hidden'] ?? false; @@ -477,14 +471,20 @@ class Hooks implements self::makeMenuItemCollapsible( $item ); } if ( $hasButton ) { - self::appendClassToItem( $item[ $buttonClassProp ], [ 'mw-ui-button', 'mw-ui-quiet' ] ); + // Hardcoded button classes, this should be fixed by replacing Hooks.php with VectorComponentButton.php + self::appendClassToItem( $item[ $buttonClassProp ], [ + 'cdx-button', + 'cdx-button--fake-button', + 'cdx-button--fake-button--enabled', + 'cdx-button--weight-quiet' + ] ); } if ( $icon ) { - if ( $hideText ) { - $iconElementClasses = [ 'mw-ui-icon-element' ]; - self::appendClassToItem( $item[ $buttonClassProp ], $iconElementClasses ); + if ( $hideText && $hasButton ) { + self::appendClassToItem( $item[ $buttonClassProp ], [ 'cdx-button--icon-only' ] ); } - $item[ $iconHtmlProp ] = self::makeIcon( $icon, $isSmallIcon ); + + $item[ $iconHtmlProp ] = self::makeIcon( $icon ); } return $item; } @@ -494,14 +494,13 @@ class Hooks implements * * @internal used inside Hooks::updateMenuItems ::updateViewsMenuIcons and ::updateUserLinksDropdownItems * @param array $item menu item data to update - * @param bool $isSmallIcon when set a small icon will be applied rather than the standard icon size * @param bool $unsetIcon should the icon field be unset? * @return array $item Updated menu item data */ - public static function updateMenuItemData( $item, $isSmallIcon = false, $unsetIcon = true ) { + public static function updateMenuItemData( $item, $unsetIcon = true ) { $buttonClassProp = 'link-class'; $iconHtmlProp = 'link-html'; - return self::updateItemData( $item, $buttonClassProp, $iconHtmlProp, $isSmallIcon, $unsetIcon ); + return self::updateItemData( $item, $buttonClassProp, $iconHtmlProp, $unsetIcon ); } /** diff --git a/includes/SkinVector22.php b/includes/SkinVector22.php index 5e4e69c9d..59047cdc9 100644 --- a/includes/SkinVector22.php +++ b/includes/SkinVector22.php @@ -354,7 +354,7 @@ class SkinVector22 extends SkinMustache { // label $this->msg( 'vector-toc-collapsible-button-label' ), // class - 'vector-page-titlebar-toc mw-ui-icon-flush-left', + 'vector-page-titlebar-toc vector-button-flush-left', // icon 'listBullet', ), @@ -367,7 +367,7 @@ class SkinVector22 extends SkinMustache { // label $this->msg( 'vector-toc-collapsible-button-label' ), // class - 'mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc mw-ui-icon-flush-left', + 'mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc vector-button-flush-left', // icon 'listBullet' ), @@ -438,7 +438,7 @@ class SkinVector22 extends SkinMustache { 'data-main-menu-dropdown' => new VectorComponentDropdown( VectorComponentMainMenu::ID . '-dropdown', $this->msg( VectorComponentMainMenu::ID . '-label' )->text(), - VectorComponentMainMenu::ID . '-dropdown' . ' mw-ui-icon-flush-left mw-ui-icon-flush-right', + VectorComponentMainMenu::ID . '-dropdown' . ' vector-button-flush-left vector-button-flush-right', 'menu' ), 'data-page-tools' => new VectorComponentPageTools( diff --git a/includes/templates/Icon.mustache b/includes/templates/Icon.mustache index 8e1ef91e2..8ceb69be3 100644 --- a/includes/templates/Icon.mustache +++ b/includes/templates/Icon.mustache @@ -1,2 +1,2 @@ - + diff --git a/includes/templates/PageTitlebar.mustache b/includes/templates/PageTitlebar.mustache index 4a0fff4c6..83189448b 100644 --- a/includes/templates/PageTitlebar.mustache +++ b/includes/templates/PageTitlebar.mustache @@ -7,13 +7,13 @@ {{! Checkbox hack used by collapsed TOC on narrow viewports for no JS users }} diff --git a/includes/templates/StickyHeader.mustache b/includes/templates/StickyHeader.mustache index 4a586c328..7f64d2898 100644 --- a/includes/templates/StickyHeader.mustache +++ b/includes/templates/StickyHeader.mustache @@ -12,7 +12,7 @@ }}
-