- Padding of sidebar menu is now done in the parent div, instead of e…

…ach element adding indent for itself. - Remove collapsible styling CSS, since it is not used any longer. - Items now have smaller font when in an expanded group.
StenaIT · Sep 7, 2023 · 94ffaa4 · 94ffaa4
1 parent eb13502
commit 94ffaa4
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 47 deletions.
diff --git a/packages/panels/src/components/nav-bar/NavBar.stories.tsx b/packages/panels/src/components/nav-bar/NavBar.stories.tsx
@@ -109,17 +109,6 @@ export const Demo: Story<Pick<NavBarProps, "variant">> = ({ variant }) => {
               label={"Contact"}
               onClick={() => alert("Click on contact")}
             />
-
-            <Box>
-              <Box spacing={8}>
-                <Icon
-                  icon={faPaperPlane}
-                  color={"var(--swui-white)"}
-                  size={50}
-                  data-hover={true}
-                />
-              </Box>
-            </Box>
           </SidebarMenu>
         </Column>
       </Drawer>

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenu.module.css
@@ -11,8 +11,6 @@
   --swui-sidebar-menu-background-selected-hover: var(--lhds-color-blue-200);
   --swui-sidebar-menu-background-selected-focus: var(--lhds-color-blue-200);
   --swui-sidebar-menu-background-selected-active: var(--lhds-color-blue-100);
-  --swui-sidebar-menu-content-padding: var(--swui-metrics-indent)
-    var(--swui-metrics-indent) var(--swui-metrics-indent) 0;
 
   /* State vars */
   --current-separator-color: var(--swui-sidebar-menu-separator-color);
@@ -39,8 +37,6 @@
     --swui-sidebar-menu-background-selected-active
   );
 
-  --current-content-padding: var(--swui-sidebar-menu-content-padding);
-
   /* Styling */
 
   background-color: var(--current-background-color);

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenu.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenu.tsx
@@ -1,4 +1,4 @@
-import { Box, BoxProps, Column, Indent, Space } from "@stenajs-webui/core";
+import { Box, BoxProps, Column, Space } from "@stenajs-webui/core";
 import cx from "classnames";
 import * as React from "react";
 import styles from "./SidebarMenu.module.css";
@@ -31,6 +31,7 @@ export const SidebarMenu: React.FC<SidebarMenuProps> = ({
 
   return (
     <Box
+      indent={2}
       className={cx(
         styles.sidebarMenu,
         collapsed ? styles.collapsed : null,
@@ -43,14 +44,12 @@ export const SidebarMenu: React.FC<SidebarMenuProps> = ({
       data-collapsed={collapsed || undefined}
       {...boxProps}
     >
-      <Space num={2} />
+      <Space num={1.5} />
 
       {!hideCloseButton && (
         <>
-          <Indent>
-            <SidebarMenuCloseButton onClick={onCloseClick} />
-          </Indent>
-          <Space num={2} />
+          <SidebarMenuCloseButton onClick={onCloseClick} />
+          <Space num={1.5} />
         </>
       )}
       <Box

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.module.css
@@ -1,23 +1,3 @@
-.sidebarMenuCollapsible {
-  --swui-collapsible-header-text-color: var(--current-text-color);
-  --swui-collapsible-header-background-color: var(--current-background-color);
-  --swui-collapsible-header-background-color-hover: var(
-    --current-background-color-hover
-  );
-  --swui-collapsible-header-background-color-active: var(
-    --current-background-color-active
-  );
-  --swui-collapsible-header-indicator-color: var(--current-text-color);
-  --swui-collapsible-header-indicator-color-collapsed: var(
-    --current-text-color
-  );
-  --swui-collapsible-header-indicator-color-hover: var(--current-text-color);
-  --swui-collapsible-header-padding: 0 calc(var(--swui-metrics-indent) * 2) 0 0;
-  --swui-collapsible-header-content-margin: 0;
-  --swui-collapsible-collapsible-link-padding: var(--swui-metrics-indent)
-    var(--swui-metrics-indent) var(--swui-metrics-indent)
-    calc(var(--swui-metrics-indent) * 4);
-  --swui-collapsible-header-border-color: transparent;
-
-  --swui-collapsible-min-height: var(--swui-sidebar-menu-item-height);
+.label {
+  font-size: var(--current-text-size, var(--swui-font-size-medium));
 }
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsible.tsx
@@ -4,6 +4,7 @@ import { Box, Indent, Row, Space, Text } from "@stenajs-webui/core";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { Icon } from "@stenajs-webui/elements";
 import contentStyles from "./SidebarMenuContent.module.css";
+import styles from "./SidebarMenuCollapsible.module.css";
 import cx from "classnames";
 import { faChevronUp } from "@fortawesome/free-solid-svg-icons/faChevronUp";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
@@ -45,7 +46,7 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
       background={"var(--current-background-color)"}
       aria-expanded={expanded}
     >
-      <Box indent={1} width={"100%"}>
+      <Box width={"100%"}>
         <Box
           width={"100%"}
           borderRadius={"99rem"}
@@ -75,7 +76,9 @@ export const SidebarMenuCollapsible: React.FC<SidebarMenuCollapsibleProps> = ({
                 ) : (
                   <Indent num={1} />
                 )}
-                <Text variant={"bold"}>{label}</Text>
+                <Text variant={"bold"} className={styles.label}>
+                  {label}
+                </Text>
               </Row>
               <Row>
                 <Icon

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsibleGroupBox.module.css b/packages/panels/src/components/sidebar-menu/SidebarMenuCollapsibleGroupBox.module.css
@@ -6,4 +6,6 @@
   flex-direction: column;
   padding-top: var(--swui-metrics-space);
   padding-bottom: var(--swui-metrics-space);
+
+  --current-text-size: var(--swui-font-size-small);
 }
diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuHeading.tsx
@@ -9,7 +9,7 @@ export const SidebarMenuHeading: React.FC<SidebarMenuHeadingProps> = ({
   label,
 }) => {
   return (
-    <Box height={"32px"} justifyContent={"center"} indent={2}>
+    <Box height={"32px"} justifyContent={"center"}>
       <Space />
       <Text variant={"overline"} size={"smaller"}>
         {label}

diff --git a/packages/panels/src/components/sidebar-menu/SidebarMenuLink.tsx b/packages/panels/src/components/sidebar-menu/SidebarMenuLink.tsx
@@ -83,7 +83,7 @@ export const SidebarMenuLink: React.FC<SidebarMenuLinkProps> = ({
   );
 
   return (
-    <Box indent={1} width={"100%"}>
+    <Box width={"100%"}>
       <Box width={"100%"} borderRadius={"99rem"} overflow={"hidden"}>
         {renderLink({
           ...buttonProps,