fix(section): apply text-muted color to static icon elements in header

[ggdouglas]

Summary

Section headers lose their bp6-text-muted color when icon is a JSX element because <Icon> passes elements through unchanged. Wrap element icons in a <span class="bp6-text-muted"> so the header icon color is consistent regardless of icon type.

This was discovered during research on #8065

Code

import { Section } from "@blueprintjs/core";

// dynamic
<Section icon="cog" title="Settings" />

import { Section } from "@blueprintjs/core";
import { Cog } from "@blueprintjs/icons";

// static
<Section icon={<Cog />} title="Settings" />

Screenshots

Before	After

Diff

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

Type (Select exactly one)

• Feature (Adding new functionality)
• Improvement (Improving existing functionality)
• Fix (Fixing an issue with existing functionality)
• Break (Creating a new major version by breaking public APIs)
• Deprecation (Removing functionality in a non-breaking way)
• Migration (Automatically moving data/functionality to a new system)

Description

fix(section): apply text-muted color to static icon elements in header

Check the box to generate changelog(s)

• Generate changelog entry

[blueprint-previews]

fix(section): apply text-muted color to static icon elements in header

Build artifact links for this commit: documentation | landing | table | demo | storybook

This is an automated comment from the deploy-preview CircleCI job.

[changelog-app]

✅ Successfully generated changelog entry!

Need to regenerate?

Simply interact with the changelog bot comment again to regenerate these entries.

---

📋Changelog Preview

🐛 Fixes

• fix(section): apply text-muted color to static icon elements in header (#8071)