Merge pull request #414 from AppQuality/develop

Fix sidebar scrollable panel

src/stories/navigation/nav/nav-item/accordionItem.tsx

@@ -1,3 +1,4 @@
+import { retrieveComponentStyles } from "@zendeskgarden/react-theming";
 import styled from "styled-components";
 import { Accordion } from "../../../accordions";
 import { AccordionArgs } from "../../../accordions/_types";
@@ -6,11 +7,10 @@ import {
   sidebarNavItemHidden,
 } from "../../../theme/utils";
 import { NavItemArgs } from "./_types";
-import { retrieveComponentStyles } from "@zendeskgarden/react-theming";
 
 const NavAccordionItem = styled(Accordion)<AccordionArgs & NavItemArgs>`
   ${sidebarNavItemExpanded}
-  ${props => !props.isExpanded && sidebarNavItemHidden}
+  ${(props) => !props.isExpanded && sidebarNavItemHidden}
   order: 1;
   margin: ${({ theme }) => theme.space.xs} 0;
   padding-left: 8.5px;
@@ -21,20 +21,30 @@ const AccordionItemHeader = styled(Accordion.Header)<
 >`
   > svg {
     flex-shrink: 0;
-    
+
     &:first-of-type {
       margin: 0 8.5px;
     }
   }
 `;
 
-const AccordionItemPanel = styled(Accordion.Panel)<AccordionArgs & NavItemArgs>`
-  max-height: 180px;
-  overflow-y: auto;
+const CustomPanel = ({ children, ...props }: AccordionArgs & NavItemArgs) => {
+  return (
+    <Accordion.Panel {...props}>
+      <div className="panelContainer">{children}</div>
+    </Accordion.Panel>
+  );
+};
+
+const AccordionItemPanel = styled(CustomPanel)<AccordionArgs & NavItemArgs>`
+  .panelContainer {
+    height: 100%;
+    overflow-y: auto;
+  }
 `;
 
 const AccordionItemLabel = styled(Accordion.Label)<AccordionArgs & NavItemArgs>`
-  ${props => retrieveComponentStyles("text.primary", props)}
+  ${(props) => retrieveComponentStyles("text.primary", props)}
   font-weight: ${({ theme }) => theme.fontWeights.regular};
   padding: 0;
   margin: 0 8.5px;

yarn.lock

@@ -4328,7 +4328,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.1":
+"@types/hoist-non-react-statics@^3.3.1":
   version "3.3.5"
   resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
   integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
@@ -4571,15 +4571,6 @@
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
   integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
 
-"@types/styled-components@^5.1.23":
-  version "5.1.34"
-  resolved "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.34.tgz#4107df8ef8a7eaba4fa6b05f78f93fba4daf0300"
-  integrity sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    csstype "^3.0.2"
-
 "@types/[email protected]":
   version "4.2.5"
   resolved "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"