diff --git a/packages/shoreline/src/components/collection/collection-view.tsx b/packages/shoreline/src/components/collection/collection-view.tsx index c098c43565..d5adf036a9 100644 --- a/packages/shoreline/src/components/collection/collection-view.tsx +++ b/packages/shoreline/src/components/collection/collection-view.tsx @@ -1,3 +1,5 @@ +import type { ComponentPropsWithoutRef } from 'react' +import { forwardRef } from 'react' import { IconMagnifyingGlass, IconPlus, @@ -5,8 +7,6 @@ import { IconProhibit, IconWarningCircle, } from '../../icons' -import type { ComponentPropsWithoutRef } from 'react' -import { forwardRef } from 'react' import { Button } from '../button' import { EmptyState, diff --git a/packages/shoreline/src/components/collection/stories/show.stories.tsx b/packages/shoreline/src/components/collection/stories/show.stories.tsx index b0bb3de356..4190efdc37 100644 --- a/packages/shoreline/src/components/collection/stories/show.stories.tsx +++ b/packages/shoreline/src/components/collection/stories/show.stories.tsx @@ -1,9 +1,9 @@ -import './stories.css' -import { CollectionView, Collection, CollectionRow } from '../index' -import { Search } from '../../search' -import { Pagination } from '../../pagination' import { Filter, FilterItem } from '../../filter' +import { Pagination } from '../../pagination' +import { Search } from '../../search' import { Stack } from '../../stack' +import { Collection, CollectionRow, CollectionView } from '../index' +import './stories.css' export default { title: 'components/collection', @@ -199,7 +199,89 @@ export function Show() { - {/* Custom label */} + {/* Empty custom messages */} + + + + + + Stable + Experimental + Deprecated + + + + + alert('On empty action')} + > +
+ + + + + + {/* Error custom messages */} + + + + + + Stable + Experimental + Deprecated + + + + + alert('On error action')} + > +
+ + + + + + {/* Unauthorized custom messages */} + + + + + + Stable + Experimental + Deprecated + + + + + +
+ + + + + + {/* Not found custom messages */} @@ -213,8 +295,11 @@ export function Show() {
diff --git a/packages/shoreline/src/themes/sunrise/components/collection-view.css b/packages/shoreline/src/themes/sunrise/components/collection-view.css index d879a5a148..5358f9a2df 100644 --- a/packages/shoreline/src/themes/sunrise/components/collection-view.css +++ b/packages/shoreline/src/themes/sunrise/components/collection-view.css @@ -5,11 +5,14 @@ [data-sl-collection-view] { min-height: 23.75rem; - + &:not([data-sl-collection-view-ready]) { display: flex; justify-items: center; - align-items: center; + align-items: center; } } +[data-sl-collection-view-heading] { + text-align: center; +}