@eui/components 19.1.1-snapshot-1741071838252 → 19.1.1

package/docs/components/EuiMessageBoxComponent.html

@@ -109,6 +109,38 @@
 </p>
 
 
+    <p class="comment">
+        <h3>Description</h3>
+    </p>
+    <p class="comment">
+        <p>Component for displaying modal message boxes with structured content and customizable actions.
+This component provides a user-friendly interface for confirmation dialogs, alerts, and other
+types of modal messages.</p>
+<p>The component supports various styling variants through the BaseStatesDirective hostDirective,
+customizable buttons, and configurable behavior for dialog actions.</p>
+<b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Basic usage with title and default buttons:
+&lt;eui-message-box
+  title=&quot;Confirmation Required&quot;
+  (accept)=&quot;onConfirm()&quot;
+  (dismiss)=&quot;onCancel()&quot;&gt;
+  Are you sure you want to proceed with this action?
+&lt;/eui-message-box&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Custom styled message box with modified button labels:
+&lt;eui-message-box
+  title=&quot;Warning&quot;
+  euiWarning
+  acceptLabel=&quot;Proceed Anyway&quot;
+  dismissLabel=&quot;Go Back&quot;
+  [isDraggable]=&quot;true&quot;&gt;
+  This action cannot be undone.
+&lt;/eui-message-box&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-html">// Message box with custom footer content:
+&lt;eui-message-box title=&quot;Custom Actions&quot;&gt;
+  Select an option below.
+  &lt;eui-message-box-footer&gt;
+    &lt;button eui-button (click)=&quot;optionOne()&quot;&gt;Option 1&lt;/button&gt;
+    &lt;button eui-button (click)=&quot;optionTwo()&quot;&gt;Option 2&lt;/button&gt;
+  &lt;/eui-message-box-footer&gt;
+&lt;/eui-message-box&gt;</code></pre></div>
+    </p>
 
 
     <p class="comment">
@@ -327,6 +359,8 @@
 
                 <tr>
                     <td class="col-md-4">
+                            <div class="io-description"><p>Creates an instance of EuiMessageBoxComponent.</p>
+</div>
                             <div>
                                     <b>Parameters :</b>
                                     <table class="params">
@@ -335,6 +369,7 @@
                                                 <td>Name</td>
                                                     <td>Type</td>
                                                 <td>Optional</td>
+                                                    <td>Description</td>
                                             </tr>
                                         </thead>
                                         <tbody>
@@ -349,6 +384,12 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <ul>
+<li>Reference to the view container for creating portals</li>
+</ul>
+
+                                                        </td>
                                                 </tr>
                                                 <tr>
                                                         <td>euiMessageBoxService</td>
@@ -361,6 +402,12 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <ul>
+<li>Service used to open and close message boxes</li>
+</ul>
+
+                                                        </td>
                                                 </tr>
                                                 <tr>
                                                         <td>baseStatesDirective</td>
@@ -373,6 +420,12 @@
                                                             No
                                                     </td>
                                                     
+                                                        <td>
+                                                                <ul>
+<li>Directive that provides styling state management for the component</li>
+</ul>
+
+                                                        </td>
                                                 </tr>
                                         </tbody>
                                     </table>
@@ -404,6 +457,12 @@
                         <i>Default value : </i><code>&#x27;eui.OK&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Label for the accept/confirm button. Can be a translation key.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -425,6 +484,12 @@
                         <i>Default value : </i><code>&#x27;eui.CANCEL&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Label for the dismiss/cancel button. Can be a translation key.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -446,6 +511,12 @@
                         <i>Default value : </i><code>&#x27;eui-dialog&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Data attribute for e2e testing purposes.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -467,6 +538,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to show the accept/confirm button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -488,6 +565,12 @@
                         <i>Default value : </i><code>true</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to show the dismiss/cancel button.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -509,6 +592,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to remove padding from the message box body.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -530,6 +619,12 @@
                         <i>Default value : </i><code>&#x27;auto&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Height of the message box.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -551,6 +646,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether the message box can be dragged around the screen.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -572,6 +673,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to manually handle closing the dialog on accept button click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -593,6 +700,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to manually handle closing the dialog on close button click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -614,6 +727,12 @@
                         <i>Default value : </i><code>false</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Whether to manually handle closing the dialog on dismiss button click.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -630,6 +749,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Title text displayed in the message box header.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -651,6 +776,12 @@
                         <i>Default value : </i><code>&#x27;33rem&#x27;</code>
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Width of the message box.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -670,6 +801,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the accept/confirm button is clicked.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -686,6 +823,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the dismiss/cancel button is clicked.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -702,6 +845,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the message box closes.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
         <table class="table table-sm table-bordered">
@@ -718,6 +867,12 @@
 
                     </td>
                 </tr>
+                <tr>
+                    <td class="col-md-4">
+                        <div class="io-description"><p>Event emitted when the message box opens.</p>
+</div>
+                    </td>
+                </tr>
             </tbody>
         </table>
 </section>
@@ -752,7 +907,8 @@
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Close a Message Box.</p>
+                        <div class="io-description"><p>Closes the currently open message box.
+This method uses the EuiMessageBoxService to close the dialog.</p>
 </div>
 
                         <div class="io-description">
@@ -800,7 +956,8 @@
 
             <tr>
                 <td class="col-md-4">
-                        <div class="io-description"><p>Open a Message Box.</p>
+                        <div class="io-description"><p>Opens the message box with the current configuration.
+This method configures and displays the message box using the EuiMessageBoxService.</p>
 </div>
 
                         <div class="io-description">
@@ -836,6 +993,11 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description">- Directive that provides styling state management for the component</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -858,6 +1020,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Content that will be displayed in the message box body.
+Can be either a simple string message or a TemplatePortal for more complex content.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -889,6 +1058,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to any custom footer content provided through the eui-message-box-footer directive.
+Forward reference is used to resolve the circular dependency between the component and directive.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -920,6 +1096,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the template containing the message box content.
+This will be used to create a portal for the content section.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>
@@ -951,6 +1134,13 @@
                     </td>
                 </tr>
 
+            <tr>
+                <td class="col-md-4">
+                    <div class="io-description"><p>Reference to the template containing the message box footer.
+This will be used to create a portal for the footer section.</p>
+</div>
+                </td>
+            </tr>
 
         </tbody>
     </table>