This commit is contained in:
xidedix 2018-02-02 17:09:03 +01:00
parent be9e2abe03
commit db35210ebb
15 changed files with 162 additions and 156 deletions

View File

@ -1,5 +1,13 @@
## [react](./REACT.md) version `changelog`
##### `v1.0.10`
- refactor: `<InputGroupAddon addonType="prepend">`
- refactor: `<InputGroupAddon addonType="append">`
- refactor: `<InputGroupText>`
- refactor: remove `<InputGroupButton>`
- update: reactstrap to `5.0.0-beta`
- update: dependencies
###### `v1.0.9`
- refactor: Sidebar structure change

View File

@ -1,10 +1,10 @@
{
"name": "@coreui/react",
"version": "1.0.9",
"version": "1.0.10",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT",
"private": true,
"devDependencies": {
@ -14,7 +14,7 @@
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.5",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
@ -24,11 +24,11 @@
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.19.1",
"uglify-js": "3.3.7",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.9.7"
"webpack-dev-server": "2.11.1"
},
"dependencies": {
"bootstrap": "4.0.0",
@ -41,7 +41,7 @@
"react-dom": "16.2.0",
"react-router-dom": "4.2.2",
"react-transition-group": "2.2.1",
"reactstrap": "5.0.0-alpha.4",
"reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1"
},
"scripts": {

View File

@ -20,7 +20,7 @@
.card-header {
.icon-bg {
display: inline-body;
display: inline-block;
padding: $card-spacer-y $card-spacer-x !important;
margin-top: -$card-spacer-y;
margin-right: $card-spacer-x;
@ -135,12 +135,12 @@
}
[class^="icon-"], [class*=" icon-"] {
display: inline-body;
display: inline-block;
vertical-align: middle;
}
i {
display: inline-body;
display: inline-block;
transition: .4s;
}
@ -153,7 +153,7 @@
width: 230px;
margin: 6px;
.input-group-addon {
.input-group-prepend, .input-group-append {
background: #fff;
}

View File

@ -1,6 +1,5 @@
.input-group-addon,
.input-group-btn {
min-width: 40px;
.input-group-prepend,
.input-group-append {
white-space: nowrap;
vertical-align: middle; // Match the inputs
}

View File

@ -1,6 +1,6 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.9
* @version v1.0.10
* @link http://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* @license MIT

View File

@ -19,7 +19,7 @@ import {
Input,
InputGroup,
InputGroupAddon,
InputGroupButton
InputGroupText
} from 'reactstrap';
class Forms extends Component {
@ -612,11 +612,11 @@ class Forms extends Component {
<FormGroup row>
<Col md="12">
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-user"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username"/>
</InputGroup>
</Col>
@ -625,26 +625,26 @@ class Forms extends Component {
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email"/>
<div className="input-group-append">
<span className="input-group-text">
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-euro"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".."/>
<div className="input-group-append">
<span className="input-group-text">.00</span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
@ -666,9 +666,9 @@ class Forms extends Component {
<FormGroup row>
<Col md="12">
<InputGroup>
<div className="input-group-prepend">
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</div>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username"/>
</InputGroup>
</Col>
@ -677,22 +677,22 @@ class Forms extends Component {
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email"/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</div>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<div className="input-group-prepend">
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</div>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search"/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</div>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
@ -714,7 +714,7 @@ class Forms extends Component {
<FormGroup row>
<Col md="12">
<InputGroup>
<div className="input-group-prepend">
<InputGroupAddon addonType="prepend">
<ButtonDropdown isOpen={this.state.first}
toggle={() => { this.setState({ first: !this.state.first }); }}>
<DropdownToggle caret color="primary">
@ -728,7 +728,7 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</InputGroupAddon>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username"/>
</InputGroup>
</Col>
@ -737,7 +737,7 @@ class Forms extends Component {
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email"/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
@ -751,14 +751,14 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<div className="input-group-prepend">
<InputGroupAddon addonType="prepend">
<ButtonDropdown isOpen={this.state.third}
toggle={() => { this.setState({ third: !this.state.third }); }}>
{/*<Button id="caret" color="primary">Action</Button>*/}
@ -771,9 +771,9 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</InputGroupAddon>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".."/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
@ -787,7 +787,7 @@ class Forms extends Component {
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</div>
</InputGroupAddon>
</InputGroup>
</Col>
</FormGroup>
@ -930,35 +930,35 @@ class Forms extends Component {
<Form action="" method="post">
<FormGroup>
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text">Username</span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="text" id="username3" name="username3"/>
<div className="input-group-append">
<span className="input-group-text"><i className="fa fa-user"></i></span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text">Email</span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3"/>
<div className="input-group-append">
<span className="input-group-text"><i className="fa fa-envelope"></i></span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text">Password</span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3"/>
<div className="input-group-append">
<span className="input-group-text"><i className="fa fa-asterisk"></i></span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
@ -978,25 +978,25 @@ class Forms extends Component {
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username"/>
<div className="input-group-append">
<span className="input-group-text"><i className="fa fa-user"></i></span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email"/>
<div className="input-group-append">
<span className="input-group-text"><i className="fa fa-envelope"></i></span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password"/>
<div className="input-group-append">
<span className="input-group-text"><i className="fa fa-asterisk"></i></span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
@ -1015,25 +1015,25 @@ class Forms extends Component {
<Form action="" method="post">
<FormGroup>
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text"><i className="fa fa-user"></i></span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username" name="username" placeholder="Username"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text"><i className="fa fa-envelope"></i></span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email" name="email" placeholder="Email"/>
</InputGroup>
</FormGroup>
<FormGroup>
<InputGroup>
<div className="input-group-prepend">
<span className="input-group-text"><i className="fa fa-asterisk"></i></span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password" name="password" placeholder="Password"/>
</InputGroup>
</FormGroup>
@ -1063,9 +1063,9 @@ class Forms extends Component {
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<div className="input-group-prepend">
<span className="input-group-text">@</span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text"/>
</InputGroup>
<p className="help-block">Here's some help text</p>
@ -1076,9 +1076,9 @@ class Forms extends Component {
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text"/>
<div className="input-group-append">
<span className="input-group-text">.00</span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
@ -1087,13 +1087,13 @@ class Forms extends Component {
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<div className="input-group-prepend">
<span className="input-group-text">$</span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text"/>
<div className="input-group-append">
<span className="input-group-text">.00</span>
</div>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
@ -1102,9 +1102,9 @@ class Forms extends Component {
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text"/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</div>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
@ -1113,10 +1113,10 @@ class Forms extends Component {
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text"/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</div>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon } from 'reactstrap';
import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
class ButtonGroups extends Component {
@ -77,7 +77,7 @@ class ButtonGroups extends Component {
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<div className="input-group-prepend"><span className="input-group-text">@</span></div>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>
@ -89,7 +89,7 @@ class ButtonGroups extends Component {
<Button>4</Button>
</ButtonGroup>
<InputGroup>
<div className="input-group-prepend"><span className="input-group-text">@</span></div>
<InputGroupAddon addonType="prepend"><InputGroupText>@</InputGroupText></InputGroupAddon>
<Input placeholder="Input group example" />
</InputGroup>
</ButtonToolbar>

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
class Login extends Component {
@ -15,19 +15,19 @@ class Login extends Component {
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<InputGroup className="mb-3">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Username"/>
</InputGroup>
<InputGroup className="mb-4">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Password"/>
</InputGroup>
<Row>

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from 'reactstrap';
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupText} from 'reactstrap';
class Page404 extends Component {
render() {
@ -14,15 +14,15 @@ class Page404 extends Component {
<p className="text-muted float-left">The page you are looking for was not found.</p>
</div>
<InputGroup className="input-prepend">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-search"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?"/>
<div className="input-group-append">
<InputGroupAddon addonType="append">
<Button color="info">Search</Button>
</div>
</InputGroupAddon>
</InputGroup>
</Col>
</Row>

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from 'reactstrap';
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
class Page500 extends Component {
render() {
@ -14,15 +14,15 @@ class Page500 extends Component {
<p className="text-muted float-left">The page you are looking for is temporarily unavailable.</p>
</span>
<InputGroup className="input-prepend">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="fa fa-search"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?" />
<div className="input-group-append">
<InputGroupAddon addonType="append">
<Button color="info">Search</Button>
</div>
</InputGroupAddon>
</InputGroup>
</Col>
</Row>

View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
class Register extends Component {
render() {
@ -13,33 +13,33 @@ class Register extends Component {
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<InputGroup className="mb-3">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-user"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Username"/>
</InputGroup>
<InputGroup className="mb-3">
<div className="input-group-prepend">
<span className="input-group-text">@</span>
</div>
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Email"/>
</InputGroup>
<InputGroup className="mb-3">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Password"/>
</InputGroup>
<InputGroup className="mb-4">
<div className="input-group-prepend">
<span className="input-group-text">
<InputGroupAddon addonType="prepend">
<InputGroupText>
<i className="icon-lock"></i>
</span>
</div>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password"/>
</InputGroup>
<Button color="success" block>Create Account</Button>

View File

@ -1,10 +1,10 @@
{
"name": "@coreui/react",
"version": "1.0.9",
"version": "1.0.10",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT",
"private": true,
"devDependencies": {
@ -14,7 +14,7 @@
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.5",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
@ -24,11 +24,11 @@
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.19.1",
"uglify-js": "3.3.7",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.9.7"
"webpack-dev-server": "2.11.1"
},
"dependencies": {
"bootstrap": "4.0.0",
@ -41,7 +41,7 @@
"react-dom": "16.2.0",
"react-router-dom": "4.2.2",
"react-transition-group": "2.2.1",
"reactstrap": "5.0.0-alpha.4",
"reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1"
},
"scripts": {

View File

@ -20,7 +20,7 @@
.card-header {
.icon-bg {
display: inline-body;
display: inline-block;
padding: $card-spacer-y $card-spacer-x !important;
margin-top: -$card-spacer-y;
margin-right: $card-spacer-x;
@ -135,12 +135,12 @@
}
[class^="icon-"], [class*=" icon-"] {
display: inline-body;
display: inline-block;
vertical-align: middle;
}
i {
display: inline-body;
display: inline-block;
transition: .4s;
}
@ -153,7 +153,7 @@
width: 230px;
margin: 6px;
.input-group-addon {
.input-group-prepend, .input-group-append {
background: #fff;
}

View File

@ -1,6 +1,5 @@
.input-group-addon,
.input-group-btn {
min-width: 40px;
.input-group-prepend,
.input-group-append {
white-space: nowrap;
vertical-align: middle; // Match the inputs
}

View File

@ -1,6 +1,6 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.9
* @version v1.0.10
* @link http://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* @license MIT