From 958d057a2a60d420135af8c3dead1f41e5e5f209 Mon Sep 17 00:00:00 2001 From: James Dow Date: Thu, 22 Oct 2020 16:10:21 -0500 Subject: [PATCH] fix(megamenu): added protection to fix layout problem --- .../__snapshots__/storyshots.test.js.snap | 2722 +++++++++-------- .../MastheadMegaMenu/CategoryGroup.js | 34 +- .../masthead/_masthead-megamenu.scss | 17 +- 3 files changed, 1446 insertions(+), 1327 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index a5d69e36444..66b842f22bc 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -51753,77 +51753,85 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` className="bx--masthead__megamenu__category-group" >
-

- Link 1 -

-
- - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - +
+

+ Link 1 +

+
+ + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 + + + + @@ -52036,77 +52044,85 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = ` className="bx--masthead__megamenu__category-group" >
-

- Link 2 -

-
- - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - +
+

+ Link 2 +

+
+ + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 + + + + -
- - - - Financing - - - + - - - - - + + Financing + + + + + + + + + + +
+ + + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 - + - - - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - + @@ -52542,122 +52566,130 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
-
- - - - IBM Developer - - - + - - - - - + + IBM Developer + + + + + + + + + + +
+ + + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 - +
- - - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - + -
- - - - Blockchain - - - + - - - - - + + Blockchain + + + + + + + + + + +
+ + + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 - + - - - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - + -
- - - - Containers - - - + - - - - - + + Containers + + + + + + + + + + +
+ + + + Code patterns + + + + + Tutorials - + + + + Events + + - - - - Code patterns - - - - - Tutorials - - - - - Events - - + -
- - - - Analytics - - - - - - - - + + + + Analytics + + + + + + + + + + +
+ + + + Code patterns - + + + + Tutorials + + + + + Events + + + + + Developer community + + - - - - Code patterns - - - - - Tutorials - - - - - Events - - - - - Developer community - - + @@ -102746,77 +102802,85 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` className="bx--masthead__megamenu__category-group" >
-

- Link 1 -

-
- - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - +
+

+ Link 1 +

+
+ + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 + + + + @@ -103029,77 +103093,85 @@ exports[`Storyshots Components|Masthead With L 1 1`] = ` className="bx--masthead__megamenu__category-group" >
-

- Link 2 -

-
- - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - +
+

+ Link 2 +

+
+ + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 + + + + -
- - - - Financing - - - + - - - - - + + Financing + + + + + + + + + + +
+ + + + Subnav 1 + + + + + Subnav 2 - + + + + Subnav 3 + + + + + Subnav 4 + + - - - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - + @@ -103535,122 +103615,130 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
-
- - - - IBM Developer - - - + - - - - - + + IBM Developer + + + + + + + + + + +
+ + + + Subnav 1 - + + + + Subnav 2 + + + + + Subnav 3 + + + + + Subnav 4 + +
- - - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - + -
- - - - Blockchain - - - + - - - - - + + Blockchain + + + + + + + + + + +
+ + + + Subnav 1 + + + + + Subnav 2 + + + + + Subnav 3 - + + + + Subnav 4 + + - - - - Subnav 1 - - - - - Subnav 2 - - - - - Subnav 3 - - - - - Subnav 4 - - + -
- - - - Containers - - - + - - - - - + + Containers + + + + + + + + + + +
+ + + + Code patterns + + + + + Tutorials - + + + + Events + + - - - - Code patterns - - - - - Tutorials - - - - - Events - - + -
- - - - Analytics - - - + - - - - - + + Analytics + + + + + + + + + + +
+ + + + Code patterns + + + + + Tutorials + + + + + Events + + + + + Developer community - + - - - - Code patterns - - - - - Tutorials - - - - - Events - - - - - Developer community - - + diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js b/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js index 74681507b45..73c30b9bfc7 100644 --- a/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js +++ b/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js @@ -18,22 +18,26 @@ const { prefix } = settings; */ const CategoryGroup = ({ href, title, children, ...rest }) => (
- {href ? ( - - {title} - - - ) : ( -
-

{title}

+
+
+ {href ? ( + + {title} + + + ) : ( +
+

{title}

+
+ )} + {children}
- )} - {children} +
); diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss index 09598895fa7..a0b757f93d2 100644 --- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss +++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss @@ -111,8 +111,8 @@ } .#{$prefix}--masthead__megamenu__categories { - column-count: 4; padding: 0 0 $layout-03 $layout-01; + column-count: 4; .#{$prefix}--masthead__megamenu__container--hasHighlights & { column-count: 3; @@ -127,15 +127,17 @@ } .#{$prefix}--masthead__megamenu__category-group { - display: flex; - flex-direction: column; - padding-bottom: $spacing-07; - overflow: hidden; - break-inside: avoid-column; + display: inline; - .#{$prefix}--masthead__megamenu__categories-section & { + .#{$prefix}--masthead__megamenu__categories-section &-shield { margin-left: -1rem; } + + &-content { + width: 100%; + display: inline-block; + padding-bottom: $spacing-07; + } } .#{$prefix}--masthead__megamenu__category-headline { @@ -174,6 +176,7 @@ color: $text-02; text-decoration: none; padding: 7px $spacing-05; + display: block; &:hover, &:active {