fix(SideNavigation): Fix Rendering and Event Handling (#189)

SAP · Oct 18, 2019 · dc70d57 · dc70d57
1 parent 24b27e5
commit dc70d57
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 247 deletions.
diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px); display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
               class="TableColumnHeader--header-"
@@ -106,7 +106,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px); display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
               class="TableColumnHeader--header-"
@@ -186,7 +186,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px); display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
               class="TableColumnHeader--header-"
@@ -266,7 +266,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
               class="TableColumnHeader--header-"
@@ -536,7 +536,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px); display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
               class="TableColumnHeader--header-"
@@ -595,7 +595,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px); display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
               class="TableColumnHeader--header-"
@@ -654,7 +654,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px); display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; max-width: calc(100% - 16px);"
           >
             <div
               class="TableColumnHeader--header-"
@@ -713,7 +713,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
           class="AnalyticalTable--th-"
         >
           <div
-            style="width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden; display: inline-block;"
+            style="display: inline-block; width: 100%; font-weight: normal; cursor: pointer; height: 100%; overflow-x: hidden;"
           >
             <div
               class="TableColumnHeader--header-"

diff --git a/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap b/packages/main/src/components/FilterBar/__snapshots__/FilterBar.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FilterBar Hide Filter Bar 1`] = `
     class="FilterBar--filterBarHeader-"
   >
     <div
-      style="pointer-events: auto; display: inline-block;"
+      style="display: inline-block; pointer-events: auto;"
     >
       <div
         class="Variant-Management--VariantManagement-"
@@ -172,7 +172,7 @@ exports[`FilterBar Render without crashing 1`] = `
     class="FilterBar--filterBarHeader-"
   >
     <div
-      style="pointer-events: auto; display: inline-block;"
+      style="display: inline-block; pointer-events: auto;"
     >
       <div
         class="Variant-Management--VariantManagement-"
@@ -325,7 +325,7 @@ exports[`FilterBar Select Filter Item 1`] = `
     class="FilterBar--filterBarHeader-"
   >
     <div
-      style="pointer-events: auto; display: inline-block;"
+      style="display: inline-block; pointer-events: auto;"
     >
       <div
         class="Variant-Management--VariantManagement-"

diff --git a/packages/main/src/components/SideNavigation/SideNavigation.jss.ts b/packages/main/src/components/SideNavigation/SideNavigation.jss.ts
@@ -15,7 +15,7 @@ export const sideNavigationStyles = ({ parameters }: JSSTheme) => ({
   },
 
   condensed: {
-    width: '2.75rem',
+    width: '3rem',
     '& $footerItemsSeparator': {
       marginLeft: '0.5rem',
       marginRight: '0.5rem'

diff --git a/packages/main/src/components/SideNavigation/SideNavigation.test.tsx b/packages/main/src/components/SideNavigation/SideNavigation.test.tsx
@@ -11,8 +11,8 @@ describe('SideNavigation', () => {
         openState={SideNavigationOpenState.Expandend}
         selectedId={'sales-leads'}
         footerItems={[
-          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
-          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+          <SideNavigationListItem id="1" text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem id="2" text="Useful Links" icon="sap-icon://chain-link" />
         ]}
       >
         <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" tooltip="Nav To Home Tooltip" />
@@ -36,8 +36,8 @@ describe('SideNavigation', () => {
         selectedId={'sales-leads'}
         noIcons
         footerItems={[
-          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
-          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+          <SideNavigationListItem id="1" text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem id="2" text="Useful Links" icon="sap-icon://chain-link" />
         ]}
       >
         <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
@@ -60,8 +60,8 @@ describe('SideNavigation', () => {
         openState={SideNavigationOpenState.Condensed}
         selectedId={'sales-leads'}
         footerItems={[
-          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
-          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+          <SideNavigationListItem id="1" text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem id="2" text="Useful Links" icon="sap-icon://chain-link" />
         ]}
       >
         <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />
@@ -83,8 +83,8 @@ describe('SideNavigation', () => {
         openState={SideNavigationOpenState.Collapsed}
         selectedId={'sales-leads'}
         footerItems={[
-          <SideNavigationListItem text="Legal Information" icon="sap-icon://compare" />,
-          <SideNavigationListItem text="Useful Links" icon="sap-icon://chain-link" />
+          <SideNavigationListItem id="1" text="Legal Information" icon="sap-icon://compare" />,
+          <SideNavigationListItem id="2" text="Useful Links" icon="sap-icon://chain-link" />
         ]}
       >
         <SideNavigationListItem text="Overview" icon="sap-icon://home" id="home" />