From 323e9b9d8db5867a6d00e8442e7f0154bcac3813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 16 May 2021 20:58:15 +0200 Subject: [PATCH] refactor: add form components examples --- src/views/forms/checks-radios/ChecksRadios.js | 408 ++++++++++++++ src/views/forms/form-control/FormControl.js | 252 +++++++++ src/views/forms/input-group/InputGroup.js | 505 ++++++++++++++++++ src/views/forms/layout/Layout.js | 425 +++++++++++++++ src/views/forms/range/Range.js | 84 +++ src/views/forms/select/Select.js | 111 ++++ src/views/forms/validation/Validation.js | 505 ++++++++++++++++++ 7 files changed, 2290 insertions(+) create mode 100644 src/views/forms/checks-radios/ChecksRadios.js create mode 100644 src/views/forms/form-control/FormControl.js create mode 100644 src/views/forms/input-group/InputGroup.js create mode 100644 src/views/forms/layout/Layout.js create mode 100644 src/views/forms/range/Range.js create mode 100644 src/views/forms/select/Select.js create mode 100644 src/views/forms/validation/Validation.js diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js new file mode 100644 index 0000000..72ad73a --- /dev/null +++ b/src/views/forms/checks-radios/ChecksRadios.js @@ -0,0 +1,408 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const ChecksRadios = () => { + return ( + + + + + React Checkbox + + + + + + + + + + + + + React Checkbox Disabled + + +

+ Add the disabled attribute and the associated{' '} + <label>s are automatically styled to match with a + lighter color to help indicate the input's state. +

+ + + + + + + + + + + React Radio + + +

+ Add the disabled attribute and the associated{' '} + <label>s are automatically styled to match with a + lighter color to help indicate the input's state. +

+ + + + + + + + + + + React Radio Disabled + + + + + + + + + + + + + React Switches + + +

+ A switch has the markup of a custom checkbox but uses the{' '} + switch boolean properly to render a toggle switch. Switches + also support the disabled attribute. +

+ + + + + + + + + + + + + React Switches Sizes + + + + + + + + + + + + + + React Checks and Radios Default layout (stacked) + + +

+ By default, any number of checkboxes and radios that are immediate sibling will be + vertically stacked and appropriately spaced. +

+ + + + + + + + + + + + + + + + React Checks and Radios Inline + + +

+ Group checkboxes or radios on the same horizontal row by adding{' '} + inline boolean property to any{' '} + <CFormCheck>. +

+ + + + + + + + + + + + + + + + + React Checks and Radios Without labels + + +

+ Remember to still provide some form of accessible name for assistive technologies (for + instance, using aria-label). +

+ +
+ +
+
+ +
+ + + + + + + + Toggle buttons + + +

+ Create button-like checkboxes and radio buttons by using{' '} + button boolean property on the{' '} + <CFormCheck> component. These toggle buttons can + further be grouped in a button group if needed. +

+ + + + + + + + + +

Radio toggle buttons

+ + + + + + +

Outlined styles

+

+ Different variants of button, such at the various outlined styles, are supported. +

+ +
+ +
+
+ +
+
+ + +
+ + + + + + ) +} + +export default ChecksRadios diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js new file mode 100644 index 0000000..3b5ac92 --- /dev/null +++ b/src/views/forms/form-control/FormControl.js @@ -0,0 +1,252 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CForm, + CFormControl, + CFormLabel, + CRow, +} from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const FormControl = () => { + return ( + + + + + React Form Control + + + + +
+ Email address + +
+
+ Example textarea + +
+ + + + + + + + + React Form Control Sizing + + +

+ Set heights using size property like{' '} + size="lg" and size="sm". +

+ + +
+ +
+ + + + + + + + + React Form Control Disabled + + +

+ Add the disabled boolean attribute on an input to give it a + grayed out appearance and remove pointer events. +

+ + +
+ +
+ + + + + + + + React Form Control Readonly + + +

+ Add the readOnly boolean attribute on an input to prevent + modification of the input's value. Read-only inputs appear lighter (just like disabled + inputs), but retain the standard cursor. +

+ + + + + + + + + + React Form Control Readonly plain text + + +

+ If you want to have <input readonly> elements in your + form styled as plain text, use the plainText boolean + property to remove the default form field styling and preserve the correct margin and + padding. +

+ + + + Email + +
+ +
+ + + + Password + +
+ +
+ + + + +
+ + Email + + +
+
+ + Password + + +
+
+ + Confirm identity + +
+ + + + + + + + + React Form Control File input + + + +
+ Default file input example + +
+
+ Multiple files input example + +
+
+ Disabled file input example + +
+
+ Small file input example + +
+
+ Large file input example + +
+ + + + + + + + React Form Control Color + + + + Color picker + + + + + + + ) +} + +export default FormControl diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js new file mode 100644 index 0000000..b2e0621 --- /dev/null +++ b/src/views/forms/input-group/InputGroup.js @@ -0,0 +1,505 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CDropdown, + CDropdownDivider, + CDropdownItem, + CDropdownMenu, + CDropdownToggle, + CFormCheck, + CFormControl, + CFormLabel, + CFormSelect, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const Select = () => { + return ( + + + + + React Input group Basic example + + +

+ Place one add-on or button on either side of an input. You may also place one on both + sides of an input. Remember to place <CFormLabel>s + outside the input group. +

+ + + @ + + + + + @example.com + + Your vanity URL + + https://example.com/users/ + + + + $ + + .00 + + + + @ + + + + With textarea + + + + + + + + + + React Input group Wrapping + + +

+ Input groups wrap by default via flex-wrap: wrap in order + to accommodate custom form field validation within an input group. You may disable + this with .flex-nowrap. +

+ + + @ + + + + + + + + + + React Input group Sizing + + +

+ Add the relative form sizing classes to the{' '} + <CInputGroup> itself and contents within will + automatically resize—no need for repeating the form control size classes on each + element. +

+

+ + Sizing on the individual input group elements isn't supported. + +

+ + + Small + + + + Default + + + + Large + + + + + + + + + + React Input group Checkboxes and radios + + +

+ Place any checkbox or radio option within an input group's addon instead of text. +

+ + + + + + + + + + + + + + + + + + + + + React Input group Multiple inputs + + +

+ While multiple <CFormControl>s are supported + visually, validation styles are only available for input groups with a single{' '} + <CFormControl>. +

+ + + First and last name + + + + + + + + + + + React Input group Multiple addons + + +

+ Multiple add-ons are supported and can be mixed with checkbox and radio input + versions.. +

+ + + $ + 0.00 + + + + + $ + 0.00 + + + + + + + + + React Input group Button addons + + +

+ Multiple add-ons are supported and can be mixed with checkbox and radio input + versions.. +

+ + + + Button + + + + + + + Button + + + + + Button + + + Button + + + + + + + Button + + + Button + + + + + + + + + + React Input group Buttons with dropdowns + + + + + + + Dropdown + + + Action + Another action + Something else here + + Separated link + + + + + + + + + Dropdown + + + Action + Another action + Something else here + + Separated link + + + + + + + Dropdown + + + Action + Another action + Something else here + + Separated link + + + + + + Dropdown + + + Action + Another action + Something else here + + Separated link + + + + + + + + + + + React Input group Segmented buttons + + + + + + + Action + + + + Action + Another action + Something else here + + Separated link + + + + + + + + + Action + + + + Action + Another action + Something else here + + Separated link + + + + + + + + + + + React Input group Custom select + + + + + + Options + + + + + + + + + + + + + + + + + Options + + + + + Button + + + + + + + + + + + + + + + + + Button + + + + + + + + + + React Input group Custom file input + + + + + + Upload + + + + + + + Upload + + + + + Button + + + + + + + Button + + + + + + + + ) +} + +export default Select diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js new file mode 100644 index 0000000..28bb763 --- /dev/null +++ b/src/views/forms/layout/Layout.js @@ -0,0 +1,425 @@ +import React from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CForm, + CFormCheck, + CFormControl, + CFormLabel, + CFormSelect, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const Layout = () => { + return ( + + + + + Layout Form grid + + +

+ More complex forms can be built using our grid classes. Use these for form layouts + that require multiple columns, varied widths, and additional alignment options. +

+ + + + + + + + + + + + + + + + + Layout Gutters + + +

+ By adding{' '} + + gutter modifier classes + + , you can have control over the gutter width in as well the inline as block direction. +

+ + + + + + + + + + +

+ More complex layouts can also be created with the grid system. +

+ + + + Email + + + + Password + + + + Address + + + + Address 2 + + + + City + + + + State + + + + + + + Zip + + + + + + + Sign in + + + + + + + + + + Layout Horizontal form + + +

+ Create horizontal forms with the grid by adding the .row{' '} + class to form groups and using the .col-*-* classes to + specify the width of your labels and controls. Be sure to add{' '} + .col-form-label to your{' '} + <CFormLabel>s as well so they're vertically centered + with their associated form controls. +

+

+ At times, you maybe need to use margin or padding utilities to create that perfect + alignment you need. For example, we've removed the{' '} + padding-top on our stacked radio inputs label to better + align the text baseline. +

+ + + + + Email + + + + + + + + Password + + + + + +
+ Radios + + + + + +
+ +
+ +
+ + Sign in + + + + + + + + + Layout Horizontal form label sizing + + +

+ Be sure to use .col-form-label-sm or{' '} + .col-form-label-lg to your{' '} + <CFormLabel>s or{' '} + <legend>s to correctly follow the size of{' '} + .form-control-lg and{' '} + .form-control-sm. +

+ + + + Email + + + + + + + + Email + + + + + + + + Email + + + + + + + + + + + + + Layout Column sizing + + +

+ As shown in the previous examples, our grid system allows you to place any number of{' '} + <CCol>s within a{' '} + <CRow>. They'll split the available width equally + between them. You may also pick a subset of your columns to take up more or less + space, while the remaining <CCol>s equally split the + rest, with specific column classes like <CCol sm="7"> + . +

+ + + + + + + + + + + + + + + + + + + + Layout Auto-sizing + + +

+ The example below uses a flexbox utility to vertically center the contents and changes{' '} + <CCol> to{' '} + <CCol xs="auto"> so that your columns only take up as + much space as needed. Put another way, the column sizes itself based on the contents. +

+ + + + + Name + + + + + + Username + + + @ + + + + + + Preference + + + + + + + + + + + + + Submit + + + +

+ You can then remix that once again with size-specific column classes. +

+ + + + + Name + + + + + + Username + + + @ + + + + + + Preference + + + + + + + + + + + + + Submit + + + + + + + + + + Layout Inline forms + + +

+ Use the <CCol xs="auto"> class to create horizontal + layouts. By adding{' '} + + gutter modifier classes + + , we will have gutters in horizontal and vertical directions. The{' '} + .align-items-center aligns the form elements to the middle, + making the <CFormCheck> align properly. +

+ + + + + Username + + + @ + + + + + + Preference + + + + + + + + + + + + + Submit + + + + + + + + ) +} + +export default Layout diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js new file mode 100644 index 0000000..04bb95a --- /dev/null +++ b/src/views/forms/range/Range.js @@ -0,0 +1,84 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const Range = () => { + return ( + + + + + React Range + + +

+ Create custom <input type="range"> controls with{' '} + <CFormControl>. +

+ + Example range + + + + + + + + + React Range Disabled + + +

+ Add the disabled boolean attribute on an input to give it a + grayed out appearance and remove pointer events. +

+ + Disabled range + + + + + + + + + React Range Min and max + + +

+ Range inputs have implicit values for min and{' '} + max—0 and{' '} + 100, respectively. You may specify new values for those + using the min and max{' '} + attributes. +

+ + Example range + + + + + + + + + React Range Steps + + +

+ By default, range inputs "snap" to integer values. To change this, you can specify a{' '} + step value. In the example below, we double the number of + steps by using step="0.5". +

+ + Example range + + + + + + + ) +} + +export default Range diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js new file mode 100644 index 0000000..80300c0 --- /dev/null +++ b/src/views/forms/select/Select.js @@ -0,0 +1,111 @@ +import React from 'react' +import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const Select = () => { + return ( + + + + + React Select Default + + + + + + + + + + + + + + + + + React Select Sizing + + +

+ You may also choose from small and large custom selects to match our similarly sized + text inputs. +

+ + + + + + + + + + + + + + +

+ The multiple attribute is also supported: +

+ + + + + + + + +

+ As is the htmlSize property: +

+ + + + + + + + + + + + + + + React Select Disabled + + +

+ Add the disabled boolean attribute on a select to give it a + grayed out appearance and remove pointer events. +

+ + + + + + + + + + + + {/* + + + React Select + + + + + + + + */} + + ) +} + +export default Select diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js new file mode 100644 index 0000000..25e9366 --- /dev/null +++ b/src/views/forms/validation/Validation.js @@ -0,0 +1,505 @@ +import React, { useState } from 'react' +import { + CButton, + CCard, + CCardBody, + CCardHeader, + CCol, + CForm, + CFormCheck, + CFormControl, + CFormFeedback, + CFormLabel, + CFormSelect, + CInputGroup, + CInputGroupText, + CRow, +} from '@coreui/react' +import { DocsLink, Example } from 'src/reusable' + +const CustomStyles = () => { + const [validated, setValidated] = useState(false) + const handleSubmit = (event) => { + const form = event.currentTarget + if (form.checkValidity() === false) { + event.preventDefault() + event.stopPropagation() + } + setValidated(true) + } + return ( + + + Email + + Looks good! + + + Email + + Looks good! + + + Username + + @ + + Please choose a username. + + + + City + + Please provide a valid city. + + + City + + + + + Please provide a valid city. + + + City + + Please provide a valid zip. + + + + You must agree before submitting. + + + + Submit form + + + + ) +} + +const BrowserDefaults = () => { + const [validated, setValidated] = useState(false) + const handleSubmit = (event) => { + const form = event.currentTarget + if (form.checkValidity() === false) { + event.preventDefault() + event.stopPropagation() + } + setValidated(true) + } + return ( + + + Email + + Looks good! + + + Email + + Looks good! + + + Username + + @ + + Please choose a username. + + + + City + + Please provide a valid city. + + + City + + + + + Please provide a valid city. + + + City + + Please provide a valid zip. + + + + You must agree before submitting. + + + + Submit form + + + + ) +} + +const Tooltips = () => { + const [validated, setValidated] = useState(false) + const handleSubmit = (event) => { + const form = event.currentTarget + if (form.checkValidity() === false) { + event.preventDefault() + event.stopPropagation() + } + setValidated(true) + } + return ( + + + Email + + + Looks good! + + + + Email + + + Looks good! + + + + Username + + @ + + + Please choose a username. + + + + + City + + + Please provide a valid city. + + + + City + + + + + + Please provide a valid city. + + + + City + + + Please provide a valid zip. + + + + + Submit form + + + + ) +} + +const Validation = () => { + return ( + + + + + Validation Custom styles + + +

+ For custom CoreUI form validation messages, you'll need to add the{' '} + noValidate boolean property to your{' '} + <CForm>. This disables the browser default feedback + tooltips, but still provides access to the form validation APIs in JavaScript. Try to + submit the form below; our JavaScript will intercept the submit button and relay + feedback to you. When attempting to submit, you'll see the{' '} + :invalid and :valid styles + applied to your form controls. +

+

+ Custom feedback styles apply custom colors, borders, focus styles, and background + icons to better communicate feedback.{' '} +

+ + {CustomStyles()} + + + + + + + + Validation Browser defaults + + +

+ Not interested in custom validation feedback messages or writing JavaScript to change + form behaviors? All good, you can use the browser defaults. Try submitting the form + below. Depending on your browser and OS, you'll see a slightly different style of + feedback. +

+

+ While these feedback styles cannot be styled with CSS, you can still customize the + feedback text through JavaScript. +

+ + {BrowserDefaults()} + + + + + + + + Validation Server side + + +

+ 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. +

+

+ For invalid fields, ensure that the invalid feedback/error message is associated with + the relevant form field using aria-describedby (noting that + this attribute allows more than one id to be referenced, in + case the field already points to additional form text). +

+ + + + Email + + Looks good! + + + Email + + Looks good! + + + Username + + @ + + Please choose a username. + + + + City + + Please provide a valid city. + + + City + + + + + Please provide a valid city. + + + City + + Please provide a valid zip. + + + + You must agree before submitting. + + + + Submit form + + + + + + + + + + + Validation Supported elements + + +

+ Validation styles are available for the following form controls and components: +

+
    +
  • + <CFormControl>s +
    • +
  • + <CFormSelect>s +
    • +
  • + <CFormCheck>s +
    • +
+ + +
+ + Textarea + + + Please enter a message in the textarea. +
+ + Example invalid feedback text + + + + + More example invalid feedback text + +
+ + + + + + + Example invalid select feedback +
+ +
+ + Example invalid form file feedback +
+ +
+ + Submit form + +
+ + + + + + + + + Validation Tooltips + + +

+ If your form layout allows it, you can swap the text for the tooltip to display + validation feedback in a styled tooltip. Be sure to have a parent with{' '} + position: relative on it for tooltip positioning. In the + example below, our column classes have this already, but your project may require an + alternative setup. +

+ + {Tooltips()} + + + + + + ) +} + +export default Validation