Merge pull request #75 from coreui/dev-v2-rc-0

v2.0.0-rc.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-rc.0",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -12,12 +12,13 @@
     "url": "git@github.com:coreui/coreui-free-react-admin-template.git"
   },
   "dependencies": {
+    "@coreui/coreui": "^2.0.0-rc.2",
     "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
-    "@coreui/react": "^2.0.0-beta.3",
+    "@coreui/react": "^2.0.0-rc.0",
     "bootstrap": "^4.1.1",
     "chart.js": "^2.7.2",
     "classnames": "^2.2.5",
-    "core-js": "^2.5.5",
+    "core-js": "^2.5.6",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "flag-icon-css": "^3.0.0",

src/scss/_ie-fix.scss

@@ -1,3 +1,3 @@
-html body .align-items-center {
+html body .app.flex-row.align-items-center {
   height: 100vh;
 }

src/scss/style.css

@@ -9939,5 +9939,5 @@ body {
 .app-header .navbar-nav .dropdown-menu-right {
   right: auto; }
 
-html body .align-items-center {
+html body .app.flex-row.align-items-center {
   height: 100vh; }

src/views/Base/Switches/Switches.js

@@ -84,25 +84,7 @@ class Switches extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                3d Switch <small><code>outline label</code></small>
-              </CardHeader>
-              <CardBody>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'}/>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label dataOn={'\u2713'} dataOff={'\u2715'}/>
-              </CardBody>
-            </Card>
-          </Col>
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                3d Switch <small><code>outline={'alt'} label</code></small>
+                3d Switch <small><code>outline="alt" label</code></small>
               </CardHeader>
               <CardBody>
                 <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label dataOn={'\u2713'} dataOff={'\u2715'} />
@@ -120,25 +102,7 @@ class Switches extends Component {
           <Col xs="12" md="6">
             <Card>
               <CardHeader>
-                3d Switch <small><code>outline label</code></small>
-              </CardHeader>
-              <CardBody>
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'secondary'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'success'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'warning'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'info'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'danger'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'light'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'dark'} defaultChecked label />
-                <AppSwitch className={'mx-1'} variant={'3d'} outline color={'primary'} label />
-              </CardBody>
-            </Card>
-          </Col>
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                3d Switch <small><code>outline={'alt'} label</code></small>
+                3d Switch <small><code>outline="alt" label</code></small>
               </CardHeader>
               <CardBody>
                 <AppSwitch className={'mx-1'} variant={'3d'} outline={'alt'} color={'primary'} defaultChecked label />

src/views/Notifications/Modals/Modals.js

@@ -84,7 +84,7 @@ class Modals extends Component {
                 <i className="fa fa-align-justify"></i> Bootstrap Modals
               </CardHeader>
               <CardBody>
-                <Button onClick={this.toggle}>Launch demo modal</Button>
+                <Button onClick={this.toggle} className="mr-1">Launch demo modal</Button>
                 <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
                   <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
                   <ModalBody>
@@ -100,7 +100,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button onClick={this.toggleLarge}>Launch large modal</Button>
+                <Button onClick={this.toggleLarge} className="mr-1">Launch large modal</Button>
                 <Modal isOpen={this.state.large} toggle={this.toggleLarge}
                        className={'modal-lg ' + this.props.className}>
                   <ModalHeader toggle={this.toggleLarge}>Modal title</ModalHeader>
@@ -117,7 +117,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button onClick={this.toggleSmall}>Launch small modal</Button>
+                <Button onClick={this.toggleSmall} className="mr-1">Launch small modal</Button>
                 <Modal isOpen={this.state.small} toggle={this.toggleSmall}
                        className={'modal-sm ' + this.props.className}>
                   <ModalHeader toggle={this.toggleSmall}>Modal title</ModalHeader>
@@ -136,7 +136,7 @@ class Modals extends Component {
 
                 <hr />
 
-                <Button color="primary" onClick={this.togglePrimary}>Primary modal</Button>
+                <Button color="primary" onClick={this.togglePrimary} className="mr-1">Primary modal</Button>
                 <Modal isOpen={this.state.primary} toggle={this.togglePrimary}
                        className={'modal-primary ' + this.props.className}>
                   <ModalHeader toggle={this.togglePrimary}>Modal title</ModalHeader>
@@ -153,7 +153,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="success" onClick={this.toggleSuccess}>Success modal</Button>
+                <Button color="success" onClick={this.toggleSuccess} className="mr-1">Success modal</Button>
                 <Modal isOpen={this.state.success} toggle={this.toggleSuccess}
                        className={'modal-success ' + this.props.className}>
                   <ModalHeader toggle={this.toggleSuccess}>Modal title</ModalHeader>
@@ -170,7 +170,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="warning" onClick={this.toggleWarning}>Warning modal</Button>
+                <Button color="warning" onClick={this.toggleWarning} className="mr-1">Warning modal</Button>
                 <Modal isOpen={this.state.warning} toggle={this.toggleWarning}
                        className={'modal-warning ' + this.props.className}>
                   <ModalHeader toggle={this.toggleWarning}>Modal title</ModalHeader>
@@ -187,7 +187,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="danger" onClick={this.toggleDanger}>Danger modal</Button>
+                <Button color="danger" onClick={this.toggleDanger} className="mr-1">Danger modal</Button>
                 <Modal isOpen={this.state.danger} toggle={this.toggleDanger}
                        className={'modal-danger ' + this.props.className}>
                   <ModalHeader toggle={this.toggleDanger}>Modal title</ModalHeader>
@@ -204,7 +204,7 @@ class Modals extends Component {
                   </ModalFooter>
                 </Modal>
 
-                <Button color="info" onClick={this.toggleInfo}>Info modal</Button>
+                <Button color="info" onClick={this.toggleInfo} className="mr-1">Info modal</Button>
                 <Modal isOpen={this.state.info} toggle={this.toggleInfo}
                        className={'modal-info ' + this.props.className}>
                   <ModalHeader toggle={this.toggleInfo}>Modal title</ModalHeader>

src/views/Widgets/Widgets.js

@@ -156,7 +156,11 @@ class Widgets extends Component {
             </Widget03>
           </Col>
           <Col xs={12} sm={6} md={3}>
-            <Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} />
+            <Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
+              <div className="chart-wrapper">
+                <Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
+              </div>
+            </Widget03>
           </Col>
           <Col xs={12} sm={6} md={3}>
             <Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
@@ -166,7 +170,11 @@ class Widgets extends Component {
             </Widget03>
           </Col>
           <Col xs={12} sm={6} md={3}>
-            <Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} />
+            <Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
+              <div className="chart-wrapper">
+                <Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
+              </div>
+            </Widget03>
           </Col>
         </Row>
         <CardGroup className="mb-4">