feat(components): add helix product typography #15459

sfoster1 · 2024-06-18T22:11:48Z

This PR implements the new helix product typography system. You can find it here: https://www.figma.com/design/1ot18My22DALIcjdLl5LJh/Helix-Design-System?node-id=3571-46578&t=B4pPbtL9mapki2Jg-4

The Product type system is distinct from at least the Web type system, which will have different styles for readability in a different context. It is currently only defined for places other than the ODD.

This ended up being a big PR because our usage of the StyledText atom had to be changed somewhat.

The change was necessary because the helix product styles do not and are not intended to align with the semantic styling presented by the StyledText component - there is no direct alignment that "when you're making a <p>, you use this style". Instead, the intent is that higher level components will use the style by the name it has in helix, without an explicit semantic link outside of the designs. That makes the way the old styled text works kind of nonsense.

In addition, there are no helix product styles for the ODD, and there is no current map and possibly no intention to have a future map between the semantic styles of the ODD and Desktop. That means that having a StyledText component that maps from a single semantic element to a set of appropriate styles just doesn't really make sense.

So, StyledText is renamed to LegacyStyledText including at all callsites. The new StyledText requires you to specify styles separately for ODD and Desktop, though it gives you a handy type system integrated hint towards which styles should be allowed. Well, not quite required, more like you have no way to specify both in one prop.

You can view it commit by commit:

07dae4b adds the actual data for the helix product typography styling, and stories for viewing them as design components (and for viewing the old typography styles). This is more or less the only commit there was during the initial review, though it didn't then have the stories for the old typography
a36f501 is a repo-wide find and replace to change StyledText to LegacyStyledText
acec934 implements the new StyledText.

Stories here: https://s3-us-west-2.amazonaws.com/opentrons-components/EXEC-566-add-helix-product-typography/index.html?path=/docs/design-tokens-typography--docs

Closes EXEC-566

koji · 2024-06-18T22:25:45Z

components/src/helix-design-system/product/typography.ts

+export const fontSizeDisplayBold = fontSizeDisplay
+export const lineHeightDisplayBold = lineHeightDisplay
+export const fontFamilyDisplayBold = fontFamilyDisplay
+export const fontWeightDisplayBold = '700'


maybe define font-weight ?

const regular = 400' const semiBold = '600' const bold = '700'

koji · 2024-06-18T22:26:17Z

components/src/helix-design-system/product/typography.ts

+export const fontSizeCaptionMedium = fontSizeCaption
+export const lineHeightCaptionMedium = lineHeightCaption
+export const fontFamilyCaptionMedium = fontFamilyCaption
+export const fontWeightCaptionMedium = '500px'


koji · 2024-06-18T22:26:27Z

components/src/helix-design-system/product/typography.ts

+export const fontSizeCaptionRegular = fontSizeCaption
+export const lineHeightCaptionRegular = lineHeightCaption
+export const fontFamilyCaptionRegular = fontFamilyCaption
+export const fontWeightCaptionRegular = '400px'


koji

lgtm!
thank you for adding this!

koji · 2024-06-20T20:21:49Z

components/src/helix-design-system/product/typography.ts

+ */
+
+// Valid for most typography styles
+export const fontFamily = 'Public Sans'


can we use this in app/src/atoms/GlobalStyle/index.ts?

koji · 2024-06-20T20:24:07Z

components/src/atoms/StyledText/index.tsx

use .ts itead of .tsx?

koji · 2024-06-20T20:26:46Z

components/src/helix-design-system/product/typography.ts

+// Code
+const fontSizeCode = '0.75rem' // 12px
+const lineHeightCode = '1.25rem' // 20px
+const fontFamilyCode = 'Reddit Mono'


can we use Reddit Mono without installing a package?

Definitely not, or at least without installing a font however we install a font - if you look at storybook, this shows up as whatever the browser fallback is. I really haven't investigated how/whether we can isntall this, so I think that if we don't want to keep it as a placeholder I'd rather delete it for now.

For Public Sans, app is using @fontsource and fontsource supports reddit mono.

https://github.com/fontsource/font-files/blob/025ea945ff916c7bfe4fe5aaef1f3f57a523a1c6/fonts/google/reddit-mono/README.md?plain=1

koji · 2024-06-20T20:28:24Z

components/src/helix-design-system/product/typography.ts

+// Caption
+const fontSizeCaption = '0.8125rem' // 13px
+const lineHeightCaption = '1rem' // 16px
+const fontFamilyCaption = 'Public Sans'


Suggested change

const fontFamilyCaption = 'Public Sans'

const fontFamilyCaption = 'Public Sans'

Suggested change

const fontFamilyCaption = 'Public Sans'

const fontFamilyCaption = fontFamily

koji · 2024-06-20T20:28:49Z

components/src/helix-design-system/product/typography.ts

+export const fontSizeCaptionRegular = fontSizeCaption
+export const lineHeightCaptionRegular = lineHeightCaption
+export const fontFamilyCaptionRegular = fontFamilyCaption
+export const fontWeightCaptionRegular = '400'


Suggested change

export const fontWeightCaptionRegular = '400'

export const fontWeightCaptionRegular = fontWeightRegular

koji · 2024-06-20T20:31:00Z

components/src/helix-design-system/product/typography.ts

+export const fontSizeCaptionMedium = fontSizeCaption
+export const lineHeightCaptionMedium = lineHeightCaption
+export const fontFamilyCaptionMedium = fontFamilyCaption
+export const fontWeightCaptionMedium = '500'


nit

maybe define as fontWeightMedium and add it to the top fontWeight group?

then

export const fontWeightCaptionMedium = fontWeightMedium

It's not though, fontWeightMedium is 600

well, fontWeightSemibold anyway

and we got a dqa update to make it 600, so i did this

- Adds the new sizes for type in the helix product system - Adds a dummy component under "Design Tokens" in storybook so you can view all the text Closes EXEC-566 Make the storybook display all the stories

LegacyStyledText will use the current styles; a new StyledText implementation will use the helix design system typography.

StyledText is a component that is only really useful if you're goign to do semantic styles. Semantic styles are only really useful if they mean the same thing in all the places they're used. This isn't really true right now, but we can at least have enumerated style tokens that you can select from when creating one. Now, which style token you use is separately selectable across ODD and non-ODD flows. You can still fully or partially override the CSS if you want, but the styles on desktop align with helix and the styles on ODD align with what's going on in ODD.

jerader

very nice 🤩

jerader · 2024-06-21T14:56:34Z

components/src/atoms/StyledText/StyledText.tsx

+  level1Header: {
+    as: 'h1',
+    style: css`
+      @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {


question, do we need these media queries if these are exclusively for the ODD?

Yes because the idea is that you will be passing both a desktopStyle and oddStyle to the component, so we want them to work together nicely

sfoster1 requested review from shlokamin, ncdiehl11 and mmencarelli June 18, 2024 22:11

sfoster1 requested a review from a team as a code owner June 18, 2024 22:11

koji reviewed Jun 18, 2024

View reviewed changes

koji approved these changes Jun 20, 2024

View reviewed changes

sfoster1 requested a review from a team as a code owner June 20, 2024 16:12

sfoster1 requested a review from koji June 20, 2024 19:48

sfoster1 force-pushed the EXEC-566-add-helix-product-typography branch from d8d2be7 to acec934 Compare June 20, 2024 19:51

koji reviewed Jun 20, 2024

View reviewed changes

components/src/atoms/StyledText/index.tsx Outdated

Copy link

Contributor

koji Jun 20, 2024

Choose a reason for hiding this comment

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

use .ts itead of .tsx?

sfoster1 reacted with thumbs up emoji

koji reviewed Jun 20, 2024

View reviewed changes

sfoster1 force-pushed the EXEC-566-add-helix-product-typography branch from c5f4afe to 32b60f1 Compare June 20, 2024 21:02

sfoster1 added 12 commits June 21, 2024 10:37

feat(components): add helix product typography

a276f4c

- Adds the new sizes for type in the helix product system - Adds a dummy component under "Design Tokens" in storybook so you can view all the text Closes EXEC-566 Make the storybook display all the stories

s/StyledText/LegacyStyledText

28eae2b

LegacyStyledText will use the current styles; a new StyledText implementation will use the helix design system typography.

review: index.tsx->index.ts

0d5c75b

review: derive global font from helix

7b11a56

Font weights are now semibold not medium

8e729fc

review: variable for caption weight

319296a

semibold fixups

1f15726

sed fixups

2550373

dqa updates

9496a71

lint

aedb4e9

format and lint

051220b

sfoster1 force-pushed the EXEC-566-add-helix-product-typography branch from 78614b2 to 051220b Compare June 21, 2024 14:40

fixups after rebase

9f48926

jerader approved these changes Jun 21, 2024

View reviewed changes

jerader reviewed Jun 21, 2024

View reviewed changes

sfoster1 merged commit fec1a98 into edge Jun 21, 2024
25 checks passed

sfoster1 deleted the EXEC-566-add-helix-product-typography branch June 21, 2024 16:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): add helix product typography #15459

feat(components): add helix product typography #15459

sfoster1 commented Jun 18, 2024 •

edited

Loading

koji Jun 18, 2024

koji Jun 18, 2024

sfoster1 Jun 20, 2024

koji Jun 18, 2024

sfoster1 Jun 20, 2024

koji left a comment

koji Jun 20, 2024

koji Jun 20, 2024

koji Jun 20, 2024

sfoster1 Jun 20, 2024

koji Jun 21, 2024

koji Jun 20, 2024

koji Jun 20, 2024

koji Jun 20, 2024

sfoster1 Jun 20, 2024

sfoster1 Jun 20, 2024

sfoster1 Jun 21, 2024

jerader left a comment

jerader Jun 21, 2024 •

edited

Loading

sfoster1 Jun 21, 2024

	const fontFamilyCaption = 'Public Sans'
	const fontFamilyCaption = 'Public Sans'

	const fontFamilyCaption = 'Public Sans'
	const fontFamilyCaption = fontFamily

	export const fontWeightCaptionRegular = '400'
	export const fontWeightCaptionRegular = fontWeightRegular

feat(components): add helix product typography #15459

feat(components): add helix product typography #15459

Conversation

sfoster1 commented Jun 18, 2024 • 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

koji left a 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

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

Choose a reason for hiding this comment

jerader left a comment

Choose a reason for hiding this comment

jerader Jun 21, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfoster1 commented Jun 18, 2024 •

edited

Loading

jerader Jun 21, 2024 •

edited

Loading