Add panel Border type to docs (Textualize#4035)

* Add panel Border type to docs * Add panel border description * Add Label with panel border to Grid * Add style for panel id and change grid-size from 3 5 to 4 4 issues Textualize#3978 Co-authored-by: Rodrigo Girão Serrão <[email protected]>
ggozad · Jan 17, 2024 · 95f0c39 · 95f0c39
1 parent 0ad03f3
commit 95f0c39
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 58 deletions.
diff --git a/docs/css_types/border.md b/docs/css_types/border.md
@@ -18,6 +18,7 @@ The [`<border>`](./border.md) type can take any of the following values:
 | `inner`     | Thick solid border.                                      |
 | `none`      | Disabled border.                                         |
 | `outer`     | Solid border with additional space around content.       |
+| `panel`     | Solid border with thick top.                             |
 | `round`     | Rounded corners.                                         |
 | `solid`     | Solid border.                                            |
 | `tall`      | Solid border with additional space top and bottom.       |

diff --git a/docs/examples/styles/border_all.py b/docs/examples/styles/border_all.py
@@ -17,6 +17,7 @@ def compose(self):
             Label("hkey", id="hkey"),
             Label("inner", id="inner"),
             Label("outer", id="outer"),
+            Label("panel", id="panel"),
             Label("round", id="round"),
             Label("solid", id="solid"),
             Label("tall", id="tall"),

diff --git a/docs/examples/styles/border_all.tcss b/docs/examples/styles/border_all.tcss
@@ -34,6 +34,10 @@
     border: outer $accent;
 }
 
+#panel {
+    border: panel $accent;
+}
+
 #round {
     border: round $accent;
 }
@@ -59,7 +63,7 @@
 }
 
 Grid {
-    grid-size: 3 5;
+    grid-size: 4 4;
     align: center middle;
     grid-gutter: 1 2;
 }