Rename h_stack and v_stack to h_flex and v_flex, respectively (#4053)

This PR renames the `h_stack` and `v_stack` to `h_flex` and `v_flex`,
respectively.

We were previously using `h_stack` and `v_stack` to match SwiftUI, but
`h_flex` and `v_flex` fit better with the web/flexbox terminology that
the rest of GPUI uses.

Additionally, we were already calling the utility functions used to
implement `h_stack` and `v_stack` by the new names.

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2024-01-15 11:34:06 -05:00 committed by GitHub
parent b136d21ebf
commit 90f4c70a82
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
69 changed files with 271 additions and 271 deletions

View file

@ -362,7 +362,7 @@ impl RenderOnce for Button {
};
self.base.child(
h_stack()
h_flex()
.gap_1()
.when(self.icon_position == Some(IconPosition::Start), |this| {
this.children(self.icon.map(|icon| {
@ -375,7 +375,7 @@ impl RenderOnce for Button {
}))
})
.child(
h_stack()
h_flex()
.gap_2()
.justify_between()
.child(

View file

@ -103,7 +103,7 @@ impl RenderOnce for Checkbox {
),
};
h_stack()
h_flex()
.id(self.id)
// Rather than adding `px_1()` to add some space around the checkbox,
// we use a larger parent element to create a slightly larger

View file

@ -1,5 +1,5 @@
use crate::{
h_stack, prelude::*, v_stack, Icon, IconName, KeyBinding, Label, List, ListItem, ListSeparator,
h_flex, prelude::*, v_flex, Icon, IconName, KeyBinding, Label, List, ListItem, ListSeparator,
ListSubHeader,
};
use gpui::{
@ -234,7 +234,7 @@ impl ContextMenuItem {
impl Render for ContextMenu {
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
div().elevation_2(cx).flex().flex_row().child(
v_stack()
v_flex()
.min_w(px(200.))
.track_focus(&self.focus_handle)
.on_mouse_down_out(cx.listener(|this, _, cx| this.cancel(&menu::Cancel, cx)))
@ -277,7 +277,7 @@ impl Render for ContextMenu {
let menu = cx.view().downgrade();
let label_element = if let Some(icon) = icon {
h_stack()
h_flex()
.gap_1()
.child(Label::new(label.clone()))
.child(Icon::new(*icon))
@ -298,7 +298,7 @@ impl Render for ContextMenu {
.ok();
})
.child(
h_stack()
h_flex()
.w_full()
.justify_between()
.child(label_element)

View file

@ -1,4 +1,4 @@
use crate::{h_stack, prelude::*, Icon, IconName, IconSize};
use crate::{h_flex, prelude::*, Icon, IconName, IconSize};
use gpui::{relative, rems, Action, FocusHandle, IntoElement, Keystroke};
#[derive(IntoElement, Clone)]
@ -12,13 +12,13 @@ pub struct KeyBinding {
impl RenderOnce for KeyBinding {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_stack()
h_flex()
.flex_none()
.gap_2()
.children(self.key_binding.keystrokes().iter().map(|keystroke| {
let key_icon = Self::icon_for_key(&keystroke);
h_stack()
h_flex()
.flex_none()
.gap_0p5()
.p_0p5()

View file

@ -1,7 +1,7 @@
use gpui::AnyElement;
use smallvec::SmallVec;
use crate::{prelude::*, v_stack, Label, ListHeader};
use crate::{prelude::*, v_flex, Label, ListHeader};
#[derive(IntoElement)]
pub struct List {
@ -47,7 +47,7 @@ impl ParentElement for List {
impl RenderOnce for List {
fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
v_stack().w_full().py_1().children(self.header).map(|this| {
v_flex().w_full().py_1().children(self.header).map(|this| {
match (self.children.is_empty(), self.toggle) {
(false, _) => this.children(self.children),
(true, Some(false)) => this,

View file

@ -1,4 +1,4 @@
use crate::{h_stack, prelude::*, Disclosure, Label};
use crate::{h_flex, prelude::*, Disclosure, Label};
use gpui::{AnyElement, ClickEvent};
#[derive(IntoElement)]
@ -76,7 +76,7 @@ impl Selectable for ListHeader {
impl RenderOnce for ListHeader {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_stack()
h_flex()
.id(self.label.clone())
.w_full()
.relative()
@ -95,7 +95,7 @@ impl RenderOnce for ListHeader {
.w_full()
.gap_1()
.child(
h_stack()
h_flex()
.gap_1()
.children(self.toggle.map(|is_open| {
Disclosure::new("toggle", is_open).on_toggle(self.on_toggle)
@ -109,7 +109,7 @@ impl RenderOnce for ListHeader {
.child(Label::new(self.label.clone()).color(Color::Muted)),
),
)
.child(h_stack().children(self.end_slot))
.child(h_flex().children(self.end_slot))
.when_some(self.end_hover_slot, |this, end_hover_slot| {
this.child(
div()

View file

@ -146,7 +146,7 @@ impl ParentElement for ListItem {
impl RenderOnce for ListItem {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_stack()
h_flex()
.id(self.id)
.w_full()
.relative()
@ -169,7 +169,7 @@ impl RenderOnce for ListItem {
})
})
.child(
h_stack()
h_flex()
.id("inner_list_item")
.w_full()
.relative()
@ -219,9 +219,9 @@ impl RenderOnce for ListItem {
.child(Disclosure::new("toggle", is_open).on_toggle(self.on_toggle))
}))
.child(
h_stack()
h_flex()
// HACK: We need to set *any* width value here in order for this container to size correctly.
// Without this the `h_stack` will overflow the parent `inner_list_item`.
// Without this the `h_flex` will overflow the parent `inner_list_item`.
.w_px()
.flex_1()
.gap_1()
@ -230,7 +230,7 @@ impl RenderOnce for ListItem {
)
.when_some(self.end_slot, |this, end_slot| {
this.justify_between().child(
h_stack()
h_flex()
.when(self.end_hover_slot.is_some(), |this| {
this.visible()
.group_hover("list_item", |this| this.invisible())
@ -240,7 +240,7 @@ impl RenderOnce for ListItem {
})
.when_some(self.end_hover_slot, |this, end_hover_slot| {
this.child(
h_stack()
h_flex()
.h_full()
.absolute()
.right_2()

View file

@ -1,5 +1,5 @@
use crate::prelude::*;
use crate::{h_stack, Icon, IconName, IconSize, Label};
use crate::{h_flex, Icon, IconName, IconSize, Label};
#[derive(IntoElement)]
pub struct ListSubHeader {
@ -25,7 +25,7 @@ impl ListSubHeader {
impl RenderOnce for ListSubHeader {
fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
h_stack().flex_1().w_full().relative().py_1().child(
h_flex().flex_1().w_full().relative().py_1().child(
div()
.h_6()
.when(self.inset, |this| this.px_2())

View file

@ -1,5 +1,5 @@
use crate::prelude::*;
use crate::v_stack;
use crate::v_flex;
use gpui::{
div, AnyElement, Element, IntoElement, ParentElement, RenderOnce, Styled, WindowContext,
};
@ -43,10 +43,10 @@ impl RenderOnce for Popover {
div()
.flex()
.gap_1()
.child(v_stack().elevation_2(cx).px_1().children(self.children))
.child(v_flex().elevation_2(cx).px_1().children(self.children))
.when_some(self.aside, |this, aside| {
this.child(
v_stack()
v_flex()
.elevation_2(cx)
.bg(cx.theme().colors().surface_background)
.px_1()

View file

@ -4,12 +4,12 @@ use crate::StyledExt;
/// Horizontally stacks elements. Sets `flex()`, `flex_row()`, `items_center()`
#[track_caller]
pub fn h_stack() -> Div {
pub fn h_flex() -> Div {
div().h_flex()
}
/// Vertically stacks elements. Sets `flex()`, `flex_col()`
#[track_caller]
pub fn v_stack() -> Div {
pub fn v_flex() -> Div {
div().v_flex()
}

View file

@ -2,7 +2,7 @@ use gpui::{Render, ViewContext};
use story::Story;
use crate::prelude::*;
use crate::{h_stack, Checkbox};
use crate::{h_flex, Checkbox};
pub struct CheckboxStory;
@ -12,7 +12,7 @@ impl Render for CheckboxStory {
.child(Story::title_for::<Checkbox>())
.child(Story::label("Default"))
.child(
h_stack()
h_flex()
.p_2()
.gap_2()
.rounded_md()
@ -27,7 +27,7 @@ impl Render for CheckboxStory {
)
.child(Story::label("Disabled"))
.child(
h_stack()
h_flex()
.p_2()
.gap_2()
.rounded_md()

View file

@ -60,7 +60,7 @@ impl Render for ListItemStory {
ListItem::new("with_end_hover_slot")
.child("Hello, world!")
.end_slot(
h_stack()
h_flex()
.gap_2()
.child(Avatar::new(SharedUrl::from(
"https://avatars.githubusercontent.com/u/1789?v=4",

View file

@ -13,10 +13,10 @@ impl Render for TabStory {
Story::container()
.child(Story::title_for::<Tab>())
.child(Story::label("Default"))
.child(h_stack().child(Tab::new("tab_1").child("Tab 1")))
.child(h_flex().child(Tab::new("tab_1").child("Tab 1")))
.child(Story::label("With indicator"))
.child(
h_stack().child(
h_flex().child(
Tab::new("tab_1")
.start_slot(Indicator::dot().color(Color::Warning))
.child("Tab 1"),
@ -24,7 +24,7 @@ impl Render for TabStory {
)
.child(Story::label("With close button"))
.child(
h_stack().child(
h_flex().child(
Tab::new("tab_1")
.end_slot(
IconButton::new("close_button", IconName::Close)
@ -38,13 +38,13 @@ impl Render for TabStory {
)
.child(Story::label("List of tabs"))
.child(
h_stack()
h_flex()
.child(Tab::new("tab_1").child("Tab 1"))
.child(Tab::new("tab_2").child("Tab 2")),
)
.child(Story::label("List of tabs with first tab selected"))
.child(
h_stack()
h_flex()
.child(
Tab::new("tab_1")
.selected(true)
@ -65,7 +65,7 @@ impl Render for TabStory {
)
.child(Story::label("List of tabs with last tab selected"))
.child(
h_stack()
h_flex()
.child(
Tab::new("tab_1")
.position(TabPosition::First)
@ -90,7 +90,7 @@ impl Render for TabStory {
)
.child(Story::label("List of tabs with second tab selected"))
.child(
h_stack()
h_flex()
.child(
Tab::new("tab_1")
.position(TabPosition::First)

View file

@ -35,7 +35,7 @@ impl Render for TabBarStory {
.child(Story::title_for::<TabBar>())
.child(Story::label("Default"))
.child(
h_stack().child(
h_flex().child(
TabBar::new("tab_bar_1")
.start_child(
IconButton::new("navigate_backward", IconName::ArrowLeft)

View file

@ -25,7 +25,7 @@ impl Render for ToggleButtonStory {
StorySection::new().child(
StoryItem::new(
"Toggle button group",
h_stack()
h_flex()
.child(
ToggleButton::new(1, "Apple")
.style(ButtonStyle::Filled)
@ -59,7 +59,7 @@ impl Render for ToggleButtonStory {
StorySection::new().child(
StoryItem::new(
"Toggle button group with selection",
h_stack()
h_flex()
.child(
ToggleButton::new(1, "Apple")
.style(ButtonStyle::Filled)

View file

@ -135,7 +135,7 @@ impl RenderOnce for Tab {
})
.cursor_pointer()
.child(
h_stack()
h_flex()
.group("")
.relative()
.h_full()
@ -145,7 +145,7 @@ impl RenderOnce for Tab {
// .hover(|style| style.bg(tab_hover_bg))
// .active(|style| style.bg(tab_active_bg))
.child(
h_stack()
h_flex()
.w_3()
.h_3()
.justify_center()
@ -157,7 +157,7 @@ impl RenderOnce for Tab {
.children(self.start_slot),
)
.child(
h_stack()
h_flex()
.w_3()
.h_3()
.justify_center()

View file

@ -102,7 +102,7 @@ impl RenderOnce for TabBar {
.bg(cx.theme().colors().tab_bar_background)
.when(!self.start_children.is_empty(), |this| {
this.child(
h_stack()
h_flex()
.flex_none()
.gap_1()
.px_1()
@ -129,7 +129,7 @@ impl RenderOnce for TabBar {
.border_color(cx.theme().colors().border),
)
.child(
h_stack()
h_flex()
.id("tabs")
.z_index(2)
.flex_grow()
@ -142,7 +142,7 @@ impl RenderOnce for TabBar {
)
.when(!self.end_children.is_empty(), |this| {
this.child(
h_stack()
h_flex()
.flex_none()
.gap_1()
.px_1()

View file

@ -3,7 +3,7 @@ use settings::Settings;
use theme::ThemeSettings;
use crate::prelude::*;
use crate::{h_stack, v_stack, Color, KeyBinding, Label, LabelSize, StyledExt};
use crate::{h_flex, v_flex, Color, KeyBinding, Label, LabelSize, StyledExt};
pub struct Tooltip {
title: SharedString,
@ -73,7 +73,7 @@ impl Render for Tooltip {
overlay().child(
// padding to avoid mouse cursor
div().pl_2().pt_2p5().child(
v_stack()
v_flex()
.elevation_2(cx)
.font(ui_font)
.text_ui()
@ -81,7 +81,7 @@ impl Render for Tooltip {
.py_1()
.px_2()
.child(
h_stack()
h_flex()
.gap_4()
.child(self.title.clone())
.when_some(self.key_binding.clone(), |this, key_binding| {

View file

@ -13,7 +13,7 @@ pub use crate::fixed::*;
pub use crate::selectable::*;
pub use crate::styles::{vh, vw};
pub use crate::visible_on_hover::*;
pub use crate::{h_stack, v_stack};
pub use crate::{h_flex, v_flex};
pub use crate::{Button, ButtonSize, ButtonStyle, IconButton, SelectableButton};
pub use crate::{ButtonCommon, Color, StyledExt};
pub use crate::{Headline, HeadlineSize};