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 b5aaf634512f4e732559dc72ddfbaf56f57a8146..9c208dc03744487cd2047e402c0b8d24a77ab21e 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 4b19c4fb255768ed9922d9b301ccf92fc36f8936..d70bd48f57700bc234adc40680507f62095a5e45 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 abf7252fef10f656bd1d9893640a18cd32a9c56d..41c6ee833e079b7e06cf5978b3c165dd1bd6b652 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 70f8e2566c937553df9695508eef49c47aa2ce7c..20850ffb2d5ee735813d4dca7f6e4a5fe3aef3bc 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 7382d0b599dc3685d3a20c0588f23f1e43dfd0b7..b2c24511b8f5cc74eba682ddc09696cb654fd868 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 273b293dfb16f6f5d2fa646ab595333e32383af1..8e09ecfab1fd017d5c643ff77537d364e4ed5b87 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 e377aff74569bc8f0588808599996482973052fc..018c6097cfae7799b2514e276d3f41453999822d 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 6dc5d83ad3055464eeb81b43ee3b236789f8e9a7..1bb42bd0d8aa809931c1b345b5bdd2d4cf5e1854 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 d2519b434e557f36eab77758239352e29c39ce01..ccde82383fa4c716455c224258915afd29c2334f 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 cd8e77590d3ad01263938188fbe9e05c761fbad0..5fc7ac68ed78a7e61d87315ec9817b5372a3653c 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 a13331e11f7b331aa19299a932e13dac5e8d392a..8ff2fe4db7f1dacc912372615ac0de6800e0d7ee 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 1f8913bbd21913566dbeb9f0ee38336a7eb1eda7..27cf86a01fb01408bf41c7b379aa8571d3bd9b90 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 3b53dfbe9c80821a1887e997ab65c1c1740a3772..cd1ea97ea9d1ea455382183a093954f1dc8bfbf8 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 5136dbd13d6dbd0cb867d8475497e601f0da8f9a..667e30265dca01d3f899af74e42ebe7d58182192 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 9c9e05d6b683497347f73c09a3df0121b06c47a9..63db58833fbbb6a27e0c47db91d6992d9c0b6561 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 f23de39253e510c9b064af9bc081d7f0fd463c67..0cab450b25eedf4f87676eba2ff3118e37886ef2 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 b4a966b67e3ae287c604068ec3854c5cf8373a49..e1b698aee44c66b178393c1c7690b6baa6b26d60 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 b2ca5e0c67688f71d1e8349c9b870f937e139de6..83def9a1329c0aba60d72fc3a59124d94bae0eb7 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 356cf23cf508e4cbaeaca1e58964ff4dbf6dada6..c514273288144f82e4ab7e03c8e5d6d2ee899dd1 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 513742f8ee6043e9fa058e55e26c58676b10abe7..b7f8c86a558655e449656daf99231fe27f4cf8b9 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 548756de1f020ba8232dabf90fc957224be54ddc..511200c6622e1d4c9f0af54a5746e39ae1109291 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 e6ece91f96dfaaeb6eb6fec761e42510853d0e8f..0f281952fba731b180b511a84198a54d651b48f8 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 fe5beba5e130ed68dc7e584dc645073338b1653a..dd854672ca2f98d068e26fdabd1dac20bfaea832 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 326a70e85ae87f910d341804ec17eaf6a970d449..098ac3d28bc75d6ff59437b2bba998cefb9fb0db 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())