Skip to content

[PAY-3720][PAY-3718][PAY-3709] Add Harmony Components: NavItem, BalancePill, and NotificationCount - #10793

Merged
faridsalau merged 6 commits into
mainfrom
farid/harmony-components
Dec 19, 2024
Merged

[PAY-3720][PAY-3718][PAY-3709] Add Harmony Components: NavItem, BalancePill, and NotificationCount#10793
faridsalau merged 6 commits into
mainfrom
farid/harmony-components

Conversation

@faridsalau

@faridsalaufaridsalau commented Dec 19, 2024

Copy link
Copy Markdown
Contributor

Description

Changes

This PR introduces three new components to the Harmony design system:

  1. NavItem: A navigation item component for sidebars and menus

    • Supports default, hover, and selected states
    • Optional left and right icons
    • Consistent styling with theme support

  2. BalancePill: A pill-shaped component for displaying balances

    • Shows numeric values with optional icons
    • Theme-aware styling
    • Flexible layout options

  3. NotificationCount: A badge component for displaying notification counts

    • Can wrap other components (typically icons/buttons)
    • Formats large numbers (e.g., 1000 -> 1K)
    • Supports small size variant
    • Hover state support

Documentation

Each component includes:

  • Storybook documentation with usage guidelines
  • Interactive examples
  • Props documentation
  • Theme demonstrations
  • Do's and Don'ts (where applicable)

How Has This Been Tested?

All components can be tested through their respective Storybook stories, which cover various states and configurations.

Reference Figma for correctness

@changeset-bot

changeset-botBot commented Dec 19, 2024•
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 01a5481

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dylanjeffers
dylanjeffers approved these changes Dec 19, 2024
View reviewed changes

@dylanjeffersdylanjeffers left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

excellent work!

Comment threadpackages/harmony/src/components/NavItem/NavItem.tsx Outdated
Comment threadpackages/harmony/src/components/NavItem/NavItem.tsx Outdated
Comment threadpackages/harmony/src/components/NavItem/NavItem.tsx Outdated
Comment threadpackages/harmony/src/components/NavItem/NavItem.tsx Outdated
Comment threadpackages/harmony/src/components/NavItem/NavItem.tsx Outdated
</Text>
</Flex>
{hasRightIcon && (
<RightIcon

@dylanjeffersdylanjeffersDec 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

is right icon supposed to be smaller?

@faridsalaufaridsalauDec 19, 2024

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yea from the figma has them being different sizes

Comment threadpackages/harmony/src/components/balance-pill/BalancePill.tsx
size='s'
strength='strong'
textAlign='center'
css={textStyles}

@dylanjeffersdylanjeffersDec 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

we may want "inverse" color here

@faridsalaufaridsalauDec 19, 2024

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

think we're using the v1 config so inverse isn't accessible

image

@dylanjeffersdylanjeffersDec 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

ah i see, how do you want to play this? go ahead with this for now, and follow up when v2 live?

@faridsalaufaridsalauDec 19, 2024

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

yea that works!

Comment threadpackages/harmony/src/components/notification-count/NotificationCount.tsx Outdated
Comment threadpackages/harmony/src/components/notification-count/NotificationCount.tsx
})
}

const textStyles: CSSObject = {

@dylanjeffersdylanjeffersDec 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

nice, this makes me think we should add hover support with our tokenization on flex/text

@dylanjeffersdylanjeffersDec 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

so is .parent an emotion thing, TIL

Comment threadpackages/harmony/src/components/notification-count/NotificationCount.tsx
variant='label'
size='xs'
css={textStyles}
color='staticStaticWhite'

@dylanjeffersdylanjeffersDec 19, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

heads up sorry about this variable, it will be migrated to staticWhite shortly, just needed to do this for backwards compat

@faridsalau
faridsalau merged commit 82d9259 into mainDec 19, 2024
@faridsalau
faridsalau deleted the farid/harmony-components branch December 19, 2024 17:39
audius-infra pushed a commit that referenced this pull request Dec 21, 2024
audius-infra
Audius Client (Web and Mobile) v1.5.114
5a3bfdf
[29ca128] [C-5566] Upgrade prettier to support ternary indent (#10791) Andrew Mendelsohn
[c95b867] Remove react query test pages (#10822) Dylan Jeffers
[2ca1362] Update context imports to fix circular dependency (#10821) Dylan Jeffers
[f8fc3fe] [C-5567] Add core entity react-query hooks (#10796) Dylan Jeffers
[4ade1a8] [QA-1892] Fix aggressive emoji (#10816) Sebastian Klingler
[8ace1db] Remove libs from web/mobile (#10650) Raymond Jacobson
[e872cbf] Fix Wormhole contract typehash and deadline, fix RPC request signature (#10807) Marcus Pasell
[0722c33] Remove support for Eth AUDIO send from client (#10803) Marcus Pasell
[5678ece] Use sdk for metadata time on addTrackToPlaylist (#10801) Raymond Jacobson
[3b88339] Remove Buy USDC via Coinflow (#10802) Marcus Pasell
[2fdaaef] [C-5507] Clear the queue if track with replaced audio is in the queue (#10800) Kyle Shanks
[532ed0c] Remove libs from metamask modal (#10799) Raymond Jacobson
[f61c488] Migrate useCoinflowWithdrawalAdapter to SDK (#10782) Marcus Pasell
[6e5ab0d] Migrate createTransferToUserBankTransaction to SDK (#10783) Marcus Pasell
[9ecbb53] Migrate all but balanceOf to sdk clients (#10792) Randy Schott
[0660f35] [C-5534] Add feature tagging to errorSagas (#10765) Andrew Mendelsohn
[09b735a] Revert "Fix local turbo by upgrading react-native-svg (#10790)" (#10794) Raymond Jacobson
[82d9259] [PAY-3720][PAY-3718][PAY-3709] Add Harmony Components: NavItem, BalancePill, and NotificationCount (#10793) Farid Salau
[1160d85] [PAY-3655] Fix issues with artwork edit (#10786) Sebastian Klingler
[14f63c7] [C-5564] Upgrade react-query to 5x (#10777) Dylan Jeffers
[3e4eab4] Fix local turbo by upgrading react-native-svg (#10790) Raymond Jacobson
[6da87bb] [C-5563] Remove trpc from common, web, and mobile (#10776) Dylan Jeffers
[032af7a] Remove some unused things in audiusBackend (#10785) Randy Schott
[8ea4716] [PAY-3656] Fix bootsplash animation (#10769) Raymond Jacobson
[c193b06] [PAY-3661] Fix audio balance checks (#10762) Randy Schott
[1a4ff4a] [PAY-3654] Fix trending image flashing (#10766) Raymond Jacobson
[ba49b80] [C-5536] Make sentry release versions match ours (#10753) JD Francis
[9592cf9] Remove buy-crypto flows (#10768) Marcus Pasell
[06c2678] [C-5562] Migrate follows-you to api (#10774) Dylan Jeffers
[22420a9] Fix nav-menu theme (#10778) Dylan Jeffers
[74f99e6] [PAY-3664] Avoid showing green buy btn when insufficient balance (#10771) Raymond Jacobson
[17dc919] [PAY-3677] Fix mobile explore collections (#10754) Raymond Jacobson
[8a08bde] Fix ssr by using typeof checks on global (#10775) Dylan Jeffers
[cce74dd] [C-5549] Migrate album backlinks to api (#10758) Dylan Jeffers
[8e857ed] Improve mobile image loading (#10770) Raymond Jacobson
[07d1d82] [PAY-3671] Fix divider spacing before 'Add some tracks' (#10767) Raymond Jacobson
[bef0bef] [C-5500] Fix upload flow track replace (#10761) Kyle Shanks
[50a2adf] [C-4730] Add native Artwork component (#10743) Dylan Jeffers
[363e1bb] [PAY-4702] Remove getUnclaimedPlaylistId in favor of sdk generatePlaylistId (#10759) Sebastian Klingler
[7f58e98] Always recover BuyAudio on page load (#10756) Marcus Pasell
[bd0cb99] [PAY-3672] Add scroll view for notifications (#10755) Raymond Jacobson
[70f718f] [PAY-3700] Improve drawer close button (#10751) Sebastian Klingler
[acdc2e5] Dedupe welcome email (#10752) Isaac Solo
[70159a6] Parse guest email in local storage (#10750) Isaac Solo
[65fd923] ⚠️ [PAY-2944] Migrate collections to sdk (including upload) (#10735) Sebastian Klingler
[1e21016] [PAY-3657] UPC field should be optional (#10745) Randy Schott
[c58b439] [C-5534] Add more feature tags reportToSentry (#10738) Andrew Mendelsohn
[77ccded] Fix follow artists on profile completion race condition (#10744) Isaac Solo
[76fd508] [PAY-3653] Re-land feed performance improvements (#10741) Raymond Jacobson
[72d3770] Improve sdk bundle size for SSR purposes (#10731) Raymond Jacobson
[1619918] Fix guestEmail account slice (#10742) Dylan Jeffers
[77a5f19] Guest checkout zombie state access (#10718) Isaac Solo
[1e74f91] [C-5540] Stop logging console & network errors to sentry (#10737) Andrew Mendelsohn
[3efba3f] Undo added fatal sentry logs (keep them only on "crashes") (#10736) JD Francis
[b20b2f8] Upgrade ios simulator to 16 pro (#10728) Dylan Jeffers
[e66c512] [C-5386] Guest checkout sale notifications and UI (#10713) Dylan Jeffers
[2e731ed] [C-5522] Add mobile sign up deep links (#10712) Dylan Jeffers
[68ca618] Clean up some other lingering libs usage (#10729) Randy Schott
[dd7b541] [PAY-3646] Remove audius api client (#10720) Raymond Jacobson
[eecaa66] Remove segmented-control log Dylan Jeffers
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

Assignees

No one assigned

Labels

size/XL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers