-
Notifications
You must be signed in to change notification settings - Fork 64
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.
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
Table
sticky scroll shadow
#2541
base: table-refactor-integration
Are you sure you want to change the base?
Table
sticky scroll shadow
#2541
Conversation
packages/table/src/Table.stories.tsx
Outdated
@@ -312,7 +307,8 @@ export const HundredsOfRows: StoryFn<StoryTableProps> = args => { | |||
const { rows } = table; | |||
|
|||
return ( | |||
<> | |||
<div> | |||
<div style={{ height: '50px' }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why not className?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no particular reason, i'll update
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ty
packages/table/src/Table.stories.tsx
Outdated
@@ -364,7 +359,8 @@ export const HundredsOfRows: StoryFn<StoryTableProps> = args => { | |||
})} | |||
</TableBody> | |||
</Table> | |||
</> | |||
<div style={{ height: '2000px' }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ditto here
@@ -0,0 +1,195 @@ | |||
import React, { Fragment, useState } from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
file name typo: Table.Interactions.stories.tsx *
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oops, good catch
title: 'Components/Table/Interactions', | ||
component: Table, | ||
argTypes: { | ||
shouldAlternateRowColor: { control: 'boolean' }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this control is working
Also, should we add the darkMode
toggle? Was looking to check the dark mode UI for the box-shadow
<div> | ||
<div | ||
className={css` | ||
height: 50px; | ||
`} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wondering if I need to test this story as well since I see changes here. Or should I only be checking Interactions/StickyHeader
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's sorta the same, however, i think i might be able to remove this
{/* Empty div used to track if the header is sticky */} | ||
<div ref={ref} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we merge the ref
from useInView
with the containerRef
to avoid adding an empty div?
✍️ Proposed changes
🎟 Jira ticket: LG-3679
✅ Checklist
For bug fixes, new features & breaking changes
yarn changeset
and documented my changesFor new components
🧪 How to test changes
All failing tests will be updated in a separate PR.