feat: Update Tray

apps/mobile-app/scripts/utils/routes.mjs

@@ -43,6 +43,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
   },
+  {
+    key: 'AlphaSelectChip',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
+  },
   {
     key: 'AlphaTabbedChips',
     getComponent: () =>
@@ -775,6 +780,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/TrayFeedCard.stories').default,
   },
+  {
+    key: 'TrayHandleBarInside',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/overlays/__stories__/TrayHandleBarInside.stories').default,
+  },
   {
     key: 'TrayInformational',
     getComponent: () =>

apps/mobile-app/src/routes.ts

@@ -43,6 +43,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
   },
+  {
+    key: 'AlphaSelectChip',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
+  },
   {
     key: 'AlphaTabbedChips',
     getComponent: () =>
@@ -539,7 +544,7 @@ export const routes = [
   {
     key: 'SelectChip',
     getComponent: () =>
-      require('@coinbase/cds-mobile/alpha/select-chip/__stories__/SelectChip.stories').default,
+      require('@coinbase/cds-mobile/chips/__stories__/SelectChip.stories').default,
   },
   {
     key: 'SelectOption',
@@ -775,6 +780,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/TrayFeedCard.stories').default,
   },
+  {
+    key: 'TrayHandleBarInside',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/overlays/__stories__/TrayHandleBarInside.stories').default,
+  },
   {
     key: 'TrayInformational',
     getComponent: () =>

packages/mobile/src/overlays/__stories__/TrayHandleBarInside.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { useTheme } from '../../hooks/useTheme';
+
+import { ScrollableTray } from './Trays';
+
+export const TrayHandleBarInside = () => {
+  const theme = useTheme();
+  return (
+    <ExampleScreen>
+      <Example title="Tray with Handle Bar Inside">
+        <ScrollableTray
+          handleBarVariant="inside"
+          title="Tray with Handle Bar Inside"
+          verticalDrawerPercentageOfView={0.9}
+        />
+      </Example>
+    </ExampleScreen>
+  );
+};
+
+export default TrayHandleBarInside;

packages/mobile/src/overlays/__stories__/Trays.tsx

@@ -7,13 +7,13 @@ import { Menu } from '../../controls/Menu';
 import { SelectOption } from '../../controls/SelectOption';
 import { Fallback, VStack } from '../../layout';
 import type { DrawerRefBaseProps } from '../drawer/Drawer';
-import { Tray } from '../tray/Tray';
+import { Tray, type TrayProps } from '../tray/Tray';
 
 export const options: string[] = prices.slice(0, 4);
 
 const lotsOfOptions: string[] = prices.slice(0, 30);
 
-export const DefaultTray = ({ title }: { title?: React.ReactNode }) => {
+export const DefaultTray = (props: Partial<TrayProps>) => {
   const [isTrayVisible, setIsTrayVisible] = useState(true);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
   const setIsTrayVisibleOn = useCallback(() => setIsTrayVisible(true), [setIsTrayVisible]);
@@ -36,7 +36,7 @@ export const DefaultTray = ({ title }: { title?: React.ReactNode }) => {
           ref={trayRef}
           onCloseComplete={setIsTrayVisibleOff}
           onVisibilityChange={handleTrayVisibilityChange}
-          title={title}
+          {...props}
         >
           <Menu onChange={setValue} value={value}>
             {options.map((option: string) => (
@@ -65,14 +65,15 @@ const TrayFallbackContent = () => {
   );
 };
 
+const spacingStyles = {
+  paddingBottom: 200,
+};
+
 export const ScrollableTray = ({
-  title,
   fallbackEnabled,
-  verticalDrawerPercentageOfView,
-}: {
-  title?: React.ReactNode;
+  ...props
+}: Partial<TrayProps> & {
   fallbackEnabled?: boolean;
-  verticalDrawerPercentageOfView?: number;
 }) => {
   const [isTrayVisible, setIsTrayVisible] = useState(true);
   const setIsTrayVisibleOff = useCallback(() => setIsTrayVisible(false), [setIsTrayVisible]);
@@ -88,13 +89,6 @@ export const ScrollableTray = ({
     }
   }, [isTrayVisible, fallbackEnabled]);
 
-  const spacingStyles = useMemo(
-    () => ({
-      paddingBottom: 200,
-    }),
-    [],
-  );
-
   const handleOptionPress = useCallback(() => {
     trayRef.current?.handleClose();
   }, []);
@@ -122,8 +116,7 @@ export const ScrollableTray = ({
           ref={trayRef}
           disableCapturePanGestureToDismiss
           onCloseComplete={setIsTrayVisibleOff}
-          title={title}
-          verticalDrawerPercentageOfView={verticalDrawerPercentageOfView}
+          {...props}
         >
           {isLoading ? (
             <TrayFallbackContent />