[vvaliyev]

Description

Adds the internal Style API v2 to Action card: root and header (rendered when header or description is set).

With a top-aligned icon, the header spans the icon column; with a centered icon, the icon column stays outside the header.

A top-aligned icon with a description and no header now renders in the header row, so the content runs the full card width under the icon.

The style-docs snapshot and the VR registration of the dev page follow in one PR for all components.

Tracker section: P3d34KdbCd6o.

Related links, issue #, if available: n/a

How has this been tested?

Unit tests for every slot, dev page action-card/style-api-v2, build and lint green.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[Copilot]

🟡 Changes recommended

The internal-only styleClassNames prop lacks the required __ prefix and must be renamed while preserving the public styling entry point.

1 open issue

• Prefix the internal styleClassNames prop · New

What changed in this PR

Adds internal Style API v2 support to Action Card, allowing custom styling of its root and header without expanding the public props interface.

Changes:

• Adds root and header style slots with border, radius, and focus-ring customization.
• Adds unit tests for slot classes, conditional headers, and DOM prop filtering.
• Adds a styled demo page; style-docs snapshots and visual regression registration remain deferred.

File	Description
src/​action-card/​styles.scss	Registers style slots and applies customizable borders, corners, and focus styling.
src/​action-card/​mixins.scss	Resolves style tokens for state-dependent borders and radii.
src/​action-card/​internal.tsx	Applies internal root and header class names.
src/​action-card/​__tests__/​style-api.test.tsx	Tests slot assignment and prop handling.
pages/​action-card/​style-api-v2.scss	Defines example root and header customizations.
pages/​action-card/​style-api-v2.page.tsx	Demonstrates styling across card variants and states.

_{Review effort: Balanced}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.83%. Comparing base (ab62434) to head (b9ddab2).
⚠️ Report is 17 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5247   +/-   ##
=======================================
  Coverage   97.82%   97.83%           
=======================================
  Files        1006     1008    +2     
  Lines       32621    32585   -36     
  Branches    12117    12095   -22     
=======================================
- Hits        31913    31881   -32     
+ Misses        666      663    -3     
+ Partials       42       41    -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🟢 Approval recommended

No active review issues are reported for the ActionCard Style API v2 changes.

1 open issue

• Prefix the internal styleClassNames prop

_{Review effort: Balanced}