Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): Empty State docs update (VIV-2095) #2105

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

chore(docs): Empty State docs update (VIV-2095) #2105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f0afec5
update ui tests
rachelbt Jan 28, 2025
4ae0c7a
new docs format
rachelbt Jan 28, 2025
1eecb8a
Merge branch 'main' into VIV-2095-empty-state
rachelbt Jan 28, 2025
6126e98
linting
rachelbt Jan 28, 2025
38acabe
small fixes
rachelbt Jan 28, 2025
549fd25
Merge branch 'main' into VIV-2095-empty-state
rachelbt Jan 28, 2025
8072304
code review changes
rachelbt Jan 30, 2025
7d38b5a
Merge branch 'main' into VIV-2095-empty-state
rachelbt Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions apps/docs/content/_data/components.json
View file
Open in desktop
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
Open in desktop
Empty file.
Empty file added libs/components/src/lib/empty-state/GUIDELINES.md
View file
Open in desktop
Empty file.
219 changes: 69 additions & 150 deletions libs/components/src/lib/empty-state/README.md
View file
Open in desktop
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
Open in desktop
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
Loading