fix: review comments, added docs for disabled item

okta · Jul 8, 2024 · e872836 · e872836
1 parent 7949be0
commit e872836
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/SideNav.tsx b/packages/odyssey-react-mui/src/labs/SideNav.tsx
@@ -42,11 +42,8 @@ export type SideNavItem = {
    */
   endIcon?: ReactElement;
   /**
-   * Whether the item is expanded by default
-   */
-  isDefaultExpanded?: boolean;
-  /**
-   * Whether the item is disabled
+   * Whether the item is disabled. When set to true the nav item is set to Disabled color,
+   * the link/item is not clickable, and item with children is not expandable.
    */
   isDisabled?: boolean;
   /**
@@ -81,20 +78,27 @@ export type SideNavItem = {
       isSectionHeader: true;
       href?: never;
       children?: never;
+      isDefaultExpanded?: never;
     }
   | {
       /**
-       * href link of the nav item
+       * link added to the nav item. if it is undefined, static text will be displayed.
+       * fires onClick event when it is passed
        */
       href: string;
-      isSectionHeader?: never;
       children?: never;
+      isSectionHeader?: never;
+      isDefaultExpanded?: never;
     }
   | {
       /**
-       * An array of side nav items to be displayed as children of an Accordion
+       * An array of side nav items to be displayed as children within Accordion
        */
       children?: SideNavItem[];
+      /**
+       * Whether the with children (accordion) is expanded by default
+       */
+      isDefaultExpanded?: boolean;
       isSectionHeader?: never;
       href?: never;
     }
@@ -303,7 +307,7 @@ const SideNavListItemContainer = styled("li", {
   cursor: isDisabled ? "default" : "pointer",
   pointerEvents: isDisabled ? "none" : "auto",
   backgroundColor: isSelected ? odysseyDesignTokens.HueNeutral50 : "unset",
-  margin: "4px 0",
+  margin: `${odysseyDesignTokens.Spacing1} 0`,
   "&:last-child": {
     marginBottom: odysseyDesignTokens.Spacing2,
   },
@@ -324,7 +328,7 @@ const SideNavListItemContainer = styled("li", {
   "& a:focus-visible": {
     outlineOffset: 0,
     borderRadius: 0,
-    outlineWidth: "2px",
+    outlineWidth: odysseyDesignTokens.FocusOutlineWidthMain,
     backgroundColor: !isDisabled ? odysseyDesignTokens.HueNeutral50 : "inherit",
   },
 }));

diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/SideNav/SideNav.stories.tsx
@@ -97,9 +97,7 @@ const storybookMeta: Meta<SideNavProps> = {
         id: "AddNewFolder",
         label: "Add new folder",
         endIcon: <AddCircleIcon />,
-        onClick: () => {
-          console.log("adding new folder");
-        },
+        onClick: () => {},
       },
       {
         id: "item0-0",
@@ -173,7 +171,6 @@ const storybookMeta: Meta<SideNavProps> = {
         href: "/",
         label: "Applications",
         startIcon: <AppsIcon />,
-        isSelected: true,
       },
       {
         id: "item0-1-2",
@@ -250,6 +247,7 @@ const storybookMeta: Meta<SideNavProps> = {
           {
             id: "item4-2",
             href: "/",
+            isSelected: true,
             label: "Custom Domain",
             startIcon: <CloseIcon />,
             endIcon: <CopyIcon />,