wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 15:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use Codex for button styles, start transitioning icons to use Codex icon mixins

Browse source 
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 <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
This commit is contained in:
Jon Robson 2023-04-27 13:39:40 -07:00
parent 6ec45dba89
commit 68239ae344
52 changed files with 411 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
bundlesize.config.json
View file

@ -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",

15
includes/Components/VectorComponentButton.php
View file

@ -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;

6
includes/Components/VectorComponentDropdown.php
View file

@ -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' => '',

13
includes/Components/VectorComponentLanguageDropdown.php
View file

@ -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;

2
includes/Components/VectorComponentUserLinks.php
View file

@ -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';

35
includes/Hooks.php
View file

@ -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 '<span class="' . $iconClasses . ' mw-ui-icon-' . $name . ' mw-ui-icon-wikimedia-' . $name . '"></span>';
return '<span class="vector-icon mw-ui-icon-' . $name . ' mw-ui-icon-wikimedia-' . $name . '"></span>';
}
/**
@ -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 );
}
/**

6
includes/SkinVector22.php
View file

@ -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(

2
includes/templates/Icon.mustache
View file

@ -1,2 +1,2 @@
<span class="mw-ui-icon mw-ui-icon-{{.}} mw-ui-icon-wikimedia-{{.}}"></span>
<span class="vector-icon mw-ui-icon-{{.}} mw-ui-icon-wikimedia-{{.}}"></span>

4
includes/templates/PageTitlebar.mustache
View file

@ -7,13 +7,13 @@
{{! Checkbox hack used by collapsed TOC on narrow viewports for no JS users }}
<label
id="vector-toc-collapsed-button"
class="mw-ui-button mw-ui-quiet mw-ui-icon-flush-left mw-ui-icon-element"
class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet vector-button-flush-left cdx-button--icon-only"
for="vector-toc-collapsed-checkbox"
role="button"
aria-controls="vector-toc"
tabindex="0"
title="{{msg-vector-toc-menu-tooltip}}">
<span class="mw-ui-icon mw-ui-icon-wikimedia-listBullet"></span>
<span class="vector-icon mw-ui-icon-wikimedia-listBullet"></span>
<span>{{msg-vector-toc-collapsible-button-label}}</span>
</label>

2
includes/templates/StickyHeader.mustache
View file

@ -12,7 +12,7 @@
}}
<div id="vector-sticky-header" class="vector-sticky-header">
<div class="vector-sticky-header-start">
<div class="vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right" aria-hidden="true">
<div class="vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right" aria-hidden="true">
{{#data-button-start}}
{{>Button}}
{{/data-button-start}}

5
includes/templates/TableOfContents__line.mustache
View file

@ -8,8 +8,9 @@
{{{.}}}
{{/extensionData.DiscussionTools-html-summary}}
{{#is-top-level-section}}{{#is-parent-section}}
<button aria-controls="toc-{{anchor}}-sublist" class="mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle">
{{{vector-button-label}}}
<button aria-controls="toc-{{anchor}}-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle">
<span class="vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand"></span>
<span>{{{vector-button-label}}}</span>
</button>
{{/is-parent-section}}{{/is-top-level-section}}
<ul id="toc-{{anchor}}-sublist" class="vector-toc-list">

2
resources/common/components/MenuDropdownCheckbox.less
View file

@ -77,7 +77,7 @@
}
// Add focus state to menu dropdown buttons (i.e. #p-variants, #p-cactions)
&:focus + .vector-menu-heading {
&:focus + .vector-menu-heading:not( .cdx-button ) {
// Simulate browser focus ring
outline: dotted 1px; // Firefox style
outline: auto -webkit-focus-ring-color; // Webkit style

5
resources/common/components/SearchBox.less
View file

@ -96,13 +96,14 @@
.search-toggle {
// At lower resolutions the search input is hidden and a toggle is shown
display: block;
display: inline-flex;
float: right;
// Ensures the button has a font size of 16px
font-size: unit( 16 / @font-size-browser, rem );
@media ( min-width: @min-width-desktop ) {
display: none;
// Override .cdx-button styles
display: none !important; /* stylelint-disable-line declaration-no-important */
}
}

23
resources/common/mixins.less
View file

@ -23,13 +23,18 @@
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
}
.mixin-vector-menu-heading-arrow() {
content: '';
background: url( ../common/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
.mixin-vector-arrowed-dropdown-toggle() {
display: inline-flex;
align-items: center;
&::after {
content: '';
background: url( ../common/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
}
}
.mixin-vector-dropdown-menu-item() {
@ -42,6 +47,10 @@
color: @color-link;
}
.vector-icon {
margin-right: @spacing-35;
}
&.selected a,
&.selected a:visited {
color: @color-link-selected;

3
resources/common/variables.less
View file

@ -131,9 +131,6 @@
@size-search-expand: 24px;
@margin-end-search: 12px;
// Language button
@height-button-lang: unit( 32 / @font-size-browser, em );
// Pre-content
@margin-top-pre-content: 8px;

2
resources/skins.vector.js/dropdownMenus.js
View file

@ -50,7 +50,7 @@ function createIconElement( menuElement, parentElement, id ) {
}
const iconElement = document.createElement( 'span' );
iconElement.classList.add( 'mw-ui-icon' );
iconElement.classList.add( 'vector-icon' );
if ( id ) {
// The following class allows gadgets developers to style or hide an icon.

25
resources/skins.vector.js/echo.js
View file

@ -10,19 +10,26 @@ function init() {
mw.hook( 'ext.echo.NotificationBadgeWidget.onInitialize' ).add( function ( badge ) {
const element = badge.$element[ 0 ];
element.classList.add( 'mw-list-item' );
const iconButtonClasses = [ 'mw-ui-button', 'mw-ui-quiet', 'mw-ui-icon', 'mw-ui-icon-element' ];
const anchor = /** @type {HTMLElement} */ ( element.querySelector( 'a' ) );
anchor.classList.add(
'cdx-button',
'cdx-button--weight-quiet',
'cdx-button--icon-only',
'cdx-button--fake-button',
'cdx-button--fake-button--enabled'
);
// Icon classes shouldn't go on the same element as button classes
// However this cant be avoided due to Echo button's implementation
// which directly sets the contents of the anchor element every update
// which would clear out any icon children that we define
if ( element.id === 'pt-notifications-alert' ) {
const anchor = element.querySelector( 'a' );
anchor.classList.add( ...iconButtonClasses, 'mw-ui-icon-bell' );
anchor.classList.remove( 'oo-ui-icon-bell' );
anchor.classList.add( 'vector-icon', 'mw-ui-icon-wikimedia-bell' );
}
if ( element.id === 'pt-notifications-notice' ) {
const anchor = element.querySelector( 'a' );
anchor.classList.add( ...iconButtonClasses, 'mw-ui-icon-tray' );
anchor.classList.remove( 'oo-ui-icon-tray' );
anchor.classList.add( 'vector-icon', 'mw-ui-icon-wikimedia-tray' );
}
anchor.classList.remove( 'oo-ui-icon-bell', 'oo-ui-icon-tray' );
} );
}
module.exports = init;

3
resources/skins.vector.js/limitedWidthToggle.js
View file

@ -33,7 +33,8 @@ function getPopupText() {
function init() {
const settings = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-settings' ) );
const toggle = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle' ) );
const toggleIcon = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle .mw-ui-icon' ) );
// FIXME: Remove old icon classes after caching
const toggleIcon = /** @type {HTMLElement|null} */ ( document.querySelector( '.vector-limited-width-toggle .mw-ui-icon, .vector-limited-width-toggle .vector-icon' ) );
if ( !settings || !toggle || !toggleIcon ) {
return;

3
resources/skins.vector.js/stickyHeader.js
View file

@ -204,7 +204,8 @@ function prepareIcons( header, history, talk, subject, watch ) {
const watchContainer = watch.parentNode;
const isTemporaryWatch = watchContainer.classList.contains( 'mw-watchlink-temp' );
const isWatched = isTemporaryWatch || watchContainer.getAttribute( 'id' ) === 'ca-unwatch';
const watchIcon = /** @type {HTMLElement} */ ( watchSticky.querySelector( '.mw-ui-icon' ) );
// FIXME: Remove old icon classes after caching
const watchIcon = /** @type {HTMLElement} */ ( watchSticky.querySelector( '.mw-ui-icon, .vector-icon' ) );
// Initialize sticky watchlink
copyButtonAttributes( watch, watchSticky );

4
resources/skins.vector.js/tableOfContents.js
View file

@ -425,7 +425,7 @@ module.exports = function tableOfContents( props ) {
}
// Toggle button does not contain child elements,
// so classList check will suffice.
if ( e.target.classList.contains( TOGGLE_CLASS ) ) {
if ( e.target.closest( `.${TOGGLE_CLASS}` ) ) {
toggleExpandSection( tocSection.id );
if ( props.onToggleClick ) {
props.onToggleClick( tocSection.id );
@ -474,7 +474,7 @@ module.exports = function tableOfContents( props ) {
*/
function updateTocToggleStyles( scrollBelow ) {
const TOC_TITLEBAR_TOGGLE_ID = 'vector-page-titlebar-toc-label';
const QUIET_BUTTON_CLASS = 'mw-ui-quiet';
const QUIET_BUTTON_CLASS = 'cdx-button--weight-quiet';
const tocToggle = document.getElementById( TOC_TITLEBAR_TOGGLE_ID );
if ( tocToggle ) {
if ( scrollBelow ) {

3
resources/skins.vector.js/watchstar.js
View file

@ -28,7 +28,8 @@ const updateWatchIcon = ( watchIcon, isWatched, expiry ) => {
const init = () => {
mw.hook( 'wikipage.watchlistChange' ).add(
function ( /** @type {boolean} */ isWatched, /** @type {string} */ expiry ) {
const watchIcons = document.querySelectorAll( '.mw-watchlink .mw-ui-icon' );
// FIXME: Remove old icon classes after caching
const watchIcons = document.querySelectorAll( '.mw-watchlink .mw-ui-icon, .mw-watchlink .vector-icon' );
if ( !watchIcons ) {
return;
}

3
resources/skins.vector.styles.legacy/components/MenuDropdown.less
View file

@ -71,7 +71,8 @@
text-align: left;
line-height: 1em;
a:not( .mw-ui-icon ) {
// FIXME: Remove old icon classes after caching
a:not( .vector-icon ):not( .mw-ui-icon ) {
font-size: @font-size-tabs;
}

82
resources/skins.vector.styles/components/Button.less Normal file
View file

@ -0,0 +1,82 @@
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
@import 'mediawiki.skin.variables.less';
.cdx-button:not( .cdx-button--icon-only ) .vector-icon {
// Add spacing between icon and text
margin-right: @spacing-35;
}
.cdx-button {
// Needed to horizontaly center icon buttons (floating TOC button, watchstar button)
// Can be seen on small viewports due to the fact that we arent using `.cdx-button--size-large`
justify-content: center;
}
.cdx-button.cdx-button--icon-only {
// Increase padding on small viewports
// FIXME: Replace with Codex solution i.e. `.cdx-button--size-large`
@media ( max-width: @max-width-tablet ) {
@min-size-interactive-touch: 44px;
min-width: @min-size-interactive-touch;
min-height: @min-size-interactive-touch;
}
// Hide text in icon only buttons
span + span {
.mixin-screen-reader-text();
}
}
.vector-button-flush-left {
@media ( min-width: @min-width-desktop ) {
.cdx-mixin-button-layout-flush( 'start', true );
}
@media ( max-width: @max-width-tablet ) {
.cdx-mixin-button-layout-flush( 'start', true, 'large' );
}
}
.vector-button-flush-right {
@media ( min-width: @min-width-desktop ) {
.cdx-mixin-button-layout-flush( 'end', true );
}
@media ( max-width: @max-width-tablet ) {
.cdx-mixin-button-layout-flush( 'end', true, 'large' );
}
}
// Handle button styles in checkbox hack, copied from Codex
// FIXME: Remove these styles when Codex supports the checkbox hack in T333394
input:hover + .vector-menu-heading.cdx-button:not( .cdx-button--action-progressive ) {
background-color: @background-color-button-quiet--hover;
}
input:active + .vector-menu-heading.cdx-button:not( .cdx-button--action-progressive ) {
background-color: @background-color-button-quiet--active;
color: @color-emphasized;
border-color: @border-color-interactive;
}
input:focus:not( :active ) + .vector-menu-heading.cdx-button:not( .cdx-button--action-progressive ) {
border-color: @border-color-progressive--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
}
input:hover + .vector-menu-heading.cdx-button.cdx-button--action-progressive {
background-color: @background-color-progressive-subtle;
color: @color-progressive--hover;
}
input:active + .vector-menu-heading.cdx-button.cdx-button--action-progressive {
background-color: @background-color-progressive--active;
color: @color-inverted;
border-color: @border-color-progressive--active;
}
input:focus:not( :active ) + .vector-menu-heading.cdx-button.cdx-button--action-progressive {
border-color: @border-color-progressive--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus @box-shadow-inset-medium @box-shadow-color-inverted;
}

11
resources/skins.vector.styles/components/Dropdown.less
View file

@ -3,17 +3,14 @@
@import 'mediawiki.mixins.less';
/**
* Targets all dropdown labels.
* Targets all dropdown toggle buttons. Doesn't apply to icon only buttons like the main menu dropdown.
* - language variants, Actions menus
* - more menu, user menu
* - ULS button in sticky header
*/
.vector-dropdown > .vector-menu-heading:not( .mw-ui-icon-element ) {
display: flex;
&::after {
.mixin-vector-menu-heading-arrow();
}
// FIXME: Remove old icon classes after caching
.vector-dropdown > .vector-menu-heading:not( .cdx-button--icon-only ):not( .mw-ui-icon-element ) {
.mixin-vector-arrowed-dropdown-toggle();
}
/**

19
resources/skins.vector.styles/components/Icon.less
View file

@ -1,5 +1,24 @@
@import '../../common/variables.less';
@import 'mediawiki.mixins.less';
// FIXME: Remove old icon classes after caching
// Make sure all icons are the correct color https://phabricator.wikimedia.org/T317800
.mw-ui-icon::before {
// `@opacity-icon-base` equals to `#222` on `background-color: #fff`, closest to `#202122`.
opacity: @opacity-icon-base;
}
.vector-icon {
.cdx-mixin-css-icon-background( );
.cdx-mixin-css-icon-size( );
.cdx-mixin-css-icon-alignment( );
font-size: 14px;
}
// Temporary generic small icon class
// FIXME: Replace with proper Codex CSS icon usage in T338403
.vector-icon--x-small {
.cdx-mixin-css-icon-background( @size-icon-x-small );
.cdx-mixin-css-icon-size( @size-icon-x-small );
.cdx-mixin-css-icon-alignment( );
}

38
resources/skins.vector.styles/components/LanguageDropdown.less
View file

@ -9,7 +9,6 @@
// the language portlet that can display in the sidebar.
.vector-page-titlebar .mw-portlet-lang {
box-sizing: border-box;
height: @height-button-lang;
flex-shrink: 0;
// If there are no languages and JavaScript is not enabled there is no fallback so we hide
@ -32,29 +31,40 @@
}
// T291286: Temporarily use progressive ULS style
&.mw-ui-progressive.mw-ui-quiet {
// FIXME: Remove old classes after caching
&.mw-ui-progressive.mw-ui-quiet,
&.cdx-button--action-progressive.cdx-button--weight-quiet {
.mw-ui-icon::before {
// Ensure inverted language icon is white
opacity: @opacity-base;
}
&::after {
// Invert arrow color
background-image: url( ../common/images/arrow-down-progressive.svg );
// !important needed to override Zebra Dropdown.less styles
// FIXME: Remove !important when Zebra is default
/* stylelint-disable-next-line declaration-no-important */
background-image: url( ../common/images/arrow-down-progressive.svg ) !important;
opacity: @opacity-base;
}
}
}
input:active + .vector-menu-heading {
&.mw-ui-progressive.mw-ui-quiet {
.mw-ui-icon {
// FIXME: Remove old classes after caching
&.mw-ui-progressive.mw-ui-quiet,
&.cdx-button--action-progressive.cdx-button--weight-quiet {
.mw-ui-icon,
.vector-icon {
// stylelint-disable-next-line plugin/no-unsupported-browser-features
filter: brightness( 0 ) invert( 1 );
}
&::after {
background-image: url( ../common/images/arrow-down-invert.svg );
// Invert arrow color
// !important needed to override Zebra Dropdown.less styles
// FIXME: Remove !important when Zebra is default
/* stylelint-disable-next-line declaration-no-important */
background-image: url( ../common/images/arrow-down-invert.svg ) !important;
}
}
}
@ -79,15 +89,15 @@
}
}
.vector-menu-checkbox:checked ~ .vector-menu-content {
display: block;
}
.after-portlet {
// ensure there is a visual separation between the language links and additional links.
margin-top: 10px;
}
.mw-portlet-lang-heading-empty {
.mixin-vector-arrowed-dropdown-toggle();
}
// styles for less prominent Language button (without label) to be used for non-content pages (see T316559)
.mw-portlet-lang-heading-empty + .vector-menu-content {
left: auto;
@ -109,11 +119,7 @@
}
.mw-interlanguage-selector {
display: flex;
&::after {
.mixin-vector-menu-heading-arrow();
}
.mixin-vector-arrowed-dropdown-toggle();
}
// Hide the "Add languages" on pages which are not action=view where there are 0 languages

9
resources/skins.vector.styles/components/MenuTabs.less
View file

@ -11,12 +11,9 @@
// With mw-ui-icons, expand watchstar and wikilove links it to cover full touch area
.mw-list-item {
.mw-ui-icon-element {
font-size: unit( 16 / @font-size-browser, rem );
.cdx-button--icon-only {
// Align small icons with the bottom of the tabs.
margin: 4px 2px 0 2px;
// Do not increase size at lower resolutions
padding: 0.3125em;
margin: 2px 0 0;
}
}
@ -84,6 +81,8 @@
// For better compatibility with gadgets (like Twinkle) that append
// <H3> elements as dropdown headings (which was the convention in legacy Vector).
font-size: inherit;
// Override button styles on dropdown toggle button
border: 0;
}
&.vector-tab-noicon > a,

23
resources/skins.vector.styles/components/PageTitlebar.less
View file

@ -25,27 +25,36 @@
display: none !important; /* stylelint-disable-line declaration-no-important */
}
> .mw-ui-button {
// FIXME: Remove old button classes after caching
> .mw-ui-button,
> .cdx-button {
font-size: @font-size-base;
// Removes redundant whitespace (line break) between Icon and Button templates
display: flex;
// When labels have multiple words e.g. "Add topic" make sure they do not wrap onto
// new line. This can happen when editing pages with long titles. e.g. F36867314
white-space: nowrap;
// At low resolutions, the rule in core for `.mw-ui-button:not(.mw-ui-icon-element)`
// interferes with add topic and makes it overlap the language button. e.g. F36867319
&:not( .mw-ui-icon-element ) {
// FIXME: See if this selector can be removed after caching
&:not( .mw-ui-icon-element ),
&:not( .cdx-button--icon-only ) {
min-width: auto;
}
}
// FIXME: Remove old button classes after caching
> .mw-ui-button,
> .cdx-button,
> .mw-portlet-lang {
&:last-child {
// This number should be synced with the value in:
// https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.less/mediawiki.ui/mixins.buttons.less#L33
margin-right: -12px;
.cdx-mixin-button-layout-flush( 'end' );
}
}
// The language button sometimes appears as an icon only button, in which
// case we need to flush differently. See an empty user page for an example of
// where this is used.
> .mw-portlet-lang-icon-only:last-child {
.cdx-mixin-button-layout-flush( 'end', true );
}
}

16
resources/skins.vector.styles/components/PageToolbar.less
View file

@ -20,9 +20,23 @@
}
}
// Reduce icon size for icon buttons in the page toolbar (i.e. watchstar, wikilove)
.vector-icon {
.cdx-mixin-css-icon-background( @size-icon-small );
.cdx-mixin-css-icon-size( @size-icon-small );
.cdx-mixin-css-icon-alignment( );
}
// Prevent icon buttons in the page toolbar from automatically increasing padding on small viewports
.cdx-button--icon-only {
// !important needed to override 'responsive' button styles on smaller viewports defined in Button.less
min-width: 32px !important; /* stylelint-disable-line declaration-no-important */
min-height: 32px !important; /* stylelint-disable-line declaration-no-important */
}
// FIXME: Remove selector after caching
.mw-ui-icon-element {
// Override icon styles to apply .mw-ui-icon-small styles
// FIXME: To be replaced with Codex mixins
.mw-ui-icon {
min-width: 16px;
min-height: 16px;

3
resources/skins.vector.styles/components/StickyHeader.less
View file

@ -76,10 +76,9 @@
font-size: @font-size-sticky-header-links;
}
&-end,
// Spacing between buttons
&-icons,
&-buttons {
// Spacing between buttons
column-gap: 8px;
}

9
resources/skins.vector.styles/components/TableOfContents.less
View file

@ -32,14 +32,19 @@
position: absolute;
top: 1px; // visually center icon
left: ~'calc( -1 * @{size-toc-subsection-toggle-icon} - 1px )'; // leaves 6px between icon + text
width: @size-toc-subsection-toggle-icon; // ~22px @ 12
height: @size-toc-subsection-toggle-icon;
font-size: 0.75em; // reduces size of toggle icon to 12px @ 16
transition: @transition-duration-base;
color: transparent;
cursor: pointer;
// Vertically center the icon with the text
margin-top: 2px;
// Reset <button> default browser styles
border: 0;
background: none;
// Override .cdx-button styles
min-width: @spacing-subsection-toggle;
min-height: @spacing-subsection-toggle;
padding: 0;
}
.vector-toc-link {

11
resources/skins.vector.styles/components/UserLinks.less
View file

@ -16,6 +16,7 @@
justify-content: flex-end;
flex-shrink: 1;
// FIXME: Remove old button classes after caching
.mw-ui-button {
// FIXME: Overrides mw-ui-button's `display: inline-block` property so that
// the text in the button is vertically centered. `.mw-ui-button` sets a
@ -56,6 +57,7 @@
font-size: @font-size-user-links;
// Ensure icon buttons have a base font of 16px
// FIXME: Remove old button classes after caching
.mw-ui-icon-element {
font-size: unit( 16 / @font-size-browser, rem );
}
@ -79,7 +81,8 @@
// Only apply 8px spacing to normal links (i.e. Create account, User page)
// Links with button classes will have a larger touch area
// and therefore dont need additional spacing
a:not( .mw-ui-button ):not( .mw-echo-notifications-badge ) {
// FIXME: Remove old button selector after caching
a:not( .mw-ui-button ):not( .mw-echo-notifications-badge ):not( .cdx-button ) {
margin: 0 8px;
}
}
@ -94,10 +97,8 @@
/**
* Logged-in dropdown menu
*/
.vector-user-menu-logged-in {
.vector-menu-heading::after {
.mixin-vector-menu-heading-arrow();
}
.vector-user-menu-logged-in .vector-menu-heading {
.mixin-vector-arrowed-dropdown-toggle();
}
/**

4
resources/skins.vector.styles/components/Watchstar.less
View file

@ -8,7 +8,9 @@
// Note: there's no watchstar for anon users so no need to worry about cached HTML when changing this class
// Loading watchstar link class.
.mw-watchlink {
.mw-ui-icon {
// FIXME: Remove old icon classes after caching
.mw-ui-icon,
.vector-icon {
transition: transform 500ms;
}

9
resources/skins.vector.styles/layouts/toc/unpinned.less
View file

@ -11,15 +11,6 @@
margin-right: 8px;
}
// TOC dropdown toggle styles
#vector-toc-collapsed-button,
body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
@media ( max-width: @max-width-tablet ) {
// Override the default button styles so the ToC button in the page titlebar is slightly shorter on small viewports
padding: 7px 12px;
}
}
// TOC styles when unpinned
.mixin-toc-unpinned() {
display: block;

3
resources/skins.vector.styles/skin.less
View file

@ -28,11 +28,13 @@
@media screen {
// Components
@import './components/Button.less';
@import './components/SearchBoxLoader.less';
@import './components/VueEnhancedSearchBox.less';
@import './components/LanguageDropdown.less';
@import './components/UserLinks.less';
@import './components/Header.less';
@import './components/Icon.less';
@import './components/Footer.less';
@import './components/Menu.less';
@import './components/MenuTabs.less';
@ -40,7 +42,6 @@
@import './components/PageToolbar.less';
@import './components/PopupNotification.less';
@import './components/Watchstar.less';
@import './components/Icon.less';
@import './components/LimitedWidthToggle.less';
}

9
resources/skins.vector.zebra.styles/components/Dropdown.less
View file

@ -4,12 +4,9 @@
* - more menu, user menu
* - ULS button in sticky header
*/
.vector-dropdown > .vector-menu-heading:not( .mw-ui-icon-element ) {
display: flex;
&::after {
.mixin-vector-menu-heading-arrow();
}
// FIXME: Remove old button classes after caching
.vector-dropdown > .vector-menu-heading:not( .cdx-button--icon-only ):not( .mw-ui-icon-element ) {
.mixin-vector-arrowed-dropdown-toggle();
}
/**

3
resources/skins.vector.zebra.styles/components/StickyHeader.less
View file

@ -72,10 +72,9 @@
font-size: @font-size-sticky-header-links;
}
&-end,
// Spacing between buttons
&-icons,
&-buttons {
// Spacing between buttons
column-gap: 8px;
}

12
resources/skins.vector.zebra.styles/components/TableOfContents.less
View file

@ -19,16 +19,18 @@
.vector-toc-toggle {
// For no-js users, toggling is disabled and icon is hidden
display: none;
width: @size-toc-subsection-toggle;
height: @size-toc-subsection-toggle;
// Changes the size of the icon background image
font-size: @size-toc-subsection-toggle-icon;
transition: @transition-duration-base;
position: absolute;
left: -@size-toc-subsection-toggle/2;
// Visual centering.
top: 2px;
top: 1px;
// Override .cdx-button styles
min-width: @size-toc-subsection-toggle; // ~22px @ 12
min-height: @size-toc-subsection-toggle;
padding: 0;
// FIXME: Remove the following styles after cached HTML
cursor: pointer;
font-size: @size-toc-subsection-toggle-icon;
}
.vector-toc-link {

9
resources/skins.vector.zebra.styles/layouts/toc/unpinned.less
View file

@ -8,15 +8,6 @@
margin-right: 8px;
}
// TOC dropdown toggle styles
#vector-toc-collapsed-button,
body:not( .vector-below-page-title ) #vector-page-titlebar-toc-label {
@media ( max-width: @max-width-tablet ) {
// Override the default button styles so the ToC button in the page titlebar is slightly shorter on small viewports
padding: 7px 12px;
}
}
// TOC styles when unpinned
.mixin-toc-unpinned() {
display: block;

23
resources/skins.vector.zebra.styles/mixins.less
View file

@ -21,13 +21,18 @@
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
}
.mixin-vector-menu-heading-arrow() {
content: '';
background: url( ../common/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
.mixin-vector-arrowed-dropdown-toggle() {
display: inline-flex;
align-items: center;
&::after {
content: '';
background: url( ../common/images/arrow-down.svg ) 100% 50% no-repeat;
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
// https://phabricator.wikimedia.org/T319070#8284272
margin-left: -1px;
}
}
.mixin-vector-content-box() {
@ -57,6 +62,10 @@
color: @color-link;
}
.vector-icon {
margin-right: @spacing-35;
}
&.selected a,
&.selected a:visited {
color: @color-link-selected;

3
resources/skins.vector.zebra.styles/variables.less
View file

@ -127,9 +127,6 @@
@size-search-expand: 24px;
@margin-end-search: 12px;
// Language button
@height-button-lang: unit( 32 / @font-size-browser, em );
// Pre-content
@margin-top-pre-content: 8px;

15
skin.json
View file

@ -57,11 +57,10 @@
"skins.vector.js"
],
"styles": [
"mediawiki.ui.button",
"codex-search-styles",
"skins.vector.styles",
"skins.vector.user.styles",
"skins.vector.icons",
"mediawiki.ui.icon"
"skins.vector.icons"
],
"messages": [
"tooltip-p-logo",
@ -283,8 +282,8 @@
]
},
"skins.vector.icons.js": {
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before,.vector-icon.mw-ui-icon-wikimedia-{name}-{variant}",
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before,.vector-icon.mw-ui-icon-wikimedia-{name}",
"useDataURI": false,
"defaultColor": "#000",
"class": "ResourceLoaderOOUIIconPackModule",
@ -307,8 +306,8 @@
]
},
"skins.vector.icons": {
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before",
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before",
"selectorWithVariant": ".mw-ui-icon-wikimedia-{name}-{variant}:before,.vector-icon.mw-ui-icon-wikimedia-{name}-{variant}",
"selectorWithoutVariant": ".mw-ui-icon-wikimedia-{name}:before,.vector-icon.mw-ui-icon-wikimedia-{name}",
"useDataURI": false,
"defaultColor": "#000",
"class": "ResourceLoaderOOUIIconPackModule",
@ -319,6 +318,8 @@
}
},
"icons": [
"tray",
"bell",
"menu",
"heart",
"language",

4
skinStyles/ext.echo.styles.alert.less
View file

@ -17,10 +17,6 @@
max-width: 270px;
overflow: hidden;
text-overflow: ellipsis;
.mw-ui-icon.mw-ui-icon-before::before {
display: none;
}
}
@media ( max-width: @min-width-desktop-wide ) {

15
skinStyles/ext.echo.styles.badge.less
View file

@ -4,7 +4,9 @@
position: relative;
// When 99+ allow counter so spill outside icon
&.mw-ui-button {
// FIXME: Remove old button classes after caching
&.mw-ui-button,
&.cdx-button {
overflow: visible;
}
@ -12,8 +14,8 @@
position: absolute;
left: 55%;
top: 43%;
font-size: unit( 12 / @font-size-browser, em );
padding: 7px 0.3em;
font-size: unit( 12 / @font-size-browser, rem );
padding: 0 unit( 4 / @font-size-browser, rem );
border: 1px solid #fff;
border-radius: @border-radius-base;
background-color: #72777d;
@ -44,12 +46,7 @@
#pt-notifications-notice .mw-echo-notifications-badge,
#pt-notifications-alert .mw-echo-notifications-badge {
.mixin-notification-badge();
display: inline-flex;
margin: 0;
line-height: 0;
opacity: 1;
&:focus {
// Copied from mixins.buttons.less, match button focus styles
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus, @box-shadow-inset-medium @box-shadow-color-inverted;
}
}

2
skinStyles/ext.uls.pt.less
View file

@ -1,4 +1,6 @@
// Reset the background set in jquery.uls for Modern Vector.
.vector-user-links .uls-trigger {
background: none;
// Remove left padding after I6a991600f8826fbeb09c7afb0c4cea4ebfd5cdd5
padding-left: 11px;
}

20
tests/jest/__snapshots__/stickyHeader.test.js.snap
View file

@ -3,9 +3,9 @@
exports[`Sticky header renders 1`] = `
"<div id=\\"vector-sticky-header\\" class=\\"vector-sticky-header\\">
<div class=\\"vector-sticky-header-start\\">
<div class=\\"vector-sticky-header-icon-start mw-ui-icon-flush-left mw-ui-icon-flush-right\\" aria-hidden=\\"true\\">
<div class=\\"vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right\\" aria-hidden=\\"true\\">
<button class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element vector-sticky-header-search-toggle\\" data-event-name=\\"ui.vector-sticky-search-form.icon\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-search mw-ui-icon-wikimedia-search\\"></span>
<button class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-sticky-header-search-toggle\\" data-event-name=\\"ui.vector-sticky-search-form.icon\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search\\"></span>
<span>search</span>
@ -15,7 +15,7 @@ exports[`Sticky header renders 1`] = `
<nav role=\\"navigation\\" aria-label=\\"\\" class=\\"vector-toc-landmark\\">
<div id=\\"vector-sticky-header-toc\\" class=\\"vector-menu vector-dropdown vector-menu-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc\\">
<input type=\\"checkbox\\" id=\\"vector-sticky-header-toc-checkbox\\" role=\\"button\\" aria-haspopup=\\"true\\" data-event-name=\\"ui.dropdown-vector-sticky-header-toc\\" class=\\"vector-menu-checkbox\\" aria-label=\\"\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-menu-heading mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-listBullet\\" aria-hidden=\\"true\\" tabindex=\\"-1\\">
<label id=\\"vector-sticky-header-toc-label\\" for=\\"vector-sticky-header-toc-checkbox\\" class=\\"vector-menu-heading cdx-button cdx-button--weight-quiet cdx-button--icon-only\\" aria-hidden=\\"true\\" tabindex=\\"-1\\">
<span class=\\"vector-menu-heading-label\\"></span>
</label>
<div class=\\"vector-menu-content vector-dropdown-content\\">
@ -27,32 +27,32 @@ exports[`Sticky header renders 1`] = `
</div>
<div class=\\"vector-sticky-header-end\\" aria-hidden=\\"true\\">
<div class=\\"vector-sticky-header-icons\\">
<a href=\\"#\\" id=\\"ca-talk-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon\\" data-event-name=\\"talk-sticky-header\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-speechBubbles mw-ui-icon-wikimedia-speechBubbles\\"></span>
<a href=\\"#\\" id=\\"ca-talk-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon\\" data-event-name=\\"talk-sticky-header\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-speechBubbles mw-ui-icon-wikimedia-speechBubbles\\"></span>
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-history-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon\\" data-event-name=\\"history-sticky-header\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-history mw-ui-icon-wikimedia-history\\"></span>
<a href=\\"#\\" id=\\"ca-history-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon\\" data-event-name=\\"history-sticky-header\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-history mw-ui-icon-wikimedia-history\\"></span>
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-watchstar-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon mw-watchlink\\" data-event-name=\\"watch-sticky-header\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-star mw-ui-icon-wikimedia-star\\"></span>
<a href=\\"#\\" id=\\"ca-watchstar-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon mw-watchlink\\" data-event-name=\\"watch-sticky-header\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-star mw-ui-icon-wikimedia-star\\"></span>
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-ve-edit-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon\\" data-event-name=\\"ve-edit-sticky-header\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-edit mw-ui-icon-wikimedia-edit\\"></span>
<a href=\\"#\\" id=\\"ca-ve-edit-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon\\" data-event-name=\\"ve-edit-sticky-header\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-edit mw-ui-icon-wikimedia-edit\\"></span>
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-edit-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon\\" data-event-name=\\"wikitext-edit-sticky-header\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-wikiText mw-ui-icon-wikimedia-wikiText\\"></span>
<a href=\\"#\\" id=\\"ca-edit-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon\\" data-event-name=\\"wikitext-edit-sticky-header\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-wikiText mw-ui-icon-wikimedia-wikiText\\"></span>
<span></span>
</a>
<a href=\\"#\\" id=\\"ca-viewsource-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon\\" data-event-name=\\"editLock\\" tabindex=\\"-1\\"><span class=\\"mw-ui-icon mw-ui-icon-star mw-ui-icon-wikimedia-star\\"></span>
<a href=\\"#\\" id=\\"ca-viewsource-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon\\" data-event-name=\\"editLock\\" tabindex=\\"-1\\"><span class=\\"vector-icon mw-ui-icon-star mw-ui-icon-wikimedia-star\\"></span>
<span></span>
</a>
@ -60,7 +60,7 @@ exports[`Sticky header renders 1`] = `
</div>
<div class=\\"vector-sticky-header-buttons\\">
<button id=\\"p-lang-btn-sticky-header\\" class=\\"mw-ui-button mw-ui-quiet mw-interlanguage-selector\\" data-event-name=\\"ui.dropdown-p-lang-btn-sticky-header\\" tabindex=\\"-1\\"><span>0 languages</span>
<button id=\\"p-lang-btn-sticky-header\\" class=\\"cdx-button cdx-button--weight-quiet mw-interlanguage-selector\\" data-event-name=\\"ui.dropdown-p-lang-btn-sticky-header\\" tabindex=\\"-1\\"><span>0 languages</span>
</button>
</div>

20
tests/jest/__snapshots__/tableOfContents.test.js.snap
View file

@ -26,8 +26,9 @@ exports[`Table of contents reloadTableOfContents re-renders toc when wikipage.ta
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle\\" aria-expanded=\\"true\\">
Toggle bar subsection
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"true\\">
<span class=\\"vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand\\"></span>
<span>Toggle bar subsection</span>
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
@ -93,8 +94,9 @@ exports[`Table of contents reloadTableOfContents re-renders toc when wikipage.ta
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle\\" aria-expanded=\\"true\\">
Toggle bar subsection
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"true\\">
<span class=\\"vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand\\"></span>
<span>Toggle bar subsection</span>
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
@ -164,8 +166,9 @@ exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\`
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle\\" aria-expanded=\\"true\\">
Toggle bar subsection
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"true\\">
<span class=\\"vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand\\"></span>
<span>Toggle bar subsection</span>
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
@ -225,8 +228,9 @@ exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\`
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small vector-toc-toggle\\" aria-expanded=\\"false\\">
Toggle bar subsection
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"false\\">
<span class=\\"vector-icon vector-icon--x-small mw-ui-icon-wikimedia-expand\\"></span>
<span>Toggle bar subsection</span>
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">

22
tests/jest/__snapshots__/userLinks.test.js.snap
View file

@ -9,11 +9,11 @@ exports[`UserLinks renders 1`] = `
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">
<li id=\\"ca-uls\\" class=\\"user-links-collapsible-item mw-list-item active\\"><a href=\\"#\\" class=\\"uls-trigger mw-ui-button mw-ui-quiet\\"><span class=\\"mw-ui-icon mw-ui-icon-wikimedia-language\\"></span> <span>English</span></a></li>
<li id=\\"ca-uls\\" class=\\"user-links-collapsible-item mw-list-item active\\"><a href=\\"#\\" class=\\"uls-trigger mw-ui-button mw-ui-quiet\\"><span class=\\"vector-icon mw-ui-icon-wikimedia-language\\"></span> <span>English</span></a></li>
<li id=\\"pt-userpage-2\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/User:Admin\\" class=\\"mw-ui-button mw-ui-quiet\\" title=\\"Your user page [⌃⌥.]\\" accesskey=\\".\\"><span>Admin</span></a></li>
<li id=\\"pt-notifications-alert\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Notifications\\" class=\\"mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read\\" data-counter-num=\\"0\\" data-counter-text=\\"0\\" title=\\"Your alerts\\"><span>Alerts (0)</span></a></li>
<li id=\\"pt-notifications-notice\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Notifications\\" class=\\"mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray mw-echo-notifications-badge-all-read\\" data-counter-num=\\"0\\" data-counter-text=\\"0\\" title=\\"Your notices\\"><span>Notices (0)</span></a></li>
<li id=\\"pt-watchlist-2\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/Special:Watchlist\\" class=\\"mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\" title=\\"A list of pages you are monitoring for changes [⌃⌥l]\\" accesskey=\\"l\\"><span>Watchlist</span></a></li>
<li id=\\"pt-watchlist-2\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/Special:Watchlist\\" class=\\"mw-ui-button mw-ui-quiet vector-icon cdx-button--icon-only mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\" title=\\"A list of pages you are monitoring for changes [⌃⌥l]\\" accesskey=\\"l\\"><span>Watchlist</span></a></li>
</ul>
</div>
@ -29,14 +29,14 @@ exports[`UserLinks renders 1`] = `
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">
<li id=\\"pt-userpage\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/User:Admin\\" title=\\"Your user page [.]\\" accesskey=\\".\\"><span class=\\"mw-ui-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar\\"></span> <span>Admin</span></a></li>
<li id=\\"pt-mytalk\\" class=\\"mw-list-item\\"><a href=\\"/wiki/User_talk:Admin\\" title=\\"Your talk page [n]\\" accesskey=\\"n\\"><span class=\\"mw-ui-icon mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk\\"></span> <span>Talk</span></a></li>
<li id=\\"pt-sandbox\\" class=\\"new mw-list-item\\"><a href=\\"/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1\\" title=\\"Your sandbox (page does not exist)\\"><span class=\\"mw-ui-icon mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox\\"></span> <span>Sandbox</span></a></li>
<li id=\\"pt-preferences\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences\\" title=\\"Your preferences\\"><span class=\\"mw-ui-icon mw-ui-icon-settings mw-ui-icon-wikimedia-settings\\"></span> <span>Preferences</span></a></li>
<li id=\\"pt-betafeatures\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences#mw-prefsection-betafeatures\\" title=\\"Beta features\\"><span class=\\"mw-ui-icon mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask\\"></span> <span>Beta</span></a></li>
<li id=\\"pt-watchlist\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/Special:Watchlist\\" title=\\"A list of pages you are monitoring for changes [l]\\" accesskey=\\"l\\"><span class=\\"mw-ui-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\"></span> <span>Watchlist</span></a></li>
<li id=\\"pt-uploads\\" class=\\"mw-list-item\\"><a href=\\"/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1\\" title=\\"List of files you have uploaded\\"><span class=\\"mw-ui-icon mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery\\"></span> <span>Uploads</span></a></li>
<li id=\\"pt-mycontris\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Contributions/Admin\\" title=\\"A list of your contributions [y]\\" accesskey=\\"y\\"><span class=\\"mw-ui-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions\\"></span> <span>Contributions</span></a></li>
<li id=\\"pt-userpage\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/User:Admin\\" title=\\"Your user page [.]\\" accesskey=\\".\\"><span class=\\"vector-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar\\"></span> <span>Admin</span></a></li>
<li id=\\"pt-mytalk\\" class=\\"mw-list-item\\"><a href=\\"/wiki/User_talk:Admin\\" title=\\"Your talk page [n]\\" accesskey=\\"n\\"><span class=\\"vector-icon mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk\\"></span> <span>Talk</span></a></li>
<li id=\\"pt-sandbox\\" class=\\"new mw-list-item\\"><a href=\\"/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1\\" title=\\"Your sandbox (page does not exist)\\"><span class=\\"vector-icon mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox\\"></span> <span>Sandbox</span></a></li>
<li id=\\"pt-preferences\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences\\" title=\\"Your preferences\\"><span class=\\"vector-icon mw-ui-icon-settings mw-ui-icon-wikimedia-settings\\"></span> <span>Preferences</span></a></li>
<li id=\\"pt-betafeatures\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Preferences#mw-prefsection-betafeatures\\" title=\\"Beta features\\"><span class=\\"vector-icon mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask\\"></span> <span>Beta</span></a></li>
<li id=\\"pt-watchlist\\" class=\\"user-links-collapsible-item mw-list-item\\"><a href=\\"/wiki/Special:Watchlist\\" title=\\"A list of pages you are monitoring for changes [l]\\" accesskey=\\"l\\"><span class=\\"vector-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist\\"></span> <span>Watchlist</span></a></li>
<li id=\\"pt-uploads\\" class=\\"mw-list-item\\"><a href=\\"/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1\\" title=\\"List of files you have uploaded\\"><span class=\\"vector-icon mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery\\"></span> <span>Uploads</span></a></li>
<li id=\\"pt-mycontris\\" class=\\"mw-list-item\\"><a href=\\"/wiki/Special:Contributions/Admin\\" title=\\"A list of your contributions [y]\\" accesskey=\\"y\\"><span class=\\"vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions\\"></span> <span>Contributions</span></a></li>
<li id=\\"pt-custom\\" class=\\"mw-list-item mw-list-item-js\\">Gadget added item</li>
</ul>
@ -46,7 +46,7 @@ exports[`UserLinks renders 1`] = `
<div class=\\"vector-menu-content\\">
<ul class=\\"vector-menu-content-list\\">
<li id=\\"ca-logout\\" class=\\"mw-list-item\\"><a data-mw=\\"interface\\" href=\\"/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page\\" title=\\"Log out\\"><span class=\\"mw-ui-icon mw-ui-icon-logOut mw-ui-icon-wikimedia-logOut\\"></span> <span>Log out</span></a></li>
<li id=\\"ca-logout\\" class=\\"mw-list-item\\"><a data-mw=\\"interface\\" href=\\"/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page\\" title=\\"Log out\\"><span class=\\"vector-icon mw-ui-icon-logOut mw-ui-icon-wikimedia-logOut\\"></span> <span>Log out</span></a></li>
</ul>
</div>

12
tests/jest/skins.vector.js/dropdownMenus.test.js
View file

@ -10,7 +10,7 @@ describe( 'addPortletLinkHandler', () => {
<ul class="vector-menu-content-list">
<li id="pt-userpage" class="mw-list-item">
<a href="#bar">
<span class="mw-ui-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span>
<span class="vector-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span>
<span>Admin</span>
</a>
</li>
@ -23,7 +23,7 @@ describe( 'addPortletLinkHandler', () => {
<ul class="vector-menu-content-list">
<li id="pt-userpage" class="mw-list-item">
<a href="#bar">
<span class="mw-ui-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span>
<span class="vector-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span>
<span>Admin</span>
</a>
</li>
@ -131,7 +131,7 @@ describe( 'addPortletLinkHandler', () => {
addPortletLinkHandler( portletLinkItem, { id: 'foo-id' } );
// Asserting that the icon classes were added.
expect( portletLinkItem.querySelectorAll( 'span.mw-ui-icon.mw-ui-icon-vector-gadget-foo-id' ) ).toHaveLength( 1 );
expect( portletLinkItem.querySelectorAll( 'span.vector-icon.mw-ui-icon-vector-gadget-foo-id' ) ).toHaveLength( 1 );
} );
test( 'addPortletLinkHandler does not add icons to p-views menu', () => {
@ -196,8 +196,8 @@ describe( 'addPortletLinkHandler', () => {
// Asserting that the icon classes were added where necessary
// and that only one icon class was added per item.
expect( portletLinkItem1.querySelectorAll( 'span.mw-ui-icon.mw-ui-icon-vector-gadget-foo' ) ).toHaveLength( 0 );
expect( portletLinkItem2.querySelectorAll( 'span.mw-ui-icon.mw-ui-icon-vector-gadget-bar' ) ).toHaveLength( 1 );
expect( portletLinkItem3.querySelectorAll( 'span.mw-ui-icon.mw-ui-icon-vector-gadget-baz' ) ).toHaveLength( 1 );
expect( portletLinkItem1.querySelectorAll( 'span.vector-icon.mw-ui-icon-vector-gadget-foo' ) ).toHaveLength( 0 );
expect( portletLinkItem2.querySelectorAll( 'span.vector-icon.mw-ui-icon-vector-gadget-bar' ) ).toHaveLength( 1 );
expect( portletLinkItem3.querySelectorAll( 'span.vector-icon.mw-ui-icon-vector-gadget-baz' ) ).toHaveLength( 1 );
} );
} );

18
tests/jest/stickyHeader.test.js
View file

@ -10,7 +10,7 @@ const defaultButtonsTemplateData = [ {
href: '#',
id: 'ca-talk-sticky-header',
icon: 'speechBubbles',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon',
'array-attributes': [ {
key: 'data-event-name',
value: 'talk-sticky-header'
@ -22,7 +22,7 @@ const defaultButtonsTemplateData = [ {
href: '#',
id: 'ca-history-sticky-header',
icon: 'history',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon',
'array-attributes': [ {
key: 'data-event-name',
value: 'history-sticky-header'
@ -34,7 +34,7 @@ const defaultButtonsTemplateData = [ {
href: '#',
id: 'ca-watchstar-sticky-header',
icon: 'star',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon mw-watchlink',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon mw-watchlink',
'array-attributes': [ {
key: 'data-event-name',
value: 'watch-sticky-header'
@ -48,7 +48,7 @@ const editButtonsTemplateData = [ {
href: '#',
id: 'ca-ve-edit-sticky-header',
icon: 'edit',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon',
'array-attributes': [ {
key: 'data-event-name',
value: 've-edit-sticky-header'
@ -60,7 +60,7 @@ const editButtonsTemplateData = [ {
href: '#',
id: 'ca-edit-sticky-header',
icon: 'wikiText',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon',
'array-attributes': [ {
key: 'data-event-name',
value: 'wikitext-edit-sticky-header'
@ -72,7 +72,7 @@ const editButtonsTemplateData = [ {
href: '#',
id: 'ca-viewsource-sticky-header',
icon: 'star',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon-element sticky-header-icon',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only sticky-header-icon',
'array-attributes': [ {
key: 'data-event-name',
value: 'editLock'
@ -92,12 +92,12 @@ const templateData = {
'html-items': '',
'html-vector-menu-checkbox-attributes': 'tabindex="-1"',
'html-vector-menu-heading-attributes': 'tabindex="-1"',
'heading-class': 'mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-listBullet'
'heading-class': 'cdx-button cdx-button--weight-quiet cdx-button--icon-only'
},
'array-buttons': [ {
label: '0 languages',
id: 'p-lang-btn-sticky-header',
class: 'mw-ui-button mw-ui-quiet mw-interlanguage-selector',
class: 'cdx-button cdx-button--weight-quiet mw-interlanguage-selector',
'array-attributes': [ {
key: 'data-event-name',
value: 'ui.dropdown-p-lang-btn-sticky-header'
@ -109,7 +109,7 @@ const templateData = {
'data-button-start': {
label: 'search',
icon: 'search',
class: 'mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element vector-sticky-header-search-toggle',
class: 'cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-sticky-header-search-toggle',
'array-attributes': [ {
key: 'data-event-name',
value: 'ui.vector-sticky-search-form.icon'

22
tests/jest/userLinksData.js
View file

@ -21,11 +21,11 @@ const templateData = {
class: 'mw-portlet mw-portlet-vector-user-menu-overflow vector-user-menu-overflow',
label: 'Toggle sidebar',
'html-items': `
<li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span> <span>English</span></a></li>
<li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language"></span> <span>English</span></a></li>
<li id="pt-userpage-2" class="user-links-collapsible-item mw-list-item"><a href="/wiki/User:Admin" class="mw-ui-button mw-ui-quiet" title="Your user page [⌃⌥.]" accesskey="."><span>Admin</span></a></li>
<li id="pt-notifications-alert" class="mw-list-item"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-bell mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your alerts"><span>Alerts (0)</span></a></li>
<li id="pt-notifications-notice" class="mw-list-item"><a href="/wiki/Special:Notifications" class="mw-echo-notifications-badge mw-echo-notification-badge-nojs oo-ui-icon-tray mw-echo-notifications-badge-all-read" data-counter-num="0" data-counter-text="0" title="Your notices"><span>Notices (0)</span></a></li>
<li id="pt-watchlist-2" class="user-links-collapsible-item mw-list-item"><a href="/wiki/Special:Watchlist" class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l"><span>Watchlist</span></a></li>
<li id="pt-watchlist-2" class="user-links-collapsible-item mw-list-item"><a href="/wiki/Special:Watchlist" class="mw-ui-button mw-ui-quiet vector-icon cdx-button--icon-only mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist" title="A list of pages you are monitoring for changes [⌃⌥l]" accesskey="l"><span>Watchlist</span></a></li>
`
},
'data-user-links-dropdown': {
@ -37,21 +37,21 @@ const templateData = {
class: 'mw-portlet mw-portlet-personal',
id: 'p-personal',
'html-items': `
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span class="mw-ui-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span> <span>Admin</span></a></li>
<li id="pt-mytalk" class="mw-list-item"><a href="/wiki/User_talk:Admin" title="Your talk page [n]" accesskey="n"><span class="mw-ui-icon mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk"></span> <span>Talk</span></a></li>
<li id="pt-sandbox" class="new mw-list-item"><a href="/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1" title="Your sandbox (page does not exist)"><span class="mw-ui-icon mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox"></span> <span>Sandbox</span></a></li>
<li id="pt-preferences" class="mw-list-item"><a href="/wiki/Special:Preferences" title="Your preferences"><span class="mw-ui-icon mw-ui-icon-settings mw-ui-icon-wikimedia-settings"></span> <span>Preferences</span></a></li>
<li id="pt-betafeatures" class="mw-list-item"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features"><span class="mw-ui-icon mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask"></span> <span>Beta</span></a></li>
<li id="pt-watchlist" class="user-links-collapsible-item mw-list-item"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [l]" accesskey="l"><span class="mw-ui-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist"></span> <span>Watchlist</span></a></li>
<li id="pt-uploads" class="mw-list-item"><a href="/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1" title="List of files you have uploaded"><span class="mw-ui-icon mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery"></span> <span>Uploads</span></a></li>
<li id="pt-mycontris" class="mw-list-item"><a href="/wiki/Special:Contributions/Admin" title="A list of your contributions [y]" accesskey="y"><span class="mw-ui-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions"></span> <span>Contributions</span></a></li>
<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span class="vector-icon mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar"></span> <span>Admin</span></a></li>
<li id="pt-mytalk" class="mw-list-item"><a href="/wiki/User_talk:Admin" title="Your talk page [n]" accesskey="n"><span class="vector-icon mw-ui-icon-userTalk mw-ui-icon-wikimedia-userTalk"></span> <span>Talk</span></a></li>
<li id="pt-sandbox" class="new mw-list-item"><a href="/w/index.php?title=User:Admin/sandbox&amp;action=edit&amp;redlink=1" title="Your sandbox (page does not exist)"><span class="vector-icon mw-ui-icon-sandbox mw-ui-icon-wikimedia-sandbox"></span> <span>Sandbox</span></a></li>
<li id="pt-preferences" class="mw-list-item"><a href="/wiki/Special:Preferences" title="Your preferences"><span class="vector-icon mw-ui-icon-settings mw-ui-icon-wikimedia-settings"></span> <span>Preferences</span></a></li>
<li id="pt-betafeatures" class="mw-list-item"><a href="/wiki/Special:Preferences#mw-prefsection-betafeatures" title="Beta features"><span class="vector-icon mw-ui-icon-labFlask mw-ui-icon-wikimedia-labFlask"></span> <span>Beta</span></a></li>
<li id="pt-watchlist" class="user-links-collapsible-item mw-list-item"><a href="/wiki/Special:Watchlist" title="A list of pages you are monitoring for changes [l]" accesskey="l"><span class="vector-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist"></span> <span>Watchlist</span></a></li>
<li id="pt-uploads" class="mw-list-item"><a href="/w/index.php?title=Special:ListFiles/Admin&amp;ilshowall=1" title="List of files you have uploaded"><span class="vector-icon mw-ui-icon-imageGallery mw-ui-icon-wikimedia-imageGallery"></span> <span>Uploads</span></a></li>
<li id="pt-mycontris" class="mw-list-item"><a href="/wiki/Special:Contributions/Admin" title="A list of your contributions [y]" accesskey="y"><span class="vector-icon mw-ui-icon-userContributions mw-ui-icon-wikimedia-userContributions"></span> <span>Contributions</span></a></li>
<li id="pt-custom" class="mw-list-item mw-list-item-js">Gadget added item</li>
`
}, {
id: 'p-user-menu-logout',
class: 'mw-portlet mw-portlet-user-menu-logout',
'html-items': `
<li id="ca-logout" class="mw-list-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page" title="Log out"><span class="mw-ui-icon mw-ui-icon-logOut mw-ui-icon-wikimedia-logOut"></span> <span>Log out</span></a></li>
<li id="ca-logout" class="mw-list-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogout&amp;returnto=Main+Page" title="Log out"><span class="vector-icon mw-ui-icon-logOut mw-ui-icon-wikimedia-logOut"></span> <span>Log out</span></a></li>
`
} ]
};

44
tests/phpunit/integration/VectorHooksTest.php
View file

@ -536,7 +536,7 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
'User page link in user links dropdown requires collapsible class'
);
$this->assertEquals(
'<span class="mw-ui-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>',
'<span class="vector-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>',
$contentRegistered['user-menu']['userpage']['link-html'],
'User page link in user links dropdown has link-html'
);
@ -544,7 +544,7 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
'Watchlist link in user links dropdown requires collapsible class'
);
$this->assertEquals(
'<span class="mw-ui-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist"></span>',
'<span class="vector-icon mw-ui-icon-watchlist mw-ui-icon-wikimedia-watchlist"></span>',
$contentRegistered['user-menu']['watchlist']['link-html'],
'Watchlist link in user links dropdown has link-html'
);
@ -597,7 +597,7 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
$content['vector-user-menu-overflow']['userpage']['class'],
'User page link in user links overflow requires collapsible class'
);
$this->assertNotContains( 'mw-ui-icon',
$this->assertNotContains( 'vector-icon',
$content['vector-user-menu-overflow']['userpage']['class'],
'User page link in user links overflow does not have icon classes'
);
@ -605,15 +605,15 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
$content['vector-user-menu-overflow']['watchlist']['class'],
'Watchlist link in user links overflow requires collapsible class'
);
$this->assertContains( 'mw-ui-button',
$this->assertContains( 'cdx-button',
$content['vector-user-menu-overflow']['watchlist']['link-class'],
'Watchlist link in user links overflow requires button classes'
);
$this->assertContains( 'mw-ui-quiet',
$this->assertContains( 'cdx-button--weight-quiet',
$content['vector-user-menu-overflow']['watchlist']['link-class'],
'Watchlist link in user links overflow requires quiet button classes'
);
$this->assertContains( 'mw-ui-icon-element',
$this->assertContains( 'cdx-button--icon-only',
$content['vector-user-menu-overflow']['watchlist']['link-class'],
'Watchlist link in user links overflow hides text'
);
@ -699,7 +699,7 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
[
'class' => [],
'link-html' =>
'<span class="mw-ui-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>'
'<span class="vector-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>'
],
],
// Adds collapsible class
@ -714,17 +714,29 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
[ 'class' => [], 'button' => true ],
'link-class',
'link-html',
[ 'class' => [], 'link-class' => [ 'mw-ui-button', 'mw-ui-quiet' ] ],
[ 'class' => [], 'link-class' => [
'cdx-button',
'cdx-button--fake-button',
'cdx-button--fake-button--enabled',
'cdx-button--weight-quiet'
] ],
],
// Adds text hidden classes
[
[ 'class' => [], 'text-hidden' => true, 'icon' => 'userpage' ],
[ 'class' => [], 'button' => true, 'text-hidden' => true, 'icon' => 'userpage' ],
'link-class',
'link-html',
[
'class' => [],
'link-class' => [ 'mw-ui-icon-element' ],
'link-html' => '<span class="mw-ui-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>'
'link-class' => [
'cdx-button',
'cdx-button--fake-button',
'cdx-button--fake-button--enabled',
'cdx-button--weight-quiet',
'cdx-button--icon-only'
],
'link-html' =>
'<span class="vector-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>'
],
],
// Adds button and icon classes
@ -732,9 +744,13 @@ class VectorHooksTest extends MediaWikiIntegrationTestCase {
[ 'class' => [], 'button' => true, 'icon' => 'userpage' ],
'class',
'link-html',
[
'class' => [ 'mw-ui-button', 'mw-ui-quiet' ],
'link-html' => '<span class="mw-ui-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>'
[ 'class' => [
'cdx-button',
'cdx-button--fake-button',
'cdx-button--fake-button--enabled',
'cdx-button--weight-quiet'
], 'link-html' =>
'<span class="vector-icon mw-ui-icon-userpage mw-ui-icon-wikimedia-userpage"></span>'
],
]
];