fix: primefaces#7042 Add Tailwind styling for IconField

- Create unstyled theme docs for IconField - Ensure iconPosition is passed contextually to the children of IconField - Use iconPosition to properly style InputIcon and InputText when it is enabled
gcko · Aug 21, 2024 · 2bc9397 · 2bc9397
1 parent e47f620
commit 2bc9397
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 6 deletions.
diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js
@@ -0,0 +1,64 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    iconfield: {
+        root: {
+            className: classNames('relative')
+        }
+    },
+    inputicon: {
+        root: ({ context }) => ({
+            className: classNames('absolute top-1/2 -mt-2', {
+                'left-2': context.iconPosition === 'left',
+                'right-2': context.iconPosition === 'right'
+            })
+        })
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex gap-3">
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText placeholder="Search" />
+            </IconField>
+
+            <IconField>
+                <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                <InputText />
+            </IconField>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <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/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js
@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react';
+import React, { Children, cloneElement, useContext, useRef } from 'react';
 import { PrimeReactContext } from '../api/Api';
 import { useMergeProps } from '../hooks/Hooks';
 import { classNames } from '../utils/Utils';
@@ -29,7 +29,11 @@ export const IconField = React.memo(
 
         return (
             <div {...rootProps} ref={elementRef}>
-                {props.children}
+                {Children.map(props.children, (child, index) =>
+                    cloneElement(child, {
+                        iconPosition: props.iconPosition
+                    })
+                )}
             </div>
         );
     })

diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js
@@ -13,7 +13,10 @@ export const InputIcon = React.memo(
 
         const { ptm, cx } = InputIconBase.setMetaData({
             props,
-            ...props.__parentMetadata
+            ...props.__parentMetadata,
+            context: {
+                iconPosition: props.iconPosition
+            }
         });
 
         const rootProps = mergeProps(

diff --git a/components/lib/inputicon/InputIconBase.js b/components/lib/inputicon/InputIconBase.js
@@ -8,7 +8,8 @@ export const InputIconBase = ComponentBase.extend({
     defaultProps: {
         __TYPE: 'InputIcon',
         __parentMetadata: null,
-        className: null
+        className: null,
+        iconPosition: null
     },
 
     css: {

diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
@@ -17,7 +17,8 @@ export const InputText = React.memo(
             props,
             ...props.__parentMetadata,
             context: {
-                disabled: props.disabled
+                disabled: props.disabled,
+                iconPosition: props.iconPosition
             }
         });
 

diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
@@ -26,7 +26,8 @@ export const InputTextBase = ComponentBase.extend({
         onPaste: null,
         tooltip: null,
         tooltipOptions: null,
-        validateOnly: false
+        validateOnly: false,
+        iconPosition: null
     },
 
     css: {

diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
@@ -798,6 +798,10 @@ const Tailwind = {
                     'text-lg px-4 py-4': props.size == 'large',
                     'text-xs px-2 py-2': props.size == 'small',
                     'p-3 text-base': !props.size || typeof props.size === 'number'
+                },
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.iconPosition === 'right'
                 }
             )
         })
@@ -887,6 +891,19 @@ const Tailwind = {
         optionGroupIcon: 'ml-auto',
         transition: TRANSITIONS.overlay
     },
+    iconfield: {
+        root: {
+            className: classNames('relative')
+        }
+    },
+    inputicon: {
+        root: ({ context }) => ({
+            className: classNames('absolute top-1/2 -mt-2', {
+                'left-2': context.iconPosition === 'left',
+                'right-2': context.iconPosition === 'right'
+            })
+        })
+    },
     inputmask: {
         root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
     },

diff --git a/pages/iconfield/index.js b/pages/iconfield/index.js
@@ -7,6 +7,7 @@ import { TemplateDoc } from '@/components/doc/iconfield/templatedoc';
 import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc';
 import { Wireframe } from '@/components/doc/iconfield/pt/wireframe';
 import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/iconfield/theming/tailwinddoc';
 
 const IconFieldDemo = () => {
     const docs = [
@@ -50,6 +51,18 @@ const IconFieldDemo = () => {
             id: 'styled',
             label: 'Styled',
             component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
         }
     ];