From 71dc6f08ba0da9f3f1dd348d383103158b2f45fe Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Mon, 11 Sep 2017 17:14:44 -0700 Subject: [PATCH 01/12] import input-group SCSS --- modules/primer-forms/index.scss | 1 + modules/primer-forms/lib/input-group.scss | 51 +++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 modules/primer-forms/lib/input-group.scss diff --git a/modules/primer-forms/index.scss b/modules/primer-forms/index.scss index 540674802d..89a2247f81 100644 --- a/modules/primer-forms/index.scss +++ b/modules/primer-forms/index.scss @@ -3,3 +3,4 @@ @import "./lib/form-select.scss"; @import "./lib/form-group.scss"; @import "./lib/form-validation.scss"; +@import "./lib/input-group.scss"; diff --git a/modules/primer-forms/lib/input-group.scss b/modules/primer-forms/lib/input-group.scss new file mode 100644 index 0000000000..df49498735 --- /dev/null +++ b/modules/primer-forms/lib/input-group.scss @@ -0,0 +1,51 @@ +.input-group { + display: table; + + .form-control { + position: relative; + width: 100%; + + &:focus { + z-index: 2; + } + + + .btn { + margin-left: 0; + } + } + + // For when you want the input group to behave like inline-block. + &.inline { + display: inline-table; + } +} + +.input-group .form-control, +.input-group-button { + display: table-cell; +} + +.input-group-button { + width: 1%; + vertical-align: middle; // Match the inputs +} + +.input-group .form-control:first-child, +.input-group-button:first-child .btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.input-group-button:first-child .btn { + margin-right: -1px; +} + +.input-group .form-control:last-child, +.input-group-button:last-child .btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-group-button:last-child .btn { + margin-left: -1px; +} From fc09b75551f153296fcd3f34f06bd2e8fb8382ec Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 12:06:30 -0700 Subject: [PATCH 02/12] stub out input group stories --- modules/primer-forms/stories/index.js | 276 ++++++++++--------- modules/primer-forms/stories/input-groups.js | 7 + 2 files changed, 147 insertions(+), 136 deletions(-) create mode 100644 modules/primer-forms/stories/input-groups.js diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index 9234217e04..a08e4d9cde 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -1,145 +1,149 @@ import React from 'react' import { storiesOf } from '@storybook/react' +// sub-stories +import inputGroups from './input-groups' + storiesOf('Forms', module) -.add('form-control', () => ( -
- -
-)) -.add('input-lg', () => ( -
- -
-)) -.add('input-sm', () => ( -
- -
-)) -.add('input-block', () => ( -
- -
-)) -.add('input-monospace', () => ( -
- -
-)) -.add('form-select', () => ( -
- -
-)) -.add('select-sm', () => ( -
- -
-)) -.add('radio', () => ( -
- -
-)) -.add('checkbox', () => ( -
- -
-)) -.add('textarea', () => ( -
- -
-)) -.add('form-actions', () => ( -
- - -
-)) -.add('label highlight', () => ( -
+ .add('form-control', () => ( +
+ +
+ )) + .add('input-lg', () => ( +
+ +
+ )) + .add('input-sm', () => ( +
+ +
+ )) + .add('input-block', () => ( +
+ +
+ )) + .add('input-monospace', () => ( +
+ +
+ )) + .add('form-select', () => ( +
+ +
+ )) + .add('select-sm', () => ( +
+ +
+ )) + .add('radio', () => ( +
+ +
+ )) + .add('checkbox', () => ( +
+ +
+ )) + .add('textarea', () => ( +
+ +
+ )) + .add('form-actions', () => ( +
+ + +
+ )) + .add('label highlight', () => ( +
+
+
+ +
+
+
+ )) + .add('form-checkbox-details', () => ( +
+ +
+ )) + .add('formgroup', () => (
-
- -
-
-
-)) -.add('form-checkbox-details', () => ( -
- -
-)) -.add('formgroup', () => ( -
-
-
-
-
- -
-
-
- -
-
+
+
+
+
-
-
-
- -
-
-
-)) -.add('form validation', () => ( -
-
-
-
-
-
This example input has an error.
+
+
+
+ +
-
-
-
-
-
This example input has a warning.
+ +
+
+
+ +
-
-)) + )) + .add('form validation', () => ( +
+
+
+
+
+
This example input has an error.
+
+
+
+
+
+
This example input has a warning.
+
+
+
+ )) + .add('input groups', inputGroups) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-groups.js new file mode 100644 index 0000000000..3026603992 --- /dev/null +++ b/modules/primer-forms/stories/input-groups.js @@ -0,0 +1,7 @@ +import React from 'react' + +export default () => ( +
+

HI THERE

+
+) From 8c62991077f130552f6cd28833d04be15f53f218 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:09:56 -0700 Subject: [PATCH 03/12] export Octicon react element --- .storybook/Octicon.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/Octicon.js b/.storybook/Octicon.js index 5af481abf6..59951b82ff 100644 --- a/.storybook/Octicon.js +++ b/.storybook/Octicon.js @@ -3,7 +3,7 @@ import {storiesOf} from '@storybook/react' import octicons from 'octicons' import SVGInline from 'react-svg-inline' -const Octicon = (props) => { +export const Octicon = (props) => { const {name} = props if (name in octicons) { return From 9d703e08ac567e38ca2c22c48669f6496128bdc0 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:10:15 -0700 Subject: [PATCH 04/12] add copy to clipboard input group story --- modules/primer-forms/stories/input-groups.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-groups.js index 3026603992..cfa49d3aa0 100644 --- a/modules/primer-forms/stories/input-groups.js +++ b/modules/primer-forms/stories/input-groups.js @@ -1,7 +1,20 @@ import React from 'react' +import {Octicon} from '../../../.storybook/Octicon' export default () => ( -
-

HI THERE

-
+
+
+ + + + +
+
) From 15a4016baae8646d3909c6a06fe8df392fe85fe8 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:19:26 -0700 Subject: [PATCH 05/12] add forms decorator to wrap w/
--- modules/primer-forms/stories/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index a08e4d9cde..39118903f0 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -5,6 +5,9 @@ import { storiesOf } from '@storybook/react' import inputGroups from './input-groups' storiesOf('Forms', module) + .addDecorator(story => ( +
{story()}
+ )) .add('form-control', () => (
From 470662f103ef24759c7a48629965776a46a84b7f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 13:19:47 -0700 Subject: [PATCH 06/12] nix form.p-4 --- modules/primer-forms/stories/input-groups.js | 28 +++++++++----------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-groups.js index cfa49d3aa0..0a8a3e1c03 100644 --- a/modules/primer-forms/stories/input-groups.js +++ b/modules/primer-forms/stories/input-groups.js @@ -2,19 +2,17 @@ import React from 'react' import {Octicon} from '../../../.storybook/Octicon' export default () => ( -
-
- - - - -
-
+
+ + + + +
) From 82b92d4bf1a893c3d3bfd826415f9f3e5c6d7c9b Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 14:05:42 -0700 Subject: [PATCH 07/12] wrap everything in div.p-4 --- .storybook/config.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.storybook/config.js b/.storybook/config.js index 32418d6f97..33b827897d 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -1,4 +1,5 @@ -import { configure } from '@storybook/react' +import React from 'react' +import { configure, addDecorator } from '@storybook/react' import { setOptions } from '@storybook/addon-options' import '../modules/primer-css/index.scss' @@ -8,6 +9,12 @@ setOptions({ showDownPanel: false, }) +addDecorator(story => ( +
+ {story()} +
+)) + const contexts = [ require.context('.', true, /\.js$/), require.context('../modules', true, /stories.*\.js$/), From 6e807ef887981712d8060852fb54c40a4b6da835 Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 14:07:13 -0700 Subject: [PATCH 08/12] rename input-groups -> input-group --- modules/primer-forms/stories/index.js | 8 +++++--- .../stories/{input-groups.js => input-group.js} | 0 2 files changed, 5 insertions(+), 3 deletions(-) rename modules/primer-forms/stories/{input-groups.js => input-group.js} (100%) diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index 39118903f0..443e0fe70a 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -2,17 +2,20 @@ import React from 'react' import { storiesOf } from '@storybook/react' // sub-stories -import inputGroups from './input-groups' +import inputGroup from './input-group' storiesOf('Forms', module) .addDecorator(story => ( -
{story()}
+
+ {story()} +
)) .add('form-control', () => (
)) + .add('input-group', inputGroup) .add('input-lg', () => (
@@ -149,4 +152,3 @@ storiesOf('Forms', module)
)) - .add('input groups', inputGroups) diff --git a/modules/primer-forms/stories/input-groups.js b/modules/primer-forms/stories/input-group.js similarity index 100% rename from modules/primer-forms/stories/input-groups.js rename to modules/primer-forms/stories/input-group.js From 270bd6298fe37590a4fe4f267d105c46a606e79f Mon Sep 17 00:00:00 2001 From: Shawn Allen Date: Tue, 12 Sep 2017 14:07:51 -0700 Subject: [PATCH 09/12] remove unnecessary
and
wrappers --- modules/primer-alerts/stories/Flash.js | 40 +++------ modules/primer-breadcrumb/stories.js | 16 ++-- modules/primer-buttons/stories.js | 12 +-- modules/primer-forms/stories/index.js | 114 ++++++++++--------------- 4 files changed, 71 insertions(+), 111 deletions(-) diff --git a/modules/primer-alerts/stories/Flash.js b/modules/primer-alerts/stories/Flash.js index ebada81739..d3f6156d29 100644 --- a/modules/primer-alerts/stories/Flash.js +++ b/modules/primer-alerts/stories/Flash.js @@ -3,47 +3,35 @@ import { storiesOf } from '@storybook/react' storiesOf('Flash alerts', module) .add('flash', () => ( -
-
- flash -
+
+ flash
)) .add('flash-warn', () => ( -
-
- flash-warn -
+
+ flash-warn
)) .add('flash-error', () => ( -
-
- flash-error -
+
+ flash-error
)) .add('flash-success', () => ( -
-
- flash-success -
+
+ flash-success
)) .add('flash with action button', () => ( -
-
- - Flash message with action here. -
+
+ + Flash message with action here.
)) .add('flash-full', () => ( -
-
-
- Full width flash message. -
+
+
+ Full width flash message.
)) diff --git a/modules/primer-breadcrumb/stories.js b/modules/primer-breadcrumb/stories.js index fd4089f506..595be005e8 100644 --- a/modules/primer-breadcrumb/stories.js +++ b/modules/primer-breadcrumb/stories.js @@ -3,13 +3,11 @@ import { storiesOf } from '@storybook/react' storiesOf('Breadcrumb', module) .add('breadcrumb', () => ( -
- -
+ )) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index ad3db07991..9c457f9c89 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -6,7 +6,7 @@ storiesOf('Button', module) )) .add('btn-primary', () => ( -
+
@@ -15,7 +15,7 @@ storiesOf('Button', module)
)) .add('btn-secondary', () => ( -
+
@@ -24,7 +24,7 @@ storiesOf('Button', module)
)) .add('btn-danger', () => ( -
+
@@ -33,7 +33,7 @@ storiesOf('Button', module)
)) .add('btn-outline', () => ( -
+
@@ -42,7 +42,7 @@ storiesOf('Button', module)
)) .add('btn-blue', () => ( -
+
@@ -51,7 +51,7 @@ storiesOf('Button', module)
)) .add('btn-purple', () => ( -
+
diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js index 443e0fe70a..6295ffaf41 100644 --- a/modules/primer-forms/stories/index.js +++ b/modules/primer-forms/stories/index.js @@ -11,68 +11,48 @@ storiesOf('Forms', module) )) .add('form-control', () => ( -
- -
+ + )) + .add('input-block', () => ( + )) .add('input-group', inputGroup) .add('input-lg', () => ( -
- -
+ )) .add('input-sm', () => ( -
- -
- )) - .add('input-block', () => ( -
- -
+ )) .add('input-monospace', () => ( -
- -
+ )) .add('form-select', () => ( -
- -
+ )) .add('select-sm', () => ( -
- -
+ )) .add('radio', () => ( -
- -
+ )) .add('checkbox', () => ( -
- -
+ )) .add('textarea', () => ( -
- -
+ )) .add('form-actions', () => (
@@ -81,15 +61,11 @@ storiesOf('Forms', module)
)) .add('label highlight', () => ( -
-
-
- -
-
+
+
)) .add('form-checkbox-details', () => ( @@ -105,8 +81,8 @@ storiesOf('Forms', module)
)) - .add('formgroup', () => ( -
+ .add('form-group', () => ( +
@@ -133,22 +109,20 @@ storiesOf('Forms', module)
- +
)) .add('form validation', () => (
-
-
-
-
-
This example input has an error.
-
-
-
-
-
-
This example input has a warning.
-
-
+
+
+
+
This example input has an error.
+
+
+
+
+
+
This example input has a warning.
+
)) From 80515ee3a855ef9514ecba3d5069f0c2c981f3d4 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 09:33:52 -0700 Subject: [PATCH 10/12] Revert these changes to focus on input groups only --- modules/primer-alerts/stories/Flash.js | 40 +++++++++++++++++--------- modules/primer-breadcrumb/stories.js | 2 +- modules/primer-buttons/stories.js | 12 ++++---- 3 files changed, 33 insertions(+), 21 deletions(-) diff --git a/modules/primer-alerts/stories/Flash.js b/modules/primer-alerts/stories/Flash.js index d3f6156d29..ebada81739 100644 --- a/modules/primer-alerts/stories/Flash.js +++ b/modules/primer-alerts/stories/Flash.js @@ -3,35 +3,47 @@ import { storiesOf } from '@storybook/react' storiesOf('Flash alerts', module) .add('flash', () => ( -
- flash +
+
+ flash +
)) .add('flash-warn', () => ( -
- flash-warn +
+
+ flash-warn +
)) .add('flash-error', () => ( -
- flash-error +
+
+ flash-error +
)) .add('flash-success', () => ( -
- flash-success +
+
+ flash-success +
)) .add('flash with action button', () => ( -
- - Flash message with action here. +
+
+ + Flash message with action here. +
)) .add('flash-full', () => ( -
-
- Full width flash message. +
+
+
+ Full width flash message. +
)) diff --git a/modules/primer-breadcrumb/stories.js b/modules/primer-breadcrumb/stories.js index 2190c00078..7aa244a4f4 100644 --- a/modules/primer-breadcrumb/stories.js +++ b/modules/primer-breadcrumb/stories.js @@ -7,4 +7,4 @@ const stories = storiesOf('Breadcrumb', module) storiesFromMarkdown(require.context('.', true, /\.md$/)) .forEach(({title, story}) => { stories.add(title, story) - }) \ No newline at end of file + }) diff --git a/modules/primer-buttons/stories.js b/modules/primer-buttons/stories.js index 9c457f9c89..ad3db07991 100644 --- a/modules/primer-buttons/stories.js +++ b/modules/primer-buttons/stories.js @@ -6,7 +6,7 @@ storiesOf('Button', module) )) .add('btn-primary', () => ( -
+
@@ -15,7 +15,7 @@ storiesOf('Button', module)
)) .add('btn-secondary', () => ( -
+
@@ -24,7 +24,7 @@ storiesOf('Button', module)
)) .add('btn-danger', () => ( -
+
@@ -33,7 +33,7 @@ storiesOf('Button', module)
)) .add('btn-outline', () => ( -
+
@@ -42,7 +42,7 @@ storiesOf('Button', module)
)) .add('btn-blue', () => ( -
+
@@ -51,7 +51,7 @@ storiesOf('Button', module)
)) .add('btn-purple', () => ( -
+
From 5d9fb5be26036e94c790b0d2f5014c5bd112dcee Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 10:05:04 -0700 Subject: [PATCH 11/12] Remove react inline svg and import octicons css --- .storybook/Octicon.js | 4 ++-- .storybook/preview-head.html | 2 +- package.json | 1 - 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/.storybook/Octicon.js b/.storybook/Octicon.js index e4df4cf396..339c56b1cd 100644 --- a/.storybook/Octicon.js +++ b/.storybook/Octicon.js @@ -1,12 +1,12 @@ import React from 'react' import {storiesOf} from '@storybook/react' import octicons from 'octicons' -import SVGInline from 'react-svg-inline' export const Octicon = (props) => { const {name} = props if (name in octicons) { - return + const svg = octicons[name].toSVG(props) + return } else { throw new Error(`No such octicon: "${name}"!`) } diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 03d0c82b2d..de95a89c1b 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -1,2 +1,2 @@ - + diff --git a/package.json b/package.json index 291d9947b3..be728a7c1c 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ "raw-loader": "^0.5.1", "react": "^15.6.1", "react-dom": "^15.6.1", - "react-svg-inline": "^2.0.0", "registry-url": "^3.1.0", "remark": "^8.0.0", "sass-loader": "^6.0.6", From 34355d1e39de497543a9b1e1e80b3eb6e5fcb424 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 27 Oct 2017 10:14:04 -0700 Subject: [PATCH 12/12] Updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f25b77306..5bc37a386e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ### Added - New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages. +- Importing `.input-group` into `primer-forms` module. ### Removed - Removing `primer-cards` module.