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 Table paddings for last column #4677

Merged
merged 4 commits into from
Feb 24, 2025
Merged

Fix Table paddings for last column #4677

merged 4 commits into from
Feb 24, 2025

Conversation

denieler
Copy link
Collaborator

@denieler denieler commented Feb 24, 2025 •
edited
Loading

Description

By some reason now we have the last cell having custom extra padding. After discussion with Milos and checking Figma - https://www.figma.com/design/q2nvjiyO2CLqBv4DeJnU3i/Product-Library-Documentation?node-id=476-9897&t=ywR92i2wXfDtSkiq-4. We agreed that there should be no extra padding and the left padding for the first cell/column should be the same as the right padding for the last column.

Screenshot 2025-02-24 at 12 40 58

How to test

Check padding for Table component in storybook.

Development checks

  • Add changeset according to guidelines (if needed)
  • Double check if picasso-tailwind-merge requires major update (check its README.md)
  • Read CONTRIBUTING.md and Component API principles
  • Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
  • Annotate all props in component with documentation
  • Create examples for component
  • Ensure that deployed demo has expected results and good examples
  • Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
  • Self reviewed
  • Covered with tests (visual tests included)

Breaking change

  • codemod is created and showcased in the changeset
  • test alpha package of Picasso in StaffPortal

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

  • @toptal-bot run package:alpha-release - Release alpha version
  • @toptal-anvil ping reviewers - Ping for reviews
PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

  1. You have no extra requests.
  2. You have optional requests.
    1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

  1. Something is broken after the changes.
  2. Acceptance criteria is not reached.
  3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

  1. There are leftovers like unnecessary logs, comments, etc.
  2. You have an opinionated comment regarding the code that requires a discussion.
  3. You have questions.

How to handle the comments?

  1. An owner of a comment is the only one who can resolve it.
  2. An owner of a comment must resolve it when it's addressed.
  3. A PR owner must reply with ✅ when a comment is addressed.

@denieler denieler self-assigned this Feb 24, 2025
@denieler denieler requested a review from a team as a code owner February 24, 2025 11:44
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Feb 24, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: dda0975

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@toptal/picasso-table Patch
@toptal/picasso Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@denieler
Copy link
Collaborator Author

@toptal-bot run package:alpha-release

@toptal-devbot
Copy link
Collaborator

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@56.0.6-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/base-tailwind@1.0.1-alpha-bill-fix-table-paddings-4fea71009.90+4fea71009
yarn add @toptal/picasso@53.0.16-alpha-bill-fix-table-paddings-4fea71009.2+4fea71009
yarn add @toptal/picasso-accordion@3.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-account-select@3.0.15-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-alert@3.0.30-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-amount@1.0.10-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-application-update-notification@2.0.30-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-autocomplete@5.0.20-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-avatar@6.1.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-avatar-upload@3.0.22-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-backdrop@1.0.9-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-badge@3.0.4-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-breadcrumbs@3.0.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-button@4.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-calendar@4.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-carousel@4.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-charts@59.0.4-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-checkbox@5.0.10-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-codemod@6.0.1-alpha-bill-fix-table-paddings-4fea71009.346+4fea71009
yarn add @toptal/picasso-collapse@3.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-container@3.1.2-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-date-picker@3.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-date-select@1.0.67-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-drawer@3.0.30-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-dropdown@4.2.2-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-dropzone@5.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-empty-state@2.0.12-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-environment-banner@3.0.1-alpha-bill-fix-table-paddings-4fea71009.141+4fea71009
yarn add @toptal/picasso-fade@1.0.8-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-file-input@4.0.17-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-form@6.1.8-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-forms@73.0.28-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-grid@5.0.8-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-helpbox@5.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-icons@1.11.1-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-image@3.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-input@4.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-input-adornment@3.0.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-link@3.0.5-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-list@5.0.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-loader@3.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-logo@2.0.8-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-menu@3.0.14-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-modal@3.0.30-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-modal-context@1.0.2-alpha-bill-fix-table-paddings-4fea71009.405+4fea71009
yarn add @toptal/picasso-note@4.0.4-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-notification@4.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-number-input@4.1.2-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-outlined-input@4.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-overview-block@4.0.4-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-page@5.1.21-alpha-bill-fix-table-paddings-4fea71009.4+4fea71009
yarn add @toptal/picasso-pagination@4.0.20-alpha-bill-fix-table-paddings-4fea71009.2+4fea71009
yarn add @toptal/picasso-paper@4.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-password-input@5.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-pictograms@5.1.1-alpha-bill-fix-table-paddings-4fea71009.22+4fea71009
yarn add @toptal/picasso-popper@1.0.6-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-prompt-modal@2.0.30-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-provider@5.0.1-alpha-bill-fix-table-paddings-4fea71009.224+4fea71009
yarn add @toptal/picasso-query-builder@8.0.15-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-quote@2.0.6-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-radio@5.0.10-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-rating@3.0.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-rich-text-editor@17.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-section@5.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-select@4.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-shared@15.0.1-alpha-bill-fix-table-paddings-4fea71009.303+4fea71009
yarn add @toptal/picasso-show-more@2.0.18-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-skeleton-loader@1.0.55-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-slide@1.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-slider@4.0.4-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-step@4.0.8-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-switch@4.0.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-table@3.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-tabs@5.0.13-alpha-bill-fix-table-paddings-4fea71009.12+4fea71009
yarn add @toptal/picasso-tag@4.0.9-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-tagselector@3.1.20-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-tailwind@3.0.1-alpha-bill-fix-table-paddings-4fea71009.90+4fea71009
yarn add @toptal/picasso-tailwind-merge@2.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-test-utils@1.1.2-alpha-bill-fix-table-paddings-4fea71009.303+4fea71009
yarn add @toptal/picasso-timeline@5.0.4-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-timepicker@4.0.19-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-tooltip@2.0.2-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-tree-view@3.0.31-alpha-bill-fix-table-paddings-4fea71009.10+4fea71009
yarn add @toptal/picasso-typography@4.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-typography-overflow@4.0.3-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009
yarn add @toptal/picasso-user-badge@5.1.10-alpha-bill-fix-table-paddings-4fea71009.26+4fea71009
yarn add @toptal/picasso-utils@3.0.1-alpha-bill-fix-table-paddings-4fea71009.50+4fea71009

@denieler denieler requested a review from a team February 24, 2025 16:28
@denieler
Copy link
Collaborator Author

@toptal-anvil ping reviewers

diogolessa
diogolessa approved these changes Feb 24, 2025
View reviewed changes
Copy link
Contributor

@diogolessa diogolessa left a comment

Choose a reason for hiding this comment

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

I miss the storybook link, but the happo diffs are looking good 👍🏻

@denieler @diogolessa
Update .changeset/lazy-radios-train.md
dda0975 
Co-authored-by: Diogo Lessa <diogo.lessa@toptal.com>
@denieler
Copy link
Collaborator Author

I miss the storybook link, but the happo diffs are looking good 👍🏻

@diogolessa the temploy is http://picasso.toptal.net/bill-fix-table-paddings

@denieler denieler requested a review from a team February 24, 2025 18:46
@denieler
Copy link
Collaborator Author

@toptal-anvil ping reviewers

@denieler denieler enabled auto-merge (squash) February 24, 2025 19:18
@denieler denieler disabled auto-merge February 24, 2025 19:19
@denieler denieler merged commit 7447748 into master Feb 24, 2025
17 checks passed
@denieler denieler deleted the bill-fix-table-paddings branch February 24, 2025 19:19
@toptal-build toptal-build mentioned this pull request Feb 24, 2025
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rocodesign rocodesign rocodesign approved these changes

@diogolessa diogolessa diogolessa approved these changes

@denys-medynskyi denys-medynskyi denys-medynskyi approved these changes

Assignees

@denieler denieler

Labels
no-jira
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@denieler @toptal-devbot @rocodesign @diogolessa @denys-medynskyi