fix(ActionList): replace deprecated --control-medium-lineBoxHeight with --base-size-20#7749
Conversation
|
…tionList.module.css Agent-Logs-Url: https://github.com/primer/react/sessions/ed5c13db-c002-40c4-8014-96b97073c148 Co-authored-by: lukasoppermann <813754+lukasoppermann@users.noreply.github.com>
|
There was a problem hiding this comment.
Pull request overview
Removes usage of a deprecated Primer control line-box-height token from ActionList styles by switching to a stable base size token, keeping the rendered size the same.
Changes:
- Replaced
.VisualWrapmin-heightfrom--control-medium-lineBoxHeightto--base-size-20. - Deleted an orphaned commented-out
line-heightrule (and its associated comment) that referenced the deprecated token.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/ActionList/ActionList.module.css | Swaps deprecated token usage to a stable base token and removes stale commented-out reference. |
Copilot's findings
- Files reviewed: 1/1 changed files
- Comments generated: 0
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/18417 |
--control-medium-lineBoxHeightis being deprecated/removed. Two references existed inActionList.module.css— one active, one already commented out.Changelog
Changed
.VisualWrap:min-height: var(--control-medium-lineBoxHeight)→min-height: var(--base-size-20)(same 20px value via stable base token)Removed
line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2))and its associated stale comment in the inline description ruleRollout strategy
Testing & Reviewing
CSS-only token swap with no visual change —
--control-medium-lineBoxHeightand--base-size-20both resolve to20px. The existingline-height: 20pxfallback directly below confirms the value.Merge checklist
Original prompt
Problem
The CSS variable
--control-medium-lineBoxHeightis used (and referenced in a comment) inpackages/react/src/ActionList/ActionList.module.css. This variable is being removed/deprecated and should no longer be used.There are two occurrences in the file:
Line 654 — inside
.ItemDescriptionWrap [data-description-variant='inline'] .Description: already commented out, referencing--control-medium-lineBoxHeightin a comment:/* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */Line 679 — inside
.VisualWrap: an active usage asmin-height:What to do
In
packages/react/src/ActionList/ActionList.module.css:Line 679 (
.VisualWrap): Replace the active usage:with:
The value of
--control-medium-lineBoxHeightis{base.size.20}(20px), which maps directly to--base-size-20. The existing/* stylelint-disable-next-line primer/typography */comment and theline-height: 20pxdirectly below confirm this is the correct value.Line 654 (
.ItemDescriptionWrap): Remove the commented-out line that references--control-medium-lineBoxHeightentirely, since it is already commented out and no longer needed:/* line-height: calc(var(--control-medium-lineBoxHeight) - var(--base-size-2)); */Delete this line (and the
/* adjust line-height for baseline alignment */comment above it if it becomes orphaned/unnecessary).No other files in this repo use
control-medium-lineBoxHeight.The following is the prior conversation context from the user's chat exploration (may be truncated):
User: Search github/github, github/github-ui and primer/react for any occurence of teh css variables:
control-xsmall-lineBoxHeight
control-small-lineBoxHeight
control-medium-lineBoxHeight
control-large-lineBoxHeight
control-xlarge-lineBoxHeight
Return a list of search links for each repo as links with the name X results found for $variableName in $repo
Assistant: Here are the search results for each CSS variable across the three repos:
control-xsmall-lineBoxHeightcontrol-small-lineBoxHeightcontrol-medium-lineBoxHeightcontrol-large-lineBoxHeightcontrol-xlarge-lineBoxHeightSummary: The only usage found is
control-medium-lineBoxHeightin primer/react — appearing twice in [ActionList.module.css](https:/...This pull request was created from Copilot chat.