Skip to content
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

feat(typography): New mixin to set exact baseline height of text elements. #3083

Merged
merged 4 commits into from
Jul 25, 2018
Merged

feat(typography): New mixin to set exact baseline height of text elements. #3083

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93a22b2
feat(typography): Added text baseline mixin with a demo
abhiomkar Jul 16, 2018
6293f53
feat(typography): Fixed stylelint errors
abhiomkar Jul 16, 2018
4930296
feat(typography): Divided baseline mixin into two seperate mixins
abhiomkar Jul 23, 2018
2bcc4b8
Merge remote-tracking branch 'origin/master' into typography_text_bas…
abhiomkar Jul 25, 2018
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
15 changes: 15 additions & 0 deletions demos/typography.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@
padding: 24px;
border: 1px solid #ddd;
}

.demo-typography--heading-baseline {
margin-left: 24px;
}
</style>
</head>
<body class="mdc-typography">
Expand Down Expand Up @@ -77,6 +81,17 @@ <h6 class="mdc-typography--subtitle2">Subtitle 2</h6>
<div><span class="mdc-typography--overline">Overline text</span></div>

</section>

<h6 class="mdc-typography--headline6 demo-typography--heading-baseline">Baseline</h6>
<section class="demo-typography--section-baseline">
<h2 class="demo-typography__title mdc-typography--headline6">Our Changing Planet</h2>
<h3 class="demo-typography__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
<div class="demo-typography__body mdc-typography--body2">Visit ten places on our planet that are undergoing the biggest changes today.</div>

<line class="demo-typography-line-1">+34px</line>
<line class="demo-typography-line-2">+22px</line>
<line class="demo-typography-line-3">+28px</line>
</section>
</main>
</body>
</html>
53 changes: 53 additions & 0 deletions demos/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,56 @@
//

@import "./common";
@import "../packages/mdc-typography/mixins";

$ruler-color: #FD2549;

.demo-typography--section-baseline {
position: relative;
margin: 24px;
padding: 0 24px 24px 24px;
border: 1px solid #ddd;
max-width: 350px;
}

.demo-typography__title {
@include mdc-typography-baseline-top(34px);
@include mdc-typography-baseline-bottom(22px);
}

.demo-typography__subtitle {
@include mdc-typography-baseline-top(22px);
@include mdc-typography-baseline-bottom(28px);

@include mdc-theme-prop(color, text-secondary-on-background);
}

.demo-typography__body {
@include mdc-typography-baseline-top(28px);
@include mdc-theme-prop(color, text-secondary-on-background);
}

.demo-typography-line-1,
.demo-typography-line-2,
.demo-typography-line-3 {
position: absolute;
border-top: 1px solid $ruler-color;
width: 100%;
left: 0;
right: 0;
color: $ruler-color;
font-size: 10px;
text-align: right;
}

.demo-typography-line-1 {
top: 34px;
}

.demo-typography-line-2 {
top: calc(34px + 22px);
}

.demo-typography-line-3 {
top: calc(34px + 22px + 28px);
}
2 changes: 2 additions & 0 deletions packages/mdc-typography/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,8 @@ Mixin | Description
`mdc-typography-base` | Sets the font to Roboto
`mdc-typography($style)` | Applies one of the typography styles, including setting the font to Roboto
`mdc-typography-overflow-ellipsis` | Truncates overflow text to one line with an ellipsis
`mdc-typography-baseline-top($distance)` | Sets the baseline height of a text element from top.
`mdc-typography-baseline-bottom($distance)` | Sets the distance from text baseline to bottom. This mixin should be combined with `mdc-typography-baseline-top` when setting baseline distance to following text element.

> **A note about `mdc-typography-overflow-ellipsis`**, `mdc-typography-overflow-ellipsis` should only be used if the element is `display: block` or `display: inline-block`.

Expand Down
25 changes: 25 additions & 0 deletions packages/mdc-typography/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,28 @@
white-space: nowrap;
overflow: hidden;
}

@mixin mdc-typography-baseline-top($distance) {
margin-top: 0;
line-height: normal;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think setting line-height to normal will become unnecessary once we remove line-height from typography scale.

But for now I think it is okay.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

I would keep this for now. Secondary text in list and hint text on text field still has line-heights.


&::before {
@include mdc-typography-baseline-strut_($distance, 0);
}
}

@mixin mdc-typography-baseline-bottom($distance) {
margin-bottom: -1 * $distance;

&::after {
@include mdc-typography-baseline-strut_($distance, -1 * $distance);
}
}

@mixin mdc-typography-baseline-strut_($distance, $vertical-align) {
display: inline-block;
width: 0;
height: $distance;
content: "";
vertical-align: $vertical-align;
}