Extract Classes to a separate macro

docs/concepts/html.md

@@ -1,5 +1,5 @@
 ---
-title: html!
+title: HTML
 sidebar_label: Introduction
 description: The procedural macro for generating HTML and SVG
 ---

docs/concepts/html/classes.md

@@ -0,0 +1,122 @@
+---
+title: Classes
+description: A handy macro to handle classes
+---
+
+## Classes
+
+The struct `Classes` can be used to deal with HTML classes.
+
+When pushing a string to the set, `Classes` ensures that there is one element
+for every class even if a single string might contain multiple classes.
+
+`Classes` can also be merged by using `Extend` (i.e.
+`classes1.extend(classes2)`) or `push()` (i.e. `classes1.push(classes2)`). In
+fact, anything that implements `Into<Classes>` can be used to push new classes
+to the set.
+
+The macro `classes!` is a convenient macro that creates one single `Classes`.
+Its input accepts a comma separated list of expressions. The only requirement
+is that every expression implements `Into<Classes>`.
+
+<!--DOCUSAURUS_CODE_TABS-->
+<!--Literal-->
+
+```rust
+html! {
+  <div class=classes!("container")></div>
+}
+```
+
+<!--Multiple-->
+
+```rust
+html! {
+  <div class=classes!("class-1", "class-2")></div>
+}
+```
+
+<!--String-->
+
+```rust
+let my_classes = String::from("class-1 class-2");
+
+html! {
+  <div class=classes!(my_classes)></div>
+}
+```
+
+<!--Optional-->
+
+```rust
+html! {
+  <div class=classes!(Some("class")) />
+}
+```
+
+<!--Vector-->
+
+```rust
+html! {
+  <div class=classes!(vec!["class-1", "class-2"])></div>
+}
+```
+
+<!--Array-->
+
+```rust
+let my_classes = ["class-1", "class-2"];
+
+html! {
+  <div class=classes!(&my_classes)></div>
+}
+```
+
+<!--END_DOCUSAURUS_CODE_TABS-->
+
+## Components that accept classes
+
+```rust
+use boolinator::Boolinator;
+
+#[derive(Clone, Properties)]
+struct Props {
+    #[prop_or_default]
+    class: Classes,
+    fill: bool,
+    children: Children,
+}
+
+struct MyComponent {
+    props: Props,
+}
+
+impl Component for MyComponent {
+    type Properties = Props;
+
+    // ...
+
+    fn view(&self) -> Html {
+        let Props {
+            class,
+            fill,
+            children,
+        } = &self.props;
+        html! {
+            <div
+                class=classes!(
+                    "my-container-class",
+                    fill.as_some("my-fill-class"),
+                    class.clone(),
+                )
+            >
+                { children.clone() }
+            </div>
+        }
+    }
+}
+```
+
+The example makes use of the [boolinator](https://crates.io/crates/boolinator)
+crate to conditionally add the "my-fill-class" class based on the `fill`
+boolean attribute.

docs/concepts/html/elements.md

@@ -35,53 +35,6 @@ html! {
 
 If the attribute is set to `None`, the attribute won't be set in the DOM.
 
-## Classes
-
-There are a number of convenient ways to specify classes for an element:
-
-<!--DOCUSAURUS_CODE_TABS-->
-<!--Literal-->
-
-```rust
-html! {
-  <div class="container"></div>
-}
-```
-
-<!--Multiple-->
-
-```rust
-html! {
-  <div class=("class-1", "class-2")></div>
-}
-```
-
-<!--Optional-->
-
-```rust
-html! {
-  <div class=if condition { Some("class") } else { None } />
-}
-```
-
-<!--Interpolated-->
-
-```rust
-html! {
-  <div class=format!("{}-container", size) />
-}
-```
-
-<!--Vector-->
-
-```rust
-html! {
-  <div class=vec!["class-1", "class-2"]></div>
-}
-```
-
-<!--END_DOCUSAURUS_CODE_TABS-->
-
 ## Listeners
 
 Listener attributes need to be passed a `Callback` which is a wrapper around a closure. How you create your callback depends on how you wish your app to react to a listener event:

examples/crm/src/add_client.rs

@@ -1,5 +1,7 @@
 use crate::Client;
-use yew::{html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender};
+use yew::{
+    classes, html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender,
+};
 
 #[derive(Debug)]
 pub enum Msg {
@@ -74,19 +76,19 @@ impl Component for AddClientForm {
             <>
                 <div class="names">
                     <input
-                        class=("new-client", "firstname")
+                        class=classes!("new-client", "firstname")
                         placeholder="First name"
                         value=&client.first_name
                         oninput=link.callback(|e: InputData| Msg::UpdateFirstName(e.value))
                     />
                     <input
-                        class=("new-client", "lastname")
+                        class=classes!("new-client", "lastname")
                         placeholder="Last name"
                         value=&client.last_name
                         oninput=link.callback(|e: InputData| Msg::UpdateLastName(e.value))
                     />
                     <textarea
-                        class=("new-client", "description")
+                        class=classes!("new-client", "description")
                         placeholder="Description"
                         value=&client.description
                         oninput=link.callback(|e: InputData| Msg::UpdateDescription(e.value))

examples/futures/src/markdown.rs

@@ -1,8 +1,8 @@
 /// Original author of this code is [Nathan Ringo](https://github.com/remexre)
 /// Source: https://github.com/acmumn/mentoring/blob/master/web-client/src/view/markdown.rs
 use pulldown_cmark::{Alignment, CodeBlockKind, Event, Options, Parser, Tag};
-use yew::virtual_dom::{Classes, VNode, VTag, VText};
-use yew::{html, Html};
+use yew::virtual_dom::{VNode, VTag, VText};
+use yew::{html, Classes, Html};
 
 /// Adds a class to the VTag.
 /// You can also provide multiple classes separated by ascii whitespaces.

examples/game_of_life/src/main.rs

@@ -2,7 +2,7 @@ use cell::Cellule;
 use rand::Rng;
 use std::time::Duration;
 use yew::services::interval::{IntervalService, IntervalTask};
-use yew::{html, Component, ComponentLink, Html, ShouldRender};
+use yew::{classes, html, Component, ComponentLink, Html, ShouldRender};
 
 mod cell;
 
@@ -96,7 +96,7 @@ impl Model {
             }
         };
         html! {
-            <div key=idx class=("game-cellule", cellule_status)
+            <div key=idx class=classes!("game-cellule", cellule_status)
                 onclick=self.link.callback(move |_| Msg::ToggleCellule(idx))>
             </div>
         }

examples/nested_list/src/list.rs

@@ -103,7 +103,7 @@ impl Component for List {
         let onmouseout = self.props.on_hover.reform(|_| Hovered::None);
         html! {
             <div class="list-container" onmouseout=onmouseout onmouseover=onmouseover>
-                <div class=("list", inactive)>
+                <div class=classes!("list", inactive)>
                     { self.view_header() }
                     <div class="items">
                         { self.view_items() }

examples/router/src/components/pagination.rs

@@ -53,7 +53,7 @@ impl Pagination {
 
         html! {
             <li>
-                <a class=("pagination-link", is_current_class) aria-label=format!("Goto page {}", to_page) onclick=onclick>
+                <a class=classes!("pagination-link", is_current_class) aria-label=format!("Goto page {}", to_page) onclick=onclick>
                     { to_page }
                 </a>
             </li>

examples/router/src/main.rs

@@ -87,7 +87,7 @@ impl Model {
                     <h1 class="navbar-item is-size-3">{ "Yew Blog" }</h1>
 
                     <a role="button"
-                        class=("navbar-burger", "burger", active_class)
+                        class=classes!("navbar-burger", "burger", active_class)
                         aria-label="menu" aria-expanded="false"
                         onclick=link.callback(|_| Msg::ToggleNavbar)
                     >
@@ -96,7 +96,7 @@ impl Model {
                         <span aria-hidden="true"></span>
                     </a>
                 </div>
-                <div class=("navbar-menu", active_class)>
+                <div class=classes!("navbar-menu", active_class)>
                     <div class="navbar-start">
                         <AppAnchor classes="navbar-item" route=AppRoute::Home>
                             { "Home" }

examples/todomvc/src/main.rs

@@ -3,8 +3,8 @@ use strum::IntoEnumIterator;
 use yew::format::Json;
 use yew::services::storage::{Area, StorageService};
 use yew::web_sys::HtmlInputElement as InputElement;
+use yew::{classes, html, Component, ComponentLink, Html, InputData, NodeRef, ShouldRender};
 use yew::{events::KeyboardEvent, Classes};
-use yew::{html, Component, ComponentLink, Html, InputData, NodeRef, ShouldRender};
 
 mod state;
 
@@ -134,7 +134,7 @@ impl Component for Model {
                         <h1>{ "todos" }</h1>
                         { self.view_input() }
                     </header>
-                    <section class=("main", hidden_class)>
+                    <section class=classes!("main", hidden_class)>
                         <input
                             type="checkbox"
                             class="toggle-all"
@@ -147,7 +147,7 @@ impl Component for Model {
                             { for self.state.entries.iter().filter(|e| self.state.filter.fits(e)).enumerate().map(|e| self.view_entry(e)) }
                         </ul>
                     </section>
-                    <footer class=("footer", hidden_class)>
+                    <footer class=classes!("footer", hidden_class)>
                         <span class="todo-count">
                             <strong>{ self.state.total() }</strong>
                             { " item(s) left" }

website/i18n/en.json

@@ -41,9 +41,12 @@
         "title": "Pre-defined hooks"
       },
       "concepts/html": {
-        "title": "html!",
+        "title": "HTML",
         "sidebar_label": "Introduction"
       },
+      "concepts/html/classes": {
+        "title": "Classes"
+      },
       "concepts/html/components": {
         "title": "Components"
       },

website/sidebars.json

@@ -31,11 +31,12 @@
       },
       {
         "type": "subcategory",
-        "label": "The HTML macro",
+        "label": "HTML",
         "ids": [
           "concepts/html",
           "concepts/html/components",
           "concepts/html/elements",
+          "concepts/html/classes",
           "concepts/html/lists",
           "concepts/html/literals-and-expressions"
         ]