Skip to content

[UnderlineNav2]: Add string type to the counter prop and display loading counter for all #2449

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.

Sign up for GitHub

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

Merged
merged 5 commits into from
Oct 21, 2022
Merged

[UnderlineNav2]: Add string type to the counter prop and display loading counter for all #2449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3fcb5db
string type for counters and fix loading issue
broccolinisoup Oct 18, 2022
dbcccf4
add changeset
broccolinisoup Oct 18, 2022
cc99b2f
improve docs
broccolinisoup Oct 18, 2022
fe327f5
update animation details
broccolinisoup Oct 21, 2022
6835a22
Inverte the pulse effect
broccolinisoup Oct 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tough-peas-sort.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

UnderlineNav2: Add string type to the `counter` prop and display loading counter for all
2 changes: 1 addition & 1 deletion docs/content/drafts/UnderlineNav2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ const Navigation = () => {
name="loadingCounters"
type="boolean"
defaultValue="false"
description="Whether all of the counters are in loading state"
description="Whether the navigation items are in loading state. Component waits for all the counters to finish loading to prevent multiple layout shifts."
/>
<PropsTableRow
name="afterSelect"
Expand Down
8 changes: 4 additions & 4 deletions src/UnderlineNav2/LoadingCounter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import styled, {keyframes} from 'styled-components'
import {get} from '../constants'

const loading = keyframes`
from { opacity: 0.4; }
to { opacity: 0.8; }
from { opacity: 1; }
to { opacity: 0.2; }
`

export const LoadingCounter = styled.span`
animation: ${loading} 1.2s linear infinite alternate;
background-color: ${get('colors.neutral.emphasis')};
animation: ${loading} 1.2s ease-in-out infinite alternate;
background-color: ${get('colors.neutral.muted')};
border-color: ${get('colors.border.default')};
width: 1.5rem;
height: 1rem; // 16px
Expand Down
4 changes: 3 additions & 1 deletion src/UnderlineNav2/UnderlineNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,9 @@ export const UnderlineNav = forwardRef(
{loadingCounters ? (
<LoadingCounter />
) : (
<CounterLabel>{actionElementProps.counter}</CounterLabel>
actionElementProps.counter !== undefined && (
<CounterLabel>{actionElementProps.counter}</CounterLabel>
)
)}
</Box>
</ActionList.Item>
Expand Down
12 changes: 9 additions & 3 deletions src/UnderlineNav2/UnderlineNavItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export type UnderlineNavItemProps = {
/**
* Counter
*/
counter?: number
counter?: number | string
} & SxProp &
LinkProps

Expand Down Expand Up @@ -172,10 +172,16 @@ export const UnderlineNavItem = forwardRef(
{children}
</Box>
)}
{counter && (
{loadingCounters ? (
<Box as="span" data-component="counter" sx={counterStyles}>
Copy link
Member Author

@broccolinisoup broccolinisoup Oct 18, 2022

Choose a reason for hiding this comment

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

Just wanted to point out that I am not super happy with this duplication of the the wrapper Box component but otherwise it wasn't easily readable so that was my trade off but open to suggestions (as always) 💖

{loadingCounters ? <LoadingCounter /> : <CounterLabel>{counter}</CounterLabel>}
<LoadingCounter />
</Box>
) : (
counter !== undefined && (
<Box as="span" data-component="counter" sx={counterStyles}>
<CounterLabel>{counter}</CounterLabel>
</Box>
)
)}
</Box>
</Box>
Expand Down
6 changes: 3 additions & 3 deletions src/UnderlineNav2/examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,14 @@ export const withCounterLabels = () => {
)
}

const items: {navigation: string; icon: React.FC<IconProps>; counter?: number}[] = [
const items: {navigation: string; icon: React.FC<IconProps>; counter?: number | string}[] = [
{navigation: 'Code', icon: CodeIcon},
{navigation: 'Issues', icon: IssueOpenedIcon, counter: 120},
{navigation: 'Issues', icon: IssueOpenedIcon, counter: '12K'},
{navigation: 'Pull Requests', icon: GitPullRequestIcon, counter: 13},
{navigation: 'Discussions', icon: CommentDiscussionIcon, counter: 5},
{navigation: 'Actions', icon: PlayIcon, counter: 4},
{navigation: 'Projects', icon: ProjectIcon, counter: 9},
{navigation: 'Insights', icon: GraphIcon},
{navigation: 'Insights', icon: GraphIcon, counter: '0'},
{navigation: 'Settings', icon: GearIcon, counter: 10},
{navigation: 'Security', icon: ShieldLockIcon}
]
Expand Down