Merge pull request #183 from inokawa/default-style

Remove unnecessary styles from component
inokawa · Sep 22, 2023 · 9a84a42 · 9a84a42
2 parents a781990 + 19aae76
commit 9a84a42
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 70 deletions.
diff --git a/src/react/VGrid.tsx b/src/react/VGrid.tsx
@@ -463,8 +463,6 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
               // backfaceVisibility: "hidden",
               width: "100%",
               height: "100%",
-              padding: 0,
-              margin: 0,
               ...viewportAttrs.style,
             },
           }),

diff --git a/src/react/VList.tsx b/src/react/VList.tsx
@@ -331,7 +331,7 @@ export const VList = forwardRef<VListHandle, VListProps>(
           () => ({
             ...viewportAttrs,
             style: {
-              overflow: isHorizontal ? "auto hidden" : "hidden auto",
+              overflow: "auto",
               display: isHorizontal ? "inline-block" : "block",
               contain: "strict",
               // transform: "translate3d(0px, 0px, 0px)",
@@ -341,8 +341,6 @@ export const VList = forwardRef<VListHandle, VListProps>(
               // willChange: "transform",
               width: "100%",
               height: "100%",
-              padding: 0,
-              margin: 0,
               ...viewportAttrs.style,
             },
           }),

diff --git a/src/react/WVList.tsx b/src/react/WVList.tsx
@@ -270,8 +270,6 @@ export const WVList = forwardRef<WVListHandle, WVListProps>(
               // willChange: "transform",
               width: isHorizontal ? "auto" : "100%",
               height: isHorizontal ? "100%" : "auto",
-              padding: 0,
-              margin: 0,
               ...viewportAttrs.style,
             },
           }),

diff --git a/src/react/__snapshots__/VGrid.spec.tsx.snap b/src/react/__snapshots__/VGrid.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`grid should render 1 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100px; height: 50px; pointer-events: auto;"
@@ -23,7 +23,7 @@ exports[`grid should render 1 children 1`] = `
 exports[`grid should render 4x4 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
@@ -148,7 +148,7 @@ exports[`grid should render 4x4 children 1`] = `
 exports[`grid should render 100x100 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
@@ -273,7 +273,7 @@ exports[`grid should render 100x100 children 1`] = `
 exports[`grid should render 1000x1000 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100000px; height: 40040px; pointer-events: auto;"
@@ -398,7 +398,7 @@ exports[`grid should render 1000x1000 children 1`] = `
 exports[`grid should render 10000x10000 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 1000000px; height: 400040px; pointer-events: auto;"
@@ -523,7 +523,7 @@ exports[`grid should render 10000x10000 children 1`] = `
 exports[`grid should render component 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 10000px; height: 4040px; pointer-events: auto;"
@@ -648,7 +648,7 @@ exports[`grid should render component 1`] = `
 exports[`grid should render fragments 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100px; height: 100px; pointer-events: auto;"
@@ -681,7 +681,7 @@ exports[`grid should render fragments 1`] = `
 exports[`grid should render non elements 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100px; height: 280px; pointer-events: auto;"
@@ -708,7 +708,7 @@ exports[`grid should render non elements 1`] = `
 exports[`grid should render with given width / height 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto; contain: strict; width: 100px; height: 100px; padding: 0px; margin: 0px;"
+    style="overflow: auto; contain: strict; width: 100px; height: 100px;"
   >
     <div
       style="position: relative; visibility: hidden; width: 400px; height: 200px; pointer-events: auto;"
@@ -837,7 +837,7 @@ exports[`should pass attributes to element 1`] = `
     class="class"
     id="id"
     role="list"
-    style="overflow: auto; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px; background: red;"
+    style="overflow: auto; contain: strict; width: 100%; height: 100%; background: red;"
     tabindex="0"
   >
     <div

diff --git a/src/react/__snapshots__/VGrid.ssr.spec.tsx.snap b/src/react/__snapshots__/VGrid.ssr.spec.tsx.snap
diff --git a/src/react/__snapshots__/VList.spec.tsx.snap b/src/react/__snapshots__/VList.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`horizontal should render 1 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100px; height: 100%; pointer-events: auto;"
@@ -23,7 +23,7 @@ exports[`horizontal should render 1 children 1`] = `
 exports[`horizontal should render 5 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
@@ -71,7 +71,7 @@ exports[`horizontal should render 5 children 1`] = `
 exports[`horizontal should render 100 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
@@ -126,7 +126,7 @@ exports[`horizontal should render 100 children 1`] = `
 exports[`horizontal should render 1000 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100000px; height: 100%; pointer-events: auto;"
@@ -181,7 +181,7 @@ exports[`horizontal should render 1000 children 1`] = `
 exports[`horizontal should render 10000 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 1000000px; height: 100%; pointer-events: auto;"
@@ -236,7 +236,7 @@ exports[`horizontal should render 10000 children 1`] = `
 exports[`horizontal should render component 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 300px; height: 100%; pointer-events: auto;"
@@ -270,7 +270,7 @@ exports[`horizontal should render component 1`] = `
 exports[`horizontal should render fragments 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
@@ -303,7 +303,7 @@ exports[`horizontal should render fragments 1`] = `
 exports[`horizontal should render non elements 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 200px; height: 100%; pointer-events: auto;"
@@ -326,7 +326,7 @@ exports[`horizontal should render non elements 1`] = `
 exports[`horizontal should render with given width / height 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100px; height: 800px; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100px; height: 800px;"
   >
     <div
       style="position: relative; visibility: hidden; width: 500px; height: 100%; pointer-events: auto;"
@@ -374,7 +374,7 @@ exports[`horizontal should render with given width / height 1`] = `
 exports[`reverse should render many items 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
@@ -429,7 +429,7 @@ exports[`reverse should render many items 1`] = `
 exports[`rtl should work in horizontal 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: auto hidden; display: inline-block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: inline-block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 10000px; height: 100%; pointer-events: auto;"
@@ -484,7 +484,7 @@ exports[`rtl should work in horizontal 1`] = `
 exports[`should change components 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <ul
       style="position: relative; height: 250px; margin: 0px;"
@@ -536,7 +536,7 @@ exports[`should pass attributes to element 1`] = `
     class="class"
     id="id"
     role="list"
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px; background: red;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%; background: red;"
     tabindex="0"
   >
     <div
@@ -557,7 +557,7 @@ exports[`should pass attributes to element 1`] = `
 exports[`vertical should render 0 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
@@ -569,7 +569,7 @@ exports[`vertical should render 0 children 1`] = `
 exports[`vertical should render 1 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 50px; pointer-events: auto;"
@@ -589,7 +589,7 @@ exports[`vertical should render 1 children 1`] = `
 exports[`vertical should render 5 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"
@@ -637,7 +637,7 @@ exports[`vertical should render 5 children 1`] = `
 exports[`vertical should render 100 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 5000px; pointer-events: auto;"
@@ -692,7 +692,7 @@ exports[`vertical should render 100 children 1`] = `
 exports[`vertical should render 1000 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 50000px; pointer-events: auto;"
@@ -747,7 +747,7 @@ exports[`vertical should render 1000 children 1`] = `
 exports[`vertical should render 10000 children 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 500000px; pointer-events: auto;"
@@ -802,7 +802,7 @@ exports[`vertical should render 10000 children 1`] = `
 exports[`vertical should render component 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 150px; pointer-events: auto;"
@@ -836,7 +836,7 @@ exports[`vertical should render component 1`] = `
 exports[`vertical should render fragments 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
@@ -869,7 +869,7 @@ exports[`vertical should render fragments 1`] = `
 exports[`vertical should render non elements 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100%; height: 100%; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100%; height: 100%;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 100px; pointer-events: auto;"
@@ -892,7 +892,7 @@ exports[`vertical should render non elements 1`] = `
 exports[`vertical should render with given width / height 1`] = `
 <DocumentFragment>
   <div
-    style="overflow: hidden auto; display: block; contain: strict; width: 100px; height: 800px; padding: 0px; margin: 0px;"
+    style="overflow: auto; display: block; contain: strict; width: 100px; height: 800px;"
   >
     <div
       style="position: relative; visibility: hidden; width: 100%; height: 250px; pointer-events: auto;"