Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove unnecessary styles from component #183

Merged
merged 1 commit into from
Sep 22, 2023
Merged

Remove unnecessary styles from component #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/react/VGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,8 +463,6 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
// backfaceVisibility: "hidden",
width: "100%",
height: "100%",
padding: 0,
margin: 0,
...viewportAttrs.style,
},
}),
Expand Down
4 changes: 1 addition & 3 deletions src/react/VList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand All @@ -341,8 +341,6 @@ export const VList = forwardRef<VListHandle, VListProps>(
// willChange: "transform",
width: "100%",
height: "100%",
padding: 0,
margin: 0,
...viewportAttrs.style,
},
}),
Expand Down
2 changes: 0 additions & 2 deletions src/react/WVList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
}),
Expand Down
20 changes: 10 additions & 10 deletions src/react/__snapshots__/VGrid.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
Expand All @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand All @@ -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;"
Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/react/__snapshots__/VGrid.ssr.spec.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

46 changes: 23 additions & 23 deletions src/react/__snapshots__/VList.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;"
Expand All @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand All @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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
Expand All @@ -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;"
Expand All @@ -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;"
Expand All @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand Down Expand Up @@ -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;"
Expand All @@ -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;"
Expand Down
Loading