New separator line widget

[Enyium]

In my app, I have a GroupBox, and inside of it a GridBox with labels, check boxes and text boxes. Some check boxes have colspan: 2, so are alone on the row. Because the last check box isn't persisted with the rest of the GroupBox's settings and is only in the GroupBox because it's functionally related, I thought that a separator line above the last check box would be appropriate.

Since a homemade Rectangle- or Path-based separator line may not look as sophisticated in every widget style/theme, and this use case should be easy as pie for the user, a new simple widget may be justified - possibly named Separator or SeparatorLine.

• It should also support vertical orientation (which I actually needed also between two Buttons).
• It seems like a little extra spacing above and below a horizontal line, in addition to what a layout would add, looks good.
• It could be worth considering whether tiny rounded corners would be better with regard to high-DPI screens.
• It may need to be ensured that the minimum line thickness is 1phx.
• The color, should you decide for a solid color, shouldn't be maximum contrast, possibly Palette.border (an example of a non-solid-color separator would be one with a gradient from transparent over a color with some contrast to transparent).

---

Prior art: HTML's <hr> and Markdown's ---.

[Enyium]

This is my take on it:

component SeparatorLine {
    in property <Orientation> orientation: horizontal;

    property <length> overall-thickness: max(10px, 1phx);
    property <length> line-thickness: max(1.2px, 1phx);

    states [
        horizontal when orientation == Orientation.horizontal : {
            root.min-height: root.overall-thickness;
            line-rectangle.height: root.line-thickness;

            line-rectangle.width: root.width;

            root.horizontal-stretch: 100%;
            root.vertical-stretch: 0%;
        }

        vertical when orientation == Orientation.vertical : {
            root.min-width: root.overall-thickness;
            line-rectangle.width: root.line-thickness;

            line-rectangle.height: root.height;

            root.vertical-stretch: 100%;
            root.horizontal-stretch: 0%;
        }
    ]

    line-rectangle := Rectangle {
        background: Palette.border;
        border-radius: root.line-thickness / 2;
    }
}

Feel free to use the code as you wish.