gabrielbull / gabrielbull/react-desktop
Refactor common component attributes to be more consistent (I.E. marginTop, etc)
- Dominant language
- JavaScript
- Stars
- 9.5k
- Forks
- 447
- PR merge metrics
- No merged PRs in 30d
Description
Blocked by: #112
We should have one common way to add the props attributes like marginTop, horizontalAlignment, etc to the styling.
For example:
```jsx
import createCss from './createCssForAllComponents';
import styled, { css } from 'react-emotion'
const viewStyle = css`
color: rebeccapurple;
`
class View extends React.Component {
propTypes = {
hidden: PropTypes.boolean,
marginTop: PropTypes.number
}
render() {
const { otherProp, ...props } = this.props;
return
}
}
```
```js
function createMarginCss(css, props) {
for (let prop of in props) {
if (props.hasOwnProperty(prop)) {
switch (prop) {
case 'marginTop': css.extend(...); break; // add margin-top: `${props[prop]}px` here
}
}
}
}
function createHiddenCss(css, props) {
if (props.hidden) {
return css.extend(...); // add display: 'none' here
}
}
export default createCss (css, props) {
css = createMarginCss(css, props);
css = createHiddenCss(css, props);
return css;
}
```
Contributor guide
Research direction
Start by reading the blocking issue #112, then inspect the common component styling entry point named createCssForAllComponents and the View example in this issue. Determine the agreed shared handling for props such as marginTop and hidden across components; the work is done when those attributes use one consistent styling path.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100