Merge dimodi-popover-2575 into production (#2582)

* docs(popover)

* Improve Popover Position article

---------

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Author: github-actions[bot]

components/popover/overview.md

@@ -69,7 +69,7 @@ The Blazor Popover provides parameters to configure the component. Also check th
 | `AnimationDuration` | `int` | The duration of the animation in milliseconds. [Read more about Popover animations...]({%slug popover-animation%}) |
 | `AnimationType` | `AnimationType` enum <br /> (`SlideDown`) | The type of animation when the component displays and hides. [Read more about Popover animations...]({%slug popover-animation%}) |
 | `Collision` | `PopoverCollision` enum <br /> (`Fit`) | The behavior of the Popover when it doesn't fit in the viewport. [Read more about Popover collision...]({%slug popover-position-collision%}) |
-| `Offset` | `double ` | The space between the Popover and its anchor in pixels. |
+| `Offset` | `double ` | The [space between the Popover and its anchor]({%slug popover-position-collision%}#offset) in pixels. The component ignores its callout when applying this setting. |
 | `Position` | `PopoverPosition  ` enum <br /> (`Top`) | The position relative to the target element at which the Popover will be shown. [Read more about Popover position...]({%slug popover-position-collision%}) |
 | `ShowCallout` | `bool` <br /> (`true`) | Defines if the callout is rendered. |
 | `ShowOn` | `PopOverShowOn?` enum <br /> (`null`) | The browser event that will display the Popover (`MouseEnter` or `Click`) without the need to [use component methods](#popover-reference-and-methods). When you set the `ShowOn` parameter to `Click`, the Popover will hide when the user clicks outside the component. If the parameter value is `MouseEnter`, the Popover will hide when the mouse pointer leaves. |

components/popover/position-collision.md

@@ -12,6 +12,8 @@ position: 10
 
 This article outlines the available settings which enable you to control the position of the Popover based on its anchor and dictate how the component responds to insufficient screen space.
 
+The [example](#example) below lets you customize the Popover `Position`, `Offset`, and `Collision` parameters and see how they affect the component.
+
 ## Position
 
 To customize how the popover aligns with its anchor element, use the `Position` parameter and set its value to a member of the `PopoverPosition` enum:
@@ -21,7 +23,9 @@ To customize how the popover aligns with its anchor element, use the `Position`
 * `Left`
 * `Right`
 
-The [example](#example) below lets you customize the available `Position` parameters and see how they affect the Popover component.
+## Offset
+
+The `Offset` moves the Popover further away from its anchor in the direction that is consistent with the `Position` parameter value. For example, the Popover will move further down when the `Position` is set to `Bottom`.
 
 ## Collision
 
@@ -34,13 +38,21 @@ To define how the Popover reacts to insufficient screen space, set the `Collisio
 
 The following example lets you experiment with the available settings that control the position and collision behavior of the Popover. It starts with the default component behavior.
 
+>caption Popover Position and Collision
+
 ````CSHTML
 <div>
     <label>
         Popover Position
         <TelerikDropDownList @bind-Value="@PopoverPositionType" Data="@PopoverPositions" Width="200px" />
     </label>
 </div>
+<div>
+    <label>
+        Offset
+        <TelerikNumericTextBox @bind-Value="@PopoverOffset" Width="200px" />
+    </label>
+</div>
 <div>
     <label>
         Popover Collision Type
@@ -49,14 +61,15 @@ The following example lets you experiment with the available settings that contr
 </div>
 
 <TelerikPopover @ref="@PopoverRef"
-                AnchorSelector=".popover-target" 
+                AnchorSelector=".popover-target"
                 Collision="@PopoverCollisionType"
+                Offset="@PopoverOffset"
                 Position="@PopoverPositionType">
     <PopoverContent>
         I am a Telerik Popover
     </PopoverContent>
     <PopoverActions>
-        <TelerikButton OnClick="@(() => PopoverRef.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
+        <TelerikButton OnClick="@(() => PopoverRef?.Hide())" Icon="@SvgIcon.X">Close</TelerikButton>
     </PopoverActions>
 </TelerikPopover>
 
@@ -65,20 +78,19 @@ The following example lets you experiment with the available settings that contr
 </div>
 
 @code{
-    private TelerikPopover PopoverRef { get; set; }
+    private TelerikPopover? PopoverRef { get; set; }
     private PopoverCollision PopoverCollisionType { get; set; } = PopoverCollision.Fit;
+    private int PopoverOffset { get; set; } = 0;
     private PopoverPosition PopoverPositionType { get; set; } = PopoverPosition.Top;
 
-    private List<PopoverPosition> PopoverPositions { get; set; } = new List<PopoverPosition>()
-    {
+    private List<PopoverPosition> PopoverPositions { get; set; } = new List<PopoverPosition>() {
         PopoverPosition.Top,
         PopoverPosition.Left,
         PopoverPosition.Right,
         PopoverPosition.Bottom,
     };
 
-    private List<PopoverCollision> PopoverCollisionTypes { get; set; } = new List<PopoverCollision>()
-    {
+    private List<PopoverCollision> PopoverCollisionTypes { get; set; } = new List<PopoverCollision>() {
         PopoverCollision.Fit,
         PopoverCollision.Flip
     };