Merge pull request #8189 from primefaces/v11-iconfield

tugcekucukoglu · web-flow · commit 4bbdffbc288b · 2025-08-20T15:37:44.000+03:00
V11 iconfield
diff --git a/apps/showcase/demo/iconfield/basic-demo.tsx b/apps/showcase/demo/iconfield/basic-demo.tsx
@@ -0,0 +1,21 @@
+import { IconField } from 'primereact/iconfield';
+import { InputText } from 'primereact/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-wrap justify-center gap-4">
+            <IconField>
+                <IconField.Icon>
+                    <i className="pi pi-search" />
+                </IconField.Icon>
+                <InputText placeholder="Search" />
+            </IconField>
+            <IconField>
+                <InputText variant="filled" />
+                <IconField.Icon>
+                    <i className="pi pi-spin pi-spinner" />
+                </IconField.Icon>
+            </IconField>
+        </div>
+    );
+}
diff --git a/apps/showcase/demo/iconfield/float-label-demo.tsx b/apps/showcase/demo/iconfield/float-label-demo.tsx
@@ -0,0 +1,44 @@
+import { IconField } from 'primereact/iconfield';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+import * as React from 'react';
+
+export default function FloatLabelDemo() {
+    const [value1, setValue1] = React.useState('');
+    const [value2, setValue2] = React.useState('');
+    const [value3, setValue3] = React.useState('');
+
+    return (
+        <div className="card flex flex-wrap justify-center items-end gap-4">
+            <Label.Float>
+                <IconField>
+                    <IconField.Icon>
+                        <i className="pi pi-search" />
+                    </IconField.Icon>
+                    <InputText value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} id="over_label" autoComplete="off" />
+                </IconField>
+                <Label htmlFor="over_label">Over Label</Label>
+            </Label.Float>
+
+            <Label.Float variant="in">
+                <IconField>
+                    <IconField.Icon>
+                        <i className="pi pi-search" />
+                    </IconField.Icon>
+                    <InputText value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} id="in_label" autoComplete="off" variant="filled" />
+                </IconField>
+                <Label htmlFor="in_label">In Label</Label>
+            </Label.Float>
+
+            <Label.Float variant="on">
+                <IconField>
+                    <IconField.Icon>
+                        <i className="pi pi-search" />
+                    </IconField.Icon>
+                    <InputText value={value3} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)} id="on_label" autoComplete="off" />
+                </IconField>
+                <Label htmlFor="on_label">On Label</Label>
+            </Label.Float>
+        </div>
+    );
+}
diff --git a/apps/showcase/demo/iconfield/iconfield-pt.tsx b/apps/showcase/demo/iconfield/iconfield-pt.tsx
@@ -0,0 +1,13 @@
+import { IconField } from 'primereact/iconfield';
+import { InputText } from 'primereact/inputtext';
+
+export default function IconFieldPTDemo() {
+    return (
+        <IconField>
+            <IconField.Icon>
+                <i className="pi pi-search" />
+            </IconField.Icon>
+            <InputText placeholder="Search" />
+        </IconField>
+    );
+}
diff --git a/apps/showcase/demo/iconfield/ifta-label-demo.tsx b/apps/showcase/demo/iconfield/ifta-label-demo.tsx
@@ -0,0 +1,19 @@
+import { IconField } from 'primereact/iconfield';
+import { InputText } from 'primereact/inputtext';
+import { Label } from 'primereact/label';
+
+export default function IftaLabelDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Label.Ifta>
+                <IconField>
+                    <IconField.Icon>
+                        <i className="pi pi-user" />
+                    </IconField.Icon>
+                    <InputText id="username" autoComplete="off" variant="filled" />
+                </IconField>
+                <Label htmlFor="username">Username</Label>
+            </Label.Ifta>
+        </div>
+    );
+}
diff --git a/apps/showcase/demo/iconfield/sizes-demo.tsx b/apps/showcase/demo/iconfield/sizes-demo.tsx
@@ -0,0 +1,32 @@
+import { IconField } from 'primereact/iconfield';
+import { InputText } from 'primereact/inputtext';
+
+export default function SizesDemo() {
+    return (
+        <div className="card flex flex-col items-center gap-4">
+            <IconField>
+                <IconField.Icon>
+                    <i className="pi pi-search" />
+                </IconField.Icon>
+                <InputText placeholder="Small" size="small" />
+            </IconField>
+
+            <IconField>
+                <InputText placeholder="Normal" />
+                <IconField.Icon>
+                    <i className="pi pi-user" />
+                </IconField.Icon>
+            </IconField>
+
+            <IconField>
+                <IconField.Icon>
+                    <i className="pi pi-lock" />
+                </IconField.Icon>
+                <InputText placeholder="Large" size="large" />
+                <IconField.Icon>
+                    <i className="pi pi-spin pi-spinner" />
+                </IconField.Icon>
+            </IconField>
+        </div>
+    );
+}
diff --git a/apps/showcase/docs/components/iconfield/api.mdx b/apps/showcase/docs/components/iconfield/api.mdx
@@ -0,0 +1,37 @@
+---
+title: IconField API
+description: API documentation for IconField component
+component: iconfield
+---
+
+## IconField
+
+### Props
+
+<DocTable name="IconField" category="api" type="props" />
+
+### Interfaces
+
+<DocTable name="IconField" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="IconField" category="api" type="types" />
+
+## InputIcon
+
+### Props
+
+<DocTable name="InputIcon" category="api" type="props" />
+
+### Exposes
+
+<DocTable name="InputIcon" category="api" type="exposes" />
+
+### Interfaces
+
+<DocTable name="InputIcon" category="api" type="interfaces" />
+
+### Types
+
+<DocTable name="InputIcon" category="api" type="types" />
diff --git a/apps/showcase/docs/components/iconfield/features.mdx b/apps/showcase/docs/components/iconfield/features.mdx
@@ -0,0 +1,54 @@
+---
+title: IconField
+description: IconField wraps an input and an icon.
+component: iconfield
+---
+
+## Usage
+
+```tsx
+import { IconField } from 'primereact/iconfield';
+```
+
+```tsx
+<IconField>
+    <IconField.Icon />
+    <InputText />
+</IconField>
+```
+
+## Examples
+
+### Basic
+
+`IconField` wraps the `IconField.Icon` and the input field component.
+
+<DocDemoViewer name="iconfield:basic-demo" />
+
+### Float Label
+
+FloatLabel visually integrates a label with its form element. Visit [FloatLabel](/docs/components/floatlabel) documentation for more information.
+
+<DocDemoViewer name="iconfield:float-label-demo" />
+
+### Ifta Label
+
+IftaLabel is used to create infield top aligned labels. Visit [IftaLabel](/docs/components/iftalabel) documentation for more information.
+
+<DocDemoViewer name="iconfield:ifta-label-demo" />
+
+### Sizes
+
+IconField is compatible with the size setting of the input field.
+
+<DocDemoViewer name="iconfield:sizes-demo" />
+
+## Accessibility
+
+### Screen Reader
+
+IconField and InputIcon do not require any roles and attributes.
+
+### Keyboard Support
+
+Components does not include any interactive elements.
diff --git a/apps/showcase/docs/components/iconfield/pt.mdx b/apps/showcase/docs/components/iconfield/pt.mdx
@@ -0,0 +1,19 @@
+---
+title: IconField Pass Through
+description: Pass Through documentation for IconField component
+component: iconfield
+---
+
+## Viewer
+
+Some sections may not be visible due to the availability of the particular feature.
+
+<DocPTViewer name="iconfield-pt" components={['IconField', 'InputIcon']} />
+
+## IconField PT Options
+
+<DocTable name="IconField" category="pt" />
+
+## InputIcon PT Options
+
+<DocTable name="InputIcon" category="pt" />
diff --git a/apps/showcase/docs/components/iconfield/theming.mdx b/apps/showcase/docs/components/iconfield/theming.mdx
@@ -0,0 +1,23 @@
+---
+title: IconField Theming
+description: Theming documentation for IconField component
+component: iconfield
+---
+
+## Styled
+
+### CSS Classes
+
+List of class names used in the styled mode.
+
+<DocTable name="IconField" category="style" />
+
+### Design Tokens
+
+List of design tokens.
+
+<DocTable name="IconField" category="token" />
+
+## Unstyled
+
+Theming is implemented with the pass through properties in unstyled mode.
diff --git a/packages/headless/src/iconfield/index.ts b/packages/headless/src/iconfield/index.ts
@@ -0,0 +1,2 @@
+export * from './useIconField';
+export * from './useIconField.props';
diff --git a/packages/headless/src/iconfield/useIconField.props.ts b/packages/headless/src/iconfield/useIconField.props.ts
@@ -0,0 +1,3 @@
+import type { useIconFieldProps } from '@primereact/types/shared/iconfield';
+
+export const defaultProps: useIconFieldProps = {};
diff --git a/packages/headless/src/iconfield/useIconField.test.ts b/packages/headless/src/iconfield/useIconField.test.ts
diff --git a/packages/headless/src/iconfield/useIconField.ts b/packages/headless/src/iconfield/useIconField.ts
@@ -0,0 +1,7 @@
+import { withHeadless } from '@primereact/core/headless';
+import { defaultProps } from './useIconField.props';
+
+export const useIconField = withHeadless({
+    name: 'useIconField',
+    defaultProps
+});
diff --git a/packages/primereact/src/iconfield/IconField.context.ts b/packages/primereact/src/iconfield/IconField.context.ts
@@ -0,0 +1,4 @@
+import { createOptionalContext } from '@primereact/core/utils';
+import type { IconFieldInstance } from '@primereact/types/shared/iconfield';
+
+export const [IconFieldProvider, useIconFieldContext] = createOptionalContext<IconFieldInstance>();
diff --git a/packages/primereact/src/iconfield/IconField.props.ts b/packages/primereact/src/iconfield/IconField.props.ts
@@ -0,0 +1,5 @@
+import type { IconFieldProps } from '@primereact/types/shared/iconfield';
+
+export const defaultProps: IconFieldProps = {
+    as: 'div'
+};
diff --git a/packages/primereact/src/iconfield/IconField.test.ts b/packages/primereact/src/iconfield/IconField.test.ts
diff --git a/packages/primereact/src/iconfield/IconField.tsx b/packages/primereact/src/iconfield/IconField.tsx
@@ -0,0 +1,41 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { useIconField } from '@primereact/headless/iconfield';
+import { styles } from '@primereact/styles/iconfield';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { IconFieldProvider } from './IconField.context';
+import { defaultProps } from './IconField.props';
+import { InputIcon } from './icon';
+
+export const IconField = withComponent({
+    name: 'IconField',
+    defaultProps,
+    styles,
+    setup(instance) {
+        const inputicon = useIconField(instance?.inProps);
+
+        return inputicon;
+    },
+    render(instance) {
+        const { id, props, ptmi, cx } = instance;
+
+        const rootProps = mergeProps(
+            {
+                id,
+                className: cx('root')
+            },
+            ptmi('root')
+        );
+
+        return (
+            <IconFieldProvider value={instance}>
+                <Component instance={instance} attrs={rootProps} children={props.children} />
+            </IconFieldProvider>
+        );
+    },
+    components: {
+        Icon: InputIcon
+    }
+});
diff --git a/packages/primereact/src/iconfield/icon/InputIcon.props.ts b/packages/primereact/src/iconfield/icon/InputIcon.props.ts
@@ -0,0 +1,5 @@
+import { InputIconProps } from '@primereact/types/shared/iconfield';
+
+export const defaultIconProps: InputIconProps = {
+    as: 'div'
+};
diff --git a/packages/primereact/src/iconfield/icon/InputIcon.tsx b/packages/primereact/src/iconfield/icon/InputIcon.tsx
@@ -0,0 +1,29 @@
+'use client';
+import { Component } from '@primereact/core/component';
+import { mergeProps } from '@primeuix/utils';
+import { withComponent } from 'primereact/base';
+import * as React from 'react';
+import { useIconFieldContext } from '../IconField.context';
+import { defaultIconProps } from './InputIcon.props';
+
+export const InputIcon = withComponent({
+    name: 'InputIcon',
+    defaultProps: defaultIconProps,
+    setup() {
+        const iconfield = useIconFieldContext();
+
+        return { iconfield };
+    },
+    render(instance) {
+        const { props, ptmi, iconfield } = instance;
+
+        const rootProps = mergeProps(
+            {
+                className: iconfield?.cx('icon')
+            },
+            ptmi('root')
+        );
+
+        return <Component instance={instance} attrs={rootProps} children={props.children} />;
+    }
+});
diff --git a/packages/primereact/src/iconfield/icon/index.ts b/packages/primereact/src/iconfield/icon/index.ts
@@ -0,0 +1,3 @@
+'use client';
+export * from './InputIcon';
+export * from './InputIcon.props';
diff --git a/packages/primereact/src/iconfield/index.ts b/packages/primereact/src/iconfield/index.ts
@@ -0,0 +1,4 @@
+'use client';
+export * from './IconField';
+export * from './IconField.context';
+export * from './IconField.props';
diff --git a/packages/styles/src/iconfield/IconField.style.ts b/packages/styles/src/iconfield/IconField.style.ts
@@ -0,0 +1,12 @@
+import { createStyles } from '@primereact/styles/utils';
+import type { IconFieldInstance } from '@primereact/types/shared/iconfield';
+import { style } from '@primeuix/styles/iconfield';
+
+export const styles = createStyles<IconFieldInstance>({
+    name: 'iconfield',
+    style,
+    classes: {
+        root: 'p-iconfield',
+        icon: 'p-inputicon'
+    }
+});
diff --git a/packages/styles/src/iconfield/index.ts b/packages/styles/src/iconfield/index.ts
@@ -0,0 +1 @@
+export * from './IconField.style';
diff --git a/packages/types/src/shared/iconfield/IconField.types.ts b/packages/types/src/shared/iconfield/IconField.types.ts
diff --git a/packages/types/src/shared/iconfield/InputIcon.types.ts b/packages/types/src/shared/iconfield/InputIcon.types.ts
diff --git a/packages/types/src/shared/iconfield/index.ts b/packages/types/src/shared/iconfield/index.ts
diff --git a/packages/types/src/shared/iconfield/useIconField.types.ts b/packages/types/src/shared/iconfield/useIconField.types.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './useIconField';`
	`2`	`+export * from './useIconField.props';`