Skip to content
Permalink
Browse files

Add flexBasis prop to <Box>

  • Loading branch information...
vadimdemedes committed Mar 18, 2019
1 parent e5f7322 commit cfcc1a7083ef4c1fb8786f7b2179d7df4bfe1e0c
Showing with 81 additions and 0 deletions.
  1. +20 −0 readme.md
  2. +4 −0 src/apply-styles.js
  3. +1 −0 src/components/Box.js
  4. +56 −0 test/flex.js
@@ -458,6 +458,26 @@ See [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).
</Box>
```

###### flexBasis

Type: `number`, `string`<br>

See [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).

```jsx
<Box width={6}>
<Box flexBasis={3}>X</Box>
Y
</Box> //=> 'X Y'
```

```jsx
<Box width={6}>
<Box flexBasis="50%">X</Box>
Y
</Box> //=> 'X Y'
```

###### flexDirection

Type: `string`<br>
@@ -101,6 +101,10 @@ const applyFlexStyles = (node, style) => {
}
}

if (hasOwnProperty(style, 'flexBasis')) {
node.setFlexBasis(style.flexBasis);
}

if (style.alignItems) {
if (style.alignItems === 'flex-start') {
node.setAlignItems(Yoga.ALIGN_FLEX_START);
@@ -25,6 +25,7 @@ export default class Box extends PureComponent {
flexGrow: PropTypes.number,
flexShrink: PropTypes.number,
flexDirection: PropTypes.oneOf(['row', 'row-reverse', 'column', 'column-reverse']),
flexBasis: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
alignItems: PropTypes.oneOf(['flex-start', 'center', 'flex-end']),
justifyContent: PropTypes.oneOf(['flex-start', 'center', 'flex-end', 'space-between', 'space-around']),
unstable__transformChildren: PropTypes.func,
@@ -56,3 +56,59 @@ test('shrink equally', t => {

t.is(output, 'A B C');
});

test('set flex basis with flexDirection="row" container', t => {
const output = renderToString(
<Box width={6}>
<Box flexBasis={3}>
A
</Box>

B
</Box>
);

t.is(output, 'A B');
});

test('set flex basis in percent with flexDirection="row" container', t => {
const output = renderToString(
<Box width={6}>
<Box flexBasis="50%">
A
</Box>

B
</Box>
);

t.is(output, 'A B');
});

test('set flex basis with flexDirection="column" container', t => {
const output = renderToString(
<Box height={6} flexDirection="column">
<Box flexBasis={3}>
A
</Box>

B
</Box>
);

t.is(output, 'A\n\n\nB\n\n');
});

test('set flex basis in percent with flexDirection="column" container', t => {
const output = renderToString(
<Box height={6} flexDirection="column">
<Box flexBasis="50%">
A
</Box>

B
</Box>
);

t.is(output, 'A\n\n\nB\n\n');
});

0 comments on commit cfcc1a7

Please sign in to comment.
You can’t perform that action at this time.