From 9aac3a0cca74ce5989440565dac01daf7f0507c3 Mon Sep 17 00:00:00 2001
From: Will McGugan <willmcgugan@gmail.com>
Date: Sat, 10 Dec 2022 18:18:28 +0000
Subject: [PATCH] updated list view

---
 docs/blog/posts/release0-6-0.md    | 18 ++++++++++++++++--
 docs/examples/widgets/list_view.py |  5 ++++-
 docs/widgets/list_view.md          | 14 ++++++++++----
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/docs/blog/posts/release0-6-0.md b/docs/blog/posts/release0-6-0.md
index 26396ffdc..1fadbc3fd 100644
--- a/docs/blog/posts/release0-6-0.md
+++ b/docs/blog/posts/release0-6-0.md
@@ -55,8 +55,22 @@ The Tree control forms the foundation of the [DirectoryTree](../../widgets/direc
 
 We have a new list view control to navigate and select items in a list. Items can be widgets themselves, which makes this a great platform for building more sophisticated controls.
 
-```{.textual path="docs/examples/widgets/list_view.py"}
-```
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/list_view.py"}
+    ```
+
+=== "list_view.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/list_view.py"
+    ```
+
+=== "list_view.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/list_view.css"
+    ```
 
 ## Placeholder
 
diff --git a/docs/examples/widgets/list_view.py b/docs/examples/widgets/list_view.py
index aeaae3513..a1880dc50 100644
--- a/docs/examples/widgets/list_view.py
+++ b/docs/examples/widgets/list_view.py
@@ -3,6 +3,9 @@ from textual.widgets import ListView, ListItem, Label, Footer
 
 
 class ListViewExample(App):
+
+    CSS_PATH = "list_view.css"
+
     def compose(self) -> ComposeResult:
         yield ListView(
             ListItem(Label("One")),
@@ -12,6 +15,6 @@ class ListViewExample(App):
         yield Footer()
 
 
-app = ListViewExample(css_path="list_view.css")
 if __name__ == "__main__":
+    app = ListViewExample()
     app.run()
diff --git a/docs/widgets/list_view.md b/docs/widgets/list_view.md
index feec59c7d..ff6b6b6eb 100644
--- a/docs/widgets/list_view.md
+++ b/docs/widgets/list_view.md
@@ -21,10 +21,16 @@ The example below shows an app with a simple `ListView`.
     --8<-- "docs/examples/widgets/list_view.py"
     ```
 
+=== "list_view.css"
+
+    ```sass
+    --8<-- "docs/examples/widgets/list_view.css"
+    ```
+
 ## Reactive Attributes
 
 | Name    | Type  | Default | Description                     |
-|---------|-------|---------|---------------------------------|
+| ------- | ----- | ------- | ------------------------------- |
 | `index` | `int` | `0`     | The currently highlighted index |
 
 ## Messages
@@ -40,7 +46,7 @@ click on a list item.
 #### Attributes
 
 | attribute | type       | purpose                        |
-|-----------|------------|--------------------------------|
+| --------- | ---------- | ------------------------------ |
 | `item`    | `ListItem` | The item that was highlighted. |
 
 ### Selected
@@ -54,7 +60,7 @@ or by clicking on it.
 #### Attributes
 
 | attribute | type       | purpose                     |
-|-----------|------------|-----------------------------|
+| --------- | ---------- | --------------------------- |
 | `item`    | `ListItem` | The item that was selected. |
 
 
@@ -68,7 +74,7 @@ are changed (e.g. a child is added, or the list is cleared).
 #### Attributes
 
 | attribute  | type             | purpose                   |
-|------------|------------------|---------------------------|
+| ---------- | ---------------- | ------------------------- |
 | `children` | `list[ListItem]` | The new ListView children |