Toolbar rewrite: (mostly) fixed content, separate config, rich tooltips, and roadmapped tools (#3119)
* Basic implementation of rich tooltips * Break out config to its own file, add a bunch of items * Better lower right control tooltip sizing * Add a bunch of sketch tools to the config * Fix hotkey collisions and UX polish * Get tests working again * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Re-run CI * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * We updated how the sidebar buttons' test IDs are generated, fix it post-merge * fmt * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Re-run CI * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Re-run CI * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Re-run CI --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
GitHub
@ -1,16 +1,11 @@
|
||||
/* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */
|
||||
|
||||
.tooltip {
|
||||
.tooltipWrapper {
|
||||
/* Used to power spacing and layout for RTL languages */
|
||||
--isRTL: -1;
|
||||
|
||||
/* internal CSS vars */
|
||||
--_delay: 200ms;
|
||||
--_triangle-width: 8px;
|
||||
--_triangle-height: 12px;
|
||||
--_p-inline-arrow-alignment: calc(
|
||||
50% + calc(var(--isRTL) * var(--_triangle-width) / 2)
|
||||
);
|
||||
--_p-block: 4px;
|
||||
--_bg: var(--chalkboard-10);
|
||||
--_shadow-alpha: 8%;
|
||||
@ -18,26 +13,21 @@
|
||||
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
/* The parts that will be transitioned */
|
||||
opacity: 0;
|
||||
transform: translate(var(--_x, 0), var(--_y, 0));
|
||||
transition: transform 0.15s ease-out, opacity 0.11s ease-out;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
.tooltip {
|
||||
@apply relative;
|
||||
inline-size: max-content;
|
||||
max-inline-size: 25ch;
|
||||
text-align: start;
|
||||
font-family: var(--mono-font-family);
|
||||
text-transform: none;
|
||||
font-size: 0.9rem;
|
||||
font-weight: normal;
|
||||
line-height: initial;
|
||||
letter-spacing: 0;
|
||||
padding: var(--_p-block) calc(2 * var(--_p-block));
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
background: var(--_bg);
|
||||
@apply text-chalkboard-110;
|
||||
will-change: filter;
|
||||
@ -57,26 +47,28 @@
|
||||
}
|
||||
|
||||
/* :has and :is are pretty fresh CSS pseudo-selectors, may not see full support */
|
||||
:has(> .tooltip) {
|
||||
:has(> .tooltipWrapper) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:is(:hover, :active) > .tooltip {
|
||||
:is(:hover, :active) > .tooltipWrapper {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition-delay: var(--_delay);
|
||||
}
|
||||
|
||||
:is(:focus-visible) > .tooltip.withFocus {
|
||||
:is(:focus-visible) > .tooltipWrapper.withFocus {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip:focus-visible {
|
||||
*:focus-visible .tooltipWrapper {
|
||||
--_delay: 0 !important;
|
||||
}
|
||||
|
||||
/* prepend some prose for screen readers only */
|
||||
.tooltip::before {
|
||||
content: '; Has tooltip: ';
|
||||
.tooltip::before,
|
||||
.tooltip::after {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
@ -87,20 +79,19 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
content: '; Has tooltip: ';
|
||||
}
|
||||
|
||||
/* Sometimes there's no visible label,
|
||||
* so we'll use the tooltip as the label
|
||||
*/
|
||||
.tooltip:only-child::before {
|
||||
content: 'Tooltip:';
|
||||
content: '';
|
||||
}
|
||||
|
||||
.caret {
|
||||
width: 8px;
|
||||
height: var(--_triangle-height);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
transform-origin: center center;
|
||||
color: var(--_bg);
|
||||
.tooltip:only-child::after {
|
||||
content: ' (tooltip)';
|
||||
}
|
||||
|
||||
.top,
|
||||
@ -108,129 +99,80 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tooltip.top {
|
||||
.tooltipWrapper.top {
|
||||
inset-inline-start: 50%;
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
inset-block-end: 100%;
|
||||
--_x: calc(50% * var(--isRTL));
|
||||
}
|
||||
|
||||
.top .caret {
|
||||
inset-block-start: calc(100% - 1px);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.tooltip.top-right {
|
||||
inset-inline-end: var(--_p-inline-arrow-alignment);
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
/* The corner caret SVG is bottom-right oriented by default */
|
||||
.top-right .caret {
|
||||
inset-block-start: calc(100% - 1px);
|
||||
.tooltipWrapper.top-right {
|
||||
inset-block-end: 100%;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.tooltip.right {
|
||||
inset-inline-start: calc(100% + var(--_triangle-height));
|
||||
.tooltipWrapper.right {
|
||||
inset-inline-start: 100%;
|
||||
inset-block-end: 50%;
|
||||
--_y: 50%;
|
||||
}
|
||||
|
||||
.right .caret {
|
||||
inset-inline-end: calc(100% - 1px);
|
||||
inset-block-start: 50%;
|
||||
transform: translateY(-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.tooltip.bottom-right {
|
||||
inset-inline-end: var(--_p-inline-arrow-alignment);
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
.bottom-right .caret {
|
||||
inset-block-end: calc(100% - 1px);
|
||||
.tooltipWrapper.bottom-right {
|
||||
inset-block-start: 100%;
|
||||
inset-inline-end: 0;
|
||||
transform: rotate(180deg) scaleX(-1);
|
||||
}
|
||||
|
||||
.tooltip.bottom {
|
||||
.tooltipWrapper.bottom {
|
||||
--_x: calc(50% * var(--isRTL));
|
||||
inset-inline-start: 50%;
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
inset-block-start: 100%;
|
||||
}
|
||||
|
||||
.bottom .caret {
|
||||
inset-block-end: calc(100% - 1px);
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%) scaleY(-1);
|
||||
.tooltipWrapper.bottom-left {
|
||||
inset-block-start: 100%;
|
||||
}
|
||||
|
||||
.tooltip.bottom-left {
|
||||
inset-inline-start: var(--_p-inline-arrow-alignment);
|
||||
inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
.bottom-left .caret {
|
||||
inset-block-end: calc(100% - 1px);
|
||||
inset-inline-start: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.tooltip.left {
|
||||
inset-inline-end: calc(
|
||||
100% + var(--_p-inline-arrow-alignment) + var(--_triangle-height)
|
||||
);
|
||||
.tooltipWrapper.left {
|
||||
inset-inline-end: 100%;
|
||||
inset-block-end: 50%;
|
||||
--_y: 50%;
|
||||
}
|
||||
|
||||
.left .caret {
|
||||
inset-inline-start: calc(100% - 1px);
|
||||
inset-block-start: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
}
|
||||
|
||||
.tooltip.top-left {
|
||||
inset-inline-start: var(--_p-inline-arrow-alignment);
|
||||
inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-height));
|
||||
}
|
||||
|
||||
.top-left .caret {
|
||||
inset-block-start: calc(100% - 1px);
|
||||
inset-inline-start: 0;
|
||||
transform: rotate(-90deg);
|
||||
.tooltipWrapper.top-left {
|
||||
inset-block-end: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* TOP || BLOCK-START */
|
||||
:has(> :is(.tooltip.top, .tooltip.top-left, .tooltip.top-right)):not(
|
||||
:hover,
|
||||
:active
|
||||
)
|
||||
.tooltip {
|
||||
:has(
|
||||
> :is(
|
||||
.tooltipWrapper.top,
|
||||
.tooltipWrapper.top-left,
|
||||
.tooltipWrapper.top-right
|
||||
)
|
||||
):not(:hover, :active)
|
||||
.tooltipWrapper {
|
||||
--_y: 3px;
|
||||
}
|
||||
|
||||
/* RIGHT || INLINE-END */
|
||||
:has(> :is(.tooltip.right)):not(:hover, :active) .tooltip {
|
||||
:has(> :is(.tooltipWrapper.right)):not(:hover, :active) .tooltipWrapper {
|
||||
--_x: calc(var(--isRTL) * -3px * -1);
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
:has(
|
||||
> :is(
|
||||
.tooltip.bottom,
|
||||
.tooltip.tooltip.bottom-left,
|
||||
.tooltip.bottom-right
|
||||
.tooltipWrapper.bottom,
|
||||
.tooltipWrapper.bottom-left,
|
||||
.tooltipWrapper.bottom-right
|
||||
)
|
||||
):not(:hover, :active)
|
||||
.tooltip {
|
||||
.tooltipWrapper {
|
||||
--_y: -3px;
|
||||
}
|
||||
|
||||
/* BOTTOM || BLOCK-END */
|
||||
:has(> :is(.tooltip.left)):not(:hover, :active) .tooltip {
|
||||
:has(> :is(.tooltipWrapper.left)):not(:hover, :active) .tooltipWrapper {
|
||||
--_x: calc(var(--isRTL) * 3px * -1);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user