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 b5aaf634512..9c208dc0374 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 4b19c4fb255..d70bd48f577 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 abf7252fef1..41c6ee833e0 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 70f8e2566c9..20850ffb2d5 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 7382d0b599d..b2c24511b8f 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 273b293dfb1..8e09ecfab1f 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 e377aff7456..018c6097cfa 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 6dc5d83ad30..1bb42bd0d8a 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 d2519b434e5..ccde82383fa 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 cd8e77590d3..5fc7ac68ed7 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 a13331e11f7..8ff2fe4db7f 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 1f8913bbd21..27cf86a01fb 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 3b53dfbe9c8..cd1ea97ea9d 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 5136dbd13d6..667e30265dc 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 9c9e05d6b68..63db58833fb 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 f23de39253e..0cab450b25e 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 b4a966b67e3..e1b698aee44 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 b2ca5e0c676..83def9a1329 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 356cf23cf50..c5142732881 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 513742f8ee6..b7f8c86a558 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 548756de1f0..511200c6622 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 e6ece91f96d..0f281952fba 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 fe5beba5e13..dd854672ca2 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 326a70e85ae..098ac3d28bc 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())