Alert ready for review

forus-labs · Jul 16, 2024 · b18be8a · b18be8a
1 parent 733892b
commit b18be8a
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 19 deletions.
diff --git a/docs/pages/docs/alert.mdx b/docs/pages/docs/alert.mdx
@@ -0,0 +1,64 @@
+import { Tabs } from 'nextra/components';
+import { Widget } from "../../components/widget";
+
+# Alert
+Displays a callout for user attention.
+
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='alert' query={{}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    FAlert(
+      title: const Text('Heads Up!'),
+      subtitle: const Text('You can add components to your app using the cli.'),
+    ),
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+## Usage
+
+### `FAlert(...)`
+
+```dart
+FAlert(
+  icon: FAssets.icons.badgeAlert,
+  title: const Text('Heads Up!'),
+  subtitle: const Text('You can add components to your app using the cli.'),
+),
+```
+
+## Examples
+
+### Primary
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='alert' query={{}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    FAlert(
+      title: const Text('Heads Up!'),
+      subtitle: const Text('You can add components to your app using the cli.'),
+    ),
+    ```
+  </Tabs.Tab>
+</Tabs>
+
+### Destructive
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='alert' query={{style: 'destructive'}}/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+    ```dart
+    FAlert(
+      title: const Text('Heads Up!'),
+      subtitle: const Text('You can add components to your app using the cli.'),
+      style: FAlertStyle.destructive,
+    ),
+    ```
+  </Tabs.Tab>
+</Tabs>
diff --git a/forui/example/lib/example.dart b/forui/example/lib/example.dart
@@ -23,9 +23,9 @@ class _ExampleState extends State<Example> {
           const SizedBox(height: 100),
           FProgress(value: 0.9),
           const SizedBox(height: 10),
-          FAlert(
-            title: const Text('Heads Up! Forui is coming to flutter!'),
-            subtitle: const Text('You can add components dfijsoi djfosfj  to your app using the cli.'),
+          const FAlert(
+            title: Text('Heads Up! Forui is coming to flutter!'),
+            subtitle: Text('You can add components dfijsoi djfosfj  to your app using the cli.'),
           )
         ],
       );

diff --git a/forui/lib/src/widgets/alert/alert.dart b/forui/lib/src/widgets/alert/alert.dart
@@ -18,7 +18,7 @@ class FAlert extends StatelessWidget {
   final SvgAsset? icon;
 
   /// The title.
-  final Widget? title;
+  final Widget title;
 
   /// The subtitle.
   final Widget? subtitle;
@@ -38,8 +38,8 @@ class FAlert extends StatelessWidget {
   /// |---------------------------|
   /// ```
   const FAlert({
+    required this.title,
     this.icon,
-    this.title,
     this.subtitle,
     this.style = Variant.primary,
     super.key,
@@ -72,16 +72,16 @@ class FAlert extends StatelessWidget {
                     padding: const EdgeInsets.only(left: 8),
                     child: DefaultTextStyle.merge(
                       style: style.titleTextStyle,
-                      child: title!,
+                      child: title,
                     ),
                   ),
                 ),
               ],
             ),
-            Row(
-              children: [
-                SizedBox(width: style.iconSize),
-                if (subtitle != null)
+            if (subtitle != null)
+              Row(
+                children: [
+                  SizedBox(width: style.iconSize),
                   Flexible(
                     child: Padding(
                       padding: const EdgeInsets.only(top: 3, left: 8),
@@ -91,8 +91,8 @@ class FAlert extends StatelessWidget {
                       ),
                     ),
                   ),
-              ],
-            ),
+                ],
+              ),
           ],
         ),
       ),
@@ -102,7 +102,9 @@ class FAlert extends StatelessWidget {
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(DiagnosticsProperty('style', style));
+    properties
+      ..add(DiagnosticsProperty('style', style))
+      ..add(DiagnosticsProperty('icon', icon));
   }
 }
 

diff --git a/forui/lib/src/widgets/alert/alert_styles.dart b/forui/lib/src/widgets/alert/alert_styles.dart
@@ -20,7 +20,7 @@ class FAlertStyles with Diagnosticable {
       : primary = FAlertCustomStyle(
           iconSize: 20,
           iconColor: colorScheme.foreground,
-          padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
+          padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
           titleTextStyle: typography.base.copyWith(
             fontWeight: FontWeight.w500,
             color: colorScheme.foreground,
@@ -36,7 +36,7 @@ class FAlertStyles with Diagnosticable {
         destructive = FAlertCustomStyle(
           iconSize: 20,
           iconColor: colorScheme.destructive,
-          padding: const EdgeInsets.fromLTRB(16, 12, 16, 16),
+          padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
           titleTextStyle: typography.base.copyWith(
             fontWeight: FontWeight.w500,
             color: colorScheme.destructive,

diff --git a/samples/lib/main.dart b/samples/lib/main.dart
@@ -39,10 +39,10 @@ class _AppRouter extends $_AppRouter {
           page: EmptyRoute.page,
           initial: true,
         ),
-    AutoRoute(
-      path: '/alert/default',
-      page: AlertRoute.page,
-    ),
+        AutoRoute(
+          path: '/alert/default',
+          page: AlertRoute.page,
+        ),
         AutoRoute(
           path: '/badge/default',
           page: BadgeRoute.page,