From f658af59032e9306b35630ed5973e83bbf32a434 Mon Sep 17 00:00:00 2001 From: Marshall Bowers Date: Mon, 6 May 2024 13:22:47 -0400 Subject: [PATCH] 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 --- crates/assistant2/src/assistant2.rs | 2 +- crates/collab_ui/src/collab_panel.rs | 2 +- crates/copilot/src/sign_in.rs | 2 +- crates/editor/src/element.rs | 2 +- crates/extensions_ui/src/extensions_ui.rs | 2 +- crates/feedback/src/feedback_modal.rs | 4 ++-- crates/gpui/examples/hello_world.rs | 2 +- crates/gpui_macros/src/style_helpers.rs | 8 +------- crates/recent_projects/src/dev_servers.rs | 4 ++-- crates/story/src/story.rs | 8 ++++---- crates/ui/docs/hello-world.md | 2 +- crates/ui/src/components/avatar/avatar.rs | 2 +- crates/ui/src/components/checkbox/checkbox.rs | 2 +- crates/ui/src/components/collapsible_container.rs | 4 ++-- crates/ui/src/components/icon.rs | 2 +- crates/ui/src/components/list/list_item.rs | 4 ++-- crates/ui/src/components/stories/checkbox.rs | 4 ++-- crates/ui/src/components/tab.rs | 14 +++++++------- crates/ui/src/components/tab_bar.rs | 10 +++++----- crates/ui/src/styled_ext.rs | 2 +- crates/ui_text_field/src/ui_text_field.rs | 2 +- crates/workspace/src/dock.rs | 6 +++--- crates/workspace/src/toolbar.rs | 2 +- crates/workspace/src/workspace.rs | 12 ++++++------ 24 files changed, 49 insertions(+), 55 deletions(-) diff --git a/crates/assistant2/src/assistant2.rs b/crates/assistant2/src/assistant2.rs index b5aaf63451..9c208dc037 100644 --- a/crates/assistant2/src/assistant2.rs +++ b/crates/assistant2/src/assistant2.rs @@ -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) diff --git a/crates/collab_ui/src/collab_panel.rs b/crates/collab_ui/src/collab_panel.rs index 4b19c4fb25..d70bd48f57 100644 --- a/crates/collab_ui/src/collab_panel.rs +++ b/crates/collab_ui/src/collab_panel.rs @@ -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() diff --git a/crates/copilot/src/sign_in.rs b/crates/copilot/src/sign_in.rs index abf7252fef..41c6ee833e 100644 --- a/crates/copilot/src/sign_in.rs +++ b/crates/copilot/src/sign_in.rs @@ -60,7 +60,7 @@ impl CopilotCodeVerification { h_flex() .w_full() .p_1() - .border() + .border_1() .border_muted(cx) .rounded_md() .cursor_pointer() diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index 70f8e2566c..20850ffb2d 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -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() diff --git a/crates/extensions_ui/src/extensions_ui.rs b/crates/extensions_ui/src/extensions_ui.rs index 7382d0b599..b2c24511b8 100644 --- a/crates/extensions_ui/src/extensions_ui.rs +++ b/crates/extensions_ui/src/extensions_ui.rs @@ -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( diff --git a/crates/feedback/src/feedback_modal.rs b/crates/feedback/src/feedback_modal.rs index 273b293dfb..8e09ecfab1 100644 --- a/crates/feedback/src/feedback_modal.rs +++ b/crates/feedback/src/feedback_modal.rs @@ -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 diff --git a/crates/gpui/examples/hello_world.rs b/crates/gpui/examples/hello_world.rs index e377aff745..018c6097cf 100644 --- a/crates/gpui/examples/hello_world.rs +++ b/crates/gpui/examples/hello_world.rs @@ -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)) diff --git a/crates/gpui_macros/src/style_helpers.rs b/crates/gpui_macros/src/style_helpers.rs index 6dc5d83ad3..1bb42bd0d8 100644 --- a/crates/gpui_macros/src/style_helpers.rs +++ b/crates/gpui_macros/src/style_helpers.rs @@ -86,12 +86,7 @@ fn generate_methods() -> Vec { 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, &'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"), diff --git a/crates/recent_projects/src/dev_servers.rs b/crates/recent_projects/src/dev_servers.rs index d2519b434e..ccde82383f 100644 --- a/crates/recent_projects/src/dev_servers.rs +++ b/crates/recent_projects/src/dev_servers.rs @@ -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() diff --git a/crates/story/src/story.rs b/crates/story/src/story.rs index cd8e77590d..5fc7ac68ed 100644 --- a/crates/story/src/story.rs +++ b/crates/story/src/story.rs @@ -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::()) .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() diff --git a/crates/ui/docs/hello-world.md b/crates/ui/docs/hello-world.md index a13331e11f..8ff2fe4db7 100644 --- a/crates/ui/docs/hello-world.md +++ b/crates/ui/docs/hello-world.md @@ -133,7 +133,7 @@ impl TodoList { .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!" diff --git a/crates/ui/src/components/avatar/avatar.rs b/crates/ui/src/components/avatar/avatar.rs index 1f8913bbd2..27cf86a01f 100644 --- a/crates/ui/src/components/avatar/avatar.rs +++ b/crates/ui/src/components/avatar/avatar.rs @@ -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 diff --git a/crates/ui/src/components/checkbox/checkbox.rs b/crates/ui/src/components/checkbox/checkbox.rs index 3b53dfbe9c..cd1ea97ea9 100644 --- a/crates/ui/src/components/checkbox/checkbox.rs +++ b/crates/ui/src/components/checkbox/checkbox.rs @@ -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| { diff --git a/crates/ui/src/components/collapsible_container.rs b/crates/ui/src/components/collapsible_container.rs index 5136dbd13d..667e30265d 100644 --- a/crates/ui/src/components/collapsible_container.rs +++ b/crates/ui/src/components/collapsible_container.rs @@ -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 { diff --git a/crates/ui/src/components/icon.rs b/crates/ui/src/components/icon.rs index 9c9e05d6b6..63db58833f 100644 --- a/crates/ui/src/components/icon.rs +++ b/crates/ui/src/components/icon.rs @@ -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() diff --git a/crates/ui/src/components/list/list_item.rs b/crates/ui/src/components/list/list_item.rs index f23de39253..0cab450b25 100644 --- a/crates/ui/src/components/list/list_item.rs +++ b/crates/ui/src/components/list/list_item.rs @@ -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)) diff --git a/crates/ui/src/components/stories/checkbox.rs b/crates/ui/src/components/stories/checkbox.rs index b4a966b67e..e1b698aee4 100644 --- a/crates/ui/src/components/stories/checkbox.rs +++ b/crates/ui/src/components/stories/checkbox.rs @@ -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( diff --git a/crates/ui/src/components/tab.rs b/crates/ui/src/components/tab.rs index b2ca5e0c67..83def9a132 100644 --- a/crates/ui/src/components/tab.rs +++ b/crates/ui/src/components/tab.rs @@ -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( diff --git a/crates/ui/src/components/tab_bar.rs b/crates/ui/src/components/tab_bar.rs index 356cf23cf5..c514273288 100644 --- a/crates/ui/src/components/tab_bar.rs +++ b/crates/ui/src/components/tab_bar.rs @@ -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), ) diff --git a/crates/ui/src/styled_ext.rs b/crates/ui/src/styled_ext.rs index 513742f8ee..b7f8c86a55 100644 --- a/crates/ui/src/styled_ext.rs +++ b/crates/ui/src/styled_ext.rs @@ -6,7 +6,7 @@ use crate::ElevationIndex; fn elevated(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()) } diff --git a/crates/ui_text_field/src/ui_text_field.rs b/crates/ui_text_field/src/ui_text_field.rs index 548756de1f..511200c662 100644 --- a/crates/ui_text_field/src/ui_text_field.rs +++ b/crates/ui_text_field/src/ui_text_field.rs @@ -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() diff --git a/crates/workspace/src/dock.rs b/crates/workspace/src/dock.rs index e6ece91f96..0f281952fb 100644 --- a/crates/workspace/src/dock.rs +++ b/crates/workspace/src/dock.rs @@ -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() diff --git a/crates/workspace/src/toolbar.rs b/crates/workspace/src/toolbar.rs index fe5beba5e1..dd854672ca 100644 --- a/crates/workspace/src/toolbar.rs +++ b/crates/workspace/src/toolbar.rs @@ -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( diff --git a/crates/workspace/src/workspace.rs b/crates/workspace/src/workspace.rs index 326a70e85a..098ac3d28b 100644 --- a/crates/workspace/src/workspace.rs +++ b/crates/workspace/src/workspace.rs @@ -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())