Add checkbox (#72)

* Checkbox prototype * Add fleshed-out check-box * Update changelog * Commit from GitHub Actions (Forui Presubmit) * Update checkbox example * Fix failing build * Commit from GitHub Actions (Forui Samples Presubmit) --------- Co-authored-by: Pante <[email protected]>
forus-labs · Jul 2, 2024 · c902f03 · c902f03
1 parent 89571e6
commit c902f03
Show file tree

Hide file tree

Showing 16 changed files with 621 additions and 8 deletions.
diff --git a/docs/pages/docs/checkbox.mdx b/docs/pages/docs/checkbox.mdx
@@ -0,0 +1,107 @@
+import { Tabs } from 'nextra/components';
+import { Widget } from "../../components/widget";
+
+# Checkbox
+A control that allows the user to toggle between checked and not checked. It can also be used in a form.
+
+On touch devices, it is recommended to use a [switch](/docs/switch) instead in most cases.
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='checkbox' query={{enabled: "true"}}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart
+        FCheckBox();
+        ```
+    </Tabs.Tab>
+</Tabs>
+
+## Usage
+
+### `FCheckbox(...)`
+
+```dart
+FCheckbox(
+  enabled: true,
+  initialValue: true,
+);
+```
+
+## Examples
+
+### Disabled
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='checkbox' query={{enabled: "false"}}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart
+        FCheckbox(
+          enabled: false,
+        );
+        ```
+    </Tabs.Tab>
+</Tabs>
+
+### Form
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='checkbox' variant='form' query={{enabled: "true"}}/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+    ```dart
+    class LoginForm extends StatefulWidget {
+      const LoginForm({super.key});
+
+      @override
+      State<LoginForm> createState() => _LoginFormState();
+    }
+
+    class _LoginFormState extends State<LoginForm> {
+      final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
+
+      @override
+      void initState() {
+        super.initState();
+      }
+
+      @override
+      Widget build(BuildContext context) => Form(
+        key: _formKey,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            FTextField.email(
+              hint: '[email protected]',
+              help: const Text(''),
+              validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
+            ),
+            const SizedBox(height: 4),
+            FTextField.password(
+              hint: '',
+              help: const Text(''),
+              validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
+            ),
+            const SizedBox(height: 4),
+            Row(
+              children: [
+                const FCheckbox(),
+                const SizedBox(width: 7),
+                Text('Remember password?', style: context.theme.typography.sm),
+              ],
+            ),
+            const SizedBox(height: 30),
+            FButton(
+              label: const Text('Login'),
+              onPress: () => _formKey.currentState!.validate(),
+            ),
+          ],
+        ),
+      );
+    }
+    ```
+    </Tabs.Tab>
+</Tabs>
diff --git a/docs/pages/docs/text-field.mdx b/docs/pages/docs/text-field.mdx
@@ -1,7 +1,7 @@
 import { Tabs } from 'nextra/components';
 import { Widget } from '../../components/widget';
 
-# Text Fields
+# Text Field
 A text field lets the user enter text, either with hardware keyboard or with an onscreen keyboard. It can also be used
 in a form.
 

diff --git a/forui/CHANGELOG.md b/forui/CHANGELOG.md
@@ -1,17 +1,24 @@
 ## Next
 
-### Changes
-* Add `FHeader.nested` widget.
-* Add `FProgress` widget.
+### Additions
+* Add `FCheckbox`.
+* Add `FHeader.nested`.
+* Add `FProgress`.
+
+### Enhancements
 * **Breaking** Move `FHeaderStyle` to `FHeaderStyles.rootStyle`.
 * **Breaking** Move `FHeaderActionStyle.padding` to `FRootHeaderStyle.actionSpacing`.
-* **Breaking** Suffix style parameters with `Style`, i.e. `FRootHeaderStyle.action` has been renamed to `FRootHeaderStyle.actionStyle`.
-* **Breaking** Raw fields have been removed, wrap strings with the Text() widget. Eg. `Button(label: 'Hello')` or `Button(rawLabel: 'Hello')` should be replaced with `Button(label: Text('Hello'))`.
+* **Breaking** Suffix style parameters with `Style`, i.e. `FRootHeaderStyle.action` has been renamed to 
+  `FRootHeaderStyle.actionStyle`.
+* **Breaking** Raw fields have been removed, wrap strings with the Text() widget. E.g. `FButton(label: 'Hello')` or 
+  `FButton(rawLabel: 'Hello')` should be replaced with `FButton(label: Text('Hello'))`.
 * Change `FTextField` to be usable in `Form`s. 
 * Change `FTextFieldStyle`'s default vertical content padding from `5` to `15`.
+* Split exports in `forui.dart` into sub-libraries.
+
+### Fixes
 * Fix missing `key` parameter in `FTextField` constructors.
 * **Breaking** `FButton.prefixIcon` and `FButton.suffixIcon` have been renamed to `FButton.prefix` and `FButton.suffix`.
-* Split exports in `forui.dart` into sub-libraries.
 * Fix padding inconsistencies in `FCard` and `FDialog`.
 
 ## 0.1.0

diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart
@@ -34,6 +34,9 @@ final class FThemeData with Diagnosticable {
   /// The card style.
   final FCardStyle cardStyle;
 
+  /// The checkbox style.
+  final FCheckboxStyle checkBoxStyle;
+
   /// The dialog style.
   final FDialogStyle dialogStyle;
 
@@ -69,6 +72,7 @@ final class FThemeData with Diagnosticable {
     required this.badgeStyles,
     required this.buttonStyles,
     required this.cardStyle,
+    required this.checkBoxStyle,
     required this.dialogStyle,
     required this.headerStyle,
     required this.progressStyle,
@@ -96,6 +100,7 @@ final class FThemeData with Diagnosticable {
       badgeStyles: FBadgeStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       buttonStyles: FButtonStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       cardStyle: FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
+      checkBoxStyle: FCheckboxStyle.inherit(colorScheme: colorScheme),
       dialogStyle: FDialogStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       headerStyle: FHeaderStyles.inherit(colorScheme: colorScheme, typography: typography, style: style),
       progressStyle: FProgressStyle.inherit(colorScheme: colorScheme, style: style),
@@ -131,6 +136,7 @@ final class FThemeData with Diagnosticable {
     FBadgeStyles? badgeStyles,
     FButtonStyles? buttonStyles,
     FCardStyle? cardStyle,
+    FCheckboxStyle? checkBoxStyle,
     FDialogStyle? dialogStyle,
     FHeaderStyles? headerStyle,
     FProgressStyle? progressStyle,
@@ -147,6 +153,7 @@ final class FThemeData with Diagnosticable {
         badgeStyles: badgeStyles ?? this.badgeStyles,
         buttonStyles: buttonStyles ?? this.buttonStyles,
         cardStyle: cardStyle ?? this.cardStyle,
+        checkBoxStyle: checkBoxStyle ?? this.checkBoxStyle,
         dialogStyle: dialogStyle ?? this.dialogStyle,
         headerStyle: headerStyle ?? this.headerStyle,
         progressStyle: progressStyle ?? this.progressStyle,
@@ -167,6 +174,7 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('badgeStyles', badgeStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('buttonStyles', buttonStyles, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('cardStyle', cardStyle, level: DiagnosticLevel.debug))
+      ..add(DiagnosticsProperty('checkBoxStyle', checkBoxStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('dialogStyle', dialogStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('headerStyle', headerStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('progressStyle', progressStyle))
@@ -188,6 +196,7 @@ final class FThemeData with Diagnosticable {
           badgeStyles == other.badgeStyles &&
           buttonStyles == other.buttonStyles &&
           cardStyle == other.cardStyle &&
+          checkBoxStyle == other.checkBoxStyle &&
           dialogStyle == other.dialogStyle &&
           headerStyle == other.headerStyle &&
           progressStyle == other.progressStyle &&
@@ -205,6 +214,7 @@ final class FThemeData with Diagnosticable {
       badgeStyles.hashCode ^
       buttonStyles.hashCode ^
       cardStyle.hashCode ^
+      checkBoxStyle.hashCode ^
       dialogStyle.hashCode ^
       headerStyle.hashCode ^
       progressStyle.hashCode ^