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 */