Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restrict Dropdown #212

Merged
merged 17 commits into from
Oct 17, 2019
Merged

Restrict Dropdown #212

merged 17 commits into from
Oct 17, 2019

Conversation

jorgemoya
Copy link
Contributor

@jorgemoya jorgemoya commented Oct 15, 2019

Added new options prop that will restrict the usage of the items. The onClick for each item with return the item itself. No need to use data-value anymore.

Now also accepts icons as a DropdownItem prop.

Screen Shot 2019-10-15 at 8 44 11 PM

Wasn't sure how to document the new DropdownItem and DropdownLinkItem. Feedback pls 🙏 .

docs2

@jorgemoya jorgemoya requested a review from a team October 15, 2019 15:06
@deini
Copy link
Member

deini commented Oct 16, 2019

Should all the options use a pointer cursor? 🤔

@jorgemoya
Copy link
Contributor Author

Should all the options use a pointer cursor? 🤔

Let me consult with design.

});
private renderIcon(icon: React.ReactNode, isHighlighted: boolean, option: DropdownItem | DropdownLinkItem) {
return (
React.isValidElement(icon) &&
Copy link
Member

Choose a reason for hiding this comment

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

Can we add a check to make sure the type is icon?

id={id}
key={index}
onClick={() => this.handleOnItemClick(option)}
onFocus={this.handleOnItemFocus}
Copy link
Member

Choose a reason for hiding this comment

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

Should onFocus and onMouseOver call the same fn?


interface BaseItem extends Omit<ListItemProps, 'children' | 'content' | 'onClick' | 'value'> {
Copy link
Member

Choose a reason for hiding this comment

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

Can you move the BaseItem definition before DropdowItem and DropdownLinkItem 🙏

<Dropdown.Item value={2}>Option</Dropdown.Item>
<Dropdown.Item value={3}>Option</Dropdown.Item>
</Dropdown>
<Dropdown
Copy link
Member

Choose a reason for hiding this comment

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

🍹

<Dropdown
  options={[
    { content: 'Option', type: 'string', value: '0' },
    { content: 'Option', type: 'string', value: '1', onClick },
    { content: 'Option', type: 'string', value: '2', actionType: 'destructive' },
    { content: 'Option', type: 'string', value: '3', icon: <CheckCircleIcon /> },
  ]}
  trigger={<Button>Button</Button>}
/>

{ content: 'Option', url: '#', type: 'link' },
]}
trigger={<Button>Button</Button>}
></Dropdown>,
Copy link
Member

Choose a reason for hiding this comment

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

Same as above.

>
{option.type === 'link' && !option.disabled ? (
<Link href={option.url} target={option.target}>
<Flex alignItems="center">
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
<Flex alignItems="center">
<Flex alignItems="center" flexDirection="row">

</Flex>
</Link>
) : (
<Flex alignItems="center">
Copy link
Contributor

Choose a reason for hiding this comment

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

Same as above

@jorgemoya jorgemoya merged commit 8608609 into bigcommerce:master Oct 17, 2019
@jorgemoya jorgemoya deleted the restrict-dropdown branch October 17, 2019 17:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants