Add UI docs (#3230)

Not as exciting as it sounds - Just starting to scaffold out some UI
docs and want to get feedback.

Release Notes:

- N/A

crates/ui2/docs/building-ui.md

@@ -0,0 +1,39 @@
+# Building UI with GPUI
+
+## Common patterns
+
+### Using the Label Component to Create UI Text
+
+The `Label` component helps in displaying text on user interfaces. It creates an interface where specific parameters such as label color, line height style, and strikethrough can be set.
+
+Firstly, to create a `Label` instance, use the `Label::new()` function. This function takes a string that will be displayed as text in the interface.
+
+```rust
+Label::new("Hello, world!");
+```
+
+Now let's dive a bit deeper into how to customize `Label` instances:
+
+- **Setting Color:** To set the color of the label using various predefined color options such as `Default`, `Muted`, `Created`, `Modified`, `Deleted`, etc, the `color()` function is called on the `Label` instance:
+
+    ```rust
+    Label::new("Hello, world!").color(LabelColor::Default);
+    ```
+
+- **Setting Line Height Style:** To set the line height style, the `line_height_style()` function is utilized:
+
+    ```rust
+    Label::new("Hello, world!").line_height_style(LineHeightStyle::TextLabel);
+    ```
+
+- **Adding a Strikethrough:** To add a strikethrough in a `Label`, the  `set_strikethrough()` function is used:
+
+    ```rust
+    Label::new("Hello, world!").set_strikethrough(true);
+    ```
+
+That's it! Now you can use the `Label` component to create and customize text on your application's interface.
+
+## Building a new component
+
+TODO

crates/ui2/docs/elevation.md

@@ -1,57 +0,0 @@
-# Elevation
-
-Elevation in Zed applies to all surfaces and components. Elevation is categorized into levels.
-
-Elevation accomplishes the following:
-- Allows surfaces to move in front of or behind others, such as content scrolling beneath app top bars.
-- Reflects spatial relationships, for instance, how a floating action button’s shadow intimates its disconnection from a collection of cards.
-- Directs attention to structures at the highest elevation, like a temporary dialog arising in front of other surfaces.
-
-Elevations are the initial elevation values assigned to components by default.
-
-Components may transition to a higher elevation in some cases, like user interations.
-
-On such occasions, components transition to predetermined dynamic elevation offsets. These are the typical elevations to which components move when they are not at rest.
-
-## Understanding Elevation
-
-Elevation can be thought of as the physical closeness of an element to the user. Elements with lower elevations are physically further away from the user on the z-axis and appear to be underneath elements with higher elevations.
-
-Material Design 3 has a some great visualizations of elevation that may be helpful to understanding the mental modal of elevation. [Material Design – Elevation](https://m3.material.io/styles/elevation/overview)
-
-## Elevation Levels
-
-Zed integrates six unique elevation levels in its design system. The elevation of a surface is expressed as a whole number ranging from 0 to 5, both numbers inclusive. A component’s elevation is ascertained by combining the component’s resting elevation with any dynamic elevation offsets.
-
-The levels are detailed as follows:
-
-0. App Background
-1. UI Surface
-2. Elevated Elements
-3. Wash
-4. Focused Element
-5. Dragged Element
-
-### 0. App Background
-
-The app background constitutes the lowest elevation layer, appearing behind all other surfaces and components. It is predominantly used for the background color of the app.
-
-### 1. UI Surface
-
-The UI Surface is the standard elevation for components and is placed above the app background. It is generally used for the background color of the app bar, card, and sheet.
-
-### 2. Elevated Elements
-
-Elevated elements appear above the UI surface layer surfaces and components. Elevated elements are predominantly used for creating popovers, context menus, and tooltips.
-
-### 3. Wash
-
-Wash denotes a distinct elevation reserved to isolate app UI layers from high elevation components such as modals, notifications, and overlaid panels. The wash may not consistently be visible when these components are active. This layer is often referred to as a scrim or overlay and the background color of the wash is typically deployed in its design.
-
-### 4. Focused Element
-
-Focused elements obtain a higher elevation above surfaces and components at wash elevation. They are often used for modals, notifications, and overlaid panels and indicate that they are the sole element the user is interacting with at the moment.
-
-### 5. Dragged Element
-
-Dragged elements gain the highest elevation, thus appearing above surfaces and components at the elevation of focused elements. These are typically used for elements that are being dragged, following the cursor

crates/ui2/docs/hello-world.md

@@ -0,0 +1,160 @@
+# Hello World
+
+Let's work through the prototypical "Build a todo app" example to showcase how we might build a simple component from scratch.
+
+## Setup
+
+We'll create a headline, a list of todo items, and a form to add new items.
+
+~~~rust
+struct TodoList<V: 'static> {
+    headline: SharedString,
+    items: Vec<TodoItem>,
+    submit_form: ClickHandler<V>
+}
+
+struct TodoItem<V: 'static> {
+    text: SharedString,
+    completed: bool,
+    delete: ClickHandler<V>
+}
+
+impl<V: 'static> TodoList<V> {
+    pub fn new(
+        // Here we impl Into<SharedString>
+        headline: impl Into<SharedString>,
+        items: Vec<TodoItem>,
+        submit_form: ClickHandler<V>
+    ) -> Self {
+        Self {
+            // and here we call .into() so we can simply pass a string
+            // when creating the headline. This pattern is used throughout
+            // outr components
+            headline: headline.into(),
+            items: Vec::new(),
+            submit_form,
+        }
+    }
+}
+~~~
+
+All of this is relatively straightforward.
+
+We use [gpui2::SharedString] in components instead of [std::string::String]. This allows us to [TODO: someone who actually knows please explain why we use SharedString].
+
+When we want to pass an action we pass a `ClickHandler`. Whenever we want to add an action, the struct it belongs to needs to be generic over the view type `V`.
+
+~~~rust
+use gpui2::hsla
+
+impl<V: 'static> TodoList<V> {
+    // ...
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+        div().size_4().bg(hsla(50.0/360.0, 1.0, 0.5, 1.0))
+    }
+}
+~~~
+
+Every component needs a render method, and it should return `impl Component<V>`. This basic component will render a 16x16px yellow square on the screen.
+
+A couple of questions might come to mind:
+
+**Why is `size_4()` 16px, not 4px?**
+
+gpui's style system is based on conventions created by [Tailwind CSS](https://tailwindcss.com/). Here is an example of the list of sizes for `width`: [Width - TailwindCSS Docs](https://tailwindcss.com/docs/width).
+
+I'll quote from the Tailwind [Core Concepts](https://tailwindcss.com/docs/utility-first) docs here:
+
+> Now I know what you’re thinking, “this is an atrocity, what a horrible mess!”
+> and you’re right, it’s kind of ugly. In fact it’s just about impossible to
+> think this is a good idea the first time you see it —
+> you have to actually try it.
+
+As you start using the Tailwind-style conventions you will be surprised how quick it makes it to build out UIs.
+
+**Why `50.0/360.0` in `hsla()`?**
+
+gpui [gpui2::Hsla] use `0.0-1.0` for all it's values, but it is common for tools to use `0-360` for hue.
+
+This may change in the future, but this is a little trick that let's you use familiar looking values.
+
+## Building out the container
+
+Let's grab our [theme2::colors::ThemeColors] from the theme and start building out a basic container.
+
+We can access the current theme's colors like this:
+
+~~~rust
+impl<V: 'static> TodoList<V> {
+    // ...
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+        let color = cx.theme().colors()
+
+        div().size_4().hsla(50.0/360.0, 1.0, 0.5, 1.0)
+    }
+}
+~~~
+
+Now we have access to the complete set of colors defined in the theme.
+
+~~~rust
+use gpui2::hsla
+
+impl<V: 'static> TodoList<V> {
+    // ...
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+        let color = cx.theme().colors()
+
+        div().size_4().bg(color.surface)
+    }
+}
+~~~
+
+Let's finish up some basic styles for the container then move on to adding the other elements.
+
+~~~rust
+use gpui2::hsla
+
+impl<V: 'static> TodoList<V> {
+    // ...
+    fn render(self, _view: &mut V, cx: &mut ViewContext<V>) -> impl Component<V> {
+        let color = cx.theme().colors()
+
+        div()
+            // Flex properties
+            .flex()
+            .flex_col()             // Stack elements vertically
+            .gap_2()                // Add 8px of space between elements
+            // Size properties
+            .w_96()                 // Set width to 384px
+            .p_4()                  // Add 16px of padding on all sides
+            // Color properties
+            .bg(color.surface)      // Set background color
+            .text_color(color.text) // Set text color
+            // Border properties
+            .rounded_md()           // Add 4px of border radius
+            .border()               // Add a 1px border
+            .border_color(color.border)
+            .child(
+                "Hello, world!"
+            )
+    }
+}
+~~~
+
+### Headline
+
+TODO
+
+### List of todo items
+
+TODO
+
+### Input
+
+TODO
+
+
+### End result
+
+TODO

crates/ui2/docs/todo.md

@@ -0,0 +1,25 @@
+## Documentation priorities:
+
+These are the priorities to get documented, in a rough stack rank order:
+
+- [ ] label
+- [ ] button
+- [ ] icon_button
+- [ ] icon
+- [ ] list
+- [ ] avatar
+- [ ] panel
+- [ ] modal
+- [ ] palette
+- [ ] input
+- [ ] facepile
+- [ ] player
+- [ ] stacks
+- [ ] context menu
+- [ ] input
+- [ ] textarea/multiline input (not built - not an editor)
+- [ ] indicator
+- [ ] public actor
+- [ ] keybinding
+- [ ] tab
+- [ ] toast

crates/ui2/src/lib.rs

@@ -7,13 +7,10 @@
 //! This crate is still a work in progress. The initial primitives and components are built for getting all the UI on the screen,
 //! much of the state and functionality is mocked or hard codeded, and performance has not been a focus.
 //!
-//! Expect some inconsistencies from component to component as we work out the best way to build these components.
-//!
-//! ## Design Philosophy
-//!
-//! Work in Progress!
-//!
 
+#![doc = include_str!("../docs/hello-world.md")]
+#![doc = include_str!("../docs/building-ui.md")]
+#![doc = include_str!("../docs/todo.md")]
 // TODO: Fix warnings instead of supressing.
 #![allow(dead_code, unused_variables)]