Skip to content

Commit 07b2ae0

Browse files
jonrohanjonrohan
authored
Merge pull request #344 from primer/import-input-groups
[WIP] Import input groups
2 parents 4b4d1cf + 34355d1 commit 07b2ae0

File tree

8 files changed

+166
-113
lines changed

8 files changed

+166
-113
lines changed

‎.storybook/Octicon.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react'
22
import {storiesOf} from '@storybook/react'
33
import octicons from 'octicons'
4-
import SVGInline from 'react-svg-inline'
54

6-
const Octicon = (props) => {
5+
export const Octicon = (props) => {
76
const {name} = props
87
if (name in octicons) {
9-
return <SVGInline svg={octicons[name].toSVG(props)} />
8+
const svg = octicons[name].toSVG(props)
9+
return <span dangerouslySetInnerHTML={ {__html: svg } } />
1010
} else {
1111
throw new Error(`No such octicon: "${name}"!`)
1212
}

‎.storybook/preview-head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<link rel="stylesheet" href="https://unpkg.com/primer-css@9.2.0/build/build.css">
1+
<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">
22
<script src="https://github.com/site/assets/styleguide.js" async></script>

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
### Added
44
- New module `primer-subhead`. The Subhead is a simple header with a bottom border. It&#39;s designed to be used on settings and configuration pages.
5+
- Importing `.input-group` into `primer-forms` module.
56

67
### Removed
78
- Removing `primer-cards` module.

‎modules/primer-forms/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
@import "./lib/form-select.scss";
44
@import "./lib/form-group.scss";
55
@import "./lib/form-validation.scss";
6+
@import "./lib/input-group.scss";

‎modules/primer-forms/lib/input-group.scss‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.input-group {
2+
display: table;
3+
4+
.form-control {
5+
position: relative;
6+
width: 100%;
7+
8+
&:focus {
9+
z-index: 2;
10+
}
11+
12+
+ .btn {
13+
margin-left: 0;
14+
}
15+
}
16+
17+
// For when you want the input group to behave like inline-block.
18+
&.inline {
19+
display: inline-table;
20+
}
21+
}
22+
23+
.input-group .form-control,
24+
.input-group-button {
25+
display: table-cell;
26+
}
27+
28+
.input-group-button {
29+
width: 1%;
30+
vertical-align: middle; // Match the inputs
31+
}
32+
33+
.input-group .form-control:first-child,
34+
.input-group-button:first-child .btn {
35+
border-top-right-radius: 0;
36+
border-bottom-right-radius: 0;
37+
}
38+
39+
.input-group-button:first-child .btn {
40+
margin-right: -1px;
41+
}
42+
43+
.input-group .form-control:last-child,
44+
.input-group-button:last-child .btn {
45+
border-top-left-radius: 0;
46+
border-bottom-left-radius: 0;
47+
}
48+
49+
.input-group-button:last-child .btn {
50+
margin-left: -1px;
51+
}

‎modules/primer-forms/stories/index.js‎

Lines changed: 91 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,118 @@
11
import React from 'react'
22
import { storiesOf } from '@storybook/react'
33

4+
// sub-stories
5+
import inputGroup from './input-group'
6+
47
storiesOf('Forms', module)
5-
.add('form-control', () => (
6-
<div>
8+
.addDecorator(story => (
9+
<form>
10+
{story()}
11+
</form>
12+
))
13+
.add('form-control', () => (
714
<input className='form-control' type='text' placeholder='Standard input' aria-label='Standard input'/>
8-
</div>
9-
))
10-
.add('input-lg', () => (
11-
<div>
15+
))
16+
.add('input-block', () => (
17+
<input className='form-control input-block' type='text' placeholder='Block input' aria-label='Block input'/>
18+
))
19+
.add('input-group', inputGroup)
20+
.add('input-lg', () => (
1221
<input className='form-control input-lg' type='text' placeholder='Large input' aria-label='Large input'/>
13-
</div>
14-
))
15-
.add('input-sm', () => (
16-
<div>
22+
))
23+
.add('input-sm', () => (
1724
<input className='form-control input-sm' type='text' placeholder='Small input' aria-label='Small input'/>
18-
</div>
19-
))
20-
.add('input-block', () => (
21-
<div>
22-
<input className='form-control input-block' type='text' placeholder='Block input' aria-label='Block input'/>
23-
</div>
24-
))
25-
.add('input-monospace', () => (
26-
<div>
25+
))
26+
.add('input-monospace', () => (
2727
<input className='form-control input-monospace' type='text' placeholder='Monospace input' aria-label='SHA'/>
28-
</div>
29-
))
30-
.add('form-select', () => (
31-
<div>
28+
))
29+
.add('form-select', () => (
3230
<select className='form-select' aria-label='Important decision'>
3331
<option>Select</option>
3432
<option value='option 2'>Option 2</option>
3533
</select>
36-
</div>
37-
))
38-
.add('select-sm', () => (
39-
<div>
34+
))
35+
.add('select-sm', () => (
4036
<select className='form-select select-sm' aria-label='Important decision'>
4137
<option>Select</option>
4238
<option value='option 2'>Option 2</option>
4339
</select>
44-
</div>
45-
))
46-
.add('radio', () => (
47-
<div>
40+
))
41+
.add('radio', () => (
4842
<label>
4943
<input type='radio' id='derp' name='radio'/>
50-
Radio
44+
Radio
5145
</label>
52-
</div>
53-
))
54-
.add('checkbox', () => (
55-
<div>
46+
))
47+
.add('checkbox', () => (
5648
<label>
5749
<input type='checkbox'/>
58-
checkbox
50+
checkbox
5951
</label>
60-
</div>
61-
))
62-
.add('textarea', () => (
63-
<div>
52+
))
53+
.add('textarea', () => (
6454
<textarea className='form-control'>
6555
</textarea>
66-
</div>
67-
))
68-
.add('form-actions', () => (
69-
<div className='form-actions'>
70-
<button type='submit' className='btn btn-primary'>Save changes</button>
71-
<button type='button' className='btn'>Cancel</button>
72-
</div>
73-
))
74-
.add('label highlight', () => (
75-
<div>
76-
<form>
77-
<div className='form-checkbox'>
78-
<label>
79-
<input type='checkbox' checked='checked'/>
80-
<em className='highlight'>Available for hire</em>
81-
</label>
82-
</div>
83-
</form>
84-
</div>
85-
))
86-
.add('form-checkbox-details', () => (
87-
<div className='form-checkbox'>
88-
<label aria-live='polite'>
89-
<input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
90-
Available for hire
91-
<span className='form-checkbox-details text-normal'>
92-
<span className='d-block mb-1'>Available hours per week</span>
93-
<input type='text' name='' className='form-control input-contrast' size='3'/>
94-
<span className='text-small text-gray pl-2'>hours per week</span>
95-
</span>
96-
</label>
97-
</div>
98-
))
99-
.add('formgroup', () => (
100-
<form>
101-
<dl className='form-group'>
102-
<dt><label for='example-text'>Example Text</label></dt>
103-
<dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
104-
</dl>
56+
))
57+
.add('form-actions', () => (
58+
<div className='form-actions'>
59+
<button type='submit' className='btn btn-primary'>Save changes</button>
60+
<button type='button' className='btn'>Cancel</button>
61+
</div>
62+
))
63+
.add('label highlight', () => (
64+
<div className='form-checkbox'>
65+
<label>
66+
<input type='checkbox' checked='checked'/>
67+
<em className='highlight'>Available for hire</em>
68+
</label>
69+
</div>
70+
))
71+
.add('form-checkbox-details', () => (
72+
<div className='form-checkbox'>
73+
<label aria-live='polite'>
74+
<input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
75+
Available for hire
76+
<span className='form-checkbox-details text-normal'>
77+
<span className='d-block mb-1'>Available hours per week</span>
78+
<input type='text' name='' className='form-control input-contrast' size='3'/>
79+
<span className='text-small text-gray pl-2'>hours per week</span>
80+
</span>
81+
</label>
82+
</div>
83+
))
84+
.add('form-group', () => (
85+
<div>
86+
<dl className='form-group'>
87+
<dt><label for='example-text'>Example Text</label></dt>
88+
<dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
89+
</dl>
10590

106-
<dl className='form-group'>
107-
<dt><label for='example-select'>Example Select</label></dt>
108-
<dd>
109-
<select className='form-select' id='example-select'>
110-
<option>Choose an option</option>
111-
<option>Git</option>
112-
<option>Subversion</option>
113-
<option>Social Coding</option>
114-
<option>Beets</option>
115-
<option>Bears</option>
116-
<option>Battlestar Galactica</option>
117-
</select>
118-
</dd>
119-
</dl>
91+
<dl className='form-group'>
92+
<dt><label for='example-select'>Example Select</label></dt>
93+
<dd>
94+
<select className='form-select' id='example-select'>
95+
<option>Choose an option</option>
96+
<option>Git</option>
97+
<option>Subversion</option>
98+
<option>Social Coding</option>
99+
<option>Beets</option>
100+
<option>Bears</option>
101+
<option>Battlestar Galactica</option>
102+
</select>
103+
</dd>
104+
</dl>
120105

121-
<dl className='form-group'>
122-
<dt><label for='example-textarea'>Example Textarea</label></dt>
123-
<dd>
124-
<textarea className='form-control' id='example-textarea'></textarea>
125-
</dd>
126-
</dl>
127-
</form>
128-
))
129-
.add('form validation', () => (
130-
<div>
131-
<form>
106+
<dl className='form-group'>
107+
<dt><label for='example-textarea'>Example Textarea</label></dt>
108+
<dd>
109+
<textarea className='form-control' id='example-textarea'></textarea>
110+
</dd>
111+
</dl>
112+
</div>
113+
))
114+
.add('form validation', () => (
115+
<div>
132116
<dl className='form-group errored'>
133117
<dt><label for='example-text-errored'>Example Text</label></dt>
134118
<dd><input className='form-control' type='text' value='Example Value' id='example-text-errored' aria-describedby='form-error-text'/></dd>
@@ -140,6 +124,5 @@ storiesOf('Forms', module)
140124
<dd><input className='form-control' type='text' value='Example Value' id='example-text-warn' aria-describedby='form-warning-text'/></dd>
141125
<dd className='warning' id='form-warning-text'>This example input has a warning.</dd>
142126
</dl>
143-
</form>
144-
</div>
145-
))
127+
</div>
128+
))

‎modules/primer-forms/stories/input-group.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react'
2+
import {Octicon} from '../../../.storybook/Octicon'
3+
4+
export default () => (
5+
<div className="input-group">
6+
<input
7+
className="form-control"
8+
type="text"
9+
placeholder="Username"
10+
aria-label="Username"
11+
/>
12+
<span className="input-group-button">
13+
<button className="btn" type="button" aria-label="Copy to clipboard">
14+
<Octicon name="clippy" />
15+
</button>
16+
</span>
17+
</div>
18+
)

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
"raw-loader": "^0.5.1",
4545
"react": "^15.6.1",
4646
"react-dom": "^15.6.1",
47-
"react-svg-inline": "^2.0.0",
4847
"registry-url": "^3.1.0",
4948
"remark": "^8.0.0",
5049
"sass-loader": "^6.0.6",

0 commit comments

Comments
 (0)