Update error status icons to DiamondDismiss in MessageBar, Field, and Toast

[Copilot]

Replaces circular dismiss icons with diamond variants for error states across MessageBar, Field, and Toast components per updated design system guidance.

Changes

• MessageBar: DismissCircleFilled → DiamondDismissFilled for error intent
• Toast: DismissCircleFilled → DiamondDismissFilled for error intent
• Field: ErrorCircle12Filled → DiamondDismiss12Filled for error validation

Example

// Before
import { DismissCircleFilled } from '@fluentui/react-icons';
case 'error':
  return <DismissCircleFilled />;

// After
import { DiamondDismissFilled } from '@fluentui/react-icons';
case 'error':
  return <DiamondDismissFilled />;

MessageBar

Field

Toast

All icons sourced from existing @fluentui/react-icons package. Field component uses 12px variant to match its compact validation indicator pattern.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.flicon.io
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Change Request]: MessageBar, Field, and Toast status indicators update.</issue_title>
<issue_description>### Area

React Components (@fluentui/react-components)

Describe the feature that you would like added

React v9 components that currently use the Dismiss circle icon need to switch to the Dismiss diamond icon. The Dismiss diamond icon is already available in the Fluent icon library. This update applies to the following v9 components:

• MessageBar
• Field
• Toast

Additional context

The Security has been contributing status indicator is willing to contribute if it benefits the component owner, but they will require PR support to do so.

Have you discussed this feature with our team

Gouttierre, Leslie

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

High</issue_description>

<agent_instructions>After changes prepared, run yarn change to create change files for beachball</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Change Request]: MessageBar, Field, and Toast status indicators update. #35014

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[github-actions]

Pull request demo site: URL