Skip to content

Commit 45a2564

Browse files
rsarisrsaris
authored
Remove legacy Heading sizes (#1352)
Moves to use an enum for all sizes and removed two (xxl and xs) which are no longer in Figma.
1 parent 2197ec8 commit 45a2564

File tree

6 files changed

+49
-74
lines changed

6 files changed

+49
-74
lines changed

‎src/EmptyState/EmptyState.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
22

33
import classNames from 'classnames';
44

5-
import { Heading, HeadingSizes } from '../Heading';
5+
import { Heading, HeadingSize } from '../Heading';
66
import { Text } from '../Text';
77

88
import './EmptyState.scss';
@@ -47,7 +47,7 @@ function EmptyState({
4747
<Heading
4848
className="EmptyState__title"
4949
level={4}
50-
size={HeadingSizes.SMALL}
50+
size={HeadingSize.SMALL}
5151
textAlign="center"
5252
>
5353
{title}

‎src/Heading/Heading.module.css‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,21 @@
1-
.xxxl {
1+
.large {
22
font: var(--synth-font-heading-large);
33
}
44

5-
.xxl {
6-
font-size: 1.25rem;
7-
font-weight: var(--synth-font-weight-bold);
8-
line-height: 1.625rem;
9-
}
10-
11-
.xl {
5+
.medium {
126
font: var(--synth-font-heading-medium);
137
}
148

15-
.lg {
9+
.small {
1610
font: var(--synth-font-heading-small);
1711
}
1812

19-
.md {
20-
font-size: var(--synth-font-size-base);
21-
font-weight: var(--synth-font-weight-bold);
22-
line-height: 1.25rem;
13+
.text {
14+
font: var(--synth-font-body-bold);
2315
}
2416

25-
.sm {
26-
font-size: .75rem;
27-
font-weight: var(--synth-font-weight-bold);
28-
line-height: 1rem;
29-
}
30-
31-
.xs {
32-
font-size: .625rem;
33-
font-weight: var(--synth-font-weight-bold);
34-
letter-spacing: 0.0625rem;
35-
line-height: 0.875rem;
17+
.subtext {
18+
font: var(--synth-font-subtext-bold);
3619
}
3720

3821
.bold {

‎src/Heading/Heading.stories.tsx‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type { Meta, StoryObj } from '@storybook/react';
33

4-
import { Heading } from './Heading';
4+
import { Heading, HeadingSize } from './Heading';
55

66
const meta: Meta<typeof Heading> = {
77
component: Heading,
@@ -32,7 +32,7 @@ export const Default: Story = {
3232
3333
Adjust the font `size` with the available sizes:
3434
35-
`xxxl`, `xxl`, `xl`, `lg`, `md`, `sm`, `xs`
35+
`large`, `medium`, `small`, `text`, `subtext`
3636
3737
#### Best practices:
3838
@@ -61,12 +61,11 @@ export const Default: Story = {
6161
export const Levels: Story = {
6262
render: () => (
6363
<>
64-
<Heading level={1} size="xxxl">The fastest way to recruit research participants</Heading>
65-
<Heading level={2} size="xxl">The fastest way to recruit research participants</Heading>
66-
<Heading level={3} size="xl">The fastest way to recruit research participants</Heading>
67-
<Heading level={4} size="lg">The fastest way to recruit research participants</Heading>
68-
<Heading level={5} size="md">The fastest way to recruit research participants</Heading>
69-
<Heading level={6} size="sm">The fastest way to recruit research participants</Heading>
64+
<Heading level={1} size={HeadingSize.LARGE}>The fastest way to recruit research participants</Heading>
65+
<Heading level={2} size={HeadingSize.MEDIUM}>The fastest way to recruit research participants</Heading>
66+
<Heading level={3} size={HeadingSize.SMALL}>The fastest way to recruit research participants</Heading>
67+
<Heading level={4} size={HeadingSize.TEXT}>The fastest way to recruit research participants</Heading>
68+
<Heading level={5} size={HeadingSize.SUBTEXT}>The fastest way to recruit research participants</Heading>
7069
</>
7170
),
7271
};
@@ -78,13 +77,11 @@ export const Levels: Story = {
7877
export const Sizes: Story = {
7978
render: () => (
8079
<>
81-
<Heading level={2} size="xxxl">This is a heading level 2 with size="xxxl"</Heading>
82-
<Heading level={2} size="xxl">This is a heading level 2 with size="xxl"</Heading>
83-
<Heading level={2} size="xl">This is a heading level 2 with size="xl"</Heading>
84-
<Heading level={2} size="lg">This is a heading level 2 with size="lg"</Heading>
85-
<Heading level={2} size="md">This is a heading level 2 with size="md"</Heading>
86-
<Heading level={2} size="sm">This is a heading level 2 with size="sm"</Heading>
87-
<Heading level={2} size="xs">This is a heading level 2 with size="xs"</Heading>
80+
<Heading level={2} size={HeadingSize.LARGE}>This is a heading level 2 with size="large"</Heading>
81+
<Heading level={2} size={HeadingSize.MEDIUM}>This is a heading level 2 with size="medium"</Heading>
82+
<Heading level={2} size={HeadingSize.SMALL}>This is a heading level 2 with size="small"</Heading>
83+
<Heading level={2} size={HeadingSize.TEXT}>This is a heading level 2 with size="text"</Heading>
84+
<Heading level={2} size={HeadingSize.SUBTEXT}>This is a heading level 2 with size="subtext"</Heading>
8885
</>
8986
),
9087
};
@@ -97,9 +94,9 @@ export const Sizes: Story = {
9794
export const Weights: Story = {
9895
render: () => (
9996
<>
100-
<Heading level={2} size="xxl" weight="bold">The fastest way to recruit research participants</Heading>
101-
<Heading level={2} size="xxl" weight="medium">The fastest way to recruit research participants</Heading>
102-
<Heading level={2} size="xxl" weight="regular">The fastest way to recruit research participants</Heading>
97+
<Heading level={2} size={HeadingSize.MEDIUM} weight="bold">The fastest way to recruit research participants</Heading>
98+
<Heading level={2} size={HeadingSize.MEDIUM} weight="medium">The fastest way to recruit research participants</Heading>
99+
<Heading level={2} size={HeadingSize.MEDIUM} weight="regular">The fastest way to recruit research participants</Heading>
103100
</>
104101
),
105102
};
@@ -112,9 +109,9 @@ export const Weights: Story = {
112109
export const Alignment: Story = {
113110
render: () => (
114111
<>
115-
<Heading level={2} size="xxl" textAlign="left" weight="bold">The fastest way to recruit research participants</Heading>
116-
<Heading level={2} size="xxl" textAlign="center" weight="bold">The fastest way to recruit research participants</Heading>
117-
<Heading level={2} size="xxl" textAlign="right" weight="bold">The fastest way to recruit research participants</Heading>
112+
<Heading level={2} size={HeadingSize.MEDIUM} textAlign="left" weight="bold">The fastest way to recruit research participants</Heading>
113+
<Heading level={2} size={HeadingSize.MEDIUM} textAlign="center" weight="bold">The fastest way to recruit research participants</Heading>
114+
<Heading level={2} size={HeadingSize.MEDIUM} textAlign="right" weight="bold">The fastest way to recruit research participants</Heading>
118115
</>
119116
),
120117
};

‎src/Heading/Heading.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import classNames from 'classnames';
44

55
import * as styles from './Heading.module.css';
66

7-
export enum HeadingSizes {
7+
export enum HeadingSize {
88
LARGE = 'large',
99
MEDIUM = 'medium',
1010
SMALL = 'small',
11+
TEXT = 'text',
12+
SUBTEXT = 'subtext',
1113
};
1214

1315
export interface HeadingProps {
@@ -27,35 +29,28 @@ export interface HeadingProps {
2729
* @type {string}
2830
* @description Sizes map to the available font-sizes from the defined list of font-types.
2931
* Adjust for visual hierarchy.
30-
*
31-
* TODO: Update this to only use the HeadingSizes keys and update the types to not use string
3232
*/
33-
size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl' | 'large' | 'medium' | 'small';
33+
size: HeadingSize;
3434
textAlign?: 'left' | 'center' | 'right';
3535
weight?: 'regular' | 'medium' | 'bold';
3636
}
3737

3838
const SIZE_CLASSES = {
39-
xs: styles.xs,
40-
sm: styles.sm,
41-
md: styles.md,
42-
lg: styles.lg,
43-
xl: styles.xl,
44-
xxl: styles.xxl,
45-
xxxl: styles.xxxl,
46-
[HeadingSizes.LARGE]: styles.xxxl,
47-
[HeadingSizes.MEDIUM]: styles.xl,
48-
[HeadingSizes.SMALL]: styles.lg,
39+
[HeadingSize.LARGE]: styles.large,
40+
[HeadingSize.MEDIUM]: styles.medium,
41+
[HeadingSize.SMALL]: styles.small,
42+
[HeadingSize.TEXT]: styles.text,
43+
[HeadingSize.SUBTEXT]: styles.subtext,
4944
} as const;
5045

51-
/* TODO Update this so that 2 is xl and 3 is lg */
46+
/* TODO Remove this? */
5247
const LEVEL_CLASSES = {
53-
1: styles.xxxl,
54-
2: styles.xxl,
55-
3: styles.xl,
56-
4: styles.lg,
57-
5: styles.md,
58-
6: styles.sm,
48+
1: styles.large,
49+
2: styles.medium,
50+
3: styles.medium, // This should be small?
51+
4: styles.small,
52+
5: styles.text,
53+
6: styles.subtext,
5954
} as const;
6055

6156
const WEIGHT_CLASSES = {

‎src/MoneyInput/MoneyInput.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22

33
import FormGroup from '../FormGroup';
4-
import { Heading, HeadingSizes } from '../Heading';
4+
import { Heading, HeadingSize } from '../Heading';
55
import MoneyInput from './MoneyInput';
66

77
import mdx from './MoneyInput.mdx';
@@ -35,7 +35,7 @@ export function Default(args) {
3535
{...args}
3636
/>
3737
<br />
38-
<Heading level={1} size={HeadingSizes.SMALL}>Value: {value}</Heading>
38+
<Heading level={1} size={HeadingSize.SMALL}>Value: {value}</Heading>
3939
</FormGroup>
4040
);
4141
}
@@ -69,7 +69,7 @@ export function Step(args) {
6969
{...args}
7070
/>
7171
<br />
72-
<Heading level={1} size={HeadingSizes.SMALL}>Value: {value}</Heading>
72+
<Heading level={1} size={HeadingSize.SMALL}>Value: {value}</Heading>
7373
</FormGroup>
7474
);
7575
}
@@ -104,7 +104,7 @@ export function Prefix(args) {
104104
{...args}
105105
/>
106106
<br />
107-
<Heading level={1} size={HeadingSizes.SMALL}>Value: {value}</Heading>
107+
<Heading level={1} size={HeadingSize.SMALL}>Value: {value}</Heading>
108108
</FormGroup>
109109
);
110110
}

‎src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { FlexContainer } from './FlexContainer';
3737
import Form from './Form';
3838
import FormControlLabel from './FormControlLabel';
3939
import FormGroup from './FormGroup';
40-
import { Heading, HeadingSizes } from './Heading';
40+
import { Heading, HeadingSize } from './Heading';
4141
import IconButton from './IconButton';
4242
import IconCell from './IconCell';
4343
import Input from './Input';
@@ -147,7 +147,7 @@ export {
147147
FormControlLabel,
148148
FormGroup,
149149
Heading,
150-
HeadingSizes,
150+
HeadingSize,
151151
IconButton,
152152
IconCell,
153153
Input,

0 commit comments

Comments
 (0)