From d53513c263039ea2cca47e6381716e732c4e6906 Mon Sep 17 00:00:00 2001
From: Ashley Watson-Nolan <ashley.watson-nolan@justeattakeaway.com>
Date: Mon, 13 Jan 2025 14:35:37 +0000
Subject: [PATCH] fix(pie-text-input): DSW-000 component font fixes (#2115)

* fix(pie-divider): DSW-000 divider font-size set to 16px

* fix(pie-text-input): DSW-000 font-size for text-input now contains px unit
---
 .changeset/strange-coats-talk.md              |  5 ++
 .changeset/wet-fishes-look.md                 |  5 ++
 .../components/pie-divider/src/divider.scss   | 90 ++++++++++---------
 .../pie-text-input/src/text-input.scss        |  5 +-
 4 files changed, 60 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/strange-coats-talk.md
 create mode 100644 .changeset/wet-fishes-look.md

diff --git a/.changeset/strange-coats-talk.md b/.changeset/strange-coats-talk.md
new file mode 100644
index 0000000000..09cecaec1d
--- /dev/null
+++ b/.changeset/strange-coats-talk.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-text-input": minor
+---
+
+[Fixed] - font-size for text-input now contains px unit
diff --git a/.changeset/wet-fishes-look.md b/.changeset/wet-fishes-look.md
new file mode 100644
index 0000000000..4c2d9b5ffa
--- /dev/null
+++ b/.changeset/wet-fishes-look.md
@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-divider": minor
+---
+
+[Fixed] - divider font-size set to 16px
diff --git a/packages/components/pie-divider/src/divider.scss b/packages/components/pie-divider/src/divider.scss
index 9c0d894e28..e8728752d2 100644
--- a/packages/components/pie-divider/src/divider.scss
+++ b/packages/components/pie-divider/src/divider.scss
@@ -1,54 +1,58 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 .c-divider {
-  --divider-bg-color: var(--dt-color-divider-default);
-  --divider-width: 100%;
-  --divider-min-width: 16px;
-  --divider-height: 1px;
-  --divider-label-max-width: 90%;
-
-  width: var(--divider-width);
-
-  &,
-  hr {
-    margin: 0;
-    border: 0;
-    background-color: var(--divider-bg-color);
-  }
-
-  &:not(.c-divider--labelled) {
-    height: var(--divider-height);
-  }
-
-  &.c-divider--labelled {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    gap: var(--dt-spacing-b);
-    background-color: transparent;
-
-    .c-divider-label {
-      max-width: var(--divider-label-max-width);
-      word-wrap: break-word;
-    }
+    --divider-bg-color: var(--dt-color-divider-default);
+    --divider-width: 100%;
+    --divider-min-width: 16px;
+    --divider-height: 1px;
+    --divider-label-max-width: 90%;
+    --divider-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --divider-line-height: #{p.font-size(--dt-font-body-l-line-height)};
+
+    width: var(--divider-width);
 
+    &,
     hr {
-      flex-grow: 1;
-      height: var(--divider-height);
-      min-width: var(--divider-min-width);
+        margin: 0;
+        border: 0;
+        background-color: var(--divider-bg-color);
     }
 
-    &.c-divider--inverse {
-      color: var(--dt-color-content-inverse);
+    &:not(.c-divider--labelled) {
+        height: var(--divider-height);
+    }
+
+    &.c-divider--labelled {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        gap: var(--dt-spacing-b);
+        background-color: transparent;
+
+        .c-divider-label {
+            font-size: var(--divider-font-size);
+            line-height: var(--divider-line-height);
+            max-width: var(--divider-label-max-width);
+            word-wrap: break-word;
+        }
+
+        hr {
+            flex-grow: 1;
+            height: var(--divider-height);
+            min-width: var(--divider-min-width);
+        }
+
+        &.c-divider--inverse {
+            color: var(--dt-color-content-inverse);
+        }
     }
-  }
 
-  &.c-divider--inverse {
-    --divider-bg-color: var(--dt-color-divider-inverse);
-  }
+    &.c-divider--inverse {
+        --divider-bg-color: var(--dt-color-divider-inverse);
+    }
 
-  &.c-divider--vertical {
-    --divider-width: 1px;
-    --divider-height: 100%;
-  }
+    &.c-divider--vertical {
+        --divider-width: 1px;
+        --divider-height: 100%;
+    }
 }
diff --git a/packages/components/pie-text-input/src/text-input.scss b/packages/components/pie-text-input/src/text-input.scss
index ec038becb3..e4bd9bd668 100644
--- a/packages/components/pie-text-input/src/text-input.scss
+++ b/packages/components/pie-text-input/src/text-input.scss
@@ -10,7 +10,8 @@
     --input-border-color: var(--dt-color-interactive-form);
     --input-container-color: var(--dt-color-container-default);
     --input-radius: var(--dt-radius-rounded-c);
-    --input-font-size: var(--dt-font-body-l-size);
+    --input-font-size: #{p.font-size(--dt-font-body-l-size)};
+    --input-line-height: #{p.font-size(--dt-font-body-l-line-height)};
     --input-height: 48px;
     --input-cursor: text;
 
@@ -25,8 +26,8 @@
     padding-inline-end: var(--input-padding-inline);
     padding-block-start: var(--input-padding-block);
     padding-block-end: var(--input-padding-block);
-    line-height: 24px;
     font-size: var(--input-font-size);
+    line-height: var(--input-line-height);
     display: flex;
     flex-wrap: nowrap;
     align-items: center;