From d18f5be52d31e00396fd0e95c6f8bb08b79acb96 Mon Sep 17 00:00:00 2001
From: Dominik Brugger <dbrugger@de.ibm.com>
Date: Mon, 16 Aug 2021 18:02:00 +0200
Subject: [PATCH] fix(nav-item-link): remove fixed height to prevent issues
 with multi-line text

---
 .../scss/__snapshots__/styles-test.js.snap    |   3 +-
 src/components/Nav/Nav-story.js               | 121 ++++++++++++------
 src/components/Nav/_mixins.scss               |   3 +-
 3 files changed, 85 insertions(+), 42 deletions(-)

diff --git a/src/__tests__/scss/__snapshots__/styles-test.js.snap b/src/__tests__/scss/__snapshots__/styles-test.js.snap
index d4df51a0d..778e1b6c8 100644
--- a/src/__tests__/scss/__snapshots__/styles-test.js.snap
+++ b/src/__tests__/scss/__snapshots__/styles-test.js.snap
@@ -13553,9 +13553,8 @@ li.bx--accordion__item--disabled:last-of-type {
   transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
   position: relative;
   display: flex;
-  height: 2rem;
   align-items: center;
-  padding: 0.25rem 0.25rem 0.25rem 2.5rem;
+  padding: 0.5rem 0.25rem 0.5rem 2.5rem;
   color: var(--cds-text-01, #f4f4f4);
   cursor: pointer;
   text-decoration: none;
diff --git a/src/components/Nav/Nav-story.js b/src/components/Nav/Nav-story.js
index 64a54cd1e..27dbbb039 100644
--- a/src/components/Nav/Nav-story.js
+++ b/src/components/Nav/Nav-story.js
@@ -10,43 +10,88 @@ import React from 'react';
 import { components } from '../../../.storybook';
 import { Nav, NavItem, NavList } from '../..';
 
+import { commerce } from 'faker';
 const { name } = Nav;
 
-storiesOf(components(name), module).add(
-  'Default',
-  () => (
-    <div style={{ width: '300px' }}>
-      <Nav heading="Nav example" label={Nav}>
-        <NavList title="Nav list 1">
-          <NavItem key="navitem_1-1" element="span" customprop="uniqueValue">
-            Nav item 1-1 (with a custom element)
-          </NavItem>
-          <NavItem key="navitem_1-2" onClick={action('onClick')}>
-            Nav item 1-2
-          </NavItem>
-        </NavList>
-        <NavList title="Nav list 2 expanded on page load" isExpandedOnPageload>
-          <NavItem key="navitem_2-1" href="#navitem_2-1">
-            Nav item 2-1
-          </NavItem>
-          <NavItem key="navitem_2-2" href="#navitem_2-2">
-            Nav item 2-2
-          </NavItem>
-        </NavList>
-        <NavList title="Nav list 3">
-          <NavItem key="navitem_3-1" href="#navitem_3-1">
-            Nav item 3-1
-          </NavItem>
-          <NavItem key="navitem_3-2" href="https://www.ibm.com/">
-            Nav item that is an external link and wraps to a new line
-          </NavItem>
-        </NavList>
-      </Nav>
-    </div>
-  ),
-  {
-    info: {
-      text: `Basic implementation of the '${name}' component.`,
-    },
-  }
-);
+storiesOf(components(name), module)
+  .add(
+    'Default',
+    () => (
+      <div style={{ width: '300px' }}>
+        <Nav heading="Nav example" label="Navigation">
+          <NavList title="Nav list 1">
+            <NavItem key="navitem_1-1" element="span" customprop="uniqueValue">
+              Nav item 1-1 (with a custom element)
+            </NavItem>
+            <NavItem key="navitem_1-2" onClick={action('onClick')}>
+              Nav item 1-2
+            </NavItem>
+          </NavList>
+          <NavList
+            title="Nav list 2 expanded on page load"
+            isExpandedOnPageload>
+            <NavItem key="navitem_2-1" href="#navitem_2-1">
+              Nav item 2-1
+            </NavItem>
+            <NavItem key="navitem_2-2" href="#navitem_2-2">
+              Nav item 2-2
+            </NavItem>
+          </NavList>
+          <NavList title="Nav list 3">
+            <NavItem key="navitem_3-1" href="#navitem_3-1">
+              Nav item 3-1
+            </NavItem>
+            <NavItem key="navitem_3-2" href="https://www.ibm.com/">
+              Nav item that is an external link and wraps to a new line
+            </NavItem>
+          </NavList>
+        </Nav>
+      </div>
+    ),
+    {
+      info: {
+        text: `Basic implementation of the '${name}' component.`,
+      },
+    }
+  )
+  .add(
+    'Long NavItem test case',
+    () => (
+      <div style={{ width: '300px' }}>
+        <Nav heading="Nav example" label="Navigation">
+          <NavList title="Nav list 1">
+            <NavItem key="navitem_1-1" element="span" customprop="uniqueValue">
+              Nav item 1-1 (with a custom element)
+            </NavItem>
+            <NavItem key="navitem_1-2" onClick={action('onClick')}>
+              Nav item 1-2
+            </NavItem>
+          </NavList>
+          <NavList
+            title="Nav list 2 expanded on page load"
+            isExpandedOnPageload>
+            <NavItem key="navitem_2-1" href="#navitem_2-1">
+              Nav item 2-1 - {commerce.productName()} - {commerce.productName()}{' '}
+              - {commerce.productName()}
+            </NavItem>
+            <NavItem key="navitem_2-2" href="#navitem_2-2">
+              Nav item 2-2
+            </NavItem>
+          </NavList>
+          <NavList title="Nav list 3">
+            <NavItem key="navitem_3-1" href="#navitem_3-1">
+              Nav item 3-1
+            </NavItem>
+            <NavItem key="navitem_3-2" href="https://www.ibm.com/">
+              Nav item that is an external link and wraps to a new line
+            </NavItem>
+          </NavList>
+        </Nav>
+      </div>
+    ),
+    {
+      info: {
+        text: `Basic implementation of the '${name}' component.`,
+      },
+    }
+  );
diff --git a/src/components/Nav/_mixins.scss b/src/components/Nav/_mixins.scss
index 5e61e608f..338727f67 100644
--- a/src/components/Nav/_mixins.scss
+++ b/src/components/Nav/_mixins.scss
@@ -184,9 +184,8 @@
 
         position: relative;
         display: flex;
-        height: $carbon--spacing-07;
         align-items: center;
-        padding: $carbon--spacing-02 $carbon--spacing-02 $carbon--spacing-02
+        padding: $carbon--spacing-03 $carbon--spacing-02 $carbon--spacing-03
           $carbon--spacing-08;
         color: $text-01;
         cursor: pointer;