Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create v6 SimpleToast with Styled System #400

Merged
merged 11 commits into from
Dec 14, 2020

Conversation

TyMick
Copy link
Collaborator

@TyMick TyMick commented Dec 4, 2020

Another #378— Here's a v6 SimpleToast that replaces the styleOverrides prop with Styled System utilities for color, layout, and position. I also replaced an old theme prop to use the new Styled System theme instead.

The most notable changes are in styled.jsx. In it, since the default styles include a media query, I placed the Styled System primitives inside an && block:

&& {
  ${color}
  ${layout}
  ${position}
}

This way, if a developer assigns a single value instead of an array to any of those Styled System props, meaning for that single value to apply across all screen width breakpoints, this && specificity will ensure it wins any conflicts with defaults inside in the media query.

components/simple-toast/styled.jsx Outdated Show resolved Hide resolved
components/simple-toast/styled.jsx Outdated Show resolved Hide resolved
@korbinancell korbinancell merged commit 528cce1 into Faithlife:master Dec 14, 2020
@RobertBolender RobertBolender mentioned this pull request Dec 22, 2020
40 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants