0.2.0 | lots of updates

* Add extra classes props for Hero component sections.

* Add navburger_classes to the Navbar component.

* Added the `help_has_error` bool to the `Field` component.

* Add `disabled` prop to `Select` & `MultiSelect` components.

* Replace `FieldHorizontal` component with `horizontal` prop on `Field`.

* Added the `Block` component.

* Update components to accept Classes instead of String

Author: thedodd

CHANGELOG.md

@@ -4,8 +4,17 @@ This changelog follows the patterns described here: https://keepachangelog.com/e
 
 ## Unreleased
 
-## 0.2.0 
-- Added support for yew `0.18.x`
+## 0.2.0
+### added
+- Added support for yew `0.18.x`.
+- Added `head_classes`, `body_classes` & `foot_classes` optional properties to the `Hero` component. These extra classes will be added to the stanard classes assigned to each of the corresponding hero component sections.
+- Added `navburger_classes` prop to the `Navbar` component. These extra classes will be added to the standard classes for the `navbar-burger` element.
+- Added `help_has_error` prop to the `Field` component. This `bool` prop will add the `is-danger` class to the field's help text when `true`.
+- Added `horizontal` prop to the `Field` component. This replaces the `FieldHorizontal` component.
+- Added `disabled` prop to the `Select` & `MultiSelect` components.
+
+### removed
+- The `FieldHorizontal` component has been removed in favor of the `horizontal` prop of the `Field` component.
 
 ## 0.1.6
 ### changed

src/columns/mod.rs

@@ -6,7 +6,7 @@ pub struct ColumnsProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
     /// Align child columns vertically.
     #[prop_or_default]
     pub vcentered: bool,
@@ -43,9 +43,7 @@ impl Component for Columns {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("columns");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         if self.props.vcentered {
             classes.push("is-vcentered");
         }
@@ -71,7 +69,7 @@ pub struct ColumnProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A flexbox-based responsive column.
@@ -103,9 +101,7 @@ impl Component for Column {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("column");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <div class=classes>
                 {self.props.children.clone()}

src/components/breadcrumb.rs

@@ -10,7 +10,7 @@ pub struct BreadcrumbProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
     /// The size of this component.
     #[prop_or_default]
     pub size: Option<BreadcrumbSize>,
@@ -47,9 +47,7 @@ impl Component for Breadcrumb {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("breadcrumb");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
         }

src/components/card.rs

@@ -6,7 +6,7 @@ pub struct CardProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// An all-around flexible and composable component; this is the card container.
@@ -34,9 +34,7 @@ impl Component for Card {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("card");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <div class=classes>
                 {self.props.children.clone()}
@@ -53,7 +51,7 @@ pub struct CardHeaderProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A container for card header content; rendered as a horizontal bar with a shadow.
@@ -81,9 +79,7 @@ impl Component for CardHeader {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-header");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <header class=classes>
                 {self.props.children.clone()}
@@ -100,7 +96,7 @@ pub struct CardImageProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A fullwidth container for a responsive image.
@@ -128,9 +124,7 @@ impl Component for CardImage {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-image");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <div class=classes>
                 {self.props.children.clone()}
@@ -147,7 +141,7 @@ pub struct CardContentProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A container for any other content as the body of the card.
@@ -175,9 +169,7 @@ impl Component for CardContent {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-content");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <div class=classes>
                 {self.props.children.clone()}
@@ -194,7 +186,7 @@ pub struct CardFooterProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A container for card footer content; rendered as a horizontal list of controls.
@@ -222,9 +214,7 @@ impl Component for CardFooter {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("card-footer");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <footer class=classes>
                 {self.props.children.clone()}

src/components/dropdown.rs

@@ -11,13 +11,13 @@ pub struct DropdownProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
     /// Make this dropdown triggerable based on hover.
     #[prop_or_default]
     pub hoverable: bool,
     /// Any additional classes to use for the trigger button.
     #[prop_or_default]
-    pub button_classes: Option<String>,
+    pub button_classes: Option<Classes>,
     /// The content of the trigger button.
     #[prop_or_default]
     pub button_html: Html,
@@ -43,11 +43,7 @@ impl Component for Dropdown {
     type Properties = DropdownProps;
 
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
-        Self {
-            link,
-            props,
-            is_menu_active: false,
-        }
+        Self { link, props, is_menu_active: false }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -67,9 +63,7 @@ impl Component for Dropdown {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("dropdown");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         let opencb = if self.props.hoverable {
             classes.push("is-hoverable");
             Callback::noop()

src/components/menu.rs

@@ -6,7 +6,7 @@ pub struct MenuProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A simple menu, for any type of vertical navigation.
@@ -34,9 +34,7 @@ impl Component for Menu {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("menu");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <aside class=classes>
                 {self.props.children.clone()}
@@ -54,7 +52,7 @@ pub struct MenuListProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A container for menu list `li` elements.
@@ -82,9 +80,7 @@ impl Component for MenuList {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("menu-list");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <ul class=classes>
                 {self.props.children.clone()}
@@ -99,7 +95,7 @@ impl Component for MenuList {
 #[derive(Clone, Debug, Properties, PartialEq)]
 pub struct MenuLabelProps {
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
     /// The text of the label.
     #[prop_or_default]
     pub text: String,
@@ -130,9 +126,7 @@ impl Component for MenuLabel {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("menu-label");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <p class=classes>
                 {self.props.text.clone()}

src/components/message.rs

@@ -6,7 +6,7 @@ pub struct MessageProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// Colored message blocks, to emphasize part of your page.
@@ -34,9 +34,7 @@ impl Component for Message {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("message");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <article class=classes>
                 {self.props.children.clone()}
@@ -53,7 +51,7 @@ pub struct MessageHeaderProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// An optional message header that can hold a title and a delete element.
@@ -81,9 +79,7 @@ impl Component for MessageHeader {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("message-header");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <div class=classes>
                 {self.props.children.clone()}
@@ -100,7 +96,7 @@ pub struct MessageBodyProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
-    pub classes: Option<String>,
+    pub classes: Option<Classes>,
 }
 
 /// A container for the body of a message.
@@ -128,9 +124,7 @@ impl Component for MessageBody {
 
     fn view(&self) -> Html {
         let mut classes = Classes::from("message-body");
-        if let Some(extra) = &self.props.classes {
-            classes.push(extra);
-        }
+        classes.push(&self.props.classes);
         html! {
             <div class=classes>
                 {self.props.children.clone()}