Avoid hardcoded values

oasisprotocol · Jun 7, 2022 · 545323d · 545323d
1 parent ff84c8c
commit 545323d
Show file tree

Hide file tree

Showing 3 changed files with 214 additions and 41 deletions.
diff --git a/src/app/components/Toolbar/Features/SearchAddress/SearchBox.tsx b/src/app/components/Toolbar/Features/SearchAddress/SearchBox.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, TextInput } from 'grommet'
 import { FormClose, Search } from 'grommet-icons/icons'
 import React from 'react'
+import styled, { useTheme } from 'styled-components'
 
 interface Props {
   placeholder: string
@@ -9,6 +10,14 @@ interface Props {
   onClear: () => void
 }
 
+const RightIconButton = styled(Button)`
+  margin-left: ${({ theme }) => {
+    const negativeIconButtonWidth = `calc(-${theme.global?.edgeSize?.small} - ${theme.icon?.size?.medium} - ${theme.global?.edgeSize?.small})`
+    return negativeIconButtonWidth
+  }};
+  z-index: 1;
+`
+
 /**
  * Rounded input with search icon and clear button.
  */
@@ -39,13 +48,13 @@ export const SearchBox = React.forwardRef<HTMLInputElement, Props>((props, ref)
         ref={ref}
         {...rest}
       />
-      {value && (
-        <Button
-          style={{ marginLeft: '-48px', zIndex: 1, marginTop: '-2px', marginBottom: '-2px' }}
-          icon={<FormClose />}
-          onClick={() => onClear()}
-        />
-      )}
+      <RightIconButton
+        style={{
+          visibility: value ? 'visible' : 'hidden',
+        }}
+        icon={<FormClose />}
+        onClick={() => onClear()}
+      />
     </Box>
   )
 })
diff --git a/...app/components/Toolbar/Features/SearchAddress/__tests__/__snapshots__/index.test.tsx.snap b/...app/components/Toolbar/Features/SearchAddress/__tests__/__snapshots__/index.test.tsx.snap
@@ -79,6 +79,66 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
   flex: 0 1 auto;
 }
 
+.c7 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+  line-height: 0;
+  padding: 12px;
+}
+
+.c7:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c7:focus > circle,
+.c7:focus > ellipse,
+.c7:focus > line,
+.c7:focus > path,
+.c7:focus > polygon,
+.c7:focus > polyline,
+.c7:focus > rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c7:focus::-moz-focus-inner {
+  border: 0;
+}
+
+.c7:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c7:focus:not(:focus-visible) > circle,
+.c7:focus:not(:focus-visible) > ellipse,
+.c7:focus:not(:focus-visible) > line,
+.c7:focus:not(:focus-visible) > path,
+.c7:focus:not(:focus-visible) > polygon,
+.c7:focus:not(:focus-visible) > polyline,
+.c7:focus:not(:focus-visible) > rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c7:focus:not(:focus-visible)::-moz-focus-inner {
+  border: 0;
+}
+
 .c6 {
   box-sizing: border-box;
   font-size: inherit;
@@ -185,6 +245,11 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
   left: 12px;
 }
 
+.c8 {
+  margin-left: calc(-12px - 24px - 12px);
+  z-index: 1;
+}
+
 @media only screen and (max-width:768px) {
   .c0 {
     border: solid 1px rgba(0,0,0,0.33);
@@ -238,7 +303,24 @@ exports[`<SearchAddress  /> should match snapshot 1`] = `
         value=""
       />
     </div>
-    
+    <button
+      class="c7 c8"
+      style="visibility: hidden;"
+      type="button"
+    >
+      <svg
+        aria-label="FormClose"
+        class="c5"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="m7 7 10 10M7 17 17 7"
+          fill="none"
+          stroke="#000"
+          stroke-width="2"
+        />
+      </svg>
+    </button>
   </div>
 </form>
 `;