Autopilot UI components

[muzafarova]

Phase 2 Shared and specific Autopilot styles As the Autopilot developer I want to use the latest, common CSS components and elements and extend them to cover new styles for Autopilot components, so that Autopilot specific styles are available for re-use.

Acceptance criteria:

• Collaborate with other projects to ensure the smooth transition form v1.0 to v2.0 of the CSS Framework.
• Assess which components currently defined in the v2.0 framework are common to all uses including Autopilot and use them to style Autopilot components in current and future projects.
  • variables (colour, spacing, font)
  • buttons, badges, tags
  • form elements (?)
  • helpers (text-colour, block-colour, block-mergers)
  • typography

For future iterations, there are potentially common visual elements, that could be unified cross-project and their styles included to the framework under core or project-specific section.

Some part of UI might change soon, so this list is just a quick inventory of the current UI

Potentially Common

Typography (small and tiny size, dense)

     

Timer

Bigger than small badge, close to small button but not intractable.  (h 17.5px, font 10px)  (h 17px, font 11px)

Timeline

**Events (context enter/leave, action enter/leave)**   **Error event**   **Input/Output events/MIMO logs**   **Audit logs (backoffice only)** 

Error messages

  

JSON-viewer

 

Service bar (heading + [icon] domain name)

 

Tabs

  

State indicator

 

Tree view

   

Expandable panels

    

Code editor

 

Specific to Autopilot

Player


Identifiers (job, execution)

 

Script elements

 

UDF pipes


Round badges

  

[muzafarova]

@emmasalih I'll let you decide what to do with this issue, as I understand this, we're now attempting to unify any elements from "Potentially Common" section yet.

[inca]

More essentials for the list:

• Input with Autocomplete (keyboard-friendly)
• Context menu (incl. arbitrary nesting levels, search, docs and keyboard navigation)
• Dropdown menus (incl. labels with icons and separators, as per recent UI specs)

Not sure if those are common or Autopilot-specific, but they still need to be implemented somewhere (styling, behaviour, etc). Please note that the components listed here aren't simple, because they need to be friendly to visible space (e.g. dropdown shouldn't popup into scrollable area and trigger the scrollbars of its container) and should respect keyboard navigation. Therefore, implementing them is a sizeable UI+UX work (even if done outside CSS framework, in Autopilot-only manner).

[muzafarova]

Input with Autocomplete (keyboard-friendly)

this one might be reused across many projects, but at the moment it's not implemented anywhere else. Sounds like inbox for next framework iteration as we try to not add new requirements now. As far as I understand, we only concerned with styling here, so component logic (such as keyboard-friendliness) is out of concern (but styling for focus will be provided) Correct me if I'm wrong

Context menu

this is 100% specific to the AP today.

Dropdown menus

aren't this context menus as well? not clear from the wireframe

Btw, it would be nice to catch up later this week and decide how to keep, update and demo AP-specific stuff (via CSS Framework demo page, or should we keep this somewhere else) Have you considered web-components that we could inline into our demo page, but their style (and everything) lives somewhere else (some kind of AP-UI library)?

[muzafarova]

Closing this one as it's agreed to keep AP specific styles within the Autopilot project