Skip to content
This repository has been archived by the owner on Oct 4, 2023. It is now read-only.

[C-2890] Add first version of a typography component to web #3796

Merged
merged 1 commit into from
Jul 26, 2023

Conversation

Kyle-Shanks
Copy link
Contributor

Description

Testing out a first version of a Typography component for web.

Note: This does not use the css variables that were written by Randy bc this we mostly build out before that work was done

Dragons

N/A

How Has This Been Tested?

Manual testing

How will this change be monitored?

N/A

Feature Flags

N/A

Copy link
Contributor

@amendelsohn amendelsohn left a comment

Choose a reason for hiding this comment

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

Very nice! I like this approach.
Having props type checking the structured mappings in code is a win imo.

packages/web/src/components/typography/Text.tsx Outdated Show resolved Hide resolved
packages/web/src/components/typography/Text.tsx Outdated Show resolved Hide resolved
@Kyle-Shanks Kyle-Shanks force-pushed the kj-Add-typography-component-for-web branch from 44ce403 to 7590b04 Compare July 25, 2023 21:39
@audius-infra
Copy link
Collaborator

@Kyle-Shanks Kyle-Shanks changed the title Add first version of a typography component to web [C-2890] Add first version of a typography component to web Jul 26, 2023
Copy link
Contributor

@dylanjeffers dylanjeffers left a comment

Choose a reason for hiding this comment

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

really clean and this is going to change so much. lets also create and index.ts file and export Text and all the types so imports can be import {Text} from 'components/typography

textTransform: 'inherit'
}

export type TextProps = {
Copy link
Contributor

Choose a reason for hiding this comment

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

this is wonderful

packages/web/src/components/typography/Text.tsx Outdated Show resolved Hide resolved
...variantStrengthInfo
}

const styleObject: CSSProperties = {
Copy link
Contributor

Choose a reason for hiding this comment

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

as a first implementation, using styleObject is okay, but long term i do think it makes sense to use classNames so we can get better performance and readability when inspecting elements

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yea you're probably right here. using the styles like this will also make overwriting the styles more annoying. I'll update it in the future

packages/web/src/components/typography/Text.tsx Outdated Show resolved Hide resolved
@Kyle-Shanks Kyle-Shanks force-pushed the kj-Add-typography-component-for-web branch from 7590b04 to 31ab574 Compare July 26, 2023 18:57
@Kyle-Shanks Kyle-Shanks merged commit a84126f into main Jul 26, 2023
2 checks passed
@Kyle-Shanks Kyle-Shanks deleted the kj-Add-typography-component-for-web branch July 26, 2023 18:59
schottra added a commit that referenced this pull request Jul 27, 2023
* origin/main:
  [C-801] Fix oauth nodes (#3807)
  Update typography component to use classnames (#3805)
  Switch to Stripe package instead of script (#3798)
  [C-2890] Add first version of a typography component to web (#3796)
  Fix mobile prem-content drawer unlocking margin (#3804)
  [C-2857] Remove get blocknumber (#3802)
  Prepare for 1.5.34 full app release (#3801)
audius-infra pushed a commit that referenced this pull request Jul 29, 2023
[5e99303] Add favorite test and fix aria-label (#3817) Raymond Jacobson
[ccc32ce] [C-2908 C-2744] fix desktop follow button (#3816) Dylan Jeffers
[c0679c3] [PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats (#3815) Randy Schott
[089a9e6] Pin stripe package versions (#3813) Reed
[a281267] [C-2774] Update upload inputs (#3806) Dylan Jeffers
[f504ef9] [C-2901] Fix menu types (#3811) Dylan Jeffers
[cb9a385] [C-2905] Update Text types and props to camelCase (#3810) Kyle Shanks
[027b3a5] [PAY-1624] Implement Purchase modal (#3808) Randy Schott
[deadb5f] [C-2902] Update the upload forms to use the typography component (#3809) Kyle Shanks
[039c951] [C-801] Fix oauth nodes (#3807) Raymond Jacobson
[c3765c7] Update typography component to use classnames (#3805) Kyle Shanks
[cab0a3e] Switch to Stripe package instead of script (#3798) Reed
[a84126f] [C-2890] Add first version of a typography component to web (#3796) Kyle Shanks
[4addddc] Fix mobile prem-content drawer unlocking margin (#3804) Reed
[233b585] [C-2857] Remove get blocknumber (#3802) Dylan Jeffers
[d113bdb] Prepare for 1.5.34 full app release (#3801) Dylan Jeffers
[2f09db4] [C-2887] Fix collection button widths (#3800) Dylan Jeffers
[8158e10] [PAY-1655] Add ColorValue prop to Text component (#3799) Reed
[fe4bc6a] Revert cacheActions.add thunk (#3797) Dylan Jeffers
[2370bbe] [PAY-1650] Update play/preview buttons on track details to use HarmonyButton (#3795) Randy Schott
[3579dc2] [PAY-1651] Implements Harmony Buttons (#3794) Randy Schott
[5af77ec] [C-2886] Improve cache performance (#3792) Dylan Jeffers
[6fb78f1] [PAY-1587] Mobile USDC Purchase Drawer Skeleton (#3793) Reed
[1277a41] [C-2883] Migrate confirmer to common (#3788) Dylan Jeffers
[ce2548e] [plat-1111] add usdc purchase seller and buyer notifications (#3770) sabrina-kiam
[bc04f52] Fix mobile LockedStatusBadge padding (#3790) Reed
[8943078] [C-2680] Attribution Modal (#3778) Andrew Mendelsohn
@AudiusProject AudiusProject deleted a comment from linear bot Sep 11, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants