Add more example to Label.

crates/story/src/checkbox_story.rs

@@ -1,5 +1,5 @@
 use gpui::{
-    IntoElement, ParentElement, Render, Styled, View, ViewContext, VisualContext as _,
+    px, rems, IntoElement, ParentElement, Render, Styled, View, ViewContext, VisualContext as _,
     WindowContext,
 };
 
@@ -9,9 +9,11 @@ use ui::{
     h_flex,
     label::Label,
     radio::Radio,
-    v_flex, Clickable, Disableable as _, IconName, Selection,
+    v_flex, Clickable, Disableable as _, IconName, Selection, StyledExt,
 };
 
+use crate::section;
+
 pub struct CheckboxStory {
     check1: Selection,
     check2: Selection,
@@ -46,12 +48,34 @@ impl CheckboxStory {
 impl Render for CheckboxStory {
     fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
         v_flex()
-            .p_4()
             .gap_6()
+            .child(
+                section("Label", cx)
+                    .child(
+                        h_flex()
+                            .w_full()
+                            .justify_between()
+                            .gap_4()
+                            .child(Label::new("Text align left"))
+                            .child(Label::new("Text align center").text_center())
+                            .child(Label::new("Text align right").text_right()),
+                    )
+                    .child(Label::new("Color Label").text_color(ui::red_500()))
+                    .child(
+                        Label::new("Font Size Label")
+                            .text_size(px(20.))
+                            .text_left()
+                            .font_semibold()
+                            .line_height(rems(1.8)),
+                    ),
+            )
+            .child(
+                section("Maksed Label", cx).child(
+                    v_flex()
+                        .w_full()
+                        .gap_4()
                         .child(
                             h_flex()
-                    .items_center()
-                    .gap_1()
                                 .child(Label::new("9,182,1 USD").text_2xl().masked(self.masked))
                                 .child(
                                     Button::new("btn-mask", cx)
@@ -66,10 +90,13 @@ impl Render for CheckboxStory {
                                         })),
                                 ),
                         )
-            .child(Label::new("500 USD").text_xl().masked(self.masked))
+                        .child(Label::new("500 USD").text_xl().masked(self.masked)),
+                ),
+            )
             .child(
-                v_flex().items_start().justify_start().gap_6().child(
+                section("Checkbox", cx).child(
                     h_flex()
+                        .w_full()
                         .items_center()
                         .gap_6()
                         .child(
@@ -98,8 +125,9 @@ impl Render for CheckboxStory {
                 ),
             )
             .child(
-                h_flex().items_center().gap_4().child(
+                section("Disabled Checkbox", cx).child(
                     h_flex()
+                        .w_full()
                         .items_center()
                         .gap_6()
                         .child(
@@ -123,7 +151,9 @@ impl Render for CheckboxStory {
                 ),
             )
             .child(
+                section("Radio", cx).child(
                     h_flex()
+                        .w_full()
                         .gap_4()
                         .child(
                             Radio::new("radio1")
@@ -146,6 +176,7 @@ impl Render for CheckboxStory {
                                 .selected(true)
                                 .disabled(true),
                         ),
+                ),
             )
     }
 }

crates/ui/src/label.rs

@@ -43,6 +43,21 @@ impl Label {
         self
     }
 
+    pub fn text_left(mut self) -> Self {
+        self.align = TextAlign::Left;
+        self
+    }
+
+    pub fn text_center(mut self) -> Self {
+        self.align = TextAlign::Center;
+        self
+    }
+
+    pub fn text_right(mut self) -> Self {
+        self.align = TextAlign::Right;
+        self
+    }
+
     pub fn masked(mut self, masked: bool) -> Self {
         self.marked = masked;
         self