Tokens: Remove percents from Android rounding (#3868)

pinterest · Nov 15, 2024 · 013074d · 013074d
1 parent b863631
commit 013074d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/packages/gestalt-design-tokens/src/transformers/transformGroups.js b/packages/gestalt-design-tokens/src/transformers/transformGroups.js
@@ -36,6 +36,7 @@ const androidTransformGroup = [
   'font-size/px',
   'size/pxToDpOrSp',
   'value/easing/android',
+  'value/rounding/android',
 ];
 
 const iOSTransformGroup = [

diff --git a/packages/gestalt-design-tokens/src/transformers/transforms.js b/packages/gestalt-design-tokens/src/transformers/transforms.js
@@ -171,6 +171,22 @@ function registerTokenTransforms(sd) {
     },
   });
 
+  sd.registerTransform({
+    name: 'value/rounding/android',
+    type: 'value',
+    matcher(prop) {
+      return prop.attributes.category === 'rounding' && prop.value.endsWith('%');
+    },
+    transformer(prop) {
+      // change the value from  a percent to a number
+      const percent = parseFloat(prop.value.replace('%', ''));
+      // convert the percent to a decimal
+      const decimal = percent * 0.01;
+      // return the decimal
+      return decimal;
+    },
+  });
+
   // #endregion
 
   // #region IOS PLATFORM

diff --git a/packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap b/packages/gestalt-design-tokens/tests/__snapshots__/android.test.js.snap
@@ -444,7 +444,7 @@ Object {
   <dimen name=\\"rounding_700\\">28dp</dimen>
   <dimen name=\\"rounding_800\\">32dp</dimen>
   <dimen name=\\"rounding_pill\\">999dp</dimen>
-  <dimen name=\\"rounding_circle\\">50%</dimen>
+  <dimen name=\\"rounding_circle\\">0.5</dimen>
 
   </resources>
 ",
@@ -1118,7 +1118,7 @@ object GestaltInterpolators {
   <dimen name=\\"sema_rounding_700\\">28dp</dimen>
   <dimen name=\\"sema_rounding_800\\">32dp</dimen>
   <dimen name=\\"sema_rounding_pill\\">999dp</dimen>
-  <dimen name=\\"sema_rounding_circle\\">50%</dimen>
+  <dimen name=\\"sema_rounding_circle\\">0.5</dimen>
 
   </resources>
 ",