Polaris-react: Potentially provide onAction prop anywhere url prop currently exists

[mbaumbach]

Issue summary

This is a feature request.

There are a few components, such as breadcrumbs in the Page component and the ResourceList.Item component, where you can provide a url prop. This works fine, but it would be handy for React apps using something like React Router to be able to perform an action that internally navigates instead of taking you to a new page.

Expected behavior

Any time the page needs to navigate away, when it could use something like React Router, you may lose on the performance benefits the rest of the app is using by requiring the entire page to reload and the app to be re-initialized.

The proposal would be to optionally allow an onAction prop similar to other "Action" based props through Polaris that will allow us to using something like React Router's push state, or some other routing mechanism. A migration path to supporting this might be to default to using url if both are provided and only use onAction if the url prop is _undefined_ or _null_.

Specifications

• Polaris version: 1.5.2
• React version: 15.6.1
• Browser: Chrome 61
• Device: MacBook Pro 2016
• Operating System: Mac OS X Sierra 10.12.6

[lemonmade]

For most components that render links, this is possible to do using the undocumented (but intended to be public) useLinkComponent. See my comment here for details: https://github.com/Shopify/polaris/issues/78#issuecomment-305494561. The exception is an embedded app trying to use custom handlers for breadcrumbs in the Page component. I think that is mostly captured in this issue, which we are working on: https://github.com/Shopify/polaris/issues/116.

Please reopen if I haven't addressed your use cases.

[mbaumbach]

For any others that come through, this is what I needed to do to get useLinkComponent to work in my app with React Router 4:

import { useLinkComponent } from '@shopify/polaris';
useLinkComponent(({url, children, ...props}) => <Link to={url} {...props}>{children}</Link>);

@lemonmade Thanks for the info and let me know if you see anything weird about that implementation.

[lemonmade]

@mbaumbach yes, that's how I'd expect it to work 👍

[celsowhite]

@mbaumbach thanks! Your snippet worked but I was getting a warning when I implemented it.

warning.js:35 Warning: Unknown prop 'external' on <a> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

I'm using React Router v4.1.2. To fix the warning I used the following snippet.

import {useLinkComponent} from '@shopify/polaris';
import { Link } from 'react-router-dom';

useLinkComponent(({ url, children, ...props }) => {

  const divProps = Object.assign({}, {...props});

  delete divProps.external;

  return (
    <Link to={url} {...divProps}>{children}</Link>
  )

});

Were you getting the same warning before? Any reason to not remove the 'external' prop?

[mbaumbach]

@celsowhite I'm not getting that warning, but I'm also on React Router 4.2.2 (as well as Polaris 1.7.0), so perhaps it has been fixed since 4.1.2 or in a newer version of Polaris.