From e433da4f24c965cfbb868435825139aeb54200d4 Mon Sep 17 00:00:00 2001 From: Jared Scott Date: Mon, 9 Sep 2024 19:48:29 +0800 Subject: [PATCH] feat: #5644 Add missing tailwind styles (#7123) * feat: #5644 Add missing tailwind styles - Add tailwinddoc for floatlabel - Fix typing for floatlabel * chore: #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 --- components/doc/cascadeselect/floatlabeldoc.js | 6 +- components/doc/common/apidoc/index.json | 7 ++ components/doc/floatlabel/basicdoc.js | 6 +- .../doc/floatlabel/theming/tailwinddoc.js | 67 ++++++++++++++++--- components/doc/treeselect/floatlabeldoc.js | 10 +-- components/lib/api/api.d.ts | 5 ++ .../{FloatLabel.d.ts => floatlabel.d.ts} | 0 components/lib/passthrough/tailwind/index.js | 17 +++++ 8 files changed, 97 insertions(+), 21 deletions(-) rename components/lib/floatlabel/{FloatLabel.d.ts => floatlabel.d.ts} (100%) diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js index b4f0b05abf..a6d3834a3f 100644 --- a/components/doc/cascadeselect/floatlabeldoc.js +++ b/components/doc/cascadeselect/floatlabeldoc.js @@ -85,7 +85,7 @@ export function FloatLabelDoc(props) { const code = { basic: ` - setSelectedCity(e.value)} options={countries} + setSelectedCity(e.value)} options={countries} optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} /> @@ -178,7 +178,7 @@ export default function FloatLabelDemo() { return (
- setSelectedCity(e.value)} options={countries} + setSelectedCity(e.value)} options={countries} optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} /> @@ -290,7 +290,7 @@ export default function FloatLabelDemo() { return (
- setSelectedCity(e.value)} options={countries} + setSelectedCity(e.value)} options={countries} optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} /> diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index c2aa3b5692..09bd2cb1ad 100644 --- 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 index 1386cb1d0a..9f600e1d0e 100644 --- a/components/doc/floatlabel/basicdoc.js +++ b/components/doc/floatlabel/basicdoc.js @@ -11,7 +11,7 @@ export function BasicDoc(props) { basic: ` setValue(e.target.value)} /> - + `, javascript: ` @@ -26,7 +26,7 @@ export default function BasicDemo() {
setValue(e.target.value)} /> - +
) @@ -44,7 +44,7 @@ export default function BasicDemo() {
setValue(e.target.value)} /> - +
) diff --git a/components/doc/floatlabel/theming/tailwinddoc.js b/components/doc/floatlabel/theming/tailwinddoc.js index 92ee79f341..dd7350886a 100644 --- 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 ( +
+ + setValue(e.target.value)} /> + + +
+ ) +} + ` + }; -export function TailwindDoc() { return ( - -

- Visit{' '} - - Tailwind Presets - {' '} - project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS. -

- + <> + +

+ 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{' '} + Tailwind Customization section for an example. +

+ +

A playground sample with the pre-built Tailwind theme.

+ + + ); } diff --git a/components/doc/treeselect/floatlabeldoc.js b/components/doc/treeselect/floatlabeldoc.js index 432ffdfe60..a25c2fd572 100644 --- a/components/doc/treeselect/floatlabeldoc.js +++ b/components/doc/treeselect/floatlabeldoc.js @@ -17,7 +17,7 @@ export function FloatLabelDoc(props) { const code = { basic: ` - setSelectedNodeKey(e.value)} options={nodes} + setSelectedNodeKey(e.value)} options={nodes} className="w-full"> @@ -31,7 +31,7 @@ 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)); }, []); @@ -39,7 +39,7 @@ export default function FloatLabelDemo() { return (
- setSelectedNodeKey(e.value)} options={nodes} + setSelectedNodeKey(e.value)} options={nodes} className="w-full"> @@ -57,7 +57,7 @@ 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)); }, []); @@ -65,7 +65,7 @@ export default function FloatLabelDemo() { return (
- setSelectedNodeKey(e.value)} + setSelectedNodeKey(e.value)} className="w-full"> diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts index 1204923e72..6afd46cea2 100644 --- 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 b/components/lib/floatlabel/floatlabel.d.ts similarity index 100% rename from components/lib/floatlabel/FloatLabel.d.ts rename to components/lib/floatlabel/floatlabel.d.ts diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index 9dbb1d41e2..c03b1761de 100644 --- 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')