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
primefaces · Aug 12, 2024 · 4da5a7b · 4da5a7b
1 parent b72214d
commit 4da5a7b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 12 deletions.
diff --git 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<HTMLAttributes<HTMLInputElement>>",
                             "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
@@ -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 (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    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{' '}
+                    <Link href="/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git 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
@@ -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<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
@@ -35,9 +33,8 @@ export interface InputOtpPassThroughOptions {
     root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
     /**
      * Uses to pass attributes to the Tooltip component.
-     * @see {@link TooltipPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions;
+    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
     /**
      * 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
@@ -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
@@ -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
+                }
+            ]
         }
     ];