[Embedded Console] Introduce kbnSolutionNavOffset CSS variable#175348
[Embedded Console] Introduce kbnSolutionNavOffset CSS variable#175348TattdCodeMonkey merged 6 commits intoelastic:mainfrom
Conversation
TattdCodeMonkey
added
release_note:skip
Updated the SolutionNav component to set a global CSS variable, --kbnSolutionNavOffset, with the current width of the solution nav. This will allow components in Kibana to offset based on the current size of the solution nav if its rendered on the page.
Updated the embedded console to check the current chrome style and use the correct CSS variable for the side nav offset.
TattdCodeMonkey
force-pushed
the
rnorris/kbn-solution-nav-offset
branch
from
dbc933f to
004ff2b
Compare
yuliacech
left a comment
yuliacech
left a comment
There was a problem hiding this comment.
Tested locally, changes LGTM 👍
| useEffect(() => { | ||
| setGlobalCSSVariables({ | ||
| '--kbnSolutionNavOffset': navWidth, | ||
| }); |
There was a problem hiding this comment.
I guess this should be cleaned in the destroy callback?
There was a problem hiding this comment.
I had that initially, but it didn't seem to change anything so I removed it as superfluous.
Also the eui code I modeled this off of does not have a destroy callback either.
There was a problem hiding this comment.
it could be a problem when this variable is used with a fallback for the case when solution nav is not rendered, e.g.:
var(--kbnSolutionNavOffset, 0);
| if (isMediumBreakpoint) { | ||
| return isSideNavOpenOnMobile || !canBeCollapsed | ||
| ? `${FLYOUT_SIZE}px` | ||
| : euiThemeVars.euiSizeXXL; |
There was a problem hiding this comment.
Looks like there is no way (or no straightforward way) to connect these widths with the widths that are actually set for the sidebar. Maybe it is worth at least adding a comment in the CSS where these widths are set, that this logic might also need an update in case the CSS is updated
like here
or here
There was a problem hiding this comment.
Or maybe it is worth at least connecting them with css variable
There was a problem hiding this comment.
@Dosant I added variables for the sizes and added a comment about it also being set in the tsx file.
I don't think there is way to read the variables from the scss file in the tsx file at compile time without configuration changes. But if I'm wrong about that let me know.
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
7 participants
Summary
This PR updates the Kibana
SolutionNavcomponent to set a global CSS variable--kbnSolutionNavOffsetwith it's current width. This is modeled off of the EUI CSS variable--euiCollapsibleNavOffsetthat can be used in Serverless to get the current width of the side nav.This will be used by the embedded dev console to ensure it is not rendered over the page side navigation, at least for pages that use the
KibanaPageTemplate&SolutionNav.Testing
The easiest way to verify this change is to check the values of
--kbnSolutionNavOffsetin the browser console, which can be done with the following command:getComputedStyle(document.documentElement).getPropertyValue('--kbnSolutionNavOffset')You can check this with the solution nav open and closed or on pages without a solution nav at all (
/app/homefor example)