refactor(Empty state): promote composition

src/app/mod.rs

@@ -31,7 +31,7 @@ pub enum Component {
     DescriptionList,
     Divider,
     Dropdown,
-    #[target(rename = "empty")]
+    #[target(rename = "empty_state")]
     EmptyState,
     ExpandableSection,
     FileUpload,

src/components/empty_state/empty_state.1.example

@@ -0,0 +1,27 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}

src/components/empty_state/empty_state.2.example

@@ -0,0 +1,21 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::XS}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}            
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}

src/components/empty_state/empty_state.3.example

@@ -0,0 +1,27 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::SM}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}

src/components/empty_state/empty_state.4.example

@@ -0,0 +1,27 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::LG}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}

src/components/empty_state/empty_state.5.example

@@ -0,0 +1,27 @@
+html!{
+    <EmptyState variant={EmptyStateVariant::XL}>
+        <EmptyStateHeader
+            title_text={html!("Empty state")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Cubes}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Primary}>{"Primary action"}</Button>
+            </EmptyStateActions>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Multiple"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action Buttons"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Can"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Go here"}</Button>
+                <Button variant={ButtonVariant::Link}>{"In the secondary"}</Button>
+                <Button variant={ButtonVariant::Link}>{"Action area"}</Button>
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}

src/components/empty_state/empty_state.6.example

@@ -0,0 +1,11 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("Loading")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<Spinner/>)} />
+            )}
+        />
+    </EmptyState>
+}

src/components/empty_state/empty_state.7.example

@@ -0,0 +1,19 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("No results found")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Search}</>)} />
+            )}
+        />
+        <EmptyStateBody>
+            {"No results match the filter criteria. Clear all filters and try again."}
+        </EmptyStateBody>
+        <EmptyStateFooter>
+            <EmptyStateActions>
+                <Button variant={ButtonVariant::Link}>{"Clear all filters"}</Button>                
+            </EmptyStateActions>
+        </EmptyStateFooter>
+    </EmptyState>
+}

src/components/empty_state/empty_state.8.example

@@ -0,0 +1,14 @@
+html!{
+    <EmptyState>
+        <EmptyStateHeader
+            title_text={html!("Custom icon color")}
+            heading_level={EmptyStateHeadingLevel::H4}
+            icon={html!(
+                <EmptyStateIcon icon={html!(<>{Icon::Check}</>)} color="var(--pf-v5-global--success-color--100)" />
+            )}
+        />
+        <EmptyStateBody>
+            {"This represents the empty state pattern in PatternFly with a custom icon color. Hopefully it's simple enough to use but flexible enough to meet a variety of needs."}
+        </EmptyStateBody>
+    </EmptyState>
+}

src/components/empty_state/mod.rs

@@ -0,0 +1,46 @@
+use crate::{example, example::ExamplePage};
+use patternfly_yew::prelude::*;
+use yew::prelude::*;
+
+pub struct EmptyStateExample {}
+
+impl Component for EmptyStateExample {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: &Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let example_a = example! ("Simple Empty State" => "simple_empty_state.1.example");
+        let example_b = example! ("Simple Empty state (XLarge)" => "simple_empty_state.2.example");
+
+        let example1 = example! ("Basic" => "empty_state.1.example");
+        let example2 = example! ("Extra small" => "empty_state.2.example");
+        let example3 = example! ("Small" => "empty_state.3.example");
+        let example4 = example! ("Large" => "empty_state.4.example");
+        let example5 = example! ("Extra large" => "empty_state.5.example");
+        let example6 = example! ("Spinner" => "empty_state.6.example");
+        let example7 = example! ("No match found" => "empty_state.7.example");
+        let example8 = example! ("Custom icon color" => "empty_state.8.example");
+
+        html! {
+            <>
+                <ExamplePage title="Empty state">
+                    {example_a}
+                    {example_b}
+
+                    {example1}
+                    {example2}
+                    {example3}
+                    {example4}
+                    {example5}
+                    {example6}
+                    {example7}
+                    {example8}
+                </ExamplePage>
+            </>
+        }
+    }
+}

src/components/empty/empty.1.example → src/components/empty_state/simple_empty_state.1.example

@@ -1,5 +1,5 @@
 html!{
-    <EmptyState
+    <SimpleEmptyState
         title="Empty state"
         icon={Icon::Cubes}
         primary={Action::new("Push me", ctx.link().callback(|_|{}))}
@@ -10,5 +10,5 @@ html!{
         ]}
         >
         {"This section should explain why the state is empty, and what you can do next."}
-    </EmptyState>
+    </SimpleEmptyState>
 }

src/components/empty/empty.2.example → src/components/empty_state/simple_empty_state.2.example

@@ -1,5 +1,5 @@
 html!{
-    <EmptyState
+    <SimpleEmptyState
         title="Empty state"
         icon={Icon::Cubes}
         size={Size::XLarge}
@@ -11,5 +11,5 @@ html!{
         ]}
         >
         {"This section should explain why the state is empty, and what you can do next."}
-    </EmptyState>
+    </SimpleEmptyState>
 }

src/components/mod.rs

@@ -14,7 +14,7 @@ mod context_selector;
 mod description_list;
 mod divider;
 mod dropdown;
-mod empty;
+mod empty_state;
 mod expandable_section;
 mod file_upload;
 mod form;
@@ -56,7 +56,7 @@ pub use context_selector::*;
 pub use description_list::*;
 pub use divider::*;
 pub use dropdown::*;
-pub use empty::*;
+pub use empty_state::*;
 pub use expandable_section::*;
 pub use file_upload::*;
 pub use form::*;