DataViews storybook: better styles for combined fields story (WordPre…

…ss#65078)
carstingaxion · Sep 5, 2024 · 3d8b6e5 · 3d8b6e5
1 parent 13af7fd
commit 3d8b6e5
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/packages/dataviews/src/components/dataviews/stories/fixtures.tsx b/packages/dataviews/src/components/dataviews/stories/fixtures.tsx
@@ -547,7 +547,15 @@ export const themeData: Theme[] = [
 export const themeFields: Field< Theme >[] = [
 	{ id: 'slug', label: 'Slug' },
 	{ id: 'name', label: 'Name' },
-	{ id: 'description', label: 'Description' },
+	{
+		id: 'description',
+		label: 'Description',
+		render: ( { item } ) => (
+			<span className="theme-field-description">
+				{ item.description }
+			</span>
+		),
+	},
 	{ id: 'requires', label: 'Requires at least' },
 	{ id: 'tested', label: 'Tested up to' },
 	{

diff --git a/packages/dataviews/src/components/dataviews/stories/index.story.tsx b/packages/dataviews/src/components/dataviews/stories/index.story.tsx
@@ -19,6 +19,8 @@ import { LAYOUT_GRID, LAYOUT_LIST, LAYOUT_TABLE } from '../../../constants';
 import { filterSortAndPaginate } from '../../../filter-and-sort-data-view';
 import type { View } from '../../../types';
 
+import './style.css';
+
 const meta = {
 	title: 'DataViews/DataViews',
 	component: DataViews,
@@ -144,6 +146,11 @@ export const CombinedFields = () => {
 					direction: 'vertical',
 				},
 			],
+			styles: {
+				theme: {
+					maxWidth: 300,
+				},
+			},
 		},
 	} );
 	const { data: shownData, paginationInfo } = useMemo( () => {

diff --git a/packages/dataviews/src/components/dataviews/stories/style.css b/packages/dataviews/src/components/dataviews/stories/style.css
@@ -0,0 +1,4 @@
+.theme-field-description {
+    text-wrap: balance;
+    text-wrap: pretty;
+}