Skip to content

Commit

Permalink
Merge pull request #65 from dabapps/spaced-group
Browse files Browse the repository at this point in the history 
Spaced group
  • Loading branch information
@JakeSidSmith
JakeSidSmith authored Jun 6, 2017
2 parents 0f45dcf + 021eaf7 commit ab94161
Show file tree
Hide file tree
Showing 11 changed files with 247 additions and 90 deletions.
171 changes: 92 additions & 79 deletions docs/src/ts/buttons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ import {
CodeBlock,
Column,
Row,
Section
Section,
SpacedGroup
} from '../../../src/ts';

const Buttons = () => (
Expand All @@ -23,33 +24,35 @@ const Buttons = () => (
Demo
</h3>
<p>
<Button>
Default
</Button>
<Button disabled>
Disabled
</Button>
<Button type="primary">
Primary
</Button>
<Button type="secondary">
Secondary
</Button>
<Button type="tertiary">
Tertiary
</Button>
<Button type="info">
Info
</Button>
<Button type="success">
Success
</Button>
<Button type="warning">
Warning
</Button>
<Button type="error">
Error
</Button>
<SpacedGroup className="margin-vertical-base">
<Button>
Default
</Button>
<Button disabled>
Disabled
</Button>
<Button type="primary">
Primary
</Button>
<Button type="secondary">
Secondary
</Button>
<Button type="tertiary">
Tertiary
</Button>
<Button type="info">
Info
</Button>
<Button type="success">
Success
</Button>
<Button type="warning">
Warning
</Button>
<Button type="error">
Error
</Button>
</SpacedGroup>
</p>

<p>
Expand All @@ -74,21 +77,25 @@ const Buttons = () => (
</p>

<p>
<a href="#" className="button">
Link as button
</a>
<a href="#" className="button primary">
Link as primary button
</a>
<a href="#" className="button error">
Link as error button
</a>
<SpacedGroup className="margin-vertical-base">
<a href="#" className="button">
Link as button
</a>
<a href="#" className="button primary">
Link as primary button
</a>
<a href="#" className="button error">
Link as error button
</a>
</SpacedGroup>
</p>

<p>
<input className="button" type="button" value="Input as button" />
<input className="button primary" type="button" value="Input as primary button" />
<input className="button error" type="button" value="Input as error button" />
<SpacedGroup className="margin-vertical-base">
<input className="button" type="button" value="Input as button" />
<input className="button primary" type="button" value="Input as primary button" />
<input className="button error" type="button" value="Input as error button" />
</SpacedGroup>
</p>
</Column>
</Row>
Expand All @@ -100,33 +107,35 @@ const Buttons = () => (
<CodeBlock language="javascript">
{`
<p>
<Button>
Default
</Button>
<Button disabled>
Disabled
</Button>
<Button type="primary">
Primary
</Button>
<Button type="secondary">
Secondary
</Button>
<Button type="tertiary">
Tertiary
</Button>
<Button type="info">
Info
</Button>
<Button type="success">
Success
</Button>
<Button type="warning">
Warning
</Button>
<Button type="error">
Error
</Button>
<SpacedGroup className="margin-vertical-base">
<Button>
Default
</Button>
<Button disabled>
Disabled
</Button>
<Button type="primary">
Primary
</Button>
<Button type="secondary">
Secondary
</Button>
<Button type="tertiary">
Tertiary
</Button>
<Button type="info">
Info
</Button>
<Button type="success">
Success
</Button>
<Button type="warning">
Warning
</Button>
<Button type="error">
Error
</Button>
</SpacedGroup>
</p>
<p>
Expand All @@ -151,21 +160,25 @@ const Buttons = () => (
</p>
<p>
<a href="#" className="button">
Link as button
</a>
<a href="#" className="button primary">
Link as primary button
</a>
<a href="#" className="button error">
Link as error button
</a>
<SpacedGroup className="margin-vertical-base">
<a href="#" className="button">
Link as button
</a>
<a href="#" className="button primary">
Link as primary button
</a>
<a href="#" className="button error">
Link as error button
</a>
</SpacedGroup>
</p>
<p>
<input className="button" type="button" value="Input as button" />
<input className="button primary" type="button" value="Input as primary button" />
<input className="button error" type="button" value="Input as error button" />
<SpacedGroup className="margin-vertical-base">
<input className="button" type="button" value="Input as button" />
<input className="button primary" type="button" value="Input as primary button" />
<input className="button error" type="button" value="Input as error button" />
</SpacedGroup>
</p>
`}
</CodeBlock>
Expand Down
6 changes: 4 additions & 2 deletions docs/src/ts/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import Inputs from './inputs';
import Ipsum from './ipsum';
import Modals from './modals';
import Sections from './sections';
import SpacedGroups from './spaced-groups';
import Tables from './tables';
import TabDemo from './tabs';
import Wells from './wells';
Expand Down Expand Up @@ -60,12 +61,13 @@ class App extends React.Component<{}, void> {
<Alerts />
<Buttons />
<CodeBlocks />
<ContentBoxes />
<Grid />
<Inputs />
<Ipsum />
<ContentBoxes />
<Sections />
<Modals />
<Sections />
<SpacedGroups />
<TabDemo />
<Tables />
<Wells />
Expand Down
91 changes: 91 additions & 0 deletions docs/src/ts/spaced-groups.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import * as React from 'react';

import {
Button,
CodeBlock,
Column,
Row,
Section,
SpacedGroup
} from '../../../src/ts';

const SpacedGroups = () => (
<Section>
<Row>
<Column>
<h2>
Spaced Groups
</h2>
</Column>
</Row>
<Row>
<Column>
<h3>
Demo
</h3>

<p>
<SpacedGroup>
<Button>
Cancel
</Button>
<Button type="primary">
Continue
</Button>
</SpacedGroup>
</p>

<p>
<SpacedGroup>
<a>
Link 1
</a>
<a>
Link 2
</a>
<a>
Link 3
</a>
</SpacedGroup>
</p>
</Column>
</Row>
<Row>
<Column>
<h3>
Code
</h3>
<CodeBlock language="javascript">
{`
<p>
<SpacedGroup>
<Button>
Cancel
</Button>
<Button type="primary">
Continue
</Button>
</SpacedGroup>
</p>
<p>
<SpacedGroup>
<a>
Link 1
</a>
<a>
Link 2
</a>
<a>
Link 3
</a>
</SpacedGroup>
</p>
`}
</CodeBlock>
</Column>
</Row>
</Section>
);

export default SpacedGroups;
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "roe",
"version": "0.4.7",
"version": "0.4.8",
"description": "A Collection of React Components for Project Development",
"main": "dist/js/index.js",
"types": "dist/js/index.d.ts",
Expand Down
8 changes: 0 additions & 8 deletions src/less/buttons.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,6 @@
}
}

&:not(.block) {
margin-right: @margin-base;

&:last-child {
margin-right: 0;
}
}

&.block + .button.block {
margin-top: @margin-base;
}
Expand Down
1 change: 1 addition & 0 deletions src/less/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
@import 'content-box.less';
@import 'modals.less';
@import 'tabs.less';
@import 'spaced-group.less';
// NOTE: float, hide & spacing should remaing after other imports
@import 'float.less';
@import 'hide.less';
Expand Down
8 changes: 8 additions & 0 deletions src/less/spaced-group.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.spaced-group > * { // lesshint universalSelector: false
display: inline-block;
margin-right: @margin-base;

&:last-child {
margin-right: 0;
}
}
1 change: 1 addition & 0 deletions src/ts/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export { InputGroupAddon } from './input-group-addon';
export * from './modals';
export { Row } from './row';
export { Section } from './section';
export { SpacedGroup } from './spaced-group';
export * from './tabs';
export * from './tables';
export { Well } from './well';
12 changes: 12 additions & 0 deletions src/ts/spaced-group.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as classNames from 'classnames';
import * as React from 'react';

export const SpacedGroup: React.SFC<React.HTMLProps<HTMLSpanElement>> = (props) => {
const { children, className, ...remainingProps } = props;

return (
<span {...remainingProps} className={classNames(['spaced-group', className])}>
{children}
</span>
);
};
Loading

0 comments on commit ab94161

Please sign in to comment.