Allows users to switch between available organizations

This replaces a bunch of `@include` rules with their actual CSS
definitions. This is done in preparation for moving to Tailwind CSS,
which won't let us include utilities the same way due to our inability
to support the `@apply` directive.

The `@include` approach was already questioned in the past as it doen't
have much value over explicit style definitions and just adds an
unnecessary abstraction layer.

Remove `user_application_theme_css_filename` and stylesheet link in head
Remove `theme_helper.scss`
Remove `theme_*.scss` files

Group and project filter dropdowns
scrolling issues. Are in part due
to style leaking. And in part due
to fluid width of content.

Changelog: fixed

Rename `counter` class `user-bar-button` shared with "Search or go to"
Rename `user-bar-item` class `user-bar-dropdown-toggle` for clarity
Add `$t-white-a-*` SCSS variables
Make `$t-gray-a-` values static and remove `_dark.scss` overrides
Refactor super sidebar styles with new custom properties for `:active`
states, remove `mix-blend-mode` usage, add `.gl-dark` custom property
values using `$t-white-a-*` values
Update `nav-item` and `menu-section` to use CSS custom properties for
`:hover`/`:focus` and now `:active` states
Remove `gl-bg-t-gray-a-08` override class on `GlBadge` in `nav-item`

Changelog: other

Thomas Hutterer authored 1 year ago and Paul Gascou-Vaillancourt committed 1 year ago

This component could later be extracted into gitlab-ui.

Scott de Jonge authored 1 year ago and Zack Cuddy committed 1 year ago

Create `--super-sidebar-*` CSS custom properties for color values
Update theme mixin to set CSS cuastom properties and mix-blend-mode
Remove custom colors from `.brand-logo` use button `background-color`
with `mix-blend-mode` in `super_sidebar.scss`
Remove color utility classes from `.counter` and `.active-indicator`
Add explicit `super-sidebar-help-center-toggle` class to set background
when `aria-expanded="true"`

This removes code left unused by
!129843.

Part of #415812.

Scott de Jonge authored 1 year ago and Mark Florian committed 1 year ago

Move `<button>` to be sibling of `<nav-item>` link element
Remove custom `nav-item-link` and `nav-item-badge` class usage and
styles
Add `show-on-focus-or-hover--control` control class
Add `hide-on-focus-or-hover` context/control/target classes
Update `disable_animations.scss` usage of `:not()` selector to remove
`nav-item-link` selector, opt for direct selector
`button.show-on-focus-or-hover--target`

Changelog: fixed

Paul Gascou-Vaillancourt authored 1 year ago and Frédéric Caplette committed 1 year ago

Changelog: added

Thomas Hutterer authored 1 year ago and Michael Lunøe committed 1 year ago

This should help prevent accidental clicks when trying to navigate.

Changelog: changed

This also uses the `js-` prefix to make its purpose clearer, that it's
not for styling purposes.

See
https://docs.gitlab.com/ee/development/fe_guide/style/scss.html#selectors-with-a-js--prefix.

The sidebar nav item and global search frequent items have similar
needs: show descendant elements when some ancestor element has focus or
hover.

The extra CSS isn't ideal, but our utility classes aren't powerful
enough to support this use case. At least it's now shared across a few
places.

Changelog: changed

Scott de Jonge authored 1 year ago and Simon Knox committed 1 year ago

Rename `$calc-application-bars-height` to `$calc-system-bars-height`
Update `calc(#{$header-height} + #{$calc-system-bars-height})`
usage to `$calc-application-bars-height` variable

Create `brand_logo.scss` stylesheet
Decouple brand logo styles from super sidebar

Scott de Jonge authored 1 year ago and Coung Ngo committed 1 year ago

Move "Skip to main content" link outside of becoming `inert` in
`<aside class="super-sidebar">`
Update styles to `gl-fixed` and required positioning, margin, & width
Move `.super-sidebar-skip-to` styles before `.super-sidebar` to reflect
element order on the DOM
Create `$super-sidebar-skip-to-z-index` variable

Changelog: fixed

Update class from `count-pill` to `nav-item-badge` for clarity
Add `nav-item-badge`, `gl-absolute`, `gl-top-2`, and `gl-right-0`
classes conditionally when `isPinnable` is `true`

Changelog: fixed

Thomas Hutterer authored 1 year ago and Lukas Eipert committed 1 year ago

TODO:
- hide on focus
- share position with pin icon

Prefix variables with `$super-sidebar-` to be consistent with
`$super-sidebar-width`/`$super-sidebar-z-index` and reduce confusion
with existing `$sidebar-` prefixed variables.

This reimplements the sidebar peek behaviour that was originally added
in !116914.

This implementation uses a document-wide `mousemove` listener, whereas
the previous implementation relied on the `mouseenter/leave` events
fired on the sidebar element itself and a small hover area.

The old approach
----------------

The main problem with the previous implementation was that sometimes the
sidebar would oscillate between peeked open and closed if the cursor
was stationary.

This was sometimes easy to reproduce, and sometimes hard. The reason
comes down to a race between the JavaScript timer and the CSS transition
duration.

The [UI Events specification][spec] says of the `mouseenter` event:

[spec]: https://w3c.github.io/uievents/#event-type-mouseenter

> A user agent MUST also dispatch this event when the element or one of
> its descendants moves to be underneath the primary pointing device.

It turns out that browsers do not obey this as you might expect on
elements that are undergoing transitions under a stationary cursor (I
suspect this applies to animations as well). Presumably this is for
performance reasons.

What they actually do in this case is dispatch the event approximately
*after* the transition has ended. Each browser does this slightly
differently in my testing, and none of them seem deterministic in
exactly when the event is dispatched.

This means that, if the sidebar's opening transition is cancelled before
it is complete (e.g., the sidebar instead starts its closing transition)
the `mouseenter` does not get dispatched even if the transition did move
the element underneath the stationary cursor.

If the cursor is moving at the same time as the transitioning element,
the event is dispatched as expected on the first frame the cursor enters
it.

So, the race was between the opening sidebar transition and the closing
timer. If the transition ended early enough, the `mouseenter` event
would be dispatched, and the bug wouldn't happen. If the cursor moved
during the transition and was over the transitioning sidebar, the
`mouseenter` event would be dispatched, as expected.

The bug occurred only when the cursor was stationary, and the opening
transition took too long, causing it to be cancelled by the closing
transition, meaning no `mouseenter` event was dispatched to keep the
sidebar open.

The new approach
----------------

The approach taken here is to rely on a document-wide `mousemove`
listener. This has two benefits:

- The bug with the previous approach is avoided since no DOM is involved
  in determining where the cursor is.
- Additional regions are trivial to add, for instance, moving the cursor
  far enough away instantly closes the sidebar, rather than having to
  wait for the closing timer. It is possible to other regions, for
  instance, one which shows a hint or affordance of the peek behaviour,
  but does not start the timer to open the sidebar (this is not
  implemented here, but is trivial to do so).

It does have one drawback, which is that it's not coupled to the DOM.
This means that if the sidebar changes width, or has some descendant
that overflows the sidebar, the sidebar might get closed even though the
cursor is over it. This could be avoided in a few ways, but isn't done
here.

This also formalises and extracts the peek state machine logic into its
own Vue component. This means that the document event listener is
guaranteed to be added and cleaned up when switching between toggled
open/closed states. The timers are also encapsulated within that
component, and the whole thing can be more thoroughly tested in
isolation.

Paul Gascou-Vaillancourt authored 1 year ago and Vitaly Slobodin committed 1 year ago

This drops the `GlCollapse`-based context switcher in favor of a
`GlDisclosureDropdown` solution. This aligns with most recent design
decisions to make the context switcher stand out more.

Paul Gascou-Vaillancourt authored 1 year ago and Alexander Turinske committed 1 year ago

This adds the ability for the Trial Status widget to show up in the
super sidebar.

Scott de Jonge authored 1 year ago and Jannik Lehmann committed 1 year ago

Create `super_sidebar_peek` feature flag
Remove `gl-visibility-hidden` class from super sidebar collapsed state
Add hover area which toggles `isPeek` state on `mouseover`
Decrease transition to `100ms` when peeking
Replace super sidebar `border-right` with `box-shadow` when peeking
Add `hasCollapseButton` prop to `<user-bar>` to hide when peeking
Use `prefers-reduced-motion: no-preference` for transitions
Add `100ms` delay to `isPeek` to compensate for unintentional triggers
Move `SUPER_SIDEBAR_PEEK_DELAY` to `constants.js`
Add `setTimeoutSpy` to tests, restore `createWrapper` on test

Scott de Jonge authored 1 year ago and Simon Knox committed 1 year ago

Remove custom styles to absolute position super-sidebar-toggle
Remove `gl-relative` wrapping class for breadcrumbs
Add `breadcrumbs_class` and `breadcrumbs_container_class` variables
Update existing sticky headers to compensate for breadcrumbs height
Add `--breadcrumbs-height` to be added with `.with-breadcrumbs`
conditional class
Add `--breadcrumbs-height` to `$calc-application-header-height` variable
Update `.layout-page` and `.boards-sidebar` with height variables

Thomas Hutterer authored 1 year ago and Olena Horal-Koretska committed 1 year ago

Otherwise tab order looks wrong, while it's focusing the hidden button.

This reverts merge request !115923

Changelog: added

Scott de Jonge authored 1 year ago and Jacques Erasmus committed 1 year ago

Add hover area which toggles `isPeek` state on `mouseover`
Add `150ms` delay to `isPeek` to compensate for unintentional triggers
Decrease transition to `100ms` when peeking
Replace super sidebar `border-right` with `box-shadow` when peeking
Move `isCollapsed` to `isInert` computed property include `!isPeek`
Add `hasCollapseButton` prop to `<user-bar>` to hide when peeking
Add `ease-out` to super sidebar transform transition