From beb3caa5e0f28c0cc6a386226f2f3467c59700de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Tue, 18 Jun 2024 13:10:30 +0200
Subject: [PATCH] Fix hug in frames (#174)

* fix hug in frames

* changeset

* fixes
---
 .changeset/lucky-baboons-joke.md                    | 5 +++++
 plugin-src/transformers/partials/transformLayout.ts | 5 +++--
 plugin-src/transformers/transformComponentNode.ts   | 2 +-
 plugin-src/transformers/transformFrameNode.ts       | 2 +-
 plugin-src/transformers/transformInstanceNode.ts    | 2 +-
 plugin-src/translators/translateLayout.ts           | 7 +++++--
 6 files changed, 16 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/lucky-baboons-joke.md

diff --git a/.changeset/lucky-baboons-joke.md b/.changeset/lucky-baboons-joke.md
new file mode 100644
index 00000000..cdcf1e67
--- /dev/null
+++ b/.changeset/lucky-baboons-joke.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Fix Hug in Frames
diff --git a/plugin-src/transformers/partials/transformLayout.ts b/plugin-src/transformers/partials/transformLayout.ts
index 6f235319..1882d7d8 100644
--- a/plugin-src/transformers/partials/transformLayout.ts
+++ b/plugin-src/transformers/partials/transformLayout.ts
@@ -31,7 +31,8 @@ export const transformAutoLayout = (node: BaseFrameMixin): LayoutAttributes => {
 };
 
 export const transformLayoutAttributes = (
-  node: LayoutMixin
+  node: LayoutMixin,
+  isFrame: boolean = false
 ): Pick<
   LayoutChildAttributes,
   | 'layoutItemH-Sizing'
@@ -43,7 +44,7 @@ export const transformLayoutAttributes = (
   | 'layoutItemMinW'
 > => {
   return {
-    'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal),
+    'layoutItemH-Sizing': translateLayoutSizing(node.layoutSizingHorizontal, isFrame),
     'layoutItemV-Sizing': translateLayoutSizing(node.layoutSizingVertical),
     'layoutItemAbsolute': node.layoutPositioning === 'ABSOLUTE',
     'layoutItemMaxH': node.maxHeight ?? undefined,
diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts
index eba890a9..5514877b 100644
--- a/plugin-src/transformers/transformComponentNode.ts
+++ b/plugin-src/transformers/transformComponentNode.ts
@@ -34,7 +34,7 @@ export const transformComponentNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformLayoutAttributes(node),
+    ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
     ...(await transformChildren(node, node.rotation + baseRotation)),
     ...transformDimension(node),
diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
index c5b34f09..2dea828b 100644
--- a/plugin-src/transformers/transformFrameNode.ts
+++ b/plugin-src/transformers/transformFrameNode.ts
@@ -45,7 +45,7 @@ export const transformFrameNode = async (
       // @see: https://forum.figma.com/t/add-a-blendmode-property-for-sectionnode/58560
       ...transformBlend(node),
       ...transformProportion(node),
-      ...transformLayoutAttributes(node),
+      ...transformLayoutAttributes(node, true),
       ...transformCornerRadius(node),
       ...transformEffects(node),
       ...transformConstraints(node),
diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
index 730752a3..08a38625 100644
--- a/plugin-src/transformers/transformInstanceNode.ts
+++ b/plugin-src/transformers/transformInstanceNode.ts
@@ -59,7 +59,7 @@ export const transformInstanceNode = async (
     ...transformSceneNode(node),
     ...transformBlend(node),
     ...transformProportion(node),
-    ...transformLayoutAttributes(node),
+    ...transformLayoutAttributes(node, true),
     ...transformCornerRadius(node),
     ...transformDimension(node),
     ...transformRotationAndPosition(node, baseRotation),
diff --git a/plugin-src/translators/translateLayout.ts b/plugin-src/translators/translateLayout.ts
index f24544db..238ef929 100644
--- a/plugin-src/translators/translateLayout.ts
+++ b/plugin-src/translators/translateLayout.ts
@@ -115,12 +115,15 @@ export const translateLayoutAlignItems = (node: BaseFrameMixin): JustifyAlignIte
   }
 };
 
-export const translateLayoutSizing = (sizing: FigmaLayoutSizing): LayoutSizing => {
+export const translateLayoutSizing = (
+  sizing: FigmaLayoutSizing,
+  isFrame: boolean = false
+): LayoutSizing => {
   switch (sizing) {
     case 'FIXED':
       return 'fix';
     case 'HUG':
-      return 'auto';
+      return isFrame ? 'fix' : 'auto'; // @TODO: Penpot does not handle hug in frames as figma does
     case 'FILL':
       return 'fill';
   }