From b5b6d0031f2ec83badcfda2908524b49caf6249e Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Thu, 25 Apr 2024 22:23:56 -0400 Subject: [PATCH 1/9] feat(data-table-settings): replaced select-input with dropdown-menu --- .../data-table-settings.tsx | 64 ++++++++++--------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx index 75e6cde649..20e6f45eef 100644 --- a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx +++ b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx @@ -3,10 +3,8 @@ import { warning } from '@commercetools-uikit/utils'; import { useIntl, type MessageDescriptor } from 'react-intl'; import styled from '@emotion/styled'; import AccessibleHidden from '@commercetools-uikit/accessible-hidden'; -import SelectInput from '@commercetools-uikit/select-input'; -import { TableIcon } from '@commercetools-uikit/icons'; +import { ColumnsIcon } from '@commercetools-uikit/icons'; import Spacings from '@commercetools-uikit/spacings'; -import { designTokens } from '@commercetools-uikit/design-system'; import { UPDATE_ACTIONS, COLUMN_MANAGER, DISPLAY_SETTINGS } from '../constants'; import DisplaySettingsManager, { DENSITY_COMPACT, @@ -14,6 +12,9 @@ import DisplaySettingsManager, { } from '../display-settings-manager'; import ColumnSettingsManager from '../column-settings-manager'; import messages from './messages'; +import DropdownMenu from '@commercetools-uikit/dropdown-menu'; +import IconButton from '@commercetools-uikit/icon-button'; +import Tooltip from '@commercetools-uikit/tooltip'; export type TSelectChangeEvent = { target: { @@ -121,17 +122,15 @@ export type TDataTableSettingsProps = { managerTheme?: 'light' | 'dark'; }; -/* The horizontal constraint is set on this container instead of the SelectInput -because the input is always empty, and therefore doesn't take any space by itself -but we want to keep enough space for the placeholder to be readable */ -const SelectContainer = styled.div` - min-width: ${designTokens.constraint4}; -`; - const TopBarContainer = styled.div` flex-grow: 1; `; +export type TDropdownOption = { + value: string; + label: string; +}; + export const getDropdownOptions = ({ areColumnSettingsEnabled, areDisplaySettingsEnabled, @@ -191,20 +190,12 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { const [openedPanelId, setOpenedPanelId] = useState( null ); - - const dropdownOptions = getDropdownOptions({ + const dropdownOptions: TDropdownOption[] = getDropdownOptions({ areDisplaySettingsEnabled, areColumnSettingsEnabled, formatMessage: intl.formatMessage, }); - const handleDropdownChange = (event: TSelectChangeEvent) => - setOpenedPanelId( - Array.isArray(event.target.value) - ? event.target.value[0] - : event.target.value - ); - const mappedColumns = getMappedColumns( areColumnSettingsEnabled ? props.columnManager!.hideableColumns : undefined ); @@ -223,23 +214,34 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { {props.topBar} {dropdownOptions.length > 0 && ( - + <> - } - /> - + + } label="list" /> + } + menuHorizontalConstraint={4} + menuPosition="right" + menuType="list" + > + {dropdownOptions?.map((option: TDropdownOption) => ( + { + setOpenedPanelId(option?.value); + }} + > + {option?.label} + + ))} + + + )} {openedPanelId === DISPLAY_SETTINGS && ( From d80f1a6db69101065fdc54a272cfc79d2659a73f Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Thu, 25 Apr 2024 22:26:02 -0400 Subject: [PATCH 2/9] chore(data-table-settings): moved type with other types --- .../src/data-table-settings/data-table-settings.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx index 20e6f45eef..d96d55ed61 100644 --- a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx +++ b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx @@ -122,15 +122,15 @@ export type TDataTableSettingsProps = { managerTheme?: 'light' | 'dark'; }; -const TopBarContainer = styled.div` - flex-grow: 1; -`; - export type TDropdownOption = { value: string; label: string; }; +const TopBarContainer = styled.div` + flex-grow: 1; +`; + export const getDropdownOptions = ({ areColumnSettingsEnabled, areDisplaySettingsEnabled, From e3e83ccc16865e0619cca04ccf3d54027e981020 Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Fri, 26 Apr 2024 11:45:24 -0400 Subject: [PATCH 3/9] chore(changeset): added changeset --- .changeset/slimy-kangaroos-hammer.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slimy-kangaroos-hammer.md diff --git a/.changeset/slimy-kangaroos-hammer.md b/.changeset/slimy-kangaroos-hammer.md new file mode 100644 index 0000000000..4ff061b19e --- /dev/null +++ b/.changeset/slimy-kangaroos-hammer.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/data-table-manager': minor +--- + +feat(data-table-settings): added new dropDownMenu to dataTableManager From 90b0f020f03430d147ddfa53d3acb381845202ca Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Sun, 28 Apr 2024 11:29:23 -0400 Subject: [PATCH 4/9] chore(changeset): updated changeset --- .changeset/slimy-kangaroos-hammer.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/slimy-kangaroos-hammer.md b/.changeset/slimy-kangaroos-hammer.md index 4ff061b19e..ada449b22b 100644 --- a/.changeset/slimy-kangaroos-hammer.md +++ b/.changeset/slimy-kangaroos-hammer.md @@ -2,4 +2,4 @@ '@commercetools-uikit/data-table-manager': minor --- -feat(data-table-settings): added new dropDownMenu to dataTableManager +replace the dataTableManager SelectInput with the new dropDownMenu component From 23845e80488c9f3c27e991cbf8558bbaeba36150 Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Sun, 28 Apr 2024 11:44:06 -0400 Subject: [PATCH 5/9] chore(yarn.lock): updated per deps --- .../data-table-manager/package.json | 3 +++ yarn.lock | 25 +++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/packages/components/data-table-manager/package.json b/packages/components/data-table-manager/package.json index 1e0e5ad67e..c5c5aa6cf7 100644 --- a/packages/components/data-table-manager/package.json +++ b/packages/components/data-table-manager/package.json @@ -40,6 +40,9 @@ "@commercetools-uikit/tag": "19.2.0", "@commercetools-uikit/text": "19.2.0", "@commercetools-uikit/utils": "19.2.0", + "@commercetools-uikit/dropdown-menu": "19.2.0", + "@commercetools-uikit/icon-button": "19.2.0", + "@commercetools-uikit/tooltip": "19.2.0", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "debounce-promise": "^3.1.2", diff --git a/yarn.lock b/yarn.lock index 8999b1165c..6286e4103d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2571,6 +2571,7 @@ __metadata: dependencies: "@babel/runtime": ^7.20.13 "@babel/runtime-corejs3": ^7.20.13 +<<<<<<< HEAD "@commercetools-uikit/accessible-button": 19.2.0 "@commercetools-uikit/accessible-hidden": 19.2.0 "@commercetools-uikit/async-select-input": 19.2.0 @@ -2590,6 +2591,30 @@ __metadata: "@commercetools-uikit/tag": 19.2.0 "@commercetools-uikit/text": 19.2.0 "@commercetools-uikit/utils": 19.2.0 +======= + "@commercetools-uikit/accessible-button": 19.1.0 + "@commercetools-uikit/accessible-hidden": 19.1.0 + "@commercetools-uikit/async-select-input": 19.1.0 + "@commercetools-uikit/card": 19.1.0 + "@commercetools-uikit/collapsible-motion": 19.1.0 + "@commercetools-uikit/design-system": 19.1.0 + "@commercetools-uikit/dropdown-menu": 19.1.0 + "@commercetools-uikit/field-label": 19.1.0 + "@commercetools-uikit/grid": 19.1.0 + "@commercetools-uikit/hooks": 19.1.0 + "@commercetools-uikit/icon-button": 19.1.0 + "@commercetools-uikit/icons": 19.1.0 + "@commercetools-uikit/primary-button": 19.1.0 + "@commercetools-uikit/radio-input": 19.1.0 + "@commercetools-uikit/secondary-button": 19.1.0 + "@commercetools-uikit/secondary-icon-button": 19.1.0 + "@commercetools-uikit/select-input": 19.1.0 + "@commercetools-uikit/spacings": 19.1.0 + "@commercetools-uikit/tag": 19.1.0 + "@commercetools-uikit/text": 19.1.0 + "@commercetools-uikit/tooltip": 19.1.0 + "@commercetools-uikit/utils": 19.1.0 +>>>>>>> 20d76ce14 (chore(yarn.lock): updated per deps) "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 "@types/debounce-promise": ^3.1.6 From 7d8ff0679fa866474e2a63dc5048ef655bd433be Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Sun, 28 Apr 2024 22:18:34 -0400 Subject: [PATCH 6/9] test(data-table-manager): updated rtl tests to fit new dropdown --- .../src/data-table-manager.spec.js | 16 ++---- .../data-table-settings.tsx | 56 +++++++++---------- 2 files changed, 33 insertions(+), 39 deletions(-) diff --git a/packages/components/data-table-manager/src/data-table-manager.spec.js b/packages/components/data-table-manager/src/data-table-manager.spec.js index 892e0a25ec..655c1cacba 100644 --- a/packages/components/data-table-manager/src/data-table-manager.spec.js +++ b/packages/components/data-table-manager/src/data-table-manager.spec.js @@ -86,8 +86,10 @@ describe('rendering', () => { ); fireEvent.focus(selectDropdown); - fireEvent.change(selectDropdown, { target: { value: 'display' } }); - fireEvent.keyDown(selectDropdown, { key: 'Enter', keyCode: 13, which: 13 }); + const layoutSettingsOption = await screen.findByLabelText( + 'Layout settings' + ); + fireEvent.click(layoutSettingsOption); await screen.findByText('Table layout settings'); @@ -131,14 +133,8 @@ describe('rendering', () => { ); fireEvent.focus(selectDropdown); - fireEvent.change(selectDropdown, { target: { value: 'column' } }); - fireEvent.keyDown(selectDropdown, { - key: 'Enter', - keyCode: 13, - which: 13, - }); - - await screen.findByText('Column Manager'); + const columnManagerOption = await screen.findByLabelText('Column manager'); + fireEvent.click(columnManagerOption); screen.getByLabelText('Hidden columns'); expect( diff --git a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx index d96d55ed61..33a9cd837f 100644 --- a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx +++ b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx @@ -2,7 +2,6 @@ import { useState, type ReactElement, type ReactNode } from 'react'; import { warning } from '@commercetools-uikit/utils'; import { useIntl, type MessageDescriptor } from 'react-intl'; import styled from '@emotion/styled'; -import AccessibleHidden from '@commercetools-uikit/accessible-hidden'; import { ColumnsIcon } from '@commercetools-uikit/icons'; import Spacings from '@commercetools-uikit/spacings'; import { UPDATE_ACTIONS, COLUMN_MANAGER, DISPLAY_SETTINGS } from '../constants'; @@ -214,34 +213,33 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { {props.topBar} {dropdownOptions.length > 0 && ( - <> - - - - - } label="list" /> - } - menuHorizontalConstraint={4} - menuPosition="right" - menuType="list" - > - {dropdownOptions?.map((option: TDropdownOption) => ( - { - setOpenedPanelId(option?.value); - }} - > - {option?.label} - - ))} - - - + + } + label="Open table manager dropdown" + /> + } + menuHorizontalConstraint={4} + menuPosition="right" + menuType="list" + > + {dropdownOptions?.map((option: TDropdownOption) => ( + { + setOpenedPanelId(option?.value); + }} + > + {option?.label} + + ))} + + )} {openedPanelId === DISPLAY_SETTINGS && ( From a4f0d804f6616babf40e4f82957d220a92b9ce7b Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Sun, 28 Apr 2024 22:26:23 -0400 Subject: [PATCH 7/9] test(data-table-manager): update rtl test per accidental line deletion --- .../components/data-table-manager/src/data-table-manager.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/data-table-manager/src/data-table-manager.spec.js b/packages/components/data-table-manager/src/data-table-manager.spec.js index 655c1cacba..b1f4baf74b 100644 --- a/packages/components/data-table-manager/src/data-table-manager.spec.js +++ b/packages/components/data-table-manager/src/data-table-manager.spec.js @@ -136,6 +136,7 @@ describe('rendering', () => { const columnManagerOption = await screen.findByLabelText('Column manager'); fireEvent.click(columnManagerOption); + await screen.findByText('Column Manager'); screen.getByLabelText('Hidden columns'); expect( screen.getByText('There are no hidden columns to show.') From 8389824d59ab8f3bffb094695747d4df6c18222f Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Mon, 29 Apr 2024 08:46:37 -0400 Subject: [PATCH 8/9] chore(data-table-settings): updated dropdownMenu constraint --- .../src/data-table-settings/data-table-settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx index 33a9cd837f..958dd95193 100644 --- a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx +++ b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx @@ -224,7 +224,7 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { label="Open table manager dropdown" /> } - menuHorizontalConstraint={4} + menuHorizontalConstraint={'auto'} menuPosition="right" menuType="list" > From 16d35f7967b7356232c2f0e6674161771b683137 Mon Sep 17 00:00:00 2001 From: Kevin Terry Date: Mon, 29 Apr 2024 08:54:02 -0400 Subject: [PATCH 9/9] chore(package.json): updated dep versions --- .../data-table-manager/package.json | 6 ++-- yarn.lock | 28 ++----------------- 2 files changed, 6 insertions(+), 28 deletions(-) diff --git a/packages/components/data-table-manager/package.json b/packages/components/data-table-manager/package.json index c5c5aa6cf7..36a83e6f82 100644 --- a/packages/components/data-table-manager/package.json +++ b/packages/components/data-table-manager/package.json @@ -27,9 +27,11 @@ "@commercetools-uikit/card": "19.2.0", "@commercetools-uikit/collapsible-motion": "19.2.0", "@commercetools-uikit/design-system": "19.2.0", + "@commercetools-uikit/dropdown-menu": "19.2.0", "@commercetools-uikit/field-label": "19.2.0", "@commercetools-uikit/grid": "19.2.0", "@commercetools-uikit/hooks": "19.2.0", + "@commercetools-uikit/icon-button": "19.2.0", "@commercetools-uikit/icons": "19.2.0", "@commercetools-uikit/primary-button": "19.2.0", "@commercetools-uikit/radio-input": "19.2.0", @@ -39,10 +41,8 @@ "@commercetools-uikit/spacings": "19.2.0", "@commercetools-uikit/tag": "19.2.0", "@commercetools-uikit/text": "19.2.0", - "@commercetools-uikit/utils": "19.2.0", - "@commercetools-uikit/dropdown-menu": "19.2.0", - "@commercetools-uikit/icon-button": "19.2.0", "@commercetools-uikit/tooltip": "19.2.0", + "@commercetools-uikit/utils": "19.2.0", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", "debounce-promise": "^3.1.2", diff --git a/yarn.lock b/yarn.lock index 6286e4103d..50e00221c9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2571,16 +2571,17 @@ __metadata: dependencies: "@babel/runtime": ^7.20.13 "@babel/runtime-corejs3": ^7.20.13 -<<<<<<< HEAD "@commercetools-uikit/accessible-button": 19.2.0 "@commercetools-uikit/accessible-hidden": 19.2.0 "@commercetools-uikit/async-select-input": 19.2.0 "@commercetools-uikit/card": 19.2.0 "@commercetools-uikit/collapsible-motion": 19.2.0 "@commercetools-uikit/design-system": 19.2.0 + "@commercetools-uikit/dropdown-menu": 19.2.0 "@commercetools-uikit/field-label": 19.2.0 "@commercetools-uikit/grid": 19.2.0 "@commercetools-uikit/hooks": 19.2.0 + "@commercetools-uikit/icon-button": 19.2.0 "@commercetools-uikit/icons": 19.2.0 "@commercetools-uikit/primary-button": 19.2.0 "@commercetools-uikit/radio-input": 19.2.0 @@ -2590,31 +2591,8 @@ __metadata: "@commercetools-uikit/spacings": 19.2.0 "@commercetools-uikit/tag": 19.2.0 "@commercetools-uikit/text": 19.2.0 + "@commercetools-uikit/tooltip": 19.2.0 "@commercetools-uikit/utils": 19.2.0 -======= - "@commercetools-uikit/accessible-button": 19.1.0 - "@commercetools-uikit/accessible-hidden": 19.1.0 - "@commercetools-uikit/async-select-input": 19.1.0 - "@commercetools-uikit/card": 19.1.0 - "@commercetools-uikit/collapsible-motion": 19.1.0 - "@commercetools-uikit/design-system": 19.1.0 - "@commercetools-uikit/dropdown-menu": 19.1.0 - "@commercetools-uikit/field-label": 19.1.0 - "@commercetools-uikit/grid": 19.1.0 - "@commercetools-uikit/hooks": 19.1.0 - "@commercetools-uikit/icon-button": 19.1.0 - "@commercetools-uikit/icons": 19.1.0 - "@commercetools-uikit/primary-button": 19.1.0 - "@commercetools-uikit/radio-input": 19.1.0 - "@commercetools-uikit/secondary-button": 19.1.0 - "@commercetools-uikit/secondary-icon-button": 19.1.0 - "@commercetools-uikit/select-input": 19.1.0 - "@commercetools-uikit/spacings": 19.1.0 - "@commercetools-uikit/tag": 19.1.0 - "@commercetools-uikit/text": 19.1.0 - "@commercetools-uikit/tooltip": 19.1.0 - "@commercetools-uikit/utils": 19.1.0 ->>>>>>> 20d76ce14 (chore(yarn.lock): updated per deps) "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5 "@types/debounce-promise": ^3.1.6