Fix Chrome 87 fieldset rendering bug (#883)

* Fix order page gray box * Fix shipping page gray boxes * Do not put background to fieldsets Fixes Chrome 87 bug * Fix disabled style * Update snapshots * Trigger CI * Revert card changes
saleor · Dec 4, 2020 · c7cd531 · c7cd531
1 parent b774cc9
commit c7cd531
Show file tree

Hide file tree

Showing 4 changed files with 194 additions and 179 deletions.
diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx
@@ -18,6 +18,9 @@ const useStyles = makeStyles(
       },
       width: "100%"
     },
+    label: {
+      zIndex: 3
+    },
     noLabel: {
       padding: theme.spacing(2, 1.5)
     }
@@ -77,7 +80,9 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
       error={error}
       disabled={disabled}
     >
-      <InputLabel shrink={!!value}>{label}</InputLabel>
+      <InputLabel className={classes.label} shrink={!!value}>
+        {label}
+      </InputLabel>
       <Select
         variant="outlined"
         fullWidth

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -28,9 +28,6 @@ const useStyles = makeStyles(
       "& > div": {
         padding: "0 14px"
       },
-      "& fieldset": {
-        background: theme.palette.background.paper
-      },
       "& textarea": {
         "&::placeholder": {
           opacity: [[1], "!important"] as any

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -2455,7 +2455,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
             class="MuiFormControl-root-id SingleSelectField-formControl-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             />
             <div
@@ -3025,7 +3025,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             class="MuiFormControl-root-id SingleSelectField-formControl-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             />
             <div
@@ -7124,7 +7124,7 @@ exports[`Storyshots Generics / PhoneField default 1`] = `
           class="MuiFormControl-root-id SingleSelectField-formControl-id"
         >
           <label
-            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+            class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
             data-shrink="true"
           />
           <div
@@ -8716,7 +8716,7 @@ exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id MuiFormLabel-error-id MuiInputLabel-error-id"
           data-shrink="false"
         />
         <div
@@ -8789,7 +8789,7 @@ exports[`Storyshots Generics / SingleSelectField with hint 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         />
         <div
@@ -8862,7 +8862,7 @@ exports[`Storyshots Generics / SingleSelectField with label 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         >
           Lorem ipsum
@@ -8932,7 +8932,7 @@ exports[`Storyshots Generics / SingleSelectField with label and hint 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         >
           Lorem
@@ -9007,7 +9007,7 @@ exports[`Storyshots Generics / SingleSelectField with no value 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
           data-shrink="false"
         />
         <div
@@ -9075,7 +9075,7 @@ exports[`Storyshots Generics / SingleSelectField with value 1`] = `
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
           data-shrink="true"
         />
         <div
@@ -9141,7 +9141,7 @@ exports[`Storyshots Generics / SingleSelectField with value, label and hint 1`]
         class="MuiFormControl-root-id SingleSelectField-formControl-id"
       >
         <label
-          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+          class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
           data-shrink="true"
         >
           Lorem
@@ -26166,7 +26166,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -27197,7 +27197,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -28273,7 +28273,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -29356,7 +29356,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -30171,7 +30171,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -31242,7 +31242,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Catalog Input type for Store Owner
@@ -151353,7 +151353,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -152493,7 +152493,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -153348,7 +153348,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -154149,7 +154149,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
             class="MuiFormControl-root-id SingleSelectField-formControl-id ProductVariantCreatorStock-shortInput-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             >
               Select Attribute
@@ -154669,7 +154669,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -155269,7 +155269,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
             class="MuiFormControl-root-id SingleSelectField-formControl-id ProductVariantCreatorStock-shortInput-id"
           >
             <label
-              class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+              class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
               data-shrink="true"
             >
               Select Attribute
@@ -155639,7 +155639,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Attribute
@@ -208002,7 +208002,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Shipping Weight Unit
@@ -208447,7 +208447,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Shipping Weight Unit
@@ -208779,7 +208779,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
                 class="MuiFormControl-root-id SingleSelectField-formControl-id"
               >
                 <label
-                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
+                  class="MuiFormLabel-root-id MuiInputLabel-root-id SingleSelectField-label-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id MuiFormLabel-filled-id"
                   data-shrink="true"
                 >
                   Shipping Weight Unit