fix(docgen-sidebar): adjust fixed accordion items

[pyaromchyk-stack]

Adjusting tags to have consistent look in according in docgen side pannel, as a request from design team. Had to do padding overwrite as well as text-size because designs are different for old and modernized blueprint components

Before	After

Summary by CodeRabbit

• New Features

  • Added a toggleable "preview modernization" option to enable enhanced DocGen sidebar styling, with a Storybook preview demonstrating the modernized look.

• Style

  • Updated tag path typography to bold and refined font sizes for improved readability.
  • Added a modernized variant with adjusted spacing and accordion padding for a cleaner, more consistent sidebar layout.

[coderabbitai]

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: 7a35409d-4f8f-488e-93df-fa80a40bb507

📥 Commits

Reviewing files that changed from the base of the PR and between 44fe866 and 2d468a6.

📒 Files selected for processing (3)

• src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss
• src/elements/content-sidebar/DocGenSidebar/TagTree.tsx
• src/elements/content-sidebar/DocGenSidebar/stories/DocGenSidebar.stories.tsx

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

• src/elements/content-sidebar/DocGenSidebar/TagTree.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• src/elements/content-sidebar/DocGenSidebar/stories/DocGenSidebar.stories.tsx
• src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss

---

Walkthrough

Updates DocGenSidebar styles and TagTree to support a previewModernization feature flag; adds a modernized tag-path modifier class, removes a global accordion selector in favor of CSS custom properties, and enables the feature in a Storybook story.

Changes

Cohort / File(s)	Summary
Styling src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss	Replaced .bcs-DocGen-tagPath padding-left with font-weight: bold and font-size; added .bcs-DocGen-tagPath--modernized; removed global .bcs-DocGen-accordion * rule and introduced CSS custom properties for .bcs-DocGen-collapsible padding.
Component (feature flag) src/elements/content-sidebar/DocGenSidebar/TagTree.tsx	Added useFeatureConfig('previewModernization'), imported classNames, and conditionally applies bcs-DocGen-tagPath--modernized when the feature is enabled.
Storybook src/elements/content-sidebar/DocGenSidebar/stories/DocGenSidebar.stories.tsx	withModernizedBlueprint story now sets args.features to include previewModernization: { enabled: true } to demonstrate the modernized UI.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix(docgen-sidebar): modernized blueprint dropdown (DOCGEN-7872) #4392 — Related edits to DocGenSidebar styling and storybook usage for the modernized blueprint flag.
• feat(preview-modernization): Update Sidebar Nav icons and tooltips #4373 — Integrates previewModernization checks across content-sidebar components, complementing the feature-flag usage here.
• fix: improve accessibility in sidebar content and tags components #4363 — Changes to TagTree rendering/structure that overlap with tag-path styling and behavior updates.

Suggested labels

ready-to-merge

Suggested reviewers

• jfox-box
• tjuanitas
• tjiang-box

Poem

🐰 I hopped through styles, bold and neat,
Tiny classes dancing on my feet,
A feature-flag wink, a modern twist,
Storybook shows the shiny gist. ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description is partially filled but does not follow the provided template structure. Instead of using the template sections, the author provided custom content explaining the changes and included before/after screenshots.	While the description provides context about design changes and visual comparisons, it does not follow the repository's template structure. Consider reorganizing the description to align with the template format for consistency.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adjusting fixed accordion items in the docgen sidebar, which matches the core styling and CSS class modifications across all three modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss (1)

52-55: Prefer setting accordion custom properties on the container, not *.

Applying these vars on every descendant is overly broad. Set them on .bcs-DocGen-collapsible so they still inherit where needed with lower selector cost and less override risk.

Suggested refactor

 .bcs-DocGen-collapsible {
     min-width: 0;
     border: none;
     width: 100%;
-
-    * {
-        --accordion-fixed-content-padding-block: 16px;
-        --accordion-fixed-content-padding-inline: 16px;
-    }
+    --accordion-fixed-content-padding-block: 16px;
+    --accordion-fixed-content-padding-inline: 16px;
 }

🤖 Prompt for AI Agents

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

In `@src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss` around lines
52 - 55, Move the CSS custom property declarations off the universal selector
and onto the component container selector to avoid over-broad application:
instead of defining --accordion-fixed-content-padding-block and
--accordion-fixed-content-padding-inline on *, set them on
.bcs-DocGen-collapsible so descendant accordion parts still inherit the values
with lower specificity and less risk of accidental overrides.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In `@src/elements/content-sidebar/DocGenSidebar/TagTree.tsx`:
- Around line 39-42: In the TagTree component (TagTree.tsx) remove interactive
semantics from the fixed leaf label by deleting tabIndex={0}, role="button", and
aria-disabled="true" on that JSX element (the leaf tag label) so it renders as
plain text; if needed, replace with a non-interactive semantic like a span with
role="text" or no role at all and ensure any event handlers/keyboard handlers
tied to that element are also removed or moved to an actual interactive control.

---

Nitpick comments:
In `@src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss`:
- Around line 52-55: Move the CSS custom property declarations off the universal
selector and onto the component container selector to avoid over-broad
application: instead of defining --accordion-fixed-content-padding-block and
--accordion-fixed-content-padding-inline on *, set them on
.bcs-DocGen-collapsible so descendant accordion parts still inherit the values
with lower specificity and less risk of accidental overrides.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a4a83c13-0633-4b52-b490-6a8ac9860a34

📥 Commits

Reviewing files that changed from the base of the PR and between b455cdf and 44fe866.

📒 Files selected for processing (3)

• src/elements/content-sidebar/DocGenSidebar/DocGenSidebar.scss
• src/elements/content-sidebar/DocGenSidebar/TagTree.tsx
• src/elements/content-sidebar/DocGenSidebar/stories/DocGenSidebar.stories.tsx

[myu-box]

LGTM. verified the style

[tjuanitas]

small comments but otherwise is good

[myu-box]

LGTM