Bugfix: Fix dropdown caret position in CSS styles for clean borders

[lesliecdubs]

What are you trying to accomplish?

In the PRC Dropdown component, most of the borders on the arrows are broken. South works, but the rest do not. This is an attempt to manually adjust the CSS controlling arrow position to fix the bad 1px offset.

Screenshots

Look closely, we're adjusting the small 1px border on the side of the dropdown menu's arrow.

Before	After

List the issues that this change affects.

Closes https://github.com/github/primer/issues/5370

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

CSS is fun

Anything you want to highlight for special attention from reviewers?

Check the Lookbook stories for Dropdown, click each dropdown, and ensure the arrow borders are correct. Best to check cross-browser too.

Accessibility

• No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

• Added/updated tests
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0168aa2

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

This PR includes changesets to release 1 package

Name	Type
@primer/view-components	Patch

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

[Copilot]

Pull request overview

Fixes a visual bug in the Primer::Alpha Dropdown caret “arrow” rendering by adjusting the caret pseudo-element positioning so borders align cleanly across dropdown directions.

Changes:

• Adjusted ::after caret top offset for west/east dropdown menus to correct a 1px misalignment.
• Adjusted horizontal offsets (left/right) for ::after caret positioning in NE/SW/SE directions to remove a 1px offset.

Show a summary per file

File	Description
app/components/primer/alpha/dropdown.pcss	Tweaks caret pseudo-element offsets for multiple dropdown directions to correct arrow border alignment.

Copilot's findings

Comments suppressed due to low confidence (2)

app/components/primer/alpha/dropdown.pcss:296

• Same concern as the other directional carets: left: 9px is a hard-coded adjustment that likely represents var(--base-size-8) + 1px. Using token-based calc (e.g., calc(var(--base-size-8) + var(--borderWidth-thin))) makes the intended relationship clearer and reduces reliance on raw px values.

    top: -14px;
    /* stylelint-disable-next-line primer/spacing */
    left: 9px;
  }

app/components/primer/alpha/dropdown.pcss:198

• Same as the .dropdown-menu-w caret: switching from a token to a hard-coded 11px introduces a magic number and needs a stylelint suppression. Prefer a token-based expression (e.g., calc(var(--base-size-12) - var(--borderWidth-thin))) so the offset remains tied to the design system scale.

    /* stylelint-disable-next-line primer/spacing */
    top: 11px;
    /* stylelint-disable-next-line primer/spacing */
    left: -14px;
    border-color: transparent;

• Files reviewed: 1/1 changed files
• Comments generated: 4

[lesliecdubs]

@copilot add a changeset to this PR. This is a patch. Changelog entry: "Fix Dropdown component caret position in CSS styles for clean borders"

[Copilot]

@copilot add a changeset to this PR. This is a patch. Changelog entry: "Fix Dropdown component caret position in CSS styles for clean borders"

Added in 37cea36 — .changeset/fix-dropdown-caret-borders.md with a patch bump for @primer/view-components.

[lesliecdubs]

@copilot autofix any of the stylelint failures that you can. Then look at the other failures and see if you can address them.

[Copilot]

@copilot autofix any of the stylelint failures that you can. Then look at the other failures and see if you can address them.

Fixed in 0168aa2. Changes made to dropdown.pcss:

• Removed 6 needless primer/spacing disable comments — functional spacing tokens like --control-small-paddingBlock and --stack-gap-condensed are now valid in @primer/stylelint-config@13.6.0, so those suppression comments were flagged as needless.
• Replaced deprecated box-shadow — var(--shadow-floating-legacy, var(--color-shadow-large)) → var(--shadow-floating-small), which is the correct Primer variable in @primer/primitives v11.
• Restored 5 primer/spacing disable comments — the calc() expressions mixing spacing and border tokens (e.g. calc(var(--base-size-12) - var(--borderWidth-thin))) still need suppression since --borderWidth-thin is not a spacing variable.

Verified with npx stylelint --rd -q app/components/primer/alpha/dropdown.pcss — 0 errors.

[lesliecdubs]

👋🏻 Hey @llastflowers, looks like you got pulled in as reviewer. Do you know if there's a way to get a Lookbook preview for this PR so we can manually verify these changes cross-browser? Or is there another way to test?

[llastflowers]

Looks so much better, yay! ✨

[lesliecdubs]

👋🏻 Hey @llastflowers, looks like you got pulled in as reviewer. Do you know if there's a way to get a Lookbook preview for this PR so we can manually verify these changes cross-browser? Or is there another way to test?

@jonrohan we weren't sure if there was a way to check Lookbook from a PR, can you confirm or teach us? Feel free to 👀s the code too

Nevermind, we found it! But happy to have an extra set of 👀 s on this before we run with it 🙏🏻

[llastflowers]

Looks good on Safari too!

[jonrohan]

Looks good thanks for fixing it 👍🏻