Docs: improve TextEdit examples

Megabit · Oct 14, 2023 · 7a5bd3f · 7a5bd3f
1 parent 325265f
commit 7a5bd3f
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 15 deletions.
diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -4073,7 +4073,24 @@ therefore re-calculated.
 
         public const string TextEditDisabledExample = @"<TextEdit Disabled />";
 
-        public const string TextEditMaskExample = @"<TextEdit MaskType=""MaskType.RegEx"" EditMask=""^[a-zA-Z ]*$"" />";
+        public const string TextEditMaskExample = @"<Fields>
+    <Field ColumnSize=""ColumnSize.Is6.OnDesktop.Is12.OnMobile"">
+        <FieldLabel>
+            Text only
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit MaskType=""MaskType.RegEx"" EditMask=""^[a-zA-Z ]*$"" />
+        </FieldBody>
+    </Field>
+    <Field ColumnSize=""ColumnSize.Is6.OnDesktop.Is12.OnMobile"">
+        <FieldLabel>
+            Numbers only
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit MaskType=""MaskType.RegEx"" EditMask=""^(\d+(.\d{0,2})?|.?\d{1,2})$"" />
+        </FieldBody>
+    </Field>
+</Fields>";
 
         public const string TextEditPatternExample = @"<Validation UsePattern>
     <TextEdit Pattern=""[A-Za-z]{3}"">
@@ -4089,11 +4106,31 @@ therefore re-calculated.
 
         public const string TextEditReadonlyExample = @"<TextEdit ReadOnly />";
 
-        public const string TextEditRoleExample = @"<TextEdit Role=""TextRole.Email"" />
-<TextEdit Role=""TextRole.Password"" />";
+        public const string TextEditRoleExample = @"<Fields>
+    <Field ColumnSize=""ColumnSize.Is6.OnDesktop.Is12.OnMobile"">
+        <FieldLabel>
+            Email
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit Role=""TextRole.Email"" />
+        </FieldBody>
+    </Field>
+    <Field ColumnSize=""ColumnSize.Is6.OnDesktop.Is12.OnMobile"">
+        <FieldLabel>
+            Password
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit Role=""TextRole.Password"" autocomplete=""new-password"" />
+        </FieldBody>
+    </Field>
+</Fields>";
 
-        public const string TextEditSizingExample = @"<TextEdit Size=""Size.Small"" />
-<TextEdit Size=""Size.Large"" />";
+        public const string TextEditSizingExample = @"<Field>
+    <TextEdit Size=""Size.Small"" />
+</Field>
+<Field>
+    <TextEdit Size=""Size.Large"" />
+</Field>";
 
         public const string TextEditTextChangedModeExample = @"public void ConfigureServices( IServiceCollection services )
 {

diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Code/TextEditMaskExampleCode.html b/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Code/TextEditMaskExampleCode.html
@@ -1,5 +1,22 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">MaskType</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">MaskType</span><span class="enumValue">.RegEx</span><span class="quot">&quot;</span> <span class="htmlAttributeName">EditMask</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">^[a-zA-Z ]*$</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Fields</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span> <span class="htmlAttributeName">ColumnSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">ColumnSize.Is6.OnDesktop.Is12.OnMobile</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+            Text only
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">MaskType</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">MaskType</span><span class="enumValue">.RegEx</span><span class="quot">&quot;</span> <span class="htmlAttributeName">EditMask</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">^[a-zA-Z ]*$</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span> <span class="htmlAttributeName">ColumnSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">ColumnSize.Is6.OnDesktop.Is12.OnMobile</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+            Numbers only
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">MaskType</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">MaskType</span><span class="enumValue">.RegEx</span><span class="quot">&quot;</span> <span class="htmlAttributeName">EditMask</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">^(\d+(.\d{0,2})?|.?\d{1,2})$</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Fields</span><span class="htmlTagDelimiter">&gt;</span>
 </pre></div>
 </div>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Code/TextEditRoleExampleCode.html b/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Code/TextEditRoleExampleCode.html
@@ -1,6 +1,22 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Role</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextRole</span><span class="enumValue">.Email</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Role</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextRole</span><span class="enumValue">.Password</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Fields</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span> <span class="htmlAttributeName">ColumnSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">ColumnSize.Is6.OnDesktop.Is12.OnMobile</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+            Email
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Role</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextRole</span><span class="enumValue">.Email</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span> <span class="htmlAttributeName">ColumnSize</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">ColumnSize.Is6.OnDesktop.Is12.OnMobile</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+            Password
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldLabel</span><span class="htmlTagDelimiter">&gt;</span>
+        <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+            <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Role</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">TextRole</span><span class="enumValue">.Password</span><span class="quot">&quot;</span> <span class="htmlAttributeName">autocomplete</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">new-password</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+        <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">FieldBody</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Fields</span><span class="htmlTagDelimiter">&gt;</span>
 </pre></div>
 </div>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Code/TextEditSizingExampleCode.html b/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Code/TextEditSizingExampleCode.html
@@ -1,6 +1,10 @@
 <div class="blazorise-codeblock">
 <div class="html"><pre>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Size</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Size</span><span class="enumValue">.Small</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
-<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Size</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Size</span><span class="enumValue">.Large</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Size</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Size</span><span class="enumValue">.Small</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">TextEdit</span> <span class="htmlAttributeName">Size</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="enum">Size</span><span class="enumValue">.Large</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Field</span><span class="htmlTagDelimiter">&gt;</span>
 </pre></div>
 </div>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Examples/TextEditMaskExample.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Examples/TextEditMaskExample.razor
@@ -1,3 +1,20 @@
 @namespace Blazorise.Docs.Docs.Examples
 
-<TextEdit MaskType="MaskType.RegEx" EditMask="^[a-zA-Z ]*$" />
+<Fields>
+    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
+        <FieldLabel>
+            Text only
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit MaskType="MaskType.RegEx" EditMask="^[a-zA-Z ]*$" />
+        </FieldBody>
+    </Field>
+    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
+        <FieldLabel>
+            Numbers only
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit MaskType="MaskType.RegEx" EditMask="^(\d+(.\d{0,2})?|.?\d{1,2})$" />
+        </FieldBody>
+    </Field>
+</Fields>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Examples/TextEditRoleExample.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/Examples/TextEditRoleExample.razor
@@ -1,4 +1,20 @@
 @namespace Blazorise.Docs.Docs.Examples
 
-<TextEdit Role="TextRole.Email" />
-<TextEdit Role="TextRole.Password" />
+<Fields>
+    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
+        <FieldLabel>
+            Email
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit Role="TextRole.Email" />
+        </FieldBody>
+    </Field>
+    <Field ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
+        <FieldLabel>
+            Password
+        </FieldLabel>
+        <FieldBody>
+            <TextEdit Role="TextRole.Password" autocomplete="new-password" />
+        </FieldBody>
+    </Field>
+</Fields>
diff --git a/...mentation/Blazorise.Docs/Pages/Docs/Components/Texts/Examples/TextEditSizingExample.razor b/...mentation/Blazorise.Docs/Pages/Docs/Components/Texts/Examples/TextEditSizingExample.razor
@@ -1,4 +1,8 @@
 @namespace Blazorise.Docs.Docs.Examples
 
-<TextEdit Size="Size.Small" />
-<TextEdit Size="Size.Large" />
+<Field>
+    <TextEdit Size="Size.Small" />
+</Field>
+<Field>
+    <TextEdit Size="Size.Large" />
+</Field>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/TextEditPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Texts/TextEditPage.razor
@@ -163,6 +163,18 @@
     </AlertDescription>
 </Alert>
 
+<DocsPageSubtitle>
+    Best Practices
+</DocsPageSubtitle>
+
+<Heading Size="HeadingSize.Is3">
+    Prevent autocomplete
+</Heading>
+
+<DocsPageParagraph>
+    When working with email and password fields, in some cases browsers might automatically autofill them with the values from user system. To prevent it you can define an <Code>autocomplete</Code> attribute, eg. <Code>autocomplete="new-password"</Code> on an input field.
+</DocsPageParagraph>
+
 <DocsPageSubtitle>
     API
 </DocsPageSubtitle>