From 6f3067b908847349534ac7381f18c91b4335751b Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Tue, 10 Dec 2024 09:22:03 +0100
Subject: [PATCH 1/2] fix(List): fix responsive list item

---
 .../OptionsButton/OptionsButton.tsx           |   1 +
 .../Item/components/View/View.module.scss     | 205 ++----------------
 .../components/Item/components/View/View.tsx  |  37 ++--
 .../List/stories/ListItem.stories.tsx         |  21 --
 4 files changed, 33 insertions(+), 231 deletions(-)

diff --git a/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx b/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
index eaf184ded..7f3e07e24 100644
--- a/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
+++ b/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx
@@ -20,6 +20,7 @@ export const OptionsButton: FC<Props> = (props) => {
         color="secondary"
         className={className}
         aria-label={stringFormatter.format("list.options")}
+        tunnelId={null}
       >
         <IconContextMenu />
       </Button>
diff --git a/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss b/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss
index 0716d8a93..88f3aea82 100644
--- a/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss
+++ b/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss
@@ -1,97 +1,22 @@
 @use "@/styles/mixins/containerBreakpointSizes";
 
 .view {
-  --title-width: 30ch;
+  display: flex;
   padding: var(--list-item--padding);
-  display: grid;
   gap: var(--list-item--content-to-content-spacing);
+  align-items: start;
 
-  &:has(.title:not(:empty)):has(.topContent):has(.content):has(.action) {
-    grid-template-areas:
-      "title   topContent action "
-      "content content    content";
-    grid-template-columns: var(--title-width) 1fr auto;
-  }
-
-  &:has(.title:not(:empty)):has(.topContent):has(.content):not(:has(.action)) {
-    grid-template-areas:
-      "title   topContent"
-      "content content   ";
-    grid-template-columns: var(--title-width) 1fr;
-  }
-
-  &:has(.title:not(:empty)):has(.topContent):not(:has(.content)):not(
-      :has(.action)
-    ) {
-    grid-template-areas: "title topContent";
-    grid-template-columns: var(--title-width) 1fr;
-  }
-
-  &:has(.title:not(:empty)):not(:has(.topContent)):has(.content):not(
-      :has(.action)
-    ) {
-    grid-template-areas:
-      "title  "
-      "content";
-    grid-template-columns: auto;
-  }
-
-  &:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):not(
-      :has(.action)
-    ) {
-    grid-template-areas: "title";
-    grid-template-columns: 1fr;
-  }
-
-  &:not(:has(.title:not(:empty))):has(.topContent):has(.content):has(.action) {
-    grid-template-areas:
-      "topContent action"
-      "content    content";
-    grid-template-columns: 1fr auto;
-  }
-
-  &:not(:has(.title:not(:empty))):not(:has(.topContent)):has(.content):has(
-      .action
-    ) {
-    grid-template-areas: "content action";
-    grid-template-columns: 1fr auto;
-  }
-
-  &:has(.title:not(:empty)):not(:has(.topContent)):has(.content):has(.action) {
-    grid-template-areas:
-      "title   action "
-      "content content";
-    grid-template-columns: 1fr auto;
-  }
-
-  &:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):has(
-      .action
-    ) {
-    grid-template-areas: "title action";
-    grid-template-columns: 1fr auto;
-  }
-
-  &:has(.title:not(:empty)):has(.topContent):not(:has(.content)):has(.action) {
-    grid-template-areas: "title topContent action";
-    grid-template-columns: var(--title-width) 1fr auto;
-  }
-
-  &:not(:has(.title:not(:empty))):has(.topContent):not(:has(.content)):has(
-      .action
-    ) {
-    grid-template-areas: "topContent action";
-    grid-template-columns: 1fr auto;
-  }
-
-  &:not(:has(.title:not(:empty))):has(.topContent):not(:has(.content)):not(
-      :has(.action)
-    ) {
-    grid-template-areas: "topContent";
-    grid-template-columns: auto;
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--list-item--content-to-content-spacing);
+    align-items: center;
+    flex-grow: 1;
   }
 
   .title {
-    grid-area: title;
+    order: 0;
+    flex-grow: 1;
     display: grid;
     grid-column-gap: var(--list-item--content-to-content-spacing);
     grid-template-areas:
@@ -135,115 +60,15 @@
   }
 
   .topContent {
-    grid-area: topContent;
-  }
-
-  .content {
-    grid-area: content;
+    order: 2;
   }
 
   .action {
-    grid-area: action;
-    align-self: center;
-    justify-self: end;
+    margin-left: auto;
   }
 
-  @include containerBreakpointSizes.containerBreakpointSizes(
-    250,
-    450,
-    650,
-    850,
-    1050
-  ) {
-    &:has(.title:not(:empty)):has(.topContent):has(.content):has(.action) {
-      grid-template-areas:
-        "title      action"
-        "topContent topContent"
-        "content    content   ";
-      grid-template-columns: 1fr auto;
-    }
-
-    &:has(.title:not(:empty)):has(.topContent):has(.content):not(
-        :has(.action)
-      ) {
-      grid-template-areas:
-        "title     "
-        "topContent"
-        "content   ";
-      grid-template-columns: auto;
-    }
-
-    &:has(.title:not(:empty)):has(.topContent):not(:has(.content)):not(
-        :has(.action)
-      ) {
-      grid-template-areas:
-        "title     "
-        "topContent";
-      grid-template-columns: auto;
-    }
-
-    &:has(.title:not(:empty)):not(:has(.topContent)):has(.content):not(
-        :has(.action)
-      ) {
-      grid-template-areas:
-        "title  "
-        "content";
-      grid-template-columns: auto;
-    }
-
-    &:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):not(
-        :has(.action)
-      ) {
-      grid-template-areas: "title";
-      grid-template-columns: auto;
-    }
-
-    &:not(:has(.title:not(:empty))):has(.topContent):has(.content):has(
-        .action
-      ) {
-      grid-template-areas:
-        "topContent action       "
-        "content    content      ";
-      grid-template-columns: 1fr auto;
-    }
-
-    &:not(:has(.title:not(:empty))):not(:has(.topContent)):has(.content):has(
-        .action
-      ) {
-      grid-template-areas: "content action";
-      grid-template-columns: 1fr auto;
-    }
-
-    &:has(.title:not(:empty)):not(:has(.topContent)):has(.content):has(
-        .action
-      ) {
-      grid-template-areas:
-        "title   action       "
-        "content content      ";
-      grid-template-columns: 1fr auto;
-    }
-
-    &:has(.title:not(:empty)):not(:has(.topContent)):not(:has(.content)):has(
-        .action
-      ) {
-      grid-template-areas: "title action";
-      grid-template-columns: 1fr auto;
-    }
-
-    &:has(.title:not(:empty)):has(.topContent):not(:has(.content)):has(
-        .action
-      ) {
-      grid-template-areas:
-        "title      action    "
-        "topContent topContent";
-      grid-template-columns: 1fr auto;
-    }
-
-    &:not(:has(.title:not(:empty))):has(.topContent):not(:has(.content)):has(
-        .action
-      ) {
-      grid-template-areas: "topContent action";
-      grid-template-columns: 1fr auto;
-    }
+  .bottomContent {
+    order: 4;
+    width: 100%;
   }
 }
diff --git a/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx b/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx
index cc3384c82..cdd41a6cc 100644
--- a/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx
+++ b/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx
@@ -5,42 +5,41 @@ import type { PropsContext } from "@/lib/propsContext";
 import { dynamic, PropsContextProvider } from "@/lib/propsContext";
 import { OptionsButton } from "@/components/List/components/Items/components/Item/components/OptionsButton";
 import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
-import type {
-  PropsWithClassName,
-  PropsWithContainerBreakpointSize,
-} from "@/lib/types/props";
+import type { PropsWithClassName } from "@/lib/types/props";
 import clsx from "clsx";
-import { getContainerBreakpointSizeClassName } from "@/lib/getContainerBreakpointSizeClassName";
 
-type Props = PropsWithChildren &
-  PropsWithClassName &
-  PropsWithContainerBreakpointSize;
+type Props = PropsWithChildren & PropsWithClassName;
 
 const getStyleForContentSlot = (slot?: string) =>
   slot === "top"
     ? styles.topContent
     : slot === "bottom"
-      ? styles.content
+      ? styles.bottomContent
       : styles.topContent;
 
 export const View = (props: Props) => {
-  const { children, className, containerBreakpointSize = "m" } = props;
+  const { children, className } = props;
 
   const propsContext: PropsContext = {
     ContextMenu: {
       wrapWith: <OptionsButton className={styles.action} />,
       placement: "bottom end",
+      tunnelId: "button",
     },
     Button: {
       className: styles.action,
+      tunnelId: "button",
     },
     ActionGroup: {
       className: styles.action,
       ignoreBreakpoint: true,
+      tunnelId: "button",
+      Button: {
+        tunnelId: null,
+      },
     },
     Content: {
       className: dynamic((p) => getStyleForContentSlot(p.slot)),
-      tunnelId: "topContent",
     },
     Avatar: {
       className: styles.avatar,
@@ -60,21 +59,19 @@ export const View = (props: Props) => {
     },
   };
 
-  const rootClassName = clsx(
-    styles.view,
-    className,
-    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],
-  );
+  const rootClassName = clsx(styles.view, className);
 
   return (
     <div className={rootClassName}>
       <PropsContextProvider props={propsContext} mergeInParentContext>
         <TunnelProvider>
-          {children}
-          <div className={styles.title}>
-            <TunnelExit id="title" />
+          <div className={styles.content}>
+            {children}
+            <div className={styles.title}>
+              <TunnelExit id="title" />
+            </div>
           </div>
-          <TunnelExit id="topContent" />
+          <TunnelExit id="button" />
         </TunnelProvider>
       </PropsContextProvider>
     </div>
diff --git a/packages/components/src/components/List/stories/ListItem.stories.tsx b/packages/components/src/components/List/stories/ListItem.stories.tsx
index 2b5d8ff06..be85ca7e5 100644
--- a/packages/components/src/components/List/stories/ListItem.stories.tsx
+++ b/packages/components/src/components/List/stories/ListItem.stories.tsx
@@ -121,27 +121,6 @@ export const SmallSpace: Story = {
   parameters: { viewport: { defaultViewport: "mobile1" } },
 };
 
-export const CustomContainerBreakpoint: Story = {
-  render: () => (
-    <View containerBreakpointSize="s">
-      <Avatar>
-        <Image alt="John Doe" src={dummyText.imageSrc} />
-      </Avatar>
-      <Heading>John Doe</Heading>
-      <Text>Mittwald</Text>
-      <Content slot="top">
-        <ContentPlaceholder>Top content</ContentPlaceholder>
-      </Content>
-      <Content slot="bottom">
-        <ContentPlaceholder>Bottom content</ContentPlaceholder>
-      </Content>
-      <ContextMenu>
-        <MenuItem>Show details</MenuItem>
-      </ContextMenu>
-    </View>
-  ),
-};
-
 export const WithActionGroup: Story = {
   render: () => (
     <View>

From 87e0cf6eb3d573d1c8bf5ba1b30bff1ec75e1f2e Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Wed, 18 Dec 2024 08:52:40 +0100
Subject: [PATCH 2/2] feat(List): support multiple texts in sub title

---
 .../Item/components/View/View.module.scss           | 10 ++++++++--
 .../Items/components/Item/components/View/View.tsx  |  5 ++++-
 .../components/List/stories/ListItem.stories.tsx    | 13 +++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss b/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss
index 88f3aea82..2c76de5e3 100644
--- a/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss
+++ b/packages/components/src/components/List/components/Items/components/Item/components/View/View.module.scss
@@ -35,7 +35,7 @@
       grid-template-columns: 1fr;
     }
 
-    &:not(:has(.text)) {
+    &:not(:has(.subTitle)) {
       grid-template-areas: "avatar title";
 
       &:not(:has(.avatar)) {
@@ -53,9 +53,15 @@
       align-self: center;
     }
 
-    .text {
+    .subTitle {
       grid-area: subtitle;
       font-size: var(--list-item--subtitle-font-size);
+
+      .text:not(:last-child):after {
+        content: "–";
+        display: inline-block;
+        margin: 0 var(--size-rem--s);
+      }
     }
   }
 
diff --git a/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx b/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx
index cdd41a6cc..ef7b05382 100644
--- a/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx
+++ b/packages/components/src/components/List/components/Items/components/Item/components/View/View.tsx
@@ -52,7 +52,7 @@ export const View = (props: Props) => {
     },
     Text: {
       className: styles.text,
-      tunnelId: "title",
+      tunnelId: "text",
     },
     Link: {
       unstyled: true,
@@ -69,6 +69,9 @@ export const View = (props: Props) => {
             {children}
             <div className={styles.title}>
               <TunnelExit id="title" />
+              <div className={styles.subTitle}>
+                <TunnelExit id="text" />
+              </div>
             </div>
           </div>
           <TunnelExit id="button" />
diff --git a/packages/components/src/components/List/stories/ListItem.stories.tsx b/packages/components/src/components/List/stories/ListItem.stories.tsx
index be85ca7e5..336c14951 100644
--- a/packages/components/src/components/List/stories/ListItem.stories.tsx
+++ b/packages/components/src/components/List/stories/ListItem.stories.tsx
@@ -140,3 +140,16 @@ export const WithActionGroup: Story = {
     </View>
   ),
 };
+
+export const WithMultipleTexts: Story = {
+  render: () => (
+    <View>
+      <Avatar>
+        <Image alt="John Doe" src={dummyText.imageSrc} />
+      </Avatar>
+      <Heading>John Doe</Heading>
+      <Text>Mittwald</Text>
+      <Text>Development</Text>
+    </View>
+  ),
+};