From fe91471127e8285912cf6b2330c07911e52d787b Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Thu, 25 May 2023 15:31:55 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20improve=20DX=20when=20con?=
 =?UTF-8?q?verting=20px=20to=20rem=20values?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It can be tricky, while integrating the figma design file,
to map some small px values to their rem equivalent. Thus,
this PR proposes a new util function converting pixel to rem.
It would ensure that all size values can scale base on the
font-size base, while keeping a good developer experience.
---
 .changeset/rotten-bears-raise.md              |  5 +++++
 .../src/components/Forms/Select/index.scss    |  5 +++--
 packages/react/src/index.scss                 |  2 +-
 packages/react/src/utils/index.scss           | 19 +++++++++++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rotten-bears-raise.md

diff --git a/.changeset/rotten-bears-raise.md b/.changeset/rotten-bears-raise.md
new file mode 100644
index 0000000..f652095
--- /dev/null
+++ b/.changeset/rotten-bears-raise.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add pixel-to-rem sass util function
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
index 01ed396..26fa25f 100644
--- a/packages/react/src/components/Forms/Select/index.scss
+++ b/packages/react/src/components/Forms/Select/index.scss
@@ -1,3 +1,5 @@
+@use 'src/utils';
+
 .c__select {
   position: relative;
 
@@ -116,9 +118,8 @@
 
     ul {
       list-style-type: none;
-      padding: 0;
+      padding: px-to-rem(3px) 0 0;
       margin: 0;
-      padding-top: 3px;
     }
 
     &__item {
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 15fc27c..47d3838 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -1,5 +1,6 @@
 @import "cunningham-tokens";
 @import '@openfun/cunningham-tokens/default-tokens';
+@import './utils';
 @import './components/Accessibility';
 @import './components/Button';
 @import './components/DataGrid';
@@ -12,7 +13,6 @@
 @import './components/Forms/Switch';
 @import './components/Loader';
 @import './components/Pagination';
-@import './utils';
 
 * {
   font-family: var(--c--theme--font--families--base);
diff --git a/packages/react/src/utils/index.scss b/packages/react/src/utils/index.scss
index 32bffc1..ab8cd41 100644
--- a/packages/react/src/utils/index.scss
+++ b/packages/react/src/utils/index.scss
@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .c__offscreen {
   position: absolute;
   width: 1px;
@@ -10,3 +12,20 @@
   white-space: nowrap;
   border: 0;
 }
+
+
+@function strip-unit($number) {
+  // Divide $number by its own unit to get a unitless number.
+  // According to math.div documentation, "Any units shared by both numbers will be canceled out."
+  // while different unit between numerator and denominator would be kept.
+  // More to read here https://sass-lang.com/documentation/modules/math#div.
+  // i.e. 16px / 1px = 16
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+  @return $number;
+}
+
+@function px-to-rem($size, $base-font-size:16px) {
+  @return math.div(strip-unit($size), strip-unit($base-font-size)) * 1rem;
+}