added alignment section

erinnmclaughlin · May 19, 2024 · 48aa950 · 48aa950
1 parent 11f53b3
commit 48aa950
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 40 deletions.
diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/DocumentationBlock.razor b/docs/HeadlessBlazor.Docs.Client/Examples/DocumentationBlock.razor
@@ -1,18 +1,22 @@
-<div class="hb-doc-block border">
-    <div class="hb-interactive-demo border-bottom p-3">
-        <DynamicComponent Type="Type" />
-    </div>
-    <div class="hb-code-preview bg-light">
-        @if (string.IsNullOrEmpty(CodeBlock))
-        {
-            <p class="p-3">Loading...</p>
-        }
-        else
-        {
-            <pre class="mb-0 p-3">
+<div class="mt-4">
+    <h3 id="@Type.Name">@Title</h3>
+
+    <div class="hb-doc-block border">
+        <div class="hb-interactive-demo border-bottom p-3">
+            <DynamicComponent Type="Type" />
+        </div>
+        <div class="hb-code-preview bg-light">
+            @if (string.IsNullOrEmpty(CodeBlock))
+            {
+                <p class="p-3">Loading...</p>
+            }
+            else
+            {
+                <pre class="mb-0 p-3">
                 <code>@CodeBlock</code>
-            </pre>
-        }
+                </pre>
+            }
+        </div>
     </div>
 </div>
 
@@ -23,6 +27,9 @@
     [Inject]
     private IRazorFileReader FileProvider { get; set; } = default!;
 
+    [Parameter, EditorRequired]
+    public required string Title { get; set; }
+
     [Parameter, EditorRequired]
     public required Type Type { get; set; }
 

diff --git a/...ples/Dropdown/SimpleDropdownExample.razor → ...s/Dropdown/DropdownAlignmentExample.razor b/...ples/Dropdown/SimpleDropdownExample.razor → ...s/Dropdown/DropdownAlignmentExample.razor
@@ -6,10 +6,10 @@
             <HBDropdownItemButton class="dropdown-item">Option 2</HBDropdownItemButton>
             <HBDropdownItemButton class="dropdown-item">Option 3</HBDropdownItemButton>
         </HBDropdownMenu>
-    </HBDropdown> 
+    </HBDropdown>
     <HBDropdown class="dropdown d-inline-block">
         <HBDropdownTrigger class="btn btn-primary dropdown-toggle">Click Me</HBDropdownTrigger>
-        <HBDropdownMenu class="@(context.IsOpen ? "dropdown-menu show" : "dropdown-menu")">
+        <HBDropdownMenu Side="HBPopoverSide.Top" class="@(context.IsOpen ? "dropdown-menu show" : "dropdown-menu")">
             <HBDropdownItemLink href="#" class="dropdown-item">Option 1</HBDropdownItemLink>
             <HBDropdownItemLink href="#" class="dropdown-item">Option 2</HBDropdownItemLink>
             <HBDropdownItemLink href="#" class="dropdown-item">Option 3</HBDropdownItemLink>

diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExample.razor b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExample.razor
@@ -0,0 +1,8 @@
+<HBDropdown class="dropdown d-inline-block">
+    <HBDropdownTrigger class="btn btn-primary dropdown-toggle">Click Me</HBDropdownTrigger>
+    <HBDropdownMenu class="@(context.IsOpen ? "dropdown-menu show" : "dropdown-menu")">
+        <HBDropdownItemButton class="dropdown-item">Option 1</HBDropdownItemButton>
+        <HBDropdownItemButton class="dropdown-item">Option 2</HBDropdownItemButton>
+        <HBDropdownItemButton class="dropdown-item">Option 3</HBDropdownItemButton>
+    </HBDropdownMenu>
+</HBDropdown> 
diff --git a/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExamples.razor b/docs/HeadlessBlazor.Docs.Client/Examples/Dropdown/DropdownExamples.razor
@@ -1,2 +1,2 @@
-<h3 id="SimpleDropdown">Simple Dropdown</h3>
-<DocumentationBlock Type="typeof(SimpleDropdownExample)" />
+<DocumentationBlock Title="Simple Dropdown" Type="typeof(DropdownExample)" />
+<DocumentationBlock Title="Dropdown Alignment" Type="typeof(DropdownAlignmentExample)" />
diff --git a/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor b/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor
@@ -10,7 +10,7 @@
             <span>Headless Blazor</span>
         </a>
     </div>
-    <div class="hb-content prose">
+    <div class="hb-content">
         <h2 id="Dropdown">Dropdown</h2>
         <DropdownExamples @rendermode="InteractiveWebAssembly" />
     </div>

diff --git a/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css b/docs/HeadlessBlazor.Docs/Components/Pages/Home.razor.css
@@ -1,11 +1,8 @@
-.page-root > * {
-    padding: 0.5rem 1rem;
-}
-
-.hb-top-row {
+.hb-top-row {
     background-image: linear-gradient(45deg, #5271FF, hotpink);
     display: flex;
     justify-content: space-between;
+    padding: 0.5rem 1rem;
 }
 
     .hb-top-row .hb-brand {
@@ -22,6 +19,6 @@
             width: 0.85em;
         }
 
-    .hb-top-row {
-        flex-grow: 0;
-    }
+.hb-content {
+    padding: 1rem;
+}
diff --git a/src/HeadlessBlazor.Core/Behaviors/Click/ClickBehavior.razor b/src/HeadlessBlazor.Core/Behaviors/Click/ClickBehavior.razor
diff --git a/src/HeadlessBlazor.Core/Behaviors/Popover/HBPopoverBehavior.razor.js b/src/HeadlessBlazor.Core/Behaviors/Popover/HBPopoverBehavior.razor.js
@@ -21,12 +21,11 @@ export class HBPopoverBehavior {
      * @param {any} options
      */
     constructor(anchor, content, options) {
-        const side = (options && options.Side) || 'bottom';
-        const align = (options && options.Alignment) || 'start';
-
+        const side = options.side || 'bottom';
+        const align = options.alignment || 'start';
         this.dispose = autoUpdate(anchor, content, () => {
             computePosition(anchor, content, {
-                placement: `${side}-${align}`,
+                placement: `${side}-${align}`.toLowerCase(),
                 middleware: [flip()]
             }).then(({ x, y }) => {
                 Object.assign(content.style, {

diff --git a/src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs b/src/HeadlessBlazor.Dropdown/HBDropdownMenu.cs
@@ -8,7 +8,7 @@ public class HBDropdownMenu : HBElement
     public ElementReference ElementReference { get; private set; }
 
     [Parameter]
-    public HBPopoverAlignment Alignment { get; set; } = HBPopoverAlignment.Start;
+    public HBPopoverAlignment? Alignment { get; set; }
 
     [Parameter]
     public bool AutoPosition { get; set; } = true;
@@ -17,7 +17,7 @@ public class HBDropdownMenu : HBElement
     protected HBDropdown Dropdown { get; set; } = default!;
 
     [Parameter]
-    public HBPopoverSide Side { get; set; } = HBPopoverSide.Bottom;
+    public HBPopoverSide? Side { get; set; }
 
     protected override void AddBehaviors(RenderTreeBuilder builder, ref int sequenceNumber)
     {