[C-3339] Update storybook layout #6642

dylanjeffers · 2023-11-09T23:37:36Z

Description

Updates storybook layout by establishing the following:

Flex with gap on the content root
Heading updates to move "title" and "description" elements closer together. This is achieved with the "Heading" component
Updates to some anchor and paragraph tag default values

How Has This Been Tested?

audius-infra · 2023-11-09T23:48:18Z

Preview this change https://demo.audius.co/dj-c-3339-layout-spacing

Kyle-Shanks · 2023-11-09T23:49:25Z

Quick Notes: The anchors look like they're shifting the section headers a bit. Also the story links on the right don't seem to be working anymore

Kyle-Shanks · 2023-11-09T23:52:26Z

packages/harmony/src/components/button/Button/Button.mdx

+<Heading>
+  <Heading>
+    ## Overview
+    <Description />
+  </Heading>
+</Heading>


Nested heading?

Whoops getting a little carried away 😂

Kyle-Shanks · 2023-11-09T23:55:04Z

packages/harmony/src/icons/AnimatedIcons.stories.mdx

+<span
+  css={(theme) => ({ p: { color: `${theme.color.status.error} !important` } })}
+>
+  Do not export icons from this section.
+</span>


was the Text component not working here?

Realized for harmony docs we don't want to use text for elements that will be styled with harmony overrides so this just makes that a bit more explicit. Don't love this though, maybe we have a harmony docs text component or something

Kyle-Shanks · 2023-11-09T23:57:38Z

packages/harmony/src/icons/UtilityIcons.stories.mdx

@@ -35,7 +45,9 @@ Recommended sizes for utility icons: 14px | 16px | 20px | 24px | 30px | 32px
        w={iconSizes[size]}
        css={{ background: 'rgba(255, 0, 0, 0.10)' }}
      >
-        <Text css={{ color: '#F00' }}>{iconSizes[size]}</Text>
+        <Text css={{ color: '#F00 !important', fontSize: '10px !important' }}>


Is this competing with something that is making these !importants needed?

It's annoying, all the storybook styles are highly specific so I don't think there is another way around it?

amendelsohn

This is 🔥

amendelsohn · 2023-11-09T23:51:56Z

packages/harmony/src/storybook/components/Subtitle.tsx

+
+export const Subtitle = styled.span(({ theme }) => {
+  const css = { fontSize: `${theme.typography.size.m2}px !important` }
+  return { ...css, p: css }


does p propagate to
tag children?

This is a super weird situation, basically. When you wrap this component around markdown, it adds a p tag inside. Weirdly though this only happens when the markdown is long enough to make it a new line inside the component. if it's inline there is no inner tag. So what this is saying is style both the case where we wrap an extra p tag and when we don't.

amendelsohn · 2023-11-09T23:54:51Z

packages/harmony/src/icons/IconDetails.stories.mdx

@@ -74,7 +83,7 @@ Locate the export panel in the bottom right corner of figma. (Export panel is on
 ⚠️ Verify the export settings are correct. (See screenshot) If not,
 go back to step 2.

-<img src={verifyIconSettings} />
+<img width={471} src={verifyIconSettings} />


seems like an odd number. Is that just the size of the image?

Yeah exactly, with the flex stuff, it was making them full width. If there is a better way lmk

You could try content-fit: none on the image? idk if that's exactly the issue though

amendelsohn · 2023-11-09T23:56:59Z

packages/harmony/src/storybook/components/Heading.tsx

+type HeadingProps = FlexProps
+
+export const Heading = (props: HeadingProps) => {
+  return <Flex direction='column' gap='l' {...props} />


Kyle-Shanks · 2023-11-09T23:59:52Z

packages/harmony/src/storybook/components/InformationBox.tsx

+          </Link>
+        ) : (
+          <Text
+            css={[titleCss, { color: `${theme.color.primary} !important` }]}


More !importants here. making a note in case these need to be removed

[54bd272] [C-3265] Ensure text-input doesn't need explicit role (#6660) Dylan Jeffers [af284fb] [C-3350] Add contributing guide (#6658) Dylan Jeffers [221c4c4] [C-3345] Fix TOC links (#6657) Dylan Jeffers [6f265d0] Add sign up white screen progress header C-3320 (#6650) nicoback2 [bd2ab5e] Handle page - main content and manual entry functionality C-3319 (#6625) nicoback2 [f8e5bcc] Fix small issues with client CI announcements (#6659) Raymond Jacobson [f448bd4] Fix developer app metrics C-3248 (#6656) nicoback2 [4220328] Fix harmony logo link and title (#6640) Andrew Mendelsohn [7b31422] [C-3349] Fix internal links (#6652) Dylan Jeffers [0c1fc5b] Improve cypress config ergo and fix smoke tests after vite (#6653) Raymond Jacobson [879a73e] [C-3287] Add Harmony TextInput docs (#6651) Kyle Shanks [99919c6] [C-3333] Add harmony link unfurl (#6649) Dylan Jeffers [4ef98f1] [C-3344] Organize and sort stories (#6648) Dylan Jeffers [2c3b849] [C-3343] Simplify and fix theme switcher (#6647) Dylan Jeffers [1c2d54c] [C-3325] Add SelectablePill docs (#6646) Dylan Jeffers [8e9f4aa] Bump version to 0.5.14 audius-infra [749c240] [PAY-2126] Fix now playing play bar layouts (#6645) Raymond Jacobson [effeb6b] Gate client release version and add slack notifs (#6626) Raymond Jacobson [090ad1c] Move link to storybook components (#6644) Andrew Mendelsohn [71284ee] [C-3339] Update storybook layout (#6642) Dylan Jeffers [270dd62] Update meta pixel id (#6643) Raymond Jacobson [51a2b49] Remove magic number for $AUDIO decimals in buy-audio flow (#6641) Reed [9ffda85] [C-3334] Add harmony favicons (#6631) Dylan Jeffers [62de2d4] Update default RPCs (#6639) Raymond Jacobson [6b0e9a3] [C-3340] Fix do's and don'ts styling (#6638) Andrew Mendelsohn [7d15a29] Add meta pixel (#6637) Raymond Jacobson [52b88ab] [PROTO-1417] Expose uptime via /up route (no styling) (#6627) Theo Ilie [a1bc8b0] [PAY-2150] Make total audio claimed color default (#6633) Saliou Diallo [9f1e4f3] [C-3341] Clean up Harmony Button docs (#6636) Kyle Shanks [bd10a15] [C-3317] Add component welcome doc (#6612) Dylan Jeffers [5658ba2] Remove unnecessary hardcoded list of challenges (#6634) Reed [97e0664] [C-3323] Add Harmony Divider docs (#6629) Kyle Shanks [05860eb] Fix wrong bg color in mobile ready to claim pill (#6635) Reed [65092e7] [PAY-2030] Use cooldown_days from backend instead of hardcoding (#6597) Reed [c4afdc0] [PAY-2145] Rename v2 landing page items (#6628) Saliou Diallo [99bad78] Fix emotion and css-modules specificity (#6632) Dylan Jeffers [35f87fa] [INF-542] Fix vite_public_url (#6630) Sebastian Klingler [a09fb82] [C-3288] Add component statuses (#6624) Dylan Jeffers [6c6c2f3] Bump version to 0.5.13 audius-infra [132fe23] [C-3338] Fix harmony internal links (#6623) Andrew Mendelsohn [21224f8] [C-3327] Add Icon docs (#6606) Dylan Jeffers [b18accb] Add reset.css to storybook global.css (#6621) Dylan Jeffers [19f2dd5] Add matching challenges to claimable challenges (#6622) Reed [25fd376] Fix lint (#6620) Raymond Jacobson [2555c1d] [C-3329] Add harmony docs dark-mode (#6616) Dylan Jeffers [68107ee] [INF-540] Fix popup location (#6619) Sebastian Klingler [050b2fa] [PAY-2096] Validate remixability of premium content in DN indexing (#6594) Saliou Diallo [969a896] [C-3315] Update harmony button to emotion (#6605) Kyle Shanks [6c45cfb] Assert protocol in oauth redirect_uri (#6618) Raymond Jacobson [82b0ce9] [PROTO-1411] Add standalone uptime check container with BoltDB (#6610) Theo Ilie [2778bbe] [PAY-2106] Adds tracking of opening source for purchase modal (#6603) Randy Schott [2a91b1b] Add file-loader to fix harmony storybook (#6617) Dylan Jeffers [aed8167] [C-3322, C-3324] Add Box and Flex docs to storybook (#6607) Andrew Mendelsohn [36bbfe1] [C-3259] Add Avatar component to harmony (#6595) Andrew Mendelsohn [84a497a] Fix total audio claimed amount for aggregate challenges (#6614) Reed [f03cb2d] fix release for arm (#6615) Alec Savvy [2285436] [INF-538] Fix filetype icons in upload broken due to vite migration (#6613) Sebastian Klingler [3134f3a] Bump version to 0.5.12 audius-infra [bbddaed] [PAY-2068] Move dayjs to common package (#6609) Raymond Jacobson [70ed333] Fix rewards layout issues after vite (#6611) Raymond Jacobson [df86987] [PAY-1850] Remove fn callback from withdraw USDC action (#6608) Reed [4daef8d] Add cooldown_days to challenges api response (#6604) Reed [97eb73d] [C-3318] Add related-foundations (#6600) Dylan Jeffers [a578572] [C-3316] Add foundations welcome doc (#6592) Dylan Jeffers [561f253] Fix Audius appearing to be not followed after signup QA-678 (#6564) nicoback2 [6020747] [INF-491] Move embed to vite (#6599) Raymond Jacobson [d6d3382] [PROTO-1410] Self hosted ci: make startup script idempotent, perform full docker prune. (#6601) Danny [8006dc8] Abstract peer health from mediorum to run standalone (#6533) Michelle Brier [e183826] Only claim challenges past cooldown on mobile (#6602) Reed [d23c978] build and push for arm (#6470) Alec Savvy [9af449a] Bump version to 0.5.11 audius-infra [fd12b98] [PAY-2091] Update aao error emojis and libs mapped error (#6593) Saliou Diallo [73e7572] Reinstall pino to fix missing on-exit-leak-free in @pedalboard/relay (#6596) Sebastian Klingler [3dc0d2b] [C-3326] Update harmony welcome docs (#6591) Dylan Jeffers [bdcebd9] make mediorum module importable (#6586) Alec Savvy [9518d18] [C-3321] Add harmony docs theme (#6588) Dylan Jeffers [75836f5] [Cherry pick] Fix `StatusMessage` validation check (#6587) nicoback2 [6c473bb] ⚠️ [INF-507] Migrate from CRA to Vite (#6567) Sebastian Klingler [1023053] [PAY-2108] Migrate USDC manual transfer modal to common slice (#6590) Randy Schott [e468830] [PAY-1977] Drop avenir condensed and gilroy fonts (#6362) Raymond Jacobson [cb57235] Scheduled releases poc (#6513) Isaac Solo [61f2bcd] [PAY-2107] Switch purchase drawer to use common modal slice on mobile (#6589) Randy Schott [7fcf4d3] Restart signup flow isaac [5f46bc2] Fix PasswordInput lint (#6585) Dylan Jeffers [4bd9789] Bump version to 0.5.10 audius-infra

dylanjeffers added 3 commits November 9, 2023 14:22

[C-3339] Improve layout and spacing

be365a0

Merge branch 'main' into dj-c-3339-layout-spacing

9ed0cbf

Address all layouts

31987dd

pull-request-size bot added the size/XXL label Nov 9, 2023

dylanjeffers requested review from amendelsohn and Kyle-Shanks November 9, 2023 23:37

Kyle-Shanks reviewed Nov 9, 2023

View reviewed changes

amendelsohn approved these changes Nov 9, 2023

View reviewed changes

Kyle-Shanks reviewed Nov 9, 2023

View reviewed changes

Update heading

26a91fa

dylanjeffers merged commit 71284ee into main Nov 10, 2023
1 check passed

dylanjeffers deleted the dj-c-3339-layout-spacing branch November 10, 2023 00:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-3339] Update storybook layout #6642

[C-3339] Update storybook layout #6642

dylanjeffers commented Nov 9, 2023

audius-infra commented Nov 9, 2023

Kyle-Shanks commented Nov 9, 2023

Kyle-Shanks Nov 9, 2023

dylanjeffers Nov 10, 2023

Kyle-Shanks Nov 9, 2023

dylanjeffers Nov 10, 2023

Kyle-Shanks Nov 9, 2023

dylanjeffers Nov 10, 2023

amendelsohn left a comment

amendelsohn Nov 9, 2023

dylanjeffers Nov 10, 2023 •

edited

Loading

amendelsohn Nov 9, 2023

dylanjeffers Nov 10, 2023

amendelsohn Nov 10, 2023

amendelsohn Nov 9, 2023

Kyle-Shanks Nov 9, 2023

[C-3339] Update storybook layout #6642

[C-3339] Update storybook layout #6642

Conversation

dylanjeffers commented Nov 9, 2023

Description

How Has This Been Tested?

audius-infra commented Nov 9, 2023

Kyle-Shanks commented Nov 9, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amendelsohn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dylanjeffers Nov 10, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dylanjeffers Nov 10, 2023 •

edited

Loading