Commit graph

26 commits

Author SHA1 Message Date
Nate Butler
19d6e067af
Toggle & Switch (#21979)
![CleanShot 2024-12-13 at 11 27
39@2x](https://github.com/user-attachments/assets/7c7828c0-c5c7-4dc6-931e-722366d4f15a)

- Adds the Switch component
- Updates `Selected`, `Selectable` -> `ToggleState`, `Toggleable`
- Adds `checkbox` and `switch` functions to align better with other
elements in our layout system.

We decided not to merge Switch and Checkbox. However, in a followup I'll
introduce a Toggle or AnyToggle enum so we can update
`CheckboxWithLabel` -> `ToggleWithLabel` as this component will work
exactly the same with either a Checkbox or a Switch.

Release Notes:

- N/A
2024-12-13 14:23:02 -05:00
Nate Butler
04ba75e2e5
Add ui::ContentGroup (#20666)
TL;DR our version of [HIG's
Box](https://developer.apple.com/design/human-interface-guidelines/boxes)

We can't use the name `Box` (because rust) or `ContentBox` (because
taffy/styles/css).

---

This PR introduces the `ContentGroup` component, a flexible container
inspired by HIG's `Box` component. It's designed to hold and organize
various UI elements with options to toggle borders and background fills.

**Example usage**:

```rust
ContentGroup::new()
    .flex_1()
    .items_center()
    .justify_center()
    .h_48()
    .child(Label::new("Flexible ContentBox"))
```

Here are some configurations:

- Default: Includes both border and fill.
- Borderless: No border for a clean look.
- Unfilled: No background fill for a transparent appearance.

**Preview**:

![CleanShot 2024-11-14 at 07 05
15@2x](https://github.com/user-attachments/assets/c838371e-e24f-46f0-94b4-43c078e8f14e)

---

_This PR was written by a large language model with input from the
author._

Release Notes:

- N/A
2024-11-14 08:25:48 -05:00
Nate Butler
94d8ead270
Refactor Spacing into DynamicSpacing using proc macro (#20504)
Density tracking issue: #18078 

This PR refactors our spacing system to use a more flexible and
maintainable approach. We've replaced the static `Spacing` enum with a
dynamically generated `DynamicSpacing` enum using a proc macro.

Enum variants now use a `BaseXX` format, where XX = the pixel value @
default rem size and the default UI density.

For example:

`CustomSpacing::Base16` would return 16px at the default UI scale &
density.

I'd love to find another name other than `Base` that is clear (to avoid
base_10, etc confusion), let me know if you have any ideas!

Changes:

- Introduced a new `derive_dynamic_spacing` proc macro to generate the
`DynamicSpacing` enum
- Updated all usages of `Spacing` to use the new `DynamicSpacing`
- Removed the `custom_spacing` function, mapping previous usages to
appropriate `DynamicSpacing` variants
- Improved documentation and type safety for spacing values

New usage example:

```rust
.child(
    div()
        .flex()
        .flex_none()
        .m(DynamicSpacing::Base04.px(cx))
        .size(DynamicSpacing::Base16.rems(cx))
        .children(icon),
)
```

vs old usage example:

```
.child(
    div()
        .flex()
        .flex_none()
        .m(Spacing::Small.px(cx))
        .size(custom_spacing(px(16.)))
        .children(icon),
)
```

Release Notes:

- N/A
2024-11-11 11:08:55 -05:00
Nate Butler
f6fbf662b4
Add ui::ComponentPreview (#20319)
The `ComponentPreview` trait enables rendering storybook-like previews
of components inside of Zed.


![CleanShot 2024-11-06 at 16 32
25@2x](https://github.com/user-attachments/assets/6894663f-1bbc-4a40-b420-33882e9e239a)


This initial version will work for any component that doesn't return a
view.

Example impl:

```rust
impl ComponentPreview for Checkbox {
    fn description() -> impl Into<Option<&'static str>> {
        "A checkbox lets people choose between opposing..."
    }

    fn examples() -> Vec<ComponentExampleGroup<Self>> {
        vec![
            example_group(
                "Default",
                vec![
                    single_example(
                        "Unselected",
                        Checkbox::new("checkbox_unselected", Selection::Unselected),
                    ),
                    // ... more examples
                ],
            ),
            // ... more examples
        ]
    }
}
```

Example usage:

```rust
fn render_components_page(&self, cx: &ViewContext<Self>) -> impl IntoElement {
        v_flex()
            .gap_2()
            .child(Checkbox::render_component_previews(cx))
            .child(Icon::render_component_previews(cx))
    }
}
```

Release Notes:

- N/A
2024-11-06 16:54:18 -05:00
Nate Butler
8376dd2011
ui crate docs & spring cleaning (#18768)
Similar to https://github.com/zed-industries/zed/pull/18690 &
https://github.com/zed-industries/zed/pull/18695, this PR enables
required docs for `ui` and does some cleanup.

Changes:
- Enables the `deny(missing_docs)` crate-wide.
- Adds `allow(missing_docs)` on many modules until folks pick them up to
document them
- Documents some modules (all in `ui/src/styles`)
- Crate root-level organization: Traits move to `traits`, other misc
organization
- Cleaned out a bunch of unused code.

Note: I'd like to remove `utils/format_distance` but the assistant panel
uses it. To move it over to use the `time_format` crate we may need to
update it to use `time` instead of `chrono`. Needs more investigation.

Release Notes:

- N/A
2024-10-05 23:28:34 -04:00
Nate Butler
1ab247756a
Add Tool Strip (#11756)
Release Notes:

- N/A

---------

Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>
2024-05-13 17:58:08 -04:00
Nate Butler
97512be378
Add wiring for UI density (#11260)
Note: You shouldn't use the `unstable.ui_density` setting – it is only
being added for testing and to enable new UI components to be built with
density in mind. Don't expect this to work well, or at all right now.

Adds some of the basic wiring we'll need to start scaling UI elements
throughout the app based on a desired density setting.

Release Notes:

- N/A
2024-05-01 14:28:52 -04:00
Nate Butler
366d7e7728
Break typography styles out of StyledExt (#11013)
- Centralizes typography-related UI styles and methods in
`styles/typography.rs`
- Breaks the typography-related styles out of `StyledExt`. This means we
add a `StyledTypography` trait – this should more or less be an
invisible change as we publish it in the prelude.
- adds the ability to easily grab the UI or Buffer font sizes
(`ui_font_size`, `buffer_font_size`) with `TextSize::UI`,
`TextSize::Editor`

Release Notes:

- N/A
2024-04-25 17:42:53 -04:00
Antonio Scandurra
6a7761e620
Merge ElementContext into WindowContext (#10979)
The new `ElementContext` was originally introduced to ensure the element
APIs could only be used inside of elements. Unfortunately, there were
many places where some of those APIs needed to be used, so
`WindowContext::with_element_context` was introduced, which defeated the
original safety purposes of having a specific context for elements.

This pull request merges `ElementContext` into `WindowContext` and adds
(debug) runtime checks to APIs that can only be used during certain
phases of element drawing.

Release Notes:

- N/A

---------

Co-authored-by: Nathan Sobo <nathan@zed.dev>
2024-04-25 12:54:39 +02:00
Marshall Bowers
c1f1c5e75f
ui: Refine TitleBar component (#9415)
This PR continues the refinements to the `TitleBar` component.

Here are the notable changes:

- `KeyBindingDisplay` and `PlatformStyle` have been unified into a
single `PlatformStyle`.
- This provides us a consistent way for adapting UI to different
platform styles.
- `PlatformTitlebar` has been renamed to `TitleBar`.
  - The `Platform` prefix was irrelevant.
- The Windows window controls have been factored out into a separate
module and have been componentized.

<img width="1283" alt="Screenshot 2024-03-15 at 3 34 38 PM"
src="https://github.com/zed-industries/zed/assets/1486634/07da391f-828b-48bf-8849-58863f4ccce7">

> I'm missing the Segoe Fluent Icons font, so that's why the aren't
rendering properly.

Release Notes:

- N/A
2024-03-15 15:48:07 -04:00
Marshall Bowers
404adbce5b
Encode rem values derived from pixels using rems_from_px (#9367)
This PR adds a new `rems_from_px` helper function that can be used to
compute rem values based on a pixel value.

This is something we do fairly commonly, where we want to express a size
that is a given pixel size at the base rem size (e.g., "14px when the
rem size is 16px").

`rems_from_px` helps make the intent more explicit, as well as prevent
the base rem size from being duplicated everywhere.

Note: Ideally we would want `rems_from_px` to be `const`, but that
depends on https://github.com/rust-lang/rust/issues/57241.

Release Notes:

- N/A
2024-03-14 16:39:55 -04:00
Mikayla
c05edee2b5
Port the rest of the app 2024-01-21 20:26:33 -08:00
Marshall Bowers
90f4c70a82
Rename h_stack and v_stack to h_flex and v_flex, respectively (#4053)
This PR renames the `h_stack` and `v_stack` to `h_flex` and `v_flex`,
respectively.

We were previously using `h_stack` and `v_stack` to match SwiftUI, but
`h_flex` and `v_flex` fit better with the web/flexbox terminology that
the rest of GPUI uses.

Additionally, we were already calling the utility functions used to
implement `h_stack` and `v_stack` by the new names.

Release Notes:

- N/A
2024-01-15 11:34:06 -05:00
Marshall Bowers
7ed3f5f392
Clean up references in doc comments in ui and theme crates (#3985)
This PR cleans up a number of references in doc comments in the `ui` and
`theme` crates so that `rustdoc` will link and display them correctly.

Release Notes:

- N/A
2024-01-09 15:22:36 -05:00
Nate Butler
9747c10ce8 Document UI modules
Co-Authored-By: Antonio Scandurra <me@as-cii.com>
2024-01-09 12:57:12 -05:00
Marshall Bowers
fa53353c57
Rename IconElement to just Icon (#3974)
This PR renames the `IconElement` component to just `Icon`.

This better matches the rest of our components, as `IconElement` was the
only one using this naming convention.

The `Icon` enum has been renamed to `IconName` to free up the name.

I was trying to come up with a way that would allow rendering an
`Icon::Zed` directly (and thus make the `IconElement` a hidden part of
the API), but I couldn't come up with a way to do this cleanly.

Release Notes:

- N/A
2024-01-09 10:11:20 -05:00
Nate Butler
dcb9c0b9d8 Merge branch 'main' into copilot-ui 2024-01-05 15:56:33 -05:00
Nate Butler
9d4d58a915 Implement Tinted buttons and selected_style for buttons 2024-01-05 11:19:58 -05:00
Nate Butler
bca900a5d3 Add Headline component 2024-01-05 00:40:08 -05:00
Max Brunsfeld
4305c5fdbe Remove 2 suffix for ui, storybook, text
Co-authored-by: Mikayla <mikayla@zed.dev>
2024-01-03 12:33:51 -08:00
Marshall Bowers
45f3a98359
Remove old ui and storybook crates (#3125)
This PR deletes the old `ui` and `storybook` crates in favor of their
newer variants that we'll be landing to `main` in the near future.

### Motivation

These crates are based off the old version of GPUI 2 (the `gpui2`
crate).

At this point we have since transitioned to the new version of GPUI 2
(the `gpui3` crate, currently still on the `gpui2` branch).

Having both copies around is confusing, so the old ones are going the
way of the dinosaurs.

Release Notes:

- N/A
2023-10-12 17:40:20 -04:00
Marshall Bowers
456baaa112
Mainline GPUI2 UI work (#3099)
This PR mainlines the current state of new GPUI2-based UI from the
`gpui2-ui` branch.

Included in this is a performance improvement to make use of the
`TextLayoutCache` when calling `layout` for `Text` elements.

Release Notes:

- N/A

---------

Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Antonio Scandurra <me@as-cii.com>
2023-10-06 13:18:56 -04:00
Marshall Bowers
9e1f7c4c18
Mainline GPUI2 UI work (#3079)
This PR mainlines the current state of new GPUI2-based UI from the
`gpui2-ui` branch.

Release Notes:

- N/A

---------

Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com>
Co-authored-by: Nate <nate@zed.dev>
2023-10-02 18:20:47 -04:00
Marshall Bowers
f26ca0866c
Mainline GPUI2 UI work (#3062)
This PR mainlines the current state of new GPUI2-based UI from the
`gpui2-ui` branch.

Release Notes:

- N/A

---------

Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
Co-authored-by: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>
Co-authored-by: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com>
Co-authored-by: Nate <nate@zed.dev>
Co-authored-by: Mikayla <mikayla@zed.dev>
2023-09-28 19:36:21 -04:00
Nate Butler
f54634aeb2 Bring UI crate up to date 2023-09-21 23:46:06 -04:00
Marshall Bowers
baa07e935e
Extract UI elements from storybook into new ui crate (#3008)
This PR extracts the various UI elements from the `storybook` crate into
a new `ui` library crate.

Release Notes:

- N/A
2023-09-21 19:25:35 -04:00
Renamed from crates/storybook/src/prelude.rs (Browse further)