Question about inheritance and atomic design

[diegohaz]

Question about inheritance and atomic design

[diegohaz]

I would not use inheritance, but composition. Something like this:

import styled from 'styled-components'
import { Button } from 'components'

const StyledButton = styled(Button)`
  border-radius: 50%;
  width: 40px;
  height: 40px;
`

const RowActionButton = (props) => <StyledButton {...props} />

export default RowActionButton

The different SomethingButton's should be molecules.

[jlmitch5]

Hey @diegohaz, I just wanted to share some things I've learned since exploring the styled-components more deeply.

First of all, thank you for pointing me in the direction, as I'm loving the explicit, compositional inheritance pattern using styled-components keeps you in. The code you describe in the above gist is how I've implemented most of the components I've tried so far (reworking the main layout and dashboard of the app I work on).

There's one particular case where I had to do things a little differently, and I wanted to share for others who might happen upon this issue.

There are times where you might need to share styles between components, but they can't be composed of a common ancestor. I ran into this when working on our horizontal nav components. Here's a subsection of those:

All but one of these are a styled version of the Link component, and link to various sub-routes in the app. The exception is the icon that looks like a book...which links outside of the app to our documentation site. You cannot link outside of your react app to a different url using the react-router's link component, so you can't really do inheritance in a compositional way.

I got around this by using the styled-component's css template tag function to keep the styles that the two different types of components need to share in one place (so you don't have to edit things in two places when things change). I guess you could consider this a "mix-in" inheritance pattern. Anyways, here's what the code looks like:

import {Link} from 'react-router';
import styled, {css} from 'styled-components';

const consistentLinkCSS = css`
  color: ${props => props.theme.interfaceText}
  text-decoration: none;
  border-bottom: 5px solid transparent;
  padding: ${props => props.theme.pad * 2}px ${props => props.theme.pad * 2.25}px;
  &:hover {
    background: ${props => props.theme.navItemBackground};
    border-color: ${props => props.theme.navItemBorder};
  }
`;

// used for styling react-router links
const StyledLink = styled(Link)`
  ${consistentLinkCSS}
  &.active {
    background: ${props => props.theme.navItemBackground};
    border-color: ${props => props.theme.navItemBorder};
  }
`;

// used for styling links out to other websites (i.e. the docs link)
const StyledLinkOut = styled.a`
  ${consistentLinkCSS}
`;

Thank you for you explanation, it definitely pointed me in the right direction! And just as a note, right now, I'm just keeping everything in a components folder in my app, as that seems to be easiest while things are "small", but I'll definitely be exploring the atomic design way of structuring once things start to become too unwieldy.