Add Overflow to prop aliases

Why:

Consider this common mobile layout:

const template = `
  header
  content
  footer
`
const C = () => (
  <Composition
    template={template}
    templateRows='auto 1fr auto'
    height='100vh'>
    {({ Header, Content, Footer }) => (
      <>
        <Header/>
        <Content/>
        <Footer/>
      </>
    )}
  </Composition>
)

Now say we want the Content area to be vertically scrollable - this means that the Content div needs to have overflow-y: scroll in it’s style.

Without top-level support for overflow we would need to apply the style inside the FaaC.

Why I think this is a good candidate: Quite simply - I believe scroll is a layout concern; it’s not styling.

How:

Add the following prop aliases to the Box component.

alias: overflowY
type: string
mapping: {
  undefined: `overflow-y: auto`
  [value]: `overflow-y: ${value}`
}

alias: overflowX
type: string
mapping: {
  undefined: `overflow-x: auto`
  [value]: `overflow-y: ${value}`
}

alias: overflow
type: string
mapping: {
  undefined: `overflow: auto`
  [value]: `overflow: ${value}`
}

[kettanaito]

Glad that helped. I’m closing this issue in favor of #126. overflow CSS properties will be added as a part of pre-configured prop aliases packs once the referred API lands. Feel free to suggest more useful aliases in that issue.

Thank you once more for contributing!

[innerdaze]

ahh that’s ideal, thanks - I hadn’t realised this was possible