refactor(bottomsheet): API props + docs improvements

Signed-off-by: Simon Bruneaud <[email protected]>

Author: gamegee

apps/app-sandbox-rnative/src/app/blocks/BottomSheets.tsx

@@ -24,7 +24,7 @@ export const BottomSheets = forwardRef<React.ElementRef<typeof BottomSheet>>(
     }));
 
     return (
-      <BottomSheet {...props} ref={ref} closeable>
+      <BottomSheet {...props} ref={ref}>
         <BottomSheetHeader
           spacing
           title='Virtual List'

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheet.mdx

@@ -80,11 +80,11 @@ When using dynamic sizing with potentially long content, set `maxDynamicContentS
 
 <Canvas of={BottomSheetStories.DynamicSizingAndMaxSize} />
 
-### Non-Closeable
+### Hidden Close Button
 
-Prevent user dismissal for critical flows where users must complete an action or make a decision. Set both `closeable={false}` and `enablePanDownToClose={false}` to disable all dismiss mechanisms. Use this pattern for required confirmations, important notices, or multi-step processes. The sheet can only be closed programmatically via ref.
+Prevent user dismissal for critical flows where users must complete an action or make a decision. Set both `hideCloseButton={true}` and `enablePanDownToClose={false}` to disable all dismiss mechanisms. Use this pattern for required confirmations, important notices, or multi-step processes. The sheet can only be closed programmatically via ref.
 
-<Canvas of={BottomSheetStories.NonCloseable} />
+<Canvas of={BottomSheetStories.HiddenCloseButton} />
 
 ## Accessibility
 
@@ -119,7 +119,7 @@ function MyComponent() {
         Open Bottom Sheet
       </Button>
 
-      <BottomSheet ref={bottomSheetRef} snapPoints="full" closeable>
+      <BottomSheet ref={bottomSheetRef} snapPoints="full">
         <BottomSheetView>
           <BottomSheetHeader
             title="Welcome"
@@ -192,8 +192,8 @@ function MyComponent() {
 ```tsx
 // Preset snap points
 <BottomSheet snapPoints="full">    {/* 95% of screen */}
-<BottomSheet snapPoints="half">    {/* 50% of screen */}
-<BottomSheet snapPoints="quarter"> {/* 25% of screen */}
+<BottomSheet snapPoints="medium">    {/* 50% of screen */}
+<BottomSheet snapPoints="small"> {/* 25% of screen */}
 
 // Custom snap points (pixels, percentages, or mixed)
 <BottomSheet snapPoints={[200, 400, 600]}>
@@ -245,7 +245,10 @@ const bottomSheetRef = useBottomSheetRef();
 bottomSheetRef.current?.expand();
 
 // Disable both for non-dismissible sheets
-<BottomSheet closeable={false} enablePanDownToClose={false}>
+<BottomSheet 
+  hideCloseButton 
+  enablePanDownToClose={false}
+>
 ```
 
 ❌ **Don't**

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheet.stories.tsx

@@ -30,16 +30,16 @@ const meta = {
       options: [
         undefined,
         'full',
-        'half',
-        'quarter',
+        'medium',
+        'small',
         '[150, 300]',
         '["25%", "50%"]',
       ],
       mapping: {
         undefined: undefined,
         full: 'full',
-        half: 'half',
-        quarter: 'quarter',
+        medium: 'medium',
+        small: 'small',
         '[150, 300]': [150, 300],
         '["25%", "50%"]': ['25%', '50%'],
       },
@@ -73,7 +73,7 @@ type Story = StoryObj<typeof BottomSheet>;
 export const Base: Story = {
   args: {
     snapPoints: 'full',
-    closeable: true,
+    hideCloseButton: false,
     onBack: undefined,
     onClose: undefined,
     enableHandlePanningGesture: true,
@@ -118,7 +118,7 @@ export const Base: Story = {
 export const TitleExpanded: Story = {
   args: {
     snapPoints: 'full',
-    closeable: true,
+    hideCloseButton: false,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,
@@ -161,7 +161,7 @@ export const TitleExpanded: Story = {
 
 export const DynamicSizing: Story = {
   args: {
-    closeable: true,
+    hideCloseButton: false,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,
@@ -202,7 +202,7 @@ export const DynamicSizing: Story = {
 export const DynamicSizingAndMaxSize: Story = {
   args: {
     snapPoints: undefined,
-    closeable: true,
+    hideCloseButton: false,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,
@@ -242,10 +242,10 @@ export const DynamicSizingAndMaxSize: Story = {
   },
 };
 
-export const NonCloseable: Story = {
+export const HiddenCloseButton: Story = {
   args: {
     snapPoints: 'full',
-    closeable: false,
+    hideCloseButton: false,
     onClose: undefined,
     enableHandlePanningGesture: true,
     enablePanDownToClose: false,
@@ -265,7 +265,7 @@ export const NonCloseable: Story = {
         <BottomSheet {...args} ref={bottomSheetRef}>
           <BottomSheetView>
             <BottomSheetHeader
-              title='Non-Closeable'
+              title='Hidden Close Button'
               appearance='compact'
               description='This bottom sheet cannot be closed by dragging or button'
             />
@@ -288,7 +288,7 @@ export const NonCloseable: Story = {
 export const ScrollView: Story = {
   args: {
     snapPoints: 'full',
-    closeable: true,
+    hideCloseButton: false,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,
@@ -331,7 +331,7 @@ export const ScrollView: Story = {
 export const VirtualList: Story = {
   args: {
     snapPoints: 'full',
-    closeable: true,
+    hideCloseButton: false,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,
@@ -392,7 +392,7 @@ export const VirtualList: Story = {
 export const VirtualizedList: Story = {
   args: {
     snapPoints: 'full',
-    closeable: true,
+    hideCloseButton: false,
     enableHandlePanningGesture: true,
     enablePanDownToClose: true,
     enableBlurKeyboardOnGesture: true,

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheet.test.tsx

@@ -96,7 +96,7 @@ describe('BottomSheet', () => {
   });
 
   describe('snap points', () => {
-    it('uses default snapPoints "half" when not specified', () => {
+    it('uses default snapPoints "medium" when not specified', () => {
       const { BottomSheet } = require('./BottomSheet');
       const { getByTestId } = render(
         <BottomSheet testID='bottom-sheet'>
@@ -123,7 +123,7 @@ describe('BottomSheet', () => {
     it('renders with snapPoints preset "quarter"', () => {
       const { BottomSheet } = require('./BottomSheet');
       const { getByTestId } = render(
-        <BottomSheet snapPoints='quarter' testID='bottom-sheet'>
+        <BottomSheet snapPoints='small' testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
       );
@@ -239,10 +239,10 @@ describe('BottomSheet', () => {
       expect(getByText('Content')).toBeTruthy();
     });
 
-    it('provides context with closeable prop', () => {
+    it('provides context with hideCloseButton prop', () => {
       const { BottomSheet } = require('./BottomSheet');
       const { getByText } = render(
-        <BottomSheet closeable testID='bottom-sheet'>
+        <BottomSheet hideCloseButton testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
       );
@@ -251,11 +251,11 @@ describe('BottomSheet', () => {
       expect(getByText('Content')).toBeTruthy();
     });
 
-    it('provides context with both onBack and closeable', () => {
+    it('provides context with both onBack and hideCloseButton', () => {
       const { BottomSheet } = require('./BottomSheet');
       const onBack = jest.fn();
       const { getByText } = render(
-        <BottomSheet onBack={onBack} closeable testID='bottom-sheet'>
+        <BottomSheet onBack={onBack} hideCloseButton testID='bottom-sheet'>
           <Text>Content</Text>
         </BottomSheet>,
       );

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheet.tsx

@@ -14,8 +14,8 @@ const StyledGorghomBottomSheet = cssInterop(GorghomBottomSheet, {
 
 const SNAP_POINTS = {
   full: ['95%'],
-  half: ['50%'],
-  quarter: ['25%'],
+  medium: ['50%'],
+  small: ['25%'],
 };
 
 const bottomSheetVariants = {
@@ -31,7 +31,7 @@ const bottomSheetVariants = {
 };
 
 const [BottomSheetProvider, useBottomSheetContext] =
-  createSafeContext<Pick<BottomSheetProps, 'onBack' | 'closeable'>>(
+  createSafeContext<Pick<BottomSheetProps, 'onBack' | 'hideCloseButton'>>(
     'BottomSheet',
   );
 
@@ -45,8 +45,8 @@ const BottomSheet = forwardRef<
       onClose,
       onBack,
       onAnimate,
-      closeable,
       children,
+      hideCloseButton = false,
       enablePanDownToClose = true,
       enableDynamicSizing = false,
       enableBlurKeyboardOnGesture = true,
@@ -57,7 +57,7 @@ const BottomSheet = forwardRef<
       showBackdropPress = false,
       onBackdropPress,
       onChange,
-      snapPoints = 'half',
+      snapPoints = 'medium  x',
       ...props
     },
     ref,
@@ -100,14 +100,12 @@ const BottomSheet = forwardRef<
 
     const handleChange: BottomSheetProps['onChange'] = useCallback(
       (index: number, position: number, type: SNAP_POINT_TYPE) => {
-        console.log('onchange');
         if (index === -1 && onClose) {
           onClose();
         }
         if (index === 0 && onOpen) {
           onOpen();
         }
-        setIsOpen(index === 0);
         onChange?.(index, position, type);
       },
       [onClose, onOpen, onChange],
@@ -129,15 +127,8 @@ const BottomSheet = forwardRef<
       [onAnimate],
     );
 
-    console.log({ isOpen });
-
-    console.log({ a: innerRef.current });
-
-    // renders
     return (
-      <BottomSheetProvider
-        value={{ onBack, closeable: Boolean(onClose || closeable) }}
-      >
+      <BottomSheetProvider value={{ onBack, hideCloseButton }}>
         <StyledGorghomBottomSheet
           {...props}
           ref={mergedRefs}

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheetHeader.tsx

@@ -9,7 +9,7 @@ import { useBottomSheetContext } from './BottomSheet';
 import { BottomSheetHeaderProps } from './types';
 
 const bottomSheetHeaderVariants = {
-  root: cva('z-dialog-content bg-canvas-sheet sticky top-0 pb-12', {
+  root: cva('sticky top-0 z-dialog-content bg-canvas-sheet pb-12', {
     variants: {
       spacing: {
         true: 'px-16',
@@ -40,7 +40,7 @@ const bottomSheetHeaderVariants = {
   title: cva('text-base', {
     variants: {
       appearance: {
-        compact: 'heading-4-semi-bold text-center',
+        compact: 'text-center heading-4-semi-bold',
         expanded: 'heading-2-semi-bold',
       },
     },
@@ -64,7 +64,7 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
   ...props
 }) => {
   const { close } = useBottomSheet();
-  const { onBack, closeable } = useBottomSheetContext({
+  const { onBack, hideCloseButton } = useBottomSheetContext({
     consumerName: 'BottomSheetHeader',
     contextRequired: true,
   });
@@ -74,9 +74,9 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
   }, [close]);
 
   const hasTitleSection = Boolean(title || description);
-  const hasIcons = Boolean(onBack || closeable);
+  const hasIcons = Boolean(onBack || !hideCloseButton);
 
-  if (!title && !description && !onBack && !closeable) {
+  if (!title && !description && !onBack && hideCloseButton) {
     return null;
   }
 
@@ -106,23 +106,23 @@ export const BottomSheetHeader: FC<BottomSheetHeaderProps> = ({
           hidden: !hasIcons && appearance !== 'compact',
         })}
       >
-        <View className='size-44'>
+        <View className='size-32'>
           {onBack && (
             <IconButton
               accessibilityLabel='Go back'
-              size='sm'
+              size='xs'
               onPress={onBack}
               icon={ArrowLeft}
               appearance='transparent'
             />
           )}
         </View>
         {appearance === 'compact' && titleComponent}
-        <View className='size-44'>
-          {closeable && (
+        <View className='size-32'>
+          {!hideCloseButton && (
             <IconButton
               accessibilityLabel='Close'
-              size='sm'
+              size='xs'
               onPress={handleClose}
               icon={Close}
               appearance='transparent'

libs/ui-rnative/src/lib/Components/BottomSheet/types.ts

@@ -22,11 +22,11 @@ export type BottomSheetProps = PropsWithChildren & {
   testID?: string;
   /**
    * The snap points represent allowed heights of the bottom sheet.
-   * You can use presets like 'full', 'half', 'quarter' or define your own snap points in % (string) or pixel (number).
+   * You can use presets like 'full', 'medium', 'small' or define your own snap points in % (string) or pixel (number).
    * If you want to use dynamic sizing, you should not define snapPoints.
    * @default 'full'
    */
-  snapPoints?: 'full' | 'half' | 'quarter' | string[] | number[];
+  snapPoints?: 'full' | 'medium' | 'small' | string[] | number[];
   /**
    * If true, the bottom sheet will be resized to fit the content.
    * You should not define snapPoints when enableDynamicSizing is true.
@@ -55,19 +55,17 @@ export type BottomSheetProps = PropsWithChildren & {
    */
   onBack?: () => void;
   /**
-   * If true, the close button will be displayed.
-   * This property should be used when no callback is required for the close action.
+   * If true, the close button will be hidden.
    * @default false
    */
-  closeable?: boolean;
+  hideCloseButton?: boolean;
   /**
-   * If true, the close button will be displayed
-   * This property should be used when a callback function to handle the close event is required.
+   * Callback function to handle the close event.
    * @default undefined
    */
   onClose?: () => void;
   /**
-   * The callback function to handle the open event.
+   * Callback function to handle the open event.
    * @default undefined
    */
   onOpen?: () => void;