Merge branch 'list-item-types'

4 files changed, 11 insertions, 19 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
index 72d25f2b6c..f61460d767 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/ListItem.tsx
@@ -20,7 +20,7 @@ export interface ListItemProps {
 const ListItem = ({ level = 0, disabled, children }: ListItemProps) => {
   return (
     <ListItemProvider level={level} disabled={disabled}>
-      <Flex $flexDirection="column" $gap="small">
+      <Flex $flexDirection="column" $gap="tiny">
         {children}
       </Flex>
     </ListItemProvider>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemFooter.tsx
index 669b785cc8..dc83058377 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemFooter.tsx
@@ -1,7 +1,7 @@
 import { Flex, FlexProps } from '../../flex';
 
-export type ListIOtemFooterProps = FlexProps;
+export type ListItemFooterProps = FlexProps;
 
-export const ListItemFooter = (props: ListIOtemFooterProps) => {
+export const ListItemFooter = (props: ListItemFooterProps) => {
   return <Flex $padding={{ horizontal: 'medium' }} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx
index 3dcfdaa59f..f0f76c0de9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx
@@ -2,13 +2,11 @@ import { Colors } from '../../../foundations';
 import { LabelTinyProps, TitleMedium } from '../../typography';
 import { useListItem } from '../ListItemContext';
 
-export type ListItemLabelProps = LabelTinyProps;
+export type ListItemLabelProps<E extends React.ElementType = 'span'> = LabelTinyProps<E>;
 
-export const ListItemLabel = ({ children, ...props }: ListItemLabelProps) => {
+export const ListItemLabel = <E extends React.ElementType = 'span'>(
+  props: ListItemLabelProps<E>,
+) => {
   const { disabled } = useListItem();
-  return (
-    <TitleMedium color={disabled ? Colors.white40 : Colors.white} {...props}>
-      {children}
-    </TitleMedium>
-  );
+  return <TitleMedium color={disabled ? Colors.white40 : Colors.white} {...props} />;
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx
index 3b0ac46359..6ea5ab6437 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx
@@ -2,15 +2,9 @@ import { Colors } from '../../../foundations';
 import { Text, TextProps } from '../../typography';
 import { useListItem } from '../ListItemContext';
 
-export type ListItemProps<E extends React.ElementType = 'span'> = Omit<TextProps<E>, 'variant'> & {
-  variant?: Extract<TextProps<E>['variant'], 'labelTiny' | 'footnoteMini'>;
-};
+export type ListItemProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
-export const ListItemText = ({ variant = 'labelTiny', children, ...props }: ListItemProps) => {
+export const ListItemText = <E extends React.ElementType = 'span'>(props: ListItemProps<E>) => {
   const { disabled } = useListItem();
-  return (
-    <Text variant={variant} color={disabled ? Colors.white40 : Colors.white60} {...props}>
-      {children}
-    </Text>
-  );
+  return <Text variant="labelTiny" color={disabled ? Colors.white40 : Colors.white60} {...props} />;
 };