Tiles update

CHANGELOG.md

@@ -5,6 +5,12 @@ Date format: DD/MM/YYYY
 - Remove whitespace on `ContentDialog` if title is omitted ([#418](https://github.com/bdlukaa/fluent_ui/issues/418))
 - Apply correct color to the Date and Time Pickers button when selected ([#415](https://github.com/bdlukaa/fluent_ui/issues/415), [#417](https://github.com/bdlukaa/fluent_ui/issues/417))
 - Expose more useful properties to `AutoSuggestBox` ([#419](https://github.com/bdlukaa/fluent_ui/issues/419))
+- **BREAKING** `PopupContentSizeInfo` was renamed to `ContentSizeInfo`
+- Reworked `ListTile` ([#422](https://github.com/bdlukaa/fluent_ui/pull/422)):
+  - **BREAKING** Removed `TappableListTile` 
+  - Added support for single and multiple selection. Use `ListTile.selectable` ([#409](https://github.com/bdlukaa/fluent_ui/issues/409))
+  - Added focus support
+  - Use the Win UI design
 
 ## [4.0.0-pre.1] - Materials and Pickers - [29/06/2022]
 

README.md

@@ -94,7 +94,7 @@
   - [Time Picker](#time-picker)
   - [Progress Bar and Progress Ring](#progress-bar-and-progress-ring)
   - [Scrollbar](#scrollbar)
-  - [List Tile](#list-tile)
+  - [ListTile](#listtile)
   - [Info Label](#info-label)
   - [TreeView](#treeview)
     - [Scrollable tree view](#scrollable-tree-view)
@@ -1352,38 +1352,34 @@ Which produces the following:
 
 You can change the `isAlwaysVisible` property to either enable or disable the fade effect. It's disabled by default.
 
-## List Tile
+## ListTile
 
-You can use a `ListTile` in a `ListView`.
+A fluent-styled list tile. Usually used inside a `ListView`. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/controls/item-templates-listview)
 
-### Example
+Here's an example of how to use a list tile inside a of `ListView`:
 
 ```dart
-final people = {
-  'Mass in B minor': 'Johann Sebastian Bach',
-  'Third Symphony': 'Ludwig van Beethoven',
-  'Serse': 'George Frideric Hendel',
-};
+String selectedContact = '';
+
+const contacts = ['Kendall', 'Collins', ...];
 
 ListView.builder(
-  itemCount: people.length,
+  itemCount: contacts.length,
   itemBuilder: (context, index) {
-    final title = people.keys.elementAt(index);
-    final subtitle = people[title];
-    return ListTile(
+    final contact = contacts[index];
+    return ListTile.selectable(
       leading: CircleAvatar(),
-      title: Text(title),
-      subtitle: Text(subtitle!),
+      title: Text(contact),
+      selected: selectedContact == contact,
+      onSelectionChange: (v) => setState(() => selectedContact = contact),
     );
-  }
-),
+  } 
+)
 ```
 
 The code above produces the following:
 
-![Double Line Example](https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/images/listitems/doublelineexample.png)
-
-If you want to create a tappable tile, use `TappableListTile` instead.
+![A selected ListTile in a ListView](https://docs.microsoft.com/en-us/windows/apps/design/controls/images/listview-grouped-example-resized-final.png)
 
 ## Info Label
 

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:example/screens/surface/tiles.dart';
 import 'package:example/widgets/page.dart';
 import 'package:fluent_ui/fluent_ui.dart' hide Page;
 import 'package:flutter/foundation.dart';
@@ -249,6 +250,10 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
       icon: const Icon(FluentIcons.progress_ring_dots),
       title: const Text('Progress Indicators'),
     ),
+    PaneItem(
+      icon: const Icon(FluentIcons.tiles),
+      title: const Text('Tiles'),
+    ),
     PaneItem(
       icon: const Icon(FluentIcons.hint_text),
       title: const Text('Tooltip'),
@@ -302,6 +307,7 @@ class _MyHomePageState extends State<MyHomePage> with WindowListener {
     ExpanderPage(),
     InfoBarPage(),
     ProgressIndicatorsPage(),
+    TilePage(),
     TooltipPage(),
     const FlyoutPage().toPage(),
     // theming