github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/examples/unified_tabs_examples
History
Exact
Julia Rechkunova 705df212b8
[Discover][Tabs] New tabs package and initial implementation of components (#210674) 
- Closes https://github.com/elastic/kibana/issues/210500
- Closes https://github.com/elastic/kibana/issues/210502

## Summary

This PR introduces a new package `@kbn/unified-tabs` which includes an
initial implementation for tabs UI/UX which we are planning to add to
Discover.

- [x] New package
- [x] Storybook support 
- [x] Initial styles and interactions
- [x] New example plugin for testing together with UnifiedSearch bar 
- [x] Minimal tests

### In the new Storybook

Start Storybook with `NODE_OPTIONS="--openssl-legacy-provider" node
scripts/storybook unified_tabs` and navigate to `http://localhost:9001`.

<img width="1024" alt="Screenshot 2025-02-12 at 13 35 46"
src="https://github.com/user-attachments/assets/0723b0c4-c3f7-44f8-af8d-f68d7a7b6ea8"
/>

### In the new Unified Tabs example plugin

Start Kibana with `yarn start --run-examples`. Then navigate to the
Unified Tabs example plugin
`http://localhost:5601/app/unifiedTabsExamples`.

<img width="1221" alt="Screenshot 2025-02-12 at 16 11 55"
src="https://github.com/user-attachments/assets/2edff817-0aae-424c-978c-c4c67450c9eb"
/>
<img width="1219" alt="Screenshot 2025-02-12 at 16 13 57"
src="https://github.com/user-attachments/assets/2e6e6b0b-88e9-4689-a175-9612e8507535"
/>

![Feb-12-2025
16-13-17](https://github.com/user-attachments/assets/a1d511da-d554-432c-bea9-cbe8349f9772)


### Checklist

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [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] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Davis McPhee <davismcphee@hotmail.com>
2025-02-21 14:00:40 +01:00
..
common [Discover][Tabs] New tabs package and initial implementation of components (#210674) 2025-02-21 14:00:40 +01:00
public [Discover][Tabs] New tabs package and initial implementation of components (#210674) 2025-02-21 14:00:40 +01:00
kibana.jsonc [Discover][Tabs] New tabs package and initial implementation of components (#210674) 2025-02-21 14:00:40 +01:00
README.md [Discover][Tabs] New tabs package and initial implementation of components (#210674) 2025-02-21 14:00:40 +01:00
tsconfig.json [Discover][Tabs] New tabs package and initial implementation of components (#210674) 2025-02-21 14:00:40 +01:00

README.md

unified_tabs_examples

Examples of unified tabs components.

To run this example, ensure you have data to search against (for example, the sample datasets) and start kibana with the --run-examples flag.

yarn start --run-examples