fix: Correctly display widths specified in non-px units (#188)

seek-oss · Sep 14, 2020 · ef02a73 · ef02a73
1 parent f027f50
commit ef02a73
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
@@ -21,7 +21,11 @@ export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
 
   const frames = flatMap(widths, (width) =>
-    themes.map((theme) => ({ theme, width }))
+    themes.map((theme) => ({
+      theme,
+      width,
+      widthName: `${width}${/\d$/.test(width.toString()) ? 'px' : ''}`,
+    }))
   );
 
   let renderCode = code;
@@ -54,14 +58,11 @@ export default function Frames({ code, themes, widths }: FramesProps) {
           </div>
           <div className={styles.frameName} data-testid="frameName">
             {frame.theme === '__PLAYROOM__NO_THEME__' ? (
-              <Text weight="strong">
-                {frame.width}
-                px
-              </Text>
+              <Text weight="strong">{frame.widthName}</Text>
             ) : (
               <Text>
                 <Strong>{frame.theme}</Strong>
-                {` \u2013 ${frame.width}px`}
+                {` \u2013 ${frame.widthName}`}
               </Text>
             )}
           </div>