New component - FloatLabel (#6191)

* New component - FloatLabel

* Create floatlabel.d.ts

* Add docs

* Update menu

* Update apidoc

components/doc/common/apidoc/index.json

@@ -25578,6 +25578,105 @@
             }
         }
     },
+    "floatlabel": {
+        "description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primereact.org/floatlabel/)",
+        "components": {
+            "FloatLabel": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in FloatLabel component.",
+                    "values": [
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughOptions",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "FloatLabelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FloatLabelProps",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Defines parent options."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FloatLabelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "FloatLabelPassThroughType": {
+                    "values": "PassThroughType<T, FloatLabelPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
     "galleria": {
         "description": "Galleria is a content gallery component.\n\n[Live Demo](https://www.primereact.org/galleria)",
         "components": {

components/doc/floatlabel/accessibilitydoc.js

@@ -0,0 +1,13 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>FloatLabel does not require any roles and attributes.</p>
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}

components/doc/floatlabel/basicdoc.js

@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+    <label for="username">Username</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label for="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label for="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>FloatLabel is used by wrapping the input and its label.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                    <label for="username">Username</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/floatlabel/importdoc.js

@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { FloatLabel } from 'primereact/floatlabel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}

components/doc/floatlabel/pt/wireframe.js

@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="floatlabel" />
+            </div>
+        </>
+    );
+};

components/doc/floatlabel/theming/styleddoc.js

@@ -0,0 +1,30 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-float-label</td>
+                            <td>Float label element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}

components/doc/floatlabel/theming/tailwinddoc.js

@@ -0,0 +1,16 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc() {
+    return (
+        <DocSectionText id="tailwind" label="Tailwind">
+            <p>
+                Visit{' '}
+                <Link href="https://github.com/primefaces/primereact-tailwind" target="_blank" rel="noopener noreferrer">
+                    Tailwind Presets
+                </Link>{' '}
+                project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS.
+            </p>
+        </DocSectionText>
+    );
+}

components/layout/menu.json

@@ -57,6 +57,10 @@
                             "name": "Editor",
                             "to": "/editor"
                         },
+                        {
+                            "name": "FloatLabel",
+                            "to": "/floatlabel"
+                        },
                         {
                             "name": "InputGroup",
                             "to": "/inputgroup"

components/lib/floatlabel/FloatLabel.d.ts

@@ -0,0 +1,81 @@
+/**
+ *
+ * FloatLabel appears on top of the input field when focused.
+ *
+ * [Live Demo](https://www.primereact.org/floatlabel/)
+ *
+ * @module floatlabel
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type FloatLabelPassThroughType<T> = PassThroughType<T, FloatLabelPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FloatLabelPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: FloatLabelProps;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FloatLabelProps.pt}
+ */
+export interface FloatLabelPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: FloatLabelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in FloatLabel component.
+ * @group Properties
+ */
+export interface FloatLabelProps {
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {FloatLabelPassThroughOptions}
+     */
+    pt?: FloatLabelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - FloatLabel**
+ *
+ * _FloatLabel appears on top of the input field when focused._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+export declare const FloatLabel: React.ForwardRefExoticComponent<FloatLabelProps & React.RefAttributes<HTMLSpanElement>>;

components/lib/floatlabel/FloatLabel.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/Componentbase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { FloatLabelBase } from './FloatLabelBase';
+
+export const FloatLabel = React.memo(
+    React.forwardRef((inProps) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = FloatLabelBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = FloatLabelBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(FloatLabelBase.css.styles, isUnstyled, { name: 'floatlabel' });
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(cx('root'))
+            },
+            FloatLabelBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <span {...rootProps}>{props.children}</span>;
+    })
+);
+
+FloatLabel.displayName = 'FloatLabel';