Merge pull request #344 from primer/import-input-groups

[WIP] Import input groups
primer · Oct 27, 2017 · 07b2ae0 · 07b2ae0
2 parents 4b4d1cf + 34355d1
commit 07b2ae0
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 113 deletions.
diff --git 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'
 
-const Octicon = (props) => {
+export const Octicon = (props) => {
   const {name} = props
   if (name in octicons) {
-    return <SVGInline svg={octicons[name].toSVG(props)} />
+    const svg = octicons[name].toSVG(props)
+    return <span dangerouslySetInnerHTML={ {__html: svg } }  />
   } else {
     throw new Error(`No such octicon: "${name}"!`)
   }

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://unpkg.com/primer-css@9.2.0/build/build.css">
+<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">
 <script src="https://github.com/site/assets/styleguide.js" async></script>
diff --git 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&#39;s designed to be used on settings and configuration pages.
+- Importing `.input-group` into `primer-forms` module.
 
 ### Removed
 - Removing `primer-cards` module.

diff --git 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
@@ -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;
+}
diff --git a/modules/primer-forms/stories/index.js b/modules/primer-forms/stories/index.js
@@ -1,134 +1,118 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 
+// sub-stories
+import inputGroup from './input-group'
+
 storiesOf('Forms', module)
-.add('form-control', () => (
-  <div>
+  .addDecorator(story => (
+    <form>
+      {story()}
+    </form>
+  ))
+  .add('form-control', () => (
     <input className='form-control' type='text' placeholder='Standard input' aria-label='Standard input'/>
-  </div>
-))
-.add('input-lg', () => (
-  <div>
+  ))
+  .add('input-block', () => (
+    <input className='form-control input-block' type='text' placeholder='Block input' aria-label='Block input'/>
+  ))
+  .add('input-group', inputGroup)
+  .add('input-lg', () => (
     <input className='form-control input-lg' type='text' placeholder='Large input' aria-label='Large input'/>
-  </div>
-))
-.add('input-sm', () => (
-  <div>
+  ))
+  .add('input-sm', () => (
     <input className='form-control input-sm' type='text' placeholder='Small input' aria-label='Small input'/>
-  </div>
-))
-.add('input-block', () => (
-  <div>
-    <input className='form-control input-block' type='text' placeholder='Block input' aria-label='Block input'/>
-  </div>
-))
-.add('input-monospace', () => (
-  <div>
+  ))
+  .add('input-monospace', () => (
     <input className='form-control input-monospace' type='text' placeholder='Monospace input' aria-label='SHA'/>
-  </div>
-))
-.add('form-select', () => (
-  <div>
+  ))
+  .add('form-select', () => (
     <select className='form-select' aria-label='Important decision'>
       <option>Select</option>
       <option value='option 2'>Option 2</option>
     </select>
-  </div>
-))
-.add('select-sm', () => (
-  <div>
+  ))
+  .add('select-sm', () => (
     <select className='form-select select-sm' aria-label='Important decision'>
       <option>Select</option>
       <option value='option 2'>Option 2</option>
     </select>
-  </div>
-))
-.add('radio', () => (
-  <div>
+  ))
+  .add('radio', () => (
     <label>
       <input type='radio' id='derp' name='radio'/>
-       Radio
+      Radio
     </label>
-  </div>
-))
-.add('checkbox', () => (
-  <div>
+  ))
+  .add('checkbox', () => (
     <label>
       <input type='checkbox'/>
-       checkbox
+      checkbox
     </label>
-  </div>
-))
-.add('textarea', () => (
-  <div>
+  ))
+  .add('textarea', () => (
     <textarea className='form-control'>
     </textarea>
-  </div>
-))
-.add('form-actions', () => (
-  <div className='form-actions'>
-    <button type='submit' className='btn btn-primary'>Save changes</button>
-    <button type='button' className='btn'>Cancel</button>
-  </div>
-))
-.add('label highlight', () => (
-  <div>
-    <form>
-      <div className='form-checkbox'>
-        <label>
-          <input type='checkbox' checked='checked'/>
-          <em className='highlight'>Available for hire</em>
-        </label>
-      </div>
-    </form>
-  </div>
-))
-.add('form-checkbox-details', () => (
-  <div className='form-checkbox'>
-    <label aria-live='polite'>
-      <input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
-      Available for hire
-      <span className='form-checkbox-details text-normal'>
-        <span className='d-block mb-1'>Available hours per week</span>
-        <input type='text' name='' className='form-control input-contrast' size='3'/>
-        <span className='text-small text-gray pl-2'>hours per week</span>
-      </span>
-    </label>
-  </div>
-))
-.add('formgroup', () => (
-  <form>
-    <dl className='form-group'>
-      <dt><label for='example-text'>Example Text</label></dt>
-      <dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
-    </dl>
+  ))
+  .add('form-actions', () => (
+    <div className='form-actions'>
+      <button type='submit' className='btn btn-primary'>Save changes</button>
+      <button type='button' className='btn'>Cancel</button>
+    </div>
+  ))
+  .add('label highlight', () => (
+    <div className='form-checkbox'>
+      <label>
+        <input type='checkbox' checked='checked'/>
+        <em className='highlight'>Available for hire</em>
+      </label>
+    </div>
+  ))
+  .add('form-checkbox-details', () => (
+    <div className='form-checkbox'>
+      <label aria-live='polite'>
+        <input type='radio' className='form-checkbox-details-trigger' name='hireme'/>
+        Available for hire
+        <span className='form-checkbox-details text-normal'>
+          <span className='d-block mb-1'>Available hours per week</span>
+          <input type='text' name='' className='form-control input-contrast' size='3'/>
+          <span className='text-small text-gray pl-2'>hours per week</span>
+        </span>
+      </label>
+    </div>
+  ))
+  .add('form-group', () => (
+    <div>
+      <dl className='form-group'>
+        <dt><label for='example-text'>Example Text</label></dt>
+        <dd><input className='form-control' type='text' value='Example Value' id='example-text'/></dd>
+      </dl>
 
-    <dl className='form-group'>
-      <dt><label for='example-select'>Example Select</label></dt>
-      <dd>
-        <select className='form-select' id='example-select'>
-          <option>Choose an option</option>
-          <option>Git</option>
-          <option>Subversion</option>
-          <option>Social Coding</option>
-          <option>Beets</option>
-          <option>Bears</option>
-          <option>Battlestar Galactica</option>
-        </select>
-      </dd>
-    </dl>
+      <dl className='form-group'>
+        <dt><label for='example-select'>Example Select</label></dt>
+        <dd>
+          <select className='form-select' id='example-select'>
+            <option>Choose an option</option>
+            <option>Git</option>
+            <option>Subversion</option>
+            <option>Social Coding</option>
+            <option>Beets</option>
+            <option>Bears</option>
+            <option>Battlestar Galactica</option>
+          </select>
+        </dd>
+      </dl>
 
-    <dl className='form-group'>
-      <dt><label for='example-textarea'>Example Textarea</label></dt>
-      <dd>
-        <textarea className='form-control' id='example-textarea'></textarea>
-      </dd>
-    </dl>
-  </form>
-))
-.add('form validation', () => (
-  <div>
-    <form>
+      <dl className='form-group'>
+        <dt><label for='example-textarea'>Example Textarea</label></dt>
+        <dd>
+          <textarea className='form-control' id='example-textarea'></textarea>
+        </dd>
+      </dl>
+    </div>
+  ))
+  .add('form validation', () => (
+    <div>
       <dl className='form-group errored'>
         <dt><label for='example-text-errored'>Example Text</label></dt>
         <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)
         <dd><input className='form-control' type='text' value='Example Value' id='example-text-warn' aria-describedby='form-warning-text'/></dd>
         <dd className='warning' id='form-warning-text'>This example input has a warning.</dd>
       </dl>
-    </form>
-  </div>
-))
+    </div>
+  ))
diff --git a/modules/primer-forms/stories/input-group.js b/modules/primer-forms/stories/input-group.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import {Octicon} from '../../../.storybook/Octicon'
+
+export default () => (
+  <div className="input-group">
+    <input
+      className="form-control"
+      type="text"
+      placeholder="Username"
+      aria-label="Username"
+    />
+    <span className="input-group-button">
+      <button className="btn" type="button" aria-label="Copy to clipboard">
+        <Octicon name="clippy" />
+      </button>
+    </span>
+  </div>
+)
diff --git 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",