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 535a853133
[Discover Tabs] Responsive tab size and scroll actions (#213739) 
- Closes https://github.com/elastic/kibana/issues/210514

## Summary

This PR:
- updates style of tab name overflow
- automatically recalculates what the max tab size can be used
- if tabs don't fit the available width, arrow buttons will appear to
help with scrolling left and right
- adds max tab limit and hides "+" button if it's reached
- introduces `unifiedTabs` page object for creating functional tests

![Mar-07-2025
17-47-12](https://github.com/user-attachments/assets/f1547086-1c8e-4e47-9d2e-35954403ec24)

## Testing

Two options are possible:

1. start Storybook with `yarn storybook unified_tabs` and navigate to
`http://localhost:9001`.
2. start Kibana with `yarn start --run-examples`. Then navigate to the
Unified Tabs example plugin
`http://localhost:5601/app/unifiedTabsExamples`.

### 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
2025-03-13 12:42:13 +00:00
..
common
public [Discover Tabs] Responsive tab size and scroll actions (#213739) 2025-03-13 12:42:13 +00:00
kibana.jsonc
README.md
tsconfig.json

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