[Fluent 2 iOS] Calendar & DateTimePicker updates

ios/FluentUI.Tests/DatePickerControllerTests.swift

@@ -92,7 +92,16 @@ class DatePickerControllerTests: XCTestCase {
 
 class MockCalendarViewStyleDataSource: CalendarViewStyleDataSource {
     func calendarViewDataSource(_ dataSource: CalendarViewDataSource, textStyleForDayWithStart dayStartDate: Date, end: Date, dayStartComponents: DateComponents, todayComponents: DateComponents) -> CalendarViewDayCellTextStyle {
-        if dayStartComponents.dateIsTodayOrLater(todayDateComponents: todayComponents) {
+        if dayStartComponents.dateIsInCurrentMonth(todayDateComponents: todayComponents) {
+            return .primary
+        } else {
+            return .secondary
+        }
+    }
+
+    func calendarViewDataSource(_ dataSource: CalendarViewDataSource, backgroundStyleForDayWithStart dayStartDate: Date, end: Date, dayStartComponents: DateComponents, todayComponents: DateComponents
+    ) -> CalendarViewDayCellBackgroundStyle {
+        if dayStartComponents.dateIsInCurrentMonth(todayDateComponents: todayComponents) {
             return .primary
         } else {
             return .secondary

ios/FluentUI/Calendar/CalendarView.swift

@@ -61,6 +61,9 @@ class CalendarView: UIView {
     }
 
     @objc private func themeDidChange(_ notification: Notification) {
+        guard let themeView = notification.object as? UIView, self.isDescendant(of: themeView) else {
+            return
+        }
         updateCollectionViewBackgroundColor()
     }
 

ios/FluentUI/Calendar/CalendarViewDataSource.swift

@@ -10,6 +10,9 @@ import UIKit
 protocol CalendarViewStyleDataSource: AnyObject {
     func calendarViewDataSource(_ dataSource: CalendarViewDataSource, textStyleForDayWithStart dayStartDate: Date, end: Date, dayStartComponents: DateComponents, todayComponents: DateComponents) -> CalendarViewDayCellTextStyle
 
+    // Suggestion: Use provided components for performance improvements. Check where it's called to see what's available
+    func calendarViewDataSource(_ dataSource: CalendarViewDataSource, backgroundStyleForDayWithStart dayStartDate: Date, end: Date, dayStartComponents: DateComponents, todayComponents: DateComponents) -> CalendarViewDayCellBackgroundStyle
+
     func calendarViewDataSource(_ dataSource: CalendarViewDataSource, selectionStyleForDayWithStart dayStartDate: Date, end: Date) -> CalendarViewDayCellSelectionStyle
 }
 
@@ -155,6 +158,8 @@ extension CalendarViewDataSource: UICollectionViewDataSource {
         // Calculate style parameters
         let textStyle = styleDataSource.calendarViewDataSource(self, textStyleForDayWithStart: dayStartDate, end: dayEndDate, dayStartComponents: dayStartDateComponents, todayComponents: todayDateComponents)
 
+        let backgroundStyle = styleDataSource.calendarViewDataSource(self, backgroundStyleForDayWithStart: dayStartDate, end: dayEndDate, dayStartComponents: dayStartDateComponents, todayComponents: todayDateComponents)
+
         let selectionStyle = styleDataSource.calendarViewDataSource(self, selectionStyleForDayWithStart: dayStartDate, end: dayEndDate)
 
         let monthLabelIndex = dayStartDateComponents.month! - 1
@@ -172,15 +177,15 @@ extension CalendarViewDataSource: UICollectionViewDataSource {
             guard let dayCell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarViewDayCell.identifier, for: indexPath) as? CalendarViewDayCell else {
                 return UICollectionViewCell()
             }
-            dayCell.setup(textStyle: textStyle, selectionStyle: selectionStyle, dateLabelText: "", indicatorLevel: 0)
+            dayCell.setup(textStyle: textStyle, backgroundStyle: backgroundStyle, selectionStyle: selectionStyle, dateLabelText: "", indicatorLevel: 0)
             return dayCell
         }
 
         if dayStartDate == todayDate {
             guard let dayTodayCell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarViewDayTodayCell.identifier, for: indexPath) as? CalendarViewDayTodayCell else {
                 return UICollectionViewCell()
             }
-            dayTodayCell.setup(textStyle: textStyle, selectionStyle: selectionStyle, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
+            dayTodayCell.setup(textStyle: textStyle, backgroundStyle: backgroundStyle, selectionStyle: selectionStyle, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
             return dayTodayCell
         }
 
@@ -189,21 +194,21 @@ extension CalendarViewDataSource: UICollectionViewDataSource {
                 guard let dayMonthYearCell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarViewDayMonthYearCell.identifier, for: indexPath) as? CalendarViewDayMonthYearCell else {
                     return UICollectionViewCell()
                 }
-                dayMonthYearCell.setup(textStyle: textStyle, selectionStyle: selectionStyle, monthLabelText: monthLabelText, dateLabelText: dateLabelText, yearLabelText: yearLabelText, indicatorLevel: indicatorLevel)
+                dayMonthYearCell.setup(textStyle: textStyle, backgroundStyle: backgroundStyle, selectionStyle: selectionStyle, monthLabelText: monthLabelText, dateLabelText: dateLabelText, yearLabelText: yearLabelText, indicatorLevel: indicatorLevel)
                 return dayMonthYearCell
             } else {
                 guard let dayMonthCell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarViewDayMonthCell.identifier, for: indexPath) as? CalendarViewDayMonthCell else {
                     return UICollectionViewCell()
                 }
-                dayMonthCell.setup(textStyle: textStyle, selectionStyle: selectionStyle, monthLabelText: monthLabelText, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
+                dayMonthCell.setup(textStyle: textStyle, backgroundStyle: backgroundStyle, selectionStyle: selectionStyle, monthLabelText: monthLabelText, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
                 return dayMonthCell
             }
         }
 
         guard let dayCell = collectionView.dequeueReusableCell(withReuseIdentifier: CalendarViewDayCell.identifier, for: indexPath) as? CalendarViewDayCell else {
             return UICollectionViewCell()
         }
-        dayCell.setup(textStyle: textStyle, selectionStyle: selectionStyle, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
+        dayCell.setup(textStyle: textStyle, backgroundStyle: backgroundStyle, selectionStyle: selectionStyle, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
         return dayCell
     }
 

ios/FluentUI/Calendar/Views/CalendarViewDayCell.swift

@@ -12,6 +12,13 @@ enum CalendarViewDayCellTextStyle {
     case secondary
 }
 
+// MARK: - CalendarViewDayCellBackgroundStyle
+
+enum CalendarViewDayCellBackgroundStyle {
+    case primary
+    case secondary
+}
+
 // MARK: - CalendarViewDayCellVisualState
 
 enum CalendarViewDayCellVisualState {
@@ -46,7 +53,7 @@ let calendarViewDayCellVisualStateTransitionDuration: TimeInterval = 0.3
 class CalendarViewDayCell: UICollectionViewCell {
     struct Constants {
         static let borderWidth: CGFloat = 0.5
-        static let dotDiameter: CGFloat = 4.0
+        static let dotDiameter: CGFloat = 6.0
         static let fadedVisualStateAlphaMultiplier: CGFloat = 0.2
     }
 
@@ -67,6 +74,7 @@ class CalendarViewDayCell: UICollectionViewCell {
     }
 
     private(set) var textStyle: CalendarViewDayCellTextStyle = .primary
+    private(set) var backgroundStyle: CalendarViewDayCellBackgroundStyle = .primary
 
     private var visibleDotViewAlpha: CGFloat = 1.0
 
@@ -109,6 +117,9 @@ class CalendarViewDayCell: UICollectionViewCell {
     }
 
     @objc func themeDidChange(_ notification: Notification) {
+        guard let themeView = notification.object as? UIView, self.isDescendant(of: themeView) else {
+            return
+        }
         updateViews()
         dotView.color = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground3])
         dateLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground3])
@@ -119,8 +130,9 @@ class CalendarViewDayCell: UICollectionViewCell {
     }
 
     // Only supports indicator levels from 0...4
-    func setup(textStyle: CalendarViewDayCellTextStyle, selectionStyle: CalendarViewDayCellSelectionStyle, dateLabelText: String, indicatorLevel: Int) {
+    func setup(textStyle: CalendarViewDayCellTextStyle, backgroundStyle: CalendarViewDayCellBackgroundStyle, selectionStyle: CalendarViewDayCellSelectionStyle, dateLabelText: String, indicatorLevel: Int) {
         self.textStyle = textStyle
+        self.backgroundStyle = backgroundStyle
         selectionOverlayView.selectionStyle = selectionStyle
 
         // Assign text content
@@ -191,10 +203,15 @@ class CalendarViewDayCell: UICollectionViewCell {
         case .primary:
             dateLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground1])
         case .secondary:
-            dateLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground3])
+            dateLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground2])
         }
 
-        contentView.backgroundColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.background2])
+        switch backgroundStyle {
+        case .primary:
+            contentView.backgroundColor = UIColor(dynamicColor: DynamicColor(light: fluentTheme.aliasTokens.colors[.background2].light, dark: fluentTheme.aliasTokens.colors[.background2].dark))
+        case .secondary:
+            contentView.backgroundColor = UIColor(dynamicColor: DynamicColor(light: fluentTheme.aliasTokens.colors[.canvasBackground].light, dark: fluentTheme.aliasTokens.colors[.canvasBackground].dark))
+        }
 
         if isHighlighted || isSelected {
             dotView.isHidden = true

ios/FluentUI/Calendar/Views/CalendarViewDayMonthCell.swift

@@ -36,39 +36,47 @@ class CalendarViewDayMonthCell: CalendarViewDayCell {
         super.init(frame: frame)
 
         monthLabel.font = UIFont.fluent(fluentTheme.aliasTokens.typography[.caption2])
-        monthLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground3])
+        updateMonthLabelColor()
         contentView.addSubview(monthLabel)
     }
 
     @objc override func themeDidChange(_ notification: Notification) {
         super.themeDidChange(notification)
-        updateMonthLabelColor(textStyle: textStyle)
+        updateMonthLabelColor()
     }
 
-    private func updateMonthLabelColor(textStyle: CalendarViewDayCellTextStyle) {
-        switch textStyle {
-        case .primary:
-            monthLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground3])
-        case .secondary:
-            monthLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground1])
-        }
+    private func updateMonthLabelColor() {
+        monthLabel.textColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.foreground2])
     }
 
     required init?(coder aDecoder: NSCoder) {
         preconditionFailure("init(coder:) has not been implemented")
     }
 
-    override func setup(textStyle: CalendarViewDayCellTextStyle, selectionStyle: CalendarViewDayCellSelectionStyle, dateLabelText: String, indicatorLevel: Int) {
+    override func setup(textStyle: CalendarViewDayCellTextStyle,
+                        backgroundStyle: CalendarViewDayCellBackgroundStyle,
+                        selectionStyle: CalendarViewDayCellSelectionStyle,
+                        dateLabelText: String,
+                        indicatorLevel: Int) {
         preconditionFailure("Use setup(textStyle, backgroundStyle, selectionStyle, monthLabelText, dateLabelText, indicatorLevel) instead")
     }
 
     // Only supports indicator levels from 0...4
-    func setup(textStyle: CalendarViewDayCellTextStyle, selectionStyle: CalendarViewDayCellSelectionStyle, monthLabelText: String, dateLabelText: String, indicatorLevel: Int) {
-        super.setup(textStyle: textStyle, selectionStyle: selectionStyle, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
-
-        updateMonthLabelColor(textStyle: textStyle)
-
-        monthLabel.text = monthLabelText
+    func setup(textStyle: CalendarViewDayCellTextStyle,
+               backgroundStyle: CalendarViewDayCellBackgroundStyle,
+               selectionStyle: CalendarViewDayCellSelectionStyle,
+               monthLabelText: String,
+               dateLabelText: String,
+               indicatorLevel: Int) {
+        super.setup(textStyle: textStyle,
+                    backgroundStyle: backgroundStyle,
+                    selectionStyle: selectionStyle,
+                    dateLabelText: dateLabelText,
+                    indicatorLevel: indicatorLevel)
+
+        updateMonthLabelColor()
+
+        monthLabel.text = monthLabelText.uppercased()
     }
 
     override func layoutSubviews() {

ios/FluentUI/Calendar/Views/CalendarViewDayMonthYearCell.swift

@@ -44,11 +44,20 @@ class CalendarViewDayMonthYearCell: CalendarViewDayMonthCell {
         preconditionFailure("init(coder:) has not been implemented")
     }
 
-    override func setup(textStyle: CalendarViewDayCellTextStyle, selectionStyle: CalendarViewDayCellSelectionStyle, dateLabelText: String, indicatorLevel: Int) {
+    override func setup(textStyle: CalendarViewDayCellTextStyle,
+                        backgroundStyle: CalendarViewDayCellBackgroundStyle,
+                        selectionStyle: CalendarViewDayCellSelectionStyle,
+                        dateLabelText: String,
+                        indicatorLevel: Int) {
         preconditionFailure("Use setup(textStyle, backgroundStyle, selectionStyle, monthLabelText, dateLabelText, yearLabelText, indicatorLevel) instead")
     }
 
-    override func setup(textStyle: CalendarViewDayCellTextStyle, selectionStyle: CalendarViewDayCellSelectionStyle, monthLabelText: String, dateLabelText: String, indicatorLevel: Int) {
+    override func setup(textStyle: CalendarViewDayCellTextStyle,
+                        backgroundStyle: CalendarViewDayCellBackgroundStyle,
+                        selectionStyle: CalendarViewDayCellSelectionStyle,
+                        monthLabelText: String,
+                        dateLabelText: String,
+                        indicatorLevel: Int) {
         preconditionFailure("Use setup(textStyle, backgroundStyle, selectionStyle, monthLabelText, dateLabelText, yearLabelText, indicatorLevel) instead")
     }
 
@@ -63,12 +72,13 @@ class CalendarViewDayMonthYearCell: CalendarViewDayMonthCell {
 
     // Only supports indicator levels from 0...4
     func setup(textStyle: CalendarViewDayCellTextStyle,
+               backgroundStyle: CalendarViewDayCellBackgroundStyle,
                selectionStyle: CalendarViewDayCellSelectionStyle,
                monthLabelText: String,
                dateLabelText: String,
                yearLabelText: String,
                indicatorLevel: Int) {
-        super.setup(textStyle: textStyle, selectionStyle: selectionStyle, monthLabelText: monthLabelText, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
+        super.setup(textStyle: textStyle, backgroundStyle: backgroundStyle, selectionStyle: selectionStyle, monthLabelText: monthLabelText, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
 
         updateYearLabelColor(textStyle: textStyle)
 

ios/FluentUI/Calendar/Views/CalendarViewDayTodayCell.swift

@@ -25,8 +25,16 @@ class CalendarViewDayTodayCell: CalendarViewDayCell {
     }
 
     // Only supports indicator levels from 0...4
-    override func setup(textStyle: CalendarViewDayCellTextStyle, selectionStyle: CalendarViewDayCellSelectionStyle, dateLabelText: String, indicatorLevel: Int) {
-        super.setup(textStyle: textStyle, selectionStyle: selectionStyle, dateLabelText: dateLabelText, indicatorLevel: indicatorLevel)
+    override func setup(textStyle: CalendarViewDayCellTextStyle,
+                        backgroundStyle: CalendarViewDayCellBackgroundStyle,
+                        selectionStyle: CalendarViewDayCellSelectionStyle,
+                        dateLabelText: String,
+                        indicatorLevel: Int) {
+        super.setup(textStyle: textStyle,
+                    backgroundStyle: backgroundStyle,
+                    selectionStyle: selectionStyle,
+                    dateLabelText: dateLabelText,
+                    indicatorLevel: indicatorLevel)
 
         configureBackgroundColor()
         configureFontColor()
@@ -39,7 +47,7 @@ class CalendarViewDayTodayCell: CalendarViewDayCell {
     }
 
     private func configureBackgroundColor() {
-        contentView.backgroundColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.background2])
+        contentView.backgroundColor = UIColor(dynamicColor: DynamicColor(light: fluentTheme.aliasTokens.colors[.background2].light, dark: fluentTheme.aliasTokens.colors[.background2].dark))
     }
 
     private func configureFontColor() {

ios/FluentUI/Calendar/Views/CalendarViewWeekdayHeadingView.swift

@@ -37,11 +37,14 @@ class CalendarViewWeekdayHeadingView: UIView {
     }
 
     @objc private func themeDidChange(_ notification: Notification) {
+        guard let themeView = notification.object as? UIView, self.isDescendant(of: themeView) else {
+            return
+        }
         updateBackgroundColor()
     }
 
     private func updateBackgroundColor() {
-        backgroundColor = UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.background2])
+        backgroundColor = UIColor(dynamicColor: DynamicColor(light: fluentTheme.aliasTokens.colors[.background2].light, dark: fluentTheme.aliasTokens.colors[.background2].dark))
     }
 
     required init?(coder aDecoder: NSCoder) {

ios/FluentUI/Core/FluentUIFramework.swift

@@ -70,7 +70,7 @@ public class FluentUIFramework: NSObject {
             case .normal:
                 return UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.background3])
             case .dateTimePicker:
-                return UIColor(dynamicColor: fluentTheme.aliasTokens.colors[.background2])
+                return UIColor(dynamicColor: DynamicColor(light: fluentTheme.aliasTokens.colors[.background2].light, dark: fluentTheme.aliasTokens.colors[.background2].dark))
             }
         }
     }

ios/FluentUI/Date Time Pickers/Date Picker/DatePickerController.swift

@@ -149,6 +149,9 @@ class DatePickerController: UIViewController, GenericDateTimePicker {
     }
 
     @objc private func themeDidChange(_ notification: Notification) {
+        guard let themeView = notification.object as? UIView, view.isDescendant(of: themeView) else {
+            return
+        }
         updateBackgroundColor()
         updateBarButtonColors()
     }
@@ -186,7 +189,7 @@ class DatePickerController: UIViewController, GenericDateTimePicker {
     }
 
     private func updateBackgroundColor() {
-        view.backgroundColor = UIColor(dynamicColor: view.fluentTheme.aliasTokens.colors[.background2])
+        view.backgroundColor = UIColor(dynamicColor: DynamicColor(light: view.fluentTheme.aliasTokens.colors[.background2].light, dark: view.fluentTheme.aliasTokens.colors[.background2].dark))
     }
 
     override func viewWillAppear(_ animated: Bool) {
@@ -498,7 +501,17 @@ extension DatePickerController: CalendarViewLayoutDelegate {
 extension DatePickerController: CalendarViewStyleDataSource {
     func calendarViewDataSource(_ dataSource: CalendarViewDataSource, textStyleForDayWithStart dayStartDate: Date, end: Date, dayStartComponents: DateComponents, todayComponents: DateComponents) -> CalendarViewDayCellTextStyle {
 
-        if dayStartComponents.dateIsTodayOrLater(todayDateComponents: todayComponents) {
+        if dayStartComponents.dateIsInCurrentMonth(todayDateComponents: todayComponents) {
+            return .primary
+        } else {
+            return .secondary
+        }
+    }
+
+    func calendarViewDataSource(_ dataSource: CalendarViewDataSource, backgroundStyleForDayWithStart dayStartDate: Date, end: Date, dayStartComponents: DateComponents, todayComponents: DateComponents
+    ) -> CalendarViewDayCellBackgroundStyle {
+
+        if dayStartComponents.dateIsInCurrentMonth(todayDateComponents: todayComponents) {
             return .primary
         } else {
             return .secondary