fix(SideNavigation): fix tooltip support (#156)

MarcusNotheis · Lukas742 · commit 72cced39efa0 · 2019-09-26T12:12:12.000+02:00
closes #155
diff --git a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx
@@ -15,7 +15,7 @@ describe('SideNavigation', () => {
           <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
         ]}
       >
-        <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
+        <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" tooltip="Nav To Home Tooltip" />
         <SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
         <SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
         <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
diff --git a/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap b/packages/main/src/components/SideNavigation/__snapshots__/SideNavigation.test.tsx.snap
@@ -88,6 +88,7 @@ exports[`SideNavigation Collapsed 1`] = `
             data-id="sales-opportunities"
             data-parent-id="sales"
             info-state="None"
+            title="My Opportunities"
             type="Active"
           >
             My Opportunities
@@ -98,6 +99,7 @@ exports[`SideNavigation Collapsed 1`] = `
             data-parent-id="sales"
             info-state="None"
             selected="true"
+            title="My Leads"
             type="Active"
           >
             My Leads
@@ -107,6 +109,7 @@ exports[`SideNavigation Collapsed 1`] = `
             data-id="sales-cpqs"
             data-parent-id="sales"
             info-state="None"
+            title="My CPQS"
             type="Active"
           >
             My CPQS
@@ -255,6 +258,7 @@ exports[`SideNavigation Condensed 1`] = `
             data-id="sales-opportunities"
             data-parent-id="sales"
             info-state="None"
+            title="My Opportunities"
             type="Active"
           >
             My Opportunities
@@ -265,6 +269,7 @@ exports[`SideNavigation Condensed 1`] = `
             data-parent-id="sales"
             info-state="None"
             selected="true"
+            title="My Leads"
             type="Active"
           >
             My Leads
@@ -274,6 +279,7 @@ exports[`SideNavigation Condensed 1`] = `
             data-id="sales-cpqs"
             data-parent-id="sales"
             info-state="None"
+            title="My CPQS"
             type="Active"
           >
             My CPQS
@@ -350,6 +356,7 @@ exports[`SideNavigation Expanded 1`] = `
       class="SideNavigationListItem--listItem-"
       data-has-children="false"
       data-id="home"
+      title="Nav To Home Tooltip"
       type="Active"
     >
       <ui5-icon
diff --git a/packages/main/src/components/SideNavigation/demo.stories.tsx b/packages/main/src/components/SideNavigation/demo.stories.tsx
@@ -17,11 +17,16 @@ export const defaultStory = () => (
       <SideNavigationListItem id="footer2" text="Useful Links" icon="sap-icon://chain-link" />
     ]}
   >
-    <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
+    <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" tooltip="Nav To Home" />
     <SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />
     <SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />
-    <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">
-      <SideNavigationListItem text="My Opportunities" icon="sap-icon://home" id="sales-opportunities" />
+    <SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales" tooltip="Sales">
+      <SideNavigationListItem
+        text="My Opportunities"
+        icon="sap-icon://home"
+        id="sales-opportunities"
+        tooltip="sales-opportunities"
+      />
       <SideNavigationListItem text="My Leads" icon="sap-icon://home" id="sales-leads" />
       <SideNavigationListItem text="My CPQS" icon="sap-icon://home" id="sales-cpqs" />
     </SideNavigationListItem>
diff --git a/packages/main/src/components/SideNavigation/index.tsx b/packages/main/src/components/SideNavigation/index.tsx
@@ -25,7 +25,7 @@ const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof sideNavigati
 });
 
 const SideNavigation: FC<SideNavigationProps> = forwardRef((props: SideNavigationProps, ref: Ref<HTMLDivElement>) => {
-  const { children, openState, footerItems, selectedId, onItemSelect, noIcons, style, className } = props;
+  const { children, openState, footerItems, selectedId, onItemSelect, noIcons, style, className, tooltip } = props;
 
   const classes = useStyles();
 
@@ -85,7 +85,7 @@ const SideNavigation: FC<SideNavigationProps> = forwardRef((props: SideNavigatio
   );
 
   return (
-    <div ref={ref} className={sideNavigationClasses.valueOf()} style={style}>
+    <div ref={ref} className={sideNavigationClasses.valueOf()} style={style} title={tooltip}>
       <List onItemClick={onListItemSelected}>
         {Children.map(children, (child: any) =>
           cloneElement(child, {
diff --git a/packages/main/src/components/SideNavigationListItem/index.tsx b/packages/main/src/components/SideNavigationListItem/index.tsx
@@ -91,11 +91,13 @@ const SideNavigationListItem: FC<SideNavigationListItemProps> = forwardRef(
 
     return (
       <>
+        {/*
+          // @ts-ignore */}
         <CustomListItem
           selected={isSelfSelected || hasSelectedChild}
           ref={ref}
           className={listItemClasses.valueOf()}
-          tooltip={tooltip}
+          title={tooltip}
           slot={slot}
           style={style}
           data-id={id}
@@ -112,16 +114,20 @@ const SideNavigationListItem: FC<SideNavigationListItemProps> = forwardRef(
               openBy={<Icon src={icon} className={classes.icon} />}
             >
               <List>
-                <StandardListItem selected={isSelfSelected} data-id={id}>
+                {/*
+                // @ts-ignore */}
+                <StandardListItem selected={isSelfSelected} data-id={id} title={tooltip}>
                   {text}
                 </StandardListItem>
                 {validChildren.map((child: any, index) => {
                   return (
+                    // @ts-ignore
                     <StandardListItem
                       selected={props['selectedId'] === child.props.id}
                       key={index}
                       data-id={child.props.id}
                       data-parent-id={id}
+                      title={child.props.tooltip || child.props.text}
                     >
                       {child.props.text}
                     </StandardListItem>

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ describe('SideNavigation', () => {`
`15`	`15`	`<SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />`
`16`	`16`	`]}`
`17`	`17`	`>`
`18`		`- <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />`
	`18`	`+ <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" tooltip="Nav To Home Tooltip" />`
`19`	`19`	`<SideNavigationListItem text="Calendar" icon="sap-icon://calendar" id="calendar" />`
`20`	`20`	`<SideNavigationListItem text="Customers" icon="sap-icon://employee" id="customers" />`
`21`	`21`	`<SideNavigationListItem text="Sales" icon="sap-icon://lead" id="sales">`