From 3fcb5db55c7b18cfc42240375f503dbcb20d963d Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 18 Oct 2022 16:05:03 +1000 Subject: [PATCH 1/5] string type for counters and fix loading issue --- src/UnderlineNav2/UnderlineNav.tsx | 4 +++- src/UnderlineNav2/UnderlineNavItem.tsx | 12 +++++++++--- src/UnderlineNav2/examples.stories.tsx | 6 +++--- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 279fd7edcdc..5ece6d2a32c 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -299,7 +299,9 @@ export const UnderlineNav = forwardRef( {loadingCounters ? ( ) : ( - {actionElementProps.counter} + actionElementProps.counter !== undefined && ( + {actionElementProps.counter} + ) )} diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx index c248c9d5f96..288a088e04f 100644 --- a/src/UnderlineNav2/UnderlineNavItem.tsx +++ b/src/UnderlineNav2/UnderlineNavItem.tsx @@ -42,7 +42,7 @@ export type UnderlineNavItemProps = { /** * Counter */ - counter?: number + counter?: number | string } & SxProp & LinkProps @@ -172,10 +172,16 @@ export const UnderlineNavItem = forwardRef( {children} )} - {counter && ( + {loadingCounters ? ( - {loadingCounters ? : {counter}} + + ) : ( + counter !== undefined && ( + + {counter} + + ) )} diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx index 04daa680922..8f224053ff7 100644 --- a/src/UnderlineNav2/examples.stories.tsx +++ b/src/UnderlineNav2/examples.stories.tsx @@ -72,14 +72,14 @@ export const withCounterLabels = () => { ) } -const items: {navigation: string; icon: React.FC; counter?: number}[] = [ +const items: {navigation: string; icon: React.FC; 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} ] From dbcccf4281f174025eb89b361d3db071fe7e406d Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 18 Oct 2022 16:48:12 +1000 Subject: [PATCH 2/5] add changeset --- .changeset/tough-peas-sort.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-peas-sort.md diff --git a/.changeset/tough-peas-sort.md b/.changeset/tough-peas-sort.md new file mode 100644 index 00000000000..bf03ca68455 --- /dev/null +++ b/.changeset/tough-peas-sort.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +UnderlineNav2: Add string type to the `counter` prop and display loading counter for all From cc99b2f2ff1f7dc00a804e75a72adae9ee0461a1 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 18 Oct 2022 17:28:54 +1000 Subject: [PATCH 3/5] improve docs --- docs/content/drafts/UnderlineNav2.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index f4db6ec23b1..c5b1f78eb03 100644 --- a/docs/content/drafts/UnderlineNav2.mdx +++ b/docs/content/drafts/UnderlineNav2.mdx @@ -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." /> Date: Fri, 21 Oct 2022 17:52:27 +1000 Subject: [PATCH 4/5] update animation details --- src/UnderlineNav2/LoadingCounter.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/UnderlineNav2/LoadingCounter.tsx b/src/UnderlineNav2/LoadingCounter.tsx index 9d25c2911d6..76bfbaf2777 100644 --- a/src/UnderlineNav2/LoadingCounter.tsx +++ b/src/UnderlineNav2/LoadingCounter.tsx @@ -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: 0.2; } + to { opacity: 1; } ` 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 From 6835a229784cd8fe53c50edc52b9c7d540682338 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arma=C4=9Fan?= Date: Fri, 21 Oct 2022 19:04:35 +1000 Subject: [PATCH 5/5] Inverte the pulse effect Co-authored-by: Daniel Guillan --- src/UnderlineNav2/LoadingCounter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/UnderlineNav2/LoadingCounter.tsx b/src/UnderlineNav2/LoadingCounter.tsx index 76bfbaf2777..7e7d67b4366 100644 --- a/src/UnderlineNav2/LoadingCounter.tsx +++ b/src/UnderlineNav2/LoadingCounter.tsx @@ -2,8 +2,8 @@ import styled, {keyframes} from 'styled-components' import {get} from '../constants' const loading = keyframes` - from { opacity: 0.2; } - to { opacity: 1; } + from { opacity: 1; } + to { opacity: 0.2; } ` export const LoadingCounter = styled.span`