From 09903ee83eea6e453b96e2919f23d9ae73cc1b58 Mon Sep 17 00:00:00 2001
From: slk333 <aweb33@icloud.com>
Date: Sun, 21 Aug 2022 11:22:19 +0200
Subject: [PATCH 1/3] ActionIcon:  Fix mismatch between demo apparent code and
 real code

The real code was changing both the ActionIcon size and the embedded Icon size
---
 .../demos/core/ActionIcon/ActionIcon.demo.configurator.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 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..508fd85a607 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
@@ -2,19 +2,19 @@ import React from 'react';
 import { IconAdjustments } from '@tabler/icons';
 import { ActionIcon, ActionIconProps, Group } from '@mantine/core';
 
-const iconSizes = {
+/* const iconSizes = {
   xs: 12,
   sm: 14,
   md: 18,
   lg: 26,
   xl: 34,
-};
+}; */
 
 function Wrapper(props: ActionIconProps) {
   return (
     <Group position="center">
       <ActionIcon {...props}>
-        <IconAdjustments size={iconSizes[props.size]} />
+        <IconAdjustments />
       </ActionIcon>
     </Group>
   );

From dc207f1141b621626b2b788a17851025171269ae Mon Sep 17 00:00:00 2001
From: slk333 <aweb33@icloud.com>
Date: Sun, 21 Aug 2022 15:30:36 +0200
Subject: [PATCH 2/3] apparent code matches real code instead

---
 .../ActionIcon.demo.configurator.tsx          | 34 +++++++++++++++----
 1 file changed, 28 insertions(+), 6 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 508fd85a607..f763d70d191 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
@@ -2,36 +2,58 @@ import React from 'react';
 import { IconAdjustments } from '@tabler/icons';
 import { ActionIcon, ActionIconProps, Group } from '@mantine/core';
 
-/* const iconSizes = {
+const iconSizes = {
   xs: 12,
   sm: 14,
   md: 18,
   lg: 26,
   xl: 34,
-}; */
+};
 
 function Wrapper(props: ActionIconProps) {
   return (
     <Group position="center">
       <ActionIcon {...props}>
-        <IconAdjustments />
+        <IconAdjustments size={iconSizes[props.size]} />
       </ActionIcon>
     </Group>
   );
 }
 
-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',

From 24a0e971d9b5083bf5d7cc745672f01cfc1322ca Mon Sep 17 00:00:00 2001
From: slk333 <aweb33@icloud.com>
Date: Sun, 21 Aug 2022 16:44:49 +0200
Subject: [PATCH 3/3] fix prettier

---
 .../ActionIcon.demo.configurator.tsx          | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 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 f763d70d191..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,28 +20,28 @@ function Wrapper(props: ActionIconProps) {
   );
 }
 
-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}';
+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 (`
+  const childIconSizeProp = computeChildIconSizeProp(props);
+  return `
 import { ActionIcon } from '@mantine/core';
 import { IconAdjustments } from '@tabler/icons';
 
@@ -52,7 +52,7 @@ function Demo() {
     </ActionIcon>
   );
 }
-`);
+`;
 };
 
 export const configurator: MantineDemo = {