Skip to content

Commit

Permalink
feat(blazorui): merge BitSplitButton into BitMenuButton #6074 (#6080)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhrastegari
mhrastegari authored Nov 21, 2023
1 parent fe818d7 commit 88693a1
Show file tree
Hide file tree
Showing 39 changed files with 2,448 additions and 5,766 deletions.
77 changes: 69 additions & 8 deletions src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitMenuButtonTests.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ public class BitMenuButtonTests : BunitTestContext
DataRow(false, BitButtonStyle.Primary),
DataRow(false, BitButtonStyle.Standard)
]
public void BitMenuButtonTest(bool isEnabled, BitButtonStyle bitButtonStyle)
public void BitMenuButtonTest(bool isEnabled, BitButtonStyle buttonStyle)
{
var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
{
parameters.Add(p => p.IsEnabled, isEnabled);
parameters.Add(p => p.ButtonStyle, bitButtonStyle);
parameters.Add(p => p.ButtonStyle, buttonStyle);
parameters.Add(p => p.Items, items);
});

Expand All @@ -48,8 +48,16 @@ public void BitMenuButtonTest(bool isEnabled, BitButtonStyle bitButtonStyle)
Assert.IsTrue(bitMenuButton.ClassList.Contains("bit-dis"));
}

var buttonStyle = bitButtonStyle is BitButtonStyle.Primary ? "bit-mnb-pri" : "bit-mnb-std";
Assert.AreEqual(isEnabled, bitMenuButton.ClassList.Contains(buttonStyle));
if (buttonStyle == BitButtonStyle.Standard)
{
Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-pri"));
Assert.IsTrue(bitMenuButton.ClassList.Contains("bit-mnb-std"));
}
else
{
Assert.IsTrue(bitMenuButton.ClassList.Contains("bit-mnb-pri"));
Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-std"));
}
}

[DataTestMethod,
Expand All @@ -69,7 +77,7 @@ public void BitMenuButtonShouldHaveTextAndIcon(string text, string iconName)

var menuButtonIcon = com.Find(".bit-mnb .bit-icon");

var menuButtonText = com.Find(".bit-mnb .bit-mnb-txt");
var menuButtonText = com.Find(".bit-mnb .bit-mnb-btx");

Assert.IsTrue(menuButtonIcon.ClassList.Contains(iconNameClass));

Expand All @@ -95,7 +103,7 @@ public void BitMenuButtonShouldHaveTextAndIconInItem(string itemText, string ite
});

var itemIconNameClass = $"bit-icon--{itemIconName}";
var menuButtonItemText = com.Find(".bit-mnb-itm .bit-mnb-txt");
var menuButtonItemText = com.Find(".bit-mnb-itm .bit-mnb-btx");
var menuButtonItemIcon = com.Find(".bit-mnb-itm .bit-icon");

Assert.AreEqual(itemText, menuButtonItemText.TextContent);
Expand All @@ -115,7 +123,7 @@ public void BitMenuButtonShouldBeItemClickIfEnabled(bool itemIsEnabled)
var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
{
parameters.Add(p => p.Items, items);
parameters.Add(p => p.OnItemClick, (item) => clickedItem = item);
parameters.Add(p => p.OnClick, (item) => clickedItem = item);
});

var lastItem = com.Find("li:last-child .bit-mnb-itm");
Expand Down Expand Up @@ -146,8 +154,9 @@ public void BitMenuButtonOpenMenu(bool isEnabled)
});

var bitMenuButton = com.Find(".bit-mnb");
var operatorButton = com.Find(".bit-mnb-opb");
Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-omn"));
bitMenuButton.Click();
operatorButton.Click();

if (isEnabled)
{
Expand All @@ -158,4 +167,56 @@ public void BitMenuButtonOpenMenu(bool isEnabled)
Assert.IsFalse(bitMenuButton.ClassList.Contains("bit-mnb-omn"));
}
}

[DataTestMethod,
DataRow(true),
DataRow(false)
]
public void BitMenuButtonStickyTest(bool isSticky)
{
BitMenuButtonItem clickedItem = default!;

var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
{
parameters.Add(p => p.Items, items);
parameters.Add(p => p.Sticky, isSticky);
parameters.Add(p => p.OnClick, (item) => clickedItem = item);
});

var lastItem = com.Find("li:last-child .bit-mnb-itm");
lastItem.Click();

var operatorButton = com.Find(".bit-mnb-opb");
operatorButton.Click();

if (isSticky)
{
Assert.AreEqual(clickedItem, items.Last());
}
else
{
Assert.IsNull(clickedItem);
}
}

[DataTestMethod,
DataRow(true)
]
public void BitMenuButtonSplitTest(bool isSplit)
{
var com = RenderComponent<BitMenuButton<BitMenuButtonItem>>(parameters =>
{
parameters.Add(p => p.Items, items);
parameters.Add(p => p.Split, isSplit);
});

var seperator = com.Find(".bit-mnb > .bit-mnb-spb");
var chevronDownButton = com.Find(".bit-mnb > .bit-mnb-chb");

if (isSplit)
{
Assert.IsNotNull(seperator);
Assert.IsNotNull(chevronDownButton);
}
}
}
144 changes: 0 additions & 144 deletions src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitSplitButtonTests.cs
View file

This file was deleted.

96 changes: 75 additions & 21 deletions src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,79 @@
<div style="display:none" hidden>@(Options ?? ChildContent)</div>
</CascadingValue>

<button @ref="RootElement" @attributes="HtmlAttributes" @onclick="HandleOnClick"
id="@_Id"
type="button"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value"
tabindex="@(IsEnabled ? 0 : -1)"
aria-label="@AriaLabel"
aria-hidden="@AriaHidden"
aria-describedby="@AriaDescription">
@if (HeaderTemplate is not null)
{
@HeaderTemplate
}
else
{
@if (IconName.HasValue())

<div @ref="RootElement" @attributes="HtmlAttributes"
id="@_Id"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value">
<button @onclick="() => HandleOnClick(Sticky ? SelectedItem : null)"
type="button"
tabindex="@(IsEnabled ? 0 : -1)"
aria-label="@AriaLabel"
aria-hidden="@AriaHidden"
aria-describedby="@AriaDescription"
style="@GetStyle(SelectedItem);@Styles?.ItemButton"
class="bit-mnb-opb @(GetIsEnabled(SelectedItem) ? "" : "bit-dis") @GetClass(SelectedItem) @Classes?.ItemButton">
@if (Sticky)
{
var template = GetTemplate(SelectedItem);
if (template is not null)
{
@template(SelectedItem)
}
else if (ItemTemplate is not null)
{
@ItemTemplate(SelectedItem)
}
else
{
var iconName = GetIconName(SelectedItem);
@if (iconName.HasValue())
{
<i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
}
<span style="@Styles?.ItemText" class="bit-mnb-btx @Classes?.ItemText">
@GetText(SelectedItem)
</span>
}
}
else
{
<i style="@Styles?.Icon" class="bit-icon bit-icon--@IconName @Classes?.Icon" />
@if (HeaderTemplate is not null)
{
@HeaderTemplate
}
else
{
@if (IconName.HasValue())
{
<i style="@Styles?.Icon" class="bit-icon bit-icon--@IconName @Classes?.Icon" />
}

@if (Text.HasValue())
{
<span style="@Styles?.Text" class="bit-mnb-btx @Classes?.Text">@Text</span>
}
}
}

@if (Split is false)
{
<i style="@Styles?.ChevronDown" class="bit-icon bit-icon--@ChevronDownIcon @Classes?.ChevronDown" />
}
<span style="@Styles?.Text" class="bit-mnb-txt @Classes?.Text">@Text</span>
<i style="@Styles?.ChevronDown" class="bit-icon bit-icon--@ChevronDownIcon @Classes?.ChevronDown" />
</button>

@if (Split)
{
<span style="@Styles?.Separator" class="bit-mnb-spb @Classes?.Separator"></span>

<button @onclick="OpenCallout"
type="button"
tabindex="@(IsEnabled ? 0 : -1)"
style="@Styles?.ChevronDownButton"
class="bit-mnb-chb @Classes?.ChevronDownButton">
<i style="@Styles?.ChevronDown" class="bit-icon bit-icon--@ChevronDownIcon @Classes?.ChevronDown" />
</button>
}

<div @onclick="CloseCallout" @onclick:stopPropagation
Expand All @@ -39,6 +91,8 @@
<ul role="presentation">
@foreach (TItem item in _items)
{
if (Sticky && item == SelectedItem) continue;

var isEnabled = GetIsEnabled(item);
var template = GetTemplate(item);
<li role="presentation">
Expand All @@ -64,7 +118,7 @@
{
<i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
}
<span style="@Styles?.ItemText" class="bit-mnb-txt @Classes?.ItemText">
<span style="@Styles?.ItemText" class="bit-mnb-btx @Classes?.ItemText">
@GetText(item)
</span>
}
Expand All @@ -73,4 +127,4 @@
}
</ul>
</div>
</button>
</div>
Loading

0 comments on commit 88693a1

Please sign in to comment.