diff --git a/UNRELEASED.md b/UNRELEASED.md
index 75888cf5df0..7a894b3042f 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,6 +8,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
- Moved icons to a separate npm package ([#686](https://github.com/Shopify/polaris-react/pull/686))
- Added `oneHalf` and `oneThird` props to `Layout` component ([#724](https://github.com/Shopify/polaris-react/pull/724))
+- Added `helpText` prop to ActionList items ([#777](https://github.com/Shopify/polaris-react/pull/777))
### Bug fixes
diff --git a/src/components/ActionList/README.md b/src/components/ActionList/README.md
index 90920b060fc..43382545850 100644
--- a/src/components/ActionList/README.md
+++ b/src/components/ActionList/README.md
@@ -269,6 +269,57 @@ class ActionListExample extends React.Component {
}
```
+### Action list with help text
+
+Use help text when the normal Verb noun syntax for the actions does not provide sufficient context for the merchant.
+
+```jsx
+class ActionListExample extends React.Component {
+ state = {
+ active: true,
+ };
+
+ togglePopover = () => {
+ this.setState(({active}) => {
+ return {active: !active};
+ });
+ };
+
+ render() {
+ const activator = (
+
+ );
+
+ return (
+
+ );
+ }
+}
+```
+
---
## Related components
diff --git a/src/components/ActionList/components/Item/Item.tsx b/src/components/ActionList/components/Item/Item.tsx
index 16740195916..93317bc986e 100644
--- a/src/components/ActionList/components/Item/Item.tsx
+++ b/src/components/ActionList/components/Item/Item.tsx
@@ -6,6 +6,7 @@ import Scrollable from '../../../Scrollable';
import Icon from '../../../Icon';
import UnstyledLink from '../../../UnstyledLink';
import Badge from '../../../Badge';
+import TextStyle from '../../../TextStyle';
import * as styles from '../../ActionList.scss';
@@ -15,6 +16,7 @@ export default function Item({
id,
badge,
content,
+ helpText,
url,
onAction,
icon,
@@ -51,7 +53,16 @@ export default function Item({
);
}
- const contentMarkup = ellipsis && content ? `${content}…` : content;
+ const contentText = ellipsis && content ? `${content}…` : content;
+
+ const contentMarkup = helpText ? (
+
+
{contentText}
+
{helpText}
+
+ ) : (
+ contentText
+ );
const badgeMarkup = badge && (
diff --git a/src/components/ActionList/components/Item/tests/Item.test.tsx b/src/components/ActionList/components/Item/tests/Item.test.tsx
index ee331c6f097..843cf598786 100644
--- a/src/components/ActionList/components/Item/tests/Item.test.tsx
+++ b/src/components/ActionList/components/Item/tests/Item.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import {mountWithAppProvider} from 'test-utilities';
import {UnstyledLink} from 'components';
import Item from '../Item';
+import TextStyle from '../../../../TextStyle';
describe(' ', () => {
it('adds a style property when the image prop is present', () => {
@@ -36,4 +37,9 @@ describe(' ', () => {
const item = mountWithAppProvider( );
expect(item.text()).toBe('');
});
+
+ it('renders helpText when the helpText prop is defined', () => {
+ const item = mountWithAppProvider( );
+ expect(item.find(TextStyle).text()).toBe('Foo');
+ });
});
diff --git a/src/components/ActionList/components/Section/Section.tsx b/src/components/ActionList/components/Section/Section.tsx
index f0e0e583354..754cc9e9ae4 100644
--- a/src/components/ActionList/components/Section/Section.tsx
+++ b/src/components/ActionList/components/Section/Section.tsx
@@ -32,11 +32,12 @@ export default function Section({
};
};
const actionMarkup = section.items.map(
- ({content, onAction, ...item}, index) => {
+ ({content, helpText, onAction, ...item}, index) => {
return (
', () => {
).toBe('Import file');
});
+ it('passes helpText to Item', () => {
+ const section = mountWithAppProvider(
+ ,
+ );
+
+ expect(
+ section
+ .find(Item)
+ .first()
+ .prop('helpText'),
+ ).toBe('Foo');
+ });
+
it('passes the onActionAnyItem callback to Item', () => {
const spy = jest.fn();
const section = mountWithAppProvider(
diff --git a/src/types.ts b/src/types.ts
index 562bf931293..01555928621 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -106,6 +106,8 @@ export interface ActionListItemDescriptor
BadgeAction,
DestructableAction,
AppBridgeAction {
+ /** Additional hint text to display with item */
+ helpText?: string;
/** Image source */
image?: string;
/** Add an ellipsis suffix to action content */