Apply BitDatePicker improvements (#12861)

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss

@@ -1,5 +1,16 @@
 @import "../../../Styles/functions.scss";
 @import "../../../Styles/media-queries.scss";
+@import "../../../Styles/color-role-maps.scss";
+
+// The default size, declared as a mixin so both the root element and the callout - which is rendered
+// outside of it and therefore inherits nothing from it - can fall back to it.
+@mixin dtp-size-medium {
+    --bit-dtp-inp-h: #{spacing(4)};
+    --bit-dtp-inp-fs: #{spacing(1.75)};
+    --bit-dtp-cell-size: #{spacing(3.5)};
+    --bit-dtp-cell-fs: #{spacing(1.5)};
+    --bit-dtp-lbl-fs: #{spacing(1.75)};
+}
 
 .bit-dtp {
     margin: 0;
@@ -11,6 +22,8 @@
     font-size: spacing(2.25);
     font-family: $tg-font-family;
 
+    @include dtp-size-medium;
+
     &.bit-dis {
         .bit-dtp-lbl {
             color: $clr-fg-dis;
@@ -84,7 +97,7 @@
     font-weight: 600;
     box-sizing: border-box;
     padding: spacing(0.5) 0;
-    font-size: spacing(1.75);
+    font-size: var(--bit-dtp-lbl-fs);
     overflow-wrap: break-word;
     color: $clr-fg-pri;
 }
@@ -99,7 +112,7 @@
     gap: spacing(1);
     cursor: pointer;
     box-shadow: none;
-    height: spacing(4);
+    height: var(--bit-dtp-inp-h);
     position: relative;
     align-items: center;
     padding: 0 spacing(1);
@@ -155,7 +168,7 @@
     border-radius: 0;
     box-sizing: border-box;
     text-overflow: ellipsis;
-    font-size: spacing(1.75);
+    font-size: var(--bit-dtp-inp-fs);
     background: none transparent;
     color: $clr-fg-pri;
     font-family: $tg-font-family;
@@ -197,6 +210,8 @@
     border-radius: $shp-border-radius;
     animation-name: bit-fade-show, bit-slide-down;
     animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
+
+    @include dtp-size-medium;
 }
 
 .bit-dtp-cac {
@@ -238,15 +253,9 @@
     flex-flow: column nowrap;
 }
 
-.bit-dtp-dgd {
-    border-spacing: 0;
-    position: relative;
-    text-align: center;
-    font-size: inherit;
-    table-layout: fixed;
-    margin-top: spacing(0.5);
-    border-collapse: collapse;
-    margin-bottom: spacing(1.25);
+.bit-dtp-grd {
+    display: flex;
+    flex-flow: column nowrap;
 }
 
 .bit-dtp-dgh,
@@ -267,8 +276,8 @@
     color: $clr-fg-pri;
     position: relative;
     text-align: center;
-    font-size: spacing(1.5);
-    line-height: spacing(3.5);
+    font-size: var(--bit-dtp-cell-fs);
+    line-height: var(--bit-dtp-cell-size);
     animation-fill-mode: both;
     // A step shorter than the calendar's own entry above, so the days still resolve inside the
     // container rather than with it.
@@ -284,13 +293,13 @@
     cursor: pointer;
     overflow: visible;
     position: relative;
-    width: spacing(3.5);
     align-items: center;
-    height: spacing(3.5);
     outline: transparent;
     font-weight: inherit;
     box-sizing: border-box;
-    font-size: spacing(1.5);
+    width: var(--bit-dtp-cell-size);
+    height: var(--bit-dtp-cell-size);
+    font-size: var(--bit-dtp-cell-fs);
     line-height: spacing(3);
     justify-content: center;
     background-color: transparent;
@@ -312,6 +321,25 @@
         background-color: transparent;
         color: $clr-fg-dis;
     }
+
+    // The day grid moves the focus with the arrow keys, so the focused day has to be visible as such -
+    // and above its neighbors, whose backgrounds would otherwise clip the ring.
+    &:focus-visible {
+        z-index: 1;
+        outline: $shp-border-width $shp-border-style $clr-brd-pri;
+    }
+}
+
+// The placeholder of a day of an adjacent month while ShowOutsideDays is off: it keeps the columns of
+// the week aligned without rendering a day the user cannot pick.
+.bit-dtp-dbe {
+    width: var(--bit-dtp-cell-size);
+    height: var(--bit-dtp-cell-size);
+}
+
+.bit-dtp-dhl {
+    font-weight: 600;
+    background-color: $clr-bg-ter;
 }
 
 .bit-dtp-dbs {
@@ -333,28 +361,28 @@
 .bit-dtp-dtd {
     font-weight: 600;
     border-radius: 50%;
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtp-clr-txt);
+    background-color: var(--bit-dtp-clr);
 
     @media(hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtp-clr-hover);
         }
     }
 
     &:active {
-        background-color: $clr-pri-active;
+        background-color: var(--bit-dtp-clr-active);
     }
 }
 
 .bit-dtp-wnm {
     display: flex;
     font-weight: 400;
-    width: spacing(3.5);
     align-items: center;
-    height: spacing(3.5);
     box-sizing: border-box;
-    font-size: spacing(1.5);
+    width: var(--bit-dtp-cell-size);
+    height: var(--bit-dtp-cell-size);
+    font-size: var(--bit-dtp-cell-fs);
     justify-content: center;
     padding: spacing(0.375) 0 0 0;
     color: $clr-fg-sec;
@@ -365,7 +393,7 @@
 .bit-dtp-pkh {
     width: 100%;
     position: relative;
-    height: spacing(3.5);
+    height: var(--bit-dtp-cell-size);
     display: inline-flex;
     line-height: spacing(5.5);
 }
@@ -432,13 +460,13 @@
     overflow: visible;
     position: relative;
     text-align: center;
-    width: spacing(3.5);
-    height: spacing(3.5);
     outline: transparent;
-    min-width: spacing(3.5);
-    font-size: spacing(1.5);
-    min-height: spacing(3.5);
-    line-height: spacing(3.5);
+    width: var(--bit-dtp-cell-size);
+    height: var(--bit-dtp-cell-size);
+    min-width: var(--bit-dtp-cell-size);
+    min-height: var(--bit-dtp-cell-size);
+    line-height: var(--bit-dtp-cell-size);
+    font-size: var(--bit-dtp-cell-fs);
     background-color: transparent;
     color: $clr-fg-pri;
     border-radius: $shp-border-radius;
@@ -593,13 +621,13 @@
 }
 
 .bit-dtp-pcm {
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtp-clr-txt);
+    background-color: var(--bit-dtp-clr);
 
     @media (hover: hover) {
         &:hover {
-            color: $clr-sec-hover;
-            background-color: $clr-pri-hover;
+            color: var(--bit-dtp-clr-txt);
+            background-color: var(--bit-dtp-clr-hover);
         }
     }
 }
@@ -683,21 +711,21 @@
 }
 
 .bit-dtp-bns {
-    color: $clr-pri-text;
-    background-color: $clr-pri;
+    color: var(--bit-dtp-clr-txt);
+    background-color: var(--bit-dtp-clr);
 
     &:disabled {
         background-color: $clr-bg-dis;
     }
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-pri-hover;
+            background-color: var(--bit-dtp-clr-hover);
         }
     }
 
     &:active {
-        background-color: $clr-pri-active;
+        background-color: var(--bit-dtp-clr-active);
     }
 }
 
@@ -805,6 +833,7 @@
         .bit-dtp-gtn,
         .bit-dtp-wlb,
         .bit-dtp-dbt,
+        .bit-dtp-dbe,
         .bit-dtp-pkb,
         .bit-dtp-wnm {
             width: 100%;
@@ -857,3 +886,37 @@
         }
     }
 }
+
+
+// Role classes are generated from the shared $bit-color-roles map (see color-role-maps.scss).
+// They are applied to the root element and to the callout alike, since the callout is rendered
+// outside of the root and inherits nothing from it.
+@each $role, $tokens in $bit-color-roles {
+    .bit-dtp-#{$role} {
+        --bit-dtp-clr: #{role($tokens, main)};
+        --bit-dtp-clr-txt: #{role($tokens, on)};
+        --bit-dtp-clr-hover: #{role($tokens, hover)};
+        --bit-dtp-clr-active: #{role($tokens, active)};
+    }
+}
+
+
+.bit-dtp-sm {
+    --bit-dtp-inp-h: #{spacing(3.25)};
+    --bit-dtp-inp-fs: #{spacing(1.5)};
+    --bit-dtp-cell-size: #{spacing(3)};
+    --bit-dtp-cell-fs: #{spacing(1.375)};
+    --bit-dtp-lbl-fs: #{spacing(1.5)};
+}
+
+.bit-dtp-md {
+    @include dtp-size-medium;
+}
+
+.bit-dtp-lg {
+    --bit-dtp-inp-h: #{spacing(5)};
+    --bit-dtp-inp-fs: #{spacing(2)};
+    --bit-dtp-cell-size: #{spacing(4.25)};
+    --bit-dtp-cell-fs: #{spacing(1.75)};
+    --bit-dtp-lbl-fs: #{spacing(2)};
+}

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePickerClassStyles.cs

@@ -137,6 +137,11 @@ public class BitDatePickerClassStyles
     /// </summary>
     public string? NextMonthNavIcon { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the grid of the days of the BitDatePicker.
+    /// </summary>
+    public string? DaysGrid { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the header row of the days of the BitDatePicker.
     /// </summary>
@@ -147,6 +152,11 @@ public class BitDatePickerClassStyles
     /// </summary>
     public string? WeekNumbersHeader { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the header cells of the day names of the BitDatePicker.
+    /// </summary>
+    public string? DayNameHeader { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for each row of the days of the BitDatePicker.
     /// </summary>
@@ -172,6 +182,11 @@ public class BitDatePickerClassStyles
     /// </summary>
     public string? SelectedDayButton { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the highlighted day buttons of the BitDatePicker.
+    /// </summary>
+    public string? HighlightedDayButton { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the time-picker's input container of the BitDatePicker.
     /// </summary>

src/BlazorUI/Bit.BlazorUI/Scripts/Calendars.ts

@@ -4,6 +4,10 @@ namespace BitBlazorUI {
 
         private static _navKeys = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown'];
 
+        // The day buttons of every calendar grid that navigates with the keyboard: the standalone
+        // BitCalendar and the day picker inside the callout of a BitDatePicker.
+        private static _dayButtons = '.bit-cal-dbt, .bit-dtp-dbt';
+
         // Attaches a keydown listener that only prevents the default behavior (page scrolling) of the
         // navigation keys pressed on the day buttons. The actual keyboard logic runs in the Blazor
         // keydown handlers, which cannot conditionally preventDefault per key.
@@ -17,7 +21,7 @@ namespace BitBlazorUI {
                 if (Calendars._navKeys.indexOf(e.key) === -1) return;
 
                 const target = e.target as HTMLElement | null;
-                if (!target || !target.closest('.bit-cal-dbt')) return;
+                if (!target || !target.closest(Calendars._dayButtons)) return;
 
                 e.preventDefault();
             };