${ACTIONS_MARKUP}
@@ -143,15 +146,59 @@ export const Sizes = {
parameters: {
docs: {
controls: { disable: true },
- description: { story: 'The three size variants — small, medium, large — stacked.' },
+ description: { story: 'The size variants — small and medium — stacked.' },
source: { code: toSfc(IMPORTS, SIZES_TEMPLATE) }
}
}
}
+const ICON_MARKUP = `
+${ACTIONS_MARKUP}
+`
+
+/** @type {import('@storybook/vue3').StoryObj
} */
+export const Icon = {
+ args: { icon: 'pi pi-inbox' },
+ render: Template,
+ parameters: {
+ docs: {
+ description: {
+ story: 'The standardized featured-icon tile adornment, driven by the `icon` prop.'
+ },
+ source: { code: toSfc(IMPORTS, ICON_MARKUP) }
+ }
+ }
+}
+
+const NO_ADORNMENT_MARKUP = `
+${ACTIONS_MARKUP}
+`
+
+/** @type {import('@storybook/vue3').StoryObj} */
+export const NoAdornment = {
+ args: { icon: '' },
+ render: Template,
+ parameters: {
+ docs: {
+ description: {
+ story: 'No adornment: neither the `icon` prop nor the `icon` slot is provided, so the adornment container does not render.'
+ },
+ source: { code: toSfc(IMPORTS, NO_ADORNMENT_MARKUP) }
+ }
+ }
+}
+
const BORDERED_MARKUP = `
${ACTIONS_MARKUP}
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 599757332..3ffcfafa9 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -4242,26 +4242,33 @@
"required": "no",
"doc": "Supporting body copy below the title."
},
+ {
+ "name": "icon",
+ "type": "string",
+ "default": "''",
+ "required": "no",
+ "doc": "PrimeIcons/Azion icon class for the standardized adornment (e.g. `pi pi-inbox`). When set, renders a size-scaled featured-icon tile; when empty and the `icon` slot is unused, no adornment renders."
+ },
{
"name": "size",
- "type": "'small' | 'medium' | 'large'",
+ "type": "'small' | 'medium'",
"default": "'medium'",
"required": "no",
- "doc": "Size token; affects the illustration size, the surrounding padding, and the gaps between illustration, text, and actions."
+ "doc": "Size token (subset — only `small` and `medium`; no `large`). Scales the whole block on one harmonic ramp — the adornment size, the title and description typography, the surrounding padding, and the gaps between adornment, text, and actions all step up together."
},
{
"name": "bordered",
"type": "boolean",
"default": "false",
"required": "no",
- "doc": "When true, wraps the content in a bordered surface card; otherwise renders on a transparent background."
+ "doc": "When true, wraps the content in a dashed-bordered surface card; otherwise renders on a transparent background."
}
],
"slots": [
{
"name": "icon",
"scope": "—",
- "notes": "Decorative illustration centered above the title; rendered inside an `aria-hidden` container. Defaults to the bundled `EmptyStateIllustration` sub-component when not provided."
+ "notes": "Custom adornment centered above the title, rendered inside an `aria-hidden` container. Overrides the `icon` prop's featured-icon tile. When neither this slot nor the `icon` prop is provided, no adornment renders."
},
{
"name": "actions",
@@ -4269,7 +4276,7 @@
"notes": "Action area below the description; consumer composes buttons and the documentation link."
}
],
- "purpose": "Centered placeholder shown when a resource list or section has no content yet. Stacks a decorative illustration, a title, an optional description, and a consumer-composed actions area (buttons + documentation link) to guide the user toward a first action. Unlike `Message`, which is an inline severity banner, `EmptyState` is a full-region zero-data state and renders either inside a bordered surface card or on a plain transparent background."
+ "purpose": "Centered placeholder shown when a resource list or section has no content yet. Stacks an optional standardized adornment, a title, an optional description, and a consumer-composed actions area (buttons + documentation link) to guide the user toward a first action. The adornment is a standardized, size-scaled featured-icon tile driven by the `icon` prop; the consumer may instead supply custom content via the `icon` slot, or omit both for no adornment. Unlike `Message`, which is an inline severity banner, `EmptyState` is a full-region zero-data state and renders either inside a bordered surface card or on a plain transparent background."
},
"status-indicator": {
"import": "@aziontech/webkit/status-indicator",
diff --git a/packages/webkit/src/components/data/table/table.vue b/packages/webkit/src/components/data/table/table.vue
index 993085a2a..e7ad26f7d 100644
--- a/packages/webkit/src/components/data/table/table.vue
+++ b/packages/webkit/src/components/data/table/table.vue
@@ -19,8 +19,8 @@
import { useDebounceFn } from '@vueuse/core'
import { computed, getCurrentInstance, provide, ref, useAttrs, useSlots, watch } from 'vue'
- import EmptyIllustration from '../../../svg/illustration-layers/illustration-layers.vue'
import { downloadCsv, toCsv } from '../../../utils/csv'
+ import EmptyState from '../../feedback/empty-state/empty-state.vue'
import Skeleton from '../../feedback/skeleton/skeleton.vue'
import Checkbox from '../../inputs/checkbox/checkbox.vue'
import ScrollArea from '../../layout/scroll-area/scroll-area.vue'
@@ -1128,16 +1128,15 @@
v-if="!loading && rows.length === 0"
role="presentation"
:data-testid="`${testId}__empty`"
- class="flex w-full flex-col items-center justify-center gap-[var(--spacing-6)] px-[var(--spacing-8)] py-[var(--spacing-12)] text-center"
+ class="w-full"
>
-
-
-
No results yet
-
- Get started by creating your first resource.
-
-
diff --git a/packages/webkit/src/components/feedback/empty-state/empty-state.test.ts b/packages/webkit/src/components/feedback/empty-state/empty-state.test.ts
index afcf8d793..7aa062811 100644
--- a/packages/webkit/src/components/feedback/empty-state/empty-state.test.ts
+++ b/packages/webkit/src/components/feedback/empty-state/empty-state.test.ts
@@ -28,7 +28,7 @@ describe('EmptyState', () => {
it('honours a consumer-supplied data-testid across the whole subtree', () => {
const { getByTestId } = within(
render(EmptyState, {
- props: { title: 'Empty' },
+ props: { title: 'Empty', icon: 'pi pi-inbox' },
attrs: { 'data-testid': 'custom-empty' }
}).container
)
@@ -51,19 +51,27 @@ describe('EmptyState', () => {
expect(withoutDesc.queryByTestId('feedback-empty-state__description')).toBeNull()
})
- it('marks the icon container aria-hidden and renders the default illustration', () => {
- const { getByTestId } = within(render(EmptyState, { props: { title: 'Empty' } }).container)
+ it('renders no adornment when neither the icon prop nor the icon slot is provided', () => {
+ const { queryByTestId } = within(render(EmptyState, { props: { title: 'Empty' } }).container)
+
+ expect(queryByTestId('feedback-empty-state__icon')).toBeNull()
+ })
+
+ it('renders the standardized featured-icon tile when the icon prop is set', () => {
+ const { getByTestId } = within(
+ render(EmptyState, { props: { title: 'Empty', icon: 'pi pi-inbox' } }).container
+ )
const icon = getByTestId('feedback-empty-state__icon')
expect(icon.getAttribute('aria-hidden')).toBe('true')
- // Default slot renders the bundled illustration (an svg/element inside the tile).
- expect(icon.children.length).toBeGreaterThan(0)
+ // The tile carries the consumer-supplied icon glyph.
+ expect(icon.querySelector('i.pi.pi-inbox')).toBeTruthy()
})
- it('renders custom icon slot content in place of the default illustration', () => {
+ it('renders custom icon slot content, overriding the icon prop tile', () => {
const { getByTestId } = within(
render(EmptyState, {
- props: { title: 'Empty' },
+ props: { title: 'Empty', icon: 'pi pi-inbox' },
slots: { icon: '