Skip to content

Conversation

@emplums
Copy link

@emplums emplums commented Apr 28, 2020

This PR allows the SelectMenu.Item component to have access to the as prop so that users can make it a button if needed. @dmarcey made a good point that sometimes you might want a button instead of an anchor tag as a select menu item, since not all actions taken in a select menu have an href. More info on links vs buttons in SPAs here

I considered rewriting the type definition to only allow a button or a tag, but I figured there might be some cases where someone might need to pass in a styled component to the as tag (even though generally we recommend against this).

Screenshots

Please provide before/after screenshots for any visual changes

Merge checklist

  • Added or updated TypeScript definitions (index.d.ts) if necessary
  • Added/updated tests
  • Added/updated documentation
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@vercel
Copy link

vercel bot commented Apr 28, 2020

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/lwuvl5dnp
✅ Preview: https://primer-components-git-selectmenuitem.primer.now.sh

@emplums emplums requested a review from dmarcey April 28, 2020 20:35
@vercel vercel bot temporarily deployed to Preview April 28, 2020 20:37 Inactive
@emplums emplums added the minor release new features label Apr 28, 2020
@emplums emplums requested a review from BinaryMuse April 29, 2020 22:13
Copy link
Contributor

@dmarcey dmarcey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I played around with it a little on the doc site and it looks good!
Thanks for the quick turn-around.

index.d.ts Outdated
Comment on lines 305 to 306

export interface SelectMenuItemProps extends Omit<CommonProps, 'as'>,
export interface SelectMenuItemProps extends CommonProps,
Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if this needs to take into account that this could be an <HTMLButtonElement> too? The as prop is a little weird with TS to begin with so it's probably ok to leave how it is - if we hit issues we can dig deeper - I don't really know what the correct answer would be off the top of my head.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oof yeah good question 🤔

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@smockle this is the definition we're trying to figure out!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opened #794 to explore this. Details in that PR description. I’d like to test the new types before we merge—I’ll follow-up here by EOD today.

Copy link
Member

@smockle smockle May 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The does not allow the "as" prop on SelectMenu.Item test (SelectMenu.js#L77-L85) is failing. The test ought to be updated in light of this PR, right? If I understand correctly, we now want to allow "as" on SelectMenu.Item.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, that's right!

@vercel vercel bot temporarily deployed to Preview May 4, 2020 21:41 Inactive
@vercel vercel bot temporarily deployed to Preview May 5, 2020 21:15 Inactive
@emplums emplums changed the base branch from master to release-19.0.0 May 5, 2020 21:19
@emplums emplums merged commit ef35bdc into release-19.0.0 May 5, 2020
@emplums emplums deleted the SelectMenuItem branch May 5, 2020 21:19
@BinaryMuse BinaryMuse mentioned this pull request May 5, 2020
24 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants