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.

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

Open
wants to merge 108 commits into
base: table-refactor-integration
Choose a base branch
from

Conversation

shaneeza
Copy link
Collaborator

@shaneeza shaneeza commented Nov 7, 2024

✍️ Proposed changes

🎟 Jira ticket: LG-3679

✅ Checklist

For bug fixes, new features & breaking changes

  • I have added tests that prove my fix is effective or that my feature works
  • I have added necessary documentation (if appropriate)
  • I have run yarn changeset and documented my changes

For new components

  • I have added my new package to the global tsconfig
  • I have added my new package to the Table of Contents on the global README
  • I have verified the Live Example looks as intended on the design website.

🧪 How to test changes

All failing tests will be updated in a separate PR.

@shaneeza shaneeza marked this pull request as ready for review November 11, 2024 14:28
@shaneeza shaneeza requested a review from a team as a code owner November 11, 2024 14:28
@shaneeza shaneeza requested review from stephl3 and removed request for a team November 11, 2024 14:28
@@ -312,7 +307,8 @@ export const HundredsOfRows: StoryFn<StoryTableProps> = args => {
const { rows } = table;

return (
<>
<div>
<div style={{ height: '50px' }} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not className?

Copy link
Collaborator Author

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty

@@ -364,7 +359,8 @@ export const HundredsOfRows: StoryFn<StoryTableProps> = args => {
})}
</TableBody>
</Table>
</>
<div style={{ height: '2000px' }} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto here

@shaneeza shaneeza requested review from bruugey and removed request for bruugey November 13, 2024 18:47
Base automatically changed from shaneeza/table-memoized to table-refactor-integration November 18, 2024 20:06
@shaneeza shaneeza changed the title Table sticky scroll shadow Table sticky scroll shadow Nov 18, 2024
@@ -0,0 +1,195 @@
import React, { Fragment, useState } from 'react';
Copy link
Collaborator

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 *

Copy link
Collaborator Author

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' },
Copy link
Collaborator

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

Comment on lines +305 to +310
<div>
<div
className={css`
height: 50px;
`}
/>
Copy link
Collaborator

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?

Copy link
Collaborator Author

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

Comment on lines +61 to +62
{/* Empty div used to track if the header is sticky */}
<div ref={ref} />
Copy link
Collaborator

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants