Commit graph

24 commits

Author SHA1 Message Date
bwang 6a57506ae8 Separate vector-menu classes from Dropdowns
Bug: T319358
Change-Id: Idf05c1664c026f58487ba34af5ede8a11e695baf
2023-06-27 10:14:29 -05:00
Jon Robson 1e6b647971 Add new classes for dropdown component
Bug: T319358
Change-Id: Iab55dc190aa2ebc48eb9c8b34cf10baae8a89914
2023-06-26 15:31:01 -07:00
Jon Robson 68239ae344 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 <bwang@wikimedia.org>
Bug: T336526
Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-06-12 16:26:28 -07:00
bwang dd2284cf16 Update instances of Button.mustache to use to use VectorComponentButton
Bug: T334881
Change-Id: Iec3fc67c498d230ae7c0dc0ba4316006ccd9626a
2023-05-02 18:00:41 +00:00
bwang 8d9b148cf7 Setup header and sticky header to be able to be full width
- 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
2023-03-30 16:37:15 -05:00
Jan Drewniak 40bbb8c3a9 remove Page Tools config & HTML
Removes the config option for Page Tool menu,
its associated logic, along with the associated HTML from
the mustache templates.

Hardcodes the `vector-feature-page-tools-enabled` class
into the HTML element to prevent breakage.

Bug: T332090
Change-Id: I6466d80c6970bcc8e28d897b6bdff911a90e3655
2023-03-30 11:32:36 -04:00
Ed Sanders d290b98f56 Fix inconsistencies in sticky header font-size and spacing
* Ensure 8px spacing between all icons and buttons
* Move buttons to separate container, so they aren't
  grouped with -icons.
* Reducing horizontal padding of quiet labelled buttons
  to 5px to match spec.

Bug: T326571
Change-Id: I71c3aee82152f048c347f80747972d526039a8f0
2023-03-13 23:29:35 +00:00
Moh'd Khier Abualruz efe33d5d76 Ensure ToC is always accessible via landmark region (<nav>)
- 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
2023-02-21 22:19:52 +01:00
bwang 159d298aaa Reduce verbosity of menu dropdown with aria-hidden
Bug: T325026
Change-Id: I9cd919b083dcbd0ca417cde3488968be9e2c503e
2023-02-16 15:21:53 -06:00
bwang 9e4bdd00bf Remove custom handling of user links menu items and handle case when anon editor links are disabled
Rather than try to build individually build login, logout, and create account menu items, we handle them the same as all other user links menu items in Hooks.php. While Hooks isnt ideal, there currently isnt a good path for moving that code to SkinComponents until core provides menu data. In the meantime, this patch reduces code complexity and prevents bugs like T324638.
This approach also allows us to move user links logic from SkinVector22 to VectorComponentUserLinks.php, and ensures the user links dropdown contains multiple menus, which allows us to reuse styles from page tools dropdowns.

Expected 11 visual changes:
* minor visual change where the user links dropdown has an
additional 4px vertical padding.
This padding was originally added to the page tools dropdowns
per Alex's request, but Alex also said that dropdowns should share
the same spacing. This change makes the styles all consistent
* Order of talk and contribution links have been swapped

Bug: T289212
Bug: T319356
Bug: T328954
Change-Id: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
2023-02-09 13:37:17 -06:00
bwang 787b065f99 [Clean up] Remove unnecessary container and CSS in sticky header
Change-Id: I7a1f75e8997ea6c87955f72c971f6d1d08e6ab22
2023-01-13 20:11:21 +00:00
Jon Robson 0c0ce631ee Components: Model table of contents in title bar.
Bug: T320927
Change-Id: Icd871e1bdf4ab0c7aa5b906b913416f4b1747750
2023-01-11 15:42:23 -08:00
bwang a348db9969 Add generic classes to pinnable container
Bug: T324877
Change-Id: Iab94f9f600f8e6d032ad70d6b8e502686977441c
2022-12-20 17:22:11 -06:00
bwang 46f17487fd Update main menu templates and classes to be consistent with other pinnable elements
- Rename data-portlets-main-menu to data-main-menu
- Rename MainMenuContents.mustache to MainMenu
- Replace usage of .vector-main-menu-contents in favor of .vector-main-menu
- Add classes to PinnableContainer
- Use PinnableContainer and PinnableElement in main menu
- Remove MainMenuDropdown.less

Bug: T317900
Change-Id: I59b3acd3d56cd5761e5978607634dfb9a88f60e3
2022-12-16 17:34:23 +00:00
bwang d150131561 Generalize Pinnable functionality to not be limited to dropdowns, make Pinnable templates composable
This patch involves cached HTML changes
- Replace '-content-container' id with '-unpinned-container'
- Replace '-content' id with '-pinnable-element'
- Rename pinnableHeader.js to pinnableElement.js
- Replace PinnableDropdownContents.mustache with PinnableElement/Open.mustache and Close
- Add PinnedContainer/Open & Close and UnpinnedContainer/Open & Close
- Rename .vector-dropdown-content to .vector-pinnable-element
- Add new PinnableElement.less stylesheet

Bug: T318013
Change-Id: I85aec387f87126a17e760fd9fd10e10572ff3152
2022-11-30 17:17:20 -06:00
Jon Robson e7b4edf7a6 [Refactor] Rethink Dropdown component
The Dropdown component should be considered the dropdown folder going
forward. This should be distinguished as a different component that
composes the Dropdown component

Since the template itself is rather simple it seems preferable to have
duplicate templates that describe the actual component (PageTools,
VariantsDropdown and LanguageButton)

MenuDropdown is renamed Dropdown and styles that don't correspond to the
Dropdown component are moved to the relevant components.

MenuContents mustache template (future component) is added to DRY up
several of the new templates.

Bug: T320927
Change-Id: I220d0a477b3f05b278bd2cec7dd601c7b3b17c6f
2022-11-29 17:33:03 -08:00
bwang 0f7411bdf2 Update TOC to use PinnableHeader
- Update 'collapsed' naming convention to 'pinned'
- Introduce VectorComponentPinnableHeader

Bug: T317897
Change-Id: I752eadc9bf54d58c799060a9eaefa0b125dd7952
2022-11-15 16:37:50 -06:00
bwang 16da6a5e6a [Technical] Fix sticky header search input alignment when VisualEnhancementFlag is enabled
Visual changes when the flag is on

Follow up to If3aed0ac401b0abc80c3ad52806eb85b33d43f06
More context at T322673#8383888

Bug: T322673
Change-Id: I64a47fa869247f758c6369c2e0ff8b12f87f9d9e
2022-11-10 00:48:07 +00:00
bwang 9bb2f5a55a [Technical] Add DropdownContents.mustache
Bug: T317897
Change-Id: I62edc311a7a2434ab83592d99e870dd82d775de4
2022-11-08 13:56:21 -06:00
Jon Robson c9cdaadb5e [Technical] Separate Dropdown template into 3 templates
Use the new format to remove the need for getTemplateParser
in SkinVector

Bug: T319349
Change-Id: Ic4ac1d6d58099a689c29c16b3029bf43a849e50e
2022-11-03 20:41:20 +00:00
Bernard Wang 15d95fc24a [Technical] Split up Menu.template, restrict decoratePortletData to legacy Vector
Changes:
* Code is moved from SkinVector to SkinVectorLegacy verbatim since it is now only
needed by SkinVectorLegacy
so we remove it:
** This step broke MainMenu rendering so this was captured in VectorComponentMainMenu
** The isLegacy code no longer makes sense and is removed in a follow up

* storybook no longer run on CI

Authors: Bernard Wang and Jon Robson
Bug: T321102
Bug: T319349
Change-Id: Ib424ca1c767161fdae8c0aeedfe662b7fa039ff6
2022-11-02 21:22:50 +00:00
Jon Robson a1199a0917 Use standard utility classes for flushing icons left and right
Restricted to the feature flag (?vectorvisualenhancementnext=1)
 for now to allow us to not worry about caching.

mw-ui-icon-flush-left and mw-ui-icon-flush-right have been in core
for some time and using them means we don't have to manage hardcoded
values for these.

We'll need to think of .mixin-vector-flush-left-left
and .mixin-vector-flush-right-margin-left separately - I wonder
if these could be revised to use these 2 standard classes.

Additional changes:
- Drop unused mixin-vector-flush-right-margin-left mixin

Bug: T321504
Bug: T317583
Change-Id: I51f8e31be6771a3fb32fb07dc22d0c2872b5706d
2022-10-26 10:01:12 -07:00
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00
bwang dd8cc5dfe8 Add snapshot class to sticky header tests
Change-Id: Id1383f234bd0518786feebbbb2d92f7345aa6e70
2022-05-12 10:51:43 -05:00