Replace YaruColorPickerButton with YaruOptionButton.color()

example/lib/example_page_items.dart

@@ -5,17 +5,16 @@ import 'package:yaru_widgets_example/pages/banner_page.dart';
 import 'package:yaru_widgets_example/pages/carousel_page.dart';
 import 'package:yaru_widgets_example/pages/check_box_row_page.dart';
 import 'package:yaru_widgets_example/pages/color_disk_page.dart';
-import 'package:yaru_widgets_example/pages/color_picker_page.dart';
 import 'package:yaru_widgets_example/pages/draggable_page.dart';
 import 'package:yaru_widgets_example/pages/extra_option_row_page.dart';
+import 'package:yaru_widgets_example/pages/option_button_page.dart';
 import 'package:yaru_widgets_example/pages/round_toggle_button_page.dart';
 import 'package:yaru_widgets_example/pages/section_page.dart';
 import 'package:yaru_widgets_example/pages/selectable_container_page.dart';
 import 'package:yaru_widgets_example/pages/slider_page.dart';
 import 'package:yaru_widgets_example/pages/switch_row_page.dart';
 import 'package:yaru_widgets_example/pages/tabbed_page_page.dart';
 import 'package:yaru_widgets_example/pages/toggle_buttons_row_page.dart';
-import 'package:yaru_widgets_example/widgets/option_button_list.dart';
 import 'package:yaru_widgets_example/widgets/row_list.dart';
 
 const _lorem =
@@ -72,7 +71,7 @@ final examplePageItems = <YaruPageItem>[
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruOptionButton'),
     iconData: YaruIcons.settings,
-    builder: (_) => YaruPage(children: [OptionButtonList()]),
+    builder: (_) => YaruPage(children: [OptionButtonPage()]),
   ),
   YaruPageItem(
     titleBuilder: (context) => YaruPageItemTitle.text('YaruSearchAppBar'),
@@ -138,10 +137,6 @@ final examplePageItems = <YaruPageItem>[
       titleBuilder: (context) => YaruPageItemTitle.text('YaruTabbedPage'),
       builder: (_) => TabbedPagePage(),
       iconData: YaruIcons.tab_new),
-  YaruPageItem(
-      titleBuilder: (context) => YaruPageItemTitle.text('Color picker button'),
-      builder: (_) => ColorPickerPage(),
-      iconData: YaruIcons.color_select),
   YaruPageItem(
       titleBuilder: (context) => YaruPageItemTitle.text('YaruCarousel'),
       builder: (_) => CarouselPage(),

example/lib/pages/option_button_page.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:yaru_icons/yaru_icons.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+
+class OptionButtonPage extends StatefulWidget {
+  const OptionButtonPage({Key? key}) : super(key: key);
+
+  @override
+  _OptionButtonPageState createState() => _OptionButtonPageState();
+}
+
+class _OptionButtonPageState extends State<OptionButtonPage> {
+  @override
+  Widget build(BuildContext context) {
+    return YaruPage(
+      children: [
+        Row(
+          children: [
+            YaruOptionButton(
+              onPressed: () {},
+              child: Icon(YaruIcons.search),
+            ),
+            const SizedBox(
+              width: 10.0,
+            ),
+            YaruOptionButton(
+              onPressed: () {},
+              child: Icon(YaruIcons.audio),
+            ),
+            const SizedBox(
+              width: 10.0,
+            ),
+            YaruOptionButton(
+              onPressed: () {},
+              child: Icon(YaruIcons.address_book),
+            ),
+            const SizedBox(
+              width: 10.0,
+            ),
+            YaruOptionButton.color(
+              onPressed: () {},
+              color: Theme.of(context).primaryColor,
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

lib/src/controls/yaru_option_button.dart

@@ -1,43 +1,61 @@
 import 'package:flutter/material.dart';
 
-class YaruOptionButton extends StatelessWidget {
-  /// Creates an [OutlinedButton] with Yaru theme.
-  /// The button have `height` and `width` of 40.
-  ///
-  /// for example:
-  /// ```dart
-  /// YaruOptionButton(
-  ///   onPressed: () {},
-  ///   icon: Icon(YaruIcons.search),
-  /// ),
-  /// ```
-  const YaruOptionButton({
+/// An [OutlinedButton] with a default size of 40x40.
+///
+/// For example, an option button with an arbitrary child widget:
+/// ```dart
+/// YaruOptionButton(
+///   onPressed: () {},
+///   child: Icon(YaruIcons.search),
+/// ),
+/// ```
+///
+/// Or with a pre-made color disk:
+/// ```dart
+/// YaruOptionButton.color(
+///   onPressed: () {},
+///   color: Theme.of(context).primaryColor,
+/// ),
+/// ```
+class YaruOptionButton extends OutlinedButton {
+  /// Creates a [YaruOptionButton].
+  YaruOptionButton({
     super.key,
-    required this.onPressed,
-    required this.child,
-  });
+    required super.onPressed,
+    super.focusNode,
+    super.autofocus = false,
+    ButtonStyle? style,
+    required Widget child,
+  }) : super(
+          style: _styleFrom(padding: EdgeInsets.zero).merge(style),
+          child: IconTheme.merge(
+            data: const IconThemeData(size: 24),
+            child: child,
+          ),
+        );
 
-  /// Callback that gets invoked when the button is clicked.
-  final VoidCallback? onPressed;
-
-  /// The [Widget] is placed as a child of [OutlinedButton].
-  final Widget child;
+  /// Creates a [YaruOptionButton] with a color disk.
+  YaruOptionButton.color({
+    super.key,
+    required super.onPressed,
+    super.focusNode,
+    super.autofocus = false,
+    ButtonStyle? style,
+    required Color color,
+  }) : super(
+          style: _styleFrom(padding: const EdgeInsets.all(10)).merge(style),
+          child: SizedBox.expand(
+            child: DecoratedBox(
+              decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+            ),
+          ),
+        );
 
-  @override
-  Widget build(BuildContext context) {
-    return OutlinedButton(
-      style: OutlinedButton.styleFrom(
-        minimumSize: const Size(40, 40),
-        maximumSize: const Size(40, 40),
-        padding: const EdgeInsets.all(0),
-      ),
-      onPressed: onPressed,
-      child: IconTheme.merge(
-        data: const IconThemeData(
-          size: 24,
-        ),
-        child: child,
-      ),
+  static ButtonStyle _styleFrom({EdgeInsets? padding}) {
+    return OutlinedButton.styleFrom(
+      minimumSize: const Size.square(40),
+      maximumSize: const Size.square(40),
+      padding: padding,
     );
   }
 }

lib/yaru_widgets.dart

@@ -2,7 +2,6 @@ library yaru_widgets;
 
 // Controls
 export 'src/controls/yaru_color_disk.dart';
-export 'src/controls/yaru_color_picker_button.dart';
 export 'src/controls/yaru_icon_button.dart';
 export 'src/controls/yaru_option_button.dart';
 export 'src/controls/yaru_progress_indicator.dart';

test/controls/yaru_options_button_test.dart

@@ -3,7 +3,7 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:yaru_widgets/src/controls/yaru_option_button.dart';
 
 void main() {
-  testWidgets('YaruOptionsButton Test', (WidgetTester tester) async {
+  testWidgets('with icon', (WidgetTester tester) async {
     await tester.pumpWidget(
       MaterialApp(
         home: Scaffold(
@@ -15,7 +15,32 @@ void main() {
       ),
     );
 
-    expect(find.byType(OutlinedButton), findsOneWidget);
-    expect(find.byType(Icon), findsOneWidget);
+    expect(
+      find.widgetWithIcon(YaruOptionButton, Icons.flutter_dash),
+      findsOneWidget,
+    );
+  });
+
+  testWidgets('with color disk', (WidgetTester tester) async {
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: YaruOptionButton.color(
+            onPressed: () {},
+            color: Colors.red,
+          ),
+        ),
+      ),
+    );
+
+    final box = find.descendant(
+      of: find.byType(YaruOptionButton),
+      matching: find.byType(DecoratedBox),
+    );
+    expect(box, findsOneWidget);
+    expect(
+      tester.widget<DecoratedBox>(box).decoration,
+      isA<BoxDecoration>().having((d) => d.color, 'color', Colors.red),
+    );
   });
 }