Live documentation

CHANGELOG.md

@@ -21,6 +21,9 @@ Date format: DD/MM/YYYY
   - Added `ComboBoxFormField` and `EditableComboBoxFormField` ([#373](https://github.com/bdlukaa/fluent_ui/issues/373))
   - `Combobox.comboboxColor` is now correctly applied ([#468](https://github.com/bdlukaa/fluent_ui/issues/468))
 - Implemented `PaneItemExpander` ([#299](https://github.com/bdlukaa/fluent_ui/pull/299))
+- `TimePicker` and `DatePicker` popup now needs a minimum width of 260 ([#494](https://github.com/bdlukaa/fluent_ui/pull/494))
+- Correctly align `NavigationAppBar` content ([#494](https://github.com/bdlukaa/fluent_ui/pull/494))
+- **BREAKING** Added `InfoLabel.rich`. `InfoLabel` is no longer a constant contructor ([#494](https://github.com/bdlukaa/fluent_ui/pull/494))
 
 ## [4.0.0-pre.3] - Top navigation and auto suggestions - [13/08/2022]
 

example/lib/main.dart

@@ -19,6 +19,7 @@ import 'screens/inputs/button.dart';
 import 'screens/inputs/checkbox.dart';
 import 'screens/inputs/slider.dart';
 import 'screens/inputs/toggle_switch.dart';
+import 'screens/navigation/navigation_view.dart';
 import 'screens/navigation/tab_view.dart';
 import 'screens/navigation/tree_view.dart';
 import 'screens/settings.dart';
@@ -32,6 +33,7 @@ import 'screens/surface/progress_indicators.dart';
 import 'screens/surface/tooltip.dart';
 import 'screens/theming/colors.dart';
 import 'screens/theming/icons.dart';
+import 'screens/theming/reveal_focus.dart';
 import 'screens/theming/typography.dart';
 import 'theme.dart';
 
@@ -249,6 +251,10 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
       icon: const Icon(FluentIcons.icon_sets_flag),
       title: const Text('Icons'),
     ),
+    PaneItem(
+      icon: const Icon(FluentIcons.focus),
+      title: const Text('Reveal Focus'),
+    ),
   ];
   final List<NavigationPaneItem> footerItems = [
     PaneItemSeparator(),
@@ -278,8 +284,7 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
     TimePickerPage(),
     DatePickerPage(),
     // navigation
-    EmptyPage(), // navigation view
-
+    NavigationViewPage(),
     TabViewPage(),
     TreeViewPage(),
     // surfaces
@@ -296,8 +301,11 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
     ColorsPage(),
     const TypographyPage().toPage(),
     const IconsPage().toPage(),
+    RevealFocusPage(),
     // others
     Settings(),
+
+    // TODO: mobile widgets, Scrollbar, BottomNavigationBar, RatingBar
   ];
 
   @override

example/lib/screens/forms/auto_suggest_box.dart

@@ -14,7 +14,9 @@ class AutoSuggestBoxPage extends ScrollablePage {
   List<Widget> buildScrollable(BuildContext context) {
     return [
       const Text(
-        'A text control that makes suggestions to users as they type. The app is notified when text has been changed by the user and is responsible for providing relevant suggestions for this control to display.',
+        'A text control that makes suggestions to users as they type. The app '
+        'is notified when text has been changed by the user and is responsible '
+        'for providing relevant suggestions for this control to display.',
       ),
       subtitle(content: const Text('A basic AutoSuggestBox')),
       CardHighlight(

example/lib/screens/forms/combobox.dart

@@ -58,7 +58,15 @@ class ComboboxPage extends ScrollablePage {
   List<Widget> buildScrollable(BuildContext context) {
     return [
       const Text(
-        'Use a ComboBox when you need to conserve on-screen space and when users select only one option at a time. A ComboBox shows only the currently selected item.',
+        'Use a combo box (also known as a drop-down list) to present a list of '
+        'items that a user can select from. A combo box starts in a compact '
+        'state and expands to show a list of selectable items.\n\n'
+        'When the combo box is closed, it either displays the current selection '
+        'or is empty if there is no selected item. When the user expands the '
+        'combo box, it displays the list of selectable items.\n\n'
+        'Use a ComboBox when you need to conserve on-screen space and when '
+        'users select only one option at a time. A ComboBox shows only the '
+        'currently selected item.',
       ),
       subtitle(
         content: const Text(
@@ -149,8 +157,15 @@ ComboBox<String>(
   placeholder: const Text('Select a cat breed'),
 ),''',
       ),
-      subtitle(
-        content: const Text('An editable ComboBox'),
+      subtitle(content: const Text('An editable ComboBox')),
+      description(
+        content: const Text(
+          'By default, a combo box lets the user select from a pre-defined '
+          'list of options. However, there are cases where the list contains '
+          'only a subset of valid values, and the user should be able to enter '
+          'other values that aren\'t listed. To support this, you can make the'
+          ' combo box editable.',
+        ),
       ),
       CardHighlight(
         child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [

example/lib/screens/forms/date_picker.dart

@@ -15,7 +15,14 @@ class DatePickerPage extends ScrollablePage {
   List<Widget> buildScrollable(BuildContext context) {
     return [
       const Text(
-        'Use a DatePicker to let users set a date in your app, for example to schedule an appointment. The DatePicker displays three controls for month, date, and year. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.',
+        'Use a DatePicker to let users set a date in your app, for example to '
+        'schedule an appointment. The DatePicker displays three controls for '
+        'month, date, and year. These controls are easy to use with touch or '
+        'mouse, and they can be styled and configured in several different ways.'
+        '\n\nThe entry point displays the chosen date, and when the user '
+        'selects the entry point, a picker surface expands vertically from the '
+        'middle for the user to make a selection. The date picker overlays '
+        'other UI; it doesn\'t push other UI out of the way.',
       ),
       subtitle(content: const Text('A simple DatePicker with a header')),
       CardHighlight(

example/lib/screens/forms/text_box.dart

@@ -12,7 +12,15 @@ class TextBoxPage extends ScrollablePage {
   List<Widget> buildScrollable(BuildContext context) {
     return [
       const Text(
-        'Use a TextBox to let a user enter simple text input in your app. You can add a header and placeholder text to let the user know what the TextBox is for, and you can customize it in other ways.',
+        'The TextBox control lets a user type text into an app. It\'s typically '
+        'used to capture a single line of text, but can be configured to capture '
+        'multiple lines of text. The text displays on the screen in a simple, '
+        'uniform, plaintext format.\n\n'
+        'TextBox has a number of features that can simplify text entry. It comes '
+        'with a familiar, built-in context menu with support for copying and '
+        'pasting text. The "clear all" button lets a user quickly delete all '
+        'text that has been entered. It also has spell checking capabilities '
+        'built in and enabled by default.',
       ),
       subtitle(content: const Text('A simple TextBox')),
       CardHighlight(

example/lib/screens/forms/time_picker.dart

@@ -16,7 +16,14 @@ class TimePickerPage extends ScrollablePage {
   List<Widget> buildScrollable(BuildContext context) {
     return [
       const Text(
-        'Use a TimePicker to let users set a time in your app, for example to set a reminder. The TimePicker displays three controls for hour, minute, and AM/PM. These controls are easy to use with touch or mouse, and they can be styled and configured in several different ways.',
+        'Use a TimePicker to let users set a time in your app, for example to '
+        'set a reminder. The TimePicker displays three controls for hour, '
+        'minute, and AM/PM. These controls are easy to use with touch or mouse, '
+        'and they can be styled and configured in several different ways.\n\n'
+        'The entry point displays the chosen time, and when the user selects '
+        'the entry point, a picker surface expands vertically from the middle '
+        'for the user to make a selection. The time picker overlays other UI; '
+        'it doesn\'t push other UI out of the way.',
       ),
       subtitle(content: const Text('A simple TimePicker')),
       CardHighlight(

example/lib/screens/home.dart

@@ -3,6 +3,7 @@ import 'package:url_launcher/link.dart';
 
 import '../models/sponsor.dart';
 import '../widgets/changelog.dart';
+import '../widgets/material_equivalents.dart';
 import '../widgets/page.dart';
 import '../widgets/sponsor.dart';
 
@@ -60,12 +61,13 @@ class HomePage extends ScrollablePage {
               ),
             ),
           ),
-          const RepaintBoundary(
+          RepaintBoundary(
             child: Padding(
-              padding: EdgeInsetsDirectional.only(start: 4.0),
+              padding: const EdgeInsetsDirectional.only(start: 4.0),
               child: InfoLabel(
                 label: 'Progress',
-                child: SizedBox(height: 30, width: 30, child: ProgressRing()),
+                child: const SizedBox(
+                    height: 30, width: 30, child: ProgressRing()),
               ),
             ),
           ),
@@ -88,9 +90,9 @@ class HomePage extends ScrollablePage {
               ]),
             ),
           ),
-          const InfoLabel(
+          InfoLabel(
             label: 'Icons',
-            child: Icon(FluentIcons.graph_symbol, size: 30.0),
+            child: const Icon(FluentIcons.graph_symbol, size: 30.0),
           ),
           InfoLabel(
             label: 'Colors',
@@ -208,9 +210,11 @@ class HomePage extends ScrollablePage {
               ),
               const Text('Become a Sponsor!'),
             ]),
-          )
+          ),
         ],
       ),
+      subtitle(content: const Text('Equivalents with the material library')),
+      const MaterialEquivalents(),
     ];
   }
 }

example/lib/screens/inputs/button.dart

@@ -27,6 +27,9 @@ class ButtonPage extends ScrollablePage {
         'The Button control provides a Click event to respond to user input from a touch, mouse, keyboard, stylus, or other input device. You can put different kinds of content in a button, such as text or an image, or you can restyle a button to give it a new look.',
       ),
       subtitle(content: const Text('A simple button with text content')),
+      description(
+        content: const Text('A button that initiates an immediate action.'),
+      ),
       CardHighlight(
         child: Row(children: [
           Button(
@@ -98,8 +101,11 @@ class ButtonPage extends ScrollablePage {
 )''',
       ),
       subtitle(content: const Text('A simple ToggleButton with text content')),
-      const Text(
-        'A ToggleButton looks like a Button, but works like a CheckBox. It typically has two states, checked (on) or unchecked (off).',
+      description(
+        content: const Text(
+          'A ToggleButton looks like a Button, but works like a CheckBox. It '
+          'typically has two states, checked (on) or unchecked (off).',
+        ),
       ),
       CardHighlight(
         child: Row(children: [
@@ -179,47 +185,52 @@ ToggleButton(
 )''',
       ),
       subtitle(content: const Text('SplitButton')),
+      description(
+        content: const Text(
+          'Represents a button with two parts that can be invoked separately. '
+          'One part behaves like a standard button and the other part invokes '
+          'a flyout.',
+        ),
+      ),
       CardHighlight(
-        child: Row(
-          children: [
-            SplitButtonBar(
-              buttons: [
-                Button(
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: splitButtonDisabled
-                          ? FluentTheme.of(context).accentColor.darker
-                          : FluentTheme.of(context).accentColor,
-                      borderRadius: const BorderRadiusDirectional.horizontal(
-                        start: Radius.circular(4.0),
-                      ),
+        child: Row(children: [
+          SplitButtonBar(
+            buttons: [
+              Button(
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: splitButtonDisabled
+                        ? FluentTheme.of(context).accentColor.darker
+                        : FluentTheme.of(context).accentColor,
+                    borderRadius: const BorderRadiusDirectional.horizontal(
+                      start: Radius.circular(4.0),
                     ),
-                    height: 24,
-                    width: 24,
                   ),
-                  onPressed: splitButtonDisabled ? null : () {},
+                  height: 24,
+                  width: 24,
                 ),
-                IconButton(
-                  icon: const SizedBox(
-                    // height: splitButtonHeight,
-                    child: Icon(FluentIcons.chevron_down, size: 10.0),
-                  ),
-                  onPressed: splitButtonDisabled ? null : () {},
+                onPressed: splitButtonDisabled ? null : () {},
+              ),
+              IconButton(
+                icon: const SizedBox(
+                  // height: splitButtonHeight,
+                  child: Icon(FluentIcons.chevron_down, size: 10.0),
                 ),
-              ],
-            ),
-            const Spacer(),
-            ToggleSwitch(
-              checked: splitButtonDisabled,
-              onChanged: (v) {
-                setState(() {
-                  splitButtonDisabled = v;
-                });
-              },
-              content: const Text('Disabled'),
-            ),
-          ],
-        ),
+                onPressed: splitButtonDisabled ? null : () {},
+              ),
+            ],
+          ),
+          const Spacer(),
+          ToggleSwitch(
+            checked: splitButtonDisabled,
+            onChanged: (v) {
+              setState(() {
+                splitButtonDisabled = v;
+              });
+            },
+            content: const Text('Disabled'),
+          ),
+        ]),
         codeSnippet: '''SplitButtonBar(
   buttons: [
     Button(
@@ -238,8 +249,13 @@ ToggleButton(
 )''',
       ),
       subtitle(content: const Text('RadioButton')),
-      const Text(
-        'A control that allows a user to select a single option from a group of options',
+      description(
+        content: const Text(
+          'Radio buttons, also called option buttons, let users select one option '
+          'from a collection of two or more mutually exclusive, but related, '
+          'options. Radio buttons are always used in groups, and each option is '
+          'represented by one radio button in the group.',
+        ),
       ),
       CardHighlight(
         child: Row(children: [

example/lib/screens/inputs/checkbox.dart

@@ -25,13 +25,8 @@ class CheckboxPage extends ScrollablePage {
         child: Row(children: [
           Checkbox(
             checked: firstChecked,
-            onChanged: firstDisabled
-                ? null
-                : (v) {
-                    setState(() {
-                      firstChecked = v!;
-                    });
-                  },
+            onChanged:
+                firstDisabled ? null : (v) => setState(() => firstChecked = v!),
             content: const Text('Two-state Checkbox'),
           ),
           const Spacer(),

example/lib/screens/inputs/slider.dart

@@ -23,7 +23,14 @@ class SliderPage extends ScrollablePage {
   List<Widget> buildScrollable(BuildContext context) {
     return [
       const Text(
-          'Use a Slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).'),
+        'Use a Slider when you want your users to be able to set defined, '
+        'contiguous values (such as volume or brightness) or a range of discrete '
+        'values (such as screen resolution settings).\n\n'
+        'A slider is a good choice when you know that users think of the value '
+        'as a relative quantity, not a numeric value. For example, users think '
+        'about setting their audio volume to low or medium—not about setting '
+        'the value to 2 or 5.',
+      ),
       subtitle(content: const Text('A simple Slider')),
       CardHighlight(
         child: Row(children: [
@@ -49,6 +56,16 @@ Slider(
 ''',
       ),
       subtitle(content: const Text('A vertical slider')),
+      description(
+        content: const Text(
+          '''You can orient your slider horizontally or vertically. Use these guidelines to determine which layout to use.
+
+    *   Use a natural orientation. For example, if the slider represents a real-world value that is normally shown vertically (such as temperature), use a vertical orientation.
+    *   If the control is used to seek within media, like in a video app, use a horizontal orientation.
+    *   When using a slider in page that can be panned in one direction (horizontally or vertically), use a different orientation for the slider than the panning direction. Otherwise, users might swipe the slider and change its value accidentally when they try to pan the page.
+    *   If you're still not sure which orientation to use, use the one that best fits your page layout.''',
+        ),
+      ),
       CardHighlight(
         child: Row(children: [
           Slider(