Infobar 3.0.0

CHANGELOG.md

@@ -16,6 +16,7 @@ Date format: DD/MM/YYYY
 - Update `ToggleSwitch` design
 - Update `Scrollbar` design
 - Update `Slider` design
+- Update `InfoBar` design
 
 ## [2.2.1] - [26/06/2021]
 

README.md

@@ -1163,7 +1163,6 @@ Acrylic(
 
 Currently, the following widgets use acrylic in its implementation:
 
-- [InfoBar](#infobar)
 - [Navigation View](#navigation-view)
 - [TabView](#tab-view)
 
@@ -1173,28 +1172,28 @@ Currently, the following widgets use acrylic in its implementation:
 
 ## InfoBar
 
-The `InfoBar` widget is for displaying app-wide status messages to users that are highly visible yet non-intrusive. There are built-in Severity levels to easily indicate the type of message shown as well as the option to include your own call to action or hyperlink button. Since the InfoBar is inline with other UI content the option is there for the control to always be visible or dismissed by the user.
-
-#### Usage
+The `InfoBar` control is for displaying app-wide status messages to users that are highly visible yet non-intrusive. There are built-in Severity levels to easily indicate the type of message shown as well as the option to include your own call to action or hyperlink button. Since the InfoBar is inline with other UI content the option is there for the control to always be visible or dismissed by the user.
 
 You can easility create it using the `InfoBar` widget and theme it using `InfoBarThemeData`. It has built-in support for both light and dark theme:
 
 ```dart
-InfoBar(
-  title: Text('Update available'),
-  content: Text('Restart the app to apply the latest update.'), // optional
-  severity: InfoBarSeverity.info, // optional. Default to InfoBarSeverity.info
-),
+bool _visible = true;
+
+if (_visible)
+  InfoBar(
+    title: Text('Update available'),
+    content: Text('Restart the app to apply the latest update.'), // optional
+    severity: InfoBarSeverity.info, // optional. Default to InfoBarSeverity.info
+    onClose: () {
+      // Dismiss the info bar
+      setState(() => _visible = false);
+    }
+  ),
 ```
 
-#### Some screenshots
+Which produces the following:
 
-![Info InfoBar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/infobar-default-title-message.png)\
-![Long Info InfoBar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/infobar-default-hyperlink.png)\
-![Warning InfoBar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/infobar-warning-title-message.png)\
-![Long Success InfoBar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/infobar-success-content-wrapping.png)\
-![Error InfoBar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/infobar-error-action-button.png)\
-![Custom InfoBar Preview](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/infobar-custom-icon-color.png)
+![InfoBar Preview](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/infobar-default-title-message.png)
 
 ## Date Picker
 

example/lib/screens/others.dart

@@ -54,42 +54,6 @@ class _OthersState extends State<Others> {
         ),
         controller: otherController,
         children: [
-          Padding(
-            padding: EdgeInsets.only(bottom: 10),
-            child: Acrylic(
-              tintAlpha: 1.0,
-              elevation: 4.0,
-              child: Column(children: [
-                Text('Surfaces',
-                    style: FluentTheme.of(context).typography.subtitle),
-                Wrap(spacing: 10, runSpacing: 10, children: [
-                  Tooltip(
-                    message: 'This is a tooltip',
-                    child: Button(
-                      child: Text('Button with tooltip'),
-                      onPressed: () {
-                        print('pressed button with tooltip');
-                      },
-                    ),
-                  ),
-                  Flyout(
-                    controller: flyoutController,
-                    contentWidth: 450,
-                    content: FlyoutContent(
-                      child: Text(
-                          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
-                    ),
-                    child: Button(
-                      child: Text('Open flyout'),
-                      onPressed: () {
-                        flyoutController.open = true;
-                      },
-                    ),
-                  ),
-                ]),
-              ]),
-            ),
-          ),
           ...List.generate(InfoBarSeverity.values.length, (index) {
             final severity = InfoBarSeverity.values[index];
             final titles = [
@@ -107,10 +71,36 @@ class _OthersState extends State<Others> {
                 content: Text(descs[index.isEven ? 0 : 1]),
                 isLong: InfoBarSeverity.values.indexOf(severity).isEven,
                 severity: severity,
-                action: Button(
-                  child: Text('This is an action'),
-                  onPressed: () => print('action pressed'),
-                ),
+                action: () {
+                  if (index == 0) {
+                    return Tooltip(
+                      message: 'This is a tooltip',
+                      child: Button(
+                        child: Text('Hover this button to see a tooltip'),
+                        onPressed: () {
+                          print('pressed button with tooltip');
+                        },
+                      ),
+                    );
+                  } else {
+                    if (index == 3) {
+                      return Flyout(
+                        controller: flyoutController,
+                        contentWidth: 450,
+                        content: FlyoutContent(
+                          child: Text(
+                              'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
+                        ),
+                        child: Button(
+                          child: Text('Open flyout'),
+                          onPressed: () {
+                            flyoutController.open = true;
+                          },
+                        ),
+                      );
+                    }
+                  }
+                }(),
                 onClose: () {
                   print('closed');
                 },

lib/src/controls/inputs/buttons/base.dart

@@ -153,7 +153,7 @@ class _BaseButtonState extends State<BaseButton> {
             ),
             padding: padding,
             child: IconTheme.merge(
-              data: IconThemeData(color: resolvedForegroundColor),
+              data: IconThemeData(color: resolvedForegroundColor, size: 14.0),
               child: DefaultTextStyle(
                 style: (resolvedTextStyle ?? TextStyle(inherit: true))
                     .copyWith(color: resolvedForegroundColor),