Skip to content
Permalink
Browse files

fix(Grid): Changed API of Grid component to allow setting of min and …

…max width for auto-fit, also aligning naming of spacing with gap.

BREAKING CHANGE:

Grid component, replaced columnAutoFit prop with autoFitWidthMax and autoFitWidthMin props. Replaced gutter prop with gap prop.
  • Loading branch information...
HHogg committed Feb 17, 2019
1 parent 4eacfca commit f0c649018239af8cf8a38fb7fa21e86e109dba1c
@@ -12,8 +12,9 @@ export default class ComponentGrid extends Component {
super(props);
this.state = {
Grid: {
columnCount: 3,
gutter: 'x1',
alignChildren: 'middle',
columnCount: '3',
gap: 'x1',
},
};
}
@@ -48,7 +48,7 @@ export default class Landing extends Component {
Getting Started
</Button>

<Button onClick={ () => push(componentsList[0].to) }>
<Button onClick={ () => push('/#Components') }>
Components
</Button>
</Buttons>
@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { Flex, Grid, GridItem, Link, Text } from 'preshape';
import { Flex, Grid, GridItem, Link, Responsive, Text } from 'preshape';
import { widthMedium, widthSmall } from '../Root';
import BuiltWithHoggIo from './BuiltWithHoggIo';
import BuiltWithPreshape from './BuiltWithPreshape';
import BuiltWithSnakeHeuristics from './BuiltWithSnakeHeuristics';
@@ -24,41 +25,49 @@ const builtWith = [{
export default class BuiltWithGrid extends Component {
render() {
return (
<Grid { ...this.props }
columnWidth="1fr"
gutter="x4">
{ builtWith.map(({ name, description, href, Image }) => (
<GridItem
Component={ Flex }
borderColor
borderSize="x2"
direction="vertical"
key={ name }>
<Flex>
<Image />
</Flex>
<Responsive queries={ [widthSmall, widthMedium] }>
{ (match) => (
<Grid { ...this.props }
columnCount={ match({
[widthMedium]: '3',
[widthSmall]: '2',
}) || '1' }
columnWidth="1fr"
gap="x4">
{ builtWith.map(({ name, description, href, Image }) => (
<GridItem
Component={ Flex }
borderColor
borderSize="x2"
direction="vertical"
key={ name }>
<Flex>
<Image />
</Flex>

<Flex grow paddingHorizontal="x3" paddingVertical="x4">
<Text margin="x1" strong>{ name }</Text>
<Text color="shade-3" margin="x1" size="small">{ description }</Text>
</Flex>
<Flex grow paddingHorizontal="x3" paddingVertical="x4">
<Text margin="x1" strong>{ name }</Text>
<Text color="shade-3" margin="x1" size="small">{ description }</Text>
</Flex>

<Flex
backgroundColor="text-shade-1"
color="background-shade-1">
<Link
align="end"
display="block"
href={ href }
paddingHorizontal="x3"
paddingVertical="x2"
size="small"
strong
uppercase>Check it out</Link>
</Flex>
</GridItem>
)) }
</Grid>
<Flex
backgroundColor="text-shade-1"
color="background-shade-1">
<Link
align="end"
display="block"
href={ href }
paddingHorizontal="x3"
paddingVertical="x2"
size="small"
strong
uppercase>Check it out</Link>
</Flex>
</GridItem>
)) }
</Grid>
) }
</Responsive>
);
}
}
@@ -17,11 +17,11 @@ export default class Components extends Component {
{ (match) => (
<Grid
columnCount={ match({
[widthMedium]: 3,
[widthSmall]: 2,
}) || 1 }
[widthMedium]: '3',
[widthSmall]: '2',
}) || '1' }
columnWidth="1fr"
gutter="x4"
gap="x4"
margin="x6">
{ componentsList.map(({ name, description, to }) => (
<GridItem
@@ -1,16 +1,17 @@
.Grid {
display: grid;
grid-auto-rows: 1fr;
}

.Grid--gutter-x1 { grid-gap: var(--size--x1); }
.Grid--gutter-x2 { grid-gap: var(--size--x2); }
.Grid--gutter-x3 { grid-gap: var(--size--x3); }
.Grid--gutter-x4 { grid-gap: var(--size--x4); }
.Grid--gutter-x6 { grid-gap: var(--size--x6); }
.Grid--gutter-x8 { grid-gap: var(--size--x8); }
.Grid--gutter-x10 { grid-gap: var(--size--x10); }
.Grid--gutter-x12 { grid-gap: var(--size--x12); }
.Grid--gutter-x16 { grid-gap: var(--size--x16); }
.Grid--gap-x1 { grid-gap: var(--size--x1); }
.Grid--gap-x2 { grid-gap: var(--size--x2); }
.Grid--gap-x3 { grid-gap: var(--size--x3); }
.Grid--gap-x4 { grid-gap: var(--size--x4); }
.Grid--gap-x6 { grid-gap: var(--size--x6); }
.Grid--gap-x8 { grid-gap: var(--size--x8); }
.Grid--gap-x10 { grid-gap: var(--size--x10); }
.Grid--gap-x12 { grid-gap: var(--size--x12); }
.Grid--gap-x16 { grid-gap: var(--size--x16); }

.Grid--align-start { justify-content: start; }
.Grid--align-middle { justify-content: center; }
@@ -1,56 +1,46 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import Base from '../Base/Base';
import Flex from '../Flex/Flex';
import './Grid.css';

export default class Grid extends Component {
export default class Grid extends PureComponent {
static propTypes = {
/** */
alignChildren: PropTypes.oneOf(['start', 'middle', 'end']),
/**
* Automatically try to fit as many columns on a row as possible. This
* must be used with `columnWidth` and cannot be used with `columnCount`.
*/
columnAutoFit: PropTypes.bool,
/** An explicit number of columns to place on each row. This can be used
* with `columnWidth`, otherwise the minimum content size is used. This cannot
* be used with columnAutoFit.
*/
columnCount: PropTypes.number,
/** An explicit width of the columns. */
autoFitWidthMax: PropTypes.string,
autoFitWidthMin: PropTypes.string,
className: PropTypes.string,
columnCount: PropTypes.string,
columnWidth: PropTypes.string,
/** Spacing applied between child grid items, values are global spacing variables. */
gutter: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
};

static defaultProps = {
alignChildren: 'middle',
gap: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12']),
};

render() {
const {
alignChildren,
columnAutoFit,
autoFitWidthMax,
autoFitWidthMin,
className,
columnCount,
columnWidth,
gutter,
gap,
...rest
} = this.props;

const classes = classnames('Grid', {
[`Grid--align-${alignChildren}`]: alignChildren,
[`Grid--gap-${gap}`]: gap,
}, className);

const style = {
gridTemplateColumns:
(Number.isInteger(columnCount) && `repeat(${columnCount}, ${columnWidth || 'min-content'})`) ||
(columnAutoFit && columnWidth && `repeat(auto-fit, ${columnWidth}`) || null,
(columnCount && `repeat(${columnCount}, ${columnWidth || 'max-content'})`) ||
((autoFitWidthMin && `repeat(auto-fit, minmax(${autoFitWidthMin}, ${autoFitWidthMax || '1fr'})`) || null),
};

const classes = classnames('Grid', {
[`Grid--gutter-${gutter}`]: gutter,
[`Grid--align-${alignChildren}`]: alignChildren,
});

return (
<Base { ...rest } className={ classes } style={ style } />
<Flex { ...rest } className={ classes } style={ style } />
);
}

}

0 comments on commit f0c6490

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