Add badges

Material.Blazor.Website/Pages/Badge.razor

@@ -0,0 +1,91 @@
+@page "/badge"
+
+@inject IMBToastService ToastService
+
+
+
+<DemonstrationPage ComponentName="Badge"
+                   DemoComponent="@this"
+                   Title="Badge Demonstration">
+    <Description>
+        <p>
+            Shows badges set in html elements and embedded in buttons, icon buttons and icon toggle buttons.
+        </p>
+    </Description>
+
+    <Controls>
+        <p><MBSwitch @bind-Value="@Exited" Label="Applies the 'mb-badge--exited' class" /></p>
+    </Controls>
+
+    <PageContent>
+        <div class="mdc-layout-grid__cell--span-4">
+            <MBCard AutoStyled="true">
+                <Primary>
+                    <h2 class="mb-card__title mdc-typography mdc-typography--headline6">
+                        Badges in HTML elements
+                    </h2>
+
+                    <p class="mdc-typography--body1">
+                        A badge must be the first element inside its parent div. The parent div must have both border and padding set to zero width.
+                    </p>
+
+                    <div style="height: 60px; width: 200px; background: var(--mb-color-blue-200); margin-top: 12px;">
+                        <MBBadge BadgeStyle="MBBadgeStyle.ValueBearing" Value="99+" Exited="@Exited" />
+                        <p class="mdc-typography--body1" style="margin-left: 12px; line-height: 60px;">Value Bearing badge</p>
+                    </div>
+
+                    <div style="height: 60px; width: 200px; background: var(--mb-color-blue-200); margin-top: 12px;">
+                        <MBBadge BadgeStyle="MBBadgeStyle.BlankFullSized" Exited="@Exited" />
+                        <p class="mdc-typography--body1" style="margin-left: 12px; line-height: 60px;">Blank Full Size badge</p>
+                    </div>
+
+                    <div style="height: 60px; width: 200px; background: var(--mb-color-blue-200); margin-top: 12px;">
+                         <MBBadge BadgeStyle="MBBadgeStyle.Dot" Exited="@Exited" />
+                         <p class="mdc-typography--body1" style="margin-left: 12px; line-height: 60px;">Dot badge</p>
+                    </div>
+                </Primary>
+            </MBCard>
+        </div>
+
+
+        <div class="mdc-layout-grid__cell--span-4">
+            <MBCard AutoStyled="true">
+                <Primary>
+                    <h2 class="mb-card__title mdc-typography mdc-typography--headline6">
+                        Button badges
+                    </h2>
+
+                    <p>
+                        <MBButton ButtonStyle="@MBButtonStyle.Outlined"
+                                  Label="Outlined Button"
+                                  HasBadge="true"
+                                  BadgeValue="!"
+                                  BadgeExited="@Exited" />
+                    </p>
+
+                    <p>
+                        <MBIconButton Icon="fa-dog"
+                                      IconFoundry="@MBIconHelper.FAFoundry()"
+                                      HasBadge="true"
+                                      BadgeValue="!"
+                                      BadgeExited="@Exited" />
+                    </p>
+
+                    <p>
+                        <MBIconButtonToggle IconOff="mood"
+                                            IconOn="sentiment_dissatisfied"
+                                            HasBadge="true"
+                                            BadgeValue="!"
+                                            BadgeExited="@Exited" />
+                    </p>
+                </Primary>
+            </MBCard>
+        </div>
+    </PageContent>
+</DemonstrationPage>
+
+
+
+@code {
+    private bool Exited { get; set; } = false;  
+}

Material.Blazor.Website/Shared/MainLayout.razor

@@ -11,6 +11,7 @@
         <MBListItem LeadingIcon="anchor" Label="Anchor" @onclick="@(() => ListItemClickHandler("anchor"))" />
         <MBListItem LeadingIcon="short_text" Label="Autocomplete Text Field" @onclick="@(() => ListItemClickHandler("autocompletetextfield"))" />
         <MBListItem LeadingIcon="view_sidebar" Label="Blades" @onclick="@(() => ListItemClickHandler("bladeset"))" />
+        <MBListItem LeadingIcon="error" Label="Badge" @onclick="@(() => ListItemClickHandler("badge"))" />
         <MBListItem LeadingIcon="touch_app" Label="Button" @onclick="@(() => ListItemClickHandler("button"))" />
         <MBListItem LeadingIcon="dashboard" Label="Card" @onclick="@(() => ListItemClickHandler("card"))" />
         <MBListItem LeadingIcon="web" Label="Cascading Defaults" @onclick="@(() => ListItemClickHandler("cascadingdefaults"))" />

Material.Blazor.Website/Styles/dark-square-theme.scss

@@ -49,6 +49,8 @@ $selected-row-color-hover: darken($selected-row-color, 4%);
 $alpha: 0.4;
 
 :root {
+    --mb-badge-background-color: var(--mb-color-red-200) !important;
+    --mb-badge-color: var(--mb-color-on-red-200) !important;
     --mb-grid-border-color: #{$border-color} !important;
     --mb-grid-header-color: #{$header-color} !important;
     --mb-grid-group-row-color: rgba(#{red($group-row-color)}, #{green($group-row-color)}, #{blue($group-row-color)}, #{$alpha}) !important;
@@ -61,15 +63,6 @@ $alpha: 0.4;
     --mb-grid-selected-row-color-hover: rgba(#{red($selected-row-color-hover)}, #{green($selected-row-color-hover)}, #{blue($selected-row-color-hover)}, #{$alpha}) !important;
 }
 
-/*:root {
-    --mb-grid-border-color: var(--mb-color-blue-grey-500) !important;
-    --mb-grid-header-color: var(--mb-color-blue-grey-900) !important;
-    --mb-grid-group-row-color: var(--mb-color-blue-900) !important;
-    --mb-grid-odd-row-color: var(--mb-color-yellow-900) !important;
-    --mb-grid-even-row-color: var(--mb-color-orange-900) !important;
-    --mb-grid-selected-row-color: var(--mb-color-teal-900) !important;
-}*/
-
 .mdc-top-app-bar {
     @include top-app-bar.fill-color(#37474f);
     @include top-app-bar.ink-color(white);

Material.Blazor/Components/Badge/MBBadge.md

@@ -0,0 +1,22 @@
+---
+uid: C.MBBadge
+title: MBBadge
+---
+# MBBadge
+
+## Summary
+
+A badge that can either be places manually within a `<div>` or added via properties to an MBButton, MBIconButton or MBIconButtonToggle. Has the following properties:
+
+## Details
+
+- `ValueBearing`, `BlankFullSized` or `Dot` styles;
+- A string value to be displayed when the style is `ValueBearing`; and
+- An `Exited` property that closes the badge down with an animation (borrowed from FABs).
+
+&nbsp;
+
+&nbsp;
+
+[![Components](https://img.shields.io/static/v1?label=Components&message=Plus&color=red)](xref:A.PlusComponents)
+[![Docs](https://img.shields.io/static/v1?label=API%20Documentation&message=MBBadge&color=brightgreen)](xref:Material.Blazor.MBBadge)

Material.Blazor/Components/Badge/MBBadge.razor

@@ -0,0 +1,12 @@
+@namespace Material.Blazor
+@inherits ComponentFoundation
+
+
+<span class="mb-badge @ActiveConditionalClasses @(@class)"
+        style="@style">
+
+    @if (BadgeStyle == MBBadgeStyle.ValueBearing)
+    {
+        <span class="mb-badge-value mdc-typography--caption">@Value</span>
+    }
+</span>

Material.Blazor/Components/Badge/MBBadge.razor.cs

@@ -0,0 +1,50 @@
+using Material.Blazor.Internal;
+using Microsoft.AspNetCore.Components;
+using System.Threading.Tasks;
+
+namespace Material.Blazor
+{
+    /// <summary>
+    /// A plus component badge placed at the top right of the containing div, overlapping the corner, but inside margin and padding..
+    /// </summary>
+    public partial class MBBadge : ComponentFoundation
+    {
+        /// <summary>
+        /// The badge's style - see <see cref="MBBadgeStyle"/>, defaults to <see cref="MBBadgeStyle.ValueBearing"/>.
+        /// </summary>
+        [Parameter] public MBBadgeStyle BadgeStyle { get; set; } = MBBadgeStyle.ValueBearing;
+
+
+        /// <summary>
+        /// The button's density.
+        /// </summary>
+        [Parameter] public string Value { get; set; }
+
+
+        /// <summary>
+        /// When true collapses the badge.
+        /// </summary>
+        [Parameter] public bool Exited { get; set; }
+
+
+        // Would like to use <inheritdoc/> however DocFX cannot resolve to references outside Material.Blazor
+        protected override async Task OnParametersSetAsync()
+        {
+            await base.OnParametersSetAsync();
+
+            ConditionalCssClasses
+                .AddIf("mb-badge--dot", () => BadgeStyle == MBBadgeStyle.Dot)
+                .AddIf("mb-badge--exited", () => Exited);
+        }
+
+
+        /// <summary>
+        /// Sets the exited value and calls SHC.
+        /// </summary>
+        internal void SetExited(bool exited)
+        {
+            Exited = exited;
+            _ = InvokeAsync(StateHasChanged);
+        }
+    }
+}

Material.Blazor/Components/Badge/MBBadge.scss

@@ -0,0 +1,71 @@
+@use "sass:math";
+@use '@material/theme/color-palette';
+
+$background-color: color-palette.$red-500;
+$color: color-palette.$blue-grey-100;
+
+$regular-size: 20px;
+$regular-border-radius: math.div($regular-size, 2);
+$regular-offset: math.div($regular-size, 2);
+
+$dot-size: 10px;
+$dot-border-radius: math.div($dot-size, 2);
+$dot-offset: math.div($dot-size, 2);
+
+$icon-button-offset: 4px;
+
+:root {
+    --mb-badge-background-color: var(--mb-color-red-700);
+    --mb-badge-color: var(--mb-color-on-red-700);
+}
+
+.mb-badge-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.mdc-icon-button {
+    .mb-badge-container {
+        top: $icon-button-offset;
+        left: -$icon-button-offset;
+    }
+}
+
+.mb-badge {
+    display: inline-flex;
+    position: relative;
+    float: right;
+    align-items: center;
+    justify-content: center;
+    top: -$regular-offset;
+    right: -$regular-offset;
+    min-width: $regular-size;
+    height: $regular-size;
+    border-radius: $regular-border-radius;
+    border: none;
+    background-color: var(--mb-badge-background-color);
+    color: var(--mb-badge-color);
+    transition: 135ms 0ms cubic-bezier(0.4, 0, 1, 1);
+    z-index: 2;
+
+    &.mb-badge--dot {
+        top: -$dot-offset;
+        right: -$dot-offset;
+        min-width: $dot-size;
+        height: $dot-size;
+        border-radius: $dot-border-radius;
+    }
+
+    &.mb-badge--exited {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+        opacity: 0;
+    }
+}
+
+.mb-badge-value {
+    padding: 0px 6px;
+}

Material.Blazor/Components/Button/MBButton.md

@@ -13,7 +13,8 @@ A [Material Button](https://github.com/material-components/material-components-w
 - Text, Outlined, Filled or Raised styles;
 - Leading and trailing icons;
 - Icon foundry specification;
-- A string code to return as a dialog action; and
+- A string code to return as a dialog action;
+- Parameters for adding and controlling badges; and
 - Applies [density subsystem](xref:A.Density).
 
  

Material.Blazor/Components/Button/MBButton.razor

@@ -29,5 +29,14 @@
                     IconFoundry="@IconFoundry"
                     IconName="@TrailingIcon" />
         }
+
+        @if (HasBadge)
+        {
+            <span class="mb-badge-container">
+                <MBBadge BadgeStyle="@BadgeStyle"
+                         Value="@BadgeValue"
+                         Exited="@BadgeExited" />
+            </span>
+        }
     </button>
 </MBTouchTargetWrapper>

Material.Blazor/Components/Button/MBButton.razor.cs

@@ -70,6 +70,31 @@ public partial class MBButton : ComponentFoundation
         /// A string value to return from an <see cref="MBDialog"/> when this button is pressed.
         /// </summary>
         [Parameter] public string DialogAction { get; set; }
+
+
+        /// <summary>
+        /// Determines whether the button has a badge - defaults to false.
+        /// </summary>
+        [Parameter] public bool HasBadge { get; set; }
+
+
+        /// <summary>
+        /// The badge's style - see <see cref="MBBadgeStyle"/>, defaults to <see cref="MBBadgeStyle.ValueBearing"/>.
+        /// </summary>
+        [Parameter] public MBBadgeStyle BadgeStyle { get; set; } = MBBadgeStyle.ValueBearing;
+
+
+        /// <summary>
+        /// The button's density.
+        /// </summary>
+        [Parameter] public string BadgeValue { get; set; }
+
+
+        /// <summary>
+        /// When true collapses the badge.
+        /// </summary>
+        [Parameter] public bool BadgeExited { get; set; }
+
 #nullable restore annotations
 
         private bool AppliedTouchTarget => CascadingDefaults.AppliedTouchTarget(TouchTarget);

Material.Blazor/Components/FloatingActionButton/MBFloatingActionButton.razor.cs

@@ -54,7 +54,7 @@ public partial class MBFloatingActionButton : ComponentFoundation
 
         private bool exited;
         /// <summary>
-        /// Leading icon if false, otherwise trailine, and only applied to the extended variant.
+        /// When true collapses the FAB.
         /// </summary>
         [Parameter]
         public bool Exited

Material.Blazor/Components/IconButton/MBIconButton.md

@@ -7,6 +7,7 @@ title: MBIconButton
 ## Summary
 
 A [Material Icon Button](https://github.com/material-components/material-components-web/tree/v9.0.0/packages/mdc-icon-button#icon-buttons) that accepts an icon and an optional icon foundry. Applies [density subsystem](xref:A.Density).
+Has parameters for adding and controlling badges.
 
  
 

Material.Blazor/Components/IconButton/MBIconButton.razor

@@ -12,5 +12,14 @@
         <div class="mdc-icon-button__ripple"></div>
         <MBIcon IconFoundry="@IconFoundry"
                 IconName="@Icon" />
+
+        @if (HasBadge)
+        {
+            <span class="mb-badge-container">
+                <MBBadge BadgeStyle="@BadgeStyle"
+                         Value="@BadgeValue"
+                         Exited="@BadgeExited" />
+            </span>
+        }
     </button>
 </MBTouchTargetWrapper>