Merge pull request #300 from element-hq/florianduros/align-visualist

Align element in VisualList component
element-hq · Dec 23, 2024 · 9d32405 · 9d32405
2 parents 237739a + 5178147
commit 9d32405
Show file tree

Hide file tree

Showing 7 changed files with 3 additions and 0 deletions.
diff --git a/...ght/visual.test.ts-snapshots/VisualList-VisualList-Default-1-chromium-linux.png b/...ght/visual.test.ts-snapshots/VisualList-VisualList-Default-1-chromium-linux.png
diff --git a/...visual.test.ts-snapshots/VisualList-VisualListItem-Default-1-chromium-linux.png b/...visual.test.ts-snapshots/VisualList-VisualListItem-Default-1-chromium-linux.png
diff --git a/...al.test.ts-snapshots/VisualList-VisualListItem-Destructive-1-chromium-linux.png b/...al.test.ts-snapshots/VisualList-VisualListItem-Destructive-1-chromium-linux.png
diff --git a/...visual.test.ts-snapshots/VisualList-VisualListItem-Success-1-chromium-linux.png b/...visual.test.ts-snapshots/VisualList-VisualListItem-Success-1-chromium-linux.png
diff --git a/src/components/VisualList/VisualListItem.module.css b/src/components/VisualList/VisualListItem.module.css
@@ -20,6 +20,7 @@
   padding: var(--cpd-space-3x) var(--cpd-space-4x);
   background-color: var(--cpd-color-bg-subtle-secondary);
   font: var(--cpd-font-body-md-medium);
+  align-items: center;
 }
 
 .visual-list-item-icon {

diff --git a/src/components/VisualList/VisualListItem.stories.tsx b/src/components/VisualList/VisualListItem.stories.tsx
@@ -53,4 +53,5 @@ export const Multiline = Template.bind({});
 Multiline.args = {
   children:
     "List item with a looooooooooong very looooooooooong loooooooooooooong description",
+  style: { alignItems: "start" },
 };
diff --git a/src/components/VisualList/__snapshots__/VisualListItem.test.tsx.snap b/src/components/VisualList/__snapshots__/VisualListItem.test.tsx.snap
@@ -60,6 +60,7 @@ exports[`VisualListItem > renders a Multiline VisualListItem 1`] = `
 <div>
   <li
     class="_visual-list-item_1553df"
+    style="align-items: start;"
   >
     <svg
       aria-hidden="true"
-Original file line number
+Diff line change
@@ Expand Up @@
     <div>
       <li
         class="_visual-list-item_1553df"
+        style="align-items: start;"
       >
         <svg
           aria-hidden="true"
@@ Expand Down @@