Commit Graph

24 Commits

Author SHA1 Message Date
Laura Benz
5b6a4e880b
Nav: Fix main a11y issues (#80309)
* refactor: add nav announcement for screenreader

* refactor: add aria label

* refactor: add more aria labels

* refactor: aria labels

* refactor: remove aria-labels

* refactor: add aria-live

* refactor: add translations

* refactor: repair empty message

* refactor: repair empty message

* refactor: remove translation of empty message

* refactor: clean up

* refactor: change translation
2024-01-23 13:02:48 +02:00
Ashley Harrison
05dcc7a441
Navigation: Independent docked state (#78954)
* initial start

* more progress

* behaviour working?

* only use media query when docked local storage state is true

* close menu when undocking

* remove unneeded animation code and fix focus when toggling between docked/undocked

* better feature toggle handling (can go back and forth)

* remove restoreFocus (for now)
2023-12-11 11:41:14 +00:00
Ashley Harrison
4247696402
DockedMegaMenu: Keep undock button (#78461)
* dock undock smoothly

* handle keyboard focus

* use ref instead of state

* run i18n:extract

* undo this change

* make dock/undock first button to focus

* only focus when going to docked, add comment

* minor tweaks
2023-11-22 15:56:36 +00:00
Ashley Harrison
b6e2db7d91
Navigation: Report megamenu state when clicking a navigation item (#77705)
report megamenu state when clicking a navigation item
2023-11-06 14:32:29 +00:00
Ashley Harrison
d68d31c63c
Navigation: Hide Undock menu button when docked (#76965)
* small dock menu exploration

* fix e2e tests

* revert back to web-section-alt
2023-11-03 17:07:15 +00:00
Alex Khomenko
d62170e4ce
Grafana/ui: Move the Stack component out of unstable (#77495)
* grafana/ui: Move Stack out of unstable

* grafana/ui: Replace imports
2023-11-02 12:22:57 +02:00
Ashley Harrison
2d5e602b2d
Navigation: Minor tweak to dockedMegaMenu to make it slightly tighter (#77493)
minor tweak to dockedMegaMenu to make it slightly tighter
2023-11-01 13:56:58 +02:00
Alex Khomenko
f5cbd4f9d0
grafana/ui: Rename Flex component to Stack (#77453)
* grafana/ui: Remove Stack and rename FLex to Stack

* Update types

* Update grafana/ui imports

* Update Grafana imports

* Update docs
2023-11-01 09:48:02 +02:00
Ashley Harrison
49f8838b62
Navigation: Improve docked auto scroll behaviour (#77117)
ensure expand works on any location change, only scroll when docked
2023-10-27 09:26:38 +01:00
Ashley Harrison
85468d2a67
DockedMegaMenu: Adjust docked threshold (#77139)
* adjust docked threshold to be xl instead of md and make sure it's open by default on 1440 res

* don't show dock menu button
2023-10-25 14:41:07 +01:00
Josh Hunt
ec84caf389
Navigation: Basic e2e tests for docked mega menu (#77000)
* Navigation: Basic e2e tests for docked mega menu

* give mega menu an e2e selector

* make existing tests narrower so menu doesn't default to docked. add test for auto docking at large viewport

* use new selector in nondocked menu
2023-10-24 15:56:00 +00:00
Ashley Harrison
efea86eb52
Navigation: Expand active page hierarchy and scroll into center if not visible (#76949)
* expand page hierarchy and scroll into center if not visible

* remove unnecessary id
2023-10-23 15:47:16 +01:00
Ashley Harrison
f9a89e5cd2
Navigation: correctly mark a MegaMenuItem as active if it has active children (#76944)
correctly mark a MegaMenuItem as active if it has active children
2023-10-23 10:55:25 +01:00
Ashley Harrison
a2921d9dfb
DockedMegaMenu: More consistent spacing on active state (#76873)
* more consistent spacing on active state

* use correct secondary variant buttons
2023-10-23 09:15:39 +01:00
Laura Benz
d16a274e3a
Nav: Design changes in MegaMenu (#76735)
* refactor: move expand button to front

* refactor: add grid + adjust level 2

* refactor: remove grid + fix alignment for all three levels

* refactor: first iteration alignment

* refactor: styling of MegaMenuItemIcon

* refactor: remove styling of div in MegaMenuItemIcon

* refactor: styling object

* refactor: alignment of first level

* refactor: alignment of second level

* refactor: alignment of third level and active state

* feat: add connecting line for level 3

* feat: add comment

* refactor: remove unused code

* refactor: clean up styling

* refactor: clean up styling

* refactor: clean up styling

* some small tweaks

* remove unused props from getStyles

* fix dock button position and text ellipsing

* add padding to container to prevent icon button overlapping on left side

* add active overlay

* adjust font-weight, add padding to RHS

* add border-box for overlay

* adjust menu width to 300, don't use non-integer levels

* use height: 100%

* don't think we need minWidth

* make chevrons right/down

* make url required, cut down css

* move active state to container

* remove unused class

* add padding at top and bottom of menu as well

* adjust chevron size

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
2023-10-19 17:41:58 +02:00
Laura Benz
a546db4b3a
Nav: Remove and refactor MegaMenu and its sub-components (#76614)
* refactor: remove hasActiveChild

* refactor: remove unused properties from MegeMenuItemText

* refactor: remove MegaMenuItemIcon

* refactor after code review
2023-10-17 10:34:44 +02:00
Laura Benz
5423e75bf3
Nav: Replace cloneDeep() in MegaMenu (#76607)
* refactor: remove deep clone of nav tree

* refactor: fix mutation issue
2023-10-16 12:03:35 +02:00
Ashley Harrison
b6fb1e52f2
Navigation: Limit SectionNav to rendering items up to 3 levels (#76478)
* only render section nav items up to 3 levels

* extract level depth into constant, apply in DockedMegaMenu as well
2023-10-13 10:38:35 +01:00
Ashley Harrison
abd2c9c287
Navigation: Hide docked menu and dock button on mobile (#76334)
* hide docked menu and dock button on mobile

* add logic to handle hamburger menu button on mobile
2023-10-11 11:33:15 +01:00
Ashley Harrison
930c753340
Navigation: Implement logic for docking nav menu (#76188)
* Create a state for dockedMegaMenu and the function to manage it

* Add the dockedMenu icon and handle the status when clicking it

* Add Megamenu to section nav area when it is docked

* get logic working

* fix mobile

* refactor state + persist in localStorage

* adjust icon and don't use position absolute

* restore old rudderstack tracking

* use Flex instead

* adjust feature toggle to be experimental

* extract out localStorage handling into utils

* don't need separate file

* use store.set/get instead

---------

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
2023-10-10 14:55:52 +01:00
Ashley Harrison
18b237879d
DockedMegaMenu: Refactor and rename to simplify (#75872)
* tidy up some styles

* remove NavBarMenuItemWrapper + consolidate components

* lots of renaming

* use object syntax in FeatureHighlight

* fix a couple of missing find+replace

* adjust li positioning

* fix text truncation

* bit more tidy up

* refactor indent into it's own component

* memoize styles in Indent
2023-10-03 13:03:27 +01:00
Ashley Harrison
efaa779c2e
Navigation: Refactor MegaMenu to separate out overlay/animation logic (#75365)
* user essentials mob! 🔱

lastFile:public/app/core/components/AppChrome/DockedMegaMenu/DockedMegaMenu.tsx

* mob start [ci-skip] [ci skip] [skip ci]

* user essentials mob! 🔱

lastFile:public/app/core/components/AppChrome/DockedMegaMenu/DockedMegaMenu.tsx

* user essentials mob! 🔱

lastFile:public/app/core/components/AppChrome/AppChrome.tsx

* fix border css + scroll

* import width from DockedMegaMenu

* extract logic out into AppChromeMenu

* fix bug with hamburger icon

* rename some styles

* one more rename

* remove janky state logic

* prevent react-aria closing the overlay when interacting with the toggle button

* don't need boolean

---------

Co-authored-by: eledobleefe <laura.fernandez@grafana.com>
2023-09-27 17:05:40 +01:00
Laura Fernández
14f4ed0180
Navigation: enable third level on the DockedMegaMenu (#75180) 2023-09-21 15:15:11 +02:00
Laura Fernández
efeff6bbb1
Navigation: create the DockedMegaMenu component and use the toggle to switch between it and MegaMenu (#75084) 2023-09-19 17:47:03 +02:00