Releases: helpscout/fancy
v2.7.0
v2.6.0
Styled: Add ability to support certain static props
This update allows for the ability to add certain static properties to
styled. This enables the storage of "extra" properties, allowing for
an easier way to share utilities/values when creating styled components.
v2.5.0
createStyled: Export and add extraArguments feature
This update exports the createStyled factory function, which is used
to create the primary styled() styled component function.
createStyled was enhanced with a special argument called extraArguments.
This allows for a creation of styled() with unique + convenient built-in
props. By default, only theme is provided to the styled component.
Example
import { createStyled } from '@helpscout/fancy'
const extraArguments = {
$branding: {
main: '#00ff55'
}
}
const styled = createStyled({ extraArguments })From this point on, any component created with styled will have access to $branding.
const Block = styled('div')`
$({ $branding }) => `
color: ${$branding.main};
`
`Anything can be passed as extraArguments. Other handing things can include functions like rgba or font utils.
Inspiration:
https://github.com/reduxjs/redux-thunk#injecting-a-custom-argument
And
https://baseweb.design/getting-started/installation/#styletron
v2.4.1
Change data-cy to data-cy-styled. Add displayLabel for namespacing
This update changes the auto-generated data-cy to data-cy-styled to
reduce conflict with the HOC from HSDS: React.
The Styled Component generator is now paying attention to a special
static property (displayLabel), which can customize the autogenerated
className + data-cy-styled results. This borrows the label convention
introduced in Emotion 10.
Example
const MyComponent = () => <div />
MyComponent.displayLabel = 'hello'
const StyledComponent = styled(MyComponent)()
// Autogenerated CSS className will be something like
// .css-1jjidj3-helloFancy - v2.4.0
Automatically add data-cy and displayName classNames
This update enhances the styled() factory to provide the component with
data-cy and a css-j21lkjf-COMPONENT_NAME className, if applicable.
data-cy will be added if the Component has a displayName or a name.
HTML Tags like span or div will not receive data-cy.
The displayName className will be added to all components. This is purely
for identification/debugging purposes. No actual styles will be associated
with these classNames.
Example:
<div data-cy="Card" class="card css-ko0v5 css-ko0v5-Card edlacb0">Card</div>
Fancy - v2.3.0
Fix FrameProvider build for Babel 7 (Zero 3)
The issue came down to getEmotion from createFrameManager
https://github.com/helpscout/fancy/blob/master/src/create-emotion-styled/createFrameManager.js#L36
For some reason, changing the build from babel 6 -> 7 made this particular function not work as expected. Perhaps the update revealed some weaknesses in the logic.
The solution involved additional guards and a secondary argument to getEmotion:
getEmotion(frame, currentEmotion)
currentEmotion acts like a fallback. If any of the guards fail, that would be returned.
The method calling getEmotion also has additional guards!
Screencast:
https://www.useloom.com/share/10189a002d484e1b8ef91956a875f4ac
Resolves #42
Fancy - v2.2.6
Fix emotion compiling
This update resolves how Emotion is compiled by reverting back
@helpscout/zero back to v0.0.9.
The older version of @helpscout/zero uses babel-6, along with different
.babelrc configs. This seems to play nicer with Emotion.
This has been manually tested with beacon-2.
Fancy - v2.2.5
Fix pure option + Update Zero
This update fixes the { pure } option for create-emotion-styled into
the correct scope.
This update also updates @helpscout/zero to the latest version.
Fancy - v2.2.4
Fancy - v2.2.3
Polyfill WeakMap for IE11
This update polyfills Weakmap with a lightweight implementation from Google.