azkanurf-ss
commented
2 weeks ago Hi @adrian-reapit and @kurtdoherty, I've been thinking about splitting this ticket into at least 3 PRs:
- Nav Icon Item
- Bottom Bar Item
- NavIconMenuButton; but for this, I'm going to wait until this ticket is ready to use.
Here’s my understanding of the Nav Icon Item and Bottom Bar Item component based on the design, along with my proposed code.
Design Nav Icon Item
Design Bottom Bar Item
Context:
- On the App Bar component we'll need a Nav Icon Item as part of an item for the Top Bar.
- On the App Bar component we'll need a Bottom Bar Item as part of an item for the Bottom Bar.
Requirements for both
- Can show various icons
- Button state: default, hover, focus, and selected/active
- Support rendering out as both
<a>elements and<button>elements
Requirements for Nav Icon Item
- Badge
- Show a tooltip when the button is in a hover state
Requirements for Bottom Bar Item
- Button label
Non-requirements
- Icon's size
- Icon's color
Propose
By Looking at Button component in Figma. I see some differences:
- Icon's color
- Hover style
Additionally, there are a few features that Button component doesn't have:
- Label on the bottom of the icon
- Badge
- Tooltip
- Selected/active state
Because of this, I’m thinking of building the Nav Icon Item and Bottom Bar Icon from scratch and I'll put them under AppBar folder Below is the code snippet I propose:
Code Nav Icon Item
const NavIconItem = ({ icon, isActive = false, badge, tooltip, onClick, href, ...rest }) => {
return (
<NavItemContainer data-active={isActive} title={tooltip} onClick={onClick} href={href} {...rest}>
<IconContainer>
{isValidElement(icon) ? <>{icon}</> : <Icon icon={icon} />}
{{isValidElement(badge) && <>{badge}</>}
</IconContainer>
</NavItemContainer>
)
}
React usage Nav Icon Item
<NavIconItem icon="notification" badge={<RedDotBadge/>} tooltip='notification' isActive={true}/>
Code Bottom Bar Item
const BottomBarItem = ({ icon, isActive = false, children, onClick, href, ...rest }) => {
return (
<NavItemContainer data-active={isActive} onClick={onClick} href={href} {...rest}>
{isValidElement(icon) ? <>{icon}</> : <Icon icon={icon} />}
{children}
</NavItemContainer>
)
}
React usage Bottom Bar Item
<BottomBarItem icon="notification" isActive={true}> {label} </BottomBarItem>
kurtdoherty
ss-dimasm
Abstract
To support the AppBar improvements the NavIconButton and NavIconMenuButton components should be made which can be used in secondary and footer navigation
NavIconButton is a button with a centred icon and optional centred text below. It can be a private component used by AppBar
NavIconMenuButton is an extended version of NavIconButton which shows the menu above or below
Specification
Developer Checklist
Release Checklist
Additional Context or Information