Add flex_wrap_* and content_* to GPUI (#8710)

Tommi Pisto created 2 years ago

Now with GPUI you can auto-layout something like this:

<img width="560" alt="Screenshot 2024-03-02 at 13 56 50"
src="https://github.com/zed-industries/zed/assets/226244/8ec4b683-dd7d-41f8-8b09-4be66ecec9a0">

Change summary

crates/gpui/src/styled.rs | 86 +++++++++++++++++++++++++++++++++++++++-
1 file changed, 83 insertions(+), 3 deletions(-)

Detailed changes

crates/gpui/src/styled.rs

@@ -1,11 +1,11 @@
 use crate::{
     self as gpui, hsla, point, px, relative, rems, AbsoluteLength, AlignItems, CursorStyle,
-    DefiniteLength, Fill, FlexDirection, FontWeight, Hsla, JustifyContent, Length, Position,
-    SharedString, StyleRefinement, Visibility, WhiteSpace,
+    DefiniteLength, Fill, FlexDirection, FlexWrap, FontWeight, Hsla, JustifyContent, Length,
+    Position, SharedString, StyleRefinement, Visibility, WhiteSpace,
 };
 use crate::{BoxShadow, TextStyleRefinement};
 use smallvec::{smallvec, SmallVec};
-use taffy::style::{Display, Overflow};
+use taffy::style::{AlignContent, Display, Overflow};
 
 /// A trait for elements that can be styled.
 /// Use this to opt-in to a CSS-like styling API.
@@ -333,6 +333,27 @@ pub trait Styled: Sized {
         self
     }
 
+    /// Sets the element to allow flex items to wrap.
+    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-normally)
+    fn flex_wrap(mut self) -> Self {
+        self.style().flex_wrap = Some(FlexWrap::Wrap);
+        self
+    }
+
+    /// Sets the element wrap flex items in the reverse direction.
+    /// [Docs](https://tailwindcss.com/docs/flex-wrap#wrap-reversed)
+    fn flex_wrap_reverse(mut self) -> Self {
+        self.style().flex_wrap = Some(FlexWrap::WrapReverse);
+        self
+    }
+
+    /// Sets the element to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary.
+    /// [Docs](https://tailwindcss.com/docs/flex-wrap#dont-wrap)
+    fn flex_nowrap(mut self) -> Self {
+        self.style().flex_wrap = Some(FlexWrap::NoWrap);
+        self
+    }
+
     /// Sets the element to align flex items to the start of the container's cross axis.
     /// [Docs](https://tailwindcss.com/docs/align-items#start)
     fn items_start(mut self) -> Self {
@@ -391,6 +412,65 @@ pub trait Styled: Sized {
         self
     }
 
+    /// Sets the element to pack content items in their default position as if no align-content value was set.
+    /// [Docs](https://tailwindcss.com/docs/align-content#normal)
+    fn content_normal(mut self) -> Self {
+        self.style().align_content = None;
+        self
+    }
+
+    /// Sets the element to pack content items in the center of the container's cross axis.
+    /// [Docs](https://tailwindcss.com/docs/align-content#center)
+    fn content_center(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::Center);
+        self
+    }
+
+    /// Sets the element to pack content items against the start of the container's cross axis.
+    /// [Docs](https://tailwindcss.com/docs/align-content#start)
+    fn content_start(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::FlexStart);
+        self
+    }
+
+    /// Sets the element to pack content items against the end of the container's cross axis.
+    /// [Docs](https://tailwindcss.com/docs/align-content#end)
+    fn content_end(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::FlexEnd);
+        self
+    }
+
+    /// Sets the element to pack content items along the container's cross axis
+    /// such that there is an equal amount of space between each item.
+    /// [Docs](https://tailwindcss.com/docs/align-content#space-between)
+    fn content_between(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::SpaceBetween);
+        self
+    }
+
+    /// Sets the element to pack content items along the container's cross axis
+    /// such that there is an equal amount of space on each side of each item.
+    /// [Docs](https://tailwindcss.com/docs/align-content#space-around)
+    fn content_around(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::SpaceAround);
+        self
+    }
+
+    /// Sets the element to pack content items along the container's cross axis
+    /// such that there is an equal amount of space between each item.
+    /// [Docs](https://tailwindcss.com/docs/align-content#space-evenly)
+    fn content_evenly(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::SpaceEvenly);
+        self
+    }
+
+    /// Sets the element to allow content items to fill the available space along the container's cross axis.
+    /// [Docs](https://tailwindcss.com/docs/align-content#stretch)
+    fn content_stretch(mut self) -> Self {
+        self.style().align_content = Some(AlignContent::Stretch);
+        self
+    }
+
     /// Sets the background color of the element.
     fn bg<F>(mut self, fill: F) -> Self
     where