fix(app-nav-bar): resolve forward ref error (uber#4475)

* fix(app-nav-bar): resolve forward ref error * fix(app-nav-bar): revert ref and add forwardRef to listItems Co-authored-by: Chase Starr <[email protected]>
ak06121991 · Aug 20, 2021 · f34d145 · f34d145
1 parent 29e35f4
commit f34d145
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 18 deletions.
diff --git a/src/app-nav-bar/__tests__/app-nav-bar-map-item-to-node.scenario.js b/src/app-nav-bar/__tests__/app-nav-bar-map-item-to-node.scenario.js
@@ -39,13 +39,13 @@ export default function Scenario() {
       mainItems={mainItems}
       userItems={userItems}
       mapItemToNode={item => (
-        <div
+        <span
           className={css({
             border: `dashed 2px ${item.info ? item.info.color : 'green'}`,
           })}
         >
           {item.info ? `color: ${item.info.color}` : item.label}
-        </div>
+        </span>
       )}
       onMainItemSelect={handleMainItemSelect}
     />

diff --git a/src/app-nav-bar/__tests__/app-nav-bar-overrides.scenario.js b/src/app-nav-bar/__tests__/app-nav-bar-overrides.scenario.js
@@ -15,6 +15,24 @@ import Overflow from '../../icon/overflow.js';
 
 import {AppNavBar, setItemActive} from '../index.js';
 
+const expandBorderStyles = str => {
+  const val = str.split(' ');
+  return {
+    borderTopColor: val[2],
+    borderRightColor: val[2],
+    borderBottomColor: val[2],
+    borderLeftColor: val[2],
+    borderTopStyle: val[0],
+    borderRightStyle: val[0],
+    borderBottomStyle: val[0],
+    borderLeftStyle: val[0],
+    borderTopWidth: val[1],
+    borderRightWidth: val[1],
+    borderBottomWidth: val[1],
+    borderLeftWidth: val[1],
+  };
+};
+
 export default function Scenario() {
   const [mainItems, setMainItems] = React.useState([
     {icon: Upload, label: 'Primary A'},
@@ -69,26 +87,39 @@ export default function Scenario() {
       usernameSubtitle="5.0"
       userImgUrl=""
       overrides={{
-        Root: {style: {border: 'dashed 2px red'}},
-        Spacing: {style: {border: 'dashed 2px orange'}},
-        AppName: {style: {border: 'dashed 2px yellow'}},
-        PrimaryMenuContainer: {style: {border: 'dashed 2px green'}},
-        MainMenuItem: {style: {border: 'dashed 2px blue'}},
-        SubnavContainer: {style: {border: 'dashed 2px purple'}},
-        SecondaryMenuContainer: {style: {border: 'dashed 2px lightskyblue'}},
+        Root: {style: {...expandBorderStyles('dashed 2px red')}},
+        Spacing: {style: {...expandBorderStyles('dashed 2px orange')}},
+        AppName: {style: {...expandBorderStyles('dashed 2px yellow')}},
+        PrimaryMenuContainer: {
+          style: {...expandBorderStyles('dashed 2px green')},
+        },
+        MainMenuItem: {style: {...expandBorderStyles('dashed 2px blue')}},
+        SubnavContainer: {style: {...expandBorderStyles('dashed 2px purple')}},
+        SecondaryMenuContainer: {
+          style: {...expandBorderStyles('dashed 2px lightskyblue')},
+        },
         SideMenuButton: {
           props: {
             overrides: {
               BaseButton(props) {
-                return <button {...props}>menu</button>;
+                console.log(props);
+                return <button onClick={props.onClick}>menu</button>;
               },
             },
           },
         },
-        UserMenuProfileListItem: {style: {border: 'solid 2px red'}},
-        UserProfileInfoContainer: {style: {border: 'solid 2px blue'}},
-        UserProfilePictureContainer: {style: {border: 'solid 2px green'}},
-        UserProfileTileContainer: {style: {border: 'solid 2px purple'}},
+        UserMenuProfileListItem: {
+          style: {...expandBorderStyles('solid 2px red')},
+        },
+        UserProfileInfoContainer: {
+          style: {...expandBorderStyles('solid 2px blue')},
+        },
+        UserProfilePictureContainer: {
+          style: {...expandBorderStyles('solid 2px green')},
+        },
+        UserProfileTileContainer: {
+          style: {...expandBorderStyles('solid 2px purple')},
+        },
       }}
     />
   );

diff --git a/src/app-nav-bar/mobile-menu.js b/src/app-nav-bar/mobile-menu.js
@@ -164,15 +164,16 @@ export default function MobileMenu(props: AppNavBarPropsT) {
           boxShadow: 'none',
         },
       },
-      ListItem(listItemProps) {
+      ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <MobileNavMenuItem
+            ref={ref}
             {...listItemProps}
             mapItemToNode={mapItemToNode}
             overrides={overrides}
           />
         );
-      },
+      }),
     },
     // $FlowFixMe
     menuProps.overrides,

diff --git a/src/app-nav-bar/user-menu.js b/src/app-nav-bar/user-menu.js
@@ -94,14 +94,15 @@ export default function UserMenuComponent(props: {|
         )),
         style: {width: MENU_ITEM_WIDTH},
       },
-      ListItem(listItemProps) {
+      ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <UserMenuListItem
+            ref={ref}
             {...listItemProps}
             mapItemToNode={props.mapItemToNode}
           />
         );
-      },
+      }),
     },
     // $FlowFixMe
     userMenuProps.overrides,