kit

Field result

Built revision v17.10.0

CSS core
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 Field result

Field result, accepted

Meeting Room

Check recorded

The room check is recorded. The booking now shows the check as done.

A result whose next action cannot be taken yet.

Meeting Room

Check recorded

The room check is recorded. The booking now shows the check as done.

Wait for the booking to load before returning.

Show a new result

Meeting Room

Check recorded

The room check is recorded. The booking now shows the check as done.

Source
<section data-kit-role="field-result" data-kit-state="accepted" aria-label="Room check result">
  <div>
    <p data-kit-region="subject">Meeting Room</p>
    <h1 data-kit-region="result-words">Check recorded</h1>
    <p data-kit-region="supporting-standing">The room check is recorded. The booking now shows the check as done.</p>
    <div data-kit-region="next-action"><button type="button" data-kit-role="emphasised-next-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back to booking</span></button></div>
  </div>
</section>
<p class="specimen-case-line">A result whose next action cannot be taken yet.</p>
<section data-kit-role="field-result" data-kit-state="accepted" aria-label="Room check result">
  <div>
    <p data-kit-region="subject">Meeting Room</p>
    <h1 data-kit-region="result-words">Check recorded</h1>
    <p data-kit-region="supporting-standing">The room check is recorded. The booking now shows the check as done.</p>
    <div data-kit-region="next-action"><button type="button" id="role-field-result-back" data-kit-role="emphasised-next-action" data-kit-state="inert" disabled aria-describedby="role-field-result-back-words"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back to booking</span></button><p data-kit-region="words" id="role-field-result-back-words">Wait for the booking to load before returning.</p></div>
  </div>
</section>
<details>
  <summary>Show a new result</summary>
  <section id="role-field-result-read-1" data-kit-role="field-result" data-kit-state="accepted" aria-label="Room check result">
    <div>
      <p data-kit-region="subject">Meeting Room</p>
      <h1 data-kit-region="result-words">Check recorded</h1>
      <p data-kit-region="supporting-standing">The room check is recorded. The booking now shows the check as done.</p>
      <div data-kit-region="next-action"><button type="button" data-kit-role="emphasised-next-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back to booking</span></button></div>
    </div>
  </section>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Read again</span></button>
</details>

Field result, refused

Meeting Room

Check refused

This booking already has a room check. Your check was not recorded.

Source
<section data-kit-role="field-result" data-kit-state="refused" aria-label="Room check result">
  <div>
    <p data-kit-region="subject">Meeting Room</p>
    <h1 data-kit-region="result-words">Check refused</h1>
    <p data-kit-region="supporting-standing">This booking already has a room check. Your check was not recorded.</p>
    <div data-kit-region="next-action"><button type="button" data-kit-role="emphasised-next-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back to booking</span></button></div>
  </div>
</section>

Field result, conflict

Meeting Room

Conflict — review needed

Another caretaker recorded this room check while you were entering yours. Your check was not recorded.

Source
<section data-kit-role="field-result" data-kit-state="conflict" aria-label="Room check result">
  <div>
    <p data-kit-region="subject">Meeting Room</p>
    <h1 data-kit-region="result-words">Conflict — review needed</h1>
    <p data-kit-region="supporting-standing">Another caretaker recorded this room check while you were entering yours. Your check was not recorded.</p>
    <div data-kit-region="next-action"><button type="button" data-kit-role="emphasised-next-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back to booking</span></button></div>
  </div>
</section>

Field result, processing

Meeting Room

Recording the check

The check is sent. The booking shows it as done once the diary takes it.

Source
<section data-kit-role="field-result" data-kit-state="processing" aria-label="Room check result">
  <div>
    <p data-kit-region="subject">Meeting Room</p>
    <h1 data-kit-region="result-words">Recording the check</h1>
    <p data-kit-region="supporting-standing">The check is sent. The booking shows it as done once the diary takes it.</p>
    <div data-kit-region="next-action"><button type="button" data-kit-role="emphasised-next-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back to booking</span></button></div>
  </div>
</section>