feat(Datagrid): Filter flyout (carbon-design-system#2406)

* fix: filter flyout doesn't close * feat(Datagrid): Added number and dropdown input filter * feat(Datagrid): added filterTypes and date between filter * feat: added cell key to headers and hasClickedOnDatePicker * fix: removed unused imports * chore: update yarn lock and cache * chore(Datagrid): moved filterTypes to useFiltering.js * feat(Datagrid): changed status icon to return obj * feat(datagrid): refactor date filter * fix(datagrid): removed console.log * feat(datagrid): refactored number filter * feat(datagrid): refactored dropdown filter * feat(datagrid): removed type and changed date filter * fix(datagrid): fixed filterTypes key to reflect changes * fix(datagrid): changed status_icon to password strength * feat(datagrid): adds checkbox filter * feat(datagrid): adding batch actions * feat(datagrid): adds batch filter method * fix(datagrid): removed unnecessary date function * fix(datagrid): added nullish coalescing to filterProps check * fix(datagrid): this component is no longer needed * feat(datagrid): adds props for action set labels and callbacks * feat(datagrid): added flyoutIconDescription prop * feat(datagrid): added missing copyright headers * feat(datagrid): added carbon prefixes * feat(datagrid): overrides action set to display 48px button size * feat(datagrid): adds checkbox filter * fix(datagrid): changes chance for each individual property * feat(datagrid): added extra callback functions to props * fix(datagrid): added open class back * feat(datagrid): refactored flyout components * feat(datagrid): refactored filters to be render in flyout * feat(datagrid): fixed resetting filters * fix(datagrid): action set styles * fix(datagrid): redundant change * fix(datagrid): redundant change * fix(datagrid): fixed css properties order * fix(datagrid): fixed constant typo * fix(datagrid): fix linting * chore(datagrid): fix linting issues * feat(datagrid): adds variation prop * feat: adds FilterSummary * fix: removes stylint-disable * fix(FilterSummary): changed filters prop * feat(FilterFlyout): adding filter tags * chore(FilterSummary): clean up adding reset filters * feat(Datagrid): adds FilterSummary * fix: added null check to filterProps * feat(Datagrid): adds optional onChange from user * feat(Datagrid): added constant, storybook actions and emptystate props * fix: yarn.lock * chore: format files Co-authored-by: Matt Gallo <[email protected]>
matthewgallo · Jan 31, 2023 · 2079c78 · 2079c78
1 parent c207d63
commit 2079c78
Show file tree

Hide file tree

Showing 35 changed files with 1,705 additions and 684 deletions.
diff --git a/.yarn/cache/anymatch-npm-3.1.2-1d5471acfa-985163db22.zip b/.yarn/cache/anymatch-npm-3.1.2-1d5471acfa-985163db22.zip
diff --git a/.yarn/cache/compute-scroll-into-view-npm-1.0.17-708f0ecc3d-b20c05a10c.zip b/.yarn/cache/compute-scroll-into-view-npm-1.0.17-708f0ecc3d-b20c05a10c.zip
diff --git a/.yarn/cache/global-dirs-npm-3.0.0-45faebeb68-953c17cf14.zip b/.yarn/cache/global-dirs-npm-3.0.0-45faebeb68-953c17cf14.zip
diff --git a/.yarn/cache/ignore-npm-5.2.0-fc4b58a4f3-6b1f926792.zip b/.yarn/cache/ignore-npm-5.2.0-fc4b58a4f3-6b1f926792.zip
diff --git a/.yarn/cache/jest-pnp-resolver-npm-1.2.2-da20f8bdfe-bd85dcc0e7.zip b/.yarn/cache/jest-pnp-resolver-npm-1.2.2-da20f8bdfe-bd85dcc0e7.zip
diff --git a/.yarn/cache/listr2-npm-4.0.5-e9e44decc1-7af31851ab.zip b/.yarn/cache/listr2-npm-4.0.5-e9e44decc1-7af31851ab.zip
diff --git a/.yarn/cache/longest-streak-npm-3.0.1-b7643ecd4e-3b59c4c04c.zip b/.yarn/cache/longest-streak-npm-3.0.1-b7643ecd4e-3b59c4c04c.zip
diff --git a/.yarn/cache/postcss-selector-parser-npm-6.0.10-a4d7aaa270-46afaa60e3.zip b/.yarn/cache/postcss-selector-parser-npm-6.0.10-a4d7aaa270-46afaa60e3.zip
diff --git a/.yarn/cache/vfile-message-npm-3.1.2-3afbe8534c-96fbd9e9b5.zip b/.yarn/cache/vfile-message-npm-3.1.2-3afbe8534c-96fbd9e9b5.zip
diff --git a/.yarn/cache/w3c-xmlserializer-npm-3.0.0-3419fc8f05-0af8589942.zip b/.yarn/cache/w3c-xmlserializer-npm-3.0.0-3419fc8f05-0af8589942.zip
diff --git a/packages/cdai/src/components/IdeNavigation/Navigation/_IdeNavigation.scss b/packages/cdai/src/components/IdeNavigation/Navigation/_IdeNavigation.scss
@@ -58,11 +58,15 @@
 }
 
 // remove the hover behaviour from the side nav
-.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):not(.#{$prefix}--side-product-nav):hover {
+.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
+    .#{$prefix}--side-nav--fixed
+  ):not(.#{$prefix}--side-product-nav):hover {
   width: carbon--mini-units(6);
 }
 
-.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):not(.#{$prefix}--side-product-nav):hover.#{$prefix}--side-nav--expanded {
+.#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(
+    .#{$prefix}--side-nav--fixed
+  ):not(.#{$prefix}--side-product-nav):hover.#{$prefix}--side-nav--expanded {
   width: carbon--mini-units(32);
 }
 

diff --git a/packages/cloud-cognitive/src/components/ActionSet/_action-set.scss b/packages/cloud-cognitive/src/components/ActionSet/_action-set.scss
@@ -96,7 +96,9 @@
   .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--max
     .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost),
   .#{$block-class}.#{$carbon-prefix}--btn-set.#{$block-class}--row-quadruple
-    .#{$block-class}__action-button:not(.#{$block-class}__action-button--ghost) {
+    .#{$block-class}__action-button:not(
+      .#{$block-class}__action-button--ghost
+    ) {
     max-width: rem(232px);
     flex: 0 1 25%;
   }

diff --git a/packages/cloud-cognitive/src/components/AddSelect/_add-select.scss b/packages/cloud-cognitive/src/components/AddSelect/_add-select.scss
@@ -157,7 +157,9 @@
   .#{$block-class} .#{$carbon-prefix}--structured-list-row,
   .#{$block-class}
     .#{$block-class}__selections.#{$carbon-prefix}--structured-list--selection
-    .#{$carbon-prefix}--structured-list-row:hover:not(.#{$carbon-prefix}--structured-list-row--header-row):not(.#{$carbon-prefix}--structured-list-row--selected) {
+    .#{$carbon-prefix}--structured-list-row:hover:not(
+      .#{$carbon-prefix}--structured-list-row--header-row
+    ):not(.#{$carbon-prefix}--structured-list-row--selected) {
     border-bottom: 0;
   }
 

diff --git a/packages/cloud-cognitive/src/components/Datagrid/Datagrid.stories.js b/packages/cloud-cognitive/src/components/Datagrid/Datagrid.stories.js
@@ -6,36 +6,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect } from 'react';
-import { range, makeData, newPersonWithTwoLines } from './utils/makeData';
+import React, { useEffect, useState } from 'react';
+import { StatusIcon } from '../StatusIcon';
+import { makeData, newPersonWithTwoLines, range } from './utils/makeData';
 
 import { getStoryTitle } from '../../global/js/utils/story-helper';
 
 import { action } from '@storybook/addon-actions';
+
 import { Activity16, Add16 } from '@carbon/icons-react';
 import { DataTable } from 'carbon-components-react';
 import {
   Datagrid,
+  useActionsColumn,
   useDatagrid,
+  useDisableSelectRows,
+  useFiltering,
   useInfiniteScroll,
   useRowIsMouseOver,
+  useSelectAllWithToggle,
   useSelectRows,
   useSortableColumns,
-  useDisableSelectRows,
-  useSelectAllWithToggle,
   useStickyColumn,
-  useActionsColumn,
 } from '.';
 
-import { SelectAllWitHToggle, LeftPanelStory } from './Datagrid.stories';
 import mdx from './Datagrid.mdx';
+import { LeftPanelStory, SelectAllWitHToggle } from './Datagrid.stories';
 
 import { pkg } from '../../settings';
 
-import styles from './_storybook-styles.scss';
 import { DatagridActions } from './utils/DatagridActions';
 import { DatagridPagination } from './utils/DatagridPagination';
 import { Wrapper } from './utils/Wrapper';
+import styles from './_storybook-styles.scss';
 
 export default {
   title: getStoryTitle(Datagrid.displayName),
@@ -74,6 +77,15 @@ const defaultHeader = [
     accessor: 'visits',
     width: 60,
   },
+  {
+    Header: 'Status',
+    accessor: 'status',
+  },
+  {
+    Header: 'Joined',
+    accessor: 'joined',
+    Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,
+  },
   {
     Header: 'Someone 1',
     accessor: 'someone1',
@@ -102,18 +114,6 @@ const defaultHeader = [
     Header: 'Someone 7',
     accessor: 'someone7',
   },
-  {
-    Header: 'Someone 8',
-    accessor: 'someone8',
-  },
-  {
-    Header: 'Someone 9',
-    accessor: 'someone9',
-  },
-  {
-    Header: 'Someone 10',
-    accessor: 'someone10',
-  },
 ];
 
 const { TableBatchAction, TableBatchActions } = DataTable;
@@ -312,6 +312,217 @@ export const SelectableRow = () => {
   return <Datagrid datagridState={{ ...datagridState }} />;
 };
 
+export const Filtering = () => {
+  const headers = [
+    {
+      Header: 'Row Index',
+      accessor: (row, i) => i,
+      sticky: 'left',
+      id: 'rowIndex', // id is required when accessor is a function.
+    },
+    {
+      Header: 'First Name',
+      accessor: 'firstName',
+    },
+    {
+      Header: 'Last Name',
+      accessor: 'lastName',
+    },
+    {
+      Header: 'Age',
+      accessor: 'age',
+      width: 50,
+    },
+    {
+      Header: 'Visits',
+      accessor: 'visits',
+      filter: 'number',
+      width: 60,
+    },
+    {
+      Header: 'Status',
+      accessor: 'status',
+    },
+    // Shows the date filter example
+    {
+      Header: 'Joined',
+      accessor: 'joined',
+      filter: 'date',
+      Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,
+    },
+    // Shows the checkbox filter example
+    {
+      Header: 'Password strength',
+      accessor: 'passwordStrength',
+      filter: 'checkbox',
+      Cell: ({ cell: { value } }) => {
+        const iconProps = {
+          size: 'sm',
+          theme: 'light',
+          kind: value,
+          iconDescription: value,
+        };
+
+        return (
+          <span
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <StatusIcon {...iconProps} />
+            {iconProps.iconDescription}
+          </span>
+        );
+      },
+    },
+    // Shows the checkbox filter example
+    {
+      Header: 'Role',
+      accessor: 'role',
+    },
+  ];
+
+  const columns = React.useMemo(() => headers, []);
+  const [data] = useState(makeData(20));
+
+  const filters = [
+    {
+      type: 'date',
+      column: 'joined',
+      props: {
+        DatePicker: {
+          datePickerType: 'range',
+        },
+        DatePickerInput: {
+          start: {
+            id: 'date-picker-input-id-start',
+            placeholder: 'mm/dd/yyyy',
+            labelText: 'Joined start date',
+          },
+          end: {
+            id: 'date-picker-input-id-end',
+            placeholder: 'mm/dd/yyyy',
+            labelText: 'Joined end date',
+          },
+        },
+      },
+    },
+    {
+      type: 'number',
+      column: 'visits',
+      props: {
+        NumberInput: {
+          min: 0,
+          id: 'visits-number-input',
+          invalidText: 'A valid value is required',
+          label: 'Visits',
+          placeholder: 'Type a number amount of visits',
+        },
+      },
+    },
+    {
+      type: 'checkbox',
+      column: 'passwordStrength',
+      props: {
+        FormGroup: {
+          legendText: 'Password strength',
+        },
+        Checkbox: [
+          {
+            id: 'normal',
+            labelText: 'Normal',
+            value: 'normal',
+          },
+          {
+            id: 'minor-warning',
+            labelText: 'Minor warning',
+            value: 'minor-warning',
+          },
+          {
+            id: 'critical',
+            labelText: 'Critical',
+            value: 'critical',
+          },
+        ],
+      },
+    },
+    {
+      type: 'radio',
+      column: 'role',
+      props: {
+        FormGroup: {
+          legendText: 'Role',
+        },
+        RadioButtonGroup: {
+          orientation: 'vertical',
+          legend: 'Role legend',
+          name: 'role-radio-button-group',
+        },
+        RadioButton: [
+          {
+            id: 'developer',
+            labelText: 'Developer',
+            value: 'developer',
+          },
+          {
+            id: 'designer',
+            labelText: 'Designer',
+            value: 'designer',
+          },
+          {
+            id: 'researcher',
+            labelText: 'Researcher',
+            value: 'researcher',
+          },
+        ],
+      },
+    },
+    {
+      type: 'dropdown',
+      column: 'status',
+      props: {
+        Dropdown: {
+          id: 'marital-status-dropdown',
+          ariaLabel: 'Marital status dropdown',
+          items: ['relationship', 'complicated', 'single'],
+          label: 'Marital status',
+          titleText: 'Marital status',
+        },
+      },
+    },
+  ];
+
+  const datagridState = useDatagrid(
+    {
+      columns,
+      data,
+      emptyStateTitle: 'No filters match',
+      emptyStateDescription:
+        'Data was not found with the current filters applied. Change filters or clear filters to see other results.',
+      filterProps: {
+        variation: 'flyout',
+        updateMethod: 'batch',
+        primaryActionLabel: 'Apply',
+        secondaryActionLabel: 'Cancel',
+        flyoutIconDescription: 'Open filters',
+        shouldClickOutsideToClose: false,
+        onFlyoutOpen: action('onFlyoutOpen'),
+        onFlyoutClose: action('onFlyoutClose'),
+        filters,
+      },
+      DatagridActions,
+      batchActions: true,
+      toolbarBatchActions: getBatchActions(),
+    },
+    useSelectRows,
+    useFiltering
+  );
+
+  return <Datagrid datagridState={{ ...datagridState }} />;
+};
+
 export const RadioSelect = () => {
   const columns = React.useMemo(() => defaultHeader, []);
   const [data] = useState(makeData(10));