primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-26 02:38:32 +03:00
Code Issues Projects Releases Wiki Activity

Fix sequence of content in Subhead (#1950)

Browse Source 
* Fix sequence of content in Subhead

When a heading, description, and action are rendered in the Subhead
component, the content now follows logical order on screen readers.

* Add changeset

Co-authored-by: Jon Rohan <yes@jonrohan.codes>
This commit is contained in:
Hector Garcia 2022-02-28 21:55:17 +01:00 committed by GitHub
parent dab83198c3
commit 7c85c50056
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fuzzy-bananas-kiss.md Normal file
View File

@ -0,0 +1,5 @@
---
"@primer/css": patch
---
Fix sequence of content in Subhead

2
docs/content/components/subhead.md
View File

@ -65,8 +65,8 @@ Use all the elements together to create a Subhead with actions and a description
```html live title="Subhead with actions and description"
<div class="Subhead">
<h2 class="Subhead-heading">Subhead with actions and description</h2>
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
</div>
```

3
src/subhead/subhead.scss
View File

@ -18,6 +18,7 @@
font-size: $h2-size;
font-weight: $font-weight-normal;
flex: 1 1 auto;
order: 0;
}
// Make the text bold and red for dangerous content
@ -31,6 +32,7 @@
font-size: $body-font-size;
color: var(--color-fg-muted);
flex: 1 100%;
order: 2;
}
// Add 1 or 2 buttons to the right of the heading
@ -38,6 +40,7 @@
margin: $spacer-1 0 $spacer-1 $spacer-1;
align-self: center;
justify-content: flex-end;
order: 1;
+ .Subhead-description {
margin-top: $spacer-1;