From 27c3d688a213ad412358ad8144d455214f4ef007 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 25 Apr 2023 21:36:59 -0400 Subject: [PATCH 1/9] [CollapsibleNav] Add a styling condition to ensure that Collapsible Nav Group items can be seen and interacted with when the screen is very small or the browser is using a high zoom level --- .../src/ui/header/collapsible_nav.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index 5f84863ad7309..ee85d49eff45d 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -24,3 +24,19 @@ text-decoration: underline; /* 2 */ } } + +/** + * Allows the CollapsibleNavGroups to be viewed on + * very small screen sizes and when the browser Zoom is high + */ +@media (max-height: 15em) { + .euiCollapsibleNav { + overflow-y: auto; + + & > .euiFlexItem.eui-yScroll { + flex-shrink: 0; + flex-grow: 1; + flex-basis: auto; + } + } +} From 0b570c0b9472b83dec206063b7b53d613e2795ae Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 27 Apr 2023 09:42:52 -0400 Subject: [PATCH 2/9] [PR Comments] Create an target specific classes for the KbnSolutionsCollapsibleNav --- .../src/ui/header/collapsible_nav.scss | 13 +++++++------ .../src/ui/header/collapsible_nav.tsx | 3 ++- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index ee85d49eff45d..6763d35d90161 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -1,3 +1,5 @@ +$screenHeightBreakpoint: 15em; + .kbnCollapsibleNav__recentsListGroup { @include euiYScroll; max-height: $euiSize * 10; @@ -29,14 +31,13 @@ * Allows the CollapsibleNavGroups to be viewed on * very small screen sizes and when the browser Zoom is high */ -@media (max-height: 15em) { - .euiCollapsibleNav { +@media (max-height: $screenHeightBreakpoint) { + .kbnCollapsibleNav { overflow-y: auto; - & > .euiFlexItem.eui-yScroll { - flex-shrink: 0; - flex-grow: 1; - flex-basis: auto; + .kbnCollapsibleNav__solutions { + @include euiYScroll; + flex: 1 0 auto; } } } diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx index 2d9d88d9a461b..886ae8599c806 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.tsx @@ -161,6 +161,7 @@ export function CollapsibleNav({ button={button} ownFocus={false} size={248} + className="kbnCollapsibleNav" > {customNavLink && ( <> @@ -280,7 +281,7 @@ export function CollapsibleNav({ - + {/* Kibana, Observability, Security, and Management sections */} {orderedCategories.map((categoryName) => { const category = categoryDictionary[categoryName]!; From 3e633c9885fcc4bca9f4e9047df759c2d391d10d Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 27 Apr 2023 09:57:11 -0400 Subject: [PATCH 3/9] Update snapshot for collapsible nav. New class names were added to elements within this PR --- .../src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap index 38c5a7fdf4854..d32e7d27d6f16 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap @@ -216,7 +216,7 @@ Array [ class="euiHorizontalRule euiHorizontalRule--full emotion-euiHorizontalRule-full" />
} + className="kbnCollapsibleNav" data-test-subj="collapsibleNav" id="collapsibe-nav" isOpen={false} @@ -1048,6 +1049,7 @@ exports[`CollapsibleNav renders the default nav 2`] = ` } + className="kbnCollapsibleNav" data-test-subj="collapsibleNav" id="collapsibe-nav" isOpen={false} From 09dd287b5428ffe073f5b0ced6c2d0b57c114129 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 27 Apr 2023 11:56:43 -0400 Subject: [PATCH 4/9] Added the euiYScroll utility that was removed --- .../src/ui/header/collapsible_nav.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index 6763d35d90161..3722e309e41fe 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -6,6 +6,10 @@ $screenHeightBreakpoint: 15em; margin-right: -$euiSizeS; } +.kbnCollapsibleNav__solutions { + @include euiYScroll; +} + /** * 1. Increase the hit area of the link (anchor) * 2. Only show the text underline when hovering on the text/anchor portion @@ -27,6 +31,7 @@ $screenHeightBreakpoint: 15em; } } + /** * Allows the CollapsibleNavGroups to be viewed on * very small screen sizes and when the browser Zoom is high @@ -36,7 +41,6 @@ $screenHeightBreakpoint: 15em; overflow-y: auto; .kbnCollapsibleNav__solutions { - @include euiYScroll; flex: 1 0 auto; } } From 6d6308a1ed7e7b63dbc0e732d91784a36e49d8b4 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 27 Apr 2023 12:17:08 -0400 Subject: [PATCH 5/9] Lint --- .../src/ui/header/collapsible_nav.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index 3722e309e41fe..73793a5620610 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -31,7 +31,6 @@ $screenHeightBreakpoint: 15em; } } - /** * Allows the CollapsibleNavGroups to be viewed on * very small screen sizes and when the browser Zoom is high From cddd6918ade49b23cb4bac2670eef1cee546cd06 Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Thu, 27 Apr 2023 12:35:51 -0400 Subject: [PATCH 6/9] Update packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- .../src/ui/header/collapsible_nav.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index 73793a5620610..ada5589f8ce6e 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -8,6 +8,14 @@ $screenHeightBreakpoint: 15em; .kbnCollapsibleNav__solutions { @include euiYScroll; + + /** + * Allows the solutions nav group to be viewed on + * very small screen sizes and when the browser Zoom is high + */ + @media (max-height: $screenHeightBreakpoint) { + flex: 1 0 auto; + } } /** From 6634af58a4ffd559b7cc096b3e6437bfc35bc7ae Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Thu, 27 Apr 2023 12:36:14 -0400 Subject: [PATCH 7/9] Update packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- .../src/ui/header/collapsible_nav.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index ada5589f8ce6e..07182e0b62cd7 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -1,5 +1,11 @@ $screenHeightBreakpoint: 15em; +.kbnCollapsibleNav { + @media (max-height: $screenHeightBreakpoint) { + overflow-y: auto; + } +} + .kbnCollapsibleNav__recentsListGroup { @include euiYScroll; max-height: $euiSize * 10; From eb37be6750d88e107fe3e1d9325053af662d2274 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Thu, 27 Apr 2023 12:39:05 -0400 Subject: [PATCH 8/9] Reorganize Sass per PR feedback --- .../src/ui/header/collapsible_nav.scss | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index 07182e0b62cd7..327f57434366a 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -44,17 +44,3 @@ $screenHeightBreakpoint: 15em; text-decoration: underline; /* 2 */ } } - -/** - * Allows the CollapsibleNavGroups to be viewed on - * very small screen sizes and when the browser Zoom is high - */ -@media (max-height: $screenHeightBreakpoint) { - .kbnCollapsibleNav { - overflow-y: auto; - - .kbnCollapsibleNav__solutions { - flex: 1 0 auto; - } - } -} From 22a4857c60ef930f6ab67f0041e07c02fe6dfa3a Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Thu, 27 Apr 2023 14:21:28 -0400 Subject: [PATCH 9/9] Update packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- .../src/ui/header/collapsible_nav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss index 327f57434366a..a121ac4c02b25 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/collapsible_nav.scss @@ -1,4 +1,4 @@ -$screenHeightBreakpoint: 15em; +$screenHeightBreakpoint: $euiSize * 15; .kbnCollapsibleNav { @media (max-height: $screenHeightBreakpoint) {