jbetancur / react-flexybox Goto Github PK

View Code? Open in Web Editor NEW

9.0 9.0 0.0 2.22 MB

Flexbox in React made simple

Home Page: https://react-flexybox-demo.netlify.com/

License: MIT License

JavaScript 100.00%

css demo flex-box flex-items flexbox react react-flexbox

react-flexybox's People

Contributors

Stargazers

Watchers

react-flexybox's Issues

window not defined when using gastby

Change the build to output for both cjs and umd but separately

[README] - update contribution and demo commands

[Maintenance] - Upgrade dependancies, babel7, tests

[PropTypes] - Failed prop type: Invalid prop `alignItems` of value `baseline` supplied to `Row`

add "baseline" to proptypes

[Row] - style is missing height prop

Add height prop to row

const RowStyle = styled(agnosticComponent)`
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  width: 100%;
  flex-direction: ${props => props.direction};
  flex-wrap: ${props => props.wrap};
  justify-content: ${props => (props.center ? 'center' : props.justifyContent)};
  align-items: ${props => (props.center ? 'center' : props.alignItems)};
  align-content: ${props => props.alignContent};
  ${props => props.debug && 'border: 1px solid red'};
  ${props => props.paddingTop && `padding-top: ${props.paddingTop}`};
  ${props => props.paddingLeft && `padding-left: ${props.paddingLeft}`};
  ${props => props.paddingBottom && `padding-bottom: ${props.paddingBottom}`};
  ${props => props.paddingRight && `padding-right: ${props.paddingRight}`};
  ${props => props.padding && `padding: ${props.padding}`};
  ${props => (props.fill ? 'height: 100%' : props.height)};
`;

[CI] - Migrate to Circle CI 2

Move Demo to Storybook

blacklist colDivisions and gutter tags for Row component

Upgrade to React 16

cut a 0.5.0 version for use with React 16

Row: add debug option to add bounding to flex boxes for easier troubleshooting

Row: allows columns to be smaller increments than 12 (e.g. 24)

Add new props/shortcuts

padding props
center shortcut
fill shortcut

Remove the need to use lodash.omit as it is deemed slow

Potentially use _.pick
Use destructing if possible

Code in questions: https://github.com/jbetancur/react-flexybox/blob/master/src/utils/styled.js

[Col] add xl media query

handle sizes > 1200px

<Col xl={1}>...

[Col] - minWidth is not being set

Col: add alignSelf property

[Testing] Add Tests back once testing framework is fixed

[Demo] fix container fluid section to actually be fluid

Consider exposing a Context Provider for global settings

e.g. gutters, media widths

[DEMO] - Fix AlignSelf section

The code block is missing the alignSelf tags

Row throws exception if no Col children are defined

Row: Fix bug where center property was broken by #13

[Row] In some cases - props are not being passed down to Cols

Context

if (child && child.type === Col) seems to not always resolve. Which seems to be the problem

Expected Behavior

Row should pass props down to Col Instance components only

This was discovered when using Gatsby 2.0 - but I cannot dupe this in any other app that uses react-flexybox

Row: set height feature

[Col] Fix Warning: Failed prop type: Invalid prop `alignSelf` of value `` supplied to `Col`, expected one of ["auto","flex-start","flex-end","center","baseline","stretch"].

no impact - just annoying

Create Demo

Aside from Codepen - create a full working demo

[DIST] - move UMD exports to CDN

[Rollup] - Convert to Rollup

[Col] - order/reverse on size

<Row>
   <Col orderXs="1"></Col>
   <Col orderXs="0"></Col>
</Row>

Or reverse

<Row reverseXS reverseSM>
   <Col orderXs="1"></Col>
   <Col orderXs="0"></Col>
</Row>

jbetancur / react-flexybox Goto Github PK

react-flexybox's People

Contributors

Stargazers

Watchers

react-flexybox's Issues

Context

Expected Behavior

Recommend Projects

Recommend Topics

Recommend Org

Jobs