hint/with_hint

Closes #210

CHANGELOG.md

@@ -351,6 +351,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - `Style::with_local_named`
   - `MakeWidget::with_local`
   - `MakeWidget::with_local_dynamic`
+- `Style::hint`, `MakeWidget::hint`, and `MakeWidget::with_hint` have been added
+  to standardize a method of adding informational text to interfaces.
 
 
 [139]: https://github.com/khonsulabs/cushy/issues/139

examples/typography.rs

@@ -11,6 +11,7 @@ fn main() -> cushy::Result {
         .and("Heading 6".h6())
         .and("Regular Text")
         .and("Small Text".small())
+        .and("Hint Text".hint())
         .and("X-Small Text".x_small())
         .into_rows()
         .centered()

src/widget.rs

@@ -23,15 +23,7 @@ use crate::context::sealed::Trackable as _;
 use crate::context::{
     AsEventContext, EventContext, GraphicsContext, LayoutContext, ManageWidget, WidgetContext,
 };
-use crate::styles::components::{
-    FontFamily, FontStyle, FontWeight, Heading1FontFamily, Heading1Style, Heading1Weight,
-    Heading2FontFamily, Heading2Style, Heading2Weight, Heading3FontFamily, Heading3Style,
-    Heading3Weight, Heading4FontFamily, Heading4Style, Heading4Weight, Heading5FontFamily,
-    Heading5Style, Heading5Weight, Heading6FontFamily, Heading6Style, Heading6Weight,
-    HorizontalAlignment, IntrinsicPadding, LineHeight, LineHeight1, LineHeight2, LineHeight3,
-    LineHeight4, LineHeight5, LineHeight6, LineHeight7, LineHeight8, TextSize, TextSize1,
-    TextSize2, TextSize3, TextSize4, TextSize5, TextSize6, TextSize7, TextSize8, VerticalAlignment,
-};
+use crate::styles::components::{HorizontalAlignment, IntrinsicPadding, VerticalAlignment};
 use crate::styles::{
     ComponentDefinition, ContainerLevel, ContextFreeComponent, Dimension, DimensionRange, Edges,
     FlexibleDimension, HorizontalAlign, IntoComponentValue, IntoDynamicComponentValue, Styles,
@@ -1102,116 +1094,98 @@ pub trait MakeWidget: Sized {
 
     /// Styles `self` with the largest of 6 heading styles.
     fn h1(self) -> Style {
-        self.xxxx_large()
-            .with_dynamic(&FontStyle, Heading1Style)
-            .with_dynamic(&FontFamily, Heading1FontFamily)
-            .with_dynamic(&FontWeight, Heading1Weight)
+        Style::new(Styles::default(), self).h1()
     }
 
     /// Styles `self` with the second largest of 6 heading styles.
     fn h2(self) -> Style {
-        self.xxx_large()
-            .with_dynamic(&FontStyle, Heading2Style)
-            .with_dynamic(&FontFamily, Heading2FontFamily)
-            .with_dynamic(&FontWeight, Heading2Weight)
+        Style::new(Styles::default(), self).h2()
     }
 
     /// Styles `self` with the third largest of 6 heading styles.
     fn h3(self) -> Style {
-        self.xx_large()
-            .with_dynamic(&FontStyle, Heading3Style)
-            .with_dynamic(&FontFamily, Heading3FontFamily)
-            .with_dynamic(&FontWeight, Heading3Weight)
+        Style::new(Styles::default(), self).h3()
     }
 
     /// Styles `self` with the third smallest of 6 heading styles.
     fn h4(self) -> Style {
-        self.x_large()
-            .with_dynamic(&FontStyle, Heading4Style)
-            .with_dynamic(&FontFamily, Heading4FontFamily)
-            .with_dynamic(&FontWeight, Heading4Weight)
+        Style::new(Styles::default(), self).h4()
     }
 
     /// Styles `self` with the second smallest of 6 heading styles.
     fn h5(self) -> Style {
-        self.large()
-            .with_dynamic(&FontStyle, Heading5Style)
-            .with_dynamic(&FontFamily, Heading5FontFamily)
-            .with_dynamic(&FontWeight, Heading5Weight)
+        Style::new(Styles::default(), self).h5()
     }
 
     /// Styles `self` with the smallest of 6 heading styles.
     fn h6(self) -> Style {
-        self.default_size()
-            .with_dynamic(&FontStyle, Heading6Style)
-            .with_dynamic(&FontFamily, Heading6FontFamily)
-            .with_dynamic(&FontWeight, Heading6Weight)
+        Style::new(Styles::default(), self).h6()
     }
 
     /// Styles `self` with the largest text size.
     #[must_use]
     fn xxxx_large(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize8)
-            .with_dynamic(&LineHeight, LineHeight8)
+        Style::new(Styles::default(), self).xxxx_large()
     }
 
     /// Styles `self` with the second largest text size.
     #[must_use]
     fn xxx_large(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize7)
-            .with_dynamic(&LineHeight, LineHeight7)
+        Style::new(Styles::default(), self).xxx_large()
     }
 
     /// Styles `self` with the third largest text size.
     #[must_use]
     fn xx_large(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize6)
-            .with_dynamic(&LineHeight, LineHeight6)
+        Style::new(Styles::default(), self).xx_large()
     }
 
     /// Styles `self` with the fourth largest text size.
     #[must_use]
     fn x_large(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize5)
-            .with_dynamic(&LineHeight, LineHeight5)
+        Style::new(Styles::default(), self).x_large()
     }
 
     /// Styles `self` with the fifth largest text size.
     #[must_use]
     fn large(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize4)
-            .with_dynamic(&LineHeight, LineHeight4)
+        Style::new(Styles::default(), self).large()
     }
 
     /// Styles `self` with the third smallest text size.
     #[must_use]
     fn default_size(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize3)
-            .with_dynamic(&LineHeight, LineHeight3)
+        Style::new(Styles::default(), self).default_size()
     }
 
     /// Styles `self` with the second smallest text size.
     #[must_use]
     fn small(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize2)
-            .with_dynamic(&LineHeight, LineHeight2)
+        Style::new(Styles::default(), self).small()
     }
 
     /// Styles `self` with the smallest text size.
     #[must_use]
     fn x_small(self) -> Style {
-        self.with_dynamic(&TextSize, TextSize1)
-            .with_dynamic(&LineHeight, LineHeight1)
+        Style::new(Styles::default(), self).x_small()
+    }
+
+    /// Styles `self` as an informational hint message.
+    fn hint(self) -> Style {
+        Style::new(Styles::default(), self).hint()
     }
 
+    /// Attaches `hint` as an informational hint message below `self`.
+    ///
+    /// The spacing between `self` and `hint` is half of [`IntrinsicPadding`].
     fn with_hint(self, hint: impl MakeWidget) -> Stack {
         let probe = IntrinsicPadding.probe();
         let padding = probe
             .value()
             .map_each(|padding| FlexibleDimension::Dimension(*padding / 2));
         self.and(probe)
             .and(
-                hint.small()
+                hint.hint()
                     .with(&HorizontalAlignment, HorizontalAlign::Left),
             )
             .into_rows()

src/widgets/style.rs

@@ -1,12 +1,13 @@
+use super::validated::HintTextColor;
 use crate::context::EventContext;
 use crate::styles::components::{
     FontFamily, FontStyle, FontWeight, Heading1FontFamily, Heading1Style, Heading1Weight,
     Heading2FontFamily, Heading2Style, Heading2Weight, Heading3FontFamily, Heading3Style,
     Heading3Weight, Heading4FontFamily, Heading4Style, Heading4Weight, Heading5FontFamily,
     Heading5Style, Heading5Weight, Heading6FontFamily, Heading6Style, Heading6Weight, LineHeight,
     LineHeight1, LineHeight2, LineHeight3, LineHeight4, LineHeight5, LineHeight6, LineHeight7,
-    LineHeight8, TextSize, TextSize1, TextSize2, TextSize3, TextSize4, TextSize5, TextSize6,
-    TextSize7, TextSize8,
+    LineHeight8, TextColor, TextSize, TextSize1, TextSize2, TextSize3, TextSize4, TextSize5,
+    TextSize6, TextSize7, TextSize8,
 };
 use crate::styles::{ComponentDefinition, IntoComponentValue, IntoDynamicComponentValue, Styles};
 use crate::value::{Destination, IntoValue, Mutable, Value};
@@ -212,6 +213,11 @@ impl Style {
         self.with_dynamic(&TextSize, TextSize1)
             .with_dynamic(&LineHeight, LineHeight1)
     }
+
+    /// Styles `self` as an informational hint message.
+    pub fn hint(self) -> Style {
+        self.small().with_dynamic(&TextColor, HintTextColor)
+    }
 }
 
 impl WrapperWidget for Style {