Skip to content

Commit

Permalink
chore(docs): Empty State docs update (VIV-2095) (#2105)
Browse files Browse the repository at this point in the history 
* update ui tests

* new docs format

* linting

* small fixes

* code review changes
  • Loading branch information
@rachelbt
rachelbt authored Jan 31, 2025
1 parent 1b4f924 commit 04d4c58
Show file tree
Hide file tree
Showing 10 changed files with 429 additions and 167 deletions.
10 changes: 8 additions & 2 deletions apps/docs/content/_data/components.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -402,8 +402,14 @@
},
{
"title": "Empty State",
"page": "legacy",
"markdown": "./libs/components/src/lib/empty-state/README.md"
"description": "The Empty State component is used to display a message when there is no data to show.",
"variations": "./libs/components/src/lib/empty-state/VARIATIONS.md",
"guidelines": "./libs/components/src/lib/empty-state/GUIDELINES.md",
"hideGuidelines": "true",
"code": "./libs/components/src/lib/empty-state/README.md",
"accessibility": "./libs/components/src/lib/empty-state/ACCESSIBILITY.md",
"hideAccessibility": "true",
"useCases": "./libs/components/src/lib/empty-state/USE-CASES.md"
},
{
"title": "File Picker",
Expand Down
Empty file added libs/components/src/lib/empty-state/ACCESSIBILITY.md
View file
Empty file.
Empty file added libs/components/src/lib/empty-state/GUIDELINES.md
View file
Empty file.
219 changes: 69 additions & 150 deletions libs/components/src/lib/empty-state/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,174 +1,66 @@
# Empty State
## Usage

The Empty State component is used to display a message when there is no data to show.
<vwc-tabs gutters="none">
<vwc-tab label="Web component"></vwc-tab>
<vwc-tab-panel>

```js
<script type="module">import '@vonage/vivid/empty-state';</script>
import '@vonage/vivid/empty-state';
```

```html preview
<vwc-empty-state icon="search-line" headline="No results found">
No results match your search criteria.
<vwc-button
slot="action-items"
shape="pill"
label="Reset filters"
appearance="outlined"
></vwc-button>
</vwc-empty-state>
```

## Members

### Headline
or, if you need to use a unique prefix:

Use the `headline` attribute add a headline to the empty state.

- Type: `string`
- Default: `undefined`
```js
import { registerEmptyState } from '@vonage/vivid';

```html preview
<vwc-empty-state headline="No results found"></vwc-empty-state>
registerEmptyState('your-prefix');
```

### Icon

Use the `icon` attribute to set the icon of the empty state.

- Type: `string`
- Default: `inbox-line`

```html preview
<vwc-empty-state icon="search-line"></vwc-empty-state>
```

### Connotation

Set the `connotation` attribute to change the empty-state's connotation.
It accepts a subset of predefined values.

- Type: `'accent'` | `'success'` | `'alert'` | `'cta'` | `'information'` | `'warning'`
- Default: `'accent'`
<script type="module">
import { registerEmptyState } from '@vonage/vivid';
registerEmptyState('your-prefix');
</script>

```html preview 300px
<div
style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: flex-start"
>
<vwc-empty-state icon="search-line" headline="Accent connotation">
No results
</vwc-empty-state>
<vwc-empty-state
icon="check-solid"
headline="Success connotation"
connotation="success"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon="error-solid"
headline="Alert connotation"
connotation="alert"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon="sparkles-solid"
headline="Cta connotation"
connotation="cta"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon="envelope-solid"
headline="Information connotation"
connotation="information"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon="warning-solid"
headline="Warning connotation"
connotation="warning"
>
No results
</vwc-empty-state>
</div>
<your-prefix-empty-state icon="search-line" headline="No results found">
No results match your search criteria.
</your-prefix-empty-state>
```

### Icon-decoration

Use icon-decoration to change the design of the icon circle.

- Type: `filled` | `outlined`
- Default: `filled`

```html preview 300px
<div
style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: flex-start"
>
<vwc-empty-state
icon-decoration="outlined"
icon="search-line"
headline="Accent connotation"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon-decoration="outlined"
icon="check-solid"
headline="Success connotation"
connotation="success"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon-decoration="outlined"
icon="error-solid"
headline="Alert connotation"
connotation="alert"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon-decoration="outlined"
icon="sparkles-solid"
headline="Cta connotation"
connotation="cta"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon-decoration="outlined"
icon="envelope-solid"
headline="Information connotation"
connotation="information"
>
No results
</vwc-empty-state>
<vwc-empty-state
icon-decoration="outlined"
icon="warning-solid"
headline="Warning connotation"
connotation="warning"
>
No results
</vwc-empty-state>
</div>
</vwc-tab-panel>
<vwc-tab label="Vue"></vwc-tab>
<vwc-tab-panel>

```html
<script setup lang="ts">
import { VEmptyState } from '@vonage/vivid-vue';
</script>
<template>
<VEmptyState icon="phone-number-line" headline="No numbers">
You do not have any numbers yet.
</VEmptyState>
</template>
```

</vwc-tab-panel>
</vwc-tabs>

## Slots

### Default
### Default Slot

Use the default slot to set the content of the empty state.
Use the `default` slot to set the content of the Empty State.

```html preview
<vwc-empty-state>No results match your search criteria.</vwc-empty-state>
<vwc-empty-state icon="check-solid"
>No results match your search criteria.</vwc-empty-state
>
```

### Graphic
### Graphic Slot

Use the `graphic` slot to override the graphic of the empty state.
Use the `graphic` slot to set a graphic element to the Empty State.
`graphic` slot override the icon of the Empty State.

```html preview
<vwc-empty-state headline="No results found">
Expand Down Expand Up @@ -212,9 +104,9 @@ Use the `graphic` slot to override the graphic of the empty state.
</vwc-empty-state>
```

### Action Items
### Action Items Slot

Use the `action-items` slot to add action items to the empty state.
Use the `action-items` slot to add action items to the Empty State.

```html preview
<vwc-empty-state icon="phone-number-line" headline="No numbers">
Expand All @@ -233,3 +125,30 @@ Use the `action-items` slot to add action items to the empty state.
></vwc-button>
</vwc-empty-state>
```

## API Reference

### Properties

<div class="table-wrapper">

| Name | Type | Description |
| ------------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **icon** | Enum: `[icon-name]` | A decorative icon the Empty State should have. See the [Vivid Icon Gallery](/icons/icons-gallery/) for available icons and `icon-name`s |
| **icon-decoration** | Enum:`filled` (default), `outlined` | option to a new design for the icon circle |
| **headline** | `string` | An optional headline for the empty state. |
| **connotation** | Enum: `accent` (default), `cta`, `success`, `alert`, `information`, `warning` | The connotation the button should have. |

</div>

### Slots

<div class="table-wrapper">

| Name | Description |
| ---------------- | ---------------------------------------------------------------------- |
| **default** | The default slot controls the body text of the empty state |
| **graphic** | The graphic slot allows overriding the icon with a custom illustration |
| **action-items** | Slot to add action items to the empty state |

</div>
69 changes: 69 additions & 0 deletions libs/components/src/lib/empty-state/USE-CASES.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
## Empty State inside Searchable Select

```html preview 300px
<vwc-searchable-select label="Connect number">
<vwc-empty-state
slot="no-options"
icon-decoration="outlined"
icon="phone-number-line"
headline="No numbers"
>
You do not have any numbers yet.
</vwc-empty-state>
</vwc-searchable-select>
```

## Empty State inside Dialog

```html preview 450px
<vwc-dialog open>
<vwc-empty-state
slot="body"
class="empty-state"
icon-decoration="outlined"
icon="check-solid"
connotation="success"
headline="You made it!"
>
Your request was submitted. Waht do you wish to do now?
<vwc-button
slot="action-items"
appearance="outlined"
label="continue"
></vwc-button>
<vwc-button
slot="action-items"
appearance="filled"
connotation="cta"
label="Read More"
></vwc-button>
</vwc-empty-state>
</vwc-dialog>
```

## Empty State & Data Grid

```html preview 450px
<vwc-data-grid>
<vwc-data-grid-row role="row" class="header" row-type="header">
<vwc-data-grid-cell cell-type="columnheader" role="columnheader">
data1
</vwc-data-grid-cell>
<vwc-data-grid-cell cell-type="columnheader"> data2 </vwc-data-grid-cell>
</vwc-data-grid-row>
</vwc-data-grid>
<vwc-empty-state
class="empty-state"
icon-decoration="outlined"
icon="search-line"
headline="No Data"
>
There's no data here yet
</vwc-empty-state>

<style>
.empty-state {
margin-block-start: 32px;
}
</style>
```
Loading

0 comments on commit 04d4c58

Please sign in to comment.