Add padding attribute to sized_box view

[viktorstrate]

Changes

Masonry

• Added new padding attribute to sized_box Masonry widget.
• 3 unit tests demonstrating how padding is used.

Xilem

• Added Padding struct with convenience methods for working with paddings.
• Updated http_cats example to use padding when more convenient and fixed hack.

Examples

sized_box(label("hello world")).padding(10.) // Equal padding on all edges
sized_box(label("hello world")).padding(Padding::top(10.)) // Padding only on top edge
sized_box(label("hello world")).padding((10., 20., 30., 40.)) // Different padding for each edge

HTTP Cats

Added padding on the left in the http_cats example, to make it more balanced with the right side.

Discussion

Rename sized_box to frame?

In swiftUI the view modifier .frame() is used to change the size of a view. I think the name frame better describes the purpose of sized_box, since it also does backgrounds, borders (and now padding). So I wanted to suggest that sized_box be renamed to frame.

Add SizedBoxExt for better ergonomics?

Similar to FlexExt and GridExt, I was thinking that a new SizedBoxExt could be introduced to easily wrap any view in a sized_box, something like the following.

pub trait SizedBoxExt<State, Action>: WidgetView<State, Action> {
  fn sized_box(self) -> SizedBox<Self, State, Action> {
    sized_box(self)
  }
}

This would allow for chaining modifiers like this:

label("Hello world")
  .text_size(20.)
  .sized_box() // After this padding, background, width, height can be added
  .padding(20.)

Or even somthing more advanced like this:

label("Hello world")
  .sized_box()
  .padding(20.)
  .background(Color::Teal)
  .border(Color::Blue, 4.)
  .sized_box() // By wrapping in another sized box we add another border rather than overwriting the previous one
  .border(Color::Magenta, 4.)

[DJMcNab]

This looks really great, thank you! There are a few things I'd like to see changed before this lands, but this is idiomatic for how Xilem/Masonry are currently designed. I think the behaviour with dynamic paddings is broken, which I'd like to see addressed (or a convincing check that it isn't).

The suggested name of Frame is certainly compelling, but should be a follow-up.

[DJMcNab]

I'm not sure these debug snapshot tests are needed here.

[viktorstrate]

Should I remove them? I just copied them from the other test cases in the file.

[DJMcNab]

We can leave them from consistency. @PoignardAzur what are these snapshots actually testing?

[DJMcNab]

Looks good. Some tweaks to the docs and ordering in the file are still needed, but this is nearly ready.

[DJMcNab]

I've looked at the generated docs page, and these are really hard to discover.

These docs are in the right place, but we should also mention these impls at the top level of Padding

[viktorstrate]

I'm unsure how to best do this?

[DJMcNab]

As in, adding some text to the doc comment on Padding describing that these implementations exist for convenience?

[viktorstrate]

Okay, I added this comment now, how does that look?

https://github.com/linebender/xilem/pull/736/files#diff-5cd89e6ede9989e07db2161ca9bb872fc743fe9ecfe65f1e43da72fa6379079cR30-R31

[DJMcNab]

I'd probably choose slightly different wording, but that form looks good. Thanks!

[Philipp-M]

Rename sized_box to frame?

I'm in favor, but I think this should be a follow-up PR.

Add SizedBoxExt for better ergonomics?

I guess we can do that as well. (Could also be a follow-up)

[DJMcNab]

The unresolved comments still apply (#736 (comment) and #736 (comment)), plus this new one.

Otherwise this is really good, thanks!

[DJMcNab]

As in, adding some text to the doc comment on Padding describing that these implementations exist for convenience?

[DJMcNab]

And yes, the two suggested follow-ups (probably renaming to Frame first) would be welcome.