Updated NewGen docs: InputMask

primefaces · Nov 16, 2022 · 6898d8f · 6898d8f
1 parent 333bc47
commit 6898d8f
Show file tree

Hide file tree

Showing 9 changed files with 267 additions and 233 deletions.
diff --git a/components/doc/inputmask/apidoc.js b/components/doc/inputmask/apidoc.js
diff --git a/components/doc/inputmask/basicdoc.js b/components/doc/inputmask/basicdoc.js
@@ -14,7 +14,7 @@ export function BasicDoc(props) {
 import { useState } from "react";
 import { InputMask } from "primereact/inputmask";
 
-export default function BasicDemo() {
+export default function BasicDoc() {
     const [value, setValue] = useState('');
 
     return (
@@ -26,7 +26,7 @@ export default function BasicDemo() {
 import { useState } from "react";
 import { InputMask, InputMaskChangeParams } from "primereact/inputmask";
 
-export default function BasicDemo() {
+export default function BasicDoc() {
     const [value, setValue] = useState<string>('');
 
     return (
@@ -39,7 +39,9 @@ export default function BasicDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                InputMask is used as a controlled input with <i>value</i> and <i>onChange</i> properties, <i>mask</i> property is required to define the mask of the input.
+                <p>
+                    InputMask is used as a controlled input with <i>value</i> and <i>onChange</i> properties, <i>mask</i> property is required to define the mask of the input.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />

diff --git a/components/doc/inputmask/disableddoc.js b/components/doc/inputmask/disableddoc.js
@@ -30,7 +30,9 @@ export default function DisabledDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <i>disabled</i> prop prevents an input from being editable.
+                <p>
+                    <i>disabled</i> prop prevents an input from being editable.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <InputMask mask="99-999999" placeholder="99-999999" disabled />

diff --git a/components/doc/inputmask/floatlabeldoc.js b/components/doc/inputmask/floatlabeldoc.js
@@ -48,7 +48,9 @@ export default function FloatLabelDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.
+                <p>
+                    A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <span className="p-float-label">

diff --git a/components/doc/inputmask/invaliddoc.js b/components/doc/inputmask/invaliddoc.js
@@ -30,7 +30,9 @@ export default function InvalidDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                Applying <i>p-invalid</i> class to an input element indicates a failed validation.
+                <p>
+                    Applying <i>p-invalid</i> class to an input element indicates a failed validation.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <InputMask mask="99-999999" placeholder="99-999999" className="p-invalid" />

diff --git a/components/doc/inputmask/maskdoc.js b/components/doc/inputmask/maskdoc.js
@@ -77,8 +77,10 @@ export default function MaskDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                Mask format can be a combination of the the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and * for alphanumberic characters. In addition, formatting characters like <i>(</i> , <i>)</i> ,{' '}
-                <i>-</i> are also accepted.
+                <p>
+                    Mask format can be a combination of the the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and * for alphanumberic characters. In addition, formatting characters like <i>(</i> , <i>)</i>{' '}
+                    , <i>-</i> are also accepted.
+                </p>
             </DocSectionText>
             <div className="card">
                 <div className="p-fluid flex flex-column lg:flex-row gap-3">

diff --git a/components/doc/inputmask/optionaldoc.js b/components/doc/inputmask/optionaldoc.js
@@ -39,7 +39,9 @@ export default function OptionalDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.
+                <p>
+                    When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="(999) 999-9999? x999" placeholder="(999) 999-9999? x999" />

diff --git a/components/doc/inputmask/slotchardoc.js b/components/doc/inputmask/slotchardoc.js
@@ -39,7 +39,9 @@ export default function SlotCharDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                Default placeholder for a mask is underscore and it can be customized using <i>slotChart</i> option.
+                <p>
+                    Default placeholder for a mask is underscore and it can be customized using <i>slotChart</i> option.
+                </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />

diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js
@@ -57,7 +57,25 @@ const InputMaskDemo = () => {
         {
             id: 'api',
             label: 'API',
-            component: ApiDoc
+            component: ApiDoc,
+            children: [
+                {
+                    id: 'properties',
+                    label: 'Properties'
+                },
+                {
+                    id: 'events',
+                    label: 'Events'
+                },
+                {
+                    id: 'styling',
+                    label: 'Styling'
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility'
+                }
+            ]
         }
     ];