Skip to content

Fix headings with an anchor in a summary - #2048

Merged
jonrohan merged 3 commits into
next_majorfrom
fix-summary-heading
Apr 29, 2022
Merged

Fix headings with an anchor in a summary#2048
jonrohan merged 3 commits into
next_majorfrom
fix-summary-heading

Conversation

@simurai

@simuraisimurai commented Apr 28, 2022

Copy link
Copy Markdown
Contributor

What are you trying to accomplish?

This is a follow-up to #1949 and fixes#1949 (comment) where the .anchor overlaps the summary triangle.

BeforeAfter
Screen Shot 2022-04-28 at 16 34 25Screen Shot 2022-04-28 at 16 34 01

What approach did you choose and why?

The .anchor gets positioned with

margin-left: -20px;

But when adding a <summary> there is that expand triangle that pushes the heading to the right. So this PR increases the negative margin to -40px:

Can these changes ship as is?

  • Yes, this PR does not depend on additional changes. 🚢

@changeset-bot

changeset-botBot commented Apr 28, 2022

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 2a0107d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@primer/cssPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@simurai
simurai marked this pull request as ready for review April 28, 2022 07:59
@simurai
simurai requested a review from a team as a code ownerApril 28, 2022 07:59
@simurai
simurai requested a review from langermankApril 28, 2022 07:59
@jonrohan
jonrohan changed the base branch from main to next_majorApril 29, 2022 17:21
@jonrohan
jonrohan merged commit dc529e3 into next_majorApr 29, 2022
@jonrohan
jonrohan deleted the fix-summary-heading branch April 29, 2022 17:22
@primer-cssprimer-css mentioned this pull request Apr 29, 2022
jonrohan added a commit that referenced this pull request Apr 29, 2022
* Adding pre.json
* Delete pre.json
* Marketing: Remove unused pullquote selector (#1767)
* Remove unused pullquote style
* Create good-fireants-collect.md
* next_major protection
* On push
* Exit 1
* Update instructions
* Underline nav focus state (#1821)
* add pseudo selectors
* adjustments
* add stories, cleanup
* update mixin
* fix mixin
* lint
* add back overflow styles
* adjust focus for better overflow state, scrollsnap
* post test adjustments, move hacks to primer css
* Stylelint auto-fixes
* hover state desktop only
* document data-content hack
* Create nice-days-jog.md
* Use counter-border for LHC (#1792)
* Use counter-border for LHC
* Create orange-ties-sin.md
* Remove fallback
* Update nice-days-jog.md
Co-authored-by: langermank <langermank@github.com>
Co-authored-by: Actions Auto Build <actions@github.com>
Co-authored-by: simurai <simurai@github.com>
* Global focus styles (#1744)
* setup base focus styles
* add feature stories
* add stories for focusable things, delete outline:0
* switch back to box-shadow
* support class
* stylelint
* fix theme viewer
* switch back to outline, address feedback
* lint
* temp stashing stories here
* Create giant-bees-talk.md
* I think we got it!
* address input directly
* checkbox/radio outline offset
* lint
* change actionlist to just use focus
* merge
* Update giant-bees-talk.md
* address marketing styles
* tabnav focus fix
* reach all buttons
* attempt windows hc selector
* Stylelint auto-fixes
* fixes
* add focus style testing page
* Stylelint auto-fixes
* add href for testing
* remove position relative to fix chrome bug
* fix details scenario
* add offset to WHC
* maintain offset specificity in whc
* inset tabnav focus
* switch offset to inset
* fix actionlist focus
* lint
* better scoping, handle forms for safari
* moving specific styles from dotcom
* address autocomplete
* cleanup
* cleanup
* selected focus states
* adjust marketing focus
* use offset instead for marketing
* Stylelint auto-fixes
* fix merge
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: Actions Auto Build <actions@github.com>
* Upgrading to stylelint-config-12.4.0 (#2041)
* Upgrading to stylelint-config-12.4.0
* Create tame-clouds-shop.md
* Global focus style CSS from feature flag (#2046)
* extra CSS found from cleaning up feat flag
* lint
* Create young-trainers-yell.md
* fix mixin
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
* UnderlineNav bug fix (#2047)
* fix selector (bad merge?)
* Create ninety-bobcats-do.md
* lint
* Comment box upload focus border-radius (#2049)
* missing border-radius
* Create beige-horses-fetch.md
* lint
* you would think I would know these by now
* Fix headings with an anchor in a summary (#2048)
* Fix headings with an anchor in a summary
* Create hip-readers-press.md
* Lint
* Version Packages
Co-authored-by: Jon Rohan <yes@jonrohan.codes>
Co-authored-by: Tobias Ahlin <hello@tobiasahlin.com>
Co-authored-by: langermank <langermank@github.com>
Co-authored-by: Actions Auto Build <actions@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

@simurai@jonrohan