feat(select-bottomsheet): add bottom sheet footer and header prop

LogRock · Sep 12, 2023 · c330fde · c330fde
1 parent c084e80
commit c330fde
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 0 deletions.
diff --git a/lib/components/BottomSheet/BottomSheet.tsx b/lib/components/BottomSheet/BottomSheet.tsx
@@ -35,6 +35,13 @@ const StyledRSBS = styled(RSBS)`
       background-color: ${({ theme }) => theme.colors.neutral[400]};
     }
   }
+
+  [data-rsbs-footer] {
+    padding: ${({ theme }) =>
+      `${theme.spacings.xxxbig} ${theme.spacings.md} ${theme.spacings.xxsm}`};
+
+    box-shadow: none !important;
+  }
 `;
 
 export default function BottomSheet(props: ComponentProps<typeof RSBS>) {

diff --git a/lib/components/Select2/Select.tsx b/lib/components/Select2/Select.tsx
@@ -95,6 +95,8 @@ function Select<
   destructive,
   spaceAfter,
   useBottomSheet,
+  bottomSheetFooter,
+  bottomSheetHeader,
   ...props
 }: Props<Option, IsMulti, Group> & CustomSelectProps) {
   // only used for bottom sheet mode
@@ -229,6 +231,8 @@ function Select<
         maxMenuHeight={useBottomSheet ? "100%" : 200}
         label={label}
         setMenuIsOpen={setMenuIsOpen}
+        bottomSheetHeader={bottomSheetHeader}
+        bottomSheetFooter={bottomSheetFooter}
       />
       {helper && (
         <HelperDiv>

diff --git a/lib/components/Select2/Select.types.ts b/lib/components/Select2/Select.types.ts
@@ -9,4 +9,6 @@ export interface CustomSelectProps {
   destructive?: boolean;
   required?: boolean;
   useBottomSheet?: boolean;
+  bottomSheetFooter?: React.ReactNode;
+  bottomSheetHeader?: React.ReactNode;
 }
diff --git a/lib/components/Select2/SelectBottomSheet.tsx b/lib/components/Select2/SelectBottomSheet.tsx
@@ -20,6 +20,10 @@ export default function SelectBottomSheet(props: MenuProps) {
   const { label, onMenuClose, setMenuIsOpen, inputValue, onInputChange } =
     props.selectProps;
 
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const { bottomSheetFooter, bottomSheetHeader } = props.selectProps;
+
   return (
     <BottomSheet
       open={true}
@@ -53,8 +57,10 @@ export default function SelectBottomSheet(props: MenuProps) {
           <StyledText type="overlineLarge" color="neutral" shade="400">
             {label}
           </StyledText>
+          {bottomSheetHeader}
         </>
       }
+      footer={bottomSheetFooter}
     >
       {props.children}
     </BottomSheet>

diff --git a/src/stories/components/select/Select.stories.tsx b/src/stories/components/select/Select.stories.tsx
@@ -143,3 +143,10 @@ AllInOne.args = {
   label: "Turn everything ON at once!",
   helper: "For all available options, see the react-select docs",
 };
+
+export const BottomSheetWithHeaderAndFooter = Template.bind({});
+BottomSheetWithHeaderAndFooter.args = {
+  useBottomSheet: true,
+  bottomSheetHeader: <p>Header</p>,
+  bottomSheetFooter: <p>Footer</p>,
+};