feat: adds Label component (#266)

demo/src/app.rs

@@ -84,6 +84,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path=path!("/icon") view=IconMdPage/>
                     <Route path=path!("/image") view=ImageMdPage/>
                     <Route path=path!("/input") view=InputMdPage/>
+                    <Route path=path!("/label") view=LabelMdPage/>
                     <Route path=path!("/layout") view=LayoutMdPage/>
                     <Route path=path!("/link") view=LinkMdPage/>
                     <Route path=path!("/loading-bar") view=LoadingBarMdPage/>

demo/src/pages/components.rs

@@ -297,6 +297,11 @@ pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> {
                     value: "/components/input",
                     label: "Input",
                 },
+                NavItemOption {
+                    group: None,
+                    value: "/components/label",
+                    label: "Label",
+                },
                 NavItemOption {
                     group: None,
                     value: "/components/layout",

demo_markdown/docs/_guide/installation.md

@@ -8,7 +8,9 @@ cargo add thaw --features=csr
 
 <MessageBar intent=MessageBarIntent::Warning>
     <MessageBarBody>
-        "If you are using the nightly feature in Leptos, please enable Thaw's nightly as well."
+        <div style="white-space: normal">
+            "If you are using the nightly feature in Leptos, please enable Thaw's nightly as well."
+        </div>
     </MessageBarBody>
 </MessageBar>
 

demo_markdown/src/lib.rs

@@ -47,6 +47,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "IconMdPage" => "../../thaw/src/icon/docs/mod.md",
         "ImageMdPage" => "../../thaw/src/image/docs/mod.md",
         "InputMdPage" => "../../thaw/src/input/docs/mod.md",
+        "LabelMdPage" => "../../thaw/src/label/docs/mod.md",
         "LayoutMdPage" => "../../thaw/src/layout/docs/mod.md",
         "LinkMdPage" => "../../thaw/src/link/docs/mod.md",
         "LoadingBarMdPage" => "../../thaw/src/loading_bar/docs/mod.md",

thaw/src/field/docs/mod.md

@@ -154,7 +154,7 @@ view! {
 | label | `MaybeProp<String>` | `Default::default()` | The label associated with the field. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | orientation | `MaybeSignal<FieldOrientation>` | `FieldOrientation::Vertical` | The orientation of the label relative to the field component. |
-| reqired | `MaybeSignal<bool>` | `false` | If set to true this field will be marked as required. |
+| required | `MaybeSignal<bool>` | `false` | If set to true this field will be marked as required. |
 | children | `Children` |  |  |
 
 ### FieldContextProvider Props

thaw/src/field/field.css

@@ -6,15 +6,6 @@
     margin-bottom: var(--spacingVerticalXXS);
     padding-bottom: var(--spacingVerticalXXS);
     padding-top: var(--spacingVerticalXXS);
-    line-height: var(--lineHeightBase300);
-    font-size: var(--fontSizeBase300);
-    font-family: var(--fontFamilyBase);
-    color: var(--colorNeutralForeground1);
-}
-
-.thaw-field__label--required {
-    padding-left: var(--spacingHorizontalXS);
-    color: var(--colorPaletteRedForeground3);
 }
 
 .thaw-field--horizontal {

thaw/src/field/field.rs

@@ -1,5 +1,6 @@
+use crate::Label;
 use leptos::{context::Provider, either::EitherOf3, prelude::*};
-use thaw_components::{OptionComp, If, Then};
+use thaw_components::OptionComp;
 use thaw_utils::{class_list, mount_style};
 use uuid::Uuid;
 
@@ -47,14 +48,13 @@ pub fn Field(
                 move || {
                     view! {
                         <OptionComp value=label.get() let:label>
-                            <label class="thaw-field__label" for=id.get_value()>
+                            <Label
+                                class="thaw-field__label"
+                                required=required
+                                attr:r#for=id.get_value()
+                            >
                                 {label}
-                                <If cond=required>
+                            </Label>
-                                    <Then slot>
-                                        <span class="thaw-field__label--required">*</span>
-                                    </Then>
-                                </If>
-                            </label>
                         </OptionComp>
                     }
                 }

thaw/src/label/docs/mod.md

@@ -0,0 +1,57 @@
+# Label
+
+```rust demo
+view! {
+    <Label>"This is a label"</Label>
+}
+```
+
+### Size
+
+```rust demo
+view! {
+    <Flex>
+        <Label size=LabelSize::Small>"Small"</Label>
+        <Label>"Medium"</Label>
+        <Label size=LabelSize::Large>"Large"</Label>
+    </Flex>
+}
+```
+
+### Weight
+
+```rust demo
+view! {
+    <Flex>
+        <Label>"Label"</Label>
+        <Label weight=LabelWeight::Semibold>"Strong label"</Label>
+    </Flex>
+}
+```
+
+### Disabled
+
+```rust demo
+view! {
+    <Label required=true disabled=true>"Required label"</Label>
+}
+```
+
+### Required
+
+```rust demo
+view! {
+    <Label required=true>"Required label"</Label>
+}
+```
+
+### Label Props
+
+| Name | Type | Default | Desciption |
+| --- | --- | --- | --- |
+| class | `MaybeProp<String>` | `Default::default()` |  |
+| size | `MaybeSignal<LabelSize>` | `LabelSize::Medium` | A label supports different sizes. |
+| weight | `MaybeSignal<LabelWeight>` | `LabelWeight::Regular` | A label supports regular and semibold fontweight. |
+| disabled | `MaybeSignal<bool>` | `false` | Renders the label as disabled. |
+| required | `MaybeSignal<bool>` | `false` | Displays an indicator that the label is for a required field. |
+| children | `Children` |  |  |

thaw/src/label/label.css

@@ -0,0 +1,34 @@
+.thaw-label {
+    line-height: var(--lineHeightBase300);
+    font-size: var(--fontSizeBase300);
+    font-family: var(--fontFamilyBase);
+    color: var(--colorNeutralForeground1);
+}
+
+.thaw-label__required {
+    padding-left: var(--spacingHorizontalXS);
+    color: var(--colorPaletteRedForeground3);
+}
+
+.thaw-label--disabled {
+    color: var(--colorNeutralForegroundDisabled);
+}
+
+.thaw-label--disabled .thaw-label__required {
+    color: var(--colorNeutralForegroundDisabled);
+}
+
+.thaw-label--small {
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+}
+
+.thaw-label--large {
+    font-weight: var(--fontWeightSemibold);
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+}
+
+.thaw-label--semibold {
+    font-weight: var(--fontWeightSemibold);
+}

thaw/src/label/label.rs

@@ -0,0 +1,75 @@
+use leptos::prelude::*;
+use thaw_components::{If, Then};
+use thaw_utils::{class_list, mount_style};
+
+#[component]
+pub fn Label(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    /// A label supports different sizes.
+    #[prop(optional, into)]
+    size: MaybeSignal<LabelSize>,
+    /// A label supports regular and semibold fontweight.
+    #[prop(optional, into)]
+    weight: MaybeSignal<LabelWeight>,
+    /// Displays an indicator that the label is for a required field.
+    #[prop(optional, into)]
+    required: MaybeSignal<bool>,
+    /// Renders the label as disabled.
+    #[prop(optional, into)]
+    disabled: MaybeSignal<bool>,
+    children: Children,
+) -> impl IntoView {
+    mount_style("label", include_str!("./label.css"));
+
+    view! {
+        <label class=class_list![
+            "thaw-label",
+                ("thaw-label--disabled", move || disabled.get()),
+                move || format!("thaw-label--{}", size.get().as_str()),
+                move || format!("thaw-label--{}", weight.get().as_str()),
+                class
+        ]>
+            {children()} <If cond=required>
+                <Then slot>
+                    <span aria-hidden="true" class="thaw-label__required">
+                        "*"
+                    </span>
+                </Then>
+            </If>
+        </label>
+    }
+}
+
+#[derive(Debug, Default, Clone)]
+pub enum LabelSize {
+    Small,
+    #[default]
+    Medium,
+    Large,
+}
+
+impl LabelSize {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            Self::Small => "small",
+            Self::Medium => "medium",
+            Self::Large => "large",
+        }
+    }
+}
+
+#[derive(Debug, Default, Clone)]
+pub enum LabelWeight {
+    #[default]
+    Regular,
+    Semibold,
+}
+
+impl LabelWeight {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            Self::Regular => "regular",
+            Self::Semibold => "semibold",
+        }
+    }
+}

thaw/src/label/mod.rs

@@ -0,0 +1,3 @@
+mod label;
+
+pub use label::*;

thaw/src/lib.rs

@@ -24,6 +24,7 @@ mod grid;
 mod icon;
 mod image;
 mod input;
+mod label;
 mod layout;
 mod link;
 mod loading_bar;
@@ -79,6 +80,7 @@ pub use grid::*;
 pub use icon::*;
 pub use image::*;
 pub use input::*;
+pub use label::*;
 pub use layout::*;
 pub use link::*;
 pub use loading_bar::*;

thaw/src/space/docs/mod.md

@@ -1,5 +1,13 @@
 # Space
 
+<MessageBar intent=MessageBarIntent::Warning>
+    <MessageBarBody>
+        <div style="white-space: normal">
+            "The Space component may be removed in future versions. It is recommended to use the Flex component."
+        </div>
+    </MessageBarBody>
+</MessageBar>
+
 ```rust demo
 view! {
     <Space>