gpui: Add support for slash pattern fills (///) (#23576)

TODO:
- [x] Add BackgroundTag::PatternSlash
- [x] Support metal slash pattern fills
- [x] Support blade slash pattern fills
---

Adds support for a new background type in gpui, `pattern_slash`.

Usage:

```rust
div().size(px(56.0)).bg(pattern_slash(gpui::red()))
```
This will create a 56px square with a red slash pattern fill.

You can run the pattern example with `cargo run -p gpui --example
pattern`:

![CleanShot 2025-01-23 at 16 22
09@2x](https://github.com/user-attachments/assets/39d9f8c8-816c-4d3b-bc75-fcc122747e17)

---

After talking with @as-cii at length about how we want to support
patterns in gpui, we decided for now we'll simply add a new
BackgroundTag specific to this pattern.

It isn't the best long term plan however – we'll likely want to
introduce the concept of a `Fill` at some point so we can have
`Fill::Solid`, `Fill::Gradient(LinearGradient)`, etc in the future.

The pattern is designed to seamlessly tile vertically for elements of
the same height. For example, for use in editor line backgrounds:

![CleanShot 2025-01-23 at 16 27
41@2x](https://github.com/user-attachments/assets/d51b94bc-cfc2-4aff-89e3-289a04ea8841)

---


Release Notes:

(do we do gpui release notes?)
- Adds support for slash pattern fills in `gpui`.

---------

Co-authored-by: Antonio Scandurra <me@as-cii.com>
This commit is contained in:
Nate Butler 2025-01-28 11:33:34 -05:00 committed by GitHub
parent 070890d361
commit 23672987ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 183 additions and 24 deletions

View file

@ -212,7 +212,6 @@ flume = "0.11"
rand.workspace = true
windows.workspace = true
windows-core = "0.58"
[[example]]
name = "hello_world"
path = "examples/hello_world.rs"
@ -221,18 +220,22 @@ path = "examples/hello_world.rs"
name = "image"
path = "examples/image/image.rs"
[[example]]
name = "set_menus"
path = "examples/set_menus.rs"
[[example]]
name = "window_shadow"
path = "examples/window_shadow.rs"
[[example]]
name = "input"
path = "examples/input.rs"
[[example]]
name = "opacity"
path = "examples/opacity.rs"
[[example]]
name = "pattern"
path = "examples/pattern.rs"
[[example]]
name = "set_menus"
path = "examples/set_menus.rs"
[[example]]
name = "shadow"
path = "examples/shadow.rs"
@ -245,10 +248,10 @@ path = "examples/svg/svg.rs"
name = "text_wrapper"
path = "examples/text_wrapper.rs"
[[example]]
name = "opacity"
path = "examples/opacity.rs"
[[example]]
name = "uniform_list"
path = "examples/uniform_list.rs"
[[example]]
name = "window_shadow"
path = "examples/window_shadow.rs"