Merge pull request #4602 from syncfusion-content/890708-hotfix2

890708: Textarea component documentation corrections in Blazor

Author: PrinceOliver

blazor/textarea/events.md

@@ -31,33 +31,33 @@ The TextArea component triggers the [Created](https://help.syncfusion.com/cr/bla
 ## Input event
 
 The TextArea component triggers the [Input](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Input) each time when the value of TextArea has changed. This event provides users with an opportunity to perform actions in response to real-time changes in the TextArea's content.
-The [InputEventArgs](../api/textbox/InputEventArgs/) passed as an event argument provides the details about the input event in the TextArea.
+The [TextAreaInputEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaInputEventArgs.html) passed as an event argument provides the details about the input event in the TextArea.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 
 <SfTextArea Input="@InputHandler"></SfTextArea>
 
 @code {
-    private void InputHandler(InputEventArgs args)
+    private void InputHandler(TextAreaInputEventArgs args)
     {
         // Here you can customize your code
     }
 }
 ```
 
-## Change event
+## ValueChange event
 
-The TextArea component triggers the [Change](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Change) event when the content of TextArea has changed and gets focus-out. This event provides users with an opportunity to execute specific actions in response to changes made by the user.
-The [ChangedEventArgs](../api/textbox/ChangedEventArgs/) passed as an event argument provides the details about the changes in the TextArea's value.
+The TextArea component triggers the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_ValueChange) event when the content of TextArea has changed and gets focus-out. This event provides users with an opportunity to execute specific actions in response to changes made by the user.
+The [TextAreaValueChangeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaValueChangeEventArgs.html) passed as an event argument provides the details about the changes in the TextArea's value.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 
-<SfTextArea Change="@ChangeHandler"></SfTextArea>
+<SfTextArea ValueChange="@ChangeHandler"></SfTextArea>
 
 @code {
-    private void ChangeHandler(ChangedEventArgs args)
+    private void ChangeHandler(TextAreaValueChangeEventArgs args)
     {
         // Here you can customize your code
     }
@@ -67,15 +67,15 @@ The [ChangedEventArgs](../api/textbox/ChangedEventArgs/) passed as an event argu
 ## Focus event
 
 The TextArea component triggers the [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Focus ) when the TextArea gains focus. This event allows developers to execute specific actions when the user interacts with the TextArea by focusing on it.
-The [FocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusInEventArgs/) passed as an argument provides details about the focus event in the TextArea.
+The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusInEventArgs.html) passed as an argument provides details about the focus event in the TextArea.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 
 <SfTextArea Focus="@FocusHandler"></SfTextArea>
 
 @code {
-    private void FocusHandler(FocusInEventArgs args)
+    private void FocusHandler(TextAreaFocusInEventArgs args)
     {
         // Here you can customize your code
     }
@@ -85,15 +85,15 @@ The [FocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I
 ## Blur event
 
 The TextArea component triggers the [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Blur) when the TextArea loses focus. This event allows users to execute specific actions when the user interacts with the TextArea by moving focus away from it.
-The [FocusOutEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_FocusOutEventArgs/) passed as an argument provides details about the blur event in the TextArea.
+The [TextAreaFocusInEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.TextAreaFocusOutEventArgs.html) passed as an argument provides details about the blur event in the TextArea.
 
 ```cshtml
 @using Syncfusion.Blazor.Inputs
 
 <SfTextArea Blur="@BlurHandler"></SfTextArea>
 
 @code {
-    private void BlurHandler(FocusOutEventArgs args)
+    private void BlurHandler(TextAreaFocusInEventArgs args)
     {
         // Here you can customize your code
     }

blazor/textarea/styles-appearance.md

@@ -89,7 +89,7 @@ By adding these classes, users can choose between a filled or outline appearance
 {% endhighlight %}
 {% endtabs %}
 
->Note: Filled and Outline theme customization are available only with Material themes.
+>Note: Filled and Outline theme customization are available only with Material and Material3 themes.
 
 ## Custom styling with CssClass property
 
@@ -108,12 +108,12 @@ By utilizing the `CssClass` API, users can apply custom CSS classes to the TextA
 
 ## Setting the disabled state
 
-To disable the TextArea, you can utilize the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Enabled) property. When set to `false`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent).
+To disable the TextArea, you can utilize the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextArea.html#Syncfusion_Blazor_Inputs_SfTextArea_Disabled) property. When set to `true`, the TextArea becomes disabled, preventing user interaction. Please find the demo link [here](https://blazor.syncfusion.com/demos/textarea/api?theme=fluent).
 
 {% tabs %}
 {% highlight razor %}
 
-<SfTextArea Placeholder='Enter your comments' Enabled="false" ></SfTextArea>
+<SfTextArea Placeholder='Enter your comments' Disabled="true" ></SfTextArea>
 
 {% endhighlight %}
 {% endtabs %}
@@ -141,9 +141,17 @@ Render the TextArea with `rounded corner` by adding the `e-corner` class to the
 {% tabs %}
 {% highlight razor %}
 
-<div class="e-corner">
-    <SfTextArea Placeholder='Enter your comments'></SfTextArea>
-</div>
+<SfTextArea Placeholder='Enter your comments'  CssClass="e-corner"></SfTextArea>
+
+{% endhighlight %}
+{% endtabs %}
+
+{% endhighlight %}
+{% highlight cshtml tabtitle="Css"  %}
+
+.e-input-group.e-corner {
+    border-radius: 4px;
+}
 
 {% endhighlight %}
 {% endtabs %}
@@ -200,8 +208,7 @@ You can customize the TextArea styles such as background-color, text-color and b
 
 /* To change the background-color and text-color for textarea */ 
 .e-input-group,
-.e-float-input,
-.e-float-input.e-input-group { /* csslint allow: adjoining-classes */
+.e-input-group.e-multi-line-input { /* csslint allow: adjoining-classes */
   background : lightgray;
   color: green;
 }
@@ -222,16 +229,16 @@ You can change the floating label color of the TextArea for both `success` and `
 ```css
 
     /* For Success state */
-    .e-float-input.e-success label.e-float-text,
-    .e-float-input.e-success input:focus ~ label.e-float-text,
-    .e-float-input.e-success input:valid ~ label.e-float-text {
+    .e-float-input.e-success textarea ~ label.e-float-text,
+    .e-float-input.e-success textarea:focus ~ label.e-float-text,
+    .e-float-input.e-success textarea:valid ~ label.e-float-text {
       color: #22b24b;
     }
 
     /* For Warning state */
-    .e-float-input.e-warning label.e-float-text,
-    .e-float-input.e-warning input:focus ~ label.e-float-text,
-    .e-float-input.e-warning input:valid ~ label.e-float-text {
+    .e-float-input.e-warning textarea ~ label.e-float-text,
+    .e-float-input.e-warning textarea:focus ~ label.e-float-text,
+    .e-float-input.e-warning textarea:valid ~ label.e-float-text {
       color: #ffca1c;
     }
 
@@ -273,24 +280,18 @@ You can change the floating label color of the TextArea for both `success` and `
   width: 340px;
 }
 
-.e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
-  color: #22b24b;
-}
-.e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
-  color: #22b24b;
-}
-.e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
-  color: #22b24b;
+/* For Success state */
+#input-container .e-float-input.e-success textarea ~ label.e-float-text,
+#input-container .e-float-input.e-success textarea:focus ~ label.e-float-text,
+#input-container .e-float-input.e-success textarea:valid ~ label.e-float-text {
+    color: #22b24b;
 }
 
-.e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */
-  color: #ffca1c;
-}
-.e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
-  color: #ffca1c;
-}
-.e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
-  color: #ffca1c;
+/* For Warning state */
+#input-container .e-float-input.e-warning textarea ~ label.e-float-text,
+#input-container .e-float-input.e-warning textarea:focus ~ label.e-float-text,
+#input-container .e-float-input.e-warning textarea:valid ~ label.e-float-text {
+    color: red;
 }
 
 {% endhighlight %}