From 1480d83e0ed03e1102814fbfc6fd99090e025f97 Mon Sep 17 00:00:00 2001
From: slk333 <aweb33@icloud.com>
Date: Sun, 21 Aug 2022 16:57:32 +0200
Subject: [PATCH] [@mantine/demos] Fix mismatch between demo apparent code and
 real code in ActionIcon demo (#2189)

* ActionIcon:  Fix mismatch between demo apparent code and real code

The real code was changing both the ActionIcon size and the embedded Icon size

* apparent code matches real code instead

* fix prettier
---
 .../ActionIcon.demo.configurator.tsx          | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx b/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx
index 4244818f7a0..6997e7a8316 100644
--- a/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx
+++ b/src/mantine-demos/src/demos/core/ActionIcon/ActionIcon.demo.configurator.tsx
@@ -20,18 +20,40 @@ function Wrapper(props: ActionIconProps) {
   );
 }
 
-const codeTemplate = (props: string) => `
+function computeChildIconSizeProp(props: string) {
+  if (props.includes('size="xs"')) {
+    return 'size={12}';
+  }
+  if (props.includes('size="sm"')) {
+    return 'size={14}';
+  }
+  if (props.includes('size="md"')) {
+    return 'size={18}';
+  }
+  if (props.includes('size="lg"')) {
+    return 'size={26}';
+  }
+  if (props.includes('size="xl"')) {
+    return 'size={34}';
+  }
+  return 'size={18}';
+}
+
+const codeTemplate = (props: string) => {
+  const childIconSizeProp = computeChildIconSizeProp(props);
+  return `
 import { ActionIcon } from '@mantine/core';
 import { IconAdjustments } from '@tabler/icons';
 
 function Demo() {
   return (
     <ActionIcon${props}>
-      <IconAdjustments />
+      <IconAdjustments ${childIconSizeProp} />
     </ActionIcon>
   );
 }
 `;
+};
 
 export const configurator: MantineDemo = {
   type: 'configurator',