Merge pull request primefaces#7066 from gcko/feature/issue-7042

fix: primefaces#7042 Add Tailwind styling for IconField
melloware · Aug 21, 2024 · 03023fe · 03023fe
2 parents 22374cc + dff7a62
commit 03023fe
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 6 deletions.
diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js
@@ -0,0 +1,77 @@
+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'
+            })
+        })
+    },
+    // For each input wrapped with IconField you will need to add styling.
+    //  The following is an example for InputText
+    inputtext: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                // Extend the root stylings with the following:
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.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
+                }
+            ]
         }
     ];