diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js new file mode 100644 index 0000000000..de24dd8fef --- /dev/null +++ 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 ( +
+ + + + + + + + + +
+ ) +} + ` + }; + + return ( + <> + +

+ 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/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js index 59845ed00e..b8c8167236 100644 --- 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 (
- {props.children} + {Children.map(props.children, (child, index) => + cloneElement(child, { + iconPosition: props.iconPosition + }) + )}
); }) diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js index 4e27cbc248..105e542a51 100644 --- 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 index 283f41f741..966dd9eeae 100644 --- 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 index 9621782e17..712455e737 100644 --- 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 index 8517dc67f0..fb480a41c0 100644 --- 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 index 051c4f1e04..979b489e96 100644 --- 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 index 1863c8af43..8eec450745 100644 --- 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 + } + ] } ];