From 6656e059c3045434461226ad16372a84dd9f0d49 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Fri, 23 Feb 2024 17:23:34 +0100 Subject: [PATCH] refactor(dropdown): update animations --- .../select-account-button.tsx | 5 ++- .../hooks/use-recipient-select-fields.tsx | 14 ++++++- .../recipient-type-dropdown.tsx | 23 ++++-------- .../dowpdown-menu/dropdown-menu.stories.tsx | 9 +---- .../dowpdown-menu/dropdown-menu.tsx | 37 ++++++++++++------- tests/page-object-models/send.page.ts | 5 +++ tests/selectors/send.selectors.ts | 1 + tests/specs/send/send-stx.spec.ts | 2 +- theme/keyframes.ts | 4 ++ 9 files changed, 58 insertions(+), 42 deletions(-) diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx index b1fa98ed341..ccac6bc90d2 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/select-account-button.tsx @@ -14,9 +14,10 @@ export function SelectAccountButton({ onClick, ...props }: SelectAccountButtonPr return ( preventFocusOfUnderlyingInput(e)} diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx index 0607daecd73..321c7ef3c7f 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-fields/hooks/use-recipient-select-fields.tsx @@ -4,13 +4,25 @@ import { useNavigate } from 'react-router-dom'; import { useFormikContext } from 'formik'; import { RouteUrls } from '@shared/route-urls'; +import type { Entries } from '@shared/utils/type-utils'; import { useRecipientBnsName } from './use-recipient-bns-name'; -export const recipientIdentifierTypesMap = { bnsName: 'BNS Name', address: 'Address' } as const; +const recipientIdentifierTypesMap = { address: 'Address', bnsName: 'BNS Name' } as const; export type RecipientIdentifierType = keyof typeof recipientIdentifierTypesMap; +function makeIteratbleListOfRecipientIdentifierTypes( + recipientTypeMap: typeof recipientIdentifierTypesMap +) { + return (Object.entries(recipientTypeMap) as Entries).map( + ([key, value]) => ({ key, label: value }) + ); +} +export const recipientIdentifierTypes = makeIteratbleListOfRecipientIdentifierTypes( + recipientIdentifierTypesMap +); + export function useRecipientSelectFields() { const { setFieldError, setFieldTouched, setFieldValue } = useFormikContext(); diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx index 3e5aa059aa8..ee9ecdc1f36 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-type-dropdown/recipient-type-dropdown.tsx @@ -1,4 +1,4 @@ -import type { Entries } from '@shared/utils/type-utils'; +import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { DropdownMenu } from '@app/ui/components/dowpdown-menu/dropdown-menu'; import { Flag } from '@app/ui/components/flag/flag'; @@ -6,20 +6,9 @@ import { ChevronDownIcon } from '@app/ui/icons'; import { type RecipientIdentifierType, - recipientIdentifierTypesMap, + recipientIdentifierTypes, } from '../recipient-fields/hooks/use-recipient-select-fields'; -function makeIteratbleListOfRecipientIdentifierTypes( - recipientTypeMap: typeof recipientIdentifierTypesMap -) { - return (Object.entries(recipientTypeMap) as Entries).map( - ([key, value]) => ({ key, label: value }) - ); -} -const recipientIdentifierTypes = makeIteratbleListOfRecipientIdentifierTypes( - recipientIdentifierTypesMap -); - interface RecipientIdentifierTypeDropdownProps { activeRecipientIdentifierType: string; onSelectRecipientIdentifierType(recipientType: RecipientIdentifierType): void; @@ -28,13 +17,15 @@ export function RecipientIdentifierTypeDropdown(props: RecipientIdentifierTypeDr const { activeRecipientIdentifierType, onSelectRecipientIdentifierType } = props; return ( - + } spacing="space.01" - color="accent.text-primary" - _hover={{ color: 'accent.action-primary-hover' }} + color="ink.text-primary" + _hover={{ color: 'ink.action-primary-hover' }} > {activeRecipientIdentifierType} diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx index 520f8db74c4..493e456aa0c 100644 --- a/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx +++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { HStack, styled } from 'leather-styles/jsx'; -import { ChevronDownIcon } from '../../icons/chevron-down-icon'; import { PlaceholderIcon } from '../../icons/placeholder-icon'; import { DropdownMenu as Component, DropdownMenuItem } from './dropdown-menu'; import { DropdownMenuItemLayout } from './dropdown-menu-item.layout'; @@ -21,12 +20,7 @@ export const DropdownMenu: Story = { render: () => ( - - - Options - - - + Button @@ -41,7 +35,6 @@ export const DropdownMenu: Story = { {item.label} } - contentRight={} /> ))} diff --git a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx index f761b491516..f19ca68a091 100644 --- a/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx +++ b/src/app/ui/components/dowpdown-menu/dropdown-menu.tsx @@ -4,6 +4,9 @@ import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu'; import { css } from 'leather-styles/css'; import { type HTMLStyledProps, styled } from 'leather-styles/jsx'; +import { ChevronDownIcon } from '@app/ui/icons'; + +import { Flag } from '../flag/flag'; import { itemBaseStyles, itemInteractiveStyles } from '../item/item-interactive'; export interface DropdownMenuItem { @@ -11,7 +14,6 @@ export interface DropdownMenuItem { iconRight?: ReactNode; label: string; } - const dropdownButtonStyles = css({ bg: 'ink.background-primary', borderRadius: 'xs', @@ -21,31 +23,38 @@ const dropdownButtonStyles = css({ px: 'space.04', py: 'space.03', textStyle: 'label.02', - '[data-state=open] &': { - bg: 'ink.component-background-pressed', - }, + userSelect: 'none', + '[data-state=open] &': { bg: 'ink.component-background-pressed' }, }); -function Button(props: HTMLStyledProps<'button'>) { - return ; +function Button({ children, ...props }: HTMLStyledProps<'div'>) { + return ( + + }> + {children} + + + ); } +const dropdownTriggerStyles = css({ + _focus: { outline: 'none' }, +}); +const Trigger: typeof RadixDropdownMenu.Trigger = forwardRef((props, ref) => ( + +)); + const dropdownContentStyles = css({ alignItems: 'center', - animationDuration: '400ms', - animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)', '--base-menu-padding': '0px', bg: 'ink.background-primary', borderRadius: 'xs', boxShadow: '0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)', - minWidth: '256px', p: 'space.02', willChange: 'transform, opacity', zIndex: 999, - - '&[data-side=bottom]': { - animationName: 'slideUpAndFade', - }, + _closed: { animation: 'slideDownAndOut 140ms ease-in-out' }, + _open: { animation: 'slideUpAndFade 140ms ease-in-out' }, }); const Content: typeof RadixDropdownMenu.Content = forwardRef((props, ref) => ( @@ -83,9 +92,9 @@ const Separator: typeof RadixDropdownMenu.Separator = forwardRef((props, ref) => export const DropdownMenu = { Root: RadixDropdownMenu.Root, - Trigger: RadixDropdownMenu.Trigger, Group: RadixDropdownMenu.Group, Portal: RadixDropdownMenu.Portal, + Trigger, Button, Content, Label, diff --git a/tests/page-object-models/send.page.ts b/tests/page-object-models/send.page.ts index 18030bb1bac..edb0b419c57 100644 --- a/tests/page-object-models/send.page.ts +++ b/tests/page-object-models/send.page.ts @@ -16,6 +16,7 @@ export class SendPage { readonly memoInput: Locator; readonly previewSendTxButton: Locator; readonly recipientChooseAccountButton: Locator; + readonly recipientSelectRecipientTypeDropdown: Locator; readonly recipientSelectFieldAddress: Locator; readonly recipientSelectFieldBnsName: Locator; readonly recipientInput: Locator; @@ -44,6 +45,10 @@ export class SendPage { this.recipientChooseAccountButton = page.getByTestId( SendCryptoAssetSelectors.RecipientChooseAccountButton ); + this.page.getByTestId(SendCryptoAssetSelectors.RecipientSelectFieldAddress); + this.recipientSelectRecipientTypeDropdown = this.page.getByTestId( + SendCryptoAssetSelectors.RecipientSelectRecipientTypeDropdown + ); this.recipientSelectFieldAddress = this.page.getByTestId( SendCryptoAssetSelectors.RecipientSelectFieldAddress ); diff --git a/tests/selectors/send.selectors.ts b/tests/selectors/send.selectors.ts index 6daf0aea9f7..86b14011e58 100644 --- a/tests/selectors/send.selectors.ts +++ b/tests/selectors/send.selectors.ts @@ -13,6 +13,7 @@ export enum SendCryptoAssetSelectors { MemoFieldInput = 'memo-field-input', PreviewSendTxBtn = 'preview-send-tx-btn', RecipientChooseAccountButton = 'recipient-choose-account-button', + RecipientSelectRecipientTypeDropdown = 'recipient-select-field-dropdown-button', RecipientSelectFieldAddress = 'recipient-select-field-address', RecipientSelectFieldBnsName = 'recipient-select-field-bnsName', RecipientFieldInput = 'recipient-field-input', diff --git a/tests/specs/send/send-stx.spec.ts b/tests/specs/send/send-stx.spec.ts index c48be77231b..d4a6d104040 100644 --- a/tests/specs/send/send-stx.spec.ts +++ b/tests/specs/send/send-stx.spec.ts @@ -190,7 +190,7 @@ test.describe('send stx', () => { test('that recipient address matches bns name', async () => { await sPage.amountInput.fill('.0001'); await sPage.amountInput.blur(); - await sPage.recipientSelectFieldAddress.click(); + await sPage.recipientSelectRecipientTypeDropdown.click(); await sPage.recipientSelectFieldBnsName.click(); await sPage.recipientInput.fill(TEST_BNS_NAME); await sPage.recipientInput.blur(); diff --git a/theme/keyframes.ts b/theme/keyframes.ts index d82a4737e3d..cb3c6e181da 100644 --- a/theme/keyframes.ts +++ b/theme/keyframes.ts @@ -4,4 +4,8 @@ import { CssKeyframes } from 'leather-styles/types/system-types'; // ts-unused-exports:disable-next-line export const keyframes: CssKeyframes = { ...leatherKeyframes, + slideDownAndOut: { + from: { opacity: 1, transform: 'translateY(0)' }, + to: { opacity: 0, transform: 'translateY(4px)' }, + }, };