feat: primefaces#5644 Add missing tailwind styles (primefaces#7123)

* feat: primefaces#5644 Add missing tailwind styles - Add tailwinddoc for floatlabel - Fix typing for floatlabel * chore: primefaces#5644 Fix typing * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update basicdoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update floatlabeldoc.js * Update primereact.all.js * Update floatlabeldoc.js * Update floatlabeldoc.js --------- Co-authored-by: Melloware <mellowaredev@gmail.com>
melloware · Sep 9, 2024 · e433da4 · e433da4
1 parent 202b78e
commit e433da4
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 21 deletions.
diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js
@@ -85,7 +85,7 @@ export function FloatLabelDoc(props) {
     const code = {
         basic: `
 <FloatLabel>
-    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
         optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
         className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
     <label htmlFor="cs-city">City</label>
@@ -178,7 +178,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel>
-                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>
@@ -290,7 +290,7 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel>
-                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries}
                     optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
                     className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
                 <label htmlFor="cs-city">City</label>

diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -1235,6 +1235,13 @@
                             "type": "FileUploadPassThroughOptions",
                             "description": "Custom passthrough(pt) options for FileUpload."
                         },
+                        {
+                            "name": "floatlabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for FloatLabel."
+                        },
                         {
                             "name": "galleria",
                             "optional": true,

diff --git a/components/doc/floatlabel/basicdoc.js b/components/doc/floatlabel/basicdoc.js
@@ -11,7 +11,7 @@ export function BasicDoc(props) {
         basic: `
 <FloatLabel>
     <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-    <label for="username">Username</label>
+    <label htmlFor="username">Username</label>
 </FloatLabel>
         `,
         javascript: `
@@ -26,7 +26,7 @@ export default function BasicDemo() {
         <div className="card flex justify-content-center">
             <FloatLabel>
                 <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-                <label for="username">Username</label>
+                <label htmlFor"username">Username</label>
             </FloatLabel>
         </div>
     )
@@ -44,7 +44,7 @@ export default function BasicDemo() {
         <div className="card flex justify-content-center">
             <FloatLabel>
                 <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
-                <label for="username">Username</label>
+                <label htmlFor="username">Username</label>
             </FloatLabel>
         </div>
     )

diff --git a/components/doc/floatlabel/theming/tailwinddoc.js b/components/doc/floatlabel/theming/tailwinddoc.js
@@ -1,16 +1,63 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
 import { DocSectionText } from '@/components/doc/common/docsectiontext';
 import Link from 'next/link';
+import React from 'react';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    floatlabel: {
+        root: {
+            className: classNames(
+                'block relative', // root component style
+                '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style
+                '[&>textarea~label]:top-4', // textarea
+                '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus
+                '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill
+                '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled
+                '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus
+                '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled
+                '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus
+                '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder
+                '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus
+            )
+        }
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor="username">Username</label>
+              </FloatLabel>
+        </div>
+    )
+}
+    `
+    };
 
-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>
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
     );
 }
diff --git a/components/doc/treeselect/floatlabeldoc.js b/components/doc/treeselect/floatlabeldoc.js
@@ -17,7 +17,7 @@ export function FloatLabelDoc(props) {
     const code = {
         basic: `
 <FloatLabel className="w-full md:w-20rem">
-    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
         className="w-full"></TreeSelect>
     <label htmlFor="treeselect">TreeSelect</label>
 </FloatLabel>
@@ -31,15 +31,15 @@ import { NodeService } from './service/NodeService';
 export default function FloatLabelDemo() {
     const [nodes, setNodes] = useState(null);
     const [selectedNodeKey, setSelectedNodeKey] = useState(null);
-    
+
     useEffect(() => {
         NodeService.getTreeNodes().then((data) => setNodes(data));
     }, []);
 
     return (
         <div className="card flex justify-content-center">
             <FloatLabel className="w-full md:w-20rem">
-                <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
                     className="w-full"></TreeSelect>
                 <label htmlFor="treeselect">TreeSelect</label>
             </FloatLabel>
@@ -57,15 +57,15 @@ import { NodeService } from './service/NodeService';
 export default function FloatLabelDemo() {
     const [nodes, setNodes] = useState<TreeNode[] | null>(null);
     const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
-    
+
     useEffect(() => {
         NodeService.getTreeNodes().then((data) => setNodes(data));
     }, []);
 
     return (
         <div className="card flex justify-content-center">
             <FloatLabel className="w-full md:w-20rem">
-                <TreeSelect inputId="treeselect" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                <TreeSelect inputId="treeselect" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)}
                     className="w-full"></TreeSelect>
                 <label htmlFor="treeselect">TreeSelect</label>
             </FloatLabel>

diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
@@ -38,6 +38,7 @@ import { DropdownPassThroughOptions } from '../dropdown/dropdown';
 import { EditorPassThroughOptions } from '../editor/editor';
 import { FieldsetPassThroughOptions } from '../fieldset/fieldset';
 import { FileUploadPassThroughOptions } from '../fileupload/fileupload';
+import { FloatLabelPassThroughOptions } from '../floatlabel/floatlabel';
 import { GalleriaPassThroughOptions } from '../galleria/galleria';
 import { ImagePassThroughOptions } from '../image/image';
 import { InplacePassThroughOptions } from '../inplace/inplace';
@@ -428,6 +429,10 @@ export interface PrimeReactPTOptions {
      * Custom passthrough(pt) options for FileUpload.
      */
     fileupload?: FileUploadPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for FloatLabel.
+     */
+    floatlabel?: FloatLabelPassThroughOptions;
     /**
      * Custom passthrough(pt) options for FullCalendar.
      */

diff --git a/components/lib/floatlabel/FloatLabel.d.ts → components/lib/floatlabel/floatlabel.d.ts b/components/lib/floatlabel/FloatLabel.d.ts → components/lib/floatlabel/floatlabel.d.ts
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -891,6 +891,23 @@ const Tailwind = {
         optionGroupIcon: 'ml-auto',
         transition: TRANSITIONS.overlay
     },
+    floatlabel: {
+        root: {
+            className: classNames(
+                'block relative', // root component style
+                '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style
+                '[&>textarea~label]:top-4', // textarea
+                '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus
+                '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill
+                '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled
+                '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus
+                '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled
+                '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus
+                '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder
+                '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus
+            )
+        }
+    },
     iconfield: {
         root: {
             className: classNames('relative')