Make border methods always require an explicit width (#11450)

This PR makes the `border` methods require an explicit width instead of
defaulting to 1px.

This breaks convention with Tailwind, but it makes GPUI more consistent
with itself. We already have an edge case where the parameterized method
had to be named `border_width`, since `border` was taken up by an alias
for the 1px variant.

### Before

```rs
div()
    .border()
    .border_t()
    .border_r()
    .border_b()
    .border_l()
    .border_width(px(7.))
```

### After

```rs
div()
    .border_1()
    .border_t_1()
    .border_r_1()
    .border_b_1()
    .border_l_1()
    .border(px(7.))
```

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2024-05-06 13:22:47 -04:00 committed by GitHub
parent f99b24acca
commit f658af5903
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 49 additions and 55 deletions

View file

@ -622,7 +622,7 @@ impl AssistantChat {
.px_2()
.neg_mx_1()
.rounded_md()
.border()
.border_1()
.border_color(theme.status().error_border)
// .bg(theme.status().error_background)
.text_color(theme.status().error)

View file

@ -2149,7 +2149,7 @@ impl CollabPanel {
.child(list(self.list_state.clone()).size_full())
.child(
v_flex()
.child(div().mx_2().border_primary(cx).border_t())
.child(div().mx_2().border_primary(cx).border_t_1())
.child(
v_flex()
.p_2()

View file

@ -60,7 +60,7 @@ impl CopilotCodeVerification {
h_flex()
.w_full()
.p_1()
.border()
.border_1()
.border_muted(cx)
.rounded_md()
.cursor_pointer()

View file

@ -1817,7 +1817,7 @@ impl EditorElement {
.pr(gpui::px(8.))
.rounded_md()
.shadow_md()
.border()
.border_1()
.border_color(cx.theme().colors().border)
.bg(cx.theme().colors().editor_subheader_background)
.justify_between()

View file

@ -852,7 +852,7 @@ impl Render for ExtensionsPage {
v_flex()
.gap_4()
.p_4()
.border_b()
.border_b_1()
.border_color(cx.theme().colors().border)
.bg(cx.theme().colors().editor_background)
.child(

View file

@ -454,7 +454,7 @@ impl Render for FeedbackModal {
.flex_1()
.bg(cx.theme().colors().editor_background)
.p_2()
.border()
.border_1()
.rounded_md()
.border_color(cx.theme().colors().border)
.child(self.feedback_editor.clone()),
@ -466,7 +466,7 @@ impl Render for FeedbackModal {
h_flex()
.bg(cx.theme().colors().editor_background)
.p_2()
.border()
.border_1()
.rounded_md()
.border_color(if self.valid_email_address() {
cx.theme().colors().border

View file

@ -13,7 +13,7 @@ impl Render for HelloWorld {
.justify_center()
.items_center()
.shadow_lg()
.border()
.border_1()
.border_color(rgb(0x0000ff))
.text_xl()
.text_color(rgb(0xffffff))

View file

@ -86,12 +86,7 @@ fn generate_methods() -> Vec<TokenStream2> {
for (prefix, fields, prefix_doc_string) in border_prefixes() {
methods.push(generate_custom_value_setter(
// The plain method names (e.g., `border`, `border_t`, `border_r`, etc.) are special-cased
// versions of the 1px variants. This better matches Tailwind, but breaks our existing
// convention of the suffix-less variant of the method being the one that accepts a custom value
//
// To work around this, we're assigning a `_width` suffix here.
&format!("{prefix}_width"),
prefix,
quote! { AbsoluteLength },
&fields,
prefix_doc_string,
@ -553,7 +548,6 @@ fn border_prefixes() -> Vec<(&'static str, Vec<TokenStream2>, &'static str)> {
fn border_suffixes() -> Vec<(&'static str, TokenStream2, &'static str)> {
vec![
("", quote! { px(1.)}, "1px"),
("0", quote! { px(0.)}, "0px"),
("1", quote! { px(1.) }, "1px"),
("2", quote! { px(2.) }, "2px"),

View file

@ -551,7 +551,7 @@ impl DevServerProjects {
v_flex()
.w_full()
.bg(cx.theme().colors().title_bar_background) // todo: this should be distinct
.border()
.border_1()
.border_color(cx.theme().colors().border_variant)
.rounded_md()
.my_1()
@ -754,7 +754,7 @@ impl DevServerProjects {
v_flex()
.w_full()
.bg(cx.theme().colors().title_bar_background) // todo: this should be distinct
.border()
.border_1()
.border_color(cx.theme().colors().border_variant)
.rounded_md()
.my_1()

View file

@ -88,7 +88,7 @@ impl RenderOnce for StoryContainer {
.justify_between()
.p_2()
.bg(story_color().background)
.border_b()
.border_b_1()
.border_color(story_color().border)
.child(Story::title(self.title))
.child(
@ -145,7 +145,7 @@ impl Story {
.flex()
.justify_between()
.p_2()
.border_b()
.border_b_1()
.border_color(story_color().border)
.child(Story::title_for::<T>())
.child(
@ -202,7 +202,7 @@ impl Story {
div()
.p_4()
.m_4()
.border()
.border_1()
.border_color(story_color().border)
}
@ -307,7 +307,7 @@ impl RenderOnce for StoryItem {
div()
.rounded_md()
.bg(story_color().card_background)
.border()
.border_1()
.border_color(story_color().border)
.py_1()
.px_2()

View file

@ -133,7 +133,7 @@ impl<V: 'static> TodoList<V> {
.text_color(color.text) // Set text color
// Border properties
.rounded_md() // Add 4px of border radius
.border() // Add a 1px border
.border_1() // Add a 1px border
.border_color(color.border)
.child(
"Hello, world!"

View file

@ -115,7 +115,7 @@ impl RenderOnce for Avatar {
div
})
.when_some(self.border_color, |this, color| {
this.border_width(border_width).border_color(color)
this.border(border_width).border_color(color)
})
.child(
self.image

View file

@ -95,7 +95,7 @@ impl RenderOnce for Checkbox {
.size(crate::styles::custom_spacing(cx, 16.))
.rounded_sm()
.bg(bg_color)
.border()
.border_1()
.border_color(border_color)
.when(!self.disabled, |this| {
this.group_hover(group_id.clone(), |el| {

View file

@ -88,7 +88,7 @@ impl RenderOnce for CollapsibleContainer {
.relative()
.rounded_md()
.bg(styles.background_color)
.border()
.border_1()
.border_color(styles.border_color)
.text_color(styles.text_color)
.overflow_hidden()
@ -97,7 +97,7 @@ impl RenderOnce for CollapsibleContainer {
.overflow_hidden()
.w_full()
.group("toggleable_container_header")
.border_b()
.border_b_1()
.border_color(if self.toggle {
styles.border_color
} else {

View file

@ -393,7 +393,7 @@ impl RenderOnce for IconWithIndicator {
.absolute()
.w_2()
.h_2()
.border()
.border_1()
.border_color(indicator_border_color)
.rounded_full()
.neg_bottom_0p5()

View file

@ -161,7 +161,7 @@ impl RenderOnce for ListItem {
this
// TODO: Add focus state
// .when(self.state == InteractionState::Focused, |this| {
// this.border()
// this.border_1()
// .border_color(cx.theme().colors().border_focused)
// })
.hover(|style| style.bg(cx.theme().colors().ghost_element_hover))
@ -186,7 +186,7 @@ impl RenderOnce for ListItem {
this
// TODO: Add focus state
// .when(self.state == InteractionState::Focused, |this| {
// this.border()
// this.border_1()
// .border_color(cx.theme().colors().border_focused)
// })
.hover(|style| style.bg(cx.theme().colors().ghost_element_hover))

View file

@ -16,7 +16,7 @@ impl Render for CheckboxStory {
.p_2()
.gap_2()
.rounded_md()
.border()
.border_1()
.border_color(cx.theme().colors().border)
.child(Checkbox::new("checkbox-enabled", Selection::Unselected))
.child(Checkbox::new(
@ -31,7 +31,7 @@ impl Render for CheckboxStory {
.p_2()
.gap_2()
.rounded_md()
.border()
.border_1()
.border_color(cx.theme().colors().border)
.child(Checkbox::new("checkbox-disabled", Selection::Unselected).disabled(true))
.child(

View file

@ -124,21 +124,21 @@ impl RenderOnce for Tab {
.map(|this| match self.position {
TabPosition::First => {
if self.selected {
this.pl_px().border_r().pb_px()
this.pl_px().border_r_1().pb_px()
} else {
this.pl_px().pr_px().border_b()
this.pl_px().pr_px().border_b_1()
}
}
TabPosition::Last => {
if self.selected {
this.border_l().border_r().pb_px()
this.border_l_1().border_r_1().pb_px()
} else {
this.pr_px().pl_px().border_b().border_r()
this.pr_px().pl_px().border_b_1().border_r_1()
}
}
TabPosition::Middle(Ordering::Equal) => this.border_l().border_r().pb_px(),
TabPosition::Middle(Ordering::Less) => this.border_l().pr_px().border_b(),
TabPosition::Middle(Ordering::Greater) => this.border_r().pl_px().border_b(),
TabPosition::Middle(Ordering::Equal) => this.border_l_1().border_r_1().pb_px(),
TabPosition::Middle(Ordering::Less) => this.border_l_1().pr_px().border_b_1(),
TabPosition::Middle(Ordering::Greater) => this.border_r_1().pl_px().border_b_1(),
})
.cursor_pointer()
.child(

View file

@ -108,8 +108,8 @@ impl RenderOnce for TabBar {
.flex_none()
.gap(Spacing::Small.rems(cx))
.px(Spacing::Medium.rems(cx))
.border_b()
.border_r()
.border_b_1()
.border_r_1()
.border_color(cx.theme().colors().border)
.children(self.start_children),
)
@ -126,7 +126,7 @@ impl RenderOnce for TabBar {
.top_0()
.left_0()
.size_full()
.border_b()
.border_b_1()
.border_color(cx.theme().colors().border),
)
.child(
@ -146,8 +146,8 @@ impl RenderOnce for TabBar {
.flex_none()
.gap(Spacing::Small.rems(cx))
.px(Spacing::Medium.rems(cx))
.border_b()
.border_l()
.border_b_1()
.border_l_1()
.border_color(cx.theme().colors().border)
.children(self.end_children),
)

View file

@ -6,7 +6,7 @@ use crate::ElevationIndex;
fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -> E {
this.bg(cx.theme().colors().elevated_surface_background)
.rounded(px(8.))
.border()
.border_1()
.border_color(cx.theme().colors().border_variant)
.shadow(index.shadow())
}

View file

@ -170,7 +170,7 @@ impl Render for TextField {
.bg(style.background_color)
.text_color(style.text_color)
.rounded_lg()
.border()
.border_1()
.border_color(style.border_color)
.min_w_48()
.w_full()

View file

@ -623,9 +623,9 @@ impl Render for Dock {
Axis::Vertical => this.h(size).w_full().flex_col(),
})
.map(|this| match self.position() {
DockPosition::Left => this.border_r(),
DockPosition::Right => this.border_l(),
DockPosition::Bottom => this.border_t(),
DockPosition::Left => this.border_r_1(),
DockPosition::Right => this.border_l_1(),
DockPosition::Bottom => this.border_t_1(),
})
.child(
div()

View file

@ -100,7 +100,7 @@ impl Render for Toolbar {
.when(has_left_items || has_right_items, |this| {
this.gap(Spacing::Large.rems(cx))
})
.border_b()
.border_b_1()
.border_color(cx.theme().colors().border_variant)
.bg(cx.theme().colors().toolbar_background)
.child(

View file

@ -4123,8 +4123,8 @@ impl Render for Workspace {
.flex()
.flex_col()
.overflow_hidden()
.border_t()
.border_b()
.border_t_1()
.border_b_1()
.border_color(colors.border)
.child({
let this = cx.view().clone();
@ -4230,10 +4230,10 @@ impl Render for Workspace {
.shadow_lg();
Some(match self.zoomed_position {
Some(DockPosition::Left) => div.right_2().border_r(),
Some(DockPosition::Right) => div.left_2().border_l(),
Some(DockPosition::Bottom) => div.top_2().border_t(),
None => div.top_2().bottom_2().left_2().right_2().border(),
Some(DockPosition::Left) => div.right_2().border_r_1(),
Some(DockPosition::Right) => div.left_2().border_l_1(),
Some(DockPosition::Bottom) => div.top_2().border_t_1(),
None => div.top_2().bottom_2().left_2().right_2().border_1(),
})
}))
.child(self.modal_layer.clone())