Skip to content

Commit

Permalink
fix(Flex): Update gutter prop name to gap
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: To be more aligned with Grid term of spacing, renamed Flex prop gutter to gap
  • Loading branch information
@HHogg
HHogg committed Feb 18, 2019
1 parent 674cd76 commit a5eed99
Show file tree
Hide file tree
Showing 20 changed files with 80 additions and 81 deletions.
2 changes: 1 addition & 1 deletion site/components/Components/Appear.js
View file
Expand Up @@ -23,7 +23,7 @@ export default class ComponentAppear extends Component {
<DocumentationPage { ...this.props }>
<ComponentExample>
<Appear { ...this.state.Appear }>
<Flex direction="horizontal" gutter="x3">
<Flex direction="horizontal" gap="x3">
<RenderRepeat count={ 3 }>
{ (n) => (
<Flex
Expand Down
2 changes: 1 addition & 1 deletion site/components/Components/Button.js
View file
Expand Up @@ -19,7 +19,7 @@ export default class ComponentButton extends Component {
return (
<DocumentationPage { ...this.props }>
<ComponentExample>
<Flex direction="horizontal" gutter="x4">
<Flex direction="horizontal" gap="x4">
<Flex direction="horizontal" grow>
<Buttons { ...this.state.Buttons } grow>
<Button { ...this.state.Button }>Lorem ipsum</Button>
Expand Down
14 changes: 7 additions & 7 deletions site/components/Components/CodeBlock.js
View file
Expand Up @@ -16,7 +16,7 @@ const css = `@keyframes AnimationExampleSpin {
animation-timing-function: linear;
}`;

const html = `<div class="Base Flex Flex--align-horz-middle Flex--align-vert-middle Flex--horizontal Flex--gutter-x4">
const html = `<div class="Base Flex Flex--align-horz-middle Flex--align-vert-middle Flex--horizontal Flex--gap-x4">
<div class="Base Flex">
<div class="Base Text Text--strong">Lorem</div>
</div>
Expand Down Expand Up @@ -44,7 +44,7 @@ import { Flex, Text } from 'preshape';
export default class MyPage extends Component {
render() {
return (
<Flex alignChildren="middle" direction="horizontal" gutter="x4">
<Flex alignChildren="middle" direction="horizontal" gap="x4">
<Flex><Text strong>Lorem</Text></Flex>
<Flex><Text strong>Ipsum</Text></Flex>
</Flex>
Expand All @@ -62,12 +62,12 @@ const json = `[
]`;

const languageExamples = {
css,
html,
js,
css: css,
html: html,
js: js,
javascript: js,
jsx,
json,
jsx: jsx,
json: json,
};

export default class ComponentCodeBlock extends Component {
Expand Down
4 changes: 2 additions & 2 deletions site/components/Components/Flex.js
View file
Expand Up @@ -15,7 +15,7 @@ export default class ComponentFlex extends Component {
Flex: {
alignChildren: 'middle',
direction: 'horizontal',
gutter: 'x3',
gap: 'x3',
initial: 'content',
},
};
Expand All @@ -28,7 +28,7 @@ export default class ComponentFlex extends Component {
'alignChildrenHorizontal',
'alignChildrenVertical',
'direction',
'gutter',
'gap',
];

const childProps = [
Expand Down
2 changes: 1 addition & 1 deletion site/components/Documentation/Documentation.js
View file
Expand Up @@ -23,7 +23,7 @@ export default class Documentation extends Component {
alignChildrenHorizontal="between"
alignChildrenVertical="middle"
direction="horizontal"
gutter="x2">
gap="x2">
<Flex>
<Link to="/">
<LogoWithText />
Expand Down
6 changes: 3 additions & 3 deletions site/components/Documentation/DocumentationPage.js
View file
Expand Up @@ -38,7 +38,7 @@ export default class DocumentationPage extends Component {
<Flex
alignChildrenVertical="middle"
direction="horizontal"
gutter="x1">
gap="x1">
<Flex>
<Icon name="ChevronLeft" size="1rem" />
</Flex>
Expand Down Expand Up @@ -76,7 +76,7 @@ export default class DocumentationPage extends Component {
<Flex
alignChildrenVertical="middle"
direction="horizontal"
gutter="x1">
gap="x1">
<Flex>
<Icon name="ChevronLeft" size="1rem" />
</Flex>
Expand All @@ -97,7 +97,7 @@ export default class DocumentationPage extends Component {
<Flex
alignChildrenVertical="middle"
direction="horizontal"
gutter="x1">
gap="x1">
<Flex>
{ next.name }
</Flex>
Expand Down
3 changes: 1 addition & 2 deletions site/components/Landing/Landing.js
View file
Expand Up @@ -3,7 +3,6 @@ import React, { Component } from 'react';
import { Base, Buttons, Button, Flex, Link, List, ListItem, Responsive, Text } from 'preshape';
import { version } from '../../../package.json';
import { widthMedium, widthSmall } from '../Root';
import componentsList from '../Components';
import landingSections from '../LandingSections';
import LandingSection from './LandingSection';
import Logo from '../Logo/Logo';
Expand Down Expand Up @@ -31,7 +30,7 @@ export default class Landing extends Component {
alignChildrenHorizontal="middle"
alignChildrenVertical="end"
direction={ match(widthMedium) ? 'horizontal' : 'vertical' }
gutter="x8">
gap="x8">
<Flex shrink><Logo height="6rem" width="6rem" /></Flex>
<Flex shrink>
<Text align={ match(widthMedium) ? null : 'middle' } margin="x2" size="x5">Preshape</Text>
Expand Down
12 changes: 6 additions & 6 deletions site/components/LandingSections/Animations.js
View file
Expand Up @@ -29,14 +29,14 @@ export default class Animations extends Component {
<Responsive queries={ [widthSmall, widthMedium] }>
{ (match) => (
<LandingSection { ...this.props }>
<Flex direction="vertical" gutter="x4" margin="x4">
<Flex direction="horizontal" gutter="x4">
<Flex direction="vertical" gap="x4" margin="x4">
<Flex direction="horizontal" gap="x4">
<Flex
borderColor
borderSize="x2"
direction="vertical"
gap="x4"
grow
gutter="x4"
padding="x4">
<Flex
borderColor
Expand Down Expand Up @@ -73,8 +73,8 @@ export default class Animations extends Component {
</Flex>

{ match(widthSmall) && (
<Flex direction="vertical" grow gutter="x4">
<Flex direction={ match(widthMedium) ? 'horizontal' : 'vertical' } grow gutter="x2">
<Flex direction="vertical" gap="x4" grow>
<Flex direction={ match(widthMedium) ? 'horizontal' : 'vertical' } grow gap="x2">
<AnimationsIcons time={ this.state.time } />
</Flex>

Expand All @@ -90,7 +90,7 @@ export default class Animations extends Component {
</Flex>

{ !match(widthSmall) && (
<Flex direction="horizontal" gutter="x2">
<Flex direction="horizontal" gap="x2">
<AnimationsIcons time={ this.state.time } />
</Flex>
) }
Expand Down
2 changes: 1 addition & 1 deletion site/components/LandingSections/Guides.js
View file
Expand Up @@ -17,7 +17,7 @@ export default class Guides extends Component {
<Flex
alignChildrenVertical="middle"
direction="horizontal"
gutter="x4">
gap="x4">
<Flex>
<Icon name="File" size="1.5rem" />
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion site/components/LandingSections/Sizing.js
View file
Expand Up @@ -24,7 +24,7 @@ export default class Sizing extends Component {

<Flex
direction={ match(widthMedium) ? 'horizontal' : 'vertical' }
gutter="x4"
gap="x4"
margin="x4">
<Flex
grow
Expand Down
6 changes: 3 additions & 3 deletions site/components/LandingSections/Themes.js
View file
Expand Up @@ -24,7 +24,7 @@ export default class Themes extends Component {
<LandingSection { ...this.props }>
<Flex { ...this.props }
direction={ match(widthMedium) ? 'horizontal' : 'vertical' }
gutter="x4"
gap="x4"
margin="x4">
{ themes.map(({ name, icon, theme }) => (
<Flex grow key={ theme }>
Expand All @@ -36,7 +36,7 @@ export default class Themes extends Component {
<Flex
alignChildren="middle"
direction="horizontal"
gutter="x3">
gap="x3">
<Flex>
<Icon name={ icon } size="2rem" />
</Flex>
Expand All @@ -56,7 +56,7 @@ export default class Themes extends Component {
focal point, the target audience or what time the majority of activty occurs.
</Text>

<Flex direction={ match(widthMedium) ? 'horizontal' : 'vertical' } gutter="x4">
<Flex direction={ match(widthMedium) ? 'horizontal' : 'vertical' } gap="x4">
<Flex grow initial={ match(widthMedium) ? 'none' : null } shrink>
<Text>
The <Link onClick={ () => onChangeTheme('day') }>Day</Link> theme may be better
Expand Down
2 changes: 1 addition & 1 deletion site/components/Logo/LogoWithText.js
View file
Expand Up @@ -8,7 +8,7 @@ export default class LogoWithText extends Component {
<Flex { ...this.props }
alignChildrenVertical="middle"
direction="horizontal"
gutter="x2">
gap="x2">
<Flex><Logo height="1.5rem" width="1.5rem" /></Flex>
<Flex>Preshape</Flex>
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion src/Application/ApplicationDetails.js
View file
Expand Up @@ -19,7 +19,7 @@ export default class ApplicationDetails extends Component {
} = this.props;

return (
<List { ...rest } gutter="x2">
<List { ...rest } gap="x2">
{ github && (
<ListItem separator="|">
<Text size="x1">
Expand Down
6 changes: 3 additions & 3 deletions src/Button/Buttons.js
View file
Expand Up @@ -6,15 +6,15 @@ import Flex from '../Flex/Flex';
export default class Buttons extends Component {
static propTypes = {
/** Spacing applied between child Button items, values are global spacing variables. */
gutter: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
gap: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
/**
* Configures the children Buttons to be joined together.
*/
joined: PropTypes.bool,
};

render() {
const { gutter, joined, ...rest } = this.props;
const { gap, joined, ...rest } = this.props;
const classes = classnames('Buttons', {
'Buttons--joined': joined,
});
Expand All @@ -23,7 +23,7 @@ export default class Buttons extends Component {
<Flex { ...rest }
className={ classes }
direction="horizontal"
gutter={ joined ? null : (gutter || 'x1') } />
gap={ joined ? null : (gap || 'x1') } />
);
}
}
72 changes: 36 additions & 36 deletions src/Flex/Flex.css
View file
Expand Up @@ -43,25 +43,25 @@
.Flex--vertical.Flex--align-vert-around { justify-content: space-around; }
.Flex--vertical.Flex--align-vert-between { justify-content: space-between; }

.Flex--gutter-x1 > .Flex { margin: calc(var(--size--x1) * 0.5); }
.Flex--gutter-x2 > .Flex { margin: calc(var(--size--x2) * 0.5); }
.Flex--gutter-x3 > .Flex { margin: calc(var(--size--x3) * 0.5); }
.Flex--gutter-x4 > .Flex { margin: calc(var(--size--x4) * 0.5); }
.Flex--gutter-x6 > .Flex { margin: calc(var(--size--x6) * 0.5); }
.Flex--gutter-x8 > .Flex { margin: calc(var(--size--x8) * 0.5); }
.Flex--gutter-x10 > .Flex { margin: calc(var(--size--x10) * 0.5); }
.Flex--gutter-x12 > .Flex { margin: calc(var(--size--x12) * 0.5); }
.Flex--gutter-x16 > .Flex { margin: calc(var(--size--x16) * 0.5); }
.Flex--gap-x1 > .Flex { margin: calc(var(--size--x1) * 0.5); }
.Flex--gap-x2 > .Flex { margin: calc(var(--size--x2) * 0.5); }
.Flex--gap-x3 > .Flex { margin: calc(var(--size--x3) * 0.5); }
.Flex--gap-x4 > .Flex { margin: calc(var(--size--x4) * 0.5); }
.Flex--gap-x6 > .Flex { margin: calc(var(--size--x6) * 0.5); }
.Flex--gap-x8 > .Flex { margin: calc(var(--size--x8) * 0.5); }
.Flex--gap-x10 > .Flex { margin: calc(var(--size--x10) * 0.5); }
.Flex--gap-x12 > .Flex { margin: calc(var(--size--x12) * 0.5); }
.Flex--gap-x16 > .Flex { margin: calc(var(--size--x16) * 0.5); }

.Flex--gutter-x1 > .Flex,
.Flex--gutter-x2 > .Flex,
.Flex--gutter-x3 > .Flex,
.Flex--gutter-x4 > .Flex,
.Flex--gutter-x6 > .Flex,
.Flex--gutter-x8 > .Flex,
.Flex--gutter-x10 > .Flex,
.Flex--gutter-x12 > .Flex,
.Flex--gutter-x16 > .Flex {
.Flex--gap-x1 > .Flex,
.Flex--gap-x2 > .Flex,
.Flex--gap-x3 > .Flex,
.Flex--gap-x4 > .Flex,
.Flex--gap-x6 > .Flex,
.Flex--gap-x8 > .Flex,
.Flex--gap-x10 > .Flex,
.Flex--gap-x12 > .Flex,
.Flex--gap-x16 > .Flex {
&:first-child {
margin-top: 0;
margin-left: 0;
Expand All @@ -73,28 +73,28 @@
}
}

.Flex--vertical.Flex--gutter-x1 > .Flex,
.Flex--vertical.Flex--gutter-x2 > .Flex,
.Flex--vertical.Flex--gutter-x3 > .Flex,
.Flex--vertical.Flex--gutter-x4 > .Flex,
.Flex--vertical.Flex--gutter-x6 > .Flex,
.Flex--vertical.Flex--gutter-x8 > .Flex,
.Flex--vertical.Flex--gutter-x10 > .Flex,
.Flex--vertical.Flex--gutter-x12 > .Flex,
.Flex--vertical.Flex--gutter-x16 > .Flex {
.Flex--vertical.Flex--gap-x1 > .Flex,
.Flex--vertical.Flex--gap-x2 > .Flex,
.Flex--vertical.Flex--gap-x3 > .Flex,
.Flex--vertical.Flex--gap-x4 > .Flex,
.Flex--vertical.Flex--gap-x6 > .Flex,
.Flex--vertical.Flex--gap-x8 > .Flex,
.Flex--vertical.Flex--gap-x10 > .Flex,
.Flex--vertical.Flex--gap-x12 > .Flex,
.Flex--vertical.Flex--gap-x16 > .Flex {
margin-right: 0;
margin-left: 0;
}

.Flex--horizontal.Flex--gutter-x1 > .Flex,
.Flex--horizontal.Flex--gutter-x2 > .Flex,
.Flex--horizontal.Flex--gutter-x3 > .Flex,
.Flex--horizontal.Flex--gutter-x4 > .Flex,
.Flex--horizontal.Flex--gutter-x6 > .Flex,
.Flex--horizontal.Flex--gutter-x8 > .Flex,
.Flex--horizontal.Flex--gutter-x10 > .Flex,
.Flex--horizontal.Flex--gutter-x12 > .Flex,
.Flex--horizontal.Flex--gutter-x16 > .Flex {
.Flex--horizontal.Flex--gap-x1 > .Flex,
.Flex--horizontal.Flex--gap-x2 > .Flex,
.Flex--horizontal.Flex--gap-x3 > .Flex,
.Flex--horizontal.Flex--gap-x4 > .Flex,
.Flex--horizontal.Flex--gap-x6 > .Flex,
.Flex--horizontal.Flex--gap-x8 > .Flex,
.Flex--horizontal.Flex--gap-x10 > .Flex,
.Flex--horizontal.Flex--gap-x12 > .Flex,
.Flex--horizontal.Flex--gap-x16 > .Flex {
margin-top: 0;
margin-bottom: 0;
}
8 changes: 4 additions & 4 deletions src/Flex/Flex.js
View file
Expand Up @@ -21,10 +21,10 @@ export default class Flex extends Component {
className: PropTypes.string,
/** Direction on which way to flex items. */
direction: PropTypes.oneOf(['horizontal', 'vertical']),
/** Spacing applied between child flex items, values are global spacing variables. */
gap: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
/** Flex item property if it should grow with available space. */
grow: PropTypes.bool,
/** Spacing applied between child flex items, values are global spacing variables. */
gutter: PropTypes.oneOf(['x1', 'x2', 'x3', 'x4', 'x6', 'x8', 'x10', 'x12', 'x16']),
/** Initial width to flex from for a child item. */
initial: PropTypes.oneOf(['content', 'container', 'none']),
/** Flex item property if it should shrink. */
Expand All @@ -42,7 +42,7 @@ export default class Flex extends Component {
className,
direction,
grow,
gutter,
gap,
initial,
shrink,
wrap,
Expand All @@ -55,7 +55,7 @@ export default class Flex extends Component {
[`Flex--align-vert-${alignChildrenVertical}`]: alignChildrenVertical,
[`Flex--${direction}`]: direction,
[`Flex--initial-${initial}`]: initial,
[`Flex--gutter-${gutter}`]: gutter,
[`Flex--gap-${gap}`]: gap,
'Flex--grow': grow,
'Flex--shrink': shrink,
'Flex--wrap': wrap,
Expand Down

0 comments on commit a5eed99

Please sign in to comment.