jameslnewell / substance

⚗️Primitives for building components.

⚗️ substance

Primitives for building components.

Development

Installation

yarn

Developing the Storybook

yarn run start:storybook

Developing the Website

yarn run start:website

Testing

yarn run testing

Versioning

yarn run bump

substance's Issues

`Stack`/`Inline`/`Tiles` - does not apply styles to non React elements

Description

Since React.isValidElement is called on children passed to Stack/Inline/Tiles to wrap them in their respective Item components, styling does not apply to elements created without React.createElement, i.e. a raw text node

• Inline
• Stack
• Tiles

Example

const Foo = () => (
  <Inline spaceX="xs">
    <h1>Foo</h2>
    bar
  </Inline>
)

`Inline` - don't apply space if only one child

Description

If you have only one child in an Inline element with space{X,Y} applied, it will still apply padding to that single child.

Example

This emerged from having an Inline, Visible, and child components, where there is a single element on small breakpoints, and two on larger breakpoints.

<Inline spaceX="md">
  <Visible isVisible={{ xs: false, md: true }}>
    <Foo />
  </Visible>
  <Bar />
</Inline>

The workaround for this particular case was to apply spaceX responsively, to match the isVisible prop:

<Inline spaceX={{ md: "md" }}>
  <Visible isVisible={{ xs: false, md: true }}>
    <Foo />
  </Visible>
  <Bar />
</Inline>

Fix typings

Using preconstruct mixins and layouts were returning incorrect types with lots of any