Skip to content

DSD-1924: Heading component mobile line height #1729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jan 22, 2025
Merged

DSD-1924: Heading component mobile line height #1729

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2084516
fixed line height values for mobile styles
bigfishdesign13 Jan 17, 2025
d8ddf76
CHANGELOG entry
bigfishdesign13 Jan 17, 2025
0db280d
more CHANGELOG
bigfishdesign13 Jan 17, 2025
2bf5779
update based on feedback
bigfishdesign13 Jan 21, 2025
261ff8e
Merge branch 'development' into DSD-1924/heading-line-height
bigfishdesign13 Jan 21, 2025
1b8fb55
Merge branch 'development' into DSD-1924/heading-line-height
bigfishdesign13 Jan 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad

## Prerelease

### Updates

- Updates the `Heading` component to add `line-height` styles for mobile.

## 3.5.2 (January 16, 2025)

### Adds
Expand Down
8 changes: 4 additions & 4 deletions src/components/Heading/Heading.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import { changelogData } from "./headingChangelogData";

# Heading

| Component Version | DS Version |
| ----------------- | ---------- |
| Added | `0.0.4` |
| Latest | `3.4.2` |
| Component Version | DS Version |
| ----------------- | ------------ |
| Added | `0.0.4` |
| Latest | `Prerelease` |

## Table of Contents

Expand Down
7 changes: 7 additions & 0 deletions src/components/Heading/headingChangelogData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@
import { ChangelogData } from "../../utils/ComponentChangelogTable";

export const changelogData: ChangelogData[] = [
{
date: "Prerelease",
version: "Prerelease",
type: "Update",
affects: ["Styles"],
notes: ["Adds `line-height` styles for mobile."],
},
{
date: "2024-11-07",
version: "3.4.2",
Expand Down
18 changes: 9 additions & 9 deletions src/theme/components/heading.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const headings = {
},
fontWeight: "heading.display1",
letterSpacing: "0.0625rem",
lineHeight: "1.10",
lineHeight: { base: "1.15", md: "1.10" },
width: "auto",
a: { textUnderlineOffset: "7px" },
},
Expand All @@ -84,7 +84,7 @@ export const headings = {
},
fontWeight: "heading.heading1",
letterSpacing: "0.0625rem",
lineHeight: "1.15",
lineHeight: { base: "1.20", md: "1.15" },
width: "auto",
a: { textUnderlineOffset: "6px" },
},
Expand All @@ -97,7 +97,7 @@ export const headings = {
},
fontWeight: "heading.heading2",
letterSpacing: "0.0625rem",
lineHeight: "1.20",
lineHeight: { base: "1.25", md: "1.20" },
width: "auto",
a: { textUnderlineOffset: "5px" },
},
Expand All @@ -110,7 +110,7 @@ export const headings = {
},
fontWeight: "heading.heading3",
letterSpacing: "0",
lineHeight: "1.25",
lineHeight: { base: "1.30", md: "1.25" },
width: "auto",
a: { textUnderlineOffset: "4px" },
},
Expand All @@ -123,7 +123,7 @@ export const headings = {
},
fontWeight: "heading.heading4",
letterSpacing: "0",
lineHeight: "1.30",
lineHeight: { base: "1.35", md: "1.30" },
width: "auto",
a: { textUnderlineOffset: "3px" },
},
Expand All @@ -136,7 +136,7 @@ export const headings = {
},
fontWeight: "heading.heading5",
letterSpacing: "0",
lineHeight: "1.35",
lineHeight: { base: "1.40", md: "1.35" },
width: "auto",
},
}),
Expand All @@ -148,7 +148,7 @@ export const headings = {
},
fontWeight: "heading.heading6",
letterSpacing: "0",
lineHeight: "1.40",
lineHeight: { base: "1.45", md: "1.40" },
width: "auto",
},
}),
Expand All @@ -160,7 +160,7 @@ export const headings = {
},
fontWeight: "heading.heading7",
letterSpacing: "0",
lineHeight: "1.45",
lineHeight: { base: "1.50", md: "1.45" },
width: "auto",
},
}),
Expand All @@ -172,7 +172,7 @@ export const headings = {
},
fontWeight: "heading.heading8",
letterSpacing: "0",
lineHeight: "1.50",
lineHeight: { base: "1.50", md: "1.50" }, // This value is intensionally the same for mobile and desktop.
Copy link
Member

Choose a reason for hiding this comment

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

You should be able to just set this to lineHeight: "1.50" and it should be set for both mobile and the medium breakpoint.

As an aside, is 1.50 not the same as 1.5?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Right. I will simplify and then update my comment to explain why this one is not setup to be responsive like the others.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Also, can you share documentation about the difference of 1.50 and 1.5 for line-height?

Copy link
Member

Choose a reason for hiding this comment

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

I don't know if it's true that those two values 1.50 and 1.5 are not the same so I was asking, but I can look for resources.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Sorry, I read that as a statement and not as a question. Yes, 1.50 and 1.5 are numerically the same. However, the designer in me opted to use the same format as those that do require two decimal places. Symmetry. Consistency. All that.

width: "auto",
},
}),
Expand Down
Loading