✨ Adds option to force bottom line in list item

Adds a `shouldForceBottomLine` prop to the List Item component.

This allows forcing the bottom line to be displayed even if the item is the last in the list or under other conditions where it would normally be hidden.

Author: Jannik Weise

packages/core/src/components/list/list-item/ListItem.styles.ts

@@ -4,13 +4,14 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
 
 type StyledListItemProps = WithTheme<{
     $isClickable: boolean;
-    $isOpen: boolean;
     $isInAccordion: boolean;
+    $isOpen: boolean;
     $isWrapped: boolean;
-    $shouldHideIndicator: boolean;
     $shouldForceBackground?: boolean;
-    $shouldShowSeparatorBelow: boolean;
+    $shouldForceBottomLine?: boolean;
     $shouldHideBottomLine: boolean;
+    $shouldHideIndicator: boolean;
+    $shouldShowSeparatorBelow: boolean;
 }>;
 
 export const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`
@@ -38,18 +39,27 @@ export const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`
             }
         `}
     
+    ${({ $shouldForceBottomLine, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>
+        $shouldForceBottomLine &&
+        css`
+            border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                rgba(${theme['headline-rgb']}, 0.5);
+        `}
+    
     ${({
-        $isOpen,
         $isInAccordion,
+        $isOpen,
         $isWrapped,
-        $shouldShowSeparatorBelow,
         $shouldHideBottomLine,
+        $shouldForceBottomLine,
+        $shouldShowSeparatorBelow,
         theme,
     }: StyledListItemProps) =>
         ($shouldShowSeparatorBelow ||
             ((!$isOpen || $isWrapped || $isInAccordion) &&
                 theme.accordionLines &&
-                !$shouldHideBottomLine)) &&
+                !$shouldHideBottomLine &&
+                !$shouldForceBottomLine)) &&
         css`
             &&:not(:last-child) {
                 border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid

packages/core/src/components/list/list-item/ListItem.tsx

@@ -95,6 +95,10 @@ export type ListItemProps = {
      * This will force the background color of the ListItem to be used even if it is closed and not hovered.
      */
     shouldForceBackground?: boolean;
+    /**
+     * Whether the line should be forced, e.g., so that it is also displayed if the item is the last element in the list.
+     */
+    shouldForceBottomLine?: boolean;
     /**
      * Whether the hover item should be forced.
      */
@@ -129,7 +133,7 @@ export type ListItemProps = {
      */
     shouldRenderClosed?: boolean;
     /**
-     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.
+     * Whether the image or icon should be displayed in a round shape. This should always be used for images of persons.
      */
     shouldShowRoundImageOrIcon?: boolean;
     /**
@@ -167,15 +171,16 @@ const ListItem: FC<ListItemProps> = ({
     onOpen,
     rightElements,
     shouldForceBackground = false,
+    shouldForceBottomLine = false,
+    shouldForceHover = false,
     shouldHideBottomLine = false,
+    shouldOpenImageOnClick = false,
     shouldHideImageOrIconBackground,
     shouldHideIndicator = false,
-    shouldOpenImageOnClick = false,
     shouldPreventLayoutAnimation = false,
+    shouldRenderClosed = false,
     shouldShowRoundImageOrIcon,
     shouldShowSeparatorBelow = false,
-    shouldForceHover = false,
-    shouldRenderClosed = false,
     subtitle,
     title,
     titleElement,
@@ -261,6 +266,7 @@ const ListItem: FC<ListItemProps> = ({
             $isOpen={isItemOpen}
             $isWrapped={isWrapped}
             $shouldForceBackground={shouldForceBackground}
+            $shouldForceBottomLine={shouldForceBottomLine}
             $shouldHideBottomLine={shouldHideBottomLine}
             $shouldHideIndicator={shouldHideIndicator}
             $shouldShowSeparatorBelow={shouldShowSeparatorBelow}