From d7c4c3bc6dca6813a4fe6e29ba8ec33357fa1098 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Fri, 21 May 2021 12:32:04 +0200 Subject: [PATCH] refactor: update example views --- src/assets/icons/index.js | 14 +- src/containers/_nav.js | 12 ++ src/routes.js | 14 +- src/scss/_example.scss | 3 +- src/views/dashboard/Dashboard.js | 60 +++--- src/views/examples/base/cards/Cards.js | 20 +- .../examples/base/paginations/Paginations.js | 22 +-- src/views/examples/base/progress/Progress.js | 50 ++--- src/views/examples/base/spinners/Spinners.js | 123 +++++++++++++ src/views/examples/base/tables/Tables.js | 86 +++++---- src/views/examples/base/tooltips/Tooltips.js | 2 +- .../buttons/button-groups/ButtonGroups.js | 20 +- src/views/examples/buttons/buttons/Buttons.js | 10 +- .../examples/buttons/dropdowns/Dropdowns.js | 83 ++++----- src/views/examples/charts/Charts.js | 38 ++-- .../forms/checks-radios/ChecksRadios.js | 22 +-- .../forms/floating-labels/FloatingLabels.js | 172 ++++++++++++++++++ .../forms/form-control/FormControl.js | 6 +- .../examples/forms/input-group/InputGroup.js | 20 +- src/views/examples/forms/layout/Layout.js | 8 +- src/views/examples/forms/select/Select.js | 12 +- .../examples/forms/validation/Validation.js | 70 +++---- src/views/examples/widgets/WidgetsDropdown.js | 25 ++- 23 files changed, 595 insertions(+), 297 deletions(-) create mode 100644 src/views/examples/base/spinners/Spinners.js create mode 100644 src/views/examples/forms/floating-labels/FloatingLabels.js diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js index 06aee5b..9e48dcb 100644 --- a/src/assets/icons/index.js +++ b/src/assets/icons/index.js @@ -23,10 +23,11 @@ import { cibVimeo, cibCcMastercard, cibCcVisa, - cibStripe, - cibPaypal, - cibGooglePay, + cibCcStripe, + cibCcPaypal, + cibCcApplePay, cibCcAmex, + cibGoogle, } from '@coreui/icons' import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons' import { @@ -254,9 +255,10 @@ export const icons = Object.assign( cibVimeo, cibCcMastercard, cibCcVisa, - cibStripe, - cibPaypal, - cibGooglePay, + cibCcStripe, + cibCcPaypal, + cibCcApplePay, cibCcAmex, + cibGoogle, }, ) diff --git a/src/containers/_nav.js b/src/containers/_nav.js index 8ca4642..df5d862 100644 --- a/src/containers/_nav.js +++ b/src/containers/_nav.js @@ -103,6 +103,12 @@ const _nav = [ anchor: 'Progress', to: '/base/progress', }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Spinners', + to: '/base/spinners', + }, { _component: 'CNavItem', as: NavLink, @@ -178,6 +184,12 @@ const _nav = [ anchor: 'Input Group', to: '/forms/input-group', }, + { + _component: 'CNavItem', + as: NavLink, + anchor: 'Floating Labels', + to: '/forms/floating-labels', + }, { _component: 'CNavItem', as: NavLink, diff --git a/src/routes.js b/src/routes.js index 1d1e8d3..506915d 100644 --- a/src/routes.js +++ b/src/routes.js @@ -15,6 +15,7 @@ const Navs = React.lazy(() => import('./views/examples/base/navs/Navs')) const Paginations = React.lazy(() => import('./views/examples/base/paginations/Paginations')) const Popovers = React.lazy(() => import('./views/examples/base/popovers/Popovers')) const Progress = React.lazy(() => import('./views/examples/base/progress/Progress')) +const Spinners = React.lazy(() => import('./views/examples/base/spinners/Spinners')) const Tables = React.lazy(() => import('./views/examples/base/tables/Tables')) const Tooltips = React.lazy(() => import('./views/examples/base/tooltips/Tooltips')) @@ -23,6 +24,9 @@ const ButtonGroups = React.lazy(() => import('./views/examples/buttons/button-gr const Dropdowns = React.lazy(() => import('./views/examples/buttons/dropdowns/Dropdowns')) const ChecksRadios = React.lazy(() => import('./views/examples/forms/checks-radios/ChecksRadios')) +const FloatingLabels = React.lazy(() => + import('./views/examples/forms/floating-labels/FloatingLabels'), +) const FormControl = React.lazy(() => import('./views/examples/forms/form-control/FormControl')) const InputGroup = React.lazy(() => import('./views/examples/forms/input-group/InputGroup')) const Layout = React.lazy(() => import('./views/examples/forms/layout/Layout')) @@ -39,10 +43,10 @@ const Badges = React.lazy(() => import('./views/examples/notifications/badges/Ba const Modals = React.lazy(() => import('./views/examples/notifications/modals/Modals')) const Toasts = React.lazy(() => import('./views/examples/notifications/toasts/Toasts')) -const Login = React.lazy(() => import('./views/examples/pages/login/Login')) -const Register = React.lazy(() => import('./views/examples/pages/register/Register')) -const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404')) -const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500')) +// const Login = React.lazy(() => import('./views/examples/pages/login/Login')) +// const Register = React.lazy(() => import('./views/examples/pages/register/Register')) +// const Page404 = React.lazy(() => import('./views/examples/pages/page404/Page404')) +// const Page500 = React.lazy(() => import('./views/examples/pages/page500/Page500')) const Widgets = React.lazy(() => import('./views/examples/widgets/Widgets')) @@ -66,6 +70,7 @@ const routes = [ { path: '/base/paginations', name: 'Paginations', component: Paginations }, { path: '/base/popovers', name: 'Popovers', component: Popovers }, { path: '/base/progress', name: 'Progress', component: Progress }, + { path: '/base/spinners', name: 'Spinners', component: Spinners }, { path: '/base/tables', name: 'Tables', component: Tables }, { path: '/base/tooltips', name: 'Tooltips', component: Tooltips }, { path: '/buttons', name: 'Buttons', component: Buttons, exact: true }, @@ -79,6 +84,7 @@ const routes = [ { path: '/forms/checks-radios', name: 'Checks & Radios', component: ChecksRadios }, { path: '/forms/range', name: 'Range', component: Range }, { path: '/forms/input-group', name: 'Input Group', component: InputGroup }, + { path: '/forms/floating-labels', name: 'Floating Labels', component: FloatingLabels }, { path: '/forms/layout', name: 'Layout', component: Layout }, { path: '/forms/validation', name: 'Validation', component: Validation }, { path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons }, diff --git a/src/scss/_example.scss b/src/scss/_example.scss index 19e63cb..f8791fb 100644 --- a/src/scss/_example.scss +++ b/src/scss/_example.scss @@ -26,7 +26,8 @@ } // Components examples - .preview { + .preview, + .preview .col { + p { margin-top: 2rem; } diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js index 54ad665..993f22d 100644 --- a/src/views/dashboard/Dashboard.js +++ b/src/views/dashboard/Dashboard.js @@ -210,8 +210,8 @@ const Dashboard = () => { Monday
- - + +
@@ -219,8 +219,8 @@ const Dashboard = () => { Tuesday
- - + +
@@ -228,8 +228,8 @@ const Dashboard = () => { Wednesday
- - + +
@@ -237,8 +237,8 @@ const Dashboard = () => { Thursday
- - + +
@@ -246,8 +246,8 @@ const Dashboard = () => { Friday
- - + +
@@ -255,8 +255,8 @@ const Dashboard = () => { Saturday
- - + +
@@ -264,8 +264,8 @@ const Dashboard = () => { Sunday
- - + +
@@ -295,7 +295,7 @@ const Dashboard = () => { 43%
- +
@@ -305,7 +305,7 @@ const Dashboard = () => { 37%
- +
@@ -318,7 +318,7 @@ const Dashboard = () => {
- +
@@ -330,7 +330,7 @@ const Dashboard = () => {
- +
@@ -342,7 +342,7 @@ const Dashboard = () => {
- +
@@ -354,7 +354,7 @@ const Dashboard = () => {
- +
@@ -362,7 +362,7 @@ const Dashboard = () => {
- + @@ -400,7 +400,7 @@ const Dashboard = () => { - + @@ -434,7 +434,7 @@ const Dashboard = () => { - + @@ -468,10 +468,10 @@ const Dashboard = () => { - + - +
Last login
@@ -502,10 +502,10 @@ const Dashboard = () => { - + - +
Last login
@@ -536,10 +536,10 @@ const Dashboard = () => { - + - +
Last login
@@ -570,7 +570,7 @@ const Dashboard = () => { - + diff --git a/src/views/examples/base/cards/Cards.js b/src/views/examples/base/cards/Cards.js index 480bda8..bb41742 100644 --- a/src/views/examples/base/cards/Cards.js +++ b/src/views/examples/base/cards/Cards.js @@ -639,13 +639,8 @@ const Cards = () => { { color: 'light' }, { color: 'dark', textColor: 'white' }, ].map((item, index) => ( - - + + Header {item.color} card title @@ -678,12 +673,8 @@ const Cards = () => { { color: 'light' }, { color: 'dark' }, ].map((item, index) => ( - - + + Header {item.color} card title @@ -716,11 +707,10 @@ const Cards = () => { { color: 'light' }, { color: 'dark' }, ].map((item, index) => ( - + Header diff --git a/src/views/examples/base/paginations/Paginations.js b/src/views/examples/base/paginations/Paginations.js index 2484aa7..0300223 100644 --- a/src/views/examples/base/paginations/Paginations.js +++ b/src/views/examples/base/paginations/Paginations.js @@ -34,7 +34,7 @@ const Paginations = () => { could be aria-label="Search results pages".

- + Previous 1 2 @@ -56,14 +56,14 @@ const Paginations = () => { to provide proper screen reader support with aria attributes.

- - + + 1 2 3 - + @@ -90,14 +90,14 @@ const Paginations = () => { to fully disable their functionality.

- - + + 1 2 3 - + @@ -116,7 +116,7 @@ const Paginations = () => { size="sm" for additional sizes.

- + Previous 1 2 @@ -125,7 +125,7 @@ const Paginations = () => { - + Previous 1 2 @@ -147,7 +147,7 @@ const Paginations = () => { flexbox utilities.

- + Previous 1 2 @@ -156,7 +156,7 @@ const Paginations = () => { - + Previous 1 2 diff --git a/src/views/examples/base/progress/Progress.js b/src/views/examples/base/progress/Progress.js index 008c296..d2736b6 100644 --- a/src/views/examples/base/progress/Progress.js +++ b/src/views/examples/base/progress/Progress.js @@ -21,19 +21,19 @@ const Progress = () => {

- + - + - + - + - + @@ -51,7 +51,7 @@ const Progress = () => {

- 25% + 25% @@ -69,11 +69,11 @@ const Progress = () => { resize accordingly.

- - + + - - + + @@ -90,16 +90,16 @@ const Progress = () => {

- + - + - + - + @@ -116,9 +116,9 @@ const Progress = () => {

- - - + + + @@ -136,16 +136,16 @@ const Progress = () => {

- + - + - + - + @@ -164,16 +164,16 @@ const Progress = () => {

- + - + - + - + diff --git a/src/views/examples/base/spinners/Spinners.js b/src/views/examples/base/spinners/Spinners.js new file mode 100644 index 0000000..39f5543 --- /dev/null +++ b/src/views/examples/base/spinners/Spinners.js @@ -0,0 +1,123 @@ +import React, { useState } from 'react' +import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react' +import { Example } from 'src/reusable' + +const Accordion = () => { + const [activeKey, setActiveKey] = useState(0) + const [activeKey2, setActiveKey2] = useState(0) + + return ( + + + + + React Spinner Border + + +

+ Use the border spinners for a lightweight loading indicator. +

+ + + +

+ The border spinner uses currentColor for its border-color. + You can use any of our text color utilities on the standard spinner. +

+ + + + + + + + + + + + + + + + + React Spinner Growing + + +

+ If you don't fancy a border spinner, switch to the grow spinner. While it doesn't + technically spin, it does repeatedly grow! +

+ + + +

+ Once again, this spinner is built with currentColor, so you can easily + change its appearance. Here it is in blue, along with the supported variants. +

+ + + + + + + + + + + + + + + + + React Spinner Size + + +

+ Add size="sm" property to make a smaller spinner that can quickly be used + within other components. +

+ + + + + + + + + + + React Spinner Buttons + + +

+ Use spinners within buttons to indicate an action is currently processing or taking + place. You may also swap the text out of the spinner element and utilize button text + as needed. +

+ + + + + + + + + + + + + + + + + ) +} + +export default Accordion diff --git a/src/views/examples/base/tables/Tables.js b/src/views/examples/base/tables/Tables.js index 78d98b2..297de70 100644 --- a/src/views/examples/base/tables/Tables.js +++ b/src/views/examples/base/tables/Tables.js @@ -25,8 +25,8 @@ const Tables = () => {

- Using the most basic table CoreUI, here's how{' '} - <CTable>-based tables look in CoreUI. + Using the most basic table CoreUI, here's how <CTable>-based tables + look in CoreUI.

@@ -53,7 +53,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -139,8 +139,8 @@ const Tables = () => {

- Use striped property to add zebra-striping to any table row - within the <CTableBody>. + Use striped property to add zebra-striping to any table row within the{' '} + <CTableBody>.

@@ -167,7 +167,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -201,7 +201,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -232,7 +232,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -248,8 +248,8 @@ const Tables = () => {

- Use hover property to enable a hover state on table rows - within a <CTableBody>. + Use hover property to enable a hover state on table rows within a{' '} + <CTableBody>.

@@ -276,7 +276,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -307,7 +307,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -338,7 +338,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -378,7 +378,7 @@ const Tables = () => { 3 - + Larry the Bird @twitter @@ -411,7 +411,7 @@ const Tables = () => { 3 - + Larry the Bird @twitter @@ -429,8 +429,7 @@ const Tables = () => {

- Add bordered property for borders on all sides of the table - and cells. + Add bordered property for borders on all sides of the table and cells.

@@ -457,14 +456,14 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter

- + Border color utilities {' '} can be added to change colors: @@ -494,7 +493,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -510,7 +509,7 @@ const Tables = () => {

- Add borderless property for a table without borders. + Add borderless property for a table without borders.

@@ -537,7 +536,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -568,7 +567,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -584,9 +583,8 @@ const Tables = () => {

- Add small property to make any{' '} - <CTable> more compact by cutting all cell{' '} - padding in half. + Add small property to make any <CTable> more compact + by cutting all cell padding in half.

@@ -613,7 +611,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -629,13 +627,13 @@ const Tables = () => {

- Table cells of <CTableHead> are always vertical - aligned to the bottom. Table cells in <CTableBody>{' '} - inherit their alignment from <CTable> and are aligned - to the the top by default. Use the align property to re-align where needed. + Table cells of <CTableHead> are always vertical aligned to the + bottom. Table cells in <CTableBody> inherit their alignment from{' '} + <CTable> and are aligned to the the top by default. Use the align + property to re-align where needed.

- + @@ -732,7 +730,7 @@ const Tables = () => { @mdo - + @@ -763,7 +761,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -779,9 +777,9 @@ const Tables = () => {

- Similar to tables and dark tables, use the modifier prop{' '} - color="light" or color="dark" to - make <CTableHead>s appear light or dark gray. + Similar to tables and dark tables, use the modifier prop color="light" or{' '} + color="dark" to make <CTableHead>s appear light or + dark gray.

@@ -840,7 +838,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -880,7 +878,7 @@ const Tables = () => { 3 - Larry the Bird + Larry the Bird @twitter @@ -904,9 +902,9 @@ const Tables = () => {

- A <CTableCaption> functions like a heading for a - table. It helps users with screen readers to find a table and understand what it's - about and decide if they want to read it. + A <CTableCaption> functions like a heading for a table. It helps + users with screen readers to find a table and understand what it's about and decide if + they want to read it.

@@ -942,8 +940,8 @@ const Tables = () => {

- You can also put the <CTableCaption> on the top of - the table with caption="top". + You can also put the <CTableCaption> on the top of the table with{' '} + caption="top".

diff --git a/src/views/examples/base/tooltips/Tooltips.js b/src/views/examples/base/tooltips/Tooltips.js index 38be2d9..0a46136 100644 --- a/src/views/examples/base/tooltips/Tooltips.js +++ b/src/views/examples/base/tooltips/Tooltips.js @@ -54,7 +54,7 @@ const Tooltips = () => { freegan cred raw denim single-origin coffee viral.

-

+

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using CoreUI in RTL.

diff --git a/src/views/examples/buttons/button-groups/ButtonGroups.js b/src/views/examples/buttons/button-groups/ButtonGroups.js index 5d22284..731dfc8 100644 --- a/src/views/examples/buttons/button-groups/ButtonGroups.js +++ b/src/views/examples/buttons/button-groups/ButtonGroups.js @@ -114,21 +114,21 @@ const ButtonGroups = () => { button buttonVariant="outline" id="btncheck1" - autocomplete="off" + autoComplete="off" label="Checkbox 1" /> @@ -141,7 +141,7 @@ const ButtonGroups = () => { buttonVariant="outline" name="btnradio" id="btnradio1" - autocomplete="off" + autoComplete="off" label="Radio 1" /> { buttonVariant="outline" name="btnradio" id="btnradio2" - autocomplete="off" + autoComplete="off" label="Radio 2" /> { buttonVariant="outline" name="btnradio" id="btnradio3" - autocomplete="off" + autoComplete="off" label="Radio 3" /> @@ -415,9 +415,9 @@ const ButtonGroups = () => { buttonVariant="outline" name="vbtnradio" id="vbtnradio1" - autocomplete="off" + autoComplete="off" label="Radio 1" - checked + defaultChecked /> { buttonVariant="outline" name="vbtnradio" id="vbtnradio2" - autocomplete="off" + autoComplete="off" label="Radio 2" /> { buttonVariant="outline" name="vbtnradio" id="vbtnradio3" - autocomplete="off" + autoComplete="off" label="Radio 3" /> diff --git a/src/views/examples/buttons/buttons/Buttons.js b/src/views/examples/buttons/buttons/Buttons.js index f6f4c74..ad04ef2 100644 --- a/src/views/examples/buttons/buttons/Buttons.js +++ b/src/views/examples/buttons/buttons/Buttons.js @@ -58,7 +58,7 @@ const Buttons = () => { React Button with icons -

+

You can combine button with our CoreUI Icons.

@@ -347,7 +347,7 @@ const Buttons = () => { Create buttons that span the full width of a parent—by using utilities.

-
+
Button Button
@@ -359,7 +359,7 @@ const Buttons = () => { your browser to see them change.

-
+
Button Button
@@ -370,7 +370,7 @@ const Buttons = () => { horizontally with .mx-auto, too.

-
+
Button Button
@@ -382,7 +382,7 @@ const Buttons = () => { stacked.

-
+
Button diff --git a/src/views/examples/buttons/dropdowns/Dropdowns.js b/src/views/examples/buttons/dropdowns/Dropdowns.js index 7ec42fd..a96f130 100644 --- a/src/views/examples/buttons/dropdowns/Dropdowns.js +++ b/src/views/examples/buttons/dropdowns/Dropdowns.js @@ -1,6 +1,7 @@ import React from 'react' import { CButton, + CButtonGroup, CCard, CCardBody, CCardHeader, @@ -23,9 +24,8 @@ const Dropdowns = () => { React Dropdown Single button -

- Here's how you can put them to work with either{' '} - <button> elements: +

+ Here's how you can put them to work with either <button> elements:

@@ -37,7 +37,9 @@ const Dropdowns = () => { -

The best part is you can do this with any button variant, too:

+

+ The best part is you can do this with any button variant, too: +

<> {['primary', 'secondary', 'success', 'info', 'warning', 'danger'].map( @@ -65,17 +67,16 @@ const Dropdowns = () => { React Dropdown Split button -

+

Similarly, create split button dropdowns with virtually the same markup as single - button dropdowns, but with the addition of boolean prop{' '} - split for proper spacing around the dropdown caret. + button dropdowns, but with the addition of boolean prop split for proper + spacing around the dropdown caret.

-

- We use this extra class to reduce the horizontal padding on - either side of the caret by 25% and remove the margin-left{' '} - that's attached for normal button dropdowns. Those additional changes hold the caret - centered in the split button and implement a more properly sized hit area next to the - main button. +

+ We use this extra class to reduce the horizontal padding on either side + of the caret by 25% and remove the margin-left that's attached for normal + button dropdowns. Those additional changes hold the caret centered in the split button + and implement a more properly sized hit area next to the main button.

<> @@ -172,10 +173,9 @@ const Dropdowns = () => { React Dropdown Single button -

+

Opt into darker dropdowns to match a dark navbar or custom style by set{' '} - dark property. No changes are required to the dropdown - items. + dark property. No changes are required to the dropdown items.

@@ -189,7 +189,7 @@ const Dropdowns = () => { -

And putting it to use in a navbar:

+

And putting it to use in a navbar:

diff --git a/src/views/examples/forms/floating-labels/FloatingLabels.js b/src/views/examples/forms/floating-labels/FloatingLabels.js new file mode 100644 index 0000000..9ef9f72 --- /dev/null +++ b/src/views/examples/forms/floating-labels/FloatingLabels.js @@ -0,0 +1,172 @@ +import React from 'react' +import { + CCard, + CCardBody, + CCardHeader, + CCol, + CFormControl, + CFormLabel, + CFormFloating, + CFormSelect, + CRow, +} from '@coreui/react' +import { Example } from 'src/reusable' + +const FloatingLabels = () => { + return ( + + + + + React Floating labels + + +

+ Wrap a pair of <CFormControl> and <CFormLabel>{' '} + elements in CFormFloating to enable floating labels with textual form + fields. A placeholder is required on each{' '} + <CFormControl> as our method of CSS-only floating labels uses the{' '} + :placeholder-shown pseudo-element. Also note that the{' '} + <CFormControl> must come first so we can utilize a sibling selector + (e.g., ~). +

+ + + + Email address + + + + Password + + +

+ When there's a value already defined, <CFormLabel>s + will automatically adjust to their floated position. +

+ + + + Input with value + + + + + + + + + React Floating labels Textareas + + +

+ By default, <CFormControl component="textarea">s will be the same + height as <CFormControl>s. +

+ + + + Comments + + +

+ To set a custom height on your <CFormControl component="textarea">, + do not use the rows attribute. Instead, set an explicit{' '} + height (either inline or via custom CSS). +

+ + + + Comments + + + + + + + + + React Floating labels Selects + + +

+ Other than <CFormControl>, floating labels are only available on{' '} + <CFormSelect>s. They work in the same way, but unlike{' '} + <CFormControl>s, they'll always show the{' '} + <CFormLabel> in its floated state.{' '} + + Selects with size and multiple are not supported. + +

+ + + + + + + + + Works with selects + + + + + + + + + React Floating labels Layout + + +

+ When working with the CoreUI for Bootstrap grid system, be sure to place form elements + within column classes. +

+ + + + + + Email address + + + + + + + + + + + Works with selects + + + + + + + + + ) +} + +export default FloatingLabels diff --git a/src/views/examples/forms/form-control/FormControl.js b/src/views/examples/forms/form-control/FormControl.js index b5615b9..a999719 100644 --- a/src/views/examples/forms/form-control/FormControl.js +++ b/src/views/examples/forms/form-control/FormControl.js @@ -150,7 +150,7 @@ const FormControl = () => { @@ -174,7 +174,7 @@ const FormControl = () => { @@ -237,7 +237,7 @@ const FormControl = () => { diff --git a/src/views/examples/forms/input-group/InputGroup.js b/src/views/examples/forms/input-group/InputGroup.js index 5774bec..ab03c6a 100644 --- a/src/views/examples/forms/input-group/InputGroup.js +++ b/src/views/examples/forms/input-group/InputGroup.js @@ -282,7 +282,7 @@ const Select = () => { - + Dropdown @@ -298,7 +298,7 @@ const Select = () => { - + Dropdown @@ -312,7 +312,7 @@ const Select = () => { - + Dropdown @@ -325,7 +325,7 @@ const Select = () => { - + Dropdown @@ -350,7 +350,7 @@ const Select = () => { - + Action @@ -367,7 +367,7 @@ const Select = () => { - + Action @@ -397,7 +397,7 @@ const Select = () => { Options - + @@ -405,7 +405,7 @@ const Select = () => { - + @@ -419,7 +419,7 @@ const Select = () => { Button - + @@ -427,7 +427,7 @@ const Select = () => { - + diff --git a/src/views/examples/forms/layout/Layout.js b/src/views/examples/forms/layout/Layout.js index e30104a..19ff6f6 100644 --- a/src/views/examples/forms/layout/Layout.js +++ b/src/views/examples/forms/layout/Layout.js @@ -90,7 +90,7 @@ const Layout = () => { State - + @@ -303,7 +303,7 @@ const Layout = () => { Preference - + @@ -342,7 +342,7 @@ const Layout = () => { Preference - + @@ -388,7 +388,7 @@ const Layout = () => { Preference - + diff --git a/src/views/examples/forms/select/Select.js b/src/views/examples/forms/select/Select.js index 5df570a..056055b 100644 --- a/src/views/examples/forms/select/Select.js +++ b/src/views/examples/forms/select/Select.js @@ -13,7 +13,7 @@ const Select = () => { - + @@ -34,13 +34,13 @@ const Select = () => {

- + - + @@ -51,7 +51,7 @@ const Select = () => {

- + @@ -62,7 +62,7 @@ const Select = () => {

- + @@ -83,7 +83,7 @@ const Select = () => {

- + diff --git a/src/views/examples/forms/validation/Validation.js b/src/views/examples/forms/validation/Validation.js index 243827e..124d81c 100644 --- a/src/views/examples/forms/validation/Validation.js +++ b/src/views/examples/forms/validation/Validation.js @@ -36,12 +36,12 @@ const CustomStyles = () => { > Email - + Looks good! Email - + Looks good! @@ -51,7 +51,7 @@ const CustomStyles = () => { @@ -66,9 +66,7 @@ const CustomStyles = () => { City - + Please provide a valid city. @@ -110,12 +108,12 @@ const BrowserDefaults = () => { Email - + Looks good! Email - + Looks good! @@ -125,7 +123,7 @@ const BrowserDefaults = () => { @@ -140,9 +138,7 @@ const BrowserDefaults = () => { City - + Please provide a valid city. @@ -189,14 +185,14 @@ const Tooltips = () => { > Email - + Looks good! Email - + Looks good! @@ -208,7 +204,7 @@ const Tooltips = () => { @@ -227,7 +223,7 @@ const Tooltips = () => { City - @@ -310,8 +306,8 @@ const Validation = () => {

We recommend using client-side validation, but in case you require server-side - validation, you can indicate invalid and valid form fields with isInvalid{' '} - and isValid boolean properties. + validation, you can indicate invalid and valid form fields with invalid{' '} + and valid boolean properties.

For invalid fields, ensure that the invalid feedback/error message is associated with @@ -323,12 +319,24 @@ const Validation = () => { Email - + Looks good! Email - + Looks good! @@ -338,9 +346,9 @@ const Validation = () => { Please choose a username. @@ -348,22 +356,20 @@ const Validation = () => { City - + Please provide a valid city. City - - + + Please provide a valid city. City - + Please provide a valid zip. @@ -371,7 +377,7 @@ const Validation = () => { type="checkbox" id="invalidCheck" label="Agree to terms and conditions" - isInvalid + invalid required /> You must agree before submitting. @@ -409,14 +415,14 @@ const Validation = () => {

- + Textarea Please enter a message in the textarea. @@ -449,7 +455,7 @@ const Validation = () => {
- + diff --git a/src/views/examples/widgets/WidgetsDropdown.js b/src/views/examples/widgets/WidgetsDropdown.js index ab0d33d..e438c7c 100644 --- a/src/views/examples/widgets/WidgetsDropdown.js +++ b/src/views/examples/widgets/WidgetsDropdown.js @@ -23,12 +23,11 @@ const WidgetsDropdown = () => { value="9.823" title="Members online" action={ - - + + - {/* TODO: placement doesn't work */} - + Action Another action Something else here... @@ -106,11 +105,11 @@ const WidgetsDropdown = () => { value="9.823" title="Members online" action={ - - + + - + Action Another action Something else here... @@ -187,11 +186,11 @@ const WidgetsDropdown = () => { value="9.823" title="Members online" action={ - - + + - + Action Another action Something else here... @@ -255,11 +254,11 @@ const WidgetsDropdown = () => { value="9.823" title="Members online" action={ - - + + - + Action Another action Something else here...