feat: ui dropdown and select, ref #4312 and #4417

package.json

@@ -131,6 +131,8 @@
     "@octokit/types": "12.0.0",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "1.0.3",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-select": "2.0.0",
     "@radix-ui/themes": "2.0.2",
     "@reduxjs/toolkit": "1.9.6",
     "@scure/base": "1.1.3",

src/app/pages/home/home.tsx

@@ -12,6 +12,9 @@ import { FeedbackButton } from '@app/features/feedback-button/feedback-button';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { homePageModalRoutes } from '@app/routes/app-routes';
 import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-wrapper';
+import { DropdownMenuExample } from '@app/ui/components/dowpdown-menu/dropdown-example';
+import { DropdownMenu } from '@app/ui/components/dowpdown-menu/dropdown-menu';
+import { SelectExample } from '@app/ui/components/select/select-example';
 
 import { CurrentAccount } from './components/account-area';
 import { HomeTabs } from './components/home-tabs';
@@ -36,6 +39,8 @@ export function Home() {
   return (
     <HomeLayout currentAccount={<CurrentAccount />}>
       <FeedbackButton />
+      <DropdownMenuExample />
+      <SelectExample />
       <HomeTabs>
         <ModalBackgroundWrapper>
           <Route index element={<AssetsList />} />

src/app/ui/components/dowpdown-menu/dropdown-example.tsx

@@ -0,0 +1,30 @@
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+
+import { ListItemType } from '../list/list-item';
+import { DropdownMenu } from './dropdown-menu';
+import { DropdownMenuItem } from './dropdown-menu-item';
+import { DropdownMenuSectionLabel } from './dropdown-menu-section-label';
+
+const items: ListItemType[] = [{ label: 'Label 1' }, { label: 'Label 2' }];
+
+// Example implementation - remove with Storybook
+// ts-unused-exports:disable-next-line
+export function DropdownMenuExample() {
+  return (
+    <DropdownMenu>
+      <RadixDropdownMenu.Group>
+        <DropdownMenuSectionLabel label="Items" />
+        {items.map(item => {
+          return (
+            <DropdownMenuItem
+              key={item.label}
+              iconLeft={item.iconLeft}
+              iconRight={item.iconRight}
+              label={item.label}
+            />
+          );
+        })}
+      </RadixDropdownMenu.Group>
+    </DropdownMenu>
+  );
+}

src/app/ui/components/dowpdown-menu/dropdown-menu-item.tsx

@@ -0,0 +1,14 @@
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+
+import { ListItem, ListItemType } from '../list/list-item';
+import { listItemStyles } from '../list/styles';
+
+type DropdownMenuItemProps = ListItemType;
+
+export function DropdownMenuItem({ iconLeft, iconRight, label }: DropdownMenuItemProps) {
+  return (
+    <RadixDropdownMenu.Item className={listItemStyles}>
+      <ListItem iconLeft={iconLeft} iconRight={iconRight} label={label} />
+    </RadixDropdownMenu.Item>
+  );
+}

src/app/ui/components/dowpdown-menu/dropdown-menu-section-label.tsx

@@ -0,0 +1,15 @@
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+
+import { ListSectionLabel } from '../list/list-section-label';
+import { listSectionLabelStyles } from '../list/styles';
+
+interface DropdownMenuSectionLabelProps {
+  label: string;
+}
+export function DropdownMenuSectionLabel({ label }: DropdownMenuSectionLabelProps) {
+  return (
+    <RadixDropdownMenu.Label className={listSectionLabelStyles}>
+      <ListSectionLabel label={label} />
+    </RadixDropdownMenu.Label>
+  );
+}

src/app/ui/components/dowpdown-menu/dropdown-menu-trigger.tsx

@@ -0,0 +1,22 @@
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { defaultTriggerStyles } from '@app/ui/components/list/styles';
+
+import { ChevronDownIcon } from '../icons/chevron-down-icon';
+
+interface DropdownMenuTriggerProps {
+  placeholder?: string;
+}
+export function DropdownMenuTrigger({ placeholder = 'Options' }: DropdownMenuTriggerProps) {
+  return (
+    <RadixDropdownMenu.Trigger className={defaultTriggerStyles}>
+      <styled.button>
+        <HStack gap="space.02" width="100%">
+          <styled.span textStyle="label.02">{placeholder}</styled.span>
+          <ChevronDownIcon />
+        </HStack>
+      </styled.button>
+    </RadixDropdownMenu.Trigger>
+  );
+}

src/app/ui/components/dowpdown-menu/dropdown-menu.layout.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
+
+import { listContentStyles } from '../list/styles';
+
+interface DropdownMenuLayoutProps {
+  children: ReactNode;
+  trigger: ReactNode;
+}
+export function DropdownMenuLayout({ children, trigger }: DropdownMenuLayoutProps) {
+  return (
+    <RadixDropdownMenu.Root>
+      {trigger}
+      <RadixDropdownMenu.Portal>
+        <RadixDropdownMenu.Content align="start" className={listContentStyles} sideOffset={8}>
+          {children}
+        </RadixDropdownMenu.Content>
+      </RadixDropdownMenu.Portal>
+    </RadixDropdownMenu.Root>
+  );
+}

src/app/ui/components/dowpdown-menu/dropdown-menu.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import { DropdownMenuTrigger } from './dropdown-menu-trigger';
+import { DropdownMenuLayout } from './dropdown-menu.layout';
+
+interface DropdownMenuProps {
+  children: ReactNode;
+  trigger?: ReactNode;
+}
+export function DropdownMenu({ children, trigger }: DropdownMenuProps) {
+  return (
+    <DropdownMenuLayout trigger={trigger ?? <DropdownMenuTrigger />}>{children}</DropdownMenuLayout>
+  );
+}

src/app/ui/components/list/list-item.layout.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { Flex } from 'leather-styles/jsx';
+
+interface ListItemLayoutProps {
+  contentLeft?: ReactNode;
+  contentRight?: ReactNode;
+}
+export function ListItemLayout({ contentLeft, contentRight }: ListItemLayoutProps) {
+  return (
+    <Flex alignItems="center" justifyContent="space-between" p="space.03" width="100%">
+      {contentLeft}
+      {contentRight}
+    </Flex>
+  );
+}

src/app/ui/components/list/list-item.tsx

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { ListItemLayout } from './list-item.layout';
+
+export interface ListItemType {
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  label: string;
+}
+
+type ListItemProps = ListItemType;
+
+function ItemContentLeft({ iconLeft, label }: Omit<ListItemProps, 'iconRight'>) {
+  return (
+    <HStack gap="space.02" minHeight="24px">
+      {iconLeft}
+      <styled.span textStyle="label.02">{label}</styled.span>
+    </HStack>
+  );
+}
+
+export function ListItem({ iconLeft, iconRight, label }: ListItemProps) {
+  return (
+    <ListItemLayout
+      contentLeft={<ItemContentLeft iconLeft={iconLeft} label={label} />}
+      contentRight={iconRight}
+    />
+  );
+}

src/app/ui/components/list/list-section-label.tsx

@@ -0,0 +1,16 @@
+import { styled } from 'leather-styles/jsx';
+
+export function ListSectionLabel(props: { label: string }) {
+  return (
+    <styled.span
+      color="accent.text-subdued"
+      display="block"
+      px="space.03"
+      py="space.02"
+      textStyle="body.02"
+      width="100%"
+    >
+      {props.label}
+    </styled.span>
+  );
+}

src/app/ui/components/list/styles.ts

@@ -0,0 +1,60 @@
+import { css } from 'leather-styles/css';
+
+export const defaultTriggerStyles = css({
+  bg: 'accent.background-primary',
+  borderRadius: '2px',
+  fontWeight: 500,
+  maxWidth: 'fit-content',
+  maxHeight: 'fit-content',
+  px: 'space.04',
+  py: 'space.03',
+  textStyle: 'label.02',
+
+  '&[data-state=open]': {
+    bg: 'accent.component-background-pressed',
+  },
+});
+
+export const listContentStyles = css({
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  '--base-menu-padding': '0px',
+  bg: 'accent.background-primary',
+  borderRadius: '2px',
+  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',
+  willChange: 'transform, opacity',
+  zIndex: 999,
+
+  '&[data-side=bottom]': {
+    animationName: 'slideUpAndFade',
+  },
+});
+
+export const listSectionLabelStyles = css({
+  height: 'auto',
+  px: 'space.02',
+});
+
+export const listItemStyles = css({
+  bg: 'accent.background-primary',
+  color: 'accent.text-primary',
+  height: 'auto',
+  outline: 'none',
+  px: 'space.02',
+  userSelect: 'none',
+
+  '&[data-highlighted]': {
+    bg: 'accent.component-background-hover',
+  },
+});
+
+// For use when needed
+// ts-unused-exports:disable-next-line
+export const listSeparator = css({
+  bg: 'accent.background-primary',
+  color: 'accent.border-default',
+  mx: '0px',
+  my: 'space.03',
+});

src/app/ui/components/select/select-example.tsx

@@ -0,0 +1,30 @@
+import * as RadixSelect from '@radix-ui/react-select';
+
+import { ListItemType } from '../list/list-item';
+import { Select } from './select';
+import { SelectItem } from './select-item';
+import { SelectSectionLabel } from './select-section-label';
+
+const items: ListItemType[] = [{ label: 'Label 1' }, { label: 'Label 2' }];
+
+// Example implementation - remove with Storybook
+// ts-unused-exports:disable-next-line
+export function SelectExample() {
+  return (
+    <Select>
+      <RadixSelect.Group>
+        <SelectSectionLabel label="Items" />
+        {items.map(item => {
+          return (
+            <SelectItem
+              key={item.label}
+              iconLeft={item.iconLeft}
+              iconRight={item.iconRight}
+              label={item.label}
+            />
+          );
+        })}
+      </RadixSelect.Group>
+    </Select>
+  );
+}

src/app/ui/components/select/select-item.tsx

@@ -0,0 +1,30 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import { HStack, styled } from 'leather-styles/jsx';
+
+import { CheckmarkIcon } from '../icons/checkmark-icon';
+import { ListItemType } from '../list/list-item';
+import { ListItemLayout } from '../list/list-item.layout';
+import { listItemStyles } from '../list/styles';
+
+type SelectItemProps = ListItemType;
+
+export function SelectItem({ iconLeft, iconRight, label }: SelectItemProps) {
+  return (
+    <RadixSelect.Item className={listItemStyles} value={label}>
+      <ListItemLayout
+        contentLeft={
+          <HStack gap="space.02">
+            {iconLeft}
+            <RadixSelect.ItemText>
+              <styled.span textStyle="label.02">{label}</styled.span>
+            </RadixSelect.ItemText>
+            <RadixSelect.ItemIndicator>
+              <CheckmarkIcon />
+            </RadixSelect.ItemIndicator>
+          </HStack>
+        }
+        contentRight={iconRight}
+      />
+    </RadixSelect.Item>
+  );
+}

src/app/ui/components/select/select-section-label.tsx

@@ -0,0 +1,15 @@
+import * as RadixSelect from '@radix-ui/react-select';
+
+import { ListSectionLabel } from '../list/list-section-label';
+import { listSectionLabelStyles } from '../list/styles';
+
+interface SelectSectionLabelProps {
+  label: string;
+}
+export function SelectSectionLabel({ label }: SelectSectionLabelProps) {
+  return (
+    <RadixSelect.Label className={listSectionLabelStyles}>
+      <ListSectionLabel label={label} />
+    </RadixSelect.Label>
+  );
+}

src/app/ui/components/select/select-trigger.tsx

@@ -0,0 +1,22 @@
+import * as RadixSelect from '@radix-ui/react-select';
+import { css } from 'leather-styles/css';
+
+import { defaultTriggerStyles } from '@app/ui/components/list/styles';
+
+import { ChevronDownIcon } from '../icons/chevron-down-icon';
+
+const selectTriggerStyles = css({ alignItems: 'center', display: 'flex', gap: 'space.02' });
+
+interface SelectTriggerProps {
+  placeholder?: string;
+}
+export function SelectTrigger({ placeholder = 'Options' }: SelectTriggerProps) {
+  return (
+    <RadixSelect.Trigger className={`${defaultTriggerStyles} ${selectTriggerStyles}`}>
+      <RadixSelect.Value placeholder={placeholder} />
+      <RadixSelect.Icon>
+        <ChevronDownIcon />
+      </RadixSelect.Icon>
+    </RadixSelect.Trigger>
+  );
+}