Merge pull request #192 from dabapps/form-group-offset-input

FormGroup with no label

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.8.30",
+  "version": "0.8.31",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
@@ -13,7 +13,7 @@
     "lint": "npm run lint-js && npm run lint-less",
     "tests": "jest",
     "test": "npm run lint && npm run tests -- --coverage --runInBand",
-    "postinstall": "./scripts/dist"
+    "prepublish": "./scripts/dist"
   },
   "repository": {
     "type": "git",

src/less/inputs.less

@@ -82,13 +82,21 @@ textarea {
     }
   }
 
+  &.no-label > * { // lesshint universalSelector: false
+    margin-left: @no-label-offset;
+  }
+
   & > textarea {
     resize: vertical;
   }
 
   &.block {
     width: 100%;
 
+    &.no-label > * { // lesshint universalSelector: false
+      margin-left: 0;
+    }
+
     & > label,
     & > input,
     & > select,

src/less/variables.less

@@ -105,6 +105,7 @@
 @input-width: 200px;
 @input-height: 32px;
 @label-width: 100px;
+@no-label-offset: @label-width + @margin-base;
 
 @textarea-width: @input-width;
 @textarea-height: @input-height * 2;

src/ts/components/forms/form-group.examples.md

@@ -1,4 +1,15 @@
-#### Example
+#### Inline
+
+```js
+<FormGroup>
+  <label>
+    Label
+  </label>
+  <input type="text" />
+</FormGroup>
+```
+
+#### No Label
 
 ```js
 <div>
@@ -8,18 +19,36 @@
     </label>
     <input type="text" />
   </FormGroup>
-
-  <FormGroup block>
-    <label>
-      Label
-    </label>
-    <select>
-      <option>
-        Option
-      </option>
-    </select>
+  <FormGroup noLabel>
+    <input type="text" />
+  </FormGroup>
+  <FormGroup noLabel>
+    <p>
+      Info text
+    </p>
   </FormGroup>
+</div>
+```
+
+#### Block
 
+```js
+<FormGroup block>
+  <label>
+    Label
+  </label>
+  <select>
+    <option>
+      Option
+    </option>
+  </select>
+</FormGroup>
+```
+
+#### Checkboxes and Radios
+
+```js
+<div>
   <FormGroup>
     <label>
       Label 1
@@ -47,6 +76,7 @@
 @input-width: 200px;
 @input-height: 32px;
 @label-width: 100px;
+@no-label-offset: @label-width + @margin-base;
 
 @textarea-width: @input-width;
 @textarea-height: @input-height * 2;

src/ts/components/forms/form-group.tsx

@@ -8,6 +8,10 @@ export interface FormGroupProps extends ComponentProps, HTMLProps<HTMLElement> {
    * Set the style `display: block;` with label above input.
    */
   block?: boolean;
+  /**
+   * Offset the input, select, etc as if there was a label to the left of it
+   */
+  noLabel?: boolean;
 }
 
 /**
@@ -19,13 +23,15 @@ export class FormGroup extends PureComponent<FormGroupProps, {}> {
       children,
       className,
       block,
+      noLabel,
       component: Component = 'div',
       ...remainingProps
     } = this.props;
 
     const myClassNames = [
       'form-group',
       block ? 'block' : null,
+      noLabel ? 'no-label' : null,
       className
     ];
 

tests/__snapshots__/form-group.tsx.snap

@@ -17,3 +17,9 @@ exports[`FormGroup should use a block prop (boolean) as a class name 1`] = `
   className="form-group block"
 />
 `;
+
+exports[`FormGroup should use a noLabel prop (boolean) as a class name 1`] = `
+<div
+  className="form-group no-label"
+/>
+`;

tests/form-group.tsx

@@ -21,6 +21,14 @@ describe('FormGroup', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should use a noLabel prop (boolean) as a class name', () => {
+    const tree = renderer.create(
+      <FormGroup noLabel />
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should take regular element attributes', () => {
     const tree = renderer.create(
       <FormGroup className="my-class" />