Feature / CLOUD-24320 / add body text typography

[oli-hivemq]

• paragraph
• label
• button
• metric

Kanby

[h2xd]

question(non-blocking): I'm thinking if we should write it out as

• paragraph1
• paragraph2

Since it might overlap with the padding attribute and then code becomes very hard to read.

Example

<Text variant="P2" p="2" />

Thats just a thought. What do you think @oli-hivemq?

Suggested change

	P1: {
	fontSize: 'P1',
	lineHeight: '1.75rem',
	},
	P2: {
	fontSize: 'P2',
	lineHeight: '1.5rem',
	},
	P3: {
	fontSize: 'P3',
	lineHeight: '1.25rem',
	},
	P4: {
	fontSize: 'P4',
	lineHeight: '1rem',
	},
	P5: {
	fontSize: 'P5',
	lineHeight: '1rem',
	},
	L1: defineTypographyStyle('L1', l1Settings, { textTransform: 'uppercase' }),
	L2: defineTypographyStyle('L2', l2Settings, { textTransform: 'uppercase' }),
	B1: defineTypographyStyle('B1', b1Settings),
	B2: defineTypographyStyle('B2', b2Settings),
	M1: defineTypographyStyle('M1', m1Settings, { fontFamily: metricsFont }),
	M2: defineTypographyStyle('M2', m2Settings, { fontFamily: metricsFont }),
	}
	export const fontSizes = {
	P1: '1.125rem', // can be referenced from sizes/<sizeName>/fontSize e.g. sizes/P1/fontSize
	P2: '1rem',
	P3: '0.875rem',
	P4: '0.75rem',
	P5: '0.625rem',
	L1: `${l1Settings.fontSizeRem}rem`,
	L2: `${l2Settings.fontSizeRem}rem`,
	B1: `${b1Settings.fontSizeRem}rem`,
	B2: `${b2Settings.fontSizeRem}rem`,
	M1: `${m1Settings.fontSizeRem}rem`,
	M2: `${m2Settings.fontSizeRem}rem`,
	P1: {
	fontSize: 'P1',
	lineHeight: '1.75rem',
	},
	P2: {
	fontSize: 'P2',
	lineHeight: '1.5rem',
	},
	P3: {
	fontSize: 'P3',
	lineHeight: '1.25rem',
	},
	P4: {
	fontSize: 'P4',
	lineHeight: '1rem',
	},
	P5: {
	fontSize: 'P5',
	lineHeight: '1rem',
	},
	L1: defineTypographyStyle('L1', l1Settings, { textTransform: 'uppercase' }),
	L2: defineTypographyStyle('L2', l2Settings, { textTransform: 'uppercase' }),
	B1: defineTypographyStyle('B1', b1Settings),
	B2: defineTypographyStyle('B2', b2Settings),
	M1: defineTypographyStyle('M1', m1Settings, { fontFamily: metricsFont }),
	M2: defineTypographyStyle('M2', m2Settings, { fontFamily: metricsFont }),
	}
	export const fontSizes = {
	P1: '1.125rem', // can be referenced from sizes/<sizeName>/fontSize e.g. sizes/P1/fontSize
	P2: '1rem',
	P3: '0.875rem',
	P4: '0.75rem',
	P5: '0.625rem',
	L1: `${l1Settings.fontSizeRem}rem`,
	L2: `${l2Settings.fontSizeRem}rem`,
	B1: `${b1Settings.fontSizeRem}rem`,
	B2: `${b2Settings.fontSizeRem}rem`,
	M1: `${m1Settings.fontSizeRem}rem`,
	M2: `${m2Settings.fontSizeRem}rem`,

[oli-hivemq]

good point. It was named this way to match what Eric set as text styles on Figma.

On one hand, P1 can be confusing because p could stand for padding.
On another hand, as we're using H1 to H5, the P[1-5], B1|B2, L1|L2, M1|M2 naming doesn't seem that strange.

@tolumq @RobinAtherton @vanch3d @antpaw what's your take on this?

[h2xd]

True. I was also thinking about h1..6 as it has the same naming pattern. I guess since it's TypeScript it should also be fine as they where named initially.

[vanch3d]

I'm not sure I know what D is, or B or L or M, let alone with the number beside. It won't make a consistent DevX (why P has 5 but B only 2?)

[antpaw]

I'm using shirt size all over the place, now since this is deprecated, all other solutions are okay with me.
I just need "good" typescript support, will I get an error if i do <Button variant="b3" /> ?

[oli-hivemq]

I'm not sure I know what D is, or B or L or M...

Seems like a good argument for using more than just a letter.

...let alone with the number beside.

Good point, for buttons, labels and "metrics" we could consider going with a more explicit naming convention, like "label small" vs "label default" (making the assumption here that default might be easier to use than medium, because how would you know which one is the default?)

(why P has 5 but B only 2?)

The general idea is to limit the options until we realise we need more. Having said that, I'm unsure we really need 5 P. Eric might have some ideas about the Display options too, but I don't see how we'd use them in the UI. Or maybe they're for a splash screen 🤔

[oli-hivemq]

I'm using shirt size all over the place, now since this is deprecated, all other solutions are okay with me. I just need "good" typescript support, will I get an error if i do <Button variant="b3" /> ?

Good idea, looking into that

[vanch3d]

I was wondering why we are dropping the "native" trousers (😄) size of chakra UI

[oli-hivemq]

Regarding the "native" trousers sizes of Chakra UI:

1. It comes from a discovery that fontSize is - as it says - only about font size. Wherever we want to alter letter-spacing or text-transform, we need something more than fontSize -> size or variant became the only options for button, label and metrics styles.
2. I went in this direction as a discussion starter, to see what you guys thought. That objective has been reached 😅 as we have some push back. That's not a bad thing, it means we need to improve how we collaborate and take in developer experience right from the beginning, when creating the design system.

Now it makes us revisit our approach. The answer to this question could become: "ok instead of p1 to p5 for paragraphs, maybe we should update the design system to use the Chakra sizes 🤷‍♂️
Let's discuss in the guild meeting.

[h2xd]

LGTM!

[oli-hivemq]

In the spirit of moving fast, I will:

1. merge this PR
2. add a task to look into typescript support as suggested. I saw that the right typings are getting generated already in the theme's dist. However in the testing pages I don't see that support so it needs looking into. And I also want to check if this support works from a project that includes this lib.
3. add an item to the agenda of the next guild biweekly to discuss all the points Nicolas brought up on the naming and devX