Update implementation

Shopify · Aug 9, 2023 · 687a9b3 · 687a9b3
1 parent 52ffd09
commit 687a9b3
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 51 deletions.
diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx
@@ -587,6 +587,24 @@ export function DetailsPage() {
               content: 'Toggle page actions',
               onAction: toggleActions,
             },
+            {
+              content: 'Embed on a website',
+
+              onAction: () => console.log('embed'),
+            },
+            {
+              content: 'Toggle page actions',
+              onAction: toggleActions,
+            },
+            {
+              content: 'Embed on a website',
+
+              onAction: () => console.log('embed'),
+            },
+            {
+              content: 'Toggle page actions',
+              onAction: toggleActions,
+            },
           ],
         },
       ]}

diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx
@@ -1,16 +1,17 @@
-import React, {useRef} from 'react';
+import React, {useMemo, useRef, useState} from 'react';
 
+import type {ActionListItemDescriptor, ActionListSection} from '../../types';
+import {Key} from '../../types';
 import {
   wrapFocusNextFocusableMenuItem,
   wrapFocusPreviousFocusableMenuItem,
 } from '../../utilities/focus';
-import {KeypressListener} from '../KeypressListener';
-import {Key} from '../../types';
-import type {ActionListItemDescriptor, ActionListSection} from '../../types';
 import {Box} from '../Box';
+import {KeypressListener} from '../KeypressListener';
+import {TextField} from '../TextField';
 
-import {Section, Item} from './components';
 import type {ItemProps} from './components';
+import {Item, Section} from './components';
 
 export interface ActionListProps {
   /** Collection of actions for list */
@@ -33,6 +34,7 @@ export function ActionList({
 }: ActionListProps) {
   let finalSections: readonly ActionListSection[] = [];
   const actionListRef = useRef<HTMLDivElement & HTMLUListElement>(null);
+  const [searchText, setSeachText] = useState('');
 
   if (items) {
     finalSections = [{items}, ...sections];
@@ -46,7 +48,14 @@ export function ActionList({
   const elementTabIndex =
     hasMultipleSections && actionRole === 'menuitem' ? -1 : undefined;
 
-  const sectionMarkup = finalSections.map((section, index) => {
+  const filteredSections = finalSections?.map((section) => ({
+    ...section,
+    items: section.items.filter((item) =>
+      item.content?.toLowerCase().includes(searchText.toLowerCase()),
+    ),
+  }));
+
+  const sectionMarkup = filteredSections.map((section, index) => {
     return section.items.length > 0 ? (
       <Section
         key={typeof section.title === 'string' ? section.title : index}
@@ -99,6 +108,24 @@ export function ActionList({
       </>
     ) : null;
 
+  const totalActions =
+    finalSections?.reduce(
+      (acc: number, section) => acc + section.items.length,
+      0,
+    ) || 0;
+
+  const totalFilteredActions = useMemo(() => {
+    const totalSectionItems =
+      filteredSections?.reduce(
+        (acc: number, section) => acc + section.items.length,
+        0,
+      ) || 0;
+
+    return totalSectionItems;
+  }, [filteredSections]);
+
+  const showSearch = totalActions >= 10;
+
   return (
     <Box
       as={hasMultipleSections ? 'ul' : 'div'}
@@ -107,6 +134,19 @@ export function ActionList({
       tabIndex={elementTabIndex}
     >
       {listeners}
+
+      {showSearch && (
+        <Box padding="2" paddingBlockEnd={totalFilteredActions > 0 ? '0' : '2'}>
+          <TextField
+            label="Search Actions"
+            autoComplete=""
+            labelHidden
+            placeholder="Search Actions"
+            value={searchText}
+            onChange={(value) => setSeachText(value)}
+          />
+        </Box>
+      )}
       {sectionMarkup}
     </Box>
   );

diff --git a/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx b/polaris-react/src/components/ActionMenu/components/MenuGroup/MenuGroup.tsx
@@ -1,10 +1,9 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 
 import type {ActionListSection, MenuGroupDescriptor} from '../../../../types';
 import {ActionList} from '../../../ActionList';
 import {Popover} from '../../../Popover';
 import {SecondaryAction} from '../SecondaryAction';
-import {TextField} from '../../../TextField';
 
 import styles from './MenuGroup.scss';
 
@@ -39,7 +38,6 @@ export function MenuGroup({
   getOffsetWidth,
   sections,
 }: MenuGroupProps) {
-  const [searchText, setSeachText] = useState('');
   const handleClose = useCallback(() => {
     onClose(title);
   }, [onClose, title]);
@@ -77,16 +75,6 @@ export function MenuGroup({
     </SecondaryAction>
   );
 
-  const filteredActions = actions.filter((action) =>
-    action.content?.toLowerCase().includes(searchText.toLowerCase()),
-  );
-
-  const filteredSections = sections?.filter((section) =>
-    section.items.some((item) =>
-      item.content?.toLowerCase().includes(searchText.toLowerCase()),
-    ),
-  );
-
   return (
     <Popover
       active={Boolean(active)}
@@ -95,16 +83,9 @@ export function MenuGroup({
       onClose={handleClose}
       hideOnPrint
     >
-      <TextField
-        label="Search"
-        labelHidden
-        autoComplete=""
-        value={searchText}
-        onChange={(value) => setSeachText(value)}
-      />
       <ActionList
-        items={filteredActions}
-        sections={filteredSections}
+        items={actions}
+        sections={sections}
         onActionAnyItem={handleClose}
       />
       {details && <div className={styles.Details}>{details}</div>}

diff --git a/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx b/polaris-react/src/components/ActionMenu/components/RollupActions/RollupActions.tsx
@@ -1,16 +1,15 @@
-import React, {useState} from 'react';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
+import React from 'react';
 
 import type {
-  ActionListSection,
   ActionListItemDescriptor,
+  ActionListSection,
 } from '../../../../types';
 import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
 import {ActionList} from '../../../ActionList';
 import {Button} from '../../../Button';
 import {Popover} from '../../../Popover';
-import {TextField} from '../../../TextField';
 
 import styles from './RollupActions.scss';
 
@@ -29,7 +28,6 @@ export function RollupActions({
   sections = [],
 }: RollupActionsProps) {
   const i18n = useI18n();
-  const [searchText, setSeachText] = useState('');
 
   const {value: rollupOpen, toggle: toggleRollupOpen} = useToggle(false);
 
@@ -51,16 +49,6 @@ export function RollupActions({
     </div>
   );
 
-  const filteredItems = items.filter((item) =>
-    item.content?.toLowerCase().includes(searchText.toLowerCase()),
-  );
-
-  const filteredSections = sections?.filter((section) =>
-    section.items.some((item) =>
-      item.content?.toLowerCase().includes(searchText.toLowerCase()),
-    ),
-  );
-
   return (
     <Popover
       active={rollupOpen}
@@ -69,16 +57,9 @@ export function RollupActions({
       onClose={toggleRollupOpen}
       hideOnPrint
     >
-      <TextField
-        label="Search"
-        labelHidden
-        autoComplete=""
-        value={searchText}
-        onChange={(value) => setSeachText(value)}
-      />
       <ActionList
-        items={filteredItems}
-        sections={filteredSections}
+        items={items}
+        sections={sections}
         onActionAnyItem={toggleRollupOpen}
       />
     </Popover>

diff --git a/polaris-react/src/components/IndexTable/IndexTable.stories.tsx b/polaris-react/src/components/IndexTable/IndexTable.stories.tsx
@@ -804,6 +804,30 @@ export function WithBulkActions() {
       content: 'Delete customers',
       onAction: () => console.log('Todo: implement bulk delete'),
     },
+    {
+      content: 'Add tags',
+      onAction: () => console.log('Todo: implement bulk add tags'),
+    },
+    {
+      content: 'Remove tags',
+      onAction: () => console.log('Todo: implement bulk remove tags'),
+    },
+    {
+      content: 'Delete customers',
+      onAction: () => console.log('Todo: implement bulk delete'),
+    },
+    {
+      content: 'Add tags',
+      onAction: () => console.log('Todo: implement bulk add tags'),
+    },
+    {
+      content: 'Remove tags',
+      onAction: () => console.log('Todo: implement bulk remove tags'),
+    },
+    {
+      content: 'Delete customers',
+      onAction: () => console.log('Todo: implement bulk delete'),
+    },
   ];
 
   const rowMarkup = customers.map(