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

Jump to bottom

fix: Fix up table opacities #18955

Merged
merged 34 commits into from
Nov 29, 2023
Merged

fix: Fix up table opacities #18955

merged 34 commits into from
Nov 29, 2023

Conversation

benjackwhite
Copy link
Contributor

@benjackwhite benjackwhite commented Nov 29, 2023 •
edited
Loading

Problem

Tables never quite rendered properly with sticky headers.
Also the 3000 styles were somewhat broken / unreadable.

Changes

  • Makes the default opacity 0.75 with a 0.5 hover and a 0.9 active - much more readable
  • Fixes the background colors for sticky headers
  • Fixes the bottom border for sticky headers (this was an issue before 3000) using a box shadow hack - tables are so weird...
  • Also fixes it for safari
Before After
Screenshot 2023-11-29 at 14 13 59 Screenshot 2023-11-29 at 14 12 18
Screenshot 2023-11-29 at 14 13 54 Screenshot 2023-11-29 at 14 12 24

👉 Stay up-to-date with PostHog coding conventions for a smoother review.

How did you test this code?

@benjackwhite benjackwhite requested a review from a team November 29, 2023 13:14
@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

88 snapshot changes in total. 0 added, 88 modified, 0 deleted:

Triggered by this commit.

👉 Review this PR's diff of snapshots.

daibhin
daibhin approved these changes Nov 29, 2023
View reviewed changes
Copy link
Contributor

@daibhin daibhin left a comment

Choose a reason for hiding this comment

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

I had some of these changes included in #18862 (currently failing tests).

Happy to go with this approach because it's almost identical. There is some stuff in my PR to simplify the LemonTable API but can follow up with them

frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss Outdated Show resolved Hide resolved
@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

  • chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 29, 2023 •
edited
Loading

Size Change: 0 B

Total Size: 1.83 MB

ℹ️ View Unchanged
Filename Size
frontend/dist/toolbar.js 1.83 MB

compressed-size-action

benjackwhite and others added 2 commits November 29, 2023 15:08
@benjackwhite
Merge branch 'master' into fix/table-opacity
823c9da 
# Conflicts:
#	frontend/__snapshots__/components-command-bar--search--dark.png
@github-actions
Update UI snapshots for chromium (1)
3f2ffc0
@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

1 snapshot changes in total. 0 added, 1 modified, 0 deleted:

  • chromium: 0 added, 1 modified, 0 deleted (diff for shard 1)
  • webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

3 snapshot changes in total. 0 added, 3 modified, 0 deleted:

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@benjackwhite
Merge branch 'master' into fix/table-opacity
5eaf3fb 
# Conflicts:
#	frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown.png
#	frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit--webkit.png
#	frontend/__snapshots__/scenes-app-insights--trends-area-breakdown-edit.png
#	frontend/__snapshots__/scenes-app-insights--trends-bar-breakdown-edit--webkit.png
#	frontend/__snapshots__/scenes-app-insights--trends-line-breakdown-edit--webkit.png
#	frontend/__snapshots__/scenes-app-insights--trends-pie-breakdown-edit--webkit.png
#	frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit--webkit.png
#	frontend/__snapshots__/scenes-app-insights--trends-table-breakdown-edit.png
#	frontend/__snapshots__/scenes-app-insights--trends-world-map-edit--webkit.png
@benjackwhite benjackwhite enabled auto-merge (squash) November 29, 2023 16:20
@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

10 snapshot changes in total. 0 added, 10 modified, 0 deleted:

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@posthog-bot
Copy link
Contributor

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

Triggered by this commit.

👉 Review this PR's diff of snapshots.

@benjackwhite benjackwhite merged commit 9d0d787 into master Nov 29, 2023
77 checks passed
@benjackwhite benjackwhite deleted the fix/table-opacity branch November 29, 2023 17:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@daibhin daibhin daibhin approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@benjackwhite @posthog-bot @daibhin