From 316750d9798847af45672dc4119b19e83ef81ee7 Mon Sep 17 00:00:00 2001 From: david0xd Date: Mon, 25 Sep 2023 10:55:31 +0200 Subject: [PATCH 1/7] Fix dropdown for multiple transaction insight snaps --- .../tabs/snaps/dropdown-tab/dropdown-tab.js | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js index bbb48602c70f..4e6429d5d0ea 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js @@ -4,14 +4,14 @@ import classnames from 'classnames'; import Box from '../../../box'; import { AlignItems, - BLOCK_SIZES, + BlockSize, BackgroundColor, BorderColor, BorderRadius, BorderStyle, - DISPLAY, - FLEX_DIRECTION, - FLEX_WRAP, + Display, + FlexDirection, + FlexWrap, TextVariant, } from '../../../../../helpers/constants/design-system'; import { Icon, IconName, IconSize, Text } from '../../../../component-library'; @@ -43,6 +43,10 @@ export const DropdownTab = ({ const openDropdown = (event) => { event.preventDefault(); setIsOpen(true); + }; + + const onTabClick = (event) => { + event.preventDefault(); onClick(tabIndex); }; @@ -75,11 +79,11 @@ export const DropdownTab = ({ [activeClassName]: activeClassName && isActive, })} data-testid={dataTestId} - onClick={openDropdown} + onClick={onTabClick} dataTestId={dataTestId} - flexDirection={FLEX_DIRECTION.ROW} - flexWrap={FLEX_WRAP.NO_WRAP} - height={BLOCK_SIZES.FULL} + flexDirection={FlexDirection.Row} + flexWrap={FlexWrap.NoWrap} + height={BlockSize.Full} style={{ cursor: 'pointer', overflow: 'hidden' }} title={selectedOptionName} > @@ -94,7 +98,12 @@ export const DropdownTab = ({ > {selectedOptionName} - + {isOpen && ( From 9a6293fb8acdd622868438d628bd18d591a3d2da Mon Sep 17 00:00:00 2001 From: david0xd Date: Mon, 25 Sep 2023 11:12:06 +0200 Subject: [PATCH 2/7] Fix unit test --- ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js index 61b19a847a64..181e6a4502b7 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js @@ -36,7 +36,7 @@ describe('DropdownTab', () => { it('registers selection', () => { const { container, getByText } = render(); - fireEvent.click(container.firstChild); + fireEvent.click(container.firstChild.firstChild.lastChild); const element = getByText(args.options[1].name); From af78ab0ad9d75b8a2130bded21049c072354d32c Mon Sep 17 00:00:00 2001 From: david0xd Date: Mon, 25 Sep 2023 12:57:46 +0200 Subject: [PATCH 3/7] Increase clickable area around the icon --- .../ui/tabs/snaps/dropdown-tab/dropdown-tab.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js index 4e6429d5d0ea..d1109fcea901 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js @@ -98,12 +98,14 @@ export const DropdownTab = ({ > {selectedOptionName} - + > + + {isOpen && ( Date: Mon, 25 Sep 2023 13:11:21 +0200 Subject: [PATCH 4/7] Refactor UI components --- .../ui/tabs/snaps/dropdown-tab/dropdown-tab.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js index d1109fcea901..3e66eb3f1705 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js @@ -1,7 +1,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import Box from '../../../box'; import { AlignItems, BlockSize, @@ -14,7 +13,13 @@ import { FlexWrap, TextVariant, } from '../../../../../helpers/constants/design-system'; -import { Icon, IconName, IconSize, Text } from '../../../../component-library'; +import { + Box, + Icon, + IconName, + IconSize, + Text, +} from '../../../../component-library'; export const DropdownTab = ({ activeClassName, @@ -87,7 +92,7 @@ export const DropdownTab = ({ style={{ cursor: 'pointer', overflow: 'hidden' }} title={selectedOptionName} > - + Date: Mon, 25 Sep 2023 15:09:00 +0200 Subject: [PATCH 5/7] Remove left margin from the icon box --- ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js index 3e66eb3f1705..bed0807019f3 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js @@ -103,12 +103,7 @@ export const DropdownTab = ({ > {selectedOptionName} - + From e8c9d061e4bf4fec71ea05c5687ff5e770f0df8f Mon Sep 17 00:00:00 2001 From: david0xd Date: Tue, 26 Sep 2023 10:35:51 +0200 Subject: [PATCH 6/7] Fix tab text alignment --- .../ui/tabs/snaps/dropdown-tab/dropdown-tab.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js index bed0807019f3..b3dc61fa4920 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.js @@ -92,7 +92,7 @@ export const DropdownTab = ({ style={{ cursor: 'pointer', overflow: 'hidden' }} title={selectedOptionName} > - + {selectedOptionName} - + From 51820329779cde2bba96cdeb0a9bc0e6667cfdbd Mon Sep 17 00:00:00 2001 From: david0xd Date: Tue, 26 Sep 2023 10:44:47 +0200 Subject: [PATCH 7/7] Refactor unit test --- .../ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js index 181e6a4502b7..ba0fb4d8c812 100644 --- a/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js +++ b/ui/components/ui/tabs/snaps/dropdown-tab/dropdown-tab.test.js @@ -36,7 +36,10 @@ describe('DropdownTab', () => { it('registers selection', () => { const { container, getByText } = render(); - fireEvent.click(container.firstChild.firstChild.lastChild); + // Find the clickable element (icon box) in the dropdown that contains + // ArrowDown icon by walking the nested elements + const clickableIconBox = container.firstChild.firstChild.lastChild; + fireEvent.click(clickableIconBox); const element = getByText(args.options[1].name);