feat(CFormInput, CFormSelect, CFormTextarea): add feedback support to floating labels

Author: mrholek

packages/coreui-react/src/components/form/CFormControlWrapper.tsx

@@ -12,6 +12,12 @@ export interface CFormControlWrapperProps extends CFormControlValidationProps {
    * @ignore
    */
   children?: ReactNode
+  /**
+   * A string of all className you want applied to the floating label wrapper.
+   *
+   * @since 4.3.0
+   */
+  floatingClassName?: string
   /**
    * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
    *
@@ -42,6 +48,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   feedback,
   feedbackInvalid,
   feedbackValid,
+  floatingClassName,
   floatingLabel,
   id,
   invalid,
@@ -51,9 +58,20 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
   valid,
 }) => {
   return floatingLabel ? (
-    <CFormFloating>
+    <CFormFloating className={floatingClassName}>
       {children}
       <CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
+      {text && <CFormText id={describedby}>{text}</CFormText>}
+      <CFormControlValidation
+        describedby={describedby}
+        feedback={feedback}
+        feedbackInvalid={feedbackInvalid}
+        feedbackValid={feedbackValid}
+        floatingLabel={floatingLabel}
+        invalid={invalid}
+        tooltipFeedback={tooltipFeedback}
+        valid={valid}
+      />
     </CFormFloating>
   ) : (
     <>
@@ -76,6 +94,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
 
 CFormControlWrapper.propTypes = {
   children: PropTypes.node,
+  floatingClassName: PropTypes.string,
   floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),

packages/coreui-react/src/components/form/CFormInput.tsx

@@ -58,6 +58,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
       feedback,
       feedbackInvalid,
       feedbackValid,
+      floatingClassName,
       floatingLabel,
       id,
       invalid,
@@ -101,6 +102,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
         floatingLabel={floatingLabel}
         id={id}
         invalid={invalid}

packages/coreui-react/src/components/form/CFormSelect.tsx

@@ -52,6 +52,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
       feedback,
       feedbackInvalid,
       feedbackValid,
+      floatingClassName,
       floatingLabel,
       htmlSize,
       id,
@@ -81,6 +82,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
         floatingLabel={floatingLabel}
         id={id}
         invalid={invalid}

packages/coreui-react/src/components/form/CFormTextarea.tsx

@@ -44,6 +44,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
       feedback,
       feedbackInvalid,
       feedbackValid,
+      floatingClassName,
       floatingLabel,
       id,
       invalid,
@@ -70,6 +71,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
         feedback={feedback}
         feedbackInvalid={feedbackInvalid}
         feedbackValid={feedbackValid}
+        floatingClassName={floatingClassName}
         floatingLabel={floatingLabel}
         id={id}
         invalid={invalid}

packages/docs/content/4.4/forms/floating-labels.mdx

@@ -95,9 +95,10 @@ Form validation styles also work as expected.
 
 <Example>
   <CFormInput
-    className="mb-3"
+    floatingClassName="mb-3"
     type="email"
     id="floatingInputInvalid"
+    feedbackValid="Please choose a username."
     floatingLabel="Email addresss"
     placeholder="name@example.com"
     defaultValue="test@example.com"
@@ -106,6 +107,7 @@ Form validation styles also work as expected.
   <CFormInput
     type="email"
     id="floatingInputInvalid"
+    feedbackInvalid="Please choose a username."
     floatingLabel="Email addresss"
     placeholder="name@example.com"
     defaultValue="test@example.com"