[Proposal] Remove carets from all components with built in carets

[colinkeany]

This is the first step of my proposal to remove carets from all of our components. Carets are being removed from dropdowns, popovers and tooltips. This change results in the deletion of 409 lines of CSS.

Some of the core reasons for this change:

• Requires a fairly large amount of code to manage and control carets on our components and the variety of positions those components can be in. For example, the file for Popovers is made up of 188 lines of CSS. 156 of those lines of CSS are to manage the carets associated with each alignment/direction of our Popovers.
• Carets often block the elements behind them, like the button that triggered the component the caret belongs to. That can be frustrating when trying to toggle something like a dropdown.
• They don't add a ton of value to the UI, and many places in the UI they don't align correctly (centered with a button, centered with a header/avatar lockup). The misalignment can be distracting and diminishes the quality of the UI.

/cc @primer/ds-core

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-css/pbb3yltk6
✅ Preview: https://primer-css-git-remove-triangle-tips.primer.vercel.app

[colinkeany]

Removing the src/support/mixins/misc.scss file removes Primer base support for carets in dotcom. Follow up work to this PR would be to go through dotcom codebase and remove any references or modifications in the CSS to the Primer styling.

[simurai]

I'm on board with removing the carets. 👍

Removing the src/support/mixins/misc.scss file removes Primer base support for carets in dotcom.

In regards to timing.. by removing the double-caret() mixing, this PR qualifies as a "breaking change" and would need to be part of the next major release.

Or we could also make it part of #1131. And remove all the uses of double-caret() on dotcom.

[Nachito0915]

](👎🏻

[simurai]

@vdepizzol made a good point that the caret/pointer can be useful in some cases.. see Slack

but I find it can be useful when the source is ambiguous, like an when the source doesn’t have an active state (an avatar?), or when there are multiple sources one next to the other

spectrum from adobe has some considerations on this that I find very relevant

Ok, let's not rush this into 16.0.0 and we can consider it for 17.0.0 after we do some more testing on dotcom. We can also split it up.. like remove it from dropdown, but keep for tooltips.

[vdepizzol]

@colinkeany @simurai we could update our CSS to use clip-path instead of the current border triangle approach that requires the placement of two pseudo-elements, on on top of the other, to compose background and foreground carets.

I've built a quick prototype showing how it could work:
https://codepen.io/vdepizzol/pen/RwozoNJ?editors=1100

The output generates a much cleaner border, too. Here's a test from the proof of concept:

Setting new positions to the caret would be a simple as defining left/right, top/bottom css properties, followed by a clip-path depending on the position:

bottom: calc((var(--tooltip-arrow-size) / -2));
left: calc(50% - (var(--tooltip-arrow-size) / 2));
clip-path: polygon(0% 0%, 100% 100%, 0% 100%);

[jonrohan]

we could update our CSS to use clip-path instead of the current border triangle approach that requires the placement of two pseudo-elements, on on top of the other, to compose background and foreground carets.

yeah when the triangle method was added, there really wasn't a bunch of options. clip-path could be interesting if we keep it. But I'm also of the mind that the triangles make the site look really dated. I can't find an example of another site that still has that speech bubble design.

[vdepizzol]

@jonrohan oh yes, I'm all up for removing these unnecessary triangles from many places, that's also what I'm pushing with the latest overlay work :). I think there are still a couple of occasions where having these triangles make sense, though. @simurai included a link above where I described some of those. 🙇

[simurai]

One place that I can think of a the caret being helpful is for these promo popovers that don't appear on a user action, but get shown on page load.

Then it's nice to see where I have to click to test the new feature. But that could be an opt-in and the default of Popover would still be without a caret.

[github-actions]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.