Fix FThemeData.copyWith(...) (#132)

* Remove global theme params from FThemeData.copyWith * Fix documentation
forus-labs · Aug 1, 2024 · efcc86e · efcc86e
1 parent d690df2
commit efcc86e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 36 deletions.
diff --git a/docs/pages/docs/themes.mdx b/docs/pages/docs/themes.mdx
@@ -20,7 +20,7 @@ Our theming solution is designed to help you get started quickly while offering
 
 <Callout type="info">
     Forui does not manage the theme brightness (light or dark) automatically.
-    You need to specify the theme explicitly in `FTheme()`.
+    You need to specify the theme explicitly in `FTheme(...)`.
 
     ```dart filename="main.dart" {3}
     @override
@@ -75,30 +75,36 @@ A more detailed explanation of each class can be found in the [Class Diagram](#c
 
 ## Customize Themes
 
-It's recommended to use the predefined themes as a starting point and customize them with the `copyWith(...)` method to suit your needs.
+It's recommended to use the predefined themes as a starting point and customize them with the `inhert(...)`[] constructor
+and `copyWith(...)` method to suit your needs.
 
-```dart filename="main.dart" {3-4, 8, 11, 14}
+```dart filename="main.dart" {3-14, 17-23}
 @override
-Widget build(BuildContext context) => FTheme(
-      data: FThemes.zinc.light.copyWith(
-        colorScheme: FThemes.zinc.light.colorScheme.copyWith(
-          primary: const Color(0xFF0D47A1), // dark blue
-          primaryForeground: const Color(0xFFFFFFFF), // white
-        ),
-        typography: FThemes.zinc.light.typography.copyWith(
-          defaultFontFamily: 'Roboto',
-        ).scale(sizeScalar: 0.8),
-        style: FThemes.zinc.light.style.copyWith(
-          borderRadius: BorderRadius.zero,
-        ),
-        cardStyle: FThemes.zinc.light.cardStyle.copyWith(
-          decoration: FThemes.zinc.light.cardStyle.decoration.copyWith(
-            borderRadius: const BorderRadius.all(Radius.circular(8)),
-          ),
+Widget build(BuildContext context) {
+  final theme = FThemeData.inherit(
+    colorScheme: FThemes.zinc.light.colorScheme.copyWith(
+      primary: const Color(0xFF0D47A1), // dark blue
+      primaryForeground: const Color(0xFFFFFFFF), // white
+    ),
+    typography: FThemes.zinc.light.typography.copyWith(
+      defaultFontFamily: 'Roboto',
+    ).scale(sizeScalar: 0.8),
+    style: FThemes.zinc.light.style.copyWith(
+      borderRadius: BorderRadius.zero,
+    ),
+  );
+
+  return FTheme(
+    data: theme.copyWith(
+      cardStyle: theme.cardStyle.copyWith(
+        decoration: theme.cardStyle.decoration.copyWith(
+          borderRadius: const BorderRadius.all(Radius.circular(8)),
         ),
       ),
-      child: const FScaffold(...),
-    );
+    ),
+    child: const FScaffold(...),
+  );
+}
 ```
 
 The example above uses `FThemes.zinc.light` theme as a starting point and customizes the following:

diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -22,6 +22,11 @@
 
 * **Breaking:** Rename `FCalendarSingleRangeController` to `FCalendarRangeController`.
 
+* **Breaking:** Remove `colorScheme`, `typography` and `style` parameters from `FThemeData.copyWith(...)`.
+  The problem was widget-specific styles not being re-created after the removed parameters were updated.
+  This led to unintuitive behavior where the style of a widget was not updated when the `FThemeData` was updated.
+  This should only affect people that customize `FThemeData`. Use the `FThemeData.inherit(...)` constructor instead.
+
 ### Fixes
 * Fix `FCalendar` dates not being toggleable using `Enter` key.
 * Fix `FCalendar` dates sometimes not being navigable using arrow keys.

diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart
@@ -140,24 +140,18 @@ final class FThemeData with Diagnosticable {
   /// Returns a copy of this [FThemeData] with the given properties replaced.
   ///
   /// ```dart
-  /// final foo = FTypography();
-  /// final bar = FTypography();
-  ///
-  /// final theme = FThemeData.inherit(
-  ///   colorScheme: FColorScheme(...),
-  ///   typography: foo,
+  /// final theme = FThemeData(
+  ///   alertStyles: ...,
+  ///   avatarStyle: ...,
   /// );
   ///
-  /// final copy = theme.copyWith(typography: bar);
+  /// final copy = theme.copyWith(avatarStyle: bar);
   ///
-  /// print(theme.colorScheme == copy.colorScheme); // true
-  /// print(copy.typography); // bar
+  /// print(theme.alertStyles == copy.alertStyles); // true
+  /// print(theme.avatarStyle == copy.avatarStyle); // false
   /// ```
   @useResult
   FThemeData copyWith({
-    FColorScheme? colorScheme,
-    FTypography? typography,
-    FStyle? style,
     FAlertStyles? alertStyles,
     FAvatarStyle? avatarStyle,
     FBadgeStyles? badgeStyles,
@@ -177,9 +171,9 @@ final class FThemeData with Diagnosticable {
     FSwitchStyle? switchStyle,
   }) =>
       FThemeData(
-        colorScheme: colorScheme ?? this.colorScheme,
-        typography: typography ?? this.typography,
-        style: style ?? this.style,
+        colorScheme: colorScheme,
+        typography: typography,
+        style: style,
         alertStyles: alertStyles ?? this.alertStyles,
         avatarStyle: avatarStyle ?? this.avatarStyle,
         badgeStyles: badgeStyles ?? this.badgeStyles,