refactor(widgets): 💡 Icon utilizes classes to configure its style

BREAKING CHANGE: 🧨 Some widgets and examples may display icons in different sizes. I have
not addressed this yet, as those widgets and examples are scheduled for
refactoring soon.

CHANGELOG.md

@@ -32,6 +32,10 @@ Please only add new entries below the [Unreleased](#unreleased---releasedate) he
 - **core**: Added `OverrideClass` to override a single class within a subtree. (#657 @M-Adoo)
 - **widgets**: Added `LinearProgress` and `SpinnerProgress` widgets along with their respective material themes. (#630 @wjian23 @M-Adoo)
 
+### Changed
+
+- **widgets**: The `Icon` widget utilizes classes to configure its style, and it does not have a size property. (#pr @M-Adoo)
+
 ### Fixed
 
 - **core**: The size of the `Root` container is too small, which could lead to potential missed hits. (#654 @M-Adoo)

core/src/builtin_widgets/theme.rs

@@ -85,8 +85,19 @@ pub struct Theme {
   pub transitions_theme: TransitionTheme,
   pub compose_decorators: ComposeDecorators,
   pub custom_styles: CustomStyles,
-  pub font_bytes: Option<Vec<Vec<u8>>>,
-  pub font_files: Option<Vec<String>>,
+  pub font_bytes: Vec<Vec<u8>>,
+  pub font_files: Vec<String>,
+  /// This font serves as the default choice for icons and is applied by the
+  /// standard `ICON` class. It is important to ensure that this font is
+  /// included in either `font_bytes` or `font_files`.
+  ///
+  /// Theme makers may not know which icons the application will utilize, making
+  /// it challenging to provide a default icon font. Additionally, offering a
+  /// vast selection of icons in a single font file can result in a large file
+  /// size, which is not ideal for web platforms. Therefore, this configuration
+  /// allows the application developer to supply the font file. This approach
+  /// supports the use of `SVG` and [`named_svgs`](super::named_svgs).
+  pub default_icon_font: FontFace,
 }
 
 impl Theme {
@@ -107,16 +118,13 @@ impl Theme {
   fn load_fonts(&mut self) {
     let mut font_db = AppCtx::font_db().borrow_mut();
     let Theme { font_bytes, font_files, .. } = self;
-    if let Some(font_bytes) = font_bytes {
-      font_bytes
-        .iter()
-        .for_each(|data| font_db.load_from_bytes(data.clone()));
-    }
-    if let Some(font_files) = font_files {
-      font_files.iter().for_each(|path| {
-        let _ = font_db.load_font_file(path);
-      });
-    }
+    font_bytes
+      .iter()
+      .for_each(|data| font_db.load_from_bytes(data.clone()));
+
+    font_files.iter().for_each(|path| {
+      let _ = font_db.load_font_file(path);
+    });
   }
 }
 
@@ -232,13 +240,14 @@ impl Default for Theme {
     Theme {
       palette: Palette::default(),
       typography_theme: typography_theme(),
-      classes: <_>::default(),
       icon_theme,
+      classes: <_>::default(),
       transitions_theme: Default::default(),
       compose_decorators: Default::default(),
       custom_styles: Default::default(),
-      font_bytes: None,
-      font_files: None,
+      font_bytes: vec![],
+      font_files: vec![],
+      default_icon_font: Default::default(),
     }
   }
 }

core/src/test_helper.rs

@@ -355,15 +355,21 @@ impl LayoutCase {
 pub struct WidgetTester {
   pub widget: GenWidget,
   pub wnd_size: Option<Size>,
+  pub env_init: Option<Box<dyn FnOnce()>>,
   pub on_initd: Option<InitdFn>,
   pub comparison: Option<f64>,
 }
 
-type InitdFn = Box<dyn Fn(&mut TestWindow)>;
+type InitdFn = Box<dyn FnOnce(&mut TestWindow)>;
 
 impl WidgetTester {
   pub fn new(widget: impl Into<GenWidget>) -> Self {
-    Self { wnd_size: None, widget: widget.into(), on_initd: None, comparison: None }
+    Self { wnd_size: None, widget: widget.into(), on_initd: None, env_init: None, comparison: None }
+  }
+
+  pub fn with_env_init(mut self, env_init: impl Fn() + 'static) -> Self {
+    self.env_init = Some(Box::new(env_init));
+    self
   }
 
   /// This callback runs after creating the window and drawing the first frame.
@@ -382,19 +388,23 @@ impl WidgetTester {
     self
   }
 
-  pub fn create_wnd(&self) -> TestWindow {
+  pub fn create_wnd(&mut self) -> TestWindow {
+    if let Some(env_init) = self.env_init.take() {
+      env_init();
+    }
+
     let wnd_size = self.wnd_size.unwrap_or(Size::new(1024., 1024.));
     let mut wnd = TestWindow::new_with_size(self.widget.clone(), wnd_size);
     wnd.draw_frame();
-    if let Some(initd) = self.on_initd.as_ref() {
+    if let Some(initd) = self.on_initd.take() {
       initd(&mut wnd);
       wnd.draw_frame();
     }
     wnd
   }
 
   #[track_caller]
-  pub fn layout_check(&self, cases: &[LayoutCase]) {
+  pub fn layout_check(mut self, cases: &[LayoutCase]) {
     let wnd = self.create_wnd();
     cases.iter().for_each(|c| c.check(&wnd));
   }

core/src/widget_children/child_convert.rs

@@ -1,3 +1,4 @@
+use super::{DeclareInit, DeclareInto};
 use crate::{pipe::*, widget::*};
 
 /// Trait for conversions type as a child of widget.
@@ -94,3 +95,19 @@ where
   #[inline]
   fn into_child(self) -> FnWidget<'w> { FnWidget::new(self) }
 }
+
+impl<U, T> IntoChild<DeclareInit<U>, RENDER> for T
+where
+  T: DeclareInto<U, 1>,
+{
+  #[inline]
+  fn into_child(self) -> DeclareInit<U> { self.declare_into() }
+}
+
+impl<U, T> IntoChild<DeclareInit<U>, COMPOSE> for T
+where
+  T: DeclareInto<U, 2>,
+{
+  #[inline]
+  fn into_child(self) -> DeclareInit<U> { self.declare_into() }
+}

dev-helper/src/widget_test.rs

@@ -50,9 +50,14 @@ macro_rules! widget_layout_test {
 #[macro_export]
 macro_rules! widget_image_tests {
   ($name:ident, $widget_tester:expr) => {
-    widget_image_tests!(gen_test: $name, with_default_by_wgpu, Theme::default(), $widget_tester);
-    widget_image_tests!(gen_test:
-      $name,
+    widget_image_tests!(
+      gen_test: $name,
+      with_default_by_wgpu,
+      ribir_slim::purple(),
+      $widget_tester
+    );
+    widget_image_tests!(
+      gen_test: $name,
       with_material_by_wgpu,
       ribir_material::purple::light(),
       $widget_tester

examples/counter/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 [dependencies]
 paste.workspace = true
 # we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.6"

examples/messages/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 [dependencies]
 paste.workspace = true
 # we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook = "0.1.6"

examples/messages/src/messages.rs

@@ -53,7 +53,7 @@ impl Compose for MessageList {
           align_items: Align::Center,
           @Row {
             item_gap: 10.,
-            @TinyIcon { @{ svgs::MENU } }
+            @Icon { @{ svgs::MENU } }
             @Text {
               text: "Message",
               foreground: palette.on_surface(),
@@ -62,8 +62,8 @@ impl Compose for MessageList {
           }
           @Row {
             item_gap: 10.,
-            @TinyIcon { @{ svgs::SEARCH } }
-            @TinyIcon { @{ svgs::MORE_VERT } }
+            @Icon { @{ svgs::SEARCH } }
+            @Icon { @{ svgs::MORE_VERT } }
           }
         }
         @Tabs {
@@ -116,7 +116,7 @@ impl Compose for MessageList {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/storybook/src/lib.rs

@@ -15,7 +15,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/storybook/src/storybook.rs

@@ -26,7 +26,6 @@ fn content() -> Widget<'static> {
               clamp: BoxClamp::fixed_height(30.),
               @Text { text: "Common buttons" }
               @Icon {
-                size: Size::splat(16.),
                 @ { material_svgs::INFO }
               }
             }
@@ -96,7 +95,6 @@ fn content() -> Widget<'static> {
               @Row {
                 @Text { text: "Floating action buttons" }
                 @Icon {
-                  size: Size::splat(16.),
                   @ { material_svgs::INFO }
                 }
               }
@@ -129,7 +127,6 @@ fn content() -> Widget<'static> {
               @Row {
                 @Text { text: "Icon buttons" }
                 @Icon {
-                  size: Size::splat(16.),
                   @ { material_svgs::INFO }
                 }
               }
@@ -201,7 +198,6 @@ fn content() -> Widget<'static> {
             h_align: HAlign::Center,
             @Text { text: "Divider" }
             @Icon {
-              size: Size::splat(16.),
               @ { material_svgs::INFO }
             }
           }

examples/todos/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 [dependencies]
 paste.workspace = true
 # we disable `default-features`, because we want more control over testing.
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 serde = {workspace = true, features = ["derive"]}
 serde_json = {workspace = true}
 

examples/todos/src/lib.rs

@@ -15,7 +15,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

examples/wordle_game/Cargo.toml

@@ -14,7 +14,7 @@ version.workspace = true
 
 [dependencies]
 paste.workspace = true
-ribir = {path = "../../ribir", features = ["material", "widgets"]}
+ribir = {path = "../../ribir", features = ["material", "slim", "widgets"]}
 csv = "1.3.0"
 rand = "0.8.5"
 getrandom = { workspace = true }

examples/wordle_game/src/lib.rs

@@ -15,7 +15,7 @@ pub fn run() {
 
 #[cfg(test)]
 mod tests {
-  use ribir::{core::test_helper::*, material as ribir_material};
+  use ribir::{core::test_helper::*, material as ribir_material, slim as ribir_slim};
   use ribir_dev_helper::*;
 
   use super::*;

macros/src/lib.rs

@@ -156,12 +156,12 @@ pub fn pipe(input: TokenStream) -> TokenStream {
 pub fn style_class(input: TokenStream) -> TokenStream {
   let input: proc_macro2::TokenStream = input.into();
   quote! {
-    move |widget: Widget| {
+    (move |widget: Widget| {
       fn_widget! {
         let widget = FatObj::new(widget);
         @ $widget { #input }
       }.into_widget()
-    }
+    }) as fn(Widget) -> Widget
   }
   .into()
 }

painter/src/text/font_db.rs

@@ -120,17 +120,13 @@ impl FontDB {
     families
       .iter()
       .filter_map(|f| {
-        if let Some(id) = self.data_base.query(&Query {
+        let id = self.data_base.query(&Query {
           families: &[to_db_family(f)],
           weight: *weight,
           stretch: *stretch,
           style: *style,
-        }) {
-          if self.face_data_or_insert(id).is_some() {
-            return Some(id);
-          }
-        }
-        None
+        })?;
+        self.face_data_or_insert(id).map(|_| id)
       })
       .collect()
   }

ribir/Cargo.toml

@@ -17,6 +17,7 @@ ribir_algo = { path = "../algo", version = "0.4.0-alpha.15" }
 ribir_core = { path = "../core", version = "0.4.0-alpha.15" }
 ribir_gpu = { path = "../gpu", version = "0.4.0-alpha.15" }
 ribir_material = { path = "../themes/material", version = "0.4.0-alpha.15", optional = true }
+ribir_slim = { path = "../themes/ribir_slim", version = "0.4.0-alpha.15", optional = true }
 ribir_widgets = { path = "../widgets", version = "0.4.0-alpha.15", optional = true }
 rxrust.workspace = true
 wgpu = { workspace = true, optional = true }
@@ -54,6 +55,7 @@ wgpu = ["ribir_gpu/wgpu", "dep:wgpu"]
 widgets = ["ribir_widgets"]
 tokio-async = ["ribir_core/tokio-async"]
 nightly = ["ribir_core/nightly"]
+slim = ["ribir_slim"]
 
 [[test]]
 harness = false

ribir/src/lib.rs

@@ -9,6 +9,8 @@ pub mod clipboard;
 mod winit_shell_wnd;
 #[cfg(feature = "material")]
 pub use ribir_material as material;
+#[cfg(feature = "slim")]
+pub use ribir_slim as slim;
 
 mod platform;
 pub use platform::*;
@@ -17,6 +19,8 @@ pub mod prelude {
 
   #[cfg(feature = "material")]
   pub use super::material;
+  #[cfg(feature = "slim")]
+  pub use super::slim;
   #[cfg(feature = "widgets")]
   pub use super::widgets::prelude::*;
   pub use crate::app::*;

themes/material/src/classes.rs

@@ -1,10 +1,14 @@
 use ribir_core::prelude::Classes;
 
+mod icon_cls;
 mod progress_cls;
 mod radio_cls;
 mod scrollbar_cls;
+
 pub fn initd_classes() -> Classes {
   let mut classes = Classes::default();
+
+  icon_cls::init(&mut classes);
   scrollbar_cls::init(&mut classes);
   radio_cls::init(&mut classes);
   progress_cls::init(&mut classes);