fix(Layout): issues

Author: tenphi

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

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
 import { Button, ItemButton } from '../../actions';
+import { Block } from '../../Block';
 import { Space } from '../../layout/Space';
 import { Text } from '../Text';
 import { Title } from '../Title';
@@ -374,17 +375,13 @@ export const NestedLayouts: Story = {
       <Layout.Header title="Nested Layouts" />
       <Layout flow="row">
         <Layout width="200px" border="right">
-          <Layout.Content padding="1x">
+          <Layout.Content>
             <Text>Left sidebar</Text>
           </Layout.Content>
         </Layout>
         <Layout>
-          <Layout.Toolbar>
-            <Text>Inner toolbar</Text>
-          </Layout.Toolbar>
-          <Layout.Content padding="2x">
-            <Text>Main content</Text>
-          </Layout.Content>
+          <Layout.Toolbar>Inner toolbar</Layout.Toolbar>
+          <Layout.Content>Main content</Layout.Content>
         </Layout>
       </Layout>
     </Layout>
@@ -419,10 +416,8 @@ export const MultiplePanels: Story = {
           </Layout.Content>
         </Layout.Panel>
         <Layout.Toolbar>
-          <Space>
-            <Button onPress={() => setLeftOpen(!leftOpen)}>Left</Button>
-            <Button onPress={() => setRightOpen(!rightOpen)}>Right</Button>
-          </Space>
+          <Button onPress={() => setLeftOpen(!leftOpen)}>Left</Button>
+          <Button onPress={() => setRightOpen(!rightOpen)}>Right</Button>
         </Layout.Toolbar>
         <Layout.Content padding="2x">
           <Text>Main content between two panels</Text>
@@ -432,6 +427,27 @@ export const MultiplePanels: Story = {
   },
 };
 
+export const HorizontalScrollableContent: Story = {
+  render: () => (
+    <Space width="500px" height="(5x - 2bw)">
+      <Layout.Block fill="#light" placeSelf="center">
+        Fixed Left
+      </Layout.Block>
+      <Layout.Content scrollbar="tiny" placeContent="center">
+        <Text nowrap>
+          This is a very long line of text that should not wrap and will cause
+          horizontal scrolling when it exceeds the container width →→→→→→→→→→→
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua →→→→→→→→
+        </Text>
+      </Layout.Content>
+      <Layout.Block fill="#light" placeSelf="center">
+        Fixed Right
+      </Layout.Block>
+    </Space>
+  ),
+};
+
 export const CompleteApplicationShell: Story = {
   render: function CompleteApplicationShellStory() {
     const [sidebarOpen, setSidebarOpen] = useState(true);

src/components/content/Layout/LayoutBlock.tsx

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

src/components/content/Layout/LayoutContent.tsx

@@ -24,11 +24,13 @@ const ContentElement = tasty({
     minHeight: 0,
     overflow: 'hidden',
     boxSizing: 'border-box',
+    placeSelf: 'stretch',
 
     Inner: {
       position: 'absolute',
       inset: 0,
-      display: 'block',
+      display: 'flex',
+      flow: 'column',
       padding: '($content-padding, 1x)',
       overflow: 'auto',
       scrollbar: {

src/components/content/Layout/LayoutToolbar.tsx

@@ -21,7 +21,7 @@ const ToolbarElement = tasty({
     placeContent: 'center space-between',
     placeItems: 'center stretch',
     gap: '1x',
-    padding: '1x 2x',
+    padding: '($content-padding, 1x)',
     width: '100%',
     height: 'min 5x',
     overflow: 'hidden',

src/components/content/Layout/index.tsx

@@ -1,6 +1,7 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 import { CubeLayoutProps, Layout as LayoutBase } from './Layout';
+import { LayoutBlock } from './LayoutBlock';
 import { LayoutContent } from './LayoutContent';
 import { LayoutFooter } from './LayoutFooter';
 import { LayoutHeader } from './LayoutHeader';
@@ -11,6 +12,7 @@ import { LayoutToolbar } from './LayoutToolbar';
 export { GridLayout } from './GridLayout';
 export type { CubeGridLayoutProps } from './GridLayout';
 export type { CubeLayoutProps } from './Layout';
+export type { CubeLayoutBlockProps } from './LayoutBlock';
 export type { CubeLayoutContentProps, ScrollbarType } from './LayoutContent';
 export type { CubeLayoutFooterProps } from './LayoutFooter';
 export type { CubeLayoutHeaderProps } from './LayoutHeader';
@@ -29,6 +31,7 @@ interface LayoutComponent
   Header: typeof LayoutHeader;
   Footer: typeof LayoutFooter;
   Content: typeof LayoutContent;
+  Block: typeof LayoutBlock;
   Panel: typeof LayoutPanel;
   PanelHeader: typeof LayoutPanelHeader;
 }
@@ -38,6 +41,7 @@ const Layout = Object.assign(LayoutBase, {
   Header: LayoutHeader,
   Footer: LayoutFooter,
   Content: LayoutContent,
+  Block: LayoutBlock,
   Panel: LayoutPanel,
   PanelHeader: LayoutPanelHeader,
 }) as LayoutComponent;