From 95f0c39106e0a53d028e36730a06747eeefff8c0 Mon Sep 17 00:00:00 2001 From: Akintola Richard Olaoluwa Date: Wed, 17 Jan 2024 15:23:27 +0100 Subject: [PATCH] Add panel Border type to docs (#4035) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 #3978 Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com> --- docs/css_types/border.md | 1 + docs/examples/styles/border_all.py | 1 + docs/examples/styles/border_all.tcss | 6 +- .../__snapshots__/test_snapshots.ambr | 114 +++++++++--------- 4 files changed, 64 insertions(+), 58 deletions(-) diff --git a/docs/css_types/border.md b/docs/css_types/border.md index 00be2f8a98..fdca9683a5 100644 --- a/docs/css_types/border.md +++ b/docs/css_types/border.md @@ -18,6 +18,7 @@ The [``](./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 index 4e5a80675e..df76cbe186 100644 --- 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 index 0b571c1a7a..bfdf48fdd9 100644 --- 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; } diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr index 7dc16d9687..8ee39521f5 100644 --- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr +++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr @@ -4690,133 +4690,133 @@ font-weight: 700; } - .terminal-2436490509-matrix { + .terminal-2091190527-matrix { font-family: Fira Code, monospace; font-size: 20px; line-height: 24.4px; font-variant-east-asian: full-width; } - .terminal-2436490509-title { + .terminal-2091190527-title { font-size: 18px; font-weight: bold; font-family: arial; } - .terminal-2436490509-r1 { fill: #e1e1e1 } - .terminal-2436490509-r2 { fill: #0178d4 } - .terminal-2436490509-r3 { fill: #c5c8c6 } - .terminal-2436490509-r4 { fill: #1e1e1e } + .terminal-2091190527-r1 { fill: #e1e1e1 } + .terminal-2091190527-r2 { fill: #c5c8c6 } + .terminal-2091190527-r3 { fill: #0178d4 } + .terminal-2091190527-r4 { fill: #1e1e1e } - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - AllBordersApp + AllBordersApp - - - - +------------------+┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓ - |ascii|blank╏dashed╏ - +------------------+┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛ - - - ╔══════════════════╗┏━━━━━━━━━━━━━━━━━━┓ - ║double║┃heavy┃hidden/none - ╚══════════════════╝┗━━━━━━━━━━━━━━━━━━┛ - - - ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜ - hkey▐inner▌▌outer▐ - ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▘▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟ - - - ╭──────────────────╮┌──────────────────┐▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎ - │round││solid│▊tall▎ - ╰──────────────────╯└──────────────────┘▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎ - - - █▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█▏▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ - █thick█▏vkey▕▎wide▊ - █▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█▏▕▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ + + + + + +----------------+┏╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┓╔═════════════════╗ + |ascii|blank╏dashed╏║double║ + +----------------+┗╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍╍┛╚═════════════════╝ + + + + ┏━━━━━━━━━━━━━━━━┓▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖ + ┃heavy┃hidden/nonehkey▐inner▌ + ┗━━━━━━━━━━━━━━━━┛▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▘ + + + + ▛▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▜▊█████████████████▎╭────────────────╮┌─────────────────┐ + ▌outer▐▊panel▎│round││solid│ + ▙▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▟▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎╰────────────────╯└─────────────────┘ + + + + ▊▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▎█▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█▏▕▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ + ▊tall▎█thick█▏vkey▕▎wide▊ + ▊▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▎█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█▏▕▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔ +