fix: Fixed CardHeader style (#300)

thaw-ui · Nov 11, 2024 · bb5129b · bb5129b
1 parent 374581a
commit bb5129b
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 33 deletions.
diff --git a/demo/src/app.rs b/demo/src/app.rs
@@ -70,6 +70,7 @@ fn TheRouter() -> impl IntoView {
                     <Route path=path!("/button") view=ButtonMdPage />
                     <Route path=path!("/calendar") view=CalendarMdPage />
                     <Route path=path!("/card") view=CardMdPage />
+                    <Route path=path!("/card-header") view=CardHeaderMdPage />
                     <Route path=path!("/checkbox") view=CheckboxMdPage />
                     <Route path=path!("/color-picker") view=ColorPickerMdPage />
                     <Route path=path!("/combobox") view=ComboboxMdPage />

diff --git a/demo/src/pages/components.rs b/demo/src/pages/components.rs
@@ -218,10 +218,15 @@ pub(crate) fn gen_nav_data() -> Vec<NavGroupOption> {
                     label: "Calendar",
                 },
                 NavItemOption {
-                    group: None,
+                    group: Some("Card"),
                     value: "/components/card",
                     label: "Card",
                 },
+                NavItemOption {
+                    group: Some("Card"),
+                    value: "/components/card-header",
+                    label: "CardHeader",
+                },
                 NavItemOption {
                     group: None,
                     value: "/components/checkbox",

diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
@@ -34,6 +34,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "ButtonMdPage" => "../../thaw/src/button/docs/mod.md",
         "CalendarMdPage" => "../../thaw/src/calendar/docs/mod.md",
         "CardMdPage" => "../../thaw/src/card/docs/mod.md",
+        "CardHeaderMdPage" => "../../thaw/src/card/docs/card-header.md",
         "CheckboxMdPage" => "../../thaw/src/checkbox/docs/mod.md",
         "ColorPickerMdPage" => "../../thaw/src/color_picker/docs/mod.md",
         "ComboboxMdPage" => "../../thaw/src/combobox/docs/mod.md",

diff --git a/thaw/src/card/card-header.css b/thaw/src/card/card-header.css
@@ -1,25 +1,36 @@
 .thaw-card-header {
-    display: grid;
-    grid-auto-columns: min-content 1fr min-content;
+    display: flex;
     align-items: center;
+
     --thaw-card-header--gap: 12px;
 }
 
 .thaw-card-header__header {
+    flex-grow: 1;
+    display: flex;
+}
+
+.thaw-card-header__action {
+    margin-left: var(--thaw-card-header--gap);
+}
+
+.thaw-card-header--description {
+    display: grid;
+    grid-auto-columns: min-content 1fr min-content;
+}
+
+.thaw-card-header--description .thaw-card-header__header {
     grid-row-start: 1;
     grid-column-start: 2;
-    display: flex;
 }
 
-.thaw-card-header__description  {
+.thaw-card-header__description {
     grid-row-start: 2;
     grid-column-start: 2;
     display: flex;
 }
 
-.thaw-card-header__action {
+.thaw-card-header--description .thaw-card-header__action {
     grid-column-start: 3;
     grid-row-start: span 2;
-    display: flex;
-    margin-left: var(--thaw-card-header--gap);
-}
+}
diff --git a/thaw/src/card/card_header.rs b/thaw/src/card/card_header.rs
@@ -10,8 +10,13 @@ pub fn CardHeader(
     children: Children,
 ) -> impl IntoView {
     mount_style("card-header", include_str!("./card-header.css"));
+    let some_description = card_header_description.is_some();
     view! {
-        <div class=class_list!["thaw-card-header", class]>
+        <div class=class_list![
+            "thaw-card-header",
+            ("thaw-card-header--description", some_description),
+            class
+        ]>
             <div class="thaw-card-header__header">{children()}</div>
             <OptionComp value=card_header_description let:description>
                 <div class="thaw-card-header__description">{(description.children)()}</div>

diff --git a/thaw/src/card/docs/card-header.md b/thaw/src/card/docs/card-header.md
@@ -0,0 +1,61 @@
+# CardHeader
+
+```rust demo
+view!{
+    <Flex vertical=true>
+        <CardHeader>
+            <Body1>
+                <b>"App Name"</b>
+            </Body1>
+            <CardHeaderDescription slot>
+                <Caption1>"Developer"</Caption1>
+            </CardHeaderDescription>
+            <CardHeaderAction slot>
+                <Button appearance=ButtonAppearance::Transparent icon=icondata::AiMoreOutlined />
+            </CardHeaderAction>
+        </CardHeader>
+        <CardHeader>
+            <Body1>
+                <b>"App Name"</b>
+            </Body1>
+            <CardHeaderAction slot>
+                <Button appearance=ButtonAppearance::Transparent icon=icondata::AiMoreOutlined />
+            </CardHeaderAction>
+        </CardHeader>
+        <CardHeader>
+            <Body1>
+                <b>"App Name"</b>
+            </Body1>
+            <CardHeaderDescription slot>
+                <Caption1>"Developer"</Caption1>
+            </CardHeaderDescription>
+        </CardHeader>
+        <CardHeader>
+            <Body1>
+                <b>"App Name"</b>
+            </Body1>
+        </CardHeader>
+    </Flex>
+}
+```
+
+### CardHeader Props
+
+| Name                    | Type                                 | Default              | Description |
+| ----------------------- | ------------------------------------ | -------------------- | ----------- |
+| class                   | `MaybeProp<String>`                  | `Default::default()` |             |
+| card_header_description | slot `Option<CardHeaderDescription>` | `None`               |             |
+| card_header_action      | slot `Option<CardHeaderAction>`      | `None`               |             |
+| children                | `Children`                           |                      |             |
+
+### CardHeaderDescription Props
+
+| Name     | Type       | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` |         |             |
+
+### CardHeaderAction Props
+
+| Name     | Type       | Default | Description |
+| -------- | ---------- | ------- | ----------- |
+| children | `Children` |         |             |
diff --git a/thaw/src/card/docs/mod.md b/thaw/src/card/docs/mod.md
@@ -11,9 +11,7 @@ view! {
                 <Caption1>"Description"</Caption1>
             </CardHeaderDescription>
             <CardHeaderAction slot>
-                <Button appearance=ButtonAppearance::Transparent>
-                    "..."
-                </Button>
+                <Button appearance=ButtonAppearance::Transparent icon=icondata::AiMoreOutlined />
             </CardHeaderAction>
         </CardHeader>
         <CardPreview>
@@ -34,26 +32,6 @@ view! {
 | class    | `MaybeProp<String>` | `Default::default()` |             |
 | children | `Children`          |                      |             |
 
-### CardHeader Props
-
-| Name                    | Type                                 | Default              | Description |
-| ----------------------- | ------------------------------------ | -------------------- | ----------- |
-| class                   | `MaybeProp<String>`                  | `Default::default()` |             |
-| card_header_description | slot `Option<CardHeaderDescription>` | `None`               |             |
-| card_header_action      | slot `Option<CardHeaderAction>`      | `None`               |             |
-| children                | `Children`                           |                      |             |
-
-### CardHeaderDescription Props
-
-| Name     | Type       | Default | Description |
-| -------- | ---------- | ------- | ----------- |
-| children | `Children` |         |             |
-
-### CardHeaderAction Props
-
-| Name     | Type       | Default | Description |
-| -------- | ---------- | ------- | ----------- |
-| children | `Children` |         |             |
 
 ### CardPreview Props