HELP-8072 & HELP-8071 action menu tooltip fixes (#336)

Author: KitoC

lib/components/ActionsMenu/index.js

@@ -335,10 +335,7 @@ export const ActionsMenuBody = ({
   );
 
   if (customTriggerComponent) {
-    triggerComponent = React.cloneElement(customTriggerComponent, {
-      ...triggerProps,
-      ...(customTriggerComponent?.props || {})
-    });
+    triggerComponent = <div {...triggerProps}>{customTriggerComponent}</div>;
   }
 
   const value = useMemo(

lib/components/Popover/index.js

@@ -87,6 +87,7 @@ const StyledPopover = styled.div`
     height: 0;
     width: 0;
     padding: 0;
+    overflow: hidden;
   }
 
   &.visible {
@@ -350,8 +351,12 @@ export default function Popover({
   );
 
   const floatingProps = useMemo(
-    () => getFloatingProps(props),
-    [getFloatingProps, props]
+    () =>
+      getFloatingProps({
+        ...props,
+        className: `${props.className} ${visiblePopoverClassName}`
+      }),
+    [getFloatingProps, props, visiblePopoverClassName]
   );
 
   return (

lib/components/SideNav/SideNav.stories.js

@@ -5,11 +5,10 @@ import {
   BrowserRouter as Router,
   Route,
   Link,
-  useLocation,
-  matchPath,
-  Switch,
-  Redirect,
-  useParams
+  Routes,
+  useParams,
+  useMatch,
+  Navigate
 } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
@@ -63,46 +62,48 @@ const PageCard = ({ children }) => {
 };
 
 const SideBarWithConfig = () => {
-  const location = useLocation();
+  const isHome = useMatch("/");
+  const isProfile = useMatch("/profile");
+  const isSearch = useMatch("/search");
 
   const items = [
     {
       iconName: "building",
       name: "Home",
       component: makeLinkComponent("/"),
       actionType: "link",
-      isActive: matchPath(location.pathname, { path: "/", exact: true })
+      isActive: !!isHome
     },
     {
       iconName: "user",
       name: "My profile",
       component: makeLinkComponent("/profile"),
       actionType: "link",
-      isActive: matchPath(location.pathname, { path: "/profile" })
+      isActive: !!isProfile
     },
     {
       iconName: "id-card",
       name: "Search Page",
       component: makeLinkComponent("/search"),
       actionType: "link",
-      isActive: matchPath(location.pathname, { path: "/search" })
+      isActive: isSearch
     },
     {
       iconName: "snowflake",
       name: "Filter",
-      hide: !matchPath(location.pathname, { path: "/search" }), // Specify hide if you want to hide this item
+      hide: !isSearch, // Specify hide if you want to hide this item
       component: makePanelComponent("Filter"),
       actionType: "component", // Use 'component' for a component
-      pageSpecific: matchPath(location.pathname, { path: "/search" }),
+      pageSpecific: isSearch,
       isExpandedByDefault: true
     },
     {
       iconName: "sun",
       name: "People",
-      hide: !matchPath(location.pathname, { path: "/profile" }), // Specify hide if you want to hide this item
+      hide: !isProfile, // Specify hide if you want to hide this item
       component: makePanelComponent("People"),
       actionType: "component", // Use 'component' for a component
-      pageSpecific: matchPath(location.pathname, { path: "/profile" }),
+      pageSpecific: isProfile,
       isExpandedByDefault: true
     },
     {
@@ -165,24 +166,34 @@ const SideBarWithConfig = () => {
   return (
     <Flex>
       <SideNav items={items} sideNavHeight="500px" />
-      <Switch>
-        <Route exact path="/">
-          <PageCard>
-            <div>Home</div>
-          </PageCard>
-        </Route>
-        <Route path="/profile">
-          <PageCard>
-            <div>Profile route</div>
-          </PageCard>
-        </Route>
-        <Route path="/teams/:teamId">
-          <PageCard>
-            <Teams />
-          </PageCard>
-        </Route>
-        <Redirect from="/iframe.html" to="/" />
-      </Switch>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <PageCard>
+              <div>Home</div>
+            </PageCard>
+          }
+        />
+        <Route
+          path="/profile"
+          element={
+            <PageCard>
+              <div>Profile route</div>
+            </PageCard>
+          }
+        />
+        <Route
+          path="/teams/:teamId"
+          element={
+            <PageCard>
+              <Teams />
+            </PageCard>
+          }
+        />
+
+        <Route path="/iframe.html" element={<Navigate to="/" replace />} />
+      </Routes>
     </Flex>
   );
 };

lib/components/SideNav/index.js

@@ -63,29 +63,11 @@ const SideNavItems = styled("div")((props) =>
   })
 );
 
-const PanelControlTooltip = styled(Popover)((props) =>
-  css({
-    alignSelf: "center",
-    position: props.hideExpandedControl ? "absolute" : "relative",
-    right: props.hideExpandedControl ? "r" : "initial",
-    top: "r",
-    display: props.hideExpandedControl ? "block" : "none !important",
-    borderTop: props.hideExpandedControl ? "none" : "solid 1px",
-    borderTopColor: themeGet("colors.greyLighter")(props),
-    paddingTop: props.hideExpandedControl ? "0" : "r",
-    width: props.hideExpandedControl ? "auto" : "100%",
-    justifyContent: "center",
-    "&:focus": {
-      outline: "0"
-    },
-    [`@media screen and (max-width: ${SMALL_SCREEN_BREAKPOINT}px)`]: {
-      border: "none"
-    },
-    "& .popoverText": {
-      marginTop: props.hideExpandedControl ? "0" : "s"
-    }
-  })
-);
+const PanelControlTooltip = styled(Popover)`
+  position: absolute;
+  right: ${themeGet("space.r")};
+  top: ${themeGet("space.r")};
+`;
 
 const PanelControl = styled("button")((props) =>
   css({
@@ -248,7 +230,11 @@ const SideNav = ({ items, sideNavHeight }) => {
       />
     );
 
-    if (item.pageSpecific && !orderedItems[index - 1].pageSpecific) {
+    if (
+      item.pageSpecific &&
+      !orderedItems[index - 1].pageSpecific &&
+      !isSmallScreen
+    ) {
       return (
         <>
           <Divider
@@ -286,7 +272,6 @@ const SideNav = ({ items, sideNavHeight }) => {
             <PanelControlTooltip
               width="80px"
               textAlign="center"
-              hideExpandedControl
               direction="left"
               text="Hide panel"
             >

lib/components/StyledLink/StyledLink.stories.js

@@ -3,7 +3,7 @@ import StyledLink from ".";
 import Box from "../Box";
 import Flex from "../Flex";
 import Spacer from "../Spacer";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 export default {
   title: "Components/StyledLink",
@@ -64,13 +64,19 @@ export const reactLink = () => (
         {route.label}
       </StyledLink>
     ))}
-    <Switch>
+    <Routes>
       {routes.map((route) => (
-        <Route key={route.path} path={route.path} exact={route.exact}>
-          <div style={{ padding: "100px" }}>ROUTE RENDERED: {route.label}</div>
-        </Route>
+        <Route
+          key={route.path}
+          path={route.path}
+          element={
+            <div style={{ padding: "100px" }}>
+              ROUTE RENDERED: {route.label}
+            </div>
+          }
+        />
       ))}
-    </Switch>
+    </Routes>
   </BrowserRouter>
 );
 reactLink.storyName = "Using react-router-dom";