8000 feat(CFormInput, CFormSelect, CFormTextarea): add feedback support to… · mastercodekw/coreui-react@9638f40 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9638f40

Browse files
mrholekmrholek
committed
feat(CFormInput, CFormSelect, CFormTextarea): add feedback support to floating labels
1 parent 3d0184e commit 9638f40

File tree

5 files changed

+29
-2
lines changed

5 files changed

+29
-2
lines changed

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ export interface CFormControlWrapperProps extends CFormControlValidationProps {
1212
* @ignore
1313
*/
1414
children?: ReactNode
15+
/**
16+
* A string of all className you want applied to the floating label wrapper.
17+
*
18+
* @since 4.3.0
19+
*/
20+
floatingClassName?: string
1521
/**
1622
* Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
1723
*
@@ -42,6 +48,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
4248
feedback,
4349
feedbackInvalid,
4450
feedbackValid,
51+
floatingClassName,
4552
floatingLabel,
4653
id,
4754
invalid,
@@ -51,9 +58,20 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
5158
valid,
5259
}) => {
5360
return floatingLabel ? (
54-
<CFormFloating>
61+
<CFormFloating className={floatingClassName}>
5562
{children}
5663
<CFormLabel htmlFor={id}>{label || floatingLabel}</CFormLabel>
64+
{text && <CFormText id={describedby}>{text}</CFormText>}
65+
<CFormControlValidation
66+
describedby={describedby}
67+
feedback={feedback}
68+
feedbackInvalid={feedbackInvalid}
69+
feedbackValid={feedbackValid}
70+
floatingLabel={floatingLabel}
71+
invalid={invalid}
72+
tooltipFeedback={tooltipFeedback}
73+
valid={valid}
74+
/>
5775
</CFormFloating>
5876
) : (
5977
<>
@@ -76,6 +94,7 @@ export const CFormControlWrapper: FC<CFormControlWrapperProps> = ({
7694

7795
CFormControlWrapper.propTypes = {
7896
children: PropTypes.node,
97+
floatingClassName: PropTypes.string,
7998
floatingLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
8099
label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
81100
text: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
5858
feedback,
5959
feedbackInvalid,
6060
feedbackValid,
61+
floatingClassName,
6162
floatingLabel,
6263
id,
6364
invalid,
@@ -101,6 +102,7 @@ export const CFormInput = forwardRef<HTMLInputElement, CFormInputProps>(
101102
feedback={feedback}
102103
feedbackInvalid={feedbackInvalid}
103104
feedbackValid={feedbackValid}
105+
floatingClassName={floatingClassName}
104106
floatingLabel={floatingLabel}
105107
id={id}
106108
invalid={invalid}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
5252
feedback,
5353
feedbackInvalid,
5454
feedbackValid,
55+
floatingClassName,
5556
floatingLabel,
5657
htmlSize,
5758
id,
@@ -81,6 +82,7 @@ export const CFormSelect = forwardRef<HTMLSelectElement, CFormSelectProps>(
8182
feedback={feedback}
8283
feedbackInvalid={feedbackInvalid}
8384
feedbackValid={feedbackValid}
85+
floatingClassName={floatingClassName}
8486
floatingLabel={floatingLabel}
8587
id={id}
8688
invalid={invalid}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
4444
feedback,
4545
feedbackInvalid,
4646
feedbackValid,
47+
floatingClassName,
4748
floatingLabel,
4849
id,
4950
invalid,
@@ -70,6 +71,7 @@ export const CFormTextarea = forwardRef<HTMLTextAreaElement, CFormTextareaProps>
7071
feedback={feedback}
7172
feedbackInvalid={feedbackInvalid}
7273
feedbackValid={feedbackValid}
74+
floatingClassName={floatingClassName}
7375
floatingLabel={floatingLabel}
7476
id={id}
7577
invalid={invalid}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,10 @@ Form validation styles also work as expected.
9595

9696
<Example>
9797
<CFormInput
98-
className="mb-3"
98+
floatingClassName="mb-3"
9999
type="email"
100100
id="floatingInputInvalid"
101+
feedbackValid="Please choose a username."
101102
floatingLabel="Email addresss"
102103
placeholder="name@example.com"
103104
defaultValue="test@example.com"
@@ -106,6 +107,7 @@ Form validation styles also work as expected.
106107
<CFormInput
107108
type="email"
108109
id="floatingInputInvalid"
110+
feedbackInvalid="Please choose a username."
109111
floatingLabel="Email addresss"
110112
placeholder="name@example.com"
111113
defaultValue="test@example.com"

0 commit comments

Comments
 (0)
0