From 2feb907ac4c1367dbda107ad6bbe680c65472058 Mon Sep 17 00:00:00 2001
From: Juan Pablo Mitriatti <juan.mitriatti@gmail.com>
Date: Mon, 16 Dec 2024 18:06:05 -0300
Subject: [PATCH 1/2] feat(unity-bootstrap-theme): added style and example for
 input type submit

UDS-1915
---
 .../unity-bootstrap-theme/src/scss/extends/_form-fields.scss | 3 +--
 .../stories/atoms/buttons/buttons.examples.stories.js        | 5 +++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss
index d7e0efa5d2..42cee810fd 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss
@@ -63,8 +63,7 @@ form.uds-form {
   textarea:focus,
   select:focus {
     outline: none!important;
-    box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important;
-    border: 1px solid $uds-color-base-gray-7 !important;
+    box-shadow: $uds-color-base-white 0px 0px 0px 2px, $uds-color-base-gray-7 0px 0px 0px 4px !important;
     border-radius: none;
   }
 
diff --git a/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js
index 8fd35d80e0..0825e2318e 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js
@@ -49,6 +49,11 @@ export const ButtonColorsComponent = () => (
     <button type="button" className="btn btn-dark">
       Dark
     </button>
+    <hr />
+    <form className="uds-form">
+    <input class="btn-maroon btn btn-primary" type="submit" value="Send message"></input>
+    </form>
+    <hr />
   </div>
 );
 

From 467009e43ee4efb040560c91cee6ec83a41a404c Mon Sep 17 00:00:00 2001
From: Juan Pablo Mitriatti <juan.mitriatti@gmail.com>
Date: Wed, 18 Dec 2024 09:16:29 -0300
Subject: [PATCH 2/2] feat(unity-bootstrap-theme): added custom selector for
 input type submit

UDS-1915
---
 .../src/scss/extends/_form-fields.scss                    | 8 +++++++-
 .../stories/atoms/buttons/buttons.examples.stories.js     | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss
index 42cee810fd..4f15e97f2e 100644
--- a/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss
+++ b/packages/unity-bootstrap-theme/src/scss/extends/_form-fields.scss
@@ -63,10 +63,16 @@ form.uds-form {
   textarea:focus,
   select:focus {
     outline: none!important;
-    box-shadow: $uds-color-base-white 0px 0px 0px 2px, $uds-color-base-gray-7 0px 0px 0px 4px !important;
+    box-shadow: 0 0 0 1px $uds-color-base-gray-7 !important;
+    border: 1px solid $uds-color-base-gray-7 !important;
     border-radius: none;
   }
 
+  input[type="submit"]:focus {
+    box-shadow: $uds-color-base-white 0 0 0 2px, $uds-color-base-gray-7 0px 0px 0px 4px !important;
+    border: 0 !important;
+  }
+
   /* Radios and Checkboxes - For more flexible control, this is a departure
     from Bootstrap 4 custom Checkboxes and Radios as described in:
     https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios-1
diff --git a/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js b/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js
index 0825e2318e..37882a0fce 100644
--- a/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js
+++ b/packages/unity-bootstrap-theme/stories/atoms/buttons/buttons.examples.stories.js
@@ -51,7 +51,7 @@ export const ButtonColorsComponent = () => (
     </button>
     <hr />
     <form className="uds-form">
-    <input class="btn-maroon btn btn-primary" type="submit" value="Send message"></input>
+      <input className="btn-maroon btn btn-primary" type="submit" value="Send message"></input>
     </form>
     <hr />
   </div>