diff --git a/migration.md b/migration.md index d5f130c..2f72488 100644 --- a/migration.md +++ b/migration.md @@ -16,6 +16,16 @@ - variant="pill" --> shape="rounded-pill" - variant="square" --> shape="rounded-0" +## Forms + +- `CInput` => `CFormControl` +- `CLabel` => `CFormLabel` +- `CSelect` => `CFormSelect` + +- Deprecated component `CFormGroup` +- Deprecated component `CInputGroupAppend` +- Deprecated component `CInputGroupPrepend` + ## Header - Deprecated pro `withSubheader` diff --git a/src/containers/TheFooter.js b/src/containers/TheFooter.js index fd884ef..6a16514 100644 --- a/src/containers/TheFooter.js +++ b/src/containers/TheFooter.js @@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react-ts' const TheFooter = () => { return ( - +
CoreUI © 2020 creativeLabs. diff --git a/src/containers/TheHeader.js b/src/containers/TheHeader.js index 7e43271..1cd2ad4 100644 --- a/src/containers/TheHeader.js +++ b/src/containers/TheHeader.js @@ -1,7 +1,7 @@ import React from "react"; import { NavLink } from "react-router-dom"; import { useSelector, useDispatch } from "react-redux"; -import { CToggler, CBreadcrumbRouter, CLink } from "@coreui/react"; +import { CToggler, CBreadcrumbRouter } from "@coreui/react"; import { CContainer, CHeader, @@ -91,7 +91,7 @@ const TheHeader = () => { className="border-0 c-subheader-nav m-0 px-0 px-md-3" routes={routes} /> - + {/* @@ -107,7 +107,7 @@ const TheHeader = () => {  Settings - + */} ); diff --git a/src/containers/TheLayout.js b/src/containers/TheLayout.js index 2da9cc3..e5f88c9 100644 --- a/src/containers/TheLayout.js +++ b/src/containers/TheLayout.js @@ -9,7 +9,7 @@ import { const TheLayout = () => { return ( -
+
diff --git a/src/containers/TheSidebar.js b/src/containers/TheSidebar.js index fbf1300..9201ab2 100644 --- a/src/containers/TheSidebar.js +++ b/src/containers/TheSidebar.js @@ -13,7 +13,7 @@ import { CSidebar, CSidebarBrand, CSidebarNav, - CSidebarNavGenerator, + CCreateNavItem, } from '@coreui/react-ts' import CIcon from '@coreui/icons-react' @@ -27,8 +27,9 @@ const TheSidebar = () => { return ( dispatch({type: 'set', sidebarShow: val })} + position="sticky" + selfHiding="md" + // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })} > { - , badge: { @@ -14,217 +14,245 @@ const _nav = [ text: 'NEW', } }, - // { - // _component: 'CSidebarNavTitle', - // items: ['Theme'] - // }, + { + _component: 'CNavTitle', + anchor: 'Theme' + }, { _component: 'CNavItem', as: NavLink, - anchorText: 'Colors', + anchor: 'Colors', to: '/theme/colors', icon: 'cil-drop', }, { _component: 'CNavItem', as: NavLink, - anchorText: 'Typography', + anchor: 'Typography', to: '/theme/typography', icon: 'cil-pencil', }, - // { - // _component: 'CSidebarNavTitle', - // items: ['Components'] - // }, + { + _component: 'CNavTitle', + anchor: 'Components' + }, { _component: 'CNavGroup', - anchorText: 'Base', - route: '/base', + as: NavLink, + anchor: 'Base', + to: '/to', icon: 'cil-puzzle', items: [ { _component: 'CNavItem', as: NavLink, - anchorText: 'Breadcrumb', + anchor: 'Breadcrumb', to: '/base/breadcrumbs', }, { _component: 'CNavItem', as: NavLink, - anchorText: 'Cards', + anchor: 'Cards', to: '/base/cards', }, { _component: 'CNavItem', - anchorText: 'Carousel', + as: NavLink, + anchor: 'Carousel', to: '/base/carousels', }, { _component: 'CNavItem', - anchorText: 'Collapse', + as: NavLink, + anchor: 'Collapse', to: '/base/collapses', }, { _component: 'CNavItem', - anchorText: 'Forms', + as: NavLink, + anchor: 'Forms', to: '/base/forms', }, { _component: 'CNavItem', - anchorText: 'Jumbotron', + as: NavLink, + anchor: 'Jumbotron', to: '/base/jumbotrons', }, { _component: 'CNavItem', - anchorText: 'List group', + as: NavLink, + anchor: 'List group', to: '/base/list-groups', }, { _component: 'CNavItem', - anchorText: 'Navs', + as: NavLink, + anchor: 'Navs', to: '/base/navs', }, { _component: 'CNavItem', - anchorText: 'Navbars', + as: NavLink, + anchor: 'Navbars', to: '/base/navbars', }, { _component: 'CNavItem', - anchorText: 'Pagination', + as: NavLink, + anchor: 'Pagination', to: '/base/paginations', }, { _component: 'CNavItem', - anchorText: 'Popovers', + as: NavLink, + anchor: 'Popovers', to: '/base/popovers', }, { _component: 'CNavItem', - anchorText: 'Progress', + as: NavLink, + anchor: 'Progress', to: '/base/progress-bar', }, { _component: 'CNavItem', - anchorText: 'Switches', + as: NavLink, + anchor: 'Switches', to: '/base/switches', }, { _component: 'CNavItem', - anchorText: 'Tables', + as: NavLink, + anchor: 'Tables', to: '/base/tables', }, { _component: 'CNavItem', - anchorText: 'Tabs', + as: NavLink, + anchor: 'Tabs', to: '/base/tabs', }, { _component: 'CNavItem', - anchorText: 'Tooltips', + as: NavLink, + anchor: 'Tooltips', to: '/base/tooltips', }, ], }, - // { - // _component: 'CNavGroup', - // anchorText: 'Buttons', - // route: '/buttons', - // icon: 'cil-cursor', - // items: [ - // { - // _component: 'CNavItem', - // anchorText: 'Buttons', - // to: '/buttons/buttons', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Brand buttons', - // to: '/buttons/brand-buttons', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Buttons groups', - // to: '/buttons/button-groups', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Dropdowns', - // to: '/buttons/button-dropdowns', - // } - // ], - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Charts', - // to: '/charts', - // icon: 'cil-chart-pie' - // }, - // { - // _component: 'CNavGroup', - // anchorText: 'Icons', - // route: '/icons', - // icon: 'cil-star', - // items: [ - // { - // _component: 'CNavItem', - // anchorText: 'CoreUI Free', - // to: '/icons/coreui-icons', - // badge: { - // color: 'success', - // text: 'NEW', - // }, - // }, - // { - // _component: 'CNavItem', - // anchorText: 'CoreUI Flags', - // to: '/icons/flags', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'CoreUI Brands', - // to: '/icons/brands', - // }, - // ], - // }, - // { - // _component: 'CNavGroup', - // anchorText: 'Notifications', - // route: '/notifications', - // icon: 'cil-bell', - // items: [ - // { - // _component: 'CNavItem', - // anchorText: 'Alerts', - // to: '/notifications/alerts', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Badges', - // to: '/notifications/badges', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Modal', - // to: '/notifications/modals', - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Toaster', - // to: '/notifications/toaster' - // } - // ] - // }, - // { - // _component: 'CNavItem', - // anchorText: 'Widgets', - // to: '/widgets', - // icon: 'cil-calculator', - // badge: { - // color: 'info', - // text: 'NEW', - // }, - // }, + { + _component: 'CNavGroup', + anchor: 'Buttons', + // route: '/buttons', + icon: 'cil-cursor', + items: [ + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Buttons', + to: '/buttons/buttons', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Brand buttons', + to: '/buttons/brand-buttons', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Buttons groups', + to: '/buttons/button-groups', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Dropdowns', + to: '/buttons/button-dropdowns', + } + ], + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Charts', + to: '/charts', + icon: 'cil-chart-pie' + }, + { + _component: 'CNavGroup', + anchor: 'Icons', + // route: '/icons', + icon: 'cil-star', + items: [ + { + _component: 'CNavItem', + as: NavLink, + anchor: 'CoreUI Free', + to: '/icons/coreui-icons', + badge: { + color: 'success', + text: 'NEW', + }, + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'CoreUI Flags', + to: '/icons/flags', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'CoreUI Brands', + to: '/icons/brands', + }, + ], + }, + { + _component: 'CNavGroup', + anchor: 'Notifications', + // route: '/notifications', + icon: 'cil-bell', + items: [ + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Alerts', + to: '/notifications/alerts', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Badges', + to: '/notifications/badges', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Modal', + to: '/notifications/modals', + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Toaster', + to: '/notifications/toaster' + } + ] + }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Widgets', + to: '/widgets', + icon: 'cil-calculator', + badge: { + color: 'info', + text: 'NEW', + }, + }, // { // _component: 'CSidebarNavDivider' // }, @@ -234,35 +262,35 @@ const _nav = [ // }, // { // _component: 'CNavGroup', - // anchorText: 'Pages', + // anchor: 'Pages', // route: '/pages', // icon: 'cil-star', // items: [ // { // _component: 'CNavItem', - // anchorText: 'Login', + // anchor: 'Login', // to: '/login', // }, // { // _component: 'CNavItem', - // anchorText: 'Register', + // anchor: 'Register', // to: '/register', // }, // { // _component: 'CNavItem', - // anchorText: 'Error 404', + // anchor: 'Error 404', // to: '/404', // }, // { // _component: 'CNavItem', - // anchorText: 'Error 500', + // anchor: 'Error 500', // to: '/500', // }, // ], // }, // { // _component: 'CNavItem', - // anchorText: 'Disabled', + // anchor: 'Disabled', // icon: 'cil-ban', // badge: { // color: 'secondary', @@ -273,7 +301,7 @@ const _nav = [ // }, // { // _component: 'CSidebarNavDivider', - // classanchorText: 'm-2' + // classanchor: 'm-2' // }, // { // _component: 'CSidebarNavTitle', @@ -281,37 +309,37 @@ const _nav = [ // }, // { // _component: 'CNavItem', - // anchorText: 'Label danger', + // anchor: 'Label danger', // to: '', // icon: { - // anchorText: 'cil-star', - // classanchorText: 'text-danger' + // anchor: 'cil-star', + // classanchor: 'text-danger' // }, // label: true // }, // { // _component: 'CNavItem', - // anchorText: 'Label info', + // anchor: 'Label info', // to: '', // icon: { - // anchorText: 'cil-star', - // classanchorText: 'text-info' + // anchor: 'cil-star', + // classanchor: 'text-info' // }, // label: true // }, // { // _component: 'CNavItem', - // anchorText: 'Label warning', + // anchor: 'Label warning', // to: '', // icon: { - // anchorText: 'cil-star', - // classanchorText: 'text-warning' + // anchor: 'cil-star', + // classanchor: 'text-warning' // }, // label: true // }, // { // _component: 'CSidebarNavDivider', - // classanchorText: 'm-2' + // classanchor: 'm-2' // } ] diff --git a/src/reusable/DocsLink.js b/src/reusable/DocsLink.js index 673447f..99ca6e0 100644 --- a/src/reusable/DocsLink.js +++ b/src/reusable/DocsLink.js @@ -11,13 +11,13 @@ const DocsLink = props => { const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href return ( -
- + { text || 'docs' } @@ -25,4 +25,4 @@ const DocsLink = props => { ) } -export default React.memo(DocsLink) \ No newline at end of file +export default React.memo(DocsLink) diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js index ea3b6ce..97804cf 100644 --- a/src/views/base/breadcrumbs/Breadcrumbs.js +++ b/src/views/base/breadcrumbs/Breadcrumbs.js @@ -1,17 +1,17 @@ -import React from 'react' +import React from "react"; import { CBreadcrumb, CBreadcrumbItem, - CBreadcrumbRouter, CCard, CCardBody, CCardHeader, CCol, CRow, - CLink -} from '@coreui/react-ts' -import { DocsLink } from 'src/reusable' -import routes from '../../../routes' + CLink, +} from "@coreui/react-ts"; +import { CBreadcrumbRouter } from '@coreui/react' +import { DocsLink } from "src/reusable"; +import routes from "../../../routes"; const Breadcrumbs = () => { return ( @@ -20,11 +20,11 @@ const Breadcrumbs = () => { Bootstrap Breadcrumb - +
CBreadcrumbRouter wrapper component
- +
Manual
@@ -51,15 +51,13 @@ const Breadcrumbs = () => { Data - - Bootstrap - + Bootstrap - ) -} + ); +}; -export default Breadcrumbs +export default Breadcrumbs; diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js index 9e51238..f66603b 100644 --- a/src/views/base/cards/Cards.js +++ b/src/views/base/cards/Cards.js @@ -49,9 +49,7 @@ const Cards = () => { Card with icon -
- -
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut @@ -64,9 +62,7 @@ const Cards = () => { Card with switch -
- -
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut @@ -79,9 +75,7 @@ const Cards = () => { Card with label -
- Success -
+ Success Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut @@ -94,9 +88,7 @@ const Cards = () => { Card with label -
- 42 -
+ 42 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut @@ -108,7 +100,7 @@ const Cards = () => { - + Card outline primary @@ -120,7 +112,7 @@ const Cards = () => { - + Card outline secondary @@ -132,7 +124,7 @@ const Cards = () => { - + Card outline success @@ -144,7 +136,7 @@ const Cards = () => { - + Card outline info @@ -156,7 +148,7 @@ const Cards = () => { - + Card outline warning @@ -168,7 +160,7 @@ const Cards = () => { - + Card outline danger @@ -183,7 +175,7 @@ const Cards = () => { - + Card with accent @@ -195,7 +187,7 @@ const Cards = () => { - + Card with accent @@ -207,7 +199,7 @@ const Cards = () => { - + Card with accent @@ -219,7 +211,7 @@ const Cards = () => { - + Card with accent @@ -231,7 +223,7 @@ const Cards = () => { - + Card with accent @@ -243,7 +235,7 @@ const Cards = () => { - + Card with accent @@ -257,7 +249,7 @@ const Cards = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -267,7 +259,7 @@ const Cards = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -277,7 +269,7 @@ const Cards = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -287,7 +279,7 @@ const Cards = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -297,7 +289,7 @@ const Cards = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -307,7 +299,7 @@ const Cards = () => { - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

@@ -319,7 +311,7 @@ const Cards = () => { - + Card title @@ -331,7 +323,7 @@ const Cards = () => { - + Card title @@ -343,7 +335,7 @@ const Cards = () => { - + Card title @@ -355,7 +347,7 @@ const Cards = () => { - + Card title @@ -366,45 +358,6 @@ const Cards = () => { - - - - Card title - gradient - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - - - - - - - - Card actions -
- - - - setCollapsed(!collapsed)}> - - - setShowCard(false)}> - - -
- - - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut - laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation - ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - - - - - ) diff --git a/src/views/base/forms/BasicForms.js b/src/views/base/forms/BasicForms.js index 0a28009..24932f7 100644 --- a/src/views/base/forms/BasicForms.js +++ b/src/views/base/forms/BasicForms.js @@ -1,4 +1,11 @@ import React from 'react' +import { + CFade, + CValidFeedback, + CInvalidFeedback, + CTextarea, + CSwitch +} from '@coreui/react' import { CButton, CCard, @@ -7,30 +14,32 @@ import { CCardHeader, CCol, CCollapse, + CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle, - CFade, + // CFade, CForm, - CFormGroup, + CFormCheck, + CFormControl, + CFormLabel, CFormText, - CValidFeedback, - CInvalidFeedback, - CTextarea, - CInput, - CInputFile, - CInputCheckbox, - CInputRadio, + CFormSelect, + // CValidFeedback, + // CInvalidFeedback, + // CTextarea, + // CInput, + // CInputFile, + // CInputRadio, CInputGroup, - CInputGroupAppend, - CInputGroupPrepend, - CDropdown, + // CInputGroupAppend, + // CInputGroupPrepend, CInputGroupText, - CLabel, - CSelect, + // CLabel, + // CSelect, CRow, - CSwitch -} from '@coreui/react' + // CSwitch +} from '@coreui/react-ts' import CIcon from '@coreui/icons-react' import { DocsLink } from 'src/reusable' @@ -51,25 +60,25 @@ const BasicForms = () => { - - Name - - +
+ Name + +
- - Credit Card Number - - +
+ Credit Card Number + +
- - Month - +
+ Month + @@ -82,13 +91,13 @@ const BasicForms = () => { - - + +
- - Year - +
+ Year + @@ -99,14 +108,14 @@ const BasicForms = () => { - - + +
- - CVV/CVC - - +
+ CVV/CVC + +
@@ -119,36 +128,36 @@ const BasicForms = () => { Form - - Company - - - - VAT - - - - Street - - - +
+ Company + +
+
+ VAT + +
+
+ Street + +
+ - - City - - +
+ City + +
- - Postal Code - - +
+ Postal Code + +
- - - Country - - + +
+ Country + +
@@ -162,60 +171,60 @@ const BasicForms = () => { - + - Static + Static

Username

 - - + + - Text Input + Text Input - + This is a help text - - + + - Email Input + Email Input - + Please enter your email - - + + - Password + Password - + Please enter a complex password - - + + - Date Input + Date Input - + - - + + - Disabled Input + Disabled Input - + - - + + - Textarea + Textarea { placeholder="Content..." /> - - + + - Select + Select - + - + - - + + - Select Large + Select Large - + - + - - + + - Select Small + Select Small - + - + - - + + - Disabled Select + Disabled Select - { - + - - + + Switch checkboxes @@ -329,121 +338,102 @@ const BasicForms = () => { variant="opposite" /> - - + + - Radios + Radios - - - Option 1 - - - - Option 2 - - - - Option 3 - +
+ +
+
+ +
+
+ +
- - + + - Inline Radios + Inline Radios - - - One - - - - Two - - - - Three - +
+ + + +
- - - Checkboxes + + + Checkboxes - - + - Option 1 - - - - Option 2 - - - - Option 3 - +
+
+ +
+
+ +
- - + + - Inline Checkboxes + Inline Checkboxes - - + - One - - - - Two - - - - Three - + + +
- - - File input + + + File input - + - - + + - Multiple File input + Multiple File input - - + Choose Files... - + - - - Custom file input + + + Custom file input - - + + Choose file... - + - + @@ -458,14 +448,14 @@ const BasicForms = () => { - - Name - - - - Email - - +
+ Name + +
+
+ Email + +
@@ -482,24 +472,24 @@ const BasicForms = () => { - + - Email + Email - + Please enter your email - - + + - Password + Password - + Please enter your password - + @@ -513,16 +503,16 @@ const BasicForms = () => { - - Email - +
+ Email + Please enter your email - - - Password - +
+
+ Password + Please enter your password - +
@@ -536,56 +526,56 @@ const BasicForms = () => { - + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - - + + - + - + @@ -599,24 +589,24 @@ const BasicForms = () => { - - Small Input + + Small Input - + - - - Normal Input + + + Normal Input - + - - - Large Input + + + Large Input - + - + @@ -634,16 +624,16 @@ const BasicForms = () => { validation feedback - - Input is valid - +
+ Input is valid + Cool! Input is valid - - - Input is invalid - +
+
+ Input is invalid + Houston, we have a problem... - +
@@ -654,19 +644,19 @@ const BasicForms = () => { - - Non-required input - +
+ Non-required input + Non-required - - - Required input - +
+
+ Required input + Please provide a valid information Input provided - +
@@ -680,45 +670,37 @@ const BasicForms = () => { - + - - - - - - - + + + + + - - + + - - - - - - - + + + + + - - + + - - - - - - - - - .00 - + + + + + + .00 - + @@ -734,39 +716,31 @@ const BasicForms = () => { - + - - - Search - - + + Search + - - + + - - - - Submit - + + + Submit - - + + - - - - - - - - + + + + - + @@ -782,9 +756,9 @@ const BasicForms = () => { - + - + Dropdown @@ -797,14 +771,14 @@ const BasicForms = () => { Separated link - + - - + + - - + + Dropdown @@ -819,10 +793,10 @@ const BasicForms = () => { - - + + - + Action @@ -833,7 +807,7 @@ const BasicForms = () => { Separated link - + Dropdown @@ -848,7 +822,7 @@ const BasicForms = () => { - + @@ -867,46 +841,46 @@ const BasicForms = () => { - + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - + @@ -926,46 +900,46 @@ const BasicForms = () => { - + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - + @@ -986,42 +960,30 @@ const BasicForms = () => { - - - - Username - - - - - +
+ + Username + + - - - - - Email - - - - - +
+
+ + Email + + - - - - - Password - - - - - +
+
+ + Password + + - - +
+
Submit - +
@@ -1033,33 +995,27 @@ const BasicForms = () => { - - - - - - +
+ + + - - - - - - - +
+
+ + + - - - - - - - +
+
+ + + - - +
+
Submit - +
@@ -1071,33 +1027,27 @@ const BasicForms = () => { - - - - - - +
+ + + - - - - - - - +
+
+ + + - - - - - - - +
+
+ + + - - +
+
Submit - +
@@ -1132,67 +1082,55 @@ const BasicForms = () => { - - Prepended text +
+ Prepended text
- - @ - - + @ +

Here's some help text

- - - Appended text +
+
+ Appended text
- - - - .00 - + + + .00 Here's more help text
- - - Append and prepend +
+
+ Append and prepend
- - $ - - - - .00 - + $ + + .00
- - - Append with button +
+
+ Append with button
- - - - Go! - + + + Go!
- - - Two-button append +
+
+ Two-button append
- - - - Search - Options - + + + Search + Options
- +
Save changes Cancel diff --git a/src/views/base/navbars/Navbars.js b/src/views/base/navbars/Navbars.js index 54ae45c..e69a11b 100644 --- a/src/views/base/navbars/Navbars.js +++ b/src/views/base/navbars/Navbars.js @@ -1,4 +1,10 @@ import React, { useState } from 'react' +import { + CToggler, + CForm, + CInput, + CImg +} from '@coreui/react' import { CCard, CCardBody, @@ -11,14 +17,10 @@ import { CNavbarNav, CNavbarBrand, CNavbarText, - CToggler, CNavLink, CDropdown, - CForm, - CInput, CButton, - CImg -} from '@coreui/react' +} from '@coreui/react-ts' import { DocsLink } from 'src/reusable' const CNavbars = () => { diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js index 745e258..795a99f 100644 --- a/src/views/notifications/alerts/Alerts.js +++ b/src/views/notifications/alerts/Alerts.js @@ -154,7 +154,7 @@ const Alerts = () => { color="warning" show={visible} closeButton - onShowChange={setVisible} + visible={setVisible} > I will be closed in {visible} seconds!