Styling should not depend on IDs to allow us to have multiple
searches in the page.
Precursor for wiring up search in the sticky header.
This also tweaks performance metrics to track separate metrics
for the sticky header search
Change-Id: I5b4192a8f5a9f95af26c1faf904f7cc994323518
The user menu dropdown was announcing to screenreaders as "Personal tools expanded collapsed". This is due to the core icon classes causing the spans to be display: block. This patch adds !important to the relevant display styles to ensure the statuses are always read out correctly
Bug: T253650
Change-Id: I0b51af5da98af1bd0c0029db54420e395242842d
- Apply aria-hidden to h3 in Menu template, ensuring the nav landmarks are still properly labeled, but no longer reading duplicate labels to screenreaders
- Remove "Navigation menu" h2 element, which is not needed as the nav landmarks are already labeled
- Remove searchbox h3 element, which is redundant with the search landmark
- Scope all changes to modern vector
Bug: T265993
Change-Id: I4e5da7a0699160fa57234bd126b75243e0157778
- Separate icon classes from button classes in user links/language
- Upgrades the personal tools language button preference to
a mw-ui-button with icon
- Adds a generic selector for dropdown menus without an icon
- Cleans up user links CSS now mw-list-item class is available
- Removes icon hack CSS
Bug: T289630
Bug: T283757
Change-Id: Ib518858e06549f252d73d57fd4768f446cc561b9
- Mimic expanded/collapsed state of menu without JS.
- Update template, styles, i18n to make accessibility of dropdowns accurate.
Bug: T253650
Change-Id: I58ecebf520d6107554dbb81470dee69a5d4a7f1d
- JS-enabled ULS button gets a focus state by moving the ULS click handler to the Menu checkbox instead of the h3, and unhiding the checkbox
- JS-enabled ULS button no longer gets a darker background when the menu is open (ULS default style)
- JS-enabled and no-js ULS buttons both rely on mw-ui-button and mw-ui-quiet classes for focus/hover/active states
- Old styles and skinStyles are removed
Bug: T283757
Change-Id: I66073d6128a27afbd80a7adcff03cc7fcefa9556
Update/remove config, constants, hooks, templates, styles, logic, tests, stories to check legacy vs modern Vector where applicable instead of the decommissioned user links feature flag.
Bug: T288852
Change-Id: I5c5831091a10711838a8a2877c782df4996d4596
The padding-top of the orange notification set in
ext.echo.styles.alert.less was being overriden by the `padding-top: 0`
set in UserLinks.less which was intended to only override the padding
set in Menu.less.
This commit:
* Scopes the li styles in Menu.less to apply only to the legacy user
menu (found in both legacy and modern vector with the consolidated user
links feature off) which appears to be the only menus that needs these
rules.
* The padding-top previously in UserLinks is no longer needed as a
result of the above point.
* Adjusts/cleans up the positioning of the orange notification by
removing an unneeded margin/padding-top and setting the top to 100% (the
previous `calc` statement was unintentionally resulting in 112%).
Bug: T287633
Change-Id: Ia7069d291f53d8e0e0e576d7b96b7a8b1a6cb29d
* Revises UserLinks.less according to the T285786 spec.
* Unsets 'createaccount' data in $content_navigation in favor creating
this link inside SkinVector which follows the same pattern as the Login
link. This is needed because the create account link needs to be on top
of the login link in the menu per T285786#7231671.
* Changes MenuDropdown.less to pad the anchor element instead of the li
element. This results in a more intuitive click target.
* Places an end margin on the search box to add space between the user
links and the search box.
Bug: T285786
Change-Id: Idb860e6b65c9f266a8027e3f486ccf4c4ec4ed3c
We will couple the roll out of the consolidated user links code
with the roll out of the new icon styles.
This change is restricted to the user links feature and will result
in some slight UI discrepencies until
Ibc136a17662ae839f90babb21e0f7e8f27b7a7d5
is merged.
Bug: T191021
Change-Id: Ia2d2c86e61341b9900f9ac337ddd763252e0515f
The tablet breakpoint doesn't work. It is not possible to apply
the min width of 350px for the search input given the other elements
in the header, however the desktop breakpoint provides plenty of space.
Change-Id: I93c29700d465d641f8155c01a311e1e720c37695
Now that the header collapses at small resolutions
(I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the
search toggle to show the search box when clicked and hides it when the
user clicks outside the search box.
* Adds searchToggle.js to perform handle the toggle behavior of the
searchbox.
* Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less
so that these can be used to set the start margin of the search box
(enabling its start edge to match the tab text start edge).
* Modifies screen.less to only apply search max-width when >=
@width-breakpoint-tablet
Bug: T284242
Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
Additional change: A bundlesize increase is required given
recent developments in the user menu.
Bug: T284748
Change-Id: I2b0981d621c3add42731e50d5aef299b32548b4a
Reduces the min-width to 340px with several changes at lower
resolutions
* collapses create account into dropdown
* hides language button and user messages
* The search component is updated to include a search toggle which
can be used to hide and show the search input at lower resolutions
- this leads to a slight HTML change with caching implications,
it also moves away from a BEM usage which is not standard for this
repository.
* limits width of logo based on the dimensions we display
in mobile
Bug: T276566
Change-Id: I89d75843ca7e33e6de93af5d7c22e46b7249c4b7
Merge UserMenu into UserLinks for legacy and modern
Add a story for the UserLinks menu
Fixes: rendering of Skin (legacy) personal tools (the user icon
no longer overlaps)
Change-Id: I491ebb3962780bf2cf7f1dfb4dd09d576c294366
Remove redundant styles. Update personal menu dropdown to more closely reflect design of OOUI dropdown elements. Extract legcay-specific, modern-specific styles for UserMenu into separate partials. Create new shared UserMenu component.
Bug: T276561
Change-Id: I1e56cd5b3b24ac1b5cae684301b8e3a84ea33a5c
Pull personal menu items except for user page link into a consolidated dropdown menu based on feature flag using Vector hooks. Add consolidate user links feature flag for logged in/out users. Update styles for personal toolbar. Add logic to template to show legacy toolbar or consolidated toolbar based on feature flag variables.
Bug: T276561
Depends-On: If4e143aada711d210ae45d33b97a6be0685b6a41
Change-Id: I1c305d89bece147a6f1b478441119c3169abfbdd
Removes the global rule for right-aligning the Vector dropdown menus
and instead scopes that alignment to dropdown menus that appear
inside #right-navigation and the language button in modern Vector.
Bug: T275158
Change-Id: I6c00ccc365f70682841d9eda9d31bbe25c757aa0
Separating most LESS files into 2 ResourceLoader modules and a common
folder:
- skins.vector.styles
- skins.vector.styles.legacy
- common
This changes aims to clearly separate the old (“legacy”), the new
(“modern”) and the common styles which were previously all placed under
`skins.vector.styles/`.
Inside each directory are separate folders for `layouts` and
`components`.
The entry files, `skin.less` and `skin-legacy.less` are moved into the
specific folders and a third, `common.less` entry file is created that
contains the common imports for both old and new Vector.
Aliases have been added to the Storybook Webpack config to avoid adding
the story file changes to this patch. Images coming from CSS `url()`'s
have also been temporarily disabled in Storybook until Storybook can be
upgraded to use Webpack 5, and use array values for aliases, in a
follow-up patch.
This patch also slightly changes a footer layout specific rule so that
existing `padding` remains unchanged in rendering due to new common and
component structure.
Bug: T264309
Change-Id: I1cd2681a2b61edb7be56c38f9bb3994827d7e322
