From 493c290a29ecebef62c8664c1a359f71c2e0b889 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 20 Mar 2024 16:54:15 +0300 Subject: [PATCH 1/5] New component - FloatLabel --- components/lib/floatlabel/FloatLabel.js | 31 ++++++++++ components/lib/floatlabel/FloatLabelBase.js | 65 +++++++++++++++++++++ components/lib/floatlabel/package.json | 7 +++ 3 files changed, 103 insertions(+) create mode 100644 components/lib/floatlabel/FloatLabel.js create mode 100644 components/lib/floatlabel/FloatLabelBase.js create mode 100644 components/lib/floatlabel/package.json diff --git a/components/lib/floatlabel/FloatLabel.js b/components/lib/floatlabel/FloatLabel.js new file mode 100644 index 0000000000..82af275a2d --- /dev/null +++ b/components/lib/floatlabel/FloatLabel.js @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { PrimeReactContext } from '../api/Api'; +import { useHandleStyle } from '../componentbase/Componentbase'; +import { useMergeProps } from '../hooks/Hooks'; +import { classNames } from '../utils/Utils'; +import { FloatLabelBase } from './FloatLabelBase'; + +export const FloatLabel = React.memo( + React.forwardRef((inProps) => { + const mergeProps = useMergeProps(); + const context = React.useContext(PrimeReactContext); + const props = FloatLabelBase.getProps(inProps, context); + const { ptm, cx, isUnstyled } = FloatLabelBase.setMetaData({ + props + }); + + useHandleStyle(FloatLabelBase.css.styles, isUnstyled, { name: 'floatlabel' }); + + const rootProps = mergeProps( + { + className: classNames(cx('root')) + }, + FloatLabelBase.getOtherProps(props), + ptm('root') + ); + + return {props.children}; + }) +); + +FloatLabel.displayName = 'FloatLabel'; diff --git a/components/lib/floatlabel/FloatLabelBase.js b/components/lib/floatlabel/FloatLabelBase.js new file mode 100644 index 0000000000..8bc1cf05d4 --- /dev/null +++ b/components/lib/floatlabel/FloatLabelBase.js @@ -0,0 +1,65 @@ +import { ComponentBase } from '../componentbase/ComponentBase'; + +const classes = { + root: 'p-float-label' +}; + +const styles = ` +@layer primereact { + .p-float-label { + display: block; + position: relative; + } + + .p-float-label label { + position: absolute; + pointer-events: none; + top: 50%; + margin-top: -.5rem; + transition-property: all; + transition-timing-function: ease; + line-height: 1; + } + + .p-float-label:has(textarea) label { + top: 1rem; + } + + .p-float-label:has(input:focus) label, + .p-float-label:has(input.p-filled) label, + .p-float-label:has(input:-webkit-autofill) label, + .p-float-label:has(textarea:focus) label, + .p-float-label:has(textarea.p-filled) label, + .p-float-label:has(.p-inputwrapper-focus) label, + .p-float-label:has(.p-inputwrapper-filled) label { + top: -.75rem; + font-size: 12px; + } + + .p-float-label .p-placeholder, + .p-float-label input::placeholder, + .p-float-label .p-inputtext::placeholder { + opacity: 0; + transition-property: all; + transition-timing-function: ease; + } + + .p-float-label .p-focus .p-placeholder, + .p-float-label input:focus::placeholder, + .p-float-label .p-inputtext:focus::placeholder { + opacity: 1; + transition-property: all; + transition-timing-function: ease; + } +}`; + +export const FloatLabelBase = ComponentBase.extend({ + defaultProps: { + __TYPE: 'FloatLabel', + children: undefined + }, + css: { + classes, + styles + } +}); diff --git a/components/lib/floatlabel/package.json b/components/lib/floatlabel/package.json new file mode 100644 index 0000000000..2dc676763c --- /dev/null +++ b/components/lib/floatlabel/package.json @@ -0,0 +1,7 @@ +{ + "main": "./floatlabel.cjs.js", + "module": "./floatlabel.esm.js", + "unpkg": "./floatlabel.min.js", + "types": "./floatlabel.d.ts", + "sideEffects": false +} From 68c063603d263fe2b0d2e18f7afb53ffc0399068 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 20 Mar 2024 18:22:35 +0300 Subject: [PATCH 2/5] Create floatlabel.d.ts --- components/lib/floatlabel/FloatLabel.d.ts | 93 +++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 components/lib/floatlabel/FloatLabel.d.ts diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/FloatLabel.d.ts new file mode 100644 index 0000000000..b533ed56fc --- /dev/null +++ b/components/lib/floatlabel/FloatLabel.d.ts @@ -0,0 +1,93 @@ +/** + * + * FloatLabel appears on top of the input field when focused. + * + * [Live Demo](https://www.primereact.org/floatlabel/) + * + * @module floatlabel + * + */ +import * as React from 'react'; +import { ComponentHooks } from '../componentbase/componentbase'; +import { PassThroughOptions } from '../passthrough'; +import { PassThroughType } from '../utils/utils'; + +export declare type FloatLabelPassThroughType = PassThroughType; + +/** + * Custom passthrough(pt) option method. + */ +export interface FloatLabelPassThroughMethodOptions { + /** + * Defines instance. + */ + instance: any; + /** + * Defines valid properties. + */ + props: FloatLabelProps; + /** + * Defines valid attributes. + */ + attrs: any; + /** + * Defines parent options. + */ + parent: any; + /** + * Defines passthrough(pt) options in global config. + */ + global: object | undefined; +} + +/** + * Custom passthrough(pt) options. + * @see {@link FloatLabelProps.pt} + */ +export interface FloatLabelPassThroughOptions { + /** + * Used to pass attributes to the root's DOM element. + */ + root?: FloatLabelPassThroughType>; + /** + * Used to manage all lifecycle hooks. + * @see {@link ComponentHooks} + */ + hooks?: ComponentHooks; +} + +/** + * Defines valid properties in FloatLabel component. + * @group Properties + */ +export interface FloatLabelProps { + /** + * Used to pass attributes to DOM elements inside the component. + * @type {FloatLabelPassThroughOptions} + */ + pt?: FloatLabelPassThroughOptions; + /** + * Used to configure passthrough(pt) options of the component. + * @type {PassThroughOptions} + */ + ptOptions?: PassThroughOptions; + /** + * When enabled, it removes component related styles in the core. + * @defaultValue false + */ + unstyled?: boolean; +} + +/** + * **PrimeReact - FloatLabel** + * + * _FloatLabel appears on top of the input field when focused._ + * + * [Live Demo](https://www.primereact.org/inputtext/) + * --- --- + * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png) + * + * @group Component + * + */ +export declare const FloatLabel: React.ForwardRefExoticComponent>; From 678cf6cad146a9f41ad3ab1c518e211ac36ef6c9 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 20 Mar 2024 18:53:51 +0300 Subject: [PATCH 3/5] Add docs --- components/doc/floatlabel/accessibilitydoc.js | 13 ++++ components/doc/floatlabel/basicdoc.js | 69 +++++++++++++++++++ components/doc/floatlabel/importdoc.js | 17 +++++ components/doc/floatlabel/pt/wireframe.js | 12 ++++ .../doc/floatlabel/theming/styleddoc.js | 30 ++++++++ .../doc/floatlabel/theming/tailwinddoc.js | 16 +++++ components/lib/floatlabel/FloatLabel.d.ts | 12 ---- pages/floatlabel/index.js | 65 +++++++++++++++++ 8 files changed, 222 insertions(+), 12 deletions(-) create mode 100644 components/doc/floatlabel/accessibilitydoc.js create mode 100644 components/doc/floatlabel/basicdoc.js create mode 100644 components/doc/floatlabel/importdoc.js create mode 100644 components/doc/floatlabel/pt/wireframe.js create mode 100644 components/doc/floatlabel/theming/styleddoc.js create mode 100644 components/doc/floatlabel/theming/tailwinddoc.js create mode 100644 pages/floatlabel/index.js diff --git a/components/doc/floatlabel/accessibilitydoc.js b/components/doc/floatlabel/accessibilitydoc.js new file mode 100644 index 0000000000..6ee3a04af1 --- /dev/null +++ b/components/doc/floatlabel/accessibilitydoc.js @@ -0,0 +1,13 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function AccessibilityDoc() { + return ( + +

Screen Reader

+

FloatLabel does not require any roles and attributes.

+ +

Keyboard Support

+

Component does not include any interactive elements.

+ + ); +} diff --git a/components/doc/floatlabel/basicdoc.js b/components/doc/floatlabel/basicdoc.js new file mode 100644 index 0000000000..cfc640e666 --- /dev/null +++ b/components/doc/floatlabel/basicdoc.js @@ -0,0 +1,69 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel'; +import { InputText } from '@/components/lib/inputtext/InputText'; +import { useState } from 'react'; + +export function BasicDoc(props) { + const [value, setValue] = useState(''); + + const code = { + basic: ` + + setValue(e.target.value)} /> + + + `, + javascript: ` +import React, { useState } from "react"; +import { InputText } from "primereact/inputtext"; +import { FloatLabel } from "primereact/floatlabel"; + +export default function BasicDemo() { + const [value, setValue] = useState(''); + + return ( +
+ + setValue(e.target.value)} /> + + +
+ ) +} + `, + typescript: ` +import React, { useState } from "react"; +import { InputText } from "primereact/inputtext"; +import { FloatLabel } from "primereact/floatlabel"; + +export default function BasicDemo() { + const [value, setValue] = useState(''); + + return ( +
+ + setValue(e.target.value)} /> + + +
+ ) +} + ` + }; + + return ( + <> + +

FloatLabel is used by wrapping the input and its label.

+ +
+ + setValue(e.target.value)} /> + + +
+ + + ); +} diff --git a/components/doc/floatlabel/importdoc.js b/components/doc/floatlabel/importdoc.js new file mode 100644 index 0000000000..dc14784b97 --- /dev/null +++ b/components/doc/floatlabel/importdoc.js @@ -0,0 +1,17 @@ +import { DocSectionCode } from '@/components/doc/common/docsectioncode'; +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export function ImportDoc(props) { + const code = { + basic: ` +import { FloatLabel } from 'primereact/floatlabel'; + ` + }; + + return ( + <> + + + + ); +} diff --git a/components/doc/floatlabel/pt/wireframe.js b/components/doc/floatlabel/pt/wireframe.js new file mode 100644 index 0000000000..c4626e348a --- /dev/null +++ b/components/doc/floatlabel/pt/wireframe.js @@ -0,0 +1,12 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; + +export const Wireframe = (props) => { + return ( + <> + +
+ floatlabel +
+ + ); +}; diff --git a/components/doc/floatlabel/theming/styleddoc.js b/components/doc/floatlabel/theming/styleddoc.js new file mode 100644 index 0000000000..36bcb26686 --- /dev/null +++ b/components/doc/floatlabel/theming/styleddoc.js @@ -0,0 +1,30 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function StyleDoc() { + return ( + <> + +

+ Following is the list of structural style classes, for theming classes visit theming page. +

+ +
+ + + + + + + + + + + + + +
NameElement
p-float-labelFloat label element.
+
+ + ); +} diff --git a/components/doc/floatlabel/theming/tailwinddoc.js b/components/doc/floatlabel/theming/tailwinddoc.js new file mode 100644 index 0000000000..92ee79f341 --- /dev/null +++ b/components/doc/floatlabel/theming/tailwinddoc.js @@ -0,0 +1,16 @@ +import { DocSectionText } from '@/components/doc/common/docsectiontext'; +import Link from 'next/link'; + +export function TailwindDoc() { + return ( + +

+ Visit{' '} + + Tailwind Presets + {' '} + project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS. +

+ + ); +} diff --git a/components/lib/floatlabel/FloatLabel.d.ts b/components/lib/floatlabel/FloatLabel.d.ts index b533ed56fc..a4d83807f4 100644 --- a/components/lib/floatlabel/FloatLabel.d.ts +++ b/components/lib/floatlabel/FloatLabel.d.ts @@ -18,26 +18,14 @@ export declare type FloatLabelPassThroughType = PassThroughType; +} + +export default FloatLabelDemo; From 6b2778062d22e2ebb501db7f022c9c246b17b597 Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 20 Mar 2024 18:54:53 +0300 Subject: [PATCH 4/5] Update menu --- components/layout/menu.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/layout/menu.json b/components/layout/menu.json index f9194f5f04..a645c67cad 100644 --- a/components/layout/menu.json +++ b/components/layout/menu.json @@ -57,6 +57,10 @@ "name": "Editor", "to": "/editor" }, + { + "name": "FloatLabel", + "to": "/floatlabel" + }, { "name": "InputGroup", "to": "/inputgroup" From 95d55e896de8235202abf3dae23d0ae1d4bbce0e Mon Sep 17 00:00:00 2001 From: gucal Date: Wed, 20 Mar 2024 18:55:14 +0300 Subject: [PATCH 5/5] Update apidoc --- components/doc/common/apidoc/index.json | 99 +++++++++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 29c582fcc9..0e9bf2dfe5 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -25578,6 +25578,105 @@ } } }, + "floatlabel": { + "description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primereact.org/floatlabel/)", + "components": { + "FloatLabel": { + "methods": { + "description": "Defines methods that can be accessed by the component's reference.", + "values": [] + }, + "props": { + "description": "Defines valid properties in FloatLabel component.", + "values": [ + { + "name": "pt", + "optional": true, + "readonly": false, + "type": "FloatLabelPassThroughOptions", + "default": "", + "description": "Used to pass attributes to DOM elements inside the component." + }, + { + "name": "ptOptions", + "optional": true, + "readonly": false, + "type": "PassThroughOptions", + "default": "", + "description": "Used to configure passthrough(pt) options of the component." + }, + { + "name": "unstyled", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "When enabled, it removes component related styles in the core." + } + ] + }, + "callbacks": { + "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.", + "values": [] + } + } + }, + "interfaces": { + "description": "Defines the custom interfaces used by the module.", + "values": { + "FloatLabelPassThroughMethodOptions": { + "description": "Custom passthrough(pt) option method.", + "relatedProp": "", + "props": [ + { + "name": "props", + "optional": false, + "readonly": false, + "type": "FloatLabelProps", + "description": "Defines valid properties." + }, + { + "name": "parent", + "optional": false, + "readonly": false, + "type": "any", + "description": "Defines parent options." + } + ], + "callbacks": [] + }, + "FloatLabelPassThroughOptions": { + "description": "Custom passthrough(pt) options.", + "relatedProp": "pt", + "props": [ + { + "name": "root", + "optional": true, + "readonly": false, + "type": "FloatLabelPassThroughType>", + "description": "Used to pass attributes to the root's DOM element." + }, + { + "name": "hooks", + "optional": true, + "readonly": false, + "type": "ComponentHooks", + "description": "Used to manage all lifecycle hooks." + } + ], + "callbacks": [] + } + } + }, + "types": { + "description": "Defines the custom types used by the module.", + "values": { + "FloatLabelPassThroughType": { + "values": "PassThroughType" + } + } + } + }, "galleria": { "description": "Galleria is a content gallery component.\n\n[Live Demo](https://www.primereact.org/galleria)", "components": {