Skip to content

Commit 5bd61e7

Browse files
emmenkoemmenko
authored
feat(spacings): support justify-content prop for Inline/Stack components (#557)
* feat(spacings): support justify-content prop for Inline/Stack components. Fixes #552 * chore: add vrt for inline spacing with justify-content * refactor: remove justifyContent from stack component (not useful) * chore: typo
1 parent 65b150e commit 5bd61e7

9 files changed

+79
-35
lines changed

‎src/components/spacings/inline/README.md

+6-5
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,12 @@ import { Spacings } from '@commercetools-frontend/ui-kit';
1818

1919
## Properties
2020

21-
| Props | Type | Required | Values | Default |
22-
| ------------ | ---------------- | :------: | ----------------------------------------------------------- | ----------- |
23-
| `scale` | `String` | - | `['xs', 's', 'm', 'l', 'xl']` | `s` |
24-
| `alignItems` | `oneOf` | - | `['stretch', 'flexStart', 'flexEnd', 'center', 'baseline']` | `flexStart` |
25-
| `children` | `PropTypes.node` | - | - | - |
21+
| Props | Type | Required | Values | Default |
22+
| ---------------- | ---------------- | :------: | --------------------------------------------------------------------------------------- | ------------ |
23+
| `scale` | `String` | - | `['xs', 's', 'm', 'l', 'xl']` | `s` |
24+
| `alignItems` | `oneOf` | - | `['stretch', 'flex-start', 'flex-end', 'center', 'baseline']` | `flex-start` |
25+
| `justifyContent` | `oneOf` | - | `['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly']` | `flex-start` |
26+
| `children` | `PropTypes.node` | - | - | - |
2627

2728
## Scales
2829

‎src/components/spacings/inline/inline.js

+14-2
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,29 @@ Inline.propTypes = {
1414
scale: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
1515
alignItems: PropTypes.oneOf([
1616
'stretch',
17+
'flex-start',
18+
'flex-end',
19+
'center',
20+
'baseline',
21+
// Deprecated
1722
'flexStart',
1823
'flexEnd',
24+
]),
25+
justifyContent: PropTypes.oneOf([
26+
'flex-start',
27+
'flex-end',
1928
'center',
20-
'baseline',
29+
'space-between',
30+
'space-around',
31+
'space-evenly',
2132
]),
2233
children: PropTypes.node,
2334
};
2435

2536
Inline.defaultProps = {
2637
scale: 's',
27-
alignItems: 'flexStart',
38+
alignItems: 'flex-start',
39+
justifyContent: 'flex-start',
2840
};
2941

3042
export default Inline;

‎src/components/spacings/inline/inline.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ storiesOf('Components|Spacings', module)
5454
.add('Inline', () => {
5555
const alignItems = select(
5656
'Align items',
57-
['flexStart', 'center', 'flexEnd', 'stretch', 'baseline'],
57+
['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
5858
'stretch'
5959
);
6060
return (

‎src/components/spacings/inline/inline.styles.js

+6-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import { css } from '@emotion/core';
22
import vars from '../../../../materials/custom-properties';
33

4-
const getAlignItems = alignment => {
4+
const getAlignItem = alignment => {
55
switch (alignment) {
6-
case 'center':
7-
return `align-items: center;`;
86
case 'flexStart':
9-
return `align-items: flex-start;`;
7+
return `flex-start`;
108
case 'flexEnd':
11-
return `align-items: flex-end;`;
12-
case 'stretch':
13-
return `align-items: stretch;`;
9+
return `flex-end`;
1410
default:
15-
return ``;
11+
return alignment;
1612
}
1713
};
1814

@@ -35,7 +31,8 @@ const getMargin = scale => {
3531

3632
export default props => css`
3733
display: flex;
38-
${getAlignItems(props.alignItems)}
34+
align-items: ${getAlignItem(props.alignItems)};
35+
justify-content: ${props.justifyContent};
3936
4037
> * + * {
4138
margin: 0 0 0 ${getMargin(props.scale)};

‎src/components/spacings/spacings.visualroute.js

+32-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import styled from '@emotion/styled';
4-
import { Spacings, Text } from 'ui-kit';
4+
import { Spacings, Text, Constraints } from 'ui-kit';
55
import { Suite, Spec } from '../../../test/percy';
66

77
export const routePath = '/spacings';
@@ -105,7 +105,7 @@ const insetSquishSizes = [
105105
{ name: 'l', pixels: '16px x 32px' },
106106
];
107107

108-
const flexProps = ['stretch', 'flexStart', 'flexEnd', 'center'];
108+
const flexProps = ['stretch', 'flex-start', 'flex-end', 'center'];
109109
const exampleHeights = ['50px', '60px', '76px', '40px', '66px'];
110110

111111
const StackExample = ({ alignItems }) => (
@@ -223,5 +223,35 @@ export const component = () => (
223223
<StackExample alignItems={prop} />
224224
</Spec>
225225
))}
226+
{[
227+
'flex-start',
228+
'flex-end',
229+
'center',
230+
'space-between',
231+
'space-around',
232+
'space-evenly',
233+
].map(prop => (
234+
<Spec
235+
key={`inline-justify-${prop}`}
236+
label={`Inline - when justifyContent is ${prop}`}
237+
>
238+
<View>
239+
<Constraints.Horizontal constraint="scale">
240+
<Spacings.Inline
241+
scale="s"
242+
alignItems="center"
243+
justifyContent={prop}
244+
>
245+
<div>
246+
<Text.Body>{'Text on the left'}</Text.Body>
247+
</div>
248+
<div>
249+
<Text.Body>{'Text on the right'}</Text.Body>
250+
</div>
251+
</Spacings.Inline>
252+
</Constraints.Horizontal>
253+
</View>
254+
</Spec>
255+
))}
226256
</Suite>
227257
);

‎src/components/spacings/stack/README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ import { Spacings } from '@commercetools-frontend/ui-kit';
1818

1919
## Properties
2020

21-
| Props | Type | Required | Values | Default |
22-
| ------------ | ---------------- | :------: | ----------------------------------------------- | ----------- |
23-
| `scale` | `String` | - | `['xs', 's', 'm', 'l', 'xl']` | `s` |
24-
| `alignItems` | `oneOf` | - | `['stretch', 'flexStart', 'flexEnd', 'center']` | `flexStart` |
25-
| `children` | `PropTypes.node` | - | - | - |
21+
| Props | Type | Required | Values | Default |
22+
| ------------ | ---------------- | :------: | ------------------------------------------------- | ------------ |
23+
| `scale` | `String` | - | `['xs', 's', 'm', 'l', 'xl']` | `s` |
24+
| `alignItems` | `oneOf` | - | `['stretch', 'flex-start', 'flex-end', 'center']` | `flex-start` |
25+
| `children` | `PropTypes.node` | - | - | - |
2626

2727
## Scales
2828

‎src/components/spacings/stack/stack.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,15 @@ Stack.displayName = 'Stack';
1313
Stack.propTypes = {
1414
scale: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
1515
children: PropTypes.node,
16-
alignItems: PropTypes.oneOf(['stretch', 'flexStart', 'flexEnd', 'center']),
16+
alignItems: PropTypes.oneOf([
17+
'stretch',
18+
'flex-start',
19+
'flex-end',
20+
'center',
21+
// Deprecated
22+
'flexStart',
23+
'flexEnd',
24+
]),
1725
};
1826

1927
Stack.defaultProps = {

‎src/components/spacings/stack/stack.story.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ storiesOf('Components|Spacings', module)
3838
.add('Stack', () => {
3939
const alignItems = select(
4040
'Align items',
41-
['flexStart', 'center', 'flexEnd', 'stretch'],
41+
['flex-start', 'center', 'flex-end', 'stretch'],
4242
'stretch'
4343
);
4444
return (

‎src/components/spacings/stack/stack.styles.js

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
11
import { css } from '@emotion/core';
22
import vars from '../../../../materials/custom-properties';
33

4-
const getAlignItems = alignment => {
4+
const getAlignItem = alignment => {
55
switch (alignment) {
6-
case 'center':
7-
return `align-items: center;`;
86
case 'flexStart':
9-
return `align-items: flex-start;`;
7+
return `flex-start`;
108
case 'flexEnd':
11-
return `align-items: flex-end;`;
12-
case 'stretch':
13-
return `align-items: stretch;`;
9+
return `flex-end`;
1410
default:
15-
return ``;
11+
return alignment;
1612
}
1713
};
1814

@@ -36,7 +32,7 @@ const getMargin = scale => {
3632
export default props => css`
3733
display: flex;
3834
flex-direction: column;
39-
${getAlignItems(props.alignItems)}
35+
align-items: ${getAlignItem(props.alignItems)};
4036
4137
> * + * {
4238
margin: ${getMargin(props.scale)} 0 0;

0 commit comments

Comments
 (0)