Components

Main Header / Navigation

Specification

Emerging Dialogs

Selection	Emerging Dialog	Notes
Logout (Exit Icon)		Logs user out of application
User Name / Avatar Icon		Allows users to review their account information Additionally, hovering over the avatar/name will display a tooltip that shows the user's organization and role:
Administrative Tools (Gear Icon)		Allows users to decrypt logs exported from SIP mobile Allows users to review application version information
Reports (Printer Icon)		Allows users to select a report to configure Upon selection of a report, the "Configure Report" button is selected, and the Configure Report dialog (specific to the selected report) is displayed For a list of current reports and their configuration screens, please see the SIP - Reports page

Breadcrumbs

Breadcrumbs shall follow the navigation pane selections (the highest level being the left most breadcrumb) based on the user's selections.

Inspection Planning Example: Site > Inspection Date

Specifications

Truncating Breadcrumbs

When the breadcrumb exceeds the maximum space available, the breadcrumb shall truncate sections from left to right as necessary (see examples below).
- This ensures there is at least 8px between the results displayed counter and the right-most components.
Truncated information shall display an ellipsis, as shown below.
Hovering over the ellipsis will display a tooltip containing the entire breadcrumb.
If a filtered item has multiple selections made, the items will be separated by commas in their respective positioning.

Checkboxes

Font style shall be Roboto Regular 12px #363347

Specifications

Usage

State	Description	Specification Details
	Checkbox Selected	Background: #3598DB Icon: #FFFFFF
	Checkbox Not Selected	Stroke: 1px Solid #9A9EA3 Background: #FFFFFF
	Checkbox Focus State	Stroke: 1px Solid #3598DB Background: #FFFFFF

Date Picker

The right and left arrows allow the navigation through months.
The arrow next to the current month allows for the selection of years.

Specifications

Filter

Specifications

Grids

Grid Specifications

Inputs

These styles apply to text inputs, dropdowns, and ellipsis fields in the Inspection Planning module and the Procedure Builder interface.
These styles are intentionally different than the inputs used for the widgets for the actual procedure display.
Field labels may be placed on top of the input or to the left of the input depending on use/location.

Measurement Specifications

State Specifications

State / Description	Example	Specification Details
Normal		Height: 24px Border: 1px Solid #CED0D2 Background: #FFFFFF Label / Input Text: Roboto Regular 12px #363E47 Dropdown / Ellipsis Icon: #363E47
Hover		Height: 24px Border: 1px Solid #9A9EA3 Background: #FFFFFF Corner Radius: 4px Label / Input Text: Roboto Regular 12px #363E47 Dropdown / Ellipsis Icon: #363E47
Focus		Height: 24px Border: 1px Solid #3598DB Background: #FFFFFF Corner Radius: 4px Label / Input Text: Roboto Regular 12px #363E47 Dropdown / Ellipsis Icon: #363E47
Disabled		Height: 24px Border: None Background: #E1E2E3 Corner Radius: 4px Label / Input Text: Roboto Regular 12px #363E47 Dropdown / Ellipsis Icon: #363E47
Alert		Height: 24px Border: 1px Solid #E74C3C Background: #FFFFFF Corner Radius: 4px Label / Input Text: Roboto Regular 12px #E74C3C Dropdown / Ellipsis Icon: #E74C3C

Radio Buttons

When enabled and selected, font shall be Roboto Regular 12px #3598DB
All other states, font shall be Roboto Regular 12px #363347

Specifications

Usage

State	Description	Specification Details
	Radio Button Selected	Stroke: #3598DB Background: #FFFFFF Fill:#3598DB
	Radio Button Not Selected	Stroke: #9A9EA3 Background/Fill: #FFFFFF
	Radio Button Selected and Disabled	Stroke: #E8EAEB Background: #CED0D2 Fill: #E8EAEB
	Radio Button Disabled and Not Selected	Stroke: #E8EAEB Background/Fill:#CED0D2

Status Pills

When a Pill is being used in a grid as a status indicator it will have a min-width: 80px.
Pills have a height of 22px, which breaks the 4px scale because it allows for sufficient padding based on the grid row heights.
Pills shall have a minimum of 8px padding on the left and right taking into account the 80px min-width of the pill.
Font Size: 10px

Specifications

Usage

Status Pill	Description	Specification Details
	Inspection Planning - Main Grid - Inspection Status: Draft Procedures - Main Grid - Status: Draft	Font Color: #FFFFFF Background: #363E47
	Inspection Planning - Main Grid - Inspection Status: Submitted Procedures - Main Grid - Status: Submitted	Font Color: #363E47 Background: #FFFFFF Stroke: 1px Solid #363E47
	Inspection Planning - Main Grid - Inspection Status: Approved Procedures - Main Grid - Status: Approved	Font Color: #2ECC71 Background: #FFFFFF Stroke: 1px Solid #2ECC71
	Inspection Planning - Main Grid - Inspection Status: In Progress	Font Color: #FFFFFF Background: #F79F1F
	Inspection Planning - Main Grid - Inspection Status: Complete Procedures - Main Grid - Status: Complete	Font Color: #FFFFFF Background: #9B59B6
	Inspection Planning - Main Grid - Inspection Status: Published	Font Color: #FFFFFF Background: #2ECC71
	Procedures - Main Grid - Status: Inactive	Font Color: #7B7F84 Background: #E1E2E3

Toggle Switches

When toggle switches are in an "off" state, they will display as gray and the switch will be to the left
When toggle switches are in an "on" state, they will display as a specified color (depending on use) and the switch will be to the right
- In some use cases, the on state may also display an icon

Switch State	Example
"Off" State
"On" State

Specifications

Dialogs

Alert Dialogs

Session Timeout

Unsaved Changes

The Unsaved Changes dialog shall appear when a user attempts to navigate away from a screen when they have not yet saved their changes/progress.
The overlay behind the modal window shall cover the entirety of the window behind the Unsaved Changes dialog.

Specification

Single Selection Dialog

Multi-Select Bucket

Advanced Dialog

Preview Dialog

Dialog should be at max height (640px) and max width (980px).

Footers

Specification

Splitter / Resizer

Overview

The Splitter/Resizer can be found on the Inspection Planning Main Interface.
It gives the user the ability to expand the viewing area of the main grid or details panel depending on the user's priority.
By default, the Splitter/Resizer will be located at the 50% mark of the main grid area.
If the arrow icon is clicked at the 50% mark, the splitter/resizer will relocate to the maximum height of 80% of the main grid.
- At it's 80% location, if the arrow is clicked again, the splitter/resizer will return to it's 50% location.