Code: Fix inline code blocks inside links removing link affordance by yatishgoel · Pull Request #33903 · storybookjs/storybook

yatishgoel · 2026-02-22T13:11:07Z

What I did

Fixed a CSS specificity issue where inline code blocks (<code>) inside links (<a>) lost all link styling (color, underline),
making them appear unclickable.

Added an '& code' CSS rule to both the A styled component and the DocumentWrapper component so that code inside links inherits
the link color, displays an underline, and uses pseudo-elements for spacing (instead of padding, which breaks the underline).

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Run Storybook locally
Create a story with a description containing [`inline-code`](https://example.com)
Verify the inline code inside the link is underlined and uses the link color (blue)
Verify regular inline code (not inside links) is unaffected
Verify regular links (without code) are unaffected

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

Style
- Inline code inside links now inherits the link color, receives consistent underline thickness with reduced side padding, and uses subtle non‑breaking‑space spacing for improved inline appearance.
Documentation
- Added demo examples and storybook content showing inline code within links and mixed inline-code scenarios for visual reference.

Enhance the appearance of code elements within links by applying underline and spacing styles. This change ensures better visibility and consistency across typography components.

dosubot · 2026-02-22T13:11:16Z

Related Documentation

Checked 0 published document(s) in 1 knowledge base(s). No updates required.

^{How did I do? Any feedback?}

coderabbitai · 2026-02-22T13:12:59Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 344986db-33b4-4e68-9cae-8ea2bf7a0b19

📥 Commits

Reviewing files that changed from the base of the PR and between 34a9f1c and df5e58c.

📒 Files selected for processing (1)

code/core/src/components/components/typography/DocumentWrapper.stories.tsx

✅ Files skipped from review due to trivial changes (1)

code/core/src/components/components/typography/DocumentWrapper.stories.tsx

📝 Walkthrough

Walkthrough

Adds nested styling so inline <code> inside anchor elements inherits link color, receives the link underline (matching thickness), removes horizontal code padding, and gains small non‑breaking spaces before/after; also adds Storybook/Markdown examples demonstrating inline code within links.

Changes

Cohort / File(s)	Summary
Typography: DocumentWrapper & Link element `code/core/src/components/components/typography/DocumentWrapper.tsx`, `code/core/src/components/components/typography/elements/A.tsx`	Added an `& code` rule for `code` inside anchors: `color: inherit`, apply `text-decoration: underline` with link thickness, remove left/right padding, and add `::before`/`::after` non‑breaking spaces (small font-size) to adjust spacing/underline.
Stories / Examples `code/addons/docs/src/blocks/blocks/Markdown.stories.tsx`, `code/core/src/components/components/typography/DocumentWrapper.stories.tsx`	Appended multiple Markdown/Storybook examples showcasing inline `<code>` inside links and mixed content for visual verification.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

A11y: Underline MDX links for WCAG SC 1.4.1 compliance #33139 — Modifies anchor underline/decoration behavior; overlaps with link styling updates present here.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

🧹 Nitpick comments (1)

code/core/src/components/components/typography/DocumentWrapper.tsx (1)

69-82: Consider extracting shared link-code styles.

The & code styling block is now duplicated identically in both A.tsx and DocumentWrapper.tsx. You could extract this to a shared constant (e.g., in lib/common.ts) for DRY consistency:

export const linkCodeStyles = {
  color: 'inherit',
  textDecoration: 'underline',
  textDecorationThickness: '1px',
  padding: 0,
  '&::before': {
    content: '"\\00a0"',
    fontSize: '0.5em',
  },
  '&::after': {
    content: '"\\00a0"',
    fontSize: '0.5em',
  },
};

This is optional—the current duplication is minimal and clear.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@code/core/src/components/components/typography/DocumentWrapper.tsx` around
lines 69 - 82, Extract the duplicated '& code' style object into a shared
exported constant (e.g., linkCodeStyles) and replace the inline objects in
DocumentWrapper (component DocumentWrapper) and A (component A) with a reference
to that constant; ensure the constant exports the same properties (color,
textDecoration, textDecorationThickness, padding, '&::before', '&::after') and
is imported where used so both components consume the single source of truth.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@code/core/src/components/components/typography/DocumentWrapper.tsx`:
- Around line 69-82: Extract the duplicated '& code' style object into a shared
exported constant (e.g., linkCodeStyles) and replace the inline objects in
DocumentWrapper (component DocumentWrapper) and A (component A) with a reference
to that constant; ensure the constant exports the same properties (color,
textDecoration, textDecorationThickness, padding, '&::before', '&::after') and
is imported where used so both components consume the single source of truth.

LuLaValva · 2026-02-26T00:08:39Z

Thanks for trying to fix my issue @yatishgoel! I haven't figured out how to test locally, but I'm fairly certain that setting padding: 0 like this will cause issues. When I was playing with this in browser dev tools I only removed horizontal padding. Please make sure you look at these things yourself before putting up a PR

storybook-app-bot · 2026-03-02T13:48:42Z

Package Benchmarks

^{Commit: df5e58c, ran on 23 March 2026 at 20:51:44 UTC}

The following packages have significant changes to their size or dependencies:

`@storybook/cli`

	Before	After	Difference
Dependency count	184	184	0
Self size	780 KB	780 KB	🚨 +84 B 🚨
Dependency size	67.67 MB	67.68 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

`@storybook/codemod`

	Before	After	Difference
Dependency count	177	177	0
Self size	32 KB	32 KB	🚨 +36 B 🚨
Dependency size	66.19 MB	66.20 MB	🚨 +10 KB 🚨
Bundle Size Analyzer	Link	Link

Sidnioulz

Thanks for the PR @yatishgoel! 🙇

Could you please edit stories as mentioned under, so that we have UI tests and non-regression tests for the change you made? I'll then send this to our designer for a design review.

Thanks

Added examples of inline code within links to the Markdown and DocumentWrapper stories for better demonstration of typography features. Adjusted padding styles in DocumentWrapper and A components for improved layout consistency.

yatishgoel · 2026-03-02T18:43:25Z

Thanks for the PR @yatishgoel! 🙇

Could you please edit stories as mentioned under, so that we have UI tests and non-regression tests for the change you made? I'll then send this to our designer for a design review.

Thanks

Thanks for the feedback @Sidnioulz! I've made the following changes:

Added code inside a examples to DocumentWrapper.stories.tsx and Markdown.stories.tsx
Fixed padding: 0 → only zeroing horizontal padding (paddingLeft: 0, paddingRight: 0) as @LuLaValva pointed out

DocumentWrapper story:

Markdown story:

Sidnioulz · 2026-03-03T17:00:01Z

Thanks @yatishgoel for adding the stories!

We have to get #33139 merged before because it's gonna break your PR. I'll put it in my backlog and get back to you afterward with instructions. The stories will help us get a UI outcome to reflect on once we rebase your PR branch :)

Talk to you soon!

Sidnioulz · 2026-03-10T08:34:49Z

@yatishgoel we've merged the other PR that affected link styles, could you please have a look at the conflicts? Also, ideally we'd want to ensure the same text decoration thickness is used as in the other PR (as that was reviewed by our design team). Thanks!

yatishgoel · 2026-03-21T07:23:54Z

@yatishgoel we've merged the other PR that affected link styles, could you please have a look at the conflicts? Also, ideally we'd want to ensure the same text decoration thickness is used as in the other PR (as that was reviewed by our design team). Thanks!

@Sidnioulz can you please confirm whether the & code underline should also be 0.03125rem or if a slightly thicker underline (like the original 1px) would be preferred for code elements specifically, since code text is styled differently and a thicker underline might improve visibility there

Sidnioulz · 2026-03-23T20:30:24Z

@yatishgoel we've merged the other PR that affected link styles, could you please have a look at the conflicts? Also, ideally we'd want to ensure the same text decoration thickness is used as in the other PR (as that was reviewed by our design team). Thanks!

@Sidnioulz can you please confirm whether the & code underline should also be 0.03125rem or if a slightly thicker underline (like the original 1px) would be preferred for code elements specifically, since code text is styled differently and a thicker underline might improve visibility there

Hey there! Yes, I believe we want to go for the same underline.

Sidnioulz

Thanks for bearing with us and seeing this to completion, @yatishgoel 🙏 Great work.

yatishgoel · 2026-03-23T21:08:03Z

Thanks for bearing with us and seeing this to completion, @yatishgoel 🙏 Great work.

Thank you for the guidance and patience throughout, @Sidnioulz ! Happy to contribute 🙌

Add code styling to links in DocumentWrapper and A components

5f8409c

Enhance the appearance of code elements within links by applying underline and spacing styles. This change ensures better visibility and consistency across typography components.

coderabbitai Bot reviewed Feb 22, 2026

View reviewed changes

Merge branch 'next' into fix/inline-code-link-affordance

8cc6911

valentinpalkovic added this to Core Team Projects Feb 23, 2026

Sidnioulz mentioned this pull request Feb 26, 2026

[Bug]: Inline code blocks inside links remove link affordance #33901

Closed

valentinpalkovic assigned Sidnioulz Mar 2, 2026

valentinpalkovic changed the title ~~Bug: Fix inline code blocks inside links removing link affordance~~ Code: Fix inline code blocks inside links removing link affordance Mar 2, 2026

valentinpalkovic added bug ci:normal Run our default set of CI jobs (choose this for most PRs). labels Mar 2, 2026

Sidnioulz requested changes Mar 2, 2026

View reviewed changes

Comment thread code/core/src/components/components/typography/elements/A.tsx

Comment thread code/core/src/components/components/typography/DocumentWrapper.tsx

Merge branch 'next' into fix/inline-code-link-affordance

2537097

Sidnioulz assigned MichaelArestad Mar 3, 2026

Copilot AI mentioned this pull request Mar 3, 2026

[WIP] Fix inline code blocks inside links to show link affordance #33990

Closed

6 tasks

Sidnioulz self-requested a review March 9, 2026 10:25

Sidnioulz moved this to Blocked in Core Team Projects Mar 9, 2026

github-actions Bot added the Stale label Mar 21, 2026

yatishgoel added 2 commits March 21, 2026 12:59

Merge branch 'next' into fix/inline-code-link-affordance

8fa72d3

Fix: Update textDecorationThickness for code links in A component

34a9f1c

Sidnioulz and others added 2 commits March 23, 2026 21:30

Merge branch 'next' into fix/inline-code-link-affordance

ca5be33

Reformat files

df5e58c

Sidnioulz approved these changes Mar 23, 2026

View reviewed changes

github-actions Bot added needs triage and removed Stale labels Mar 24, 2026

Sidnioulz merged commit 33afce2 into storybookjs:next Mar 24, 2026
118 checks passed

github-project-automation Bot moved this from Blocked to Done in Core Team Projects Mar 24, 2026

github-actions Bot mentioned this pull request Mar 24, 2026

Release: Prerelease 10.4.0-alpha.4 #34278

Merged

15 tasks

Uh oh!

Uh oh!

Conversation

yatishgoel commented Feb 22, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Summary by CodeRabbit

Uh oh!

dosubot Bot commented Feb 22, 2026

Uh oh!

coderabbitai Bot commented Feb 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

LuLaValva commented Feb 26, 2026

Uh oh!

storybook-app-bot Bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Package Benchmarks

@storybook/cli

@storybook/codemod

Uh oh!

Sidnioulz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

yatishgoel commented Mar 2, 2026

Uh oh!

Sidnioulz commented Mar 3, 2026

Uh oh!

Sidnioulz commented Mar 10, 2026

Uh oh!

yatishgoel commented Mar 21, 2026

Uh oh!

Sidnioulz commented Mar 23, 2026

Uh oh!

Sidnioulz left a comment

Choose a reason for hiding this comment

Uh oh!

yatishgoel commented Mar 23, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

yatishgoel commented Feb 22, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Feb 22, 2026 •

edited

Loading

storybook-app-bot Bot commented Mar 2, 2026 •

edited

Loading

`@storybook/cli`

`@storybook/codemod`