ETT-1484: copy snippet component, add new utility classes - #154
Conversation
| opacity: 0; | ||
| visibility: hidden; | ||
| z-index: 1; | ||
| transform: translate(var(-50%, 0)) translateY(var(3px, 0)); |
There was a problem hiding this comment.
var(-50%, 0) and var(3px, 0) aren't valid. var()'s first arg has to be a custom property name. it starts with --. Browsers will drop the whole transform declaration since it's invalid, so the tooltip won't get centered or offset like you want. Did you mean to hardcode those values instead, like transform: translate(-50%, 3px)?
There was a problem hiding this comment.
Great catch! That's a copy-paste mistake... aaaaand it's also in wordpress-hathitrust where I copy-pasted this from. I'm surprised it's working as well as it is, but I suppose no transform on this still positions it where I want it.
The history of this tooltip is that it was originally supposed to be able to be placed on any side of a button (hence the var even though there are no variables) and the transform/translate would change based on the location of the tooltip, but that got cut and I failed to refactor.
Thanks for catching it! I'll remove this bit.
2 participants
ETT-1484 is part of the effort to remove alicorn from all our front-end applications. Originally, we thought moving the collection transfer process in to a firebird-style modal would be the best way to move forward, but the UX of that move was horrible, so we pivoted. During the creation of that modal, I moved the copy snippet we created for wordpress into firebird. Instead of ditching the whole thing, I decided to add it as its own component. So here it is! It's a small component with a single prop that accepts a string that can be copied to the user's clipboard. It needs some more work to be fully mobile responsive, but it passes all the accessibility testing we did back when this was first implemented in wordpress. There's a new story and a small interaction test included here, too.
Another small piece of this work was adding some utility classes for sizing of elements that we use frequently that I was annoyed didn't exist: a gap of 0.75 rem and 1.25 rem and styles for a new style of heading we'll incorporate more with the design system, "headline". I didn't think too hard about the names of these styles, but rest assured we will have a more consistent naming style for design tokens when we work on the design system.