From a1b9d4b2c53ff35ed5a8b3071c315b08906c7f40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Mon, 9 Jan 2023 16:11:45 +0000
Subject: [PATCH] Fix examples.

---
 docs/examples/styles/background.css  |  8 +++++--
 docs/examples/styles/background.py   |  8 +++----
 docs/examples/styles/border.css      | 34 ++++++++++++++++------------
 docs/examples/styles/box_sizing.css  | 15 +++++++-----
 docs/examples/styles/color.css       |  9 +++++---
 docs/examples/styles/display.css     | 12 ++++++----
 docs/examples/styles/grid_gutter.css |  2 +-
 docs/examples/styles/height.css      |  2 +-
 docs/examples/styles/overflow.css    |  4 ++--
 docs/examples/styles/padding.css     |  6 ++---
 docs/examples/styles/tint.css        |  8 +++----
 docs/examples/styles/tint.py         |  2 +-
 docs/examples/styles/visibility.css  |  2 ++
 13 files changed, 65 insertions(+), 47 deletions(-)

diff --git a/docs/examples/styles/background.css b/docs/examples/styles/background.css
index 27f8649d2..f2d32df58 100644
--- a/docs/examples/styles/background.css
+++ b/docs/examples/styles/background.css
@@ -1,14 +1,18 @@
-Static {
+Label {
+    width: 100%;
     height: 1fr;
     content-align: center middle;
     color: white;
-}    
+}
+
 #static1 {
     background: red;
 }
+
 #static2 {
     background: rgb(0, 255, 0);
 }
+
 #static3 {
     background: hsl(240, 100%, 50%);
 }
diff --git a/docs/examples/styles/background.py b/docs/examples/styles/background.py
index cef306ddc..6d8669baa 100644
--- a/docs/examples/styles/background.py
+++ b/docs/examples/styles/background.py
@@ -1,12 +1,12 @@
 from textual.app import App
-from textual.widgets import Static
+from textual.widgets import Label
 
 
 class BackgroundApp(App):
     def compose(self):
-        yield Static("Widget 1", id="static1")
-        yield Static("Widget 2", id="static2")
-        yield Static("Widget 3", id="static3")
+        yield Label("Widget 1", id="static1")
+        yield Label("Widget 2", id="static2")
+        yield Label("Widget 3", id="static3")
 
 
 app = BackgroundApp(css_path="background.css")
diff --git a/docs/examples/styles/border.css b/docs/examples/styles/border.css
index 27b9e281d..c12333cb8 100644
--- a/docs/examples/styles/border.css
+++ b/docs/examples/styles/border.css
@@ -1,6 +1,25 @@
+#label1 {
+    background: red 20%;
+    color: red;
+    border: solid red;
+}
+
+#label2 {
+    background: green 20%;
+    color: green;
+    border: dashed green;
+}
+
+#label3 {
+    background: blue 20%;
+    color: blue;
+    border: tall blue;
+}
+
 Screen {
     background: white;
 }
+
 Screen > Label {
     width: 100%;
     height: 5;
@@ -8,19 +27,4 @@ Screen > Label {
     color: white;
     margin: 1;
     box-sizing: border-box;
-}    
-#label1 {
-    background: red 20%;
-    color: red;
-    border: solid red;
-}
-#label2 {
-    background: green 20%;
-    color: green;
-    border: dashed green;
-}
-#label3 {
-    background: blue 20%;
-    color: blue;
-    border: tall blue;
 }
diff --git a/docs/examples/styles/box_sizing.css b/docs/examples/styles/box_sizing.css
index 38f55482d..169faa10e 100644
--- a/docs/examples/styles/box_sizing.css
+++ b/docs/examples/styles/box_sizing.css
@@ -1,7 +1,16 @@
+#static1 {
+    box-sizing: border-box;
+}
+
+#static2 {
+    box-sizing: content-box;
+}
+
 Screen {
     background: white;
     color: black;
 }
+
 App Static {
     background: blue 20%;
     height: 5;
@@ -9,9 +18,3 @@ App Static {
     padding: 1;
     border: wide black;
 }
-#static1 {       
-    box-sizing: border-box;
-}
-#static2 {        
-    box-sizing: content-box;
-}
diff --git a/docs/examples/styles/color.css b/docs/examples/styles/color.css
index b44a0d02e..83242edbc 100644
--- a/docs/examples/styles/color.css
+++ b/docs/examples/styles/color.css
@@ -1,14 +1,17 @@
 Label {
-    height:1fr;
+    height: 1fr;
     content-align: center middle;
     width: 100%;
-}    
+}
+
 #label1 {
     color: red;
 }
+
 #label2 {
     color: rgb(0, 255, 0);
 }
+
 #label3 {
-    color: hsl(240, 100%, 50%)
+    color: hsl(240, 100%, 50%);
 }
diff --git a/docs/examples/styles/display.css b/docs/examples/styles/display.css
index 14bbf6fc4..7131fb638 100644
--- a/docs/examples/styles/display.css
+++ b/docs/examples/styles/display.css
@@ -1,12 +1,14 @@
 Screen {
     background: green;
 }
-Static {             
-    height: 5;        
-    background: white;        
-    color: blue;   
-    border: heavy blue;     
+
+Static {
+    height: 5;
+    background: white;
+    color: blue;
+    border: heavy blue;
 }
+
 Static.remove {
     display: none;
 }
diff --git a/docs/examples/styles/grid_gutter.css b/docs/examples/styles/grid_gutter.css
index e4f5240e8..f7936be03 100644
--- a/docs/examples/styles/grid_gutter.css
+++ b/docs/examples/styles/grid_gutter.css
@@ -1,6 +1,6 @@
 Grid {
     grid-size: 2 4;
-    grid-gutter: 1 2  /* (1)! */
+    grid-gutter: 1 2;  /* (1)! */
 }
 
 Label {
diff --git a/docs/examples/styles/height.css b/docs/examples/styles/height.css
index 5baabb27d..81176fa71 100644
--- a/docs/examples/styles/height.css
+++ b/docs/examples/styles/height.css
@@ -1,4 +1,4 @@
-Screen > Widget {     
+Screen > Widget {
     background: green;
     height: 50%;
     color: white;
diff --git a/docs/examples/styles/overflow.css b/docs/examples/styles/overflow.css
index 27eaa81c1..3b68440c7 100644
--- a/docs/examples/styles/overflow.css
+++ b/docs/examples/styles/overflow.css
@@ -8,8 +8,8 @@ Vertical {
 }
 
 Static {
-    margin: 1 2;  
-    background: green 80%;  
+    margin: 1 2;
+    background: green 80%;
     border: green wide;
     color: white 90%;
     height: auto;
diff --git a/docs/examples/styles/padding.css b/docs/examples/styles/padding.css
index 68ad84385..f993ce924 100644
--- a/docs/examples/styles/padding.css
+++ b/docs/examples/styles/padding.css
@@ -4,6 +4,6 @@ Screen {
 }
 
 Label {
-    padding: 4 8;  
-    background: blue 20%;  
-}    
+    padding: 4 8;
+    background: blue 20%;
+}
diff --git a/docs/examples/styles/tint.css b/docs/examples/styles/tint.css
index 312f26a66..596949ece 100644
--- a/docs/examples/styles/tint.css
+++ b/docs/examples/styles/tint.css
@@ -1,8 +1,8 @@
-Label {             
+Label {
     height: 3;
     width: 100%;
     text-style: bold;
-    background: white;        
-    color: black;   
-    content-align: center middle; 
+    background: white;
+    color: black;
+    content-align: center middle;
 }
diff --git a/docs/examples/styles/tint.py b/docs/examples/styles/tint.py
index 3da5f40a7..a77bc4a5e 100644
--- a/docs/examples/styles/tint.py
+++ b/docs/examples/styles/tint.py
@@ -8,7 +8,7 @@ class TintApp(App):
         color = Color.parse("green")
         for tint_alpha in range(0, 101, 10):
             widget = Label(f"tint: green {tint_alpha}%;")
-            widget.styles.tint = color.with_alpha(tint_alpha / 100)
+            widget.styles.tint = color.with_alpha(tint_alpha / 100)  # (1)!
             yield widget
 
 
diff --git a/docs/examples/styles/visibility.css b/docs/examples/styles/visibility.css
index da684c03f..c0f6b2b82 100644
--- a/docs/examples/styles/visibility.css
+++ b/docs/examples/styles/visibility.css
@@ -1,6 +1,7 @@
 Screen {
     background: green;
 }
+
 Label {
     height: 5;
     width: 100%;
@@ -8,6 +9,7 @@ Label {
     color: blue;
     border: heavy blue;
 }
+
 Label.invisible {
     visibility: hidden;
 }