style(form): form elements

epignosis · Dec 24, 2021 · 5166623 · 5166623
1 parent 8c85daa
commit 5166623
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 9 deletions.
diff --git a/src/components/FormElements/Input/__snapshots__/Input.test.tsx.snap b/src/components/FormElements/Input/__snapshots__/Input.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Input /> matches snapshot 1`] = `
 <div>
   <div
-    class="container-classname css-1qrcc4s-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-inputContainer-inputContainer"
+    class="container-classname css-xac61p-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-inputContainer-inputContainer"
     id="container-id"
   >
     <label

diff --git a/src/components/FormElements/Input/styles.ts b/src/components/FormElements/Input/styles.ts
@@ -33,7 +33,8 @@ export const inputContainer = (
     z-index: 1;
     border-radius: 5px;
 
-    &:focus-within {
+    &:focus-within,
+    &:hover {
       .prefix-icon,
       .suffix-icon {
         z-index: 1;

diff --git a/src/components/FormElements/Select/__snapshots__/Select.test.tsx.snap b/src/components/FormElements/Select/__snapshots__/Select.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Select /> matches snapshot 1`] = `
 <div>
   <div
-    class="valid container-class css-n8tftf-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-selectContainer-selectContainer"
+    class="valid container-class css-o861ka-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-selectContainer-selectContainer"
     id="container-id"
   >
     <label

diff --git a/src/components/FormElements/Select/styles.ts b/src/components/FormElements/Select/styles.ts
@@ -18,7 +18,8 @@ export const selectContainer = (
     }
   }
 
-  &:focus-within {
+  &:focus-within,
+  &:hover {
     .select-input-wrapper {
       .carret-wrapper {
         z-index: 1;

diff --git a/src/components/FormElements/Textarea/__snapshots__/Textarea.test.tsx.snap b/src/components/FormElements/Textarea/__snapshots__/Textarea.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Textarea /> matches snapshot 1`] = `
 <div>
   <div
-    class="valid textarea-container-class css-1tbrkta-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-textareaContainer-textareaContainer"
+    class="valid textarea-container-class css-j0hgwd-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-textareaContainer-textareaContainer"
     id="textarea-container-id"
   >
     <label

diff --git a/src/components/FormElements/styles.ts b/src/components/FormElements/styles.ts
@@ -41,6 +41,10 @@ export const inputBaseStyles = (
   border: 1px solid ${formElements.input.inputBorderColor};
   border-radius: 5px;
 
+  &:hover {
+    background: ${formElements.input.hoverColor};
+  }
+
   &:hover,
   &:focus {
     border: 1px solid ${formElements.input.borderHoverColor};

diff --git a/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<Pagination /> matches snapshot in responsive view 1`] = `
       class="current-page"
     >
       <div
-        class="valid css-n8tftf-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-selectContainer-selectContainer"
+        class="valid css-o861ka-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-selectContainer-selectContainer"
       >
         <div
           class="select-input-wrapper"
@@ -112,7 +112,7 @@ exports[`<Pagination /> matches snapshot with on page 1`] = `
       class="current-page"
     >
       <div
-        class="valid css-n8tftf-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-selectContainer-selectContainer"
+        class="valid css-o861ka-inputContainerBaseStyles-inputContainerBaseStyles-inputBaseStyles-inputBaseStyles-selectContainer-selectContainer"
       >
         <div
           class="select-input-wrapper"

diff --git a/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<Tabs/> matches snapshot 1`] = `
     id="tab-1"
   >
     <nav
-      class="css-1nnrh13-tabsHeader-tabsHeader"
+      class="css-1cv5t7l-tabsHeader-tabsHeader"
       role="tablist"
     >
       <a
@@ -75,7 +75,7 @@ exports[`<Tabs/> matches snapshot with stickyHeader 1`] = `
     class="css-a5ycro-container"
   >
     <nav
-      class="css-rj1op0-tabsHeader-tabsHeader"
+      class="css-1b46b0m-tabsHeader-tabsHeader"
       role="tablist"
     >
       <a

diff --git a/src/components/Tabs/styles.ts b/src/components/Tabs/styles.ts
@@ -30,6 +30,7 @@ export const tabsHeader = (
     ${mq["sm"]} {
       padding: 0 2rem;
       flex-wrap: nowrap;
+      border-bottom: 1px solid ${tabs.headerBorder};
     }
   `;
 };

diff --git a/src/theme/default/config/formElements.ts b/src/theme/default/config/formElements.ts
@@ -11,6 +11,7 @@ export default {
     background: "#F1F1F1",
     backgroundFocus: colors.white,
     iconColor: colors.black,
+    hoverColor: "#F8F8F8",
   },
   radioButtonGroup: {
     normalBackground: colors.gray.lighter,