# gpui & ui: Use shader for dashed dividers \(\#23839\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/e5943975f9e382f84762c251da4f2afbf3680fb5)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: e5943975f9e382f84762c251da4f2afbf3680fb5

Requested commit: e5943975f9e382f84762c251da4f2afbf3680fb5

Commit: e5943975f9e382f84762c251da4f2afbf3680fb5

Tree: e406c602ffd008dd26a6a3567e2e0cb6eb0fab78

Author: Nate Butler

Committer: GitHub

## Message

```
gpui & ui: Use shader for dashed dividers (#23839)

TODO:
- [x] BackgroundOrientation
- [x] PatternDash
- [x] `pattern_horizontal_dash` & `pattern_vertical_dash`
- [x] Metal dash shader
- [x] Blade dash shader
- [x] Update ui::Divider to use new pattern

---

This PR introduces proper dashed dividers using the new `PatternDash`
background shader.

![CleanShot 2025-01-29 at 09 33
06@2x](https://github.com/user-attachments/assets/2db5af58-1aa9-4ad7-aa52-b9046fbf8584)

Before this we were using 128 elements to create a dashed divider, which
is both expensive, and would not scale beyond a certain size. This
allows us to simplify the divider element as well.

Changes:

- Adds `BackgroundOrientation` to `gpui::color::Background` to allow
specifying a direction for a pattern
- Adds the PatternDash pattern variant
- Updates `ui::Divider`'s dashed variants to be more efficient

Misc:
- Documents the `ui::Divider` component
- Treat `.metal` files as `C` in the Zed project until we get some metal
syntax highlighting.

Release Notes:

- N/A
```

## Parents

- [8442e2b9d88f1050648e35250fd8f6dff493ce0c](https://git.cafe/gitcafe/zed/commit/8442e2b9d88f1050648e35250fd8f6dff493ce0c?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/e5943975f9e382f84762c251da4f2afbf3680fb5?format=markdown)