feat: add colorOrNull knob

docs/knobs/overview.mdx

@@ -89,3 +89,4 @@ Widgetbook's UI:
 | int.input           | `int`       |
 | intOrNull.input     | `int?`      |
 | color               | `Color`     |
+| colorOrNull         | `Color?`    |

examples/knobs_example/lib/widgetbook.dart

@@ -98,7 +98,9 @@ class WidgetbookApp extends StatelessWidget {
                       label: 'color',
                       initialValue: const Color(0xFF000000),
                     ),
-                    nullable: null, // N/A
+                    nullable: context.knobs.colorOrNull(
+                      label: 'colorOrNull',
+                    ), // N/A
                   ),
                   KnobEntry<Duration>(
                     name: 'Duration',
@@ -123,7 +125,6 @@ class WidgetbookApp extends StatelessWidget {
                     ),
                     nullable: context.knobs.dateTimeOrNull(
                       label: 'dateTimeOrNull',
-                      initialValue: initialDate,
                       start: DateTime(initialDate.year - 1),
                       end: DateTime(initialDate.year + 1),
                     ),

packages/widgetbook/CHANGELOG.md

@@ -7,6 +7,7 @@
 - **FEAT**: Add light theme support. ([#919](https://github.com/widgetbook/widgetbook/pull/919))
 - **FIX**: Maintain navigation panel state on reload. ([#932](https://github.com/widgetbook/widgetbook/pull/932))
 - **FEAT**: Add spaces to `color` knob. ([#986](https://github.com/widgetbook/widgetbook/pull/986))
+- **FEAT**: Add `colorOrNull` knob. ([#1027](https://github.com/widgetbook/widgetbook/pull/1027))
 - **FEAT**: Add `duration` knob. ([#934](https://github.com/widgetbook/widgetbook/pull/934))
 - **FEAT**: Add `dateTime` knob. ([#940](https://github.com/widgetbook/widgetbook/pull/940))
 - **FEAT**: Add `int` knob. ([#942](https://github.com/widgetbook/widgetbook/pull/942))

packages/widgetbook/lib/src/knobs/builders/knobs_builder.dart

@@ -59,8 +59,7 @@ class KnobsBuilder {
     );
   }
 
-  /// Creates a textfield that can be typed in and optionally hold a
-  /// color value
+  /// Creates a color picker that can be used to select a color.
   Color color({
     required String label,
     required Color initialValue,
@@ -77,6 +76,23 @@ class KnobsBuilder {
     )!;
   }
 
+  /// Creates a color picker that can be used to select a color.
+  Color? colorOrNull({
+    required String label,
+    Color? initialValue,
+    ColorSpace initialColorSpace = ColorSpace.hex,
+    String? description,
+  }) {
+    return onKnobAdded(
+      ColorKnob.nullable(
+        label: label,
+        initialValue: initialValue,
+        initialColorSpace: initialColorSpace,
+        description: description,
+      ),
+    );
+  }
+
   /// Creates a textfield that can be typed in
   String string({
     required String label,

packages/widgetbook/lib/src/knobs/color_knob.dart

@@ -6,15 +6,22 @@ import '../fields/fields.dart';
 import 'knob.dart';
 
 @internal
-class ColorKnob extends Knob<Color> {
+class ColorKnob extends Knob<Color?> {
   ColorKnob({
     required super.label,
     required super.initialValue,
     super.description,
     this.initialColorSpace = ColorSpace.hex,
   });
 
-  ColorSpace initialColorSpace;
+  ColorKnob.nullable({
+    required super.label,
+    required super.initialValue,
+    super.description,
+    this.initialColorSpace = ColorSpace.hex,
+  }) : super(isNullable: true);
+
+  final ColorSpace initialColorSpace;
 
   @override
   List<Field> get fields {
@@ -28,7 +35,7 @@ class ColorKnob extends Knob<Color> {
   }
 
   @override
-  Color valueFromQueryGroup(Map<String, String> group) {
-    return valueOf(label, group)!;
+  Color? valueFromQueryGroup(Map<String, String> group) {
+    return valueOf(label, group);
   }
 }