Tesserae - Stateful Item Row

StatefulItemRow

Description

A full-width list row with a leading visual, two lines of text, trailing controls, and a tone that says what is happening to it

StatefulItemRow is the whole row that ListItemText is only the text of: a leading visual (an Avatar, an Icon, anything), a title with a quieter line under it, and whatever the row is acted on with pinned to the far end. It fills its container's width and ellipsizes the text rather than pushing the controls off the edge.

A tone washes the row in one of the theme's colours, which is what lets a list show a change before it has been saved: added reads green, changed blue, on its way out red and struck through.

Five components draw something row-shaped, and they are not interchangeable:

	Leading	Text	Trailing	State
`ListItemText`	icon square	title + subtitle	—	—
`Persona`	avatar	name + two lines	—	—
`ContextCard`	icon or image	label + sublabel	remove, chevron	a raw background colour
`OmniResult<T>`	icon tile	title + excerpt	command menu	—
`StatefulItemRow`	any component	title + subtitle	any components	a semantic tone

Reach for ListItemText when you only want the two lines and the container owns the row, Persona for a person shown on their own, ContextCard for one attached piece of context where remove-and-chevron is the whole interaction, and OmniResult for a search hit. StatefulItemRow covers the case none of those do: a row that carries controls you choose, or has a state to show.

Usage

Create one with StatefulItemRow(leading) — the leading visual is optional, and the row then starts at its text. SetTitle and SetSubtitle take a string or a component; Trailing(...) replaces the trailing controls and AddTrailing(...) appends to them.

Tone(RowTone) sets the wash, with the shorthands Neutral(), Primary(), Success(), Warning(), Danger() and Muted(). Muted is not a colour: it fades a row that is still worth showing but cannot be acted on. Struck() strikes the title through and leaves the subtitle alone, since the subtitle is what still identifies the row while it is going. Compact() tightens the row for a dense list, and Interactive() adds the hover wash and pointer cursor — it only changes how the row looks, so wire the click with OnClick(...).

stateful-item-row-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().WS().Children(
                StatefulItemRow(Avatar(initials: "DK").Size(AvatarSize.Medium))
                   .SetTitle("Dana Kaur")
                   .SetSubtitle("dana.kaur@curiosity.ai")
                   .Trailing(
                        Button("Can view").NoBorder().NoBackground(),
                        Button().SetIcon(UIcons.Cross).NoBorder().NoBackground()),

                StatefulItemRow(Avatar(initials: "SB").Size(AvatarSize.Medium))
                   .SetTitle("Samuel Barros")
                   .SetSubtitle("samuel.barros@curiosity.ai")
                   .Success()
                   .Trailing(Badge("Added").Pill().Outline().Success()),

                StatefulItemRow(Avatar(initials: "AS").Size(AvatarSize.Medium))
                   .SetTitle("Aiko Sato")
                   .SetSubtitle("aiko.sato@curiosity.ai")
                   .Danger()
                   .Struck()
                   .Trailing(
                        Badge("Removing").Pill().Outline().Danger(),
                        Button("Undo").NoBorder().NoBackground()),

                StatefulItemRow(Avatar(initials: "TM").Size(AvatarSize.Medium))
                   .SetTitle("Tomas Mendez")
                   .SetSubtitle("Already has access")
                   .Muted(),

                StatefulItemRow(Avatar(initials: "SA").Size(AvatarSize.Small))
                   .SetTitle("Sales — DACH")
                   .SetSubtitle("24 members")
                   .Compact()
                   .Interactive()
                   .OnClick(() => console.log("Sales — DACH")));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.Width(420.px()));
        }
    }
}

API reference

enum

RowTone

public enum RowTone

The tone a StatefulItemRow is washed in - the same set a Banner has, so a row and the notice explaining it can be told to mean the same thing.

Namespace: Tesserae

Values

Name	Description
None	No wash: an ordinary row.
Primary	The accent tone: the row is selected, or has changed.
Success	Something that was added, or went right.
Warning	Something that needs care but hasn't failed.
Danger	Something that is being taken away, or failed.
Muted	The row is still worth showing but cannot be acted on.

Value

RowTone.None

None

No wash: an ordinary row.

Value

RowTone.Primary

Primary

The accent tone: the row is selected, or has changed.

Value

RowTone.Success

Success

Something that was added, or went right.

Value

RowTone.Warning

Warning

Something that needs care but hasn't failed.

Value

RowTone.Danger

Danger

Something that is being taken away, or failed.

Value

RowTone.Muted

Muted

The row is still worth showing but cannot be acted on.

class

StatefulItemRow

public sealed class StatefulItemRow : ComponentBase<StatefulItemRow, HTMLElement>

One row of a list: a leading visual (an Avatar, an Icon, anything), a title with a quieter line under it, and whatever the row is acted on with at the far end. Where ListItemText is only the two lines of text, a StatefulItemRow is the whole row: it fills its container's width, keeps the trailing content pinned right, ellipsizes the text rather than pushing the controls off the edge, and can be washed in a RowTone to say what is happening to it - a person being added to a list reads green before anything is saved.

Examples

 StatefulItemRow(Avatar(initials: "DK"))
    .SetTitle("Dana Kaur")
    .SetSubtitle("dana.kaur@curiosity.ai")
    .Tone(RowTone.Success)
    .Trailing(Badge("Added").Pill().Outline().Success(), Button("Undo").Link());

Namespace: Tesserae
Inheritance: ComponentBase<StatefulItemRow, HTMLElement> → StatefulItemRow

Constructors

Name	Description
StatefulItemRow	Initializes a new instance of this class, with the given leading visual - which may be left out for a row that starts at its text.

Constructor

StatefulItemRow

public StatefulItemRow(IComponent leading = null)

Initializes a new instance of this class, with the given leading visual - which may be left out for a row that starts at its text.

Properties

Name	Description
CurrentTone	Gets the tone the row is washed in.

Property

StatefulItemRow.CurrentTone

public RowTone CurrentTone

Gets the tone the row is washed in.

Methods

Name	Description
SetLeading	Sets the leading visual. Passing null takes it out and the row starts at its text.
SetTitle	Sets the title. Null or empty leaves the line out.
SetSubtitle	Sets the quieter second line. Null or empty leaves the line out and the row draws as one line.
Trailing	Sets what the row is acted on with - a badge, a menu, a remove button - replacing whatever was there. It sits at the far end and keeps its size while the text ellipsizes.
AddTrailing	Appends to the trailing content, keeping what is already there.
Tone	Washes the row in the given tone.
Neutral	Draws the row with no wash.
Primary	Draws the row in the theme's primary color - selected, or changed.
Success	Draws the row as something that was added.
Warning	Draws the row as something that needs care.
Danger	Draws the row as something being taken away.
Muted	Draws the row faded - still worth showing, but not something that can be acted on.
Struck	Strikes the title through, for a row naming something that is on its way out. The subtitle is left alone: it is what identifies the row while it is being removed.
Compact	Draws the row tighter, for a dense list.
Interactive	Gives the row a hover wash and a pointer cursor, for a row that is itself clickable. It only changes how the row looks - wire the click with `OnClick`.
OnClick	Runs the given action when the row is clicked.
Render	Renders the component's root HTML element.

Method

StatefulItemRow.SetLeading

public StatefulItemRow SetLeading(IComponent leading)

Sets the leading visual. Passing null takes it out and the row starts at its text.

Method

StatefulItemRow.SetTitle

Overload
SetTitle(string)	Sets the title. Null or empty leaves the line out.
SetTitle(IComponent)	Sets the title to whatever the host built - a name with a quieter suffix, a highlighted match.

SetTitle(string)

public StatefulItemRow SetTitle(string title)

Sets the title. Null or empty leaves the line out.

Parameters

title string

SetTitle(IComponent)

public StatefulItemRow SetTitle(IComponent title)

Sets the title to whatever the host built - a name with a quieter suffix, a highlighted match.

Parameters

title IComponent

Method

StatefulItemRow.SetSubtitle

Overload
SetSubtitle(string)	Sets the quieter second line. Null or empty leaves the line out and the row draws as one line.
SetSubtitle(IComponent)	Sets the quieter second line to whatever the host built.

SetSubtitle(string)

public StatefulItemRow SetSubtitle(string subtitle)

Sets the quieter second line. Null or empty leaves the line out and the row draws as one line.

Parameters

subtitle string

SetSubtitle(IComponent)

public StatefulItemRow SetSubtitle(IComponent subtitle)

Sets the quieter second line to whatever the host built.

Parameters

subtitle IComponent

Method

StatefulItemRow.Trailing

public StatefulItemRow Trailing(params IComponent[] trailing)

Sets what the row is acted on with - a badge, a menu, a remove button - replacing whatever was there. It sits at the far end and keeps its size while the text ellipsizes.

Method

StatefulItemRow.AddTrailing

public StatefulItemRow AddTrailing(params IComponent[] trailing)

Appends to the trailing content, keeping what is already there.

Method

StatefulItemRow.Tone

public StatefulItemRow Tone(RowTone tone)

Washes the row in the given tone.

Method

StatefulItemRow.Neutral

public StatefulItemRow Neutral()

Draws the row with no wash.

Method

StatefulItemRow.Primary

public StatefulItemRow Primary()

Draws the row in the theme's primary color - selected, or changed.

Method

StatefulItemRow.Success

public StatefulItemRow Success()

Draws the row as something that was added.

Method

StatefulItemRow.Warning

public StatefulItemRow Warning()

Draws the row as something that needs care.

Method

StatefulItemRow.Danger

public StatefulItemRow Danger()

Draws the row as something being taken away.

Method

StatefulItemRow.Muted

public StatefulItemRow Muted()

Draws the row faded - still worth showing, but not something that can be acted on.

Method

StatefulItemRow.Struck

public StatefulItemRow Struck(bool value = true)

Strikes the title through, for a row naming something that is on its way out. The subtitle is left alone: it is what identifies the row while it is being removed.

Method

StatefulItemRow.Compact

public StatefulItemRow Compact(bool value = true)

Draws the row tighter, for a dense list.

Method

StatefulItemRow.Interactive

public StatefulItemRow Interactive(bool value = true)

Gives the row a hover wash and a pointer cursor, for a row that is itself clickable. It only changes how the row looks - wire the click with OnClick.

Method

StatefulItemRow.OnClick

public StatefulItemRow OnClick(System.Action action)

Runs the given action when the row is clicked.

Method

StatefulItemRow.Render

public override HTMLElement Render()

Renders the component's root HTML element.

StatefulItemRow

Description

Usage

API reference

Values

RowTone.None

RowTone.Primary

RowTone.Success

RowTone.Warning

RowTone.Danger

RowTone.Muted

Constructors

StatefulItemRow

Properties

StatefulItemRow.CurrentTone

Methods

StatefulItemRow.SetLeading

StatefulItemRow.SetTitle

SetTitle(string)

Parameters

SetTitle(IComponent)

Parameters

StatefulItemRow.SetSubtitle

SetSubtitle(string)

Parameters

SetSubtitle(IComponent)

Parameters

StatefulItemRow.Trailing

StatefulItemRow.AddTrailing

StatefulItemRow.Tone

StatefulItemRow.Neutral

StatefulItemRow.Primary

StatefulItemRow.Success

StatefulItemRow.Warning

StatefulItemRow.Danger

StatefulItemRow.Muted

StatefulItemRow.Struck

StatefulItemRow.Compact

StatefulItemRow.Interactive

StatefulItemRow.OnClick

StatefulItemRow.Render

See also