Skip to content
This repository was archived by the owner on Aug 31, 2021. It is now read-only.

Updates Page and PageHeader components to use Fela #102

Closed
wants to merge 6 commits into from

Conversation

manatarms
Copy link
Contributor

Few things to Note in this PR.
The Page component does not have any styles that we apply to it specifically. I have put in the scaffolding for Fela, in case we decide to put in styles during backbone-react migration.
If someone has objections to this I will revert to the original component, but it wont support Fela.

@jwineman jwineman mentioned this pull request Mar 17, 2017
33 tasks
@manatarms manatarms self-assigned this Mar 17, 2017
@manatarms
Copy link
Contributor Author

Just a reminder. Don't merge this till we know what to do with Fela components.

@tajo
Copy link
Contributor

tajo commented Mar 17, 2017

please rebase

);
}
}
const styles = props => {
Copy link
Contributor

Choose a reason for hiding this comment

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

const styles = () => ({})
is more concise.

);
}
}
const styles = props => {
Copy link
Contributor

@sejoker sejoker Mar 22, 2017

Choose a reason for hiding this comment

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

I recommend using destructuring:

const styles = ({ theme }) => ({
    '& h1': {
      marginBottom: theme.marginBottom
     },
    '& p': {
       marginTop: theme.marginTop,
       fontSize: theme.fontSize,
      color: theme.defaultColor
     }
})

const PageHeader = ({ title, subtitle, className }) => (
<header className={className}>
<h1 className={className}>{title}</h1>
{subtitle && <p className={className}>{subtitle}</p>}
Copy link
Contributor

Choose a reason for hiding this comment

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

before your changes header and subtitle had different classNames, now you apply the same. It won't work like you expect.

@@ -2,7 +2,7 @@

exports[`should render 1`] = `
<article
className="cf-page"
className=""
Copy link
Contributor

Choose a reason for hiding this comment

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

this is an indication that something is broken, fela should always assign a className value.

@tajo
Copy link
Contributor

tajo commented Mar 22, 2017

In case you need to assign multiple classNames to one React Component, you should split it into multiple React components. One component = 1 classname.

@tajo
Copy link
Contributor

tajo commented Apr 1, 2017

In case you need to assign multiple classNames to one React Component, you should split it into multiple React components. One component = 1 classname

Not true anymore. I've added createComponentStyles function into cf-style-container for this purpose. It now in this PR. See the usage.

Anyway, your current solution doesn't work. You can't assign the same className to different nodes.

@manatarms
Copy link
Contributor Author

manatarms commented Apr 3, 2017

Should I still make these changes in this PR? Or open a new one with the updated migration changes?

Copy link
Contributor

@wyuenho wyuenho left a comment

Choose a reason for hiding this comment

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

Convert this back to ES6 classes please. We also export the styled component by default now. The theme is also sorely missing a lot of styles.

@wyuenho
Copy link
Contributor

wyuenho commented Apr 3, 2017

Also, please coordinate with #106

@manatarms
Copy link
Contributor Author

Closing this out because @jwineman is working with design to break up heading into distinct components.

@manatarms manatarms closed this Apr 7, 2017
@manatarms manatarms deleted the fela-component-page branch April 18, 2017 22:04
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants