From 09dc1aee3046625ba7c8031f7ed02493b7604652 Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Fri, 23 Sep 2022 15:46:23 -0700
Subject: [PATCH 1/4] feat(treenav): labels for navigation

---
 src/Components/TreeNav/TreeNav.scss    |  6 +++++-
 src/Components/TreeNav/TreeNavItem.tsx | 22 +++++++++++++++++++++-
 src/Styles/icon.scss                   |  2 +-
 src/Styles/variables.scss              |  2 +-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/Components/TreeNav/TreeNav.scss b/src/Components/TreeNav/TreeNav.scss
index 4bc899d0..1d58c9e1 100644
--- a/src/Components/TreeNav/TreeNav.scss
+++ b/src/Components/TreeNav/TreeNav.scss
@@ -32,7 +32,7 @@
   }
 }
 
-$cf-tree-nav__header-height: 60px;
+$cf-tree-nav__header-height: 70px;
 
 .cf-tree-nav--menu {
   position: absolute;
@@ -263,6 +263,9 @@ a.cf-tree-nav--item-block:active {
   &:focus {
     color: $cf-tree-nav__text-hover;
   }
+  margin-left: 5px;
+  //display: flex;
+  //justify-content: center;
 }
 
 .cf-tree-nav--square {
@@ -271,6 +274,7 @@ a.cf-tree-nav--item-block:active {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 
   .cf-icon {
     font-size: 1.5em;
diff --git a/src/Components/TreeNav/TreeNavItem.tsx b/src/Components/TreeNav/TreeNavItem.tsx
index 2606acf0..805d4da2 100644
--- a/src/Components/TreeNav/TreeNavItem.tsx
+++ b/src/Components/TreeNav/TreeNavItem.tsx
@@ -20,6 +20,8 @@ export interface TreeNavItemProps extends Omit<StandardFunctionProps, 'id'> {
   active?: boolean
   /** Optional link element. Will override onClick prop */
   linkElement?: RenderLinkElement
+
+  isTreeNavCollapsed?: boolean
 }
 
 export type TreeNavItemRef = HTMLButtonElement
@@ -37,6 +39,8 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
       children = null,
       className,
       linkElement,
+      shortLabel,
+      isTreeNavCollapsed = true,
     },
     ref
   ) => {
@@ -54,7 +58,21 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
     if (linkElement) {
       const linkItems = (
         <>
-          <div className="cf-tree-nav--square">{icon}</div>
+          <div className="cf-tree-nav--square">
+            {icon}
+            {isTreeNavCollapsed && (
+              <span
+                style={{
+                  fontSize: '9px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+                className={'cf-tree-nav--short-label'}
+              >
+                {shortLabel}
+              </span>
+            )}
+          </div>
           <div className="cf-tree-nav--label">{label}</div>
         </>
       )
@@ -64,6 +82,7 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
         linkItems
       )
 
+      console.log('hererrere')
       return (
         <div className={treeNavItemClass}>
           {link}
@@ -72,6 +91,7 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
       )
     }
 
+    console.log('n ot hrejoiajsodasdas mf')
     return (
       <div className={treeNavItemClass}>
         <button
diff --git a/src/Styles/icon.scss b/src/Styles/icon.scss
index c7e1c4ff..b6f55f10 100644
--- a/src/Styles/icon.scss
+++ b/src/Styles/icon.scss
@@ -29,7 +29,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   &.FolderOpen:before {
-    content: "\e956";
+    content: unquote('"\e956"');
   }
   &.Bill:before {
     content: '\e954';
diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index a57f85e6..1844ef19 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -372,7 +372,7 @@ $cf-overlay--mask-z: 10;
    -----------------------------------------------------------------------------
 */
 
-$cf-tree-nav__width: 60px;
+$cf-tree-nav__width: 70px;
 $cf-tree-nav__expanded-width: 260px;
 $cf-tree-nav__small-height: 44px;
 

From 487a384eead99464a13cab14a36d4b227412e1c1 Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Mon, 26 Sep 2022 09:51:17 -0700
Subject: [PATCH 2/4] chore: cleanup

---
 src/Components/TreeNav/TreeNav.scss    | 2 --
 src/Components/TreeNav/TreeNavItem.tsx | 2 --
 src/Styles/icon.scss                   | 2 +-
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Components/TreeNav/TreeNav.scss b/src/Components/TreeNav/TreeNav.scss
index 1d58c9e1..a40e1afe 100644
--- a/src/Components/TreeNav/TreeNav.scss
+++ b/src/Components/TreeNav/TreeNav.scss
@@ -264,8 +264,6 @@ a.cf-tree-nav--item-block:active {
     color: $cf-tree-nav__text-hover;
   }
   margin-left: 5px;
-  //display: flex;
-  //justify-content: center;
 }
 
 .cf-tree-nav--square {
diff --git a/src/Components/TreeNav/TreeNavItem.tsx b/src/Components/TreeNav/TreeNavItem.tsx
index 805d4da2..4c66d866 100644
--- a/src/Components/TreeNav/TreeNavItem.tsx
+++ b/src/Components/TreeNav/TreeNavItem.tsx
@@ -82,7 +82,6 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
         linkItems
       )
 
-      console.log('hererrere')
       return (
         <div className={treeNavItemClass}>
           {link}
@@ -91,7 +90,6 @@ export const TreeNavItem = forwardRef<TreeNavItemRef, TreeNavItemProps>(
       )
     }
 
-    console.log('n ot hrejoiajsodasdas mf')
     return (
       <div className={treeNavItemClass}>
         <button
diff --git a/src/Styles/icon.scss b/src/Styles/icon.scss
index b6f55f10..c7e1c4ff 100644
--- a/src/Styles/icon.scss
+++ b/src/Styles/icon.scss
@@ -29,7 +29,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   &.FolderOpen:before {
-    content: unquote('"\e956"');
+    content: "\e956";
   }
   &.Bill:before {
     content: '\e954';

From 3b897a7e07e4ddaf7c538b0faa5dc608b8ba9d82 Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Mon, 26 Sep 2022 09:54:03 -0700
Subject: [PATCH 3/4] chore: delete newline

---
 src/Components/TreeNav/TreeNavItem.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Components/TreeNav/TreeNavItem.tsx b/src/Components/TreeNav/TreeNavItem.tsx
index 4c66d866..8581f1fd 100644
--- a/src/Components/TreeNav/TreeNavItem.tsx
+++ b/src/Components/TreeNav/TreeNavItem.tsx
@@ -20,7 +20,6 @@ export interface TreeNavItemProps extends Omit<StandardFunctionProps, 'id'> {
   active?: boolean
   /** Optional link element. Will override onClick prop */
   linkElement?: RenderLinkElement
-
   isTreeNavCollapsed?: boolean
 }
 

From c2db110cd8c7592c3a997593dad9a191b17fdbc7 Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Mon, 26 Sep 2022 10:24:48 -0700
Subject: [PATCH 4/4] version + CHANGELOG

---
 CHANGELOG.md | 4 ++++
 package.json | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db4d6bcf..5626ba9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+### 6.3.7 (2022-09-26)
+
+- [842](https://github.com/influxdata/clockface/pull/842): Labels for Navigation Icons
+
 ### 6.3.6 (2022-09-22)
 
 - [841](https://github.com/influxdata/clockface/pull/841): Inject @charset: UTF-8 into built CSS
diff --git a/package.json b/package.json
index d120e859..2968a337 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/clockface",
-  "version": "6.3.6",
+  "version": "6.3.7",
   "license": "MIT",
   "main": "dist/index.js",
   "style": "dist/index.css",