Replacing the legacy Vector breakpoint tokens with the Codex
standard ones. All names have been unified, only some legacy values
remain for backwards compatibility.
Also
- replacing a wrongly applied min-width with the correct max-width
token,
- replacing a width with an equal value min-width one and
- removing the now equal value mobile min-width one.
Note that we can't do some reference magic here alike
`@max-width-breakpoint-mobile: @min-width-breakpoint-tablet - 1px;` as
this would take the Codex value from skin variables and not the legacy
value.
Also note, that we could move all those Vector legacy definitions into
Vector's 'mediawiki.skin.variables.less' file(s), but that would mean
that extensions don't rely on the Codex default values, but on Vector's
and we want latter to move to the standard, also in foresight of
further standardization to build for all feature teams like a
shared Grid.
Bug: T331403
Change-Id: Ifb968b1977001edb1a79e20df387c61f27043542
Replaces font-sizes that are between 12-14
px with ones that equal 14px. This involved
converting some values to rems as well as changing
their size.
@font-size-tabs (a computed 13px value) is removed
in favour of unit( @font-size-small, rem).
This removal requires the following changes:
* Removing max-height & box-sizing from tabs, since
they used @font-size-tabs for size calculations
* modifying .mixin-vector-arrowed-dropdown-toggle()
to use `unit( 12 / @font-size-browser, rem )` instead
of `unit( 16 / @font-size-tabs / @font-size-browser, em )`
* Changes to the position of `.vector-toc-toggle` since
it's width/height depended on
.mixin-vector-arrowed-dropdown-toggle()
Opportunistic refactor:
- `.mixin-vector-legacy-menu-heading-arrow()`
is removed from Zebra
Expected visual changes:
font-sizes below refer to computed values, actual values
are now set in rems.
* Text in tabs is 14px not 13px
* #siteSub is 14px not 12.8px
* #contentSub is 14px not 11.76px
* #contentSub line height is default, not 1.2
* dropdown [hide] labels are 14px instead of 13px
*************************
*****VISUAL CHANGE*****
*************************
: 91 changes in Pixel due to content being pushed
down due to bigger font-size in toolbar.
Bug: T346062
Bug: T261334
Change-Id: I6cfc800bb8dfed206670e5365bdc55e5d7357a4a
- Status should persist across page views for anonymous users
- Added 'toc-pinned' as a persistable feature in features.js and FeatureManager.php.
- Handling for cached HTML supporting both new and old class names for pinned/unpinned TOC
Based-On: I0fbe0ab458c5bd55d659d3c35a8fbaa6cd6ec0e1
Bug: T316060
Change-Id: Iad8523037ed364f09962b2d6ca0a3d50d7bd2266
* Update classes to use clientpref-1 and clientpref-0 suffix for limited width
I've limited this to the only client preference for now to reduce
risk.
* For cached HTML retain existing CSS rules, and continue saving
a cookie
* Migrate cookie if found for newly generated pages. This will be
to ensure the old cookie and new cookie are in sync (this should be
a one time operation)
Depends-On: I1e635f843ac9b2f248b1f7618134598e80291b38
Bug: T341641
Change-Id: I120f8f7114b33d2cfbd1c3c57ebf41f8b2d7fec4
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
Applying central Codex design tokens in new architecture.
This should already show the working principle of the new architecture.
Replacing `@z-index-menu` by `z-index-dropdown`.
Note this is also removing obsolete `@z-index-sidebar-button`.
Bug: T285592
Change-Id: I9ab1137241c9e1e7baffff9e07400bc2fc07d943
Removes the permanent scrollbars from Vector 2022
as well at the 100% height on `.mw-page-container`.
The permanent scrollbars ( overflow-y:scroll) are
an artifact of legacy Vector and no longer serve
a (known) purpose.
The 100% height on `.mw-page-container` was originally
added to fix T257518, however that fix is no longer
necessary with the use of CSS Grid for layout.
Bug: T335883
Change-Id: I57bb0274a9d51269bb58ae7904c0517742716ec8
Moves the CSS rule that hides the #siteSub element by
default into /resources/common/typography.less in
order to prevent it from being feature flagged
(and thereby overriding the specificity of on-wiki edits)
during the Zebra update.
Bug: T335625
Change-Id: If41fadc6a369ab371f6c1e75e9cf3022a01574a0
Makes the columns that contain the ToC and Page Tools
menu equal width.
Moves these width declarations into the grid.less file
and converts them, as well as a few associated width
variables, to rems.
Widens the content column to maintain the same
line-length as pre-zebra, due to the extra side-padding
on the content container.
Scopes the non-zebra grid.less less file to the
zebra-disabled flag.
Bug: T335155
Change-Id: Iab9c5a13c90089c1775e6184eb10b7b4fd31a846
Removing 'mediawiki.ui/variables.less' `@import`, which is now
fully replaced by skin-aware 'mediawiki.skin.variables.less'
standard.
Bumping required MediaWiki core version to >= v1.41.0.
Also
- replacing deprecated keys with new Codex token equivalent keys
Bug: T319381
Bug: T332541
Change-Id: I87bd258a24d8ca8b789f8355fe6495eca4cebb85
This change scopes the styles related to the Zebra
update by wrapping the imports in a top-level feature
flag selector,
i.e
.vector-feature-zebra-design-enabled {
@import "./screen.less"
}
To account for this extra selector, ampersands are
added wherever the html element is targeted in the
affected files. This applies to both zebra enabled
and disabled files.
getDefaultModules() is used in SkinVector22.php to
conditionally load the new skins.vector.zebra.styles
module when the feature is enabled.
Bug: T332600
Change-Id: I5e673df383ff31f296010f982e4188c82f095590
This refactor seeks to make it easier to separate
feature flagged styles by wrapping the imports in
a top-level feature-flag selector, e.g:
.vector-feature-zebra-design-disabled {
@import './layouts/preZebra.less';
}
This change does the following:
- Moves all file @imports to skin.less
- Removes unnecessary @import from MainMenu.less
- Moves .mixin-page-container() to mixins.less
- Moves @min-width-supported variable to variables.less
- Scopes existing Zebra styles at the skin.less file @import level
- Removes selectors ending with ampersands
The last changes makes it easer to reason about changes
specifically when wrapping entire file imports in a selector
since the ampersand ends up inheriting its value
from the skin.less file.
No visual differences are expected with this change.
Bug: T332600
Change-Id: Ife05e28ff38f9c5077e2d9eac653df656566e443
Removes checkbox.js and related styles as well
as rules for #mw-sidebar-checkbox which was removed
in a previous patch.
Bug: T332090
Change-Id: I168c1161a1d3365e79c2ff6b1c2ab5455f7c4c00
This removes CSS selectors associated with the Page tools
feature flag, i.e. `vector-feature-page-tools-disabled` as
well as `vector-feature-page-tools-enabled` by removing
the 'disabled' styles and integrating the 'enabled' styles
into the default page tools code.
Bug: T332090
Change-Id: I382e12ca7ce741a3071582ffa84da03c2ba9e343
- Move the header and skip link out of .mw-page-container-inner and the grid
- Wrap the header and sticky header with a .vector-header-container element, allowing us to easily update header styles in the future
- Update sticky header to use a <div> to fix a11y error. Update searchToggle.js to use .vector-header-container rather than <header>
Bug: T332449
Bug: T330438
Change-Id: I038fc17cbb88a29dbe8d7841b824761a91d38405
This patch removes the old style rules for .vector-toc-pinned after one
week of cache.
Also removes 'data-name' which was no longer used
Bug: T325032
Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
There's a lot of .mw-body-content out there that shouldn't have this
margin applied. Switch it to #mw-content-text so that it's only applied
to the actual article content.
Bug: T331458
Change-Id: Ia040f85ed484db21129c3673808bc2ad71962ec3
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.
This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.
This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.
Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
Follow up to I3484a790ce8ebadf21054ac1d222d5632b2dc5a4
__Template__
The template is not particularly useful - it is only ever
used once in this context and features a static ID which means
it can never be reused. It is also tied to the #vector-toc-collapsed-checkbox
element. In current form it doesn't make sense to have this template.
Maybe in future, I could see an argument for a PinnableTableOfContents component
that wrapped the checkbox and nav element, and generalized the IDs but
currently there's no pressing need or value for that.
__Layouts__
The existing Pinned and Unpinned stylesheets are concerned with how the table
of contents is layed out holistically with regards to other components and
features enabled on the page. I think these should therefore be organized as such.
The way I reason with this, is these styles would be irrelevant in a component
library if the component was rendered in isolation.
Bug: T328719
Change-Id: I9ff0e0eeb35f215a8cae5950d08dc1277b662a71
- We had to add nav element to wrap TOC in all places
- Make sure proper nav is only displayed so landmark do not get confused
- Remove Eslint block on rules compat/compat for no support IE 11, this was blocking commit
- Run lint:fix:js and lint:fix:styles
- Fix maxSize in bundlesize.config.json
Bug: T324505
Change-Id: I36d26240b87de33318ff1edf97a410872a438103
To improve user experience when using gadgets and extensions that
cause layout shifts after page load, we want the anchor node selection
algorithm to only pick nodes in the content column or spanning full
width of the page.
Bug: T330108
Change-Id: Id996f766a535a487fb6bafe6a06a98d1a60ac8e3
Per T318169#8601576, the space between the top of the TOC and Page tools to the
top of the viewport or bottom of the sticky header should be 30px.
* Revises the page tools columnEnd grid to begin at the top of the titlebar to
enable 30px of top padding on the page tools
* Consolidates some styles in TableOfContentsPinned.less
VISUAL CHANGE: table of contents moves down page.
Bug: T318169
Bug: T319315
Change-Id: If8d8f87942d6265461b1a1a8ccf1c447d6e8b0d6
