diff --git a/.changeset/slimy-kangaroos-hammer.md b/.changeset/slimy-kangaroos-hammer.md new file mode 100644 index 0000000000..ada449b22b --- /dev/null +++ b/.changeset/slimy-kangaroos-hammer.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/data-table-manager': minor +--- + +replace the dataTableManager SelectInput with the new dropDownMenu component diff --git a/packages/components/data-table-manager/package.json b/packages/components/data-table-manager/package.json index 1e0e5ad67e..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,6 +41,7 @@ "@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", "@emotion/react": "^11.10.5", "@emotion/styled": "^11.10.5", 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..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 @@ -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,15 +133,10 @@ describe('rendering', () => { ); fireEvent.focus(selectDropdown); - fireEvent.change(selectDropdown, { target: { value: 'column' } }); - fireEvent.keyDown(selectDropdown, { - key: 'Enter', - keyCode: 13, - which: 13, - }); + 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.') 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..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 @@ -2,11 +2,8 @@ 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 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 +11,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,12 +121,10 @@ 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}; -`; +export type TDropdownOption = { + value: string; + label: string; +}; const TopBarContainer = styled.div` flex-grow: 1; @@ -191,20 +189,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 +213,33 @@ const DataTableSettings = (props: TDataTableSettingsProps) => { {props.topBar} {dropdownOptions.length > 0 && ( - - - - - } - /> - + + } + label="Open table manager dropdown" + /> + } + menuHorizontalConstraint={'auto'} + menuPosition="right" + menuType="list" + > + {dropdownOptions?.map((option: TDropdownOption) => ( + { + setOpenedPanelId(option?.value); + }} + > + {option?.label} + + ))} + + )} {openedPanelId === DISPLAY_SETTINGS && ( diff --git a/yarn.lock b/yarn.lock index 8999b1165c..50e00221c9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2577,9 +2577,11 @@ __metadata: "@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 @@ -2589,6 +2591,7 @@ __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 "@emotion/react": ^11.10.5 "@emotion/styled": ^11.10.5