feat: update dock styles

abelflopes · Jun 22, 2024 · ab78d42 · ab78d42
1 parent 24eb95e
commit ab78d42
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/packages/components/_provisional/src/dock/Dock.tsx b/packages/components/_provisional/src/dock/Dock.tsx
@@ -5,11 +5,13 @@ import { DockContext, type DockContextProps } from "./context";
 import { DockItem } from "./DockItem";
 import { DockMainItem } from "./DockMainItem";
 import { ScrollableContainer } from "../scrollable-container";
+import { Divider } from "@react-ck/divider";
 
 interface DockProps extends React.HTMLAttributes<HTMLElement> {
   header?: React.ReactNode;
   footer?: React.ReactNode;
   expanded?: boolean;
+  skin?: "default" | "shadowed";
 }
 
 // TODO: add a11y https://react.dev/reference/react-dom/createPortal#rendering-a-dock-dialog-with-a-portal
@@ -20,6 +22,7 @@ const Dock = ({
   expanded = false,
   children,
   className,
+  skin = "default",
   ...otherProps
 }: Readonly<DockProps>): React.ReactNode => {
   const contextValue = useMemo<DockContextProps>(
@@ -31,7 +34,7 @@ const Dock = ({
 
   return (
     <DockContext.Provider value={contextValue}>
-      <nav className={classNames(styles.root, className)} {...otherProps}>
+      <nav className={classNames(styles.root, styles[`skin_${skin}`], className)} {...otherProps}>
         {header ? <div className={styles.header}>{header}</div> : null}
         <ScrollableContainer className={styles.content}>{children}</ScrollableContainer>
         {footer ? <div className={styles.footer}>{footer}</div> : null}

diff --git a/packages/components/_provisional/src/dock/DockItem.tsx b/packages/components/_provisional/src/dock/DockItem.tsx
@@ -23,7 +23,7 @@ export const DockItem = ({
     <Button
       className={classNames(styles.root, expanded && styles.expanded, className)}
       size={expanded ? "m" : "l"}
-      skin={active ? "primary" : "ghost"}
+      skin={active ? "secondary" : "ghost"}
       title={expanded ? undefined : label}
       icon={icon}
       {...otherProps}>

diff --git a/packages/components/_provisional/src/dock/DockMainItem.tsx b/packages/components/_provisional/src/dock/DockMainItem.tsx
@@ -22,7 +22,7 @@ export const DockMainItem = ({
       className={classNames(styles.root, expanded && styles.expanded, className)}
       title={expanded ? undefined : label}
       {...otherProps}>
-      <Avatar name={label} image={image} />
+      <Avatar name={label} image={image} skin="square" />
 
       {expanded ? label : null}
     </span>

diff --git a/packages/components/_provisional/src/dock/styles/dock-item.module.scss b/packages/components/_provisional/src/dock/styles/dock-item.module.scss
@@ -1,8 +1,6 @@
 @import "@react-ck/theme";
 
 .root {
-  border-radius: get-spacing(1);
-
   &.expanded {
     justify-content: flex-start;
   }

diff --git a/packages/components/_provisional/src/dock/styles/dock.module.scss b/packages/components/_provisional/src/dock/styles/dock.module.scss
@@ -1,10 +1,9 @@
-@a "@react-ck/theme";
+@import "@react-ck/theme";
 
 .root {
   display: flex;
   height: 100%;
   flex-direction: column;
-  border-right: solid get-css-var(spacing, border) get-color(neutral-light-2);
 }
 
 .header {
@@ -34,3 +33,12 @@
   flex-grow: 1;
   flex-shrink: 1;
 }
+
+.skin_default {
+  border-right: solid get-css-var(spacing, border) get-color(neutral-light-2);
+}
+
+.skin_shadowed {
+  border-radius: get-spacing(1);
+  box-shadow: 0px 1px 3px 0px #00000029;
+}