Comments (17)
It seems that we already have a var that we could use
![Screenshot 2024-06-10 at 15 01 27](https://private-user-images.githubusercontent.com/2854616/338226142-6f1812fa-136a-4545-8545-a48525eaf85b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5Mzk1NjAsIm5iZiI6MTcxODkzOTI2MCwicGF0aCI6Ii8yODU0NjE2LzMzODIyNjE0Mi02ZjE4MTJmYS0xMzZhLTQ1NDUtODU0NS1hNDg1MjVlYWY4NWIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjFUMDMwNzQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTRlNzM3NTk2NTFjYzZkNDJmMTU5ZGNiZjhmYTY2MTJiNmVlYjYwYTFjYTJhM2ZjNmNmZjRmM2Y0NGRkYmQ5YyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.w6LCAxsP23Xb8swn3yMjXsXojK_oYBHbRLgZAg5LkrQ)
from eui.
This conditionally appearing toolbar was intended to be positioned at the top of the viewport, immediately below the new singular header. It shouldn't scroll with the rest of the page content, allowing it to be visible and within reach at all times (similar to the Kibana header). Unlike the Kibana header however, it would be adjacent to the navigation (rather than above it)
Should flyouts sit above it or below it? Kibana headers are above FWIW
EDIT: Whoops, I see that in the 2nd to last screenshot now - it sits below flyout overlays. Yeah, this is definitely going to need a separate component from EuiHeader.
from eui.
Ah okay, @tsullivan informed me you'd taken over ownership of the sticky app bar - maybe he was mistaken? Do you know who on AppEx currently owns it?
If I can't get any clear communication/ownership from either Kibana or the devs who opened this issue, I may end up closing this as a wontfix. To reiterate, the 2nd sticky bar isn't being implemented or created by EUI, it lives in Kibana, so this isn't an EUI bug or issue. We can help resolve it, but not without clearer cooperation from Kibana's side of things.
from eui.
@sebelga @dominiqueclarke page_template_inner.tsx could also consider the --kbnAppHeadersOffset
introduced in elastic/kibana#168372 to compute the min-block-size
.
min-block-size: calc(100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)));
from eui.
Minor correction: there are 2 fixed headers on ESS, not 1: the black header and then the white header below that.
As far as --euiFixedHeadersOffset
is concerned, Serverless only has 1 fixed header, not 2. Fixed headers are considered full width position: fixed
elements that stretch across the entire page, the 2nd one is not a fixed header because it does not supercede the left collapsible nav.
If you want EuiPageTemplate to account for this new "header" type, we likely need a specific EUI component for it, likely an EuiPageTemplate.TopBar
element or similar (to mirror EuiPageTemplate.BottomBar
).
CC @MichaelMarcialis / @ryankeairns for design input on the above: is the second screenshot part of the official header for serverless?
from eui.
Hi EUI Team, do you have a view on when this might be looked into? We are planning where we are with the Observability solution in Kibana for serverless and this is on our radar for elastic/kibana#176177. Thanks.
from eui.
We can look into it now if y'all need - I know serverless work is high priority. What's your preferred timeline on this?
from eui.
Thanks for the ping, @cee-chen. When we were originally designing the serverless navigation, we consolidated Kibana's then double fixed headers (one dark, one light) down to a single fixed header. However, by reducing the number of fixed headers, we were left with no home for the conditionally appearing action buttons that are present in some Kibana applications (which would typically appear right aligned in the second fixed header). For that reason, we suggested that these action buttons should be housed in a conditionally appearing toolbar container.
This conditionally appearing toolbar was intended to be positioned at the top of the viewport, immediately below the new singular header. It shouldn't scroll with the rest of the page content, allowing it to be visible and within reach at all times (similar to the Kibana header). Unlike the Kibana header however, it would be adjacent to the navigation (rather than above it). As such, the toolbar would need to be treated as part of the flow in regard to the navigation being collapsed or expanded (making the toolbar wider or narrower respectively). Will share some older mockups below that may do a better job conveying this.
Let me know if that makes sense. CCing @ryankeairns to keep me honest.
![Collapsed](https://private-user-images.githubusercontent.com/3884767/331716647-74cda7ba-fa4f-4d18-af1a-e450728b0406.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5Mzk1NjAsIm5iZiI6MTcxODkzOTI2MCwicGF0aCI6Ii8zODg0NzY3LzMzMTcxNjY0Ny03NGNkYTdiYS1mYTRmLTRkMTgtYWYxYS1lNDUwNzI4YjA0MDYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjFUMDMwNzQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzE0YmEyZTZmZmM2NTE4OTljMTUzNjZkYTRlYTk4M2E0OTA5NTZiNjYwZTdkOTMwYjIxNDFkM2M4OWY0YTY4ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.j-lFKuGV0xdS9rq8mAJ9cNuQD0W7LfJbwjgdU7VShcQ)
![Expanded](https://private-user-images.githubusercontent.com/3884767/331716651-17ff1b78-2165-43f9-ac4d-f1cf15e5ca5a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5Mzk1NjAsIm5iZiI6MTcxODkzOTI2MCwicGF0aCI6Ii8zODg0NzY3LzMzMTcxNjY1MS0xN2ZmMWI3OC0yMTY1LTQzZjktYWM0ZC1mMWNmMTVlNWNhNWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjFUMDMwNzQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDUxNjljMzU2YjQ5MGIwYjJjODg3Y2NlYzQzNGIxODM5NmVlMjY1ZjJlZDk0NDdiMjQ2MWFmMmExNTRlMWNkZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.WsdSby_WwPKKcUllBi3Jhzacb41FUQ16R97hJXmMWy0)
![Flyout](https://private-user-images.githubusercontent.com/3884767/331716654-c713304a-b20e-42e7-b2ea-f4b7068e3696.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5Mzk1NjAsIm5iZiI6MTcxODkzOTI2MCwicGF0aCI6Ii8zODg0NzY3LzMzMTcxNjY1NC1jNzEzMzA0YS1iMjBlLTQyZTctYjJlYS1mNGI3MDY4ZTM2OTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjFUMDMwNzQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmE1YjNmZDU1YmVkZjY3MmIzNDc3YWU5YzYyNjc5ZDBlMjk3YTU1YTFkZmIwZTBhMTllNDg5MDc0YzNhMjM0MyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.esQTELH1PUK62FVuYanlvfgmxJu55LJMyVaN5AqfoRg)
![Modal](https://private-user-images.githubusercontent.com/3884767/331716656-81554805-8389-493a-96db-6b49a20047a2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg5Mzk1NjAsIm5iZiI6MTcxODkzOTI2MCwicGF0aCI6Ii8zODg0NzY3LzMzMTcxNjY1Ni04MTU1NDgwNS04Mzg5LTQ5M2EtOTZkYi02YjQ5YTIwMDQ3YTIucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYyMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MjFUMDMwNzQwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTkzYzU5ZGQzNmExZjVhMjhiNGIxZTU2ZjQxYmEwZTE2ZGZlODJhYzRmYmI2NjA2YjI5YTY5YTQ2M2I3NzRkZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.h4Cvmgo7q3uMCcacKjEWG8jocyZwkd4JwcbG52cBBgo)
from eui.
@sebelga Pinging you about this as Tim let me know you're owning the new serverless nav development - would EUI implementing a new EuiPageTemplate.TopBar
component work well with your current work? Or would you like to discuss this and #7777 further?
from eui.
would EUI implementing a new EuiPageTemplate.TopBar component work well with your current work?
My current work is the stateful side nav 😊 which does not touch the page templates.
I would need to go into the code to see how those serverless actions are rendered in Kibana currently. I would have thought that this could be solved with CSS (some class added to the wrapping div) but I trust your judgment if a component is required 👍
from eui.
I didn't said our team didn't own it, you asked "would implementing a new component work well with your current work ". And I answered that my current work was not related to the sticky app bar.
I just looked now at the code, I don't know why we can't solve this with CSS and why we need a new component.
min-block-size: calc(100vh - var(--euiFixedHeadersOffset, 0));
I see 2 solutions:
- Modify the value of
--euiFixedHeadersOffset
dynamically. But that might impact other parts of Kibana relying on it - Overrride the CSS of the page template that sets the
min-block-size
. I guess it's possible @cee-chen?
@dominiqueclarke, if we have a way to override the css of the page template and we export a CSS var for the app menu bar height, it seems that we should be able to get this issue fixed without EUI
from eui.
I can raise a PR fixing it as part of elastic/kibana#176177. @dominiqueclarke , wdyt?
from eui.
I can raise a PR fixing it
That'd be awesome. Let me know if you need any help. Cheers
from eui.
yeah, based on my tests this should fix the problem. the PR is almost ready.
min-block-size: calc(100vh - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0)));
from eui.
@sebelga fyi: elastic/kibana#185874
from eui.
Thanks @crespocarlos! Should I go ahead and close this issue in the EUI repo, since y'all have come up with a fix on Kibana's side of things?
from eui.
Hi @cee-chen, yes, you can close this out.
from eui.
Related Issues (20)
- [Meta] Support React Strict Mode
- EuiPortal should be able to use different portal target than document.body based on provided Context HOT 7
- [EuiDataGrid] Cell text content visible below truncation when using `fontSize: "s"` HOT 2
- FlexItem does not accept HTMLAttributes like title anymore HOT 2
- EuiSteps unordered variant HOT 6
- [EuiSelectableTemplateSitewide] Allow default a link behavior for results HOT 3
- [EuiTabs ][A11Y] - Using `EuiBetaBadge` within `EuiTab` HOT 3
- Spike: Explore switching to Yarn Berry
- [New docs] Implement typography design changes
- [EuiComboBox] support for append and prepend on group labels
- setEuiDevProviderWarning to accept an optional callback function
- [EuiDataGrid] Ensure gridStyles updates trigger a cell height recalculation
- [New docs] Fix `EuiProvider`'s `globalStyles` breaking docusaurus styles HOT 4
- [EuiAvatar] Calculate high-contrast text against background HOT 3
- [EuiDataGrid] Cell filtering UX unusable after scroll HOT 13
- [Docs] EuiProvider custom breakpoints example no longer works
- Datagrid - Rearranging visible columns works on the grid but does not hold state on drop down menu.
- [EuiIcon] Update the `logoElasticStack` icon to latest
- [DataGrid] Enable `Auto Fit` behavior when `Cell row height` - `Custom` is selected
- [EuiComboBox] Add autocomplete="off"
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eui.