[ActionList] Add filterLabel prop to allow for custom placeholder (#1…

…1907)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Resolves Shopify/admin-comms#844

<!--
  Context about the problem that’s being addressed.
-->

The `ActionList` currently doesn't allow for a custom placeholder and
sometimes the default string doesn't accurately reflect the actions.

Before:
<img
src="https://github.com/Shopify/workflows-merchant-guidance/assets/50415277/3f1d5ffe-7e0c-4a63-bc36-b509221fc937"
width="300px" />


After:
<img
src="https://github.com/Shopify/workflows-merchant-guidance/assets/50415277/7d1722c6-6f4b-41b8-8c0d-5c1c7e53bb5d"
width="300px" />

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

  Include a video if your changes include interactive content.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

  <details>
    <summary>Summary of your gif(s)</summary>
    <img src="..." alt="Description of what the gif shows">
  </details>
-->

Adds an optional `filterLabel` prop that, when provided, replaces the
default `Search actions` placeholder.

### How to 🎩

Code sandbox:
https://codesandbox.io/p/sandbox/exciting-mendel-t9qdl3?file=%2FApp.tsx
- the placeholder says `Search items` instead of the default `Search
actions`

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/nine-glasses-serve.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added an optional `fiterLabel` prop to `ActionList` to allow for a custom placeholder

polaris-react/src/components/ActionList/ActionList.stories.tsx

@@ -426,6 +426,7 @@ export const WithFiltering = {
           items={Array.from({length: 8}).map((_, index) => ({
             content: `Item #${index + 1}`,
           }))}
+          filterLabel="Search items"
         />
       </div>
     );

polaris-react/src/components/ActionList/ActionList.tsx

@@ -26,6 +26,8 @@ export interface ActionListProps {
   actionRole?: 'menuitem' | string;
   /** Allow users to filter items in the list. Will only show if more than 8 items in the list. The item content of every items must be a string for this to work */
   allowFiltering?: boolean;
+  /** Filter label used as a placeholder in the search field */
+  filterLabel?: string;
   /** Callback when any item is clicked or keypressed */
   onActionAnyItem?: ActionListItemDescriptor['onAction'];
 }
@@ -40,6 +42,7 @@ export function ActionList({
   actionRole,
   allowFiltering,
   onActionAnyItem,
+  filterLabel,
 }: ActionListProps) {
   const i18n = useI18n();
   const filterActions = useContext(FilterActionsContext);
@@ -153,10 +156,16 @@ export function ActionList({
           <TextField
             clearButton
             labelHidden
-            label={i18n.translate('Polaris.ActionList.SearchField.placeholder')}
-            placeholder={i18n.translate(
-              'Polaris.ActionList.SearchField.placeholder',
-            )}
+            label={
+              filterLabel
+                ? filterLabel
+                : i18n.translate('Polaris.ActionList.SearchField.placeholder')
+            }
+            placeholder={
+              filterLabel
+                ? filterLabel
+                : i18n.translate('Polaris.ActionList.SearchField.placeholder')
+            }
             autoComplete="off"
             value={searchText}
             onChange={(value) => setSearchText(value)}