💄 fix for broken pin style (#2889)

* 💄 fix for broken pin style As content (Rows) grows, the pin would get pushed down (and under) the content. * changeset * 💄 make css for timeline pin even more compact
navikt · Apr 29, 2024 · b21015b · b21015b
1 parent bac48d9
commit b21015b
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 1 deletion.
diff --git a/.changeset/selfish-poems-brake.md b/.changeset/selfish-poems-brake.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-css": patch
+---
+
+:lipstick: tweak CSS for timeline pins.
diff --git a/@navikt/core/css/timeline.css b/@navikt/core/css/timeline.css
@@ -245,7 +245,7 @@
 .navds-timeline__pin-wrapper::before {
   content: "";
   top: var(--navdsc-timeline-pin-size);
-  height: calc(88% - var(--navdsc-timeline-pin-size));
+  height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
   width: 1px;
   margin: 0 auto;
   background: var(--a-surface-inverted);

diff --git a/@navikt/core/react/src/timeline/timeline.stories.tsx b/@navikt/core/react/src/timeline/timeline.stories.tsx
@@ -183,6 +183,76 @@ export const WithPins = () => {
           })}
         </Timeline.Row>
       </Timeline>
+      <div style={{ height: "8rem" }} />
+      <Timeline>
+        <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
+        <Timeline.Pin date={new Date("Jun 12 2022")}>Pin 2</Timeline.Pin>
+        <Timeline.Pin date={new Date("Jul 28 2022")}>Pin 3</Timeline.Pin>
+        <Timeline.Row
+          label="Row 1"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
+          {row1.map((p: any) => {
+            return (
+              <Timeline.Period
+                key={p.id}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                icon={p.icon}
+              />
+            );
+          })}
+        </Timeline.Row>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
+          {row2.map((p: any) => {
+            return (
+              <Timeline.Period
+                key={p.id}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                icon={p.icon}
+              />
+            );
+          })}
+        </Timeline.Row>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
+          {row2.map((p: any) => {
+            return (
+              <Timeline.Period
+                key={p.id}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                icon={p.icon}
+              />
+            );
+          })}
+        </Timeline.Row>
+        <Timeline.Row
+          label="Row 2"
+          icon={<CheckmarkCircleFillIcon aria-hidden />}
+        >
+          {row2.map((p: any) => {
+            return (
+              <Timeline.Period
+                key={p.id}
+                start={p.start}
+                end={p.end}
+                status={p.status}
+                icon={p.icon}
+              />
+            );
+          })}
+        </Timeline.Row>
+      </Timeline>
     </div>
   );
 };