Skip to content

/css

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.

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

Tooltip component updates #404

Merged
merged 8 commits into from Nov 15, 2017
Merged

Tooltip component updates #404

merged 8 commits into from Nov 15, 2017

Conversation

@broccolini
Copy link
Member

broccolini commented Nov 15, 2017 •
edited

WIP tooltip component updates

  • Adjust margin & position to avoid separated caret to fix github/github#62486
  • Darken tooltip bg color so works better on dark backgrounds, and doesn't show overlap of caret
  • Add tooltip align-left and align-right modifiers github/design-systems#123
  • Adjust line-height and padding so tooltip size lands on whole pixels (to prevent fuzziness)
  • Add tooltip stories

Before:
screenshot 2017-10-07 12 17 54

After:
screenshot 2017-11-14 16 35 24

screenshot 2017-11-15 12 45 59
broccolini added 7 commits Nov 15, 2017
@broccolini
tweak padding and alignment:
fa17932 
- overlap caret and body to prevent detached carets
- adjust padding to land on whole pixels
- bring in line with spacing scale where possible
@broccolini
remove retina include because isn't needed
562fbd3
@broccolini
add tooltip alignment options
07a15da
@broccolini
add tooltip stories
47dee2c
@broccolini
add alignment example to docs
c0ae6d0
@broccolini
add toc, fix heading sizes, and re-org docs
73f81d7
@broccolini
remove transparency from tooltips:
Loading status checks…
18c27bd 
so that caret overlap isn't visible and so that tooltips work better
over dark as well as light backgrounds
This was referenced Nov 15, 2017
Closed
Closed
@broccolini broccolini changed the base branch from master to dev Nov 15, 2017
@jonrohan

This comment has been minimized.

Sign in to view
Copy link
Member

jonrohan commented Nov 15, 2017

LOL at the issue number #404
@jonrohan jonrohan added this to 🙆 10.1.0 To Do in 📦 Primer CSS release tracking Nov 15, 2017
@broccolini
update readme example with caret variations
Loading status checks…
f7b1ec7
@califa

This comment has been minimized.

Sign in to view
Copy link
Collaborator

califa commented Nov 15, 2017

👍 lgtm in terms of left-aligned avatar stacks + tooltipped-align-left-1.

image

Once this is merged in w/ the new avatar stacks, I'll test the right-aligned version!

🎉
@broccolini broccolini changed the base branch from dev to release-10.1.0 Nov 15, 2017
@broccolini broccolini merged commit 00f6644 into release-10.1.0 Nov 15, 2017
3 checks passed
3 checks passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
npm publish primer@10.1.0-alpha.b209ba21
Details
@broccolini broccolini deleted the brocs/tooltips_fix branch Nov 15, 2017
@broccolini broccolini moved this from 🙆 10.1.0 To Do to 💜 10.1.0 Merged in 📦 Primer CSS release tracking Nov 15, 2017
@broccolini broccolini changed the title [WIP Tooltip component updates Tooltip component updates Nov 15, 2017
@jonrohan jonrohan moved this from 💜 10.1.0 Merged to 💜 Merged in 📦 Primer CSS release tracking Nov 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
Tag: Enhancement minor release
Projects
📦 Primer CSS release tracking
  
💜 Done
Milestone
No milestone
3 participants
@broccolini @jonrohan @califa
You can’t perform that action at this time.