From 2bbe74c49947d2f0c1b88aab625449cfb5474582 Mon Sep 17 00:00:00 2001
From: Youssef Raafat <YoussefRaafatNasry@gmail.com>
Date: Fri, 3 Nov 2023 13:09:40 +0100
Subject: [PATCH] feat: add `colorOrNull` knob

---
 docs/knobs/overview.mdx                       |  1 +
 examples/knobs_example/lib/widgetbook.dart    |  5 +++--
 packages/widgetbook/CHANGELOG.md              |  1 +
 .../lib/src/knobs/builders/knobs_builder.dart | 20 +++++++++++++++++--
 .../widgetbook/lib/src/knobs/color_knob.dart  | 15 ++++++++++----
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/docs/knobs/overview.mdx b/docs/knobs/overview.mdx
index ee85f00f4..95cbbd2f4 100644
--- a/docs/knobs/overview.mdx
+++ b/docs/knobs/overview.mdx
@@ -89,3 +89,4 @@ Widgetbook's UI:
 | int.input           | `int`       |
 | intOrNull.input     | `int?`      |
 | color               | `Color`     |
+| colorOrNull         | `Color?`    |
diff --git a/examples/knobs_example/lib/widgetbook.dart b/examples/knobs_example/lib/widgetbook.dart
index 18aa1755c..b13e0134b 100644
--- a/examples/knobs_example/lib/widgetbook.dart
+++ b/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),
                     ),
diff --git a/packages/widgetbook/CHANGELOG.md b/packages/widgetbook/CHANGELOG.md
index cd1f2569f..0376b8fb9 100644
--- a/packages/widgetbook/CHANGELOG.md
+++ b/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))
diff --git a/packages/widgetbook/lib/src/knobs/builders/knobs_builder.dart b/packages/widgetbook/lib/src/knobs/builders/knobs_builder.dart
index e1483b0f0..814f0677b 100644
--- a/packages/widgetbook/lib/src/knobs/builders/knobs_builder.dart
+++ b/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,
diff --git a/packages/widgetbook/lib/src/knobs/color_knob.dart b/packages/widgetbook/lib/src/knobs/color_knob.dart
index 6e1e9ae6b..251ffd1fd 100644
--- a/packages/widgetbook/lib/src/knobs/color_knob.dart
+++ b/packages/widgetbook/lib/src/knobs/color_knob.dart
@@ -6,7 +6,7 @@ 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,
@@ -14,7 +14,14 @@ class ColorKnob extends Knob<Color> {
     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);
   }
 }