tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

devex: Update status indicator Storybook docs (#2668)

Browse Source 
Updates docs for status indicator intended implementation:
- Renames "Neutral" -> "Incomplete"
- Adds "Info"
- Adds "Fatal"
This commit is contained in:
sua yoo 2025-06-30 12:29:45 -07:00 committed by GitHub
parent 1cfdb97d57
commit 969ea71dd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/stories/design/status-indicators.mdx
View File

@ -37,13 +37,15 @@ further clarity as to what they indicate.
## Intended Implementation
| Status | Color | Description | Icons | Examples |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> Empty</span> | Shoelace <ColorSwatch color="var(--sl-color-neutral-400)">`--sl-color-neutral-400`</ColorSwatch> | Used for empty states where no data is present | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> `slash-circle`</span> | <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> No Crawls Yet</span> |
| <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> Pending</span> | Shoelace <ColorSwatch color="var(--sl-color-violet-600)">`--sl-color-violet-600`</ColorSwatch> | Used when a process is queued or starting but is not yet running. Should be animated when indicating the status of a single object. | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> `hourglass-split`</span>, or the icon of the next state being transitioned to (pulsing) | <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> 1 Crawl Workflow Waiting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Starting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon></span> Resuming</span> |
| <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span> | Shoelace <ColorSwatch color="var(--sl-color-green-600)">`--sl-color-green-600`</ColorSwatch> | Used when a process is actively running. Should be animated when indicating the status of a single object. | <sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon> `dot` | <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span> |
| <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Paused</span> | Shoelace <ColorSwatch color="var(--sl-color-neutral-600)">`--sl-color-neutral-600`</ColorSwatch> | Used for paused states | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> `pause-circle`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> `play-circle`</span> | <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Pause</span> <br/> <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> Resume</span> |
| <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Success</span> | Shoelace <ColorSwatch color="var(--sl-color-green-600)">`--sl-color-green-600`</ColorSwatch> | Used for positive / successful states | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> `check-circle-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check2-circle"></sl-icon> `check2-circle`</span> | <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Complete</span> |
| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Neutral</span> | Shoelace <ColorSwatch color="var(--sl-color-amber-600)">`--sl-color-amber-600`</ColorSwatch> | Used for ambiguous states, generally good but could be better | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> `dash-square-fill`</span> | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Stopped</span> |
| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span> | Shoelace <ColorSwatch color="var(--sl-color-amber-600)">`--sl-color-amber-600`</ColorSwatch> | Used for warning states, something is wrong but not critically | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> `exclamation-diamond-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond"></sl-icon> `exclamation-diamond`</span> | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span> |
| <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Danger</span> | Shoelace <ColorSwatch color="var(--sl-color-orange-600)">`--sl-color-orange-600`</ColorSwatch> | Used for serious errors and actions that should be taken with extreme care | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> `x-octagon-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon"></sl-icon> `x-octagon`</span> | <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Error</span> |
| Status | Color | Description | Icons | Examples |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> Empty</span> | Shoelace <ColorSwatch color="var(--sl-color-neutral-400)">`--sl-color-neutral-400`</ColorSwatch> | Used for empty states where no data is present | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> `slash-circle`</span> | <span className="whitespace-nowrap text-neutral-400"><sl-icon style={{verticalAlign:-2}} name="slash-circle"></sl-icon> No Crawls Yet</span> |
| <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> Pending</span> | Shoelace <ColorSwatch color="var(--sl-color-violet-600)">`--sl-color-violet-600`</ColorSwatch> | Used when a process is queued or starting but is not yet running. Should be animated when indicating the status of a single object. | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> `hourglass-split`</span>, or the icon of the next state being transitioned to (pulsing) | <span className="whitespace-nowrap text-violet-600"><sl-icon style={{verticalAlign:-2}} name="hourglass-split"></sl-icon> 1 Crawl Workflow Waiting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Starting</span> <br /> <span className="whitespace-nowrap text-violet-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon></span> Resuming</span> |
| <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span> | Shoelace <ColorSwatch color="var(--sl-color-success-600)">`--sl-color-success-600`</ColorSwatch> | Used when a process is actively running. Should be animated when indicating the status of a single object. | <sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon> `dot` | <span className="whitespace-nowrap text-success-600"><span className="animate-pulse"><sl-icon style={{verticalAlign:-2}} name="dot" library="app"></sl-icon></span> Running</span> |
| <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Paused</span> | Shoelace <ColorSwatch color="var(--sl-color-neutral-600)">`--sl-color-neutral-600`</ColorSwatch> | Used for paused states | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> `pause-circle`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> `play-circle`</span> | <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="pause-circle"></sl-icon> Pause</span> <br/> <span className="whitespace-nowrap text-neutral-600"><sl-icon style={{verticalAlign:-2}} name="play-circle"></sl-icon> Resume</span> |
| <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Success</span> | Shoelace <ColorSwatch color="var(--sl-color-success-600)">`--sl-color-success-600`</ColorSwatch> | Used for positive / successful states | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> `check-circle-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="check2-circle"></sl-icon> `check2-circle`</span> | <span className="whitespace-nowrap text-success-600"><sl-icon style={{verticalAlign:-2}} name="check-circle-fill"></sl-icon> Complete</span> |
| <span className="whitespace-nowrap text-neutral-500"><sl-icon style={{verticalAlign:-2}} name="info-circle-fill"></sl-icon> Info</span> | Shoelace <ColorSwatch color="var(--sl-color-neutral-500)">`--sl-color-neutral-500`</ColorSwatch> | Used for neutral, informational states | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="info-circle-fill"></sl-icon> `info-circle-fill`</span> | <span className="whitespace-nowrap text-neutral-500"><sl-icon style={{verticalAlign:-2}} name="info-circle-fill"></sl-icon> Behavior Log</span> |
| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Incomplete</span> | Shoelace <ColorSwatch color="var(--sl-color-warning-600)">`--sl-color-warning-600`</ColorSwatch> | Used for states that are ambiguous or partially satisfied, but no longer running | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> `dash-square-fill`</span> | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="dash-square-fill"></sl-icon> Stopped</span> |
| <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span> | Shoelace <ColorSwatch color="var(--sl-color-warning-600)">`--sl-color-warning-600`</ColorSwatch> | Used for warning states, something is wrong but not critically | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> `exclamation-diamond-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond"></sl-icon> `exclamation-diamond`</span> | <span className="whitespace-nowrap text-warning-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-diamond-fill"></sl-icon> Warning</span> |
| <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle-fill"></sl-icon> Danger</span> | Shoelace <ColorSwatch color="var(--sl-color-danger-600)">`--sl-color-danger-600`</ColorSwatch> | Used for non-fatal errors that may be addressed by the user | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle-fill"></sl-icon> `exclamation-triangle-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle"></sl-icon> `exclamation-triangle`</span> | <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="exclamation-triangle-fill"></sl-icon> Payment Failed</span> |
| <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Fatal</span> | Shoelace <ColorSwatch color="var(--sl-color-danger-600)">`--sl-color-danger-600`</ColorSwatch> | Used for fatal errors and actions that result in data loss | <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> `x-octagon-fill`</span> or <span className="whitespace-nowrap"><sl-icon style={{verticalAlign:-2}} name="x-octagon"></sl-icon> `x-octagon`</span> | <span className="whitespace-nowrap text-danger-600"><sl-icon style={{verticalAlign:-2}} name="x-octagon-fill"></sl-icon> Canceled</span> |