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.

Sign up for GitHub

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

Jump to bottom

Add styled-system to project #1711

Merged
merged 5 commits into from Nov 3, 2020
Merged

Add styled-system to project #1711

merged 5 commits into from Nov 3, 2020

Conversation

samajammin
Copy link
Contributor

@samajammin samajammin commented Oct 30, 2020 •
edited

Description

  • Add styled-system to project: https://styled-system.com/
  • Move src/components/Theme.js → src/theme.js (since it's not actually a component)

Related Issue

None

@github-actions github-actions bot added needs review 👀 Review is needed for this issue or pull request content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies labels Oct 30, 2020
samajammin
samajammin commented Oct 30, 2020
View reviewed changes
src/components/ButtonLink.js
@@ -1,17 +1,18 @@
import React from "react"
import styled from "styled-components"
import { margin } from "styled-system"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FYI @ryancreatescopy - here's an example of how to add this to a component.

  1. import from styled-system (e.g. import { margin } from "styled-system")
  2. add to a styled component (e.g. ${margin})
  3. pass all props the component receives to the styled component (see ...props code below)

That allows us to pass all margin props (m, mt, mr, mb, ml) to the component.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I think this makes sense. Looks good.

@github-actions github-actions bot added the translation 🌍 This is related to our Translation Program label Oct 30, 2020
@samajammin samajammin added design required 🎨 This involves design changes internal 🏠 Internal changes in dependencies/tests or project maintenance tooling 🔧 Changes related to tooling of the project and removed translation 🌍 This is related to our Translation Program labels Oct 30, 2020
@github-actions github-actions bot added the translation 🌍 This is related to our Translation Program label Nov 2, 2020
@samajammin
Copy link
Contributor Author

@ryancreatescopy - I removed the default ButtonLink margin. This is ready for your review!

@ryancreatescopy ryancreatescopy merged commit ddfb27c into dev Nov 3, 2020
@ryancreatescopy ryancreatescopy deleted the styled-system branch November 3, 2020 09:28
@samajammin samajammin mentioned this pull request Nov 4, 2020
Merged
@TylerAPfledderer TylerAPfledderer mentioned this pull request Nov 23, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ryancreatescopy ryancreatescopy ryancreatescopy approved these changes

Assignees
No one assigned
Labels
content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies design required 🎨 This involves design changes internal 🏠 Internal changes in dependencies/tests or project maintenance needs review 👀 Review is needed for this issue or pull request tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@samajammin @ryancreatescopy