Merge pull request #3733 from grommet/data-feedback

Update Data docs based on feedback
grommet · Sep 19, 2024 · 461b023 · 461b023
2 parents 520abac + 37095eb
commit 461b023
Showing 10 changed files with 99 additions and 75 deletions.
diff --git a/aries-site/src/data/structures/components.js b/aries-site/src/data/structures/components.js
@@ -1736,15 +1736,18 @@ export const components = [
     name: 'Data',
     available: true,
     category: 'Data',
-    description:
-      'A wrapper component to enable turn-key presentation and management of data collections.',
+    description: 'Turnkey presentation and manipulation of data collections.',
     preview: {
       component: () => <DataHowTo />,
     },
     seoDescription:
-      'A wrapper component to enable turn-key presentation and management of data collections.',
+      'Turnkey presentation and manipulation of data collections.',
     sections: [],
-    relatedContent: [],
+    relatedContent: [
+      'Filtering',
+      'How to add search and filter to DataTable with Data',
+      'How to add additional controls to a toolbar',
+    ],
   },
   {
     name: 'ToggleGroup',

diff --git a/aries-site/src/examples/components/data/DataFilterExample.js b/aries-site/src/examples/components/data/DataFilterExample.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import { Data, DataFilter } from 'grommet';
+import { Data, DataFilter, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataFilterExample = () => {
   return (
     <Data data={applications}>
-      <DataFilter property="delivery" />
+      <Toolbar>
+        <DataFilter property="delivery" />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/examples/components/data/DataFiltersExample.js b/aries-site/src/examples/components/data/DataFiltersExample.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Data, DataFilters } from 'grommet';
+import { Data, DataFilters, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataFiltersExample = () => {
@@ -21,7 +21,9 @@ export const DataFiltersExample = () => {
         rating: { label: 'Rating', range: { min: 0, max: 5 } },
       }}
     >
-      <DataFilters layer />
+      <Toolbar>
+        <DataFilters layer />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/examples/components/data/DataSearchExample.js b/aries-site/src/examples/components/data/DataSearchExample.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import { Data, DataSearch } from 'grommet';
+import { Data, DataSearch, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataSearchExample = () => {
   return (
     <Data data={applications}>
-      <DataSearch />
+      <Toolbar>
+        <DataSearch />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/examples/components/data/DataSortExample.js b/aries-site/src/examples/components/data/DataSortExample.js
@@ -1,11 +1,13 @@
 import React from 'react';
-import { Data, DataSort } from 'grommet';
+import { Data, DataSort, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataSortExample = () => {
   return (
     <Data data={applications}>
-      <DataSort drop />
+      <Toolbar>
+        <DataSort drop />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/examples/components/data/DataTableColumnsExample.js b/aries-site/src/examples/components/data/DataTableColumnsExample.js
@@ -1,39 +1,41 @@
 import React from 'react';
-import { Data, DataTableColumns } from 'grommet';
+import { Data, DataTableColumns, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataTableColumnsExample = () => {
   return (
     <Data data={applications}>
-      <DataTableColumns
-        options={[
-          {
-            property: 'title',
-            label: 'Title',
-          },
-          {
-            property: 'publisher',
-            label: 'Publisher',
-          },
-          {
-            property: 'categories',
-            label: 'Categories',
-          },
-          {
-            property: 'rating',
-            label: 'Rating',
-          },
-          {
-            property: 'pricing',
-            label: 'Pricing',
-          },
-          {
-            property: 'delivery',
-            label: 'Delivery',
-          },
-        ]}
-        drop
-      />
+      <Toolbar>
+        <DataTableColumns
+          options={[
+            {
+              property: 'title',
+              label: 'Title',
+            },
+            {
+              property: 'publisher',
+              label: 'Publisher',
+            },
+            {
+              property: 'categories',
+              label: 'Categories',
+            },
+            {
+              property: 'rating',
+              label: 'Rating',
+            },
+            {
+              property: 'pricing',
+              label: 'Pricing',
+            },
+            {
+              property: 'delivery',
+              label: 'Delivery',
+            },
+          ]}
+          drop
+        />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/examples/components/data/DataTableGroupByExample.js b/aries-site/src/examples/components/data/DataTableGroupByExample.js
@@ -1,38 +1,40 @@
 import React from 'react';
-import { Data, DataTableGroupBy } from 'grommet';
+import { Data, DataTableGroupBy, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataTableGroupByExample = () => {
   return (
     <Data data={applications}>
-      <DataTableGroupBy
-        options={[
-          {
-            property: 'categories',
-            label: 'Categories',
-          },
-          {
-            property: 'delivery',
-            label: 'Delivery',
-          },
-          {
-            property: 'pricing',
-            label: 'Pricing',
-          },
-          {
-            property: 'publisher',
-            label: 'Publisher',
-          },
-          {
-            property: 'rating',
-            label: 'Rating',
-          },
-          {
-            property: 'title',
-            label: 'Title',
-          },
-        ]}
-      />
+      <Toolbar>
+        <DataTableGroupBy
+          options={[
+            {
+              property: 'categories',
+              label: 'Categories',
+            },
+            {
+              property: 'delivery',
+              label: 'Delivery',
+            },
+            {
+              property: 'pricing',
+              label: 'Pricing',
+            },
+            {
+              property: 'publisher',
+              label: 'Publisher',
+            },
+            {
+              property: 'rating',
+              label: 'Rating',
+            },
+            {
+              property: 'title',
+              label: 'Title',
+            },
+          ]}
+        />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/examples/components/data/DataViewExample.js b/aries-site/src/examples/components/data/DataViewExample.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Data, DataView } from 'grommet';
+import { Data, DataView, Toolbar } from 'grommet';
 import applications from '../../../data/mockData/applications.json';
 
 export const DataViewExample = () => {
@@ -22,7 +22,9 @@ export const DataViewExample = () => {
         },
       ]}
     >
-      <DataView />
+      <Toolbar>
+        <DataView />
+      </Toolbar>
     </Data>
   );
 };
diff --git a/aries-site/src/pages/components/data.mdx b/aries-site/src/pages/components/data.mdx
@@ -12,10 +12,10 @@ import {
   ToolbarExample,
 } from '../../examples/components/';
 
-Data is the wrapper component and orchestrator for a set of subcomponents. Because this set of components work together to create the entirety of the experience, we like to refer to them as "Data and friends".
+Data is the orchestrator for a set of subcomponents. These components work together to create the entirety of the experience, we like to refer to them as "Data and friends".
 
 <Example
-  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/components/data/DataSearchExample.js"
+  code="https://raw.githubusercontent.com/grommet/hpe-design-system/master/aries-site/src/examples/components/data/DataExample.js"
   docs="https://v2.grommet.io/data"
   template
   height="auto"
@@ -24,6 +24,8 @@ Data is the wrapper component and orchestrator for a set of subcomponents. Becau
   <DataExample />
 </Example>
 
+For additional guidance on filtering patterns, see the [filtering documentation](/templates/filtering).
+
 ## Subcomponents
 
 ### DataFilter

diff --git a/yarn.lock b/yarn.lock
@@ -9386,6 +9386,11 @@ mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.17,
   dependencies:
     mime-db "1.52.0"
 
+mime@*:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-4.0.1.tgz#ad7563d1bfe30253ad97dedfae2b1009d01b9470"
+  integrity sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==
+
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"