feat(Tree): add shape prop and container padding (#1136)

Author: tenphi

.changeset/tree-padding-and-shape.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": minor
+---
+
+Added `shape` prop to `Tree` with `default` and `card` values for controlling border and radius. Added `containerPadding` prop for adjustable padding around the tree content via virtualizer configuration.

src/components/content/Tree/Tree.stories.tsx

@@ -142,6 +142,23 @@ const meta = {
     },
 
     /* Presentation */
+    shape: {
+      control: 'radio',
+      options: ['default', 'card'],
+      description: 'Visual shape of the tree container',
+      table: {
+        defaultValue: { summary: 'default' },
+        type: { summary: "'default' | 'card'" },
+      },
+    },
+    containerPadding: {
+      control: 'number',
+      description: 'Padding (px) around the tree content',
+      table: {
+        defaultValue: { summary: '4' },
+        type: { summary: 'number' },
+      },
+    },
     height: {
       control: 'number',
       description:
@@ -409,6 +426,13 @@ export const AutoExpandParent: Story = {
   render: AutoExpandParentRender,
 };
 
+export const CardShape: Story = {
+  args: {
+    shape: 'card',
+    defaultExpandedKeys: ['src', 'src/components'],
+  },
+};
+
 export const Empty: Story = {
   args: {
     treeData: [],
@@ -426,11 +450,10 @@ const WrappedFileIcon = () => (
 export const DirectoryTree: Story = {
   args: {
     selectionMode: 'none',
+    shape: 'card',
     defaultExpandedKeys: ['src', 'src/components'],
     styles: {
       width: '200px',
-      border: true,
-      radius: '1cr',
     },
     itemProps: (data, { isExpanded }) => {
       const isFolder = !!data.children;

src/components/content/Tree/Tree.tsx

@@ -116,6 +116,8 @@ function TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {
     isSelectable,
     selectionMode: selectionModeProp,
     size = 'medium',
+    shape = 'default',
+    containerPadding = 4,
     isDisabled = false,
     defaultExpandedKeys,
     expandedKeys,
@@ -348,6 +350,8 @@ function TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {
     estimateSize: () => SIZES[SIZE_NAME_TO_KEY[size]],
     gap: 1,
     overscan: 10,
+    paddingStart: containerPadding,
+    paddingEnd: containerPadding,
   });
 
   const containerStyle = useMemo<CSSProperties>(() => {
@@ -380,8 +384,9 @@ function TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {
   const mods = useMemo(
     () => ({
       'has-height': height != null,
+      shape,
     }),
-    [height],
+    [height, shape],
   );
 
   // Both `useTree` and the consumer need the same DOM node.
@@ -422,8 +427,8 @@ function TreeBase(props: CubeTreeProps, ref: ForwardedRef<HTMLDivElement>) {
             virtualStyle={{
               position: 'absolute',
               top: 0,
-              left: 0,
-              right: 0,
+              left: containerPadding,
+              right: containerPadding,
               transform: `translateY(${virtualItem.start}px)`,
             }}
             virtualRef={rowVirtualizer.measureElement}

src/components/content/Tree/styled.ts

@@ -30,6 +30,8 @@ export const TreeElement = tasty({
     transition: 'theme',
     outline: 0,
     padding: 0,
+    radius: { '': 0, 'shape=card': '1cr' },
+    border: { '': 0, 'shape=card': true },
   },
 });
 
@@ -45,7 +47,6 @@ export const TreeNodeRow = tasty({
   qa: 'TreeRow',
   styles: {
     display: 'block',
-    width: '100%',
     outline: 0,
   },
 });

src/components/content/Tree/types.ts

@@ -121,6 +121,17 @@ export interface CubeTreeProps extends BaseProps, OuterStyleProps {
   /** Row size. Defaults to `'medium'`. */
   size?: SizeName;
 
+  /**
+   * Visual shape of the tree container.
+   * - `default` — no border or radius
+   * - `card` — rounded corners with a border
+   * @default "default"
+   */
+  shape?: 'default' | 'card';
+
+  /** Padding (px) around the tree content. Applied via the virtualizer for vertical and CSS for horizontal. @default 4 */
+  containerPadding?: number;
+
   /** Disable the entire tree. */
   isDisabled?: boolean;