Layout (semantic) improvements (#1448)

* Remove `Main` (use `as="main"` on `Section` instead)
* Various flex configuration improvements
* Storybook story fixes

Author: Luke Bowerman

CHANGELOG.md

@@ -10,9 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `TabList` now supports `PaddingProps` and `fontSize`
 - `TabList` w/ `distribute` now uses default "small" `fontSize`
 
-- Preview: `InputFilters` component and tests (this component is not yet ready for general-use)
-- Preview: `ActionListControls` component (this component is not yet ready for general-use)
-- Experimental: `@looker/components-theme-editor` package
+* Preview: `InputFilters` component and tests (this component is not yet ready for general-use)
+* Preview: `ActionListControls` component (this component is not yet ready for general-use)
+* Experimental: `@looker/components-theme-editor` package
+* Experimental: "Semantic" Layout components - `Layout`, `Header`, `Footer`, `Aside`
 
 ### Changed
 

packages/components/src/Layout/Semantics/Footer.tsx

@@ -25,11 +25,10 @@
  */
 
 import styled from 'styled-components'
-import { headerFooterCSS } from './Header'
-import { SemanticLayoutBase } from './semanticStyledBase'
+import { headerFooterCSS, HeaderProps } from './Header'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface FooterProps extends SemanticLayoutBase {}
+export interface FooterProps extends HeaderProps {}
 
 export const Footer = styled.footer<FooterProps>`
   ${headerFooterCSS}

packages/components/src/Layout/Semantics/Layout.tsx

@@ -25,8 +25,9 @@
  */
 
 import { CompatibleHTMLProps } from '@looker/design-tokens'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { simpleLayoutCSS, SimpleLayoutProps } from '../utils/simple'
+import { Section } from './Section'
 
 export interface LayoutProps
   extends SimpleLayoutProps,
@@ -38,11 +39,19 @@ export interface LayoutProps
   hasAside?: boolean
 }
 
+const hasAsideCSS = css`
+  flex-direction: row;
+
+  & > ${Section} {
+    width: 0;
+  }
+`
+
 export const Layout = styled.div<LayoutProps>`
   ${simpleLayoutCSS}
 
   display: flex;
-  flex-direction: ${({ hasAside }) => (hasAside ? 'row' : 'column')};
-  height: 100%;
-  width: 100%;
+  flex: 1 0 auto;
+
+  ${({ hasAside }) => (hasAside ? hasAsideCSS : 'flex-direction: column;')}
 `

packages/components/src/Layout/Semantics/Main.tsx

@@ -33,7 +33,6 @@ export interface SectionProps extends SemanticLayoutBase {}
 export const sectionCSS = css`
   ${semanticLayoutCSS}
   flex: 1 0 auto;
-  width: 0;
 `
 
 export const Section = styled.section<SectionProps>`

packages/components/src/Layout/Semantics/Section.tsx

@@ -28,6 +28,5 @@ export * from './Aside'
 export * from './Footer'
 export * from './Header'
 export * from './Layout'
-export * from './Main'
 export * from './Page'
 export * from './Section'

packages/components/src/Layout/Semantics/index.ts

@@ -29,7 +29,6 @@ import {
   Layout,
   Header,
   Aside,
-  Main,
   Footer,
   Page,
   Heading,
@@ -45,20 +44,20 @@ import {
 import styled from 'styled-components'
 
 export default {
-  title: 'Layout',
+  title: 'Layout/Semantics/ExamplePage',
 }
 
-export const ApiExplorer = () => (
+export const ExamplePage = () => (
   <Highlighter>
-    <Page supportsScroll={false}>
-      <Header isFixed height="4rem" px="large">
+    <Page>
+      <Header height="4rem" px="large">
         Header
       </Header>
-      <Layout>
+      <Layout hasAside>
         <Aside p="large" width="200px">
           Aside
         </Aside>
-        <Main p="xxlarge">
+        <Section p="xxlarge" as="main">
           <Heading>Page title</Heading>
           <Tabs>
             <TabList distribute>
@@ -123,12 +122,14 @@ export const ApiExplorer = () => (
               </TabPanel>
             </TabPanels>
           </Tabs>
-        </Main>
+        </Section>
         <AsideAlt p="xxlarge" width="25rem">
           Alternate Aside
         </AsideAlt>
       </Layout>
-      <Footer>Hi to me too!</Footer>
+      <Footer height="3rem" px="large">
+        I'm a footer
+      </Footer>
     </Page>
   </Highlighter>
 )
@@ -150,7 +151,7 @@ const Highlighter = styled.div`
     background-color: lightskyblue;
   }
 
-  ${Main}, ${Section} {
+  ${Section} {
     background-color: lightgoldenrodyellow;
   }
 `

…ybook/src/Layout/ApiExplorer.stories.tsx …ybook/src/Layout/ExamplePage.stories.tsxstorybook/src/Layout/ApiExplorer.stories.tsx renamed to storybook/src/Layout/ExamplePage.stories.tsx storybook/src/Layout/ApiExplorer.stories.tsx renamed to storybook/src/Layout/ExamplePage.stories.tsx

@@ -29,7 +29,6 @@ import {
   Layout,
   Header,
   Aside,
-  Main,
   Footer,
   Grid,
   Section,
@@ -56,7 +55,7 @@ export const HeaderLayoutAsideMain = () => (
       <Header>Header</Header>
       <Layout hasAside>
         <Aside width="20%">Aside</Aside>
-        <Main>Main</Main>
+        <Section>Section</Section>
       </Layout>
     </Layout>
   </Highlighter>
@@ -68,7 +67,7 @@ export const HeaderLayoutAsideMainFooter = () => (
       <Header>Header</Header>
       <Layout hasAside>
         <Aside width="20%">Aside</Aside>
-        <Main>Main</Main>
+        <Section>Section</Section>
       </Layout>
       <Footer>Footer</Footer>
     </Layout>
@@ -80,7 +79,7 @@ export const AsideMainFooter = () => (
     <Layout>
       <Layout hasAside>
         <Aside width="20%">Aside</Aside>
-        <Main>Main</Main>
+        <Section>Section</Section>
       </Layout>
       <Footer>Footer</Footer>
     </Layout>
@@ -94,7 +93,7 @@ export const AsideLayoutHeaderMainFooter = () => (
         <Aside width="20%">Aside</Aside>
         <Layout>
           <Header>Header</Header>
-          <Main>Main</Main>
+          <Section>Section</Section>
           <Footer>Footer</Footer>
         </Layout>
       </Layout>
@@ -111,7 +110,7 @@ export const AsideLayoutHeaderLayoutLayoutMainAsideFooter = () => (
           <Header>Header</Header>
           <Layout>
             <Layout hasAside>
-              <Main>Main</Main>
+              <Section>Section</Section>
               <Aside width="40%">Aside</Aside>
             </Layout>
           </Layout>
@@ -127,7 +126,14 @@ const CustomGrid = styled(Grid)`
 `
 
 const Highlighter = styled.div`
+  /* Emulate Page behavior for demos */
+  height: 100%;
+  & > ${Layout} {
+    height: 100%;
+  }
+
   /* stylelint-disable color-named */
+
   ${Header}, ${Footer} {
     background-color: lightskyblue;
   }
@@ -136,7 +142,7 @@ const Highlighter = styled.div`
     background-color: lightsalmon;
   }
 
-  ${Main}, ${Section} {
+  ${Section} {
     background-color: lightseagreen;
   }
 `