Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Data docs based on feedback #3733

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update Data docs based on feedback #3733

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08c3c42
Update docs based on feedback
taysea Feb 20, 2024
ca2dcf0
Update based on feedback
taysea Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions aries-site/src/data/structures/components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1751,15 +1751,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: 'All components',
Expand Down
6 changes: 4 additions & 2 deletions aries-site/src/examples/components/data/DataFilterExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
6 changes: 4 additions & 2 deletions aries-site/src/examples/components/data/DataFiltersExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -21,7 +21,9 @@ export const DataFiltersExample = () => {
rating: { label: 'Rating', range: { min: 0, max: 5 } },
}}
>
<DataFilters layer />
<Toolbar>
<DataFilters layer />
</Toolbar>
</Data>
);
};
6 changes: 4 additions & 2 deletions aries-site/src/examples/components/data/DataSearchExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
6 changes: 4 additions & 2 deletions aries-site/src/examples/components/data/DataSortExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
62 changes: 32 additions & 30 deletions aries-site/src/examples/components/data/DataTableColumnsExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
60 changes: 31 additions & 29 deletions aries-site/src/examples/components/data/DataTableGroupByExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
};
6 changes: 4 additions & 2 deletions aries-site/src/examples/components/data/DataViewExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -22,7 +22,9 @@ export const DataViewExample = () => {
},
]}
>
<DataView />
<Toolbar>
<DataView />
</Toolbar>
</Data>
);
};
6 changes: 4 additions & 2 deletions aries-site/src/pages/components/data.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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".
Because this set of components work together to create the entirety of the experience, we like to refer to them as "Data and friends".
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like Im asking myself "what set of components" while reading this

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should I maybe keep the first sentence, but just say "Data is the orchestrator for a set of subcomponents." (just cut out the "wrapper" bit)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah.. I think just the beginning is what threw me off..
maybe yeah starting with "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"."

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^ I agree the beginning also threw me off, felt like it needed a little more of an intro

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated this


<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"
Expand All @@ -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
Expand Down
Loading
Loading