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

fix(tile): tile headline size #1692

Merged
merged 7 commits into from
Jul 11, 2024
Merged

fix(tile): tile headline size #1692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b34e414
fix(tile) headline, title, body and footer font-sizes
markcaron Jul 3, 2024
f3528ad
fix(tile): setting headline to heading-xs token
markcaron Jul 3, 2024
e2e42b1
chore(tile): adding changeset
markcaron Jul 9, 2024
13f7fe1
Merge branch 'staging/charmander' into bug/tile-headline-size
bennypowers Jul 10, 2024
53cf523
Merge branch 'staging/charmander' into bug/tile-headline-size
bennypowers Jul 10, 2024
aa02acb
fix(tile): slot attributes in color demo
markcaron Jul 10, 2024
a1795ab
fix(tile) headline weight
markcaron Jul 10, 2024
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
5 changes: 5 additions & 0 deletions .changeset/tiny-melons-help.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rhds/elements": patch
---

Fixed the headline, title, body text, and footer font-sizes to match the Tile specs for both the default and compact variants
6 changes: 3 additions & 3 deletions elements/rh-tile/demo/color-context.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h2 slot="headline"><a href="#top">Link</a></h2>
<h2>Desaturated heading</h2>

<rh-tile desaturated>
<img slot ="icon" src="logo-red-hat.svg" alt="Red Hat">
<img slot="icon" src="logo-red-hat.svg" alt="Red Hat">
<div slot="title">Title</div>
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Expand All @@ -61,14 +61,14 @@ <h2 slot="headline"><a href="#top">Link</a></h2>
</rh-tile>

<rh-tile compact>
<img slot ="icon" src="logo-red-hat.svg" alt="Red Hat">
<img slot="icon" src="logo-red-hat.svg" alt="Red Hat">
<h2 slot="headline"><a href="#top">Link</a></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div slot="footer">Suspendisse eu turpis elementum</div>
</rh-tile>

<rh-tile compact>
<img slot ="icon" src="logo-red-hat.svg" alt="Red Hat">
<img slot="icon" src="logo-red-hat.svg" alt="Red Hat">
<h2 slot="headline"><a href="#top">Link</a></h2>
</rh-tile>

Expand Down
17 changes: 12 additions & 5 deletions elements/rh-tile/rh-tile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,7 @@ svg {

#body {
margin: 0 0 var(--_margin);
font-size: var(--rh-font-size-body-text-md, 1rem);
}

::slotted(*) {
Expand Down Expand Up @@ -237,6 +238,13 @@ svg {

::slotted([slot="title"]) {
text-transform: uppercase;
font-size: var(--rh-font-size-body-text-md, 1rem) !important;
}

::slotted([slot="headline"]) {
margin-block-end: var(--_margin) !important;
font-size: var(--rh-font-size-heading-xs, 1.25rem) !important;
font-weight: var(--rh-font-weight-body-text-medium, 500) !important;
}

#outer:is(.compact, .checkable) ::slotted([slot="icon"]) {
Expand All @@ -245,18 +253,17 @@ svg {
max-height: var(--rh-size-icon-03, 32px);
}

#outer:is(.compact, .checkable) ::slotted([slot="headline"]),
#body {
font-size: var(--rh-font-size-body-text-lg, 1.125rem);
#outer:is(.compact, .checkable) ::slotted([slot="headline"]) {
font-size: var(--rh-font-size-body-text-lg, 1.125rem) !important;
}

#outer:is(.compact, .checkable) #body,
::slotted([slot="footer"]) {
font-size: var(--rh-font-size-body-text-sm, 0.875rem);
font-size: var(--rh-font-size-body-text-sm, 0.875rem) !important;
}

#outer:is(.compact, .checkable) ::slotted([slot="footer"]) {
font-size: var(--rh-font-size-body-text-xs, 0.75rem);
font-size: var(--rh-font-size-body-text-xs, 0.75rem) !important;
}

*:is(#image, #tile, #headline, #body, #footer) {
Expand Down
Loading