Use experience with this package

[georgefeast]

I’ve been wondering if this kind of solution could work for component spacing in react apps but haven’t heard about the approach anywhere else. Are you able to give some feedback on using this in a real world project and your experiences with it?

[ambewas]

Well, when I wrote this package it was based off of a solution we used internally on a project to re-use certain layout based styles on our component.

Since then, as you are probably aware, better, more robust and overall fully featured solutions such as styled-components, emotion, ... exist and should be considered the better alternative to this one.

With regards to component spacing, I'm not sure what you mean exactly. Layout spacing? Or ...?

I should note that I've been fleshing out the basics of a framework to create atomic design systems in React, that aims to abstract functional behaviors from the UI of react components. It's called compounded and development will be done at https://github.com/laminar-labs/compounded (not much there yet, tho). If you're interested in the why and how, you can check out the old repo readme and POC here https://github.com/ambewas/compounded

All feedback is appreciated, or if you're looking to help out on an open source project, drop me a message!

[georgefeast]

I’m using styled-components for the ui components themselves within a flexbox grid but it would be nice to be able to apply spacing modifiers I.e. external margins to the components without adding the props and styles for them to every component. I saw someone create a “spacing” component that wraps the child and has the spacing modifiers but it seems bad to have <Spacing m={2}><SomeComponent/></Spacing> all through the site. I was thinking it would be cool to use an HOC wrapping the component export with the common spacing logic so it was added directly to every component but without being added directly. Have you found a good way of dealing with this?

…

On 13/03/2019, at 12:40 AM, ambewas ***@***.***> wrote: Well, when I wrote this package it was based off of a solution we used internally on a project to re-use certain layout based styles on our component. Since then, as you are probably aware, better, more robust and overall fully featured solutions such as styled-components, emotion, ... exist and should be considered the better alternative to this one. With regards to component spacing, I'm not sure what you mean exactly. Layout spacing? Or ...? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[ambewas]

Ah, yes. I see what you mean.

For this, there's several solutions possible, actually.

What I'm working with right now is a padding and a margin function, actually, that can be dropped in a styled component like this:

const StyledComponen = styled.div`
  ${margin(3, 0)};
`

The margin/ padding function looks somethings like this:

import { breakpoints, spacingLarge, spacing } from './branding'

const getSpacing = (size, breakpoint) => {
  if (size == null) {
    return ''
  }

  if (size === 0) {
    return '0px'
  }

  return breakpoint === 'large' ? spacingLarge[size] : spacing[size]
}

/**
 * build a piece of css to be used for responsive margin/paddings:
 *
 * const StyledSearchIcon = styled(SearchIcon)`
 *   ${padding(1, 2)};
 *   ${margin(2)};
 * `
 */

const getTopRightBottomLeft = type => (
  sizeTop,
  sizeRight,
  sizeBottom,
  sizeLeft,
) => `
  ${type}: ${getSpacing(sizeTop, 'small')} ${getSpacing(sizeRight, 'small')} ${getSpacing(sizeBottom, 'small')} ${getSpacing(sizeLeft, 'small')};

  @media (min-width: ${breakpoints.lg}px) {
    ${type}: ${getSpacing(sizeTop, 'large')} ${getSpacing(sizeRight, 'large')} ${getSpacing(sizeBottom, 'large')} ${getSpacing(sizeLeft, 'large')};
  }
`


export const padding = getTopRightBottomLeft('padding')
export const margin = getTopRightBottomLeft('margin')

where breakpoints/spacing are objects that contain steps:

export const breakpoints = {
  xs: 0,
  sm: 600,
  md: 960,
  lg: 1280,
  xl: 1920,
}

// padding/margin steps for mobile
export const spacing = {
  0: '0px',
  1: '5px',
  2: '15px',
  3: '20px',
  4: '40px',
}

// padding/margin steps for desktop
export const spacingLarge = {
  0: '0px',
  1: '10px',
  2: '20px',
  3: '40px',
  4: '80px',
}

Of course, it's also possible to create a HOC that wrap any incoming component with Styled and exposes padding/margin steps as props.

Another solution specifically for react-emotion, can be found here: https://github.com/ambewas/styled-utils

Hope that gives you some inspiration! In any case, it's a good idea to separate spacing like you're trying to do. So you're on the right track :)

[georgefeast]

Thanks! That's a huge help, really appreciate it