Merge pull request #418 from kokengthecoder/timeline-status-pill

Adjust to top down arrangement if pills' size exceed device width
LifeSG · Mar 4, 2024 · c3ea7ba · c3ea7ba
2 parents 416defb + 4b4e2ea
commit c3ea7ba
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/timeline/timeline.style.tsx b/src/timeline/timeline.style.tsx
@@ -151,10 +151,11 @@ export const TimelineItemContent = styled.div`
 
 export const TimelinePills = styled(Text.H3)`
     display: flex;
+    flex-wrap: wrap;
     margin-bottom: 0.5rem;
+    gap: 0.5rem;
 `;
 
 export const TimelinePill = styled(Pill)`
     padding: 0.125rem 0.5rem;
-    margin-right: 0.5rem;
 `;
diff --git a/stories/timeline/timeline.stories.tsx b/stories/timeline/timeline.stories.tsx
@@ -124,6 +124,29 @@ export const Default: StoryObj<Component> = {
                                 },
                             ],
                         },
+                        {
+                            title: "Item 7",
+                            content: (
+                                <Text.Body>
+                                    This one comes with Pill DS icons with long
+                                    status text.
+                                </Text.Body>
+                            ),
+                            statuses: [
+                                {
+                                    type: "outline",
+                                    colorType: "red",
+                                    children: "Status outline red long text",
+                                    icon: <PlusCircleFillIcon />,
+                                },
+                                {
+                                    type: "solid",
+                                    colorType: "blue",
+                                    children: "Status solid blue",
+                                    icon: <PlaceholderIcon />,
+                                },
+                            ],
+                        },
                     ]}
                 />
             </StoryContainer>