kit

Popover

Built revision v17.10.0

React
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Shell, Home, List, Record, Settings, Reports, Calendar

Popover

Words beside a fact

Deposit held: £150

The deposit comes back within five days of the hall being checked. How the hall is checked

Controls
The day before
Source
@react.component
let make = () =>
  <>
    <details>
      <summary> {React.string("Words beside a fact")} </summary>
      <p>
        {React.string("Deposit held: £150 ")}
        <KitReact.Roles.IconAction icon=KitReact.Icons.iconInfo label="About the deposit" props={{popoverTarget: "role-popover-deposit"}} />
      </p>
      <KitReact.Roles.Popover id="role-popover-deposit">
        <p>
          {React.string("The deposit comes back within five days of the hall being checked. ")}
          <a href="#role-popover"> {React.string("How the hall is checked")} </a>
        </p>
      </KitReact.Roles.Popover>
    </details>
    <details>
      <summary> {React.string("Controls")} </summary>
      <KitReact.Roles.SecondaryAction props={{popoverTarget: "role-popover-reminder"}}> {React.string("Remind me")} </KitReact.Roles.SecondaryAction>
      <KitReact.Roles.Popover id="role-popover-reminder">
        <KitReact.Roles.FormGroup id="role-popover-when-form-group"
          kind=Select
          label={React.string("When")}
          controlProps={{id: "role-popover-when", name: "when"}}
          controlValue="day"
          printedValue={React.string("The day before")}
          options=[
            {label: React.string("The day before"), value: "day", props: {}},
            {label: React.string("A week before"), value: "week", props: {}},
          ]
        />
        <KitReact.Roles.SecondaryAction> {React.string("Set reminder")} </KitReact.Roles.SecondaryAction>
      </KitReact.Roles.Popover>
    </details>
  </>