From 4da5a7b12a5fe3009577e3d4e8ad38aa7141e969 Mon Sep 17 00:00:00 2001 From: Ivan Date: Mon, 12 Aug 2024 22:08:19 +0200 Subject: [PATCH] Fix #7032: Passthrough options type and missing docs (#7033) * fix: InputOTP passthrough type definition * chore: Add section for theming in unstyled mode * chore: Add default styles to Tailwind theme * chore: Add inputotp to PrimeReactPTOptions --- components/doc/common/apidoc/index.json | 9 ++- .../doc/inputotp/theming/tailwinddoc.js | 55 +++++++++++++++++++ components/lib/api/api.d.ts | 5 ++ components/lib/inputotp/inputotp.d.ts | 5 +- components/lib/passthrough/tailwind/index.js | 12 ++++ pages/inputotp/index.js | 27 ++++++--- 6 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 components/doc/inputotp/theming/tailwinddoc.js diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index deba3c73d8..9726735a73 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -1270,6 +1270,13 @@ "type": "InputNumberPassThroughOptions", "description": "Custom passthrough(pt) options for InputNumber." }, + { + "name": "inputotp", + "optional": true, + "readonly": false, + "type": "InputOtpPassThroughOptions", + "description": "Custom passthrough(pt) options for InputOtp." + }, { "name": "inputswitch", "optional": true, @@ -31588,7 +31595,7 @@ "name": "input", "optional": true, "readonly": false, - "type": "InputTextPassThroughOptions", + "type": "InputOtpPassThroughType>", "description": "Uses to pass attributes to the Tooltip component." }, { diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js new file mode 100644 index 0000000000..84fc669f2c --- /dev/null +++ b/components/doc/inputotp/theming/tailwinddoc.js @@ -0,0 +1,55 @@ +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 = { + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + } +} + ` + }; + + const code2 = { + javascript: ` +import React, { useState } from 'react'; +import { InputOtp } from 'primereact/inputotp'; + +export default function BasicDemo() { + const [token, setTokens] = useState(); + + return ( +
+ setTokens(e.value)}/> +
+ ); +} + ` + }; + + 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/api/api.d.ts b/components/lib/api/api.d.ts index 3929d14b57..1204923e72 100644 --- a/components/lib/api/api.d.ts +++ b/components/lib/api/api.d.ts @@ -42,6 +42,7 @@ import { GalleriaPassThroughOptions } from '../galleria/galleria'; import { ImagePassThroughOptions } from '../image/image'; import { InplacePassThroughOptions } from '../inplace/inplace'; import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber'; +import { InputOtpPassThroughOptions } from '../inputotp/inputotp'; import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch'; import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea'; @@ -447,6 +448,10 @@ export interface PrimeReactPTOptions { * Custom passthrough(pt) options for InputNumber. */ inputnumber?: InputNumberPassThroughOptions; + /** + * Custom passthrough(pt) options for InputOtp. + */ + inputotp?: InputOtpPassThroughOptions; /** * Custom passthrough(pt) options for InputSwitch. */ diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts index 8229844be0..9466a9a12a 100644 --- a/components/lib/inputotp/inputotp.d.ts +++ b/components/lib/inputotp/inputotp.d.ts @@ -9,9 +9,7 @@ */ import * as React from 'react'; import { ComponentHooks } from '../componentbase/componentbase'; -import { InputTextPassThroughOptions } from '../inputtext/inputtext'; import { PassThroughOptions } from '../passthrough'; -import { TooltipPassThroughOptions } from '../tooltip/tooltip'; import { PassThroughType, TemplateType } from '../utils/utils'; export declare type InputOtpPassThroughType = PassThroughType; @@ -35,9 +33,8 @@ export interface InputOtpPassThroughOptions { root?: InputOtpPassThroughType>; /** * Uses to pass attributes to the Tooltip component. - * @see {@link TooltipPassThroughOptions} */ - input?: InputTextPassThroughOptions; + input?: InputOtpPassThroughType>; /** * Used to manage all lifecycle hooks * @see {@link ComponentHooks} diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js index bccd4f616c..ece250e1f8 100644 --- a/components/lib/passthrough/tailwind/index.js +++ b/components/lib/passthrough/tailwind/index.js @@ -891,6 +891,18 @@ const Tailwind = { 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' }, + inputotp: { + root: { className: 'flex items-center gap-2' }, + input: { + root: { + className: classNames( + 'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200', + 'hover:border-cyan-500', + 'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0' + ) + } + } + }, rating: { root: ({ props }) => ({ className: classNames('relative flex items-center', 'gap-2', { diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js index dd0dcda853..95c5c2ff85 100644 --- a/pages/inputotp/index.js +++ b/pages/inputotp/index.js @@ -1,14 +1,15 @@ -import { ImportDoc } from '@/components/doc/inputotp/importdoc'; +import DocApiTable from '@/components/doc/common/docapitable'; +import { DocComponent } from '@/components/doc/common/doccomponent'; +import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; import { BasicDoc } from '@/components/doc/inputotp/basicdoc'; -import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; +import { ImportDoc } from '@/components/doc/inputotp/importdoc'; import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc'; -import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; -import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; -import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc'; +import { MaskDoc } from '@/components/doc/inputotp/maskdoc'; import { Wireframe } from '@/components/doc/inputotp/pt/wireframe'; +import { SampleDoc } from '@/components/doc/inputotp/sampledoc'; +import { TemplateDoc } from '@/components/doc/inputotp/templatedoc'; import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc'; -import DocApiTable from '@/components/doc/common/docapitable'; -import { DocComponent } from '@/components/doc/common/doccomponent'; +import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc'; const InputOtpDemo = () => { const docs = [ @@ -72,6 +73,18 @@ const InputOtpDemo = () => { 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 + } + ] } ];