Skip to content

Commit fe7dedb

Browse files
tugcekucukoglutugcekucukoglu
committed
feat: Iconfield docs added
1 parent 796ec83 commit fe7dedb

9 files changed

Lines changed: 240 additions & 0 deletions

File tree

‎apps/showcase/demo/iconfield/basic-demo.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { IconField } from 'primereact/iconfield';
2+
import { InputText } from 'primereact/inputtext';
3+
4+
export default function BasicDemo() {
5+
return (
6+
<div className="card flex flex-wrap justify-center gap-4">
7+
<IconField>
8+
<IconField.Icon className="pi pi-search" />
9+
<InputText placeholder="Search" />
10+
</IconField>
11+
<IconField>
12+
<InputText variant="filled" />
13+
<IconField.Icon className="pi pi-spin pi-spinner" />
14+
</IconField>
15+
</div>
16+
);
17+
}

‎apps/showcase/demo/iconfield/float-label-demo.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { IconField } from 'primereact/iconfield';
2+
import { InputText } from 'primereact/inputtext';
3+
import { Label } from 'primereact/label';
4+
import * as React from 'react';
5+
6+
export default function FloatLabelDemo() {
7+
const [value1, setValue1] = React.useState('');
8+
const [value2, setValue2] = React.useState('');
9+
const [value3, setValue3] = React.useState('');
10+
11+
return (
12+
<div className="card flex flex-wrap justify-center items-end gap-4">
13+
<Label.Float>
14+
<IconField>
15+
<IconField.Icon className="pi pi-search" />
16+
<InputText value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} id="over_label" autoComplete="off" />
17+
</IconField>
18+
<Label htmlFor="over_label">Over Label</Label>
19+
</Label.Float>
20+
21+
<Label.Float variant="in">
22+
<IconField>
23+
<IconField.Icon className="pi pi-search" />
24+
<InputText value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} id="in_label" autoComplete="off" variant="filled" />
25+
</IconField>
26+
<Label htmlFor="in_label">In Label</Label>
27+
</Label.Float>
28+
29+
<Label.Float variant="on">
30+
<IconField>
31+
<IconField.Icon className="pi pi-search" />
32+
<InputText value={value3} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)} id="on_label" autoComplete="off" />
33+
</IconField>
34+
<Label htmlFor="on_label">On Label</Label>
35+
</Label.Float>
36+
</div>
37+
);
38+
}

‎apps/showcase/demo/iconfield/iconfield-pt.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { IconField } from 'primereact/iconfield';
2+
import { InputText } from 'primereact/inputtext';
3+
4+
export default function IconFieldPTDemo() {
5+
return (
6+
<IconField>
7+
<IconField.Icon className="pi pi-search" />
8+
<InputText placeholder="Search" />
9+
</IconField>
10+
);
11+
}

‎apps/showcase/demo/iconfield/ifta-label-demo.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { IconField } from 'primereact/iconfield';
2+
import { InputText } from 'primereact/inputtext';
3+
import { Label } from 'primereact/label';
4+
5+
export default function IftaLabelDemo() {
6+
return (
7+
<div className="card flex justify-center">
8+
<Label.Ifta>
9+
<IconField>
10+
<IconField.Icon className="pi pi-user" />
11+
<InputText id="username" autoComplete="off" variant="filled" />
12+
</IconField>
13+
<Label htmlFor="username">Username</Label>
14+
</Label.Ifta>
15+
</div>
16+
);
17+
}

‎apps/showcase/demo/iconfield/sizes-demo.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { IconField } from 'primereact/iconfield';
2+
import { InputText } from 'primereact/inputtext';
3+
4+
export default function SizesDemo() {
5+
return (
6+
<div className="card flex flex-col items-center gap-4">
7+
<IconField>
8+
<IconField.Icon className="pi pi-search" />
9+
<InputText placeholder="Small" size="small" />
10+
</IconField>
11+
12+
<IconField>
13+
<InputText placeholder="Normal" />
14+
<IconField.Icon className="pi pi-user" />
15+
</IconField>
16+
17+
<IconField>
18+
<IconField.Icon className="pi pi-lock" />
19+
<InputText placeholder="Large" size="large" />
20+
<IconField.Icon className="pi pi-spin pi-spinner" />
21+
</IconField>
22+
</div>
23+
);
24+
}

‎apps/showcase/docs/components/iconfield/api.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
title: IconField API
3+
description: API documentation for IconField component
4+
component: iconfield
5+
---
6+
7+
## IconField
8+
9+
### Props
10+
11+
<DocTable name="IconField" category="api" type="props" />
12+
13+
### Interfaces
14+
15+
<DocTable name="IconField" category="api" type="interfaces" />
16+
17+
### Types
18+
19+
<DocTable name="IconField" category="api" type="types" />
20+
21+
## InputIcon
22+
23+
### Props
24+
25+
<DocTable name="InputIcon" category="api" type="props" />
26+
27+
### Exposes
28+
29+
<DocTable name="InputIcon" category="api" type="exposes" />
30+
31+
### Interfaces
32+
33+
<DocTable name="InputIcon" category="api" type="interfaces" />
34+
35+
### Types
36+
37+
<DocTable name="InputIcon" category="api" type="types" />

‎apps/showcase/docs/components/iconfield/features.mdx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: IconField
3+
description: IconField wraps an input and an icon.
4+
component: iconfield
5+
---
6+
7+
## Usage
8+
9+
```tsx
10+
import { IconField } from 'primereact/iconfield';
11+
```
12+
13+
```tsx
14+
<IconField>
15+
<IconField.Icon />
16+
<InputText />
17+
</IconField>
18+
```
19+
20+
## Examples
21+
22+
### Basic
23+
24+
`IconField` wraps the `IconField.Icon` and the input field component.
25+
26+
<DocDemoViewer name="iconfield:basic-demo" />
27+
28+
### Float Label
29+
30+
FloatLabel visually integrates a label with its form element. Visit [FloatLabel](/docs/components/floatlabel) documentation for more information.
31+
32+
<DocDemoViewer name="iconfield:float-label-demo" />
33+
34+
### Ifta Label
35+
36+
IftaLabel is used to create infield top aligned labels. Visit [IftaLabel](/docs/components/iftalabel) documentation for more information.
37+
38+
<DocDemoViewer name="iconfield:ifta-label-demo" />
39+
40+
### Sizes
41+
42+
IconField is compatible with the size setting of the input field.
43+
44+
<DocDemoViewer name="iconfield:sizes-demo" />
45+
46+
## Accessibility
47+
48+
### Screen Reader
49+
50+
IconField and InputIcon do not require any roles and attributes.
51+
52+
### Keyboard Support
53+
54+
Components does not include any interactive elements.

‎apps/showcase/docs/components/iconfield/pt.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
title: IconField Pass Through
3+
description: Pass Through documentation for IconField component
4+
component: iconfield
5+
---
6+
7+
## Viewer
8+
9+
Some sections may not be visible due to the availability of the particular feature.
10+
11+
<DocPTViewer name="iconfield-pt" components={['IconField', 'InputIcon']} />
12+
13+
## IconField PT Options
14+
15+
<DocTable name="IconField" category="pt" />
16+
17+
## InputIcon PT Options
18+
19+
<DocTable name="InputIcon" category="pt" />

‎apps/showcase/docs/components/iconfield/theming.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: IconField Theming
3+
description: Theming documentation for IconField component
4+
component: iconfield
5+
---
6+
7+
## Styled
8+
9+
### CSS Classes
10+
11+
List of class names used in the styled mode.
12+
13+
<DocTable name="IconField" category="style" />
14+
15+
### Design Tokens
16+
17+
List of design tokens.
18+
19+
<DocTable name="IconField" category="token" />
20+
21+
## Unstyled
22+
23+
Theming is implemented with the pass through properties in unstyled mode.

0 commit comments

Comments
 (0)