@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

package/data/components/popover-message-popover.md

@@ -0,0 +1,683 @@
+---
+component: fd-popover
+title: Components/Message Popover
+category: Components
+selector: fd-popover
+cssFile: popover.css
+sourcePath: packages/styles/stories/Components/message-popover/message-popover.stories.js
+tags: []
+dependencies: ["bar","button","icon","link","list","message-popover","object-status","popover","scrollbar","segmented-button"]
+relatedComponents: ["bar","button","icon","link","list","message-popover","object-status","popover","scrollbar","segmented-button"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.591Z
+---
+
+# Components/Message Popover
+
+A Message Popover is used to display a summarized list of different types of messages (error, warning, success, and information messages).
+It provides a handy and systematized way to navigate and explore details for every message. It is adaptive and responsive. It renders as a dialog with a Close button in the header on phones, and as a popover on tablets and higher resolution devices.
+
+##Usage
+**When to use:**
+
+- When you want to make sure that all content is visible on any device.
+- When you want a way to centrally manage messages and show them to the user without additional work for the developer.
+
+## Usage Guidelines
+
+**When to use:**
+
+- When you want to make sure that all content is visible on any device.
+- When you want a way to centrally manage messages and show them to the user without additional work for the developer.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `bar.css`
+- `button.css`
+- `icon.css`
+- `link.css`
+- `list.css`
+- `message-popover.css`
+- `object-status.css`
+- `popover.css`
+- `scrollbar.css`
+- `segmented-button.css`
+
+## Installation
+
+```bash
+npm install fundamental-styles
+```
+
+```html
+<!-- Include theme -->
+<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
+
+<!-- Include component CSS -->
+<link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/link.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/list.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/message-popover.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/scrollbar.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/segmented-button.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-popover">
+    <div class="fd-popover__control">
+        <button aria-controls="popoverHSF3" aria-expanded="true" aria-haspopup="dialog" class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative" onclick="onPopoverClick('popoverHSF3');" role="button">
+            <i class="sap-icon--message-error" aria-label="Negative"></i>
+            <span class="fd-button__text">5</span>
+        </button>
+        <section aria-hidden="false" class="fd-popover__body fd-popover__body--no-arrow" id="popoverHSF3" aria-label="Dialog Data 1" role="dialog">
+            <header class="fd-popover__body-header">
+                <div class="fd-bar fd-bar--header fd-bar--growing">
+                    <div class="fd-bar__left">
+                        <div class="fd-bar__element">
+                            <div class="fd-segmented-button" role="group" aria-label="Group label">
+                                <button aria-label="Survey" class="fd-button fd-button--toggled" aria-pressed="true">
+                                    <span class="fd-button__text">All</span>
+                                </button>
+                                <button aria-label="Survey" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--negative">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-button__text">2</span>
+                                </button>
+                                <button aria-label="Chart" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--critical">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i>
+                                    </span>
+                                    <span class="fd-button__text">1</span>
+                                </button>
+                                <button aria-label="Pool" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--positive">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-success" aria-label="Correct"></i>
+                                    </span>
+                                    <span class="fd-button__text">1</span>
+                                </button>
+                                <button aria-label="Pool" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--neutral">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-information" aria-label="More information"></i>
+                                    </span>
+                                    <span class="fd-button__text">1</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="fd-bar__right">
+                        <button aria-label="Close" aria-controls="popoverHSF3" onclick="onPopoverClick('popoverHSF3');" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
+                    </div>
+                </div>
+            </header>
+            <div>
+                <div class="fd-message-view fd-scrollbar">
+                    <section class="fd-message-view__list" id="messageViewList">
+                        <ul class="fd-list fd-list--navigation-indication fd-list--navigation fd-list--message-view" role="list">
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a onclick="toggleClass('messageViewList', 'fd-message-view__list--hidden'); toggleClass('messageViewDetails', 'fd-message-view__details--visible');" tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--negative fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The file could not be uploaded. Title with some long text which is not fitting into the viewport of the message view container.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            Uploaded file does not meet security requirements.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--negative fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            Missing configuration objects.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            Missing master data.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--critical fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            Incorrect master data.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--positive fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-success" aria-label="Correct"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The status of the document has been changed.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            The transaction has been approved.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--neutral fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-information" aria-label="More information"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The field Location has no entry.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                        </ul>
+                    </section>
+                    <section class="fd-message-view__details" id="messageViewDetails">
+                        <span class="fd-message-view__details-title">
+                            <span class="fd-object-status fd-object-status--negative fd-message-view__icon">
+                                <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                            </span>
+                            The file could not be uploaded
+                        </span>
+                        <span class="fd-message-view__details-description">
+                            Leverage agile frameworks to provide a robust synopsis for high level overviews.
+                            Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
+                        </span>
+                        <a class="fd-link">
+                            <span class="fd-link__content">Read more</span>
+                        </a>
+                    </section>
+                </div>
+            </div>
+        </section>
+    </div>
+</div>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-active` | Active state |
+| `is-disabled` | Disabled state |
+| `is-focus` | Focus state |
+| `is-hover` | Hover state |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-popover__body`
+- `fd-popover__body--no-arrow`
+- `fd-popover__body-header`
+- `fd-popover__control`
+
+## Related Components
+
+This component works with or depends on:
+
+- `bar`
+- `button`
+- `icon`
+- `link`
+- `list`
+- `message-popover`
+- `object-status`
+- `popover`
+- `scrollbar`
+- `segmented-button`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--above`
+- `--after`
+- `--arrow`
+- `--arrow-x-end`
+- `--before`
+- `--bottom`
+- `--btp`
+- `--center`
+- `--display`
+- `--dropdown`
+- `--fdIcon_Button_Height`
+- `--fdIcon_Button_Width`
+- `--fdModal_BackgroundColor`
+- `--fdPopover_Arrow_Size`
+- `--fdPopover_Body_Border_Radius`
+
+*...and 5 more*
+
+## Examples
+
+### CozyMessagePopover
+
+```html
+<div class="fd-popover">
+    <div class="fd-popover__control">
+        <button aria-controls="popoverHSF3" aria-expanded="true" aria-haspopup="dialog" class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative" onclick="onPopoverClick('popoverHSF3');" role="button">
+            <i class="sap-icon--message-error" aria-label="Negative"></i>
+            <span class="fd-button__text">5</span>
+        </button>
+        <section aria-hidden="false" class="fd-popover__body fd-popover__body--no-arrow" id="popoverHSF3" aria-label="Dialog Data 1" role="dialog">
+            <header class="fd-popover__body-header">
+                <div class="fd-bar fd-bar--header fd-bar--growing">
+                    <div class="fd-bar__left">
+                        <div class="fd-bar__element">
+                            <div class="fd-segmented-button" role="group" aria-label="Group label">
+                                <button aria-label="Survey" class="fd-button fd-button--toggled" aria-pressed="true">
+                                    <span class="fd-button__text">All</span>
+                                </button>
+                                <button aria-label="Survey" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--negative">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-button__text">2</span>
+                                </button>
+                                <button aria-label="Chart" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--critical">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i>
+                                    </span>
+                                    <span class="fd-button__text">1</span>
+                                </button>
+                                <button aria-label="Pool" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--positive">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-success" aria-label="Correct"></i>
+                                    </span>
+                                    <span class="fd-button__text">1</span>
+                                </button>
+                                <button aria-label="Pool" class="fd-button" aria-pressed="false">
+                                    <span class="fd-object-status fd-object-status--neutral">
+                                        <i class="fd-button__icon fd-object-status__icon sap-icon--message-information" aria-label="More information"></i>
+                                    </span>
+                                    <span class="fd-button__text">1</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="fd-bar__right">
+                        <button aria-label="Close" aria-controls="popoverHSF3" onclick="onPopoverClick('popoverHSF3');" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
+                    </div>
+                </div>
+            </header>
+            <div>
+                <div class="fd-message-view fd-scrollbar">
+                    <section class="fd-message-view__list" id="messageViewList">
+                        <ul class="fd-list fd-list--navigation-indication fd-list--navigation fd-list--message-view" role="list">
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a onclick="toggleClass('messageViewList', 'fd-message-view__list--hidden'); toggleClass('messageViewDetails', 'fd-message-view__details--visible');" tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--negative fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The file could not be uploaded. Title with some long text which is not fitting into the viewport of the message view container.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            Uploaded file does not meet security requirements.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--negative fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            Missing configuration objects.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            Missing master data.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--critical fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            Incorrect master data.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--positive fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-success" aria-label="Correct"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The status of the document has been changed.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            The transaction has been approved.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--neutral fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-information" aria-label="More information"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The field Location has no entry.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                        </ul>
+                    </section>
+                    <section class="fd-message-view__details" id="messageViewDetails">
+                        <span class="fd-message-view__details-title">
+                            <span class="fd-object-status fd-object-status--negative fd-message-view__icon">
+                                <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                            </span>
+                            The file could not be uploaded
+                        </span>
+                        <span class="fd-message-view__details-description">
+                            Leverage agile frameworks to provide a robust synopsis for high level overviews.
+                            Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
+                        </span>
+                        <a class="fd-link">
+                            <span class="fd-link__content">Read more</span>
+                        </a>
+                    </section>
+                </div>
+            </div>
+        </section>
+    </div>
+</div>
+```
+
+### DetailsView
+
+```html
+<div class="fd-popover">
+    <div class="fd-popover__control">
+        <button aria-controls="popoverHSF5" aria-expanded="true" aria-haspopup="dialog" class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information" onclick="onPopoverClick('popoverHSF5');" role="button">
+            <i class="sap-icon--message-information" aria-label="Information"></i>
+            <span class="fd-button__text">5</span>
+        </button>
+        <section aria-hidden="false" class="fd-popover__body fd-popover__body--no-arrow" id="popoverHSF5" aria-label="Dialog Data 1" role="dialog">
+            <header class="fd-popover__body-header">
+                <div class="fd-bar fd-bar--header fd-bar--growing">
+                    <div class="fd-bar__left">
+                        <div class="fd-bar__element">
+                            <button aria-label="Close" aria-controls="popoverHSF5" class="fd-button fd-button--transparent"><i class="sap-icon--navigation-left-arrow"></i></button>
+                        </div>
+                    </div>
+                    <div class="fd-bar__right">
+                        <button aria-label="Close" aria-controls="popoverHSF5" onclick="onPopoverClick('popoverHSF5');" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
+                    </div>
+                </div>
+            </header>
+            <div>
+                <div class="fd-message-view fd-scrollbar">
+                    <section class="fd-message-view__list fd-message-view__list--hidden" id="messageViewListDetails">
+                        <ul class="fd-list fd-list--navigation-indication fd-list--navigation fd-list--message-view" role="list">
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a onclick="toggleClass('messageViewListDetails', 'fd-message-view__list--hidden'); toggleClass('messageViewListDetails', 'fd-message-view__details--visible');" tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--negative fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The file could not be uploaded.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            Uploaded file does not meet security requirements.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--negative fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            Missing configuration objects.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            Missing master data.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--critical fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            Incorrect master data.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--positive fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-success" aria-label="Correct"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The status of the document has been changed.
+                                        </span>
+                                        <span class="fd-list__subtitle">
+                                            The transaction has been approved.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                            <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--link">
+                                <a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
+                                    <span class="fd-object-status fd-object-status--neutral fd-list__icon">
+                                        <i class="fd-object-status__icon sap-icon--message-information" aria-label="More information"></i>
+                                    </span>
+                                    <span class="fd-list__content">
+                                        <span class="fd-list__title">
+                                            The field Location has no entry.
+                                        </span>
+                                    </span>
+                                </a>
+                            </li>
+                        </ul>
+                    </section>
+                    <section class="fd-message-view__details fd-message-view__details--visible" id="messageViewDetailsCompact">
+                        <span class="fd-message-view__details-title">
+                            <span class="fd-object-status fd-object-status--negative fd-message-view__icon">
+                                <i class="fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i>
+                            </span>
+                            The file could not be uploaded
+                        </span>
+                        <span class="fd-message-view__details-description">
+                            Leverage agile frameworks to provide a robust synopsis for high level overviews.
+                            Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.
+                        </span>
+                        <a class="fd-link">
+                            <span class="fd-link__content">Read more</span>
+                        </a>
+                    </section>
+                </div>
+            </div>
+        </section>
+    </div>
+</div>
+```
+
+### MessageTrigger
+
+```html
+<h3>(Secondary) Information/ Neutral Button</h3>
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information" role="button">
+    <i class="sap-icon--message-information" aria-label="Information"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information is-hover" role="button">
+    <i class="sap-icon--message-information" aria-label="Information"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information is-active" role="button">
+    <i class="sap-icon--message-information" aria-label="Information"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information is-active is-focus" role="button">
+    <i class="sap-icon--message-information" aria-label="Information"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information is-disabled" role="button">
+    <i class="sap-icon--message-information" aria-label="Information"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--information is-focus" role="button">
+    <i class="sap-icon--message-information" aria-label="Information"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<h3>(Primary) Negative Button</h3>
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative" role="button">
+    <i class="sap-icon--message-error" aria-label="Negative"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative is-hover" role="button">
+    <i class="sap-icon--message-error" aria-label="Negative"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative is-active" role="button">
+    <i class="sap-icon--message-error" aria-label="Negative"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative is-active is-focus" role="button">
+    <i class="sap-icon--message-error" aria-label="Negative"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative is-disabled" role="button">
+    <i class="sap-icon--message-error" aria-label="Negative"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative is-focus" role="button">
+    <i class="sap-icon--message-error" aria-label="Negative"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<h3>(Primary) Critical Button</h3>
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--critical" role="button">
+    <i class="sap-icon--message-warning" aria-label="Critical"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--critical is-hover" role="button">
+    <i class="sap-icon--message-warning" aria-label="Critical"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--critical is-active" role="button">
+    <i class="sap-icon--message-warning" aria-label="Critical"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--critical is-active is-focus" role="button">
+    <i class="sap-icon--message-warning" aria-label="Critical"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--critical is-disabled" role="button">
+    <i class="sap-icon--message-warning" aria-label="Critical"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--critical is-focus" role="button">
+    <i class="sap-icon--message-warning" aria-label="Critical"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<h3>(Primary) success Button</h3>
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--success" role="button">
+    <i class="sap-icon--message-success" aria-label="Success"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--success is-hover" role="button">
+    <i class="sap-icon--message-success" aria-label="Success"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--success is-active" role="button">
+    <i class="sap-icon--message-success" aria-label="Success"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--success is-active is-focus" role="button">
+    <i class="sap-icon--message-success" aria-label="Success"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--success is-disabled" role="button">
+    <i class="sap-icon--message-success" aria-label="Success"></i>
+    <span class="fd-button__text">5</span>
+</button>
+
+<button class="fd-button fd-message-popover__trigger fd-message-popover__trigger--success is-focus" role="button">
+    <i class="sap-icon--message-success" aria-label="Success"></i>
+    <span class="fd-button__text">5</span>
+</button>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/styles/stories/Components/message-popover/message-popover.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).