Primitives

[ItsJonQ]

Primitives 🍪

Wowow! This is a big feature update for Fancy!!

Notable breaking updates

Fancy no longer preserves the original className. Instead, it only generates the hashed className.

After real world testing, original className preservation was not very useful.

(Note: This can be added back in, if needed. It's very simple)

Primitives

Fancy has the ability to create styled HTML primitive components (heavily inspired by styled-components).

Example

import styled from '@helpscout/fancy'

const Card = styled.div`
  background: yellow;
  position: relative;
  border: 1px solid black;
`

const App = () => {
  ;<div id="App">
    <Card />
  </div>
}

Alternatively, you can create primitive components by passing a string that represents the component name:

import styled from '@helpscout/fancy'

const Card = styled('div')`
  background: yellow;
  position: relative;
  border: 1px solid black;
`

Style Interpolation

Fancy provides a handful of ways to add and interpolate styles with your component.

Backticks

The easiest and recommended way is to use backticks followed be the styled component you wish to create:

const Card = styled.div`
  background: yellow;
  position: relative;
  border: 1px solid black;
`

String

You can also pass a string:

const Card = styled.div('
  background: yellow;
  position: relative;
  border: 1px solid black;
')

Function

Or even a function:

const Card = styled.div(() => '
  background: yellow;
  position: relative;
  border: 1px solid black;
')

Prop interpolation

The props prop is made available when styling. How you use it depends on your CSS style implementation.

Backticks

const Card = styled.div`
  background: ${prop => (prop.title ? 'yellow' : 'red')};
  position: relative;
  border: 1px solid black;
`

String

const Card = styled.div(`
  background: ${prop.title ? 'yellow' : 'red'};
  position: relative;
  border: 1px solid black;
`)

Function

const Card = styled.div(
  props => `
  background: ${prop.title ? 'yellow' : 'red'};
  position: relative;
  border: 1px solid black;
`
)

Theming

Props defined in the <ThemeProvider> will be available as a special props.theme prop for your styling needs:

const Card = styled.div`
  background: ${props => (props.theme === 'light' ? 'white' : 'black')};
  position: relative;
  border: 1px solid black;
`

[coveralls]

Pull Request Test Coverage Report for Build 91

• 86 of 86 (100.0%) changed or added relevant lines in 6 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 83:	0.0%
Covered Lines:	218
Relevant Lines:	218

---

💛 - Coveralls