feat(input-with-copy): add node for settings button (#3267)

* feat(input-with-copy): add node for settings button

* fix(input-with-copy): pr comments

* chore(input-with-copy): change order of props

Co-authored-by: Trevor <7311041+tjuanitas@users.noreply.github.com>

* chore(input-with-copy): change description for property

---------

Co-authored-by: Trevor <7311041+tjuanitas@users.noreply.github.com>

Author: hkisel-box

src/components/text-input-with-copy-button/TextInputWithCopyButton.js

@@ -16,6 +16,8 @@ const defaultCopyText = <FormattedMessage {...messages.copy} />;
 const defaultCopiedText = <FormattedMessage {...messages.copied} />;
 
 type Props = {
+    /** Array of nodes for additional buttons */
+    additionalButtons?: Array<React.Node>,
     /** Set the focus to input when component loads */
     autofocus?: boolean,
     /** Default copy button text */
@@ -186,7 +188,7 @@ class TextInputWithCopyButton extends React.PureComponent<Props, State> {
         ) : null;
 
     render() {
-        const { className, ...rest } = this.props;
+        const { additionalButtons, className, ...rest } = this.props;
         const { copySuccess } = this.state;
         const { isCopyCommandSupported } = this;
 
@@ -216,6 +218,7 @@ class TextInputWithCopyButton extends React.PureComponent<Props, State> {
         return (
             <div className={wrapperClasses} {...copyEvent}>
                 <TextInput {...inputProps} onFocus={this.handleFocus} />
+                {additionalButtons}
                 {this.renderCopyButton()}
             </div>
         );

src/components/text-input-with-copy-button/TextInputWithCopyButton.scss

@@ -19,19 +19,25 @@
 
     .bdl-Button,
     .btn {
+        margin: 0;
+        border-left: 0;
+        border-radius: 0;
+        transition: background-color .5s ease, border-color .5s ease;
+    }
+
+    .bdl-Button:last-child,
+    .btn:last-child {
         min-width: 80px;
         margin: 0;
         border-left: 0;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
+        border-radius: 0 6px 6px 0;
         transition: background-color .5s ease, border-color .5s ease;
     }
 
     &.copy-success {
-        .btn,
-        .btn:hover,
-        .btn:active,
-        .btn:active:hover {
+        .btn:last-child,
+        .btn:last-child:hover,
+        .btn:last-child:active {
             color: $white;
             background-color: $bdl-green-light;
             border-color: $bdl-green-light;