Merge pull request #3637 from grommet/add-filter-layer-guidance

add filter layer side drawer guidance

aries-site/src/examples/components/button/ToolbarButtonExample.js

@@ -1,17 +1,25 @@
 import React from 'react';
-import { Menu } from 'grommet';
 import {
-  FilterControls,
-  FiltersProvider,
-} from '../../templates/FilterControls';
+  Box,
+  Data,
+  Toolbar,
+  DataSearch,
+  DataFilters,
+  Menu,
+  DataSummary,
+} from 'grommet';
+import applications from '../../../data/mockData/applications.json';
 
 export const ToolbarButtonExample = () => (
-  <FiltersProvider>
-    <FilterControls
-      actions={<Menu label="Actions" kind="toolbar" />}
-      data={[]}
-      filters={[]}
-      searchFilter={{ placeholder: 'Search' }}
-    />
-  </FiltersProvider>
+  <Box>
+    <Data data={applications}>
+      <Toolbar>
+        <DataSearch />
+        <DataFilters layer />
+        <Box flex />
+        <Menu label="Actions" kind="toolbar" />
+      </Toolbar>
+      <DataSummary />
+    </Data>
+  </Box>
 );

aries-site/src/examples/components/layer/ConfigurationForm.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 import React, { useContext, useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
 import {
   Box,
   Button,
+  Data,
   DataTable,
   Form,
   FormField,
@@ -13,13 +13,12 @@ import {
   TextInput,
   CheckBoxGroup,
   AnnounceContext,
+  Toolbar,
+  DataSearch,
+  DataFilters,
+  DataSummary,
 } from 'grommet';
 import { LayerHeader } from 'aries-core';
-import {
-  useFilters,
-  FiltersProvider,
-  FilterControls,
-} from '../../templates/FilterControls';
 import applications from '../../../data/mockData/applications.json';
 import {
   ConfirmationContext,
@@ -155,72 +154,54 @@ export const LayerForm = ({ ...rest }) => {
   );
 };
 
+const columns = [
+  {
+    property: 'title',
+    header: 'Title',
+  },
+  {
+    property: 'publisher',
+    header: 'Publisher',
+  },
+  {
+    property: 'pricing',
+    header: 'Pricing',
+  },
+];
+
 const ApplicationsPage = () => {
   const { setShowLayer } = useConfirmation();
   return (
-    <FiltersProvider>
       <Page>
         <PageContent>
           <Box gap="medium">
             <Heading id="applications-heading" level={2} margin="none">
               Applications
             </Heading>
-            <FilterControls
-              data={applications}
-              filters={[]}
-              primaryKey="title"
-              searchFilter={{ placeholder: 'Search' }}
-              actions={
+            <Data data={applications}>
+              <Toolbar>
+                <DataSearch />
+                <DataFilters layer />
+                <Box flex />
                 <Button
                   label="Add application"
                   secondary
                   onClick={() => setShowLayer(true)}
                 />
-              }
-            />
-            <ApplicationResults />
+              </Toolbar>
+              <DataSummary />
+              <Box height={{ max: 'medium' }} alignSelf="start" overflow="auto">
+                <DataTable
+                  aria-describedby="applications-heading"
+                  columns={columns}
+                  pin
+                  primaryKey="title"
+                  sortable
+                />
+              </Box>
+            </Data>
           </Box>
         </PageContent>
       </Page>
-    </FiltersProvider>
   );
 };
-
-const columns = [
-  {
-    property: 'title',
-    header: 'Title',
-  },
-  {
-    property: 'publisher',
-    header: 'Publisher',
-  },
-  {
-    property: 'pricing',
-    header: 'Pricing',
-  },
-];
-
-const ApplicationResults = ({ height = { max: 'medium' } }) => {
-  // const breakpoint = useContext(ResponsiveContext);
-  const { filteredResults, selected, setSelected } = useFilters();
-
-  return (
-    <Box alignSelf="start" height={height} overflow="auto">
-      <DataTable
-        aria-describedby="applications-heading"
-        data={filteredResults}
-        columns={columns}
-        pin
-        primaryKey="title"
-        sortable
-        onSelect={nextSelected => setSelected(nextSelected)}
-        select={selected}
-      />
-    </Box>
-  );
-};
-
-ApplicationResults.propTypes = {
-  height: PropTypes.string,
-};

aries-site/src/examples/components/layer/DataFiltersAnatomy.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Data, DataFilters } from 'grommet';
+import applications from '../../../data/mockData/applications.json';
+
+export const DataFiltersAnatomy = () => {
+  return (
+    <Data
+      data={applications}
+      properties={{
+        publisher: { label: 'Publisher ' },
+        pricing: { label: 'Pricing' },
+        delivery: { label: 'Delivery' },
+        rating: { label: 'Rating' },
+      }}
+    >
+      <DataFilters layer />
+    </Data>
+  );
+};

aries-site/src/examples/components/layer/index.js

@@ -4,6 +4,7 @@ export * from './ActionableLayerClose';
 export * from './CenterInformational';
 export * from './CenterLayerAnatomy';
 export * from './ConfigurationForm';
+export * from './DataFiltersAnatomy';
 export * from './DoubleConfirmationAnatomy';
 export * from './DoubleConfirmationBestPractice';
 export * from './FullscreenLayerAnatomy';

aries-site/src/examples/components/menu/MenuBatchActionsExample.js

@@ -1,69 +1,62 @@
-import PropTypes from 'prop-types';
-import { useContext, useEffect } from 'react';
-import { Box, DataTable, Menu, ResponsiveContext, Text } from 'grommet';
+import { useContext, useState, useEffect } from 'react';
+import {
+  Box,
+  Data,
+  DataFilters,
+  DataTable,
+  DataSearch,
+  DataSummary,
+  Menu,
+  ResponsiveContext,
+  Text,
+  Toolbar,
+} from 'grommet';
 import {
   StatusWarningSmall,
   StatusCriticalSmall,
   StatusGoodSmall,
   StatusUnknownSmall,
 } from 'grommet-icons';
 
-import {
-  FilterControls,
-  FiltersProvider,
-  useFilters,
-} from '../../templates/FilterControls';
-
 const { servers } = require('../../../data/mockData/servers.json');
 
-const filtersConfig = [];
-
-export const MenuBatchActionsExample = ({ containerRef }) => {
-  // containerRef is for demonstration purposes on this site. Most
-  // implementations should likely remove.
-
-  const layerProps = {
-    // containerRef is for demonstration purposes on this site. Most
-    // implementations should likely remove.
-    target: containerRef && containerRef.current,
-  };
-
-  return (
-    <FiltersProvider>
-      <Box gap="medium">
-        <FilterControls
-          // only need a subset of records for this example
-          data={servers.items.slice(3, 12)}
-          filters={filtersConfig}
-          layerProps={layerProps}
-          searchFilter={{ placeholder: 'Search' }}
-          actions={
-            <Menu
-              label="Actions"
-              kind="toolbar"
-              open
-              items={[
-                [
-                  { label: 'Power on', onClick: () => {} },
-                  { label: 'Power off', onClick: () => {} },
-                  { label: 'Reset', onClick: () => {} },
-                  { label: 'Update firmware', onClick: () => {} },
-                ],
-                [{ label: 'Add to group', onClick: () => {} }],
-              ]}
-              dropAlign={{ top: 'bottom', right: 'right' }}
-            />
-          }
-        />
-        <ServerResults />
-      </Box>
-    </FiltersProvider>
-  );
-};
+export const MenuBatchActionsExample = () => (
+  <Data
+    data={servers.items.slice(3, 12)}
+    views={[
+      { name: 'All', properties: { status: ['Ready', 'Paused'] } },
+      { name: 'Paused', properties: { status: ['Paused'] } },
+      { name: 'Ready', properties: { status: ['Ready'] } },
+    ]}
+  >
+    <Toolbar gap="medium">
+      <Toolbar>
+        <DataSearch responsive />
+        <DataFilters layer />
+      </Toolbar>
+      {/* Flex Box added for spacing between Button */}
+      <Box flex />
+      <Menu
+        label="Actions"
+        kind="toolbar"
+        open
+        items={[
+          [
+            { label: 'Power on', onClick: () => {} },
+            { label: 'Power off', onClick: () => {} },
+            { label: 'Reset', onClick: () => {} },
+            { label: 'Update firmware', onClick: () => {} },
+          ],
+          [{ label: 'Add to group', onClick: () => {} }],
+        ]}
+        dropAlign={{ top: 'bottom', right: 'right' }}
+      />
+    </Toolbar>
+    <DataSummary />
+    <ServerResults />
+  </Data>
+);
 
-MenuBatchActionsExample.propTypes = {
-  containerRef: PropTypes.object,
-};
 
 const columns = [
   {
@@ -95,7 +88,7 @@ const statusIcons = {
 
 const ServerResults = () => {
   const breakpoint = useContext(ResponsiveContext);
-  const { filteredResults, selected, setSelected } = useFilters();
+  const [selected, setSelected] = useState([]);
 
   useEffect(() => {
     setSelected([
@@ -109,7 +102,6 @@ const ServerResults = () => {
     <Box height="medium" overflow="auto">
       <DataTable
         aria-describedby="servers-heading"
-        data={filteredResults}
         columns={[
           {
             property: 'hardware.health.summary',

aries-site/src/pages/components/layer/side-drawer-layer.mdx

@@ -1,7 +1,7 @@
-import { Notification } from 'grommet';
 import { Example } from '../../../layouts';
 import {
   ConfigurationForm,
+  DataFiltersAnatomy,
   SideDrawerLayerAnatomy,
   FilteringTable,
   LayerStickyExample,
@@ -58,6 +58,19 @@ When data has been edited or changed and the user tries to close the layer, a do
 
 Learn more about the anatomy and implementation of a [double confirmation](/components/layer#double-confirmations) on the main layer page since this behavior applies to all layer types.
 
+### Filters
+
+A filter layer is an exception to the above rules. Even though filtering requires action from the user, it is not essential that the user fills out the filtering form. Because of this, a filter layer can be closed by the following interactions:
+
+1. Clicking the "Apply filters" button, which will apply the current filter selections and close the layer.
+1. Clicking the close button in the layer header.
+1. Clicking outside of the layer, `onClickOutside`.
+1. Pressing the Escape key, `onEsc`.
+
+<Example height="auto">
+  <DataFiltersAnatomy />
+</Example>
+
 ## Scroll behavior
 
 The default behavior of the layer is to allow all of the content to scroll, but this behavior can be modified depending on the layer's contents.