-
Notifications
You must be signed in to change notification settings - Fork 98
feat(dropdowns): add navigation link support to Menu's Item
component
#2016
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
Conversation
… george/menu-links # Conflicts: # packages/dropdowns/src/elements/menu/Item.tsx # packages/dropdowns/src/views/combobox/StyledOption.ts # packages/dropdowns/src/views/menu/StyledItem.ts # packages/dropdowns/src/views/menu/StyledItemContent.ts # packages/dropdowns/src/views/menu/StyledItemIcon.ts
isSelected, | ||
icon, | ||
isDisabled, | ||
isExternal = true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In keeping with the majority of Garden API, this should not default to true
. Let's let devs be specific about this.
@@ -286,10 +286,14 @@ export interface IItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'value | |||
icon?: ReactElement; | |||
/** Indicates that the item is not interactive */ | |||
isDisabled?: boolean; | |||
/** If the item is an anchor, opens the link externally */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
/** If the item is an anchor, opens the link externally */ | |
/** Opens the `href` externally */ |
Follow documentation grammar guidelines.
as: 'a' | ||
})` | ||
direction: ${props => props.theme.rtl && 'rtl'}; | ||
color: ${({ theme }) => getColor({ theme, variable: 'foreground.primary' })}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
At this point, there should be no visual differentiation between <Item>
and <Item href>
. So the styling here should be about resetting any potential <a>
styling (color, underline, etc).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for clarifying. I followed the design from George's branch but I'll update.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have we thought through what it means for these new <Item href>
to be a part of a <ItemGroup type="radio">
? What are the implications for existing uncontrolled behaviors?
Closing in favor of #2021. |
Description
This PR enhances the Menu's
Item
component by adding support for navigational links.Details
Menu
Item
:href
: When provided, the menu item is rendered as an anchor.isExternal
: Whentrue
, adds appropriate attributes (target="_blank"
andrel="noopener noreferrer"
) to external links.Checklist
npm start
)?bedrock
)