PANGOLIN-3680: data table settings menu #2797

kterry1 · 2024-04-26T15:00:16Z

Summary

The DataTableManager's table settings has been replaced with the new DropdownMenu component and the tooltip as been added.

changeset-bot · 2024-04-26T15:00:19Z

🦋 Changeset detected

Latest commit: 2e9599d

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

This PR includes changesets to release 96 packages

Name	Type
@commercetools-uikit/data-table-manager	Minor
@commercetools-frontend/ui-kit	Minor
@commercetools-uikit/design-system	Minor
@commercetools-uikit/calendar-time-utils	Minor
@commercetools-uikit/calendar-utils	Minor
@commercetools-uikit/hooks	Minor
@commercetools-uikit/i18n	Minor
@commercetools-uikit/localized-utils	Minor
@commercetools-uikit/utils	Minor
@commercetools-uikit/accessible-hidden	Minor
@commercetools-uikit/avatar	Minor
@commercetools-uikit/card	Minor
@commercetools-uikit/collapsible-motion	Minor
@commercetools-uikit/collapsible-panel	Minor
@commercetools-uikit/collapsible	Minor
@commercetools-uikit/constraints	Minor
@commercetools-uikit/data-table	Minor
@commercetools-uikit/field-errors	Minor
@commercetools-uikit/field-label	Minor
@commercetools-uikit/field-warnings	Minor
@commercetools-uikit/grid	Minor
@commercetools-uikit/icons	Minor
@commercetools-uikit/label	Minor
@commercetools-uikit/link	Minor
@commercetools-uikit/loading-spinner	Minor
@commercetools-uikit/messages	Minor
@commercetools-uikit/notifications	Minor
@commercetools-uikit/pagination	Minor
@commercetools-uikit/primary-action-dropdown	Minor
@commercetools-uikit/progress-bar	Minor
@commercetools-uikit/stamp	Minor
@commercetools-uikit/tag	Minor
@commercetools-uikit/text	Minor
@commercetools-uikit/tooltip	Minor
@commercetools-uikit/view-switcher	Minor
@commercetools-uikit/accessible-button	Minor
@commercetools-uikit/flat-button	Minor
@commercetools-uikit/icon-button	Minor
@commercetools-uikit/link-button	Minor
@commercetools-uikit/primary-button	Minor
@commercetools-uikit/secondary-button	Minor
@commercetools-uikit/secondary-icon-button	Minor
@commercetools-uikit/dropdown-menu	Minor
@commercetools-uikit/async-creatable-select-field	Minor
@commercetools-uikit/async-select-field	Minor
@commercetools-uikit/creatable-select-field	Minor
@commercetools-uikit/date-field	Minor
@commercetools-uikit/date-range-field	Minor
@commercetools-uikit/date-time-field	Minor
@commercetools-uikit/localized-multiline-text-field	Minor
@commercetools-uikit/localized-text-field	Minor
@commercetools-uikit/money-field	Minor
@commercetools-uikit/multiline-text-field	Minor
@commercetools-uikit/number-field	Minor
@commercetools-uikit/password-field	Minor
@commercetools-uikit/radio-field	Minor
@commercetools-uikit/search-select-field	Minor
@commercetools-uikit/select-field	Minor
@commercetools-uikit/text-field	Minor
@commercetools-uikit/time-field	Minor
@commercetools-uikit/async-creatable-select-input	Minor
@commercetools-uikit/async-select-input	Minor
@commercetools-uikit/checkbox-input	Minor
@commercetools-uikit/creatable-select-input	Minor
@commercetools-uikit/date-input	Minor
@commercetools-uikit/date-range-input	Minor
@commercetools-uikit/date-time-input	Minor
@commercetools-uikit/input-utils	Minor
@commercetools-uikit/localized-money-input	Minor
@commercetools-uikit/localized-multiline-text-input	Minor
@commercetools-uikit/localized-rich-text-input	Minor
@commercetools-uikit/localized-text-input	Minor
@commercetools-uikit/money-input	Minor
@commercetools-uikit/multiline-text-input	Minor
@commercetools-uikit/number-input	Minor
@commercetools-uikit/password-input	Minor
@commercetools-uikit/radio-input	Minor
@commercetools-uikit/rich-text-input	Minor
@commercetools-uikit/rich-text-utils	Minor
@commercetools-uikit/search-select-input	Minor
@commercetools-uikit/search-text-input	Minor
@commercetools-uikit/select-input	Minor
@commercetools-uikit/select-utils	Minor
@commercetools-uikit/selectable-search-input	Minor
@commercetools-uikit/text-input	Minor
@commercetools-uikit/time-input	Minor
@commercetools-uikit/toggle-input	Minor
@commercetools-uikit/spacings-inline	Minor
@commercetools-uikit/spacings-inset-squish	Minor
@commercetools-uikit/spacings-inset	Minor
@commercetools-uikit/spacings-stack	Minor
@commercetools-uikit/buttons	Minor
@commercetools-uikit/fields	Minor
@commercetools-uikit/inputs	Minor
@commercetools-uikit/spacings	Minor
visual-testing-app	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

vercel · 2024-04-26T15:00:22Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2024 7:55am

packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx

kterry1 · 2024-04-26T15:04:04Z

packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx

+                triggerElement={
+                  <IconButton icon={<ColumnsIcon />} label="list" />
+                }
+                menuHorizontalConstraint={4}


menuHorizontalContraint with value of 3 would wrap the text in the dropdown so I upped it to 4 as that was the closest I could get to the design and ensuring no wrapping occurred.

I think we need to tag @FilPob here to approve of this decision.

I think that's a good option, but bear in mind this adjustment works for english translation but might not work for other languages.
For instance, if we use portuguese, the text will be wrapped anyway.

ddouglasz

Awesome work 💯
Please remember to add a changeset 🙏🏾.

ddouglasz · 2024-04-26T15:35:29Z

packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx

+                triggerElement={
+                  <IconButton icon={<ColumnsIcon />} label="list" />
+                }
+                menuHorizontalConstraint={4}


I think we need to tag @FilPob here to approve of this decision.

.changeset/slimy-kangaroos-hammer.md

FilPob · 2024-04-29T09:25:56Z

@kterry1 Could you please try to set the menuHorizontalConstraint to auto ? By that the menu should wrap around the content regardless of it's length

CarlosCortizasCT · 2024-04-29T10:18:11Z

I think we should not merge this PR until this issue is fixed.
If we do, we will be releasing a change which will contain a know bug and will downgrade our user experience.

kterry1 · 2024-04-29T12:47:54Z

@kterry1 Could you please try to set the menuHorizontalConstraint to auto ? By that the menu should wrap around the content regardless of it's length

@FilPob done!

kterry1 · 2024-04-29T12:48:39Z

I think we should not merge this PR until this issue is fixed. If we do, we will be releasing a change which will contain a know bug and will downgrade our user experience.

@CarlosCortizasCT Is Shield planning on working on this, or is this something Pangolin Team needs to pull in?

CarlosCortizasCT · 2024-04-29T13:03:19Z

I think we should not merge this PR until this issue is fixed. If we do, we will be releasing a change which will contain a know bug and will downgrade our user experience.

@CarlosCortizasCT Is Shield planning on working on this, or is this something Pangolin Team needs to pull in?

Hi @kterry1

We will work on it and we will try to do it this week (reference).

CarlosCortizasCT · 2024-05-02T13:13:11Z

@kterry1 We've just merged a fix for the issues I commented on Monday so it's good to move forward with this one.

CarlosCortizasCT

Looks good to me 👍

Thanks Kevin!

kterry1 self-assigned this Apr 26, 2024

kterry1 commented Apr 26, 2024

View reviewed changes

packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx Show resolved Hide resolved

kterry1 commented Apr 26, 2024

View reviewed changes

kterry1 marked this pull request as ready for review April 26, 2024 15:06

kterry1 requested a review from a team April 26, 2024 15:06

ddouglasz reviewed Apr 26, 2024

View reviewed changes

kterry1 requested a review from FilPob April 26, 2024 15:47

vercel bot deployed to Preview April 26, 2024 15:47 View deployment

ddouglasz reviewed Apr 26, 2024

View reviewed changes

.changeset/slimy-kangaroos-hammer.md Outdated Show resolved Hide resolved

kterry1 force-pushed the feat/PANGOLIN-3680-data-table-settings-menu branch from 6b7fee4 to dcad9a7 Compare April 28, 2024 15:30

kterry1 requested a review from ddouglasz April 28, 2024 15:30

vercel bot deployed to Preview April 28, 2024 15:32 View deployment

vercel bot had a problem deploying to Preview April 28, 2024 15:38 Failure

vercel bot deployed to Preview April 28, 2024 15:46 View deployment

vercel bot deployed to Preview April 29, 2024 02:21 View deployment

vercel bot deployed to Preview April 29, 2024 02:29 View deployment

vercel bot deployed to Preview April 29, 2024 12:49 View deployment

kterry1 force-pushed the feat/PANGOLIN-3680-data-table-settings-menu branch from d7127f7 to 195417a Compare April 29, 2024 12:54

vercel bot deployed to Preview April 29, 2024 12:56 View deployment

kterry1 added the 🖐 Status: On Hold label Apr 29, 2024

kterry1 added 2 commits May 3, 2024 11:46

feat(data-table-settings): replaced select-input with dropdown-menu

b5b6d00

chore(data-table-settings): moved type with other types

d80f1a6

kterry1 added 7 commits May 3, 2024 11:46

chore(changeset): added changeset

e3e83cc

chore(changeset): updated changeset

90b0f02

chore(yarn.lock): updated per deps

23845e8

test(data-table-manager): updated rtl tests to fit new dropdown

7d8ff06

test(data-table-manager): update rtl test per accidental line deletion

a4f0d80

chore(data-table-settings): updated dropdownMenu constraint

8389824

chore(package.json): updated dep versions

16d35f7

kterry1 force-pushed the feat/PANGOLIN-3680-data-table-settings-menu branch from 195417a to 16d35f7 Compare May 3, 2024 15:46

kterry1 requested a review from CarlosCortizasCT May 3, 2024 15:47

kterry1 removed the 🖐 Status: On Hold label May 3, 2024

vercel bot deployed to Preview May 3, 2024 15:48 View deployment

FilPob approved these changes May 6, 2024

View reviewed changes

CarlosCortizasCT approved these changes May 7, 2024

View reviewed changes

chloe0592 approved these changes May 8, 2024

View reviewed changes

Merge branch 'main' into feat/PANGOLIN-3680-data-table-settings-menu

2e9599d

vercel bot deployed to Preview May 8, 2024 07:55 View deployment

CarlosCortizasCT merged commit 8c0c1c8 into main May 8, 2024
7 checks passed

CarlosCortizasCT deleted the feat/PANGOLIN-3680-data-table-settings-menu branch May 8, 2024 07:58

ct-changesets bot mentioned this pull request May 8, 2024

Version Packages #2800

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PANGOLIN-3680: data table settings menu #2797

PANGOLIN-3680: data table settings menu #2797

kterry1 commented Apr 26, 2024 •

edited

Loading

changeset-bot bot commented Apr 26, 2024 •

edited

Loading

vercel bot commented Apr 26, 2024 •

edited

Loading

kterry1 Apr 26, 2024

ddouglasz Apr 26, 2024 •

edited

Loading

CarlosCortizasCT Apr 29, 2024

ddouglasz left a comment

ddouglasz Apr 26, 2024 •

edited

Loading

FilPob commented Apr 29, 2024

CarlosCortizasCT commented Apr 29, 2024

kterry1 commented Apr 29, 2024

kterry1 commented Apr 29, 2024

CarlosCortizasCT commented Apr 29, 2024

CarlosCortizasCT commented May 2, 2024

CarlosCortizasCT left a comment

PANGOLIN-3680: data table settings menu #2797

PANGOLIN-3680: data table settings menu #2797

Conversation

kterry1 commented Apr 26, 2024 • edited Loading

Summary

changeset-bot bot commented Apr 26, 2024 • edited Loading

🦋 Changeset detected

vercel bot commented Apr 26, 2024 • edited Loading

kterry1 Apr 26, 2024

Choose a reason for hiding this comment

ddouglasz Apr 26, 2024 • edited Loading

Choose a reason for hiding this comment

CarlosCortizasCT Apr 29, 2024

Choose a reason for hiding this comment

ddouglasz left a comment

Choose a reason for hiding this comment

ddouglasz Apr 26, 2024 • edited Loading

Choose a reason for hiding this comment

FilPob commented Apr 29, 2024

CarlosCortizasCT commented Apr 29, 2024

kterry1 commented Apr 29, 2024

kterry1 commented Apr 29, 2024

CarlosCortizasCT commented Apr 29, 2024

CarlosCortizasCT commented May 2, 2024

CarlosCortizasCT left a comment

Choose a reason for hiding this comment

kterry1 commented Apr 26, 2024 •

edited

Loading

changeset-bot bot commented Apr 26, 2024 •

edited

Loading

vercel bot commented Apr 26, 2024 •

edited

Loading

ddouglasz Apr 26, 2024 •

edited

Loading

ddouglasz Apr 26, 2024 •

edited

Loading