From 5b9886ad8833ec069ec2eb8fb96b83d6020691e0 Mon Sep 17 00:00:00 2001
From: Kyrylo Hudym-Levkovych <kyr.hudym@kyrs-MacBook-Pro.local>
Date: Mon, 9 Oct 2023 08:26:26 +0300
Subject: [PATCH] fix: update styles for searchfield btn

---
 src/SearchField/SearchFieldSubmitButton.jsx        |  2 +-
 .../__snapshots__/SearchField.test.jsx.snap        |  2 +-
 src/SearchField/index.scss                         | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/SearchField/SearchFieldSubmitButton.jsx b/src/SearchField/SearchFieldSubmitButton.jsx
index eff97e9004..ded1dfaacb 100644
--- a/src/SearchField/SearchFieldSubmitButton.jsx
+++ b/src/SearchField/SearchFieldSubmitButton.jsx
@@ -42,7 +42,7 @@ function SearchFieldSubmitButton(props) {
   ) : (
     <button
       type="submit"
-      className={classNames('btn')}
+      className={classNames('btn pgn__searchfield__action-btn')}
       ref={refs.submitButton}
       disabled={disabled}
       {...others}
diff --git a/src/SearchField/__snapshots__/SearchField.test.jsx.snap b/src/SearchField/__snapshots__/SearchField.test.jsx.snap
index dada0d65ac..0c74dd1cfa 100644
--- a/src/SearchField/__snapshots__/SearchField.test.jsx.snap
+++ b/src/SearchField/__snapshots__/SearchField.test.jsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"pgn__searchfield-form\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><span class=\\"pgn__icon\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z\\" fill=\\"currentColor\\"></path></svg></span><span class=\\"sr-only\\">submit search</span></button></form></div>"`;
+exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"pgn__searchfield-form\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn pgn__searchfield__action-btn\\"><span class=\\"pgn__icon\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z\\" fill=\\"currentColor\\"></path></svg></span><span class=\\"sr-only\\">submit search</span></button></form></div>"`;
diff --git a/src/SearchField/index.scss b/src/SearchField/index.scss
index b381fc5275..2ee625109e 100644
--- a/src/SearchField/index.scss
+++ b/src/SearchField/index.scss
@@ -11,17 +11,18 @@
     background-color: $search-form-background-color;
   }
 
-  .btn:focus-visible {
+  .pgn__searchfield__action-btn:focus {
     outline: none;
     position: relative;
-    transition: $input-transition;
 
-    &::after {
+    &::before {
       content: "";
-      border: $search-border-focus-width double $search-border-focus-color;
+      border: $search-border-focus-width solid $search-border-focus-color;
       position: absolute;
-      width: 100%;
-      height: 100%;
+      top: -5px;
+      right: -5px;
+      bottom: -5px;
+      left: -5px;
     }
   }
 
@@ -138,6 +139,5 @@
 }
 
 .pgn__searchfield__button.btn[type="submit"] {
-  border-radius: 0;
   margin-inline-start: $search-button-margin;
 }