feat(modal): support primaryButtonIcon prop (#1047)

COMPONENT_INDEX.md

@@ -2282,7 +2282,7 @@ None.
 ### Props
 
 | Prop name                  | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                                                                   |
-| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| :------------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
 | ref                        | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>              | <code>null</code>                                | Obtain a reference to the top-level HTML element                                                              |
 | open                       | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to open the modal                                                                               |
 | size                       | <code>let</code> | No       | <code>"xs" &#124; "sm" &#124; "lg"</code>            | <code>undefined</code>                           | Set the size of the modal                                                                                     |
@@ -2297,6 +2297,7 @@ None.
 | hasScrollingContent        | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` if the modal contains scrolling content                                                         |
 | primaryButtonText          | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the primary button text                                                                               |
 | primaryButtonDisabled      | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to disable the primary button                                                                   |
+| primaryButtonIcon          | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code>                           | Specify the primary button icon                                                                               |
 | shouldSubmitOnEnter        | <code>let</code> | No       | <code>boolean</code>                                 | <code>true</code>                                | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
 | secondaryButtonText        | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>                                  | Specify the secondary button text                                                                             |
 | secondaryButtons           | <code>let</code> | No       | <code>[{ text: string; }, { text: string; }]</code>  | <code>[]</code>                                  | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText`       |
@@ -2352,8 +2353,9 @@ None.
 ### Props
 
 | Prop name             | Kind             | Reactive | Type                                                 | Default value          | Description                                                                                             |
-| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
 | primaryButtonText     | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>        | Specify the primary button text                                                                         |
+| primaryButtonIcon     | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent</code> | <code>undefined</code> | Specify the primary button icon                                                                         |
 | primaryButtonDisabled | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>     | Set to `true` to disable the primary button                                                             |
 | primaryClass          | <code>let</code> | No       | <code>string</code>                                  | <code>undefined</code> | Specify a class for the primary button                                                                  |
 | secondaryButtonText   | <code>let</code> | No       | <code>string</code>                                  | <code>""</code>        | Specify the secondary button text                                                                       |

docs/src/COMPONENT_API.json

@@ -6073,6 +6073,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "primaryButtonIcon",
+          "kind": "let",
+          "description": "Specify the primary button icon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "shouldSubmitOnEnter",
           "kind": "let",
@@ -6237,6 +6247,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "primaryButtonIcon",
+          "kind": "let",
+          "description": "Specify the primary button icon",
+          "type": "typeof import(\"svelte\").SvelteComponent",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "primaryButtonDisabled",
           "kind": "let",

docs/src/pages/components/Modal.svx

@@ -42,3 +42,6 @@ Use the `secondaryButtons` prop to render two secondary buttons for a "3-button
 
 <FileSource src="/framed/Modal/ModalPreventOutsideClick" />
 
+### Button with icon
+
+<FileSource src="/framed/Modal/ModalButtonWithIcon" />

docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { Modal } from "carbon-components-svelte";
+  import Send16 from "carbon-icons-svelte/lib/Send16";
+</script>
+
+<Modal
+  open
+  modalHeading="Invite someone"
+  primaryButtonText="Send invitation"
+  primaryButtonIcon="{Send16}"
+  secondaryButtonText="Cancel"
+>
+  <p>Do you really want to invite someone?</p>
+</Modal>

src/ComposedModal/ModalFooter.svelte

@@ -6,6 +6,12 @@
   /** Specify the primary button text */
   export let primaryButtonText = "";
 
+  /**
+   * Specify the primary button icon
+   * @type {typeof import("svelte").SvelteComponent}
+   */
+  export let primaryButtonIcon = undefined;
+
   /**  Set to `true` to disable the primary button */
   export let primaryButtonDisabled = false;
 
@@ -74,6 +80,7 @@
       kind="{danger ? 'danger' : 'primary'}"
       disabled="{primaryButtonDisabled}"
       class="{primaryClass}"
+      icon="{primaryButtonIcon}"
       on:click="{submit}"
     >
       {primaryButtonText}

src/Modal/Modal.svelte

@@ -55,6 +55,12 @@
   /** Set to `true` to disable the primary button */
   export let primaryButtonDisabled = false;
 
+  /**
+   * Specify the primary button icon
+   * @type {typeof import("svelte").SvelteComponent}
+   */
+  export let primaryButtonIcon = undefined;
+
   /**
    * Set to `true` for the "submit" and "click:button--primary" events
    * to be dispatched when pressing "Enter"
@@ -300,6 +306,7 @@
         <Button
           kind="{danger ? 'danger' : 'primary'}"
           disabled="{primaryButtonDisabled}"
+          icon="{primaryButtonIcon}"
           on:click="{() => {
             dispatch('submit');
             dispatch('click:button--primary');

types/ComposedModal/ModalFooter.svelte.d.ts

@@ -9,6 +9,12 @@ export interface ModalFooterProps
    */
   primaryButtonText?: string;
 
+  /**
+   * Specify the primary button icon
+   * @default undefined
+   */
+  primaryButtonIcon?: typeof import("svelte").SvelteComponent;
+
   /**
    * Set to `true` to disable the primary button
    * @default false

types/Modal/Modal.svelte.d.ts

@@ -81,6 +81,12 @@ export interface ModalProps
    */
   primaryButtonDisabled?: boolean;
 
+  /**
+   * Specify the primary button icon
+   * @default undefined
+   */
+  primaryButtonIcon?: typeof import("svelte").SvelteComponent;
+
   /**
    * Set to `true` for the "submit" and "click:button--primary" events
    * to be dispatched when pressing "Enter"