TL;DR our version of [HIG's
Box](https://developer.apple.com/design/human-interface-guidelines/boxes)
We can't use the name `Box` (because rust) or `ContentBox` (because
taffy/styles/css).
---
This PR introduces the `ContentGroup` component, a flexible container
inspired by HIG's `Box` component. It's designed to hold and organize
various UI elements with options to toggle borders and background fills.
**Example usage**:
```rust
ContentGroup::new()
.flex_1()
.items_center()
.justify_center()
.h_48()
.child(Label::new("Flexible ContentBox"))
```
Here are some configurations:
- Default: Includes both border and fill.
- Borderless: No border for a clean look.
- Unfilled: No background fill for a transparent appearance.
**Preview**:
---
_This PR was written by a large language model with input from the
author._
Release Notes:
- N/A
This PR creates a new, revamped `DecoratedIcon` component that enables
using different SVGs, one for the knockout background and another for
the actual icon. That's different than what we were doing before—copying
the SVG and using slightly different positioning—because we wanted to
unlock an aligned knockout effect, which was particularly hard to do
with non-simple shapes such as an X.
Release Notes:
- N/A
---------
Co-authored-by: Nate Butler <1714999+iamnbutler@users.noreply.github.com>
This PR adds the `ui::Table` component.
It has a rather simple API, but cells can contain either strings or
elements, allowing for some complex uses.
Example usage:
```rust
Table::new(vec!["Product", "Price", "Stock"])
.width(px(600.))
.striped()
.row(vec!["Laptop", "$999", "In Stock"])
.row(vec!["Phone", "$599", "Low Stock"])
.row(vec!["Tablet", "$399", "Out of Stock"])
```
For more complex use cases, the table supports mixed content:
```rust
Table::new(vec!["Status", "Name", "Priority", "Deadline", "Action"])
.width(px(840.))
.row(vec![
element_cell(Indicator::dot().color(Color::Success).into_any_element()),
string_cell("Project A"),
string_cell("High"),
string_cell("2023-12-31"),
element_cell(Button::new("view_a", "View").style(ButtonStyle::Filled).full_width().into_any_element()),
])
// ... more rows
```
Preview:
This component is pretty basic, improvements are welcome!
Release Notes:
- N/A
This PR adds a theme preview tab to help get an at a glance overview of
the styles in a theme.
You can open it using `debug: open theme preview`.
The next major theme preview PR will move this into it's own crate, as
it will grow substantially as we add content.
Next for theme preview:
- Update layout to two columns, with controls on the right for selecting
theme, layer/elevation-index, etc.
- Cover more UI elements in preview
- Display theme colors in a more helpful way
- Add syntax & markdown previews
Release Notes:
- Added a way to preview the current theme's styles with the `debug:
open theme preview` command.
Nate Butler
Danilo LealandNate Butler