Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Spacing into DynamicSpacing using proc macro (#20504)

Browse source 
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
This commit is contained in:
Nate Butler 2024-11-11 11:08:55 -05:00 • committed by GitHub
parent 93ab6ad922
commit 94d8ead270
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 292 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

8
crates/ui/src/components/button/button.rs
View file

@ -1,7 +1,9 @@
#![allow(missing_docs)]
use gpui::{AnyView, DefiniteLength};
use crate::{prelude::*, ElevationIndex, IconPosition, KeyBinding, Spacing, TintColor};
use crate::{
prelude::*, Color, DynamicSpacing, ElevationIndex, IconPosition, KeyBinding, TintColor,
};
use crate::{
ButtonCommon, ButtonLike, ButtonSize, ButtonStyle, IconName, IconSize, Label, LineHeightStyle,
};
@ -398,7 +400,7 @@ impl RenderOnce for Button {
self.base.child(
h_flex()
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.when(self.icon_position == Some(IconPosition::Start), |this| {
this.children(self.icon.map(|icon| {
ButtonIcon::new(icon)
@ -412,7 +414,7 @@ impl RenderOnce for Button {
})
.child(
h_flex()
.gap(Spacing::Medium.rems(cx))
.gap(DynamicSpacing::Base06.rems(cx))
.justify_between()
.child(
Label::new(label)

10
crates/ui/src/components/button/button_like.rs
View file

@ -3,7 +3,7 @@ use gpui::{relative, CursorStyle, DefiniteLength, MouseButton};
use gpui::{transparent_black, AnyElement, AnyView, ClickEvent, Hsla, Rems};
use smallvec::SmallVec;
use crate::{prelude::*, ElevationIndex, Spacing};
use crate::{prelude::*, DynamicSpacing, ElevationIndex};
/// A trait for buttons that can be Selected. Enables setting the [`ButtonStyle`] of a button when it is selected.
pub trait SelectableButton: Selectable {
@ -491,10 +491,12 @@ impl RenderOnce for ButtonLike {
ButtonLikeRounding::Left => this.rounded_l_md(),
ButtonLikeRounding::Right => this.rounded_r_md(),
})
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.map(|this| match self.size {
ButtonSize::Large => this.px(Spacing::Medium.rems(cx)),
ButtonSize::Default | ButtonSize::Compact => this.px(Spacing::Small.rems(cx)),
ButtonSize::Large => this.px(DynamicSpacing::Base06.rems(cx)),
ButtonSize::Default | ButtonSize::Compact => {
this.px(DynamicSpacing::Base04.rems(cx))
}
ButtonSize::None => this,
})
.bg(style.enabled(self.layer, cx).background)

8
crates/ui/src/components/checkbox.rs
View file

@ -85,7 +85,7 @@ impl RenderOnce for Checkbox {
.id(self.id)
.justify_center()
.items_center()
.size(crate::styles::custom_spacing(cx, 20.))
.size(DynamicSpacing::Base20.rems(cx))
.group(group_id.clone())
.child(
div()
@ -93,8 +93,8 @@ impl RenderOnce for Checkbox {
.flex_none()
.justify_center()
.items_center()
.m(Spacing::Small.px(cx))
.size(crate::styles::custom_spacing(cx, 16.))
.m(DynamicSpacing::Base04.px(cx))
.size(DynamicSpacing::Base16.rems(cx))
.rounded_sm()
.bg(bg_color)
.border_1()
@ -191,7 +191,7 @@ impl CheckboxWithLabel {
impl RenderOnce for CheckboxWithLabel {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_flex()
.gap(Spacing::Large.rems(cx))
.gap(DynamicSpacing::Base08.rems(cx))
.child(Checkbox::new(self.id.clone(), self.checked).on_click({
let on_click = self.on_click.clone();
move |checked, cx| {

8
crates/ui/src/components/icon.rs
View file

@ -90,10 +90,10 @@ impl IconSize {
pub fn square_components(&self, cx: &mut WindowContext) -> (Pixels, Pixels) {
let icon_size = self.rems() * cx.rem_size();
let padding = match self {
IconSize::Indicator => Spacing::None.px(cx),
IconSize::XSmall => Spacing::XSmall.px(cx),
IconSize::Small => Spacing::XSmall.px(cx),
IconSize::Medium => Spacing::XSmall.px(cx),
IconSize::Indicator => DynamicSpacing::Base00.px(cx),
IconSize::XSmall => DynamicSpacing::Base02.px(cx),
IconSize::Small => DynamicSpacing::Base02.px(cx),
IconSize::Medium => DynamicSpacing::Base02.px(cx),
};
(icon_size, padding)

2
crates/ui/src/components/keybinding.rs
View file

@ -84,7 +84,7 @@ impl RenderOnce for KeyBinding {
.join(" ")
)
})
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.flex_none()
.children(self.key_binding.keystrokes().iter().map(|keystroke| {
let key_icon = self.icon_for_key(keystroke);

2
crates/ui/src/components/list/list.rs
View file

@ -80,7 +80,7 @@ impl RenderOnce for List {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
v_flex()
.w_full()
.py(Spacing::Small.rems(cx))
.py(DynamicSpacing::Base04.rems(cx))
.children(self.header)
.map(|this| match (self.children.is_empty(), self.toggle) {
(false, _) => this.children(self.children),

6
crates/ui/src/components/list/list_header.rs
View file

@ -104,10 +104,10 @@ impl RenderOnce for ListHeader {
.items_center()
.justify_between()
.w_full()
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.child(
h_flex()
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.children(self.toggle.map(|is_open| {
Disclosure::new("toggle", is_open).on_toggle(self.on_toggle.clone())
}))
@ -115,7 +115,7 @@ impl RenderOnce for ListHeader {
div()
.id("label_container")
.flex()
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.items_center()
.children(self.start_slot)
.child(Label::new(self.label.clone()).color(Color::Muted))

8
crates/ui/src/components/list/list_item.rs
View file

@ -171,7 +171,7 @@ impl RenderOnce for ListItem {
// When an item is inset draw the indent spacing outside of the item
.when(self.inset, |this| {
this.ml(self.indent_level as f32 * self.indent_step_size)
.px(Spacing::Small.rems(cx))
.px(DynamicSpacing::Base04.rems(cx))
})
.when(!self.inset && !self.disabled, |this| {
this
@ -195,7 +195,7 @@ impl RenderOnce for ListItem {
.relative()
.items_center()
.gap_1()
.px(Spacing::Medium.rems(cx))
.px(DynamicSpacing::Base06.rems(cx))
.map(|this| match self.spacing {
ListItemSpacing::Dense => this,
ListItemSpacing::Sparse => this.py_1(),
@ -248,7 +248,7 @@ impl RenderOnce for ListItem {
.flex_grow()
.flex_shrink_0()
.flex_basis(relative(0.25))
.gap(Spacing::Medium.rems(cx))
.gap(DynamicSpacing::Base06.rems(cx))
.map(|list_content| {
if self.overflow_x {
list_content
@ -276,7 +276,7 @@ impl RenderOnce for ListItem {
h_flex()
.h_full()
.absolute()
.right(Spacing::Medium.rems(cx))
.right(DynamicSpacing::Base06.rems(cx))
.top_0()
.visible_on_hover("list_item")
.child(end_hover_slot),

2
crates/ui/src/components/list/list_separator.rs
View file

@ -10,7 +10,7 @@ impl RenderOnce for ListSeparator {
div()
.h_px()
.w_full()
.my(Spacing::Medium.rems(cx))
.my(DynamicSpacing::Base06.rems(cx))
.bg(cx.theme().colors().border_variant)
}
}

4
crates/ui/src/components/list/list_sub_header.rs
View file

@ -45,8 +45,8 @@ impl RenderOnce for ListSubHeader {
.flex_1()
.w_full()
.relative()
.pb(Spacing::Small.rems(cx))
.px(Spacing::XSmall.rems(cx))
.pb(DynamicSpacing::Base04.rems(cx))
.px(DynamicSpacing::Base02.rems(cx))
.child(
div()
.h_6()

32
crates/ui/src/components/modal.rs
View file

@ -1,8 +1,8 @@
#![allow(missing_docs)]
use crate::{
h_flex, v_flex, Clickable, Color, Headline, HeadlineSize, IconButton, IconButtonShape,
IconName, Label, LabelCommon, LabelSize, Spacing,
h_flex, v_flex, Clickable, Color, DynamicSpacing, Headline, HeadlineSize, IconButton,
IconButtonShape, IconName, Label, LabelCommon, LabelSize,
};
use gpui::{prelude::FluentBuilder, *};
use smallvec::SmallVec;
@ -78,7 +78,7 @@ impl RenderOnce for Modal {
.id(self.container_id.clone())
.w_full()
.flex_1()
.gap(Spacing::Large.rems(cx))
.gap(DynamicSpacing::Base08.rems(cx))
.when_some(
self.container_scroll_handler,
|this, container_scroll_handle| {
@ -160,10 +160,10 @@ impl RenderOnce for ModalHeader {
.flex_none()
.justify_between()
.w_full()
.px(Spacing::XLarge.rems(cx))
.pt(Spacing::Large.rems(cx))
.pb(Spacing::Small.rems(cx))
.gap(Spacing::Large.rems(cx))
.px(DynamicSpacing::Base12.rems(cx))
.pt(DynamicSpacing::Base08.rems(cx))
.pb(DynamicSpacing::Base04.rems(cx))
.gap(DynamicSpacing::Base08.rems(cx))
.when(self.show_back_button, |this| {
this.child(
IconButton::new("back", IconName::ArrowLeft)
@ -253,7 +253,7 @@ impl RenderOnce for ModalFooter {
h_flex()
.flex_none()
.w_full()
.p(Spacing::Large.rems(cx))
.p(DynamicSpacing::Base08.rems(cx))
.justify_between()
.child(div().when_some(self.start_slot, |this, start_slot| this.child(start_slot)))
.child(div().when_some(self.end_slot, |this, end_slot| this.child(end_slot)))
@ -330,7 +330,7 @@ impl RenderOnce for Section {
let children = if self.contained {
v_flex()
.flex_1()
.when(self.padded, |this| this.px(Spacing::XLarge.rems(cx)))
.when(self.padded, |this| this.px(DynamicSpacing::Base12.rems(cx)))
.child(
v_flex()
.w_full()
@ -338,17 +338,17 @@ impl RenderOnce for Section {
.border_1()
.border_color(cx.theme().colors().border)
.bg(section_bg)
.py(Spacing::Medium.rems(cx))
.gap_y(Spacing::Small.rems(cx))
.py(DynamicSpacing::Base06.rems(cx))
.gap_y(DynamicSpacing::Base04.rems(cx))
.child(div().flex().flex_1().size_full().children(self.children)),
)
} else {
v_flex()
.w_full()
.flex_1()
.gap_y(Spacing::Small.rems(cx))
.gap_y(DynamicSpacing::Base04.rems(cx))
.when(self.padded, |this| {
this.px(Spacing::Medium.rems(cx) + Spacing::Medium.rems(cx))
this.px(DynamicSpacing::Base06.rems(cx) + DynamicSpacing::Base06.rems(cx))
})
.children(self.children)
};
@ -359,7 +359,7 @@ impl RenderOnce for Section {
.child(
v_flex()
.flex_none()
.px(Spacing::XLarge.rems(cx))
.px(DynamicSpacing::Base12.rems(cx))
.children(self.header)
.when_some(self.meta, |this, meta| {
this.child(Label::new(meta).size(LabelSize::Small).color(Color::Muted))
@ -399,7 +399,7 @@ impl RenderOnce for SectionHeader {
h_flex()
.id(self.label.clone())
.w_full()
.px(Spacing::Large.rems(cx))
.px(DynamicSpacing::Base08.rems(cx))
.child(
div()
.h_7()
@ -407,7 +407,7 @@ impl RenderOnce for SectionHeader {
.items_center()
.justify_between()
.w_full()
.gap(Spacing::Small.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.child(
div().flex_1().child(
Label::new(self.label.clone())

2
crates/ui/src/components/radio.rs
View file

@ -36,7 +36,7 @@ impl RenderOnce for RadioWithLabel {
let border_width = rems_from_px(1.);
h_flex()
.id(self.id)
.gap(Spacing::Large.rems(cx))
.gap(DynamicSpacing::Base08.rems(cx))
.group("")
.child(
div()

4
crates/ui/src/components/tab.rs
View file

@ -158,8 +158,8 @@ impl RenderOnce for Tab {
.group("")
.relative()
.h(rems(Self::CONTENT_HEIGHT_IN_REMS))
.px(crate::custom_spacing(cx, 4.))
.gap(Spacing::Small.rems(cx))
.px(DynamicSpacing::Base04.px(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.text_color(text_color)
.child(start_slot)
.children(self.children)

8
crates/ui/src/components/tab_bar.rs
View file

@ -107,8 +107,8 @@ impl RenderOnce for TabBar {
this.child(
h_flex()
.flex_none()
.gap(Spacing::Small.rems(cx))
.px(Spacing::Medium.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.px(DynamicSpacing::Base06.rems(cx))
.border_b_1()
.border_r_1()
.border_color(cx.theme().colors().border)
@ -145,8 +145,8 @@ impl RenderOnce for TabBar {
this.child(
h_flex()
.flex_none()
.gap(Spacing::Small.rems(cx))
.px(Spacing::Medium.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.px(DynamicSpacing::Base06.rems(cx))
.border_b_1()
.border_l_1()
.border_color(cx.theme().colors().border)

4
crates/ui/src/components/tool_strip.rs
View file

@ -46,8 +46,8 @@ impl RenderOnce for ToolStrip {
Axis::Horizontal => element.h_flex(),
})
.flex_none()
.gap(Spacing::Small.rems(cx))
.p(Spacing::XSmall.rems(cx))
.gap(DynamicSpacing::Base04.rems(cx))
.p(DynamicSpacing::Base02.rems(cx))
.border_1()
.border_color(cx.theme().colors().border)
.rounded(rems_from_px(6.0))