feat(Layout): auto-border (#921)

Author: tenphi

.changeset/layout-auto-border.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Layout sub-components now automatically add bottom borders between elements when the layout has vertical flow. This eliminates the need to manually set borders on individual components to create visual separation.

.github/workflows/main.yml

@@ -107,7 +107,7 @@ jobs:
 
       - name: Publish to Chromatic
         id: publish_chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11
         with:
           exitZeroOnChanges: true
           exitOnceUploaded: true

.github/workflows/pull-request.yml

@@ -175,7 +175,7 @@ jobs:
 
       - name: Publish to Chromatic
         id: publish_chromatic
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11
         with:
           exitZeroOnChanges: true
           exitOnceUploaded: true

src/components/content/Layout/Layout.tsx

@@ -49,6 +49,11 @@ const LayoutElement = tasty({
     },
 
     '$content-padding': '1x',
+    // Auto-border size for sub-components (set when layout is vertical)
+    '$layout-border-size': {
+      '': '0',
+      vertical: '1bw',
+    },
 
     Inner: {
       // Direct child selector required for nested layouts
@@ -149,6 +154,16 @@ function LayoutInner(
   const outerStyles = extractStyles(otherProps, OUTER_STYLES);
   const innerStyles = extractStyles(otherProps, INNER_STYLES);
 
+  // Calculate if the layout flow is vertical (for auto-border feature)
+  // Default flow is 'column' (vertical), check if user overrides it
+  const isVertical = useMemo(() => {
+    const providedFlow = (styles?.Inner as Record<string, unknown>)?.flow;
+    const flowValue =
+      typeof providedFlow === 'string' ? providedFlow : 'column';
+
+    return flowValue.startsWith('column');
+  }, [styles?.Inner]);
+
   // Merge styles using the same pattern as LayoutPane
   const finalStyles = useMemo(() => {
     // Handle grid mode and grid properties
@@ -259,8 +274,9 @@ function LayoutInner(
       'has-transition': hasTransition,
       'auto-height': isAutoHeight && !isCollapsed,
       collapsed: isCollapsed,
+      vertical: isVertical,
     }),
-    [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed],
+    [isDragging, isReady, hasTransition, isAutoHeight, isCollapsed, isVertical],
   );
 
   // Combine local ref with forwarded ref

src/components/content/Layout/LayoutContainer.tsx

@@ -28,6 +28,10 @@ const ContainerElement = tasty({
     padding: '$content-padding',
     placeSelf: 'stretch',
     width: '100%',
+    border: {
+      '': 0,
+      '!:last-child': '$layout-border-size solid #border bottom',
+    },
 
     Inner: {
       $: '>',

src/components/content/Layout/LayoutContent.tsx

@@ -33,6 +33,10 @@ const ContentElement = tasty({
     height: 'min 0',
     overflow: 'hidden',
     boxSizing: 'content-box',
+    border: {
+      '': 0,
+      '!:last-child': '$layout-border-size solid #border bottom',
+    },
 
     Inner: {
       $: '>',

src/components/content/Layout/LayoutFooter.tsx

@@ -9,7 +9,8 @@ const FooterElement = tasty(LayoutContent, {
   qa: 'LayoutFooter',
   role: 'contentinfo',
   styles: {
-    border: 'top',
+    // Footer inherits auto-border from LayoutContent
+    // (no border when last-child, which is typical for footers)
     height: 'min 5x',
     flexShrink: 0,
     flexGrow: 0,

src/components/content/Layout/LayoutHeader.tsx

@@ -20,6 +20,7 @@ const HeaderElement = tasty(LayoutContent, {
   as: 'header',
   qa: 'LayoutHeader',
   styles: {
+    // Header always has bottom border (inherent style)
     border: 'bottom',
     flexShrink: 0,
     flexGrow: 0,

src/components/content/Layout/LayoutPanel.tsx

@@ -62,6 +62,8 @@ const PanelElement = tasty({
     boxSizing: 'border-box',
 
     '$content-padding': '1x',
+    // Auto-border size for sub-components (panels are always vertical)
+    '$layout-border-size': '1bw',
 
     // Position based on side prop
     top: {