Navigation item labels can be custom components with secondary actions #154487
Assignees
Labels
Project:Serverless
Work as part of the Serverless project for its initial release
Team:SharedUX
Team label for AppEx-SharedUX (formerly Global Experience)
Comments
tsullivan
added
the
Team:SharedUX
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
tsullivan
added
the
Project:Serverless
11 tasks
tsullivan
added a commit
that referenced
this issue
Apr 28, 2023
**The API for the link definition is subject to change.** This PR provides linking functionality and structure that will give solution devs a starting point for side nav in their projects. The API uses simple hrefs for now, because it's the easiest thing to start with. Planning forward, we are thinking of a different navigation model that separates nav structure from presentation of each nav item - this will allow reuse of the structure without reusing the presentation. ## Isolated dependencies In order for this component to be usable in `main`, a bit further work is currently required in the ChromeStart service and the Serverless plugin. These links are examples of a usable implementation that link to a POC branch: * Light mode for the side nav container: tsullivan@0a32333cdf0 * Extensions to Serverless plugin and the ChromeStart service: tsullivan@16b0aad610f ## Summary Introduces a component to host the side navigation in Kibana. Solution teams can insert their own content, and have other small options to customize the presentation: see the storybook demos for more. Closes #154479 Closes #154484 Closes #154485 ~~Closes #154489 Closes #154481 Closes #154480 Closes #154486 Closes #154487 <img width="1462" alt="image" src="https://user-images.githubusercontent.com/908371/233739506-7b88646e-3c19-44f0-afbf-ca1a23d32c57.png"> ## Developer documentation See the Storybook demos: * run: `yarn storybook shared_ux` * Find the `Chrome > Navigation` section in the Storybook app ### Checklist Delete any items that are not applicable to this PR. - [x] Home icon links to Project's "home" - or the customer user setting - [x] Home icon shows loading indicator - [x] All the Platform links navigate to the correct place - ~~Platform links are not shown if the underlying plugin is disabled~~ - [x] Nav items define their links using `href` only - [x] All href links work - [x] Nav menu item to link to Cloud deployment - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The new side-navigation bar for serverless deployments will feature a set of navigation items belonging to a "Solution" or SKU, which will be consistent within the project type. The navigation items should be flexible enough to allow the label (part shown to the user) to be a custom component that can have secondary actions. Nav items with secondary actions will typically have an icon to the right of the text, and a flyout with more navigation content.
The text was updated successfully, but these errors were encountered: