Make `iconSpacing` control `ButtonSpinner` margin

Description

Currently iconSpacing property of Button component only controls the spacing between leftIcon / rightIcon and button text. It doesn’t control the spacing between ButtonSpinner and button text when isLoading={true}.

From my point of view, it should control it. Otherwise, there is a design shift when isLoading goes from false to true.

Problem Statement/Justification

Currently iconSpacing property of Button component only controls the spacing between leftIcon / rightIcon and button text. It doesn’t control the spacing between ButtonSpinner and button text when isLoading={true}.

Proposed Solution or API

Controling ButtonSpinner margin via iconSpacing property.

Alternatives

No response

Additional Information

No response

[cschroeter]

1. Not necessarily. You can use any kind of React component

spinner?: React.ReactElement;

1. ? What solution. Was just an proposal for a more flexible button api

    /**
     * The space between the button icon and label.
     * @type SystemProps["marginRight"]
     * @deprecated use spacing instead
     */
    iconSpacing?: SystemProps["marginRight"];
    
    /**
     * The space between each item in the button
     * @type SystemProps["margin"]
     */
    spacing?: SystemProps["margin"];

<Button spacing="4" isLoading loadingText="Loading" leftIcon={<SaveIcon />}>Save</Button>

When looking into the button api I think there is another inconsistency in the button api. The icon is placed using iconLeft and iconRight while the spinner is placed using spinnerPlacement. But I guess thats a different discussion.

[lcswillems]

@sohamsshah Here is a codesandbox: https://codesandbox.io/s/homepage-forked-6pmis?file=/src/App.tsx

This is the UI of “Search button” by default:

When you click, this is the UI:

You see that the spacing changes.