From 18409630b9172c44001639ca5de5a18055d9e907 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 24 Nov 2025 10:30:37 -0500 Subject: [PATCH 1/2] fix: Creates an overview page --- .../content/examples/CatalogView.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/CatalogView.md b/packages/module/patternfly-docs/content/examples/CatalogView.md index b333c67..8c3f720 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogView.md +++ b/packages/module/patternfly-docs/content/examples/CatalogView.md @@ -1,8 +1,10 @@ --- -id: Catalog view demo +id: Overview +title: Catalog view overview section: extensions subsection: Catalog view source: react +sortValue: 1 --- import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; @@ -20,11 +22,15 @@ VerticalTabsTab } from '@patternfly/react-catalog-view-extension'; import pfLogo6 from './pfLogo6.svg'; -## Catalog view +**Note:** Catalog view lives in its own package [`@patternfly/react-catalog-view-extension`](https://www.npmjs.com/package/@patternfly/react-catalog-view-extension) -To use the catalog view extension components, you need to import the CSS file into your project to get the proper styles: `import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';` +A **catalog view** is a UI layout centered around a gallery of [catalog tiles](/extensions/catalog-view/catalog-tile). To let users interact with the gallery, a catalog view can include a toolbar with support for user actions and input, a [filter side panel](/extensions/catalog-view/filter-side-panel) with [vertical tabs](/extensions/catalog-view/vertical-tabs), and a [properties side panel](/extensions/catalog-view/properties-side-panel) that provides details about the selected tile. -### Catalog view demo +To use the catalog view extension components with the proper styles, import the CSS file into your project: `import '@patternfly/react-catalog-view-extension/dist/css/react-catalog-view-extension.css';` + +--- + +## Demo ```ts isFullscreen import React from 'react'; From 389baf1c23c726bbfe689788e79915849d97c048 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Mon, 24 Nov 2025 11:38:32 -0500 Subject: [PATCH 2/2] Update heading level for demo --- .../module/patternfly-docs/content/examples/CatalogView.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/CatalogView.md b/packages/module/patternfly-docs/content/examples/CatalogView.md index 8c3f720..bcd9db2 100644 --- a/packages/module/patternfly-docs/content/examples/CatalogView.md +++ b/packages/module/patternfly-docs/content/examples/CatalogView.md @@ -3,8 +3,8 @@ id: Overview title: Catalog view overview section: extensions subsection: Catalog view -source: react sortValue: 1 +source: react --- import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; @@ -30,7 +30,7 @@ To use the catalog view extension components with the proper styles, import the --- -## Demo +### Demo ```ts isFullscreen import React from 'react';