feat(Layout): tiny scrollbar for sub-components

Author: tenphi

src/components/actions/Button/Button.tsx

@@ -131,7 +131,6 @@ export const DEFAULT_BUTTON_STYLES = {
     '': 'min $size',
     'left-icon & right-icon': 'min ($size * 2 - 2bw)',
     'single-icon': 'fixed $size',
-    'type=link': 'initial',
   },
   height: {
     '': 'fixed $size',

src/components/content/Layout/Layout.stories.tsx

@@ -485,22 +485,14 @@ export const CompleteApplicationShell: Story = {
           }
         />
 
-        <Layout.Content padding="2x" scrollbar="tiny">
+        <Layout.Content gap="1x">
           {Array.from({ length: 10 }, (_, i) => (
-            <div
-              key={i}
-              style={{
-                padding: '16px',
-                marginBottom: '16px',
-                background: '#f5f5f5',
-                borderRadius: '8px',
-              }}
-            >
+            <Card key={i}>
               <Title level={5}>Card {i + 1}</Title>
               <Text>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
               </Text>
-            </div>
+            </Card>
           ))}
         </Layout.Content>
 

src/components/content/Layout/LayoutBlock.tsx

@@ -1,44 +1,31 @@
-import { ForwardedRef, forwardRef, ReactNode } from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 
-import {
-  BaseProps,
-  CONTAINER_STYLES,
-  ContainerStyleProps,
-  extractStyles,
-  filterBaseProps,
-  tasty,
-} from '../../../tasty';
+import { tasty } from '../../../tasty';
 
-import { LayoutContextReset } from './LayoutContext';
+import { CubeLayoutContentProps, LayoutContent } from './LayoutContent';
 
-const BlockElement = tasty({
-  as: 'div',
+const BlockElement = tasty(LayoutContent, {
   qa: 'LayoutBlock',
   styles: {
-    display: 'block',
-    padding: '($content-padding, 1x)',
     flexShrink: 0,
+
+    Inner: {
+      display: 'block',
+    },
   },
 });
 
-export interface CubeLayoutBlockProps extends BaseProps, ContainerStyleProps {
-  children?: ReactNode;
-}
+export interface CubeLayoutBlockProps extends CubeLayoutContentProps {}
 
 function LayoutBlock(
   props: CubeLayoutBlockProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const { children, ...otherProps } = props;
-  const styles = extractStyles(otherProps, CONTAINER_STYLES);
+  const { children, scrollbar = 'tiny', ...otherProps } = props;
 
   return (
-    <BlockElement
-      {...filterBaseProps(otherProps, { eventProps: true })}
-      ref={ref}
-      styles={styles}
-    >
-      <LayoutContextReset>{children}</LayoutContextReset>
+    <BlockElement {...otherProps} ref={ref} scrollbar={scrollbar}>
+      {children}
     </BlockElement>
   );
 }

src/components/content/Layout/LayoutContent.tsx

@@ -34,7 +34,10 @@ const ContentElement = tasty({
       display: 'flex',
       flow: 'column',
       padding: '($content-padding, 1x)',
-      overflow: 'auto',
+      overflow: {
+        '': 'auto',
+        'scrollbar=none': 'clip',
+      },
       placeSelf: 'stretch',
       scrollbar: {
         '': 'thin',
@@ -89,7 +92,7 @@ function LayoutContent(
   props: CubeLayoutContentProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const { children, scrollbar = 'thin', ...otherProps } = props;
+  const { children, scrollbar = 'thin', styles, ...otherProps } = props;
   const extractedStyles = extractStyles(otherProps, CONTAINER_STYLES);
   const innerRef = useRef<HTMLDivElement>(null);
   const combinedRef = useCombinedRefs(ref);
@@ -116,12 +119,13 @@ function LayoutContent(
     [scrollbar, isHovered],
   );
 
-  // Apply container styles (like padding) to the Inner element
+  // Merge incoming styles with extracted container styles for Inner element
   const finalStyles = useMemo(() => {
     return {
-      Inner: extractedStyles,
+      ...styles,
+      Inner: { ...(styles?.Inner as object), ...extractedStyles },
     };
-  }, [extractedStyles]);
+  }, [styles, extractedStyles]);
 
   return (
     <ContentElement

src/components/content/Layout/LayoutFooter.tsx

@@ -1,50 +1,48 @@
-import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';
+import { ForwardedRef, forwardRef, useMemo } from 'react';
 
-import {
-  BaseProps,
-  CONTAINER_STYLES,
-  ContainerStyleProps,
-  extractStyles,
-  filterBaseProps,
-  tasty,
-} from '../../../tasty';
+import { tasty } from '../../../tasty';
 
-import { LayoutContextReset } from './LayoutContext';
+import { CubeLayoutContentProps, LayoutContent } from './LayoutContent';
 
-const FooterElement = tasty({
+const FooterElement = tasty(LayoutContent, {
   as: 'footer',
   qa: 'LayoutFooter',
   role: 'contentinfo',
   styles: {
-    display: 'flex',
-    flow: {
-      '': 'row nowrap',
-      inverted: 'row-reverse nowrap',
-    },
-    placeContent: 'center space-between',
-    placeItems: 'center stretch',
-    gap: '1x',
-    padding: '($content-padding, 1x)',
     border: 'top',
-    width: '100%',
     height: 'min 5x',
-    boxSizing: 'border-box',
     flexShrink: 0,
+    whiteSpace: 'nowrap',
+
+    Inner: {
+      display: 'flex',
+      flow: {
+        '': 'row nowrap',
+        inverted: 'row-reverse nowrap',
+      },
+      placeContent: 'center space-between',
+      placeItems: 'center stretch',
+      gap: '1x',
+    },
   },
 });
 
-export interface CubeLayoutFooterProps extends BaseProps, ContainerStyleProps {
+export interface CubeLayoutFooterProps extends CubeLayoutContentProps {
   /** Inverts the order of children (primary action on right) */
   invertOrder?: boolean;
-  children?: ReactNode;
 }
 
 function LayoutFooter(
   props: CubeLayoutFooterProps,
-  ref: ForwardedRef<HTMLElement>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const { children, invertOrder, mods, ...otherProps } = props;
-  const styles = extractStyles(otherProps, CONTAINER_STYLES);
+  const {
+    children,
+    invertOrder,
+    scrollbar = 'tiny',
+    mods,
+    ...otherProps
+  } = props;
 
   const finalMods = useMemo(
     () => ({
@@ -56,12 +54,12 @@ function LayoutFooter(
 
   return (
     <FooterElement
+      {...otherProps}
       ref={ref}
-      {...filterBaseProps(otherProps, { eventProps: true })}
       mods={finalMods}
-      styles={styles}
+      scrollbar={scrollbar}
     >
-      <LayoutContextReset>{children}</LayoutContextReset>
+      {children}
     </FooterElement>
   );
 }

src/components/content/Layout/LayoutHeader.tsx

@@ -9,41 +9,33 @@ import {
 } from 'react';
 
 import { SlashIcon } from '../../../icons/SlashIcon';
-import {
-  BaseProps,
-  CONTAINER_STYLES,
-  ContainerStyleProps,
-  extractStyles,
-  filterBaseProps,
-  tasty,
-} from '../../../tasty';
+import { tasty } from '../../../tasty';
 import { Link } from '../../actions/Link/Link';
 import { Text } from '../Text';
 import { useAutoTooltip } from '../use-auto-tooltip';
 
-import { LayoutContextReset } from './LayoutContext';
+import { CubeLayoutContentProps, LayoutContent } from './LayoutContent';
 
-const HeaderElement = tasty({
+const HeaderElement = tasty(LayoutContent, {
   as: 'header',
   qa: 'LayoutHeader',
   styles: {
-    display: 'grid',
-    gridTemplate: `
-      "breadcrumbs breadcrumbs breadcrumbs" auto
-      "title suffix extra" 1fr
-      "subtitle subtitle extra" auto
-      / max-content 1fr minmax(0, auto)
-    `,
-    gap: 0,
-    padding: '($content-padding, 1x)',
     border: 'bottom',
-    width: '100%',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    placeContent: 'stretch',
-    placeItems: 'center stretch',
     flexShrink: 0,
 
+    Inner: {
+      display: 'grid',
+      gridTemplate: `
+        "breadcrumbs breadcrumbs breadcrumbs" auto
+        "title suffix extra" 1fr
+        "subtitle subtitle extra" auto
+        / max-content 1fr minmax(0, auto)
+      `,
+      gap: 0,
+      placeContent: 'stretch',
+      placeItems: 'center stretch',
+    },
+
     Breadcrumbs: {
       gridArea: 'breadcrumbs',
       display: 'flex',
@@ -95,7 +87,7 @@ const HeaderElement = tasty({
   },
 });
 
-export interface CubeLayoutHeaderProps extends BaseProps, ContainerStyleProps {
+export interface CubeLayoutHeaderProps extends CubeLayoutContentProps {
   /** Page/section title */
   title?: ReactNode;
   /** Title heading level (1-6) */
@@ -111,12 +103,11 @@ export interface CubeLayoutHeaderProps extends BaseProps, ContainerStyleProps {
    * Uses Link component which integrates with the navigation provider.
    */
   breadcrumbs?: Array<[label: string, href: string]>;
-  children?: ReactNode;
 }
 
 function LayoutHeader(
   props: CubeLayoutHeaderProps,
-  ref: ForwardedRef<HTMLElement>,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {
     title,
@@ -125,13 +116,12 @@ function LayoutHeader(
     extra,
     subtitle,
     breadcrumbs,
+    scrollbar = 'tiny',
     children,
     mods,
     ...otherProps
   } = props;
 
-  const styles = extractStyles(otherProps, CONTAINER_STYLES);
-
   // Use auto tooltip for title overflow detection
   const { labelRef, renderWithTooltip } = useAutoTooltip({
     tooltip: true,
@@ -178,19 +168,17 @@ function LayoutHeader(
 
   return (
     <HeaderElement
+      {...otherProps}
       ref={ref}
-      {...filterBaseProps(otherProps, { eventProps: true })}
       mods={{ ...mods, level }}
-      styles={styles}
+      scrollbar={scrollbar}
     >
-      <LayoutContextReset>
-        {renderBreadcrumbs()}
-        {renderWithTooltip(renderTitle, 'bottom')}
-        {suffix && <div data-element="Suffix">{suffix}</div>}
-        {extra && <div data-element="Extra">{extra}</div>}
-        {subtitle && <div data-element="Subtitle">{subtitle}</div>}
-        {children}
-      </LayoutContextReset>
+      {renderBreadcrumbs()}
+      {renderWithTooltip(renderTitle, 'bottom')}
+      {suffix && <div data-element="Suffix">{suffix}</div>}
+      {extra && <div data-element="Extra">{extra}</div>}
+      {subtitle && <div data-element="Subtitle">{subtitle}</div>}
+      {children}
     </HeaderElement>
   );
 }