v2 add NavAnchor and NavButton

A common need for a UI app is a component that handles navigational links, where there is some built-in logic to handle the active route. A counterpart in react router is NavLink.

It seems to me that Grommet should have two extra components: NavAnchor and NavButton. These components will add some logic for detecting if the route is active, and add styling to it. this style would live in the theme object, something like:

const myCustomTheme = {
  navAnchor: {
    active: css`
      text-decoration: underline;
    `
  },
};

Thoughts?

[ericsoderberghp]

Why not extend RoutedAnchor and RoutedButton?

[ericsoderberghp]

I think we should not get tied to routing libraries, which would be required to “add some logic for detecting if the route is active”. Instead, I think we should ensure that we support active on Button and Anchor, along with theme-ability of that. We could provide starters/patterns/templates showing how to integrate with various routing libraries, such as react-router, nextjs, etc. For example, see RoutedButton.js in https://codesandbox.io/s/216vvpmlqj.