joyent-portal/ui/src/components/input
Sérgio Ramos 6a994e05f6 Css linting (#66)
* creating css .stylelintrc file

(cherry picked from commit df0a573666151fb522cb203f82a7a6a979fc33cc)

* updating lintfile

(cherry picked from commit 623ad22d69566a912988239c05d2f803e735362f)

* ignore base bootstrap styles

(cherry picked from commit 0ea94926a004367a67983b08a8ea47c974ef6e49)

* Working on making css inline with css linting

(cherry picked from commit 259fdfcaf9ae280e664471c7d5278214d991168e)

* removing generic class names and nesting for clear names without nesting

(cherry picked from commit d0427c2c09771df049ed9ab4e7b5d2f2076106fd)

* making components compatable with new css lint

(cherry picked from commit b147f157c3b9b39708a750f281d8278211454137)

* updating csslint file

(cherry picked from commit 53b0480476b6e5c4d94763baeaef7d33e9c2342d)

* adding alphabetical ordering to stylelint and updating css files with this

(cherry picked from commit a6b7860efa01e673df20546bb5830587eeb140d6)

* integrate stylelint with webpack

this way we can integrate postcss plugins

# Conflicts:
#	ui/yarn.lock

* exit process with 1, when stylelint finds issues

* listen to unhandled rejection from stylelint

* use stylelintignore

* fix stylelint raised issues
2016-11-02 17:34:08 +00:00
..
index.js autoFocus attribute as a boolean 2016-10-31 16:10:01 +00:00
readme.md incomplete <Select> implementation 2016-10-31 17:26:48 +00:00
style.css Css linting (#66) 2016-11-02 17:34:08 +00:00

Input

demo

const  React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Input = require('./index.js');

nmodule.exports = ReactDOM.renderToString(
  <Base>
    <Row>
      <Column>
        <Input
          placeholder='Enter email'
          label='Email Address'
          type='email'
        >
          <small>We'll never share your email with anyone else.</small>
        </Input>
      </Column>
    </Row>
    <Row>
      <Column>
        <Input placeholder='Password' type='password'>
          Password
        </Input>
      </Column>
    </Row>
  </Base>
);

usage

const React = require('react');
const Input = require('ui/input');

module.exports = () => {
  return (
    <div>
      <Input
        placeholder='Enter email'
        label='Email Address'
        type='email'
      >
        <small>We'll never share your email with anyone else.</small>
      </Input>
      <Input placeholder='Password' type='password'>
        Password
      </Input>
    </div>
  );
}