Adding Typography components for Headings/Subheadings #16673
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
started the job as gitpod-build-bmh-response-updates.1 because the annotations in the pull request description changed |
selfcontained
changed the title
selfcontained
commented
Mar 4, 2023
| @@ -50,6 +50,9 @@ module.exports = { | |||
| // TODO(andreafalzetti): remove custom ide-modal class once we implement https://github.com/gitpod-io/gitpod/issues/13116 | |||
| 51.5: "51.5rem", | |||
| }, | |||
| lineHeight: { | |||
There was a problem hiding this comment.
Adding this allows us to use a leading-64 class on our h1 so that it has the right line-height.
svenefftinge
reviewed
Mar 6, 2023
components/dashboard/src/Login.tsx
Outdated
| @@ -138,7 +139,7 @@ export function Login() { | |||
|
|
|||
| return ( | |||
| <div id="login-container" className="z-50 flex w-screen h-screen"> | |||
| {showWelcome ? ( | |||
| {!showWelcome ? ( | |||
There was a problem hiding this comment.
left over from debugging?
There was a problem hiding this comment.
oh wow, yah. Thanks for catching this 🙇
|
/werft run 👍 started the job as gitpod-build-bmh-response-updates.2 |
svenefftinge
approved these changes
Mar 6, 2023
selfcontained
force-pushed
the
bmh/response-updates
branch
from
59b8053 to
b2fe9b9
Compare
|
/unhold |
roboquat
added
deployed: webapp
gtsiolis
added a commit
that referenced
this pull request
Apr 3, 2023
Minor spacing change to the delete account button under `/account`. Seems like a small side effect from the typography components added in #16673. https://github.com/gitpod-io/gitpod/blob/2d4f94634ce3178b224e62ac582dc005fc636f5a/components/dashboard/src/user-settings/Account.tsx#L93-L97 Cc @easyCZ because [relevant discussion](https://gitpod.slack.com/archives/C02EN94AEPL/p1680514715896819) (internal) Cc @selfcontained because #16673
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Introducing a set of typography components to normalize how we render Headings and Subheadings. This also aims to fix many places where we've used
<h2>tags instead of a normal<p>tag, and update most of our uses of<h3>tags to be an<h2>. Many uses of heading tags aren't correctly handling dark mode, so this also addresses that. Lastly, having components for typography related elements allows us to standardize any variations we might want to offer, such as slight color or tracking variations.I've approached this by creating the following components.
<Heading1><Heading2><Heading3><Subheading>I didn't replace all of the existing uses of plain html heading elements (
<h1|2|3|4>), but tried to get most of the ones that were easy to test. Eventually we can refactor remaining tags to use the components as well. Then we can decide if we want to just remove our global styles for headings in theindex.cssfile.How to test
Most of the changes are found in User and Project settings. Clicking around to the various pages and ensuring headings and subheadings look correct should be a sufficient test.
Release Notes
Documentation
Build Options:
Experimental feature to run the build with GitHub Actions (and not in Werft).
leeway-target=components:all
Run Leeway with
--dont-testPublish Options
Installer Options
Add desired feature flags to the end of the line above, space separated
Preview Environment Options:
If enabled this will build
install/previewIf enabled this will create the environment on GCE infra
Valid options are
all,workspace,webapp,ide,jetbrains,vscode,ssh