From ca7fff67bc418d4cd69f429ed94cf4779e4b8c81 Mon Sep 17 00:00:00 2001
From: Alexis Rico <sferadev@gmail.com>
Date: Wed, 12 Jan 2022 09:04:07 +0100
Subject: [PATCH] Revert changes on drafts folder

Signed-off-by: Alexis Rico <sferadev@gmail.com>
---
 docs/content/drafts/Button2.mdx    | 10 ++++++----
 docs/content/drafts/IconButton.mdx |  4 ++--
 docs/content/drafts/LinkButton.mdx |  4 +++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/content/drafts/Button2.mdx b/docs/content/drafts/Button2.mdx
index 0f54701d20b..c97feb64249 100644
--- a/docs/content/drafts/Button2.mdx
+++ b/docs/content/drafts/Button2.mdx
@@ -57,9 +57,11 @@ The `invisible` variant of `Button` indicates that the action is a low priority
 
 ```jsx live
 <>
-  <drafts.Button sx={{size: 'small'}}>Search</drafts.Button>
+  <drafts.Button size="small">Search</drafts.Button>
   <drafts.Button sx={{mt: 2}}>Search</drafts.Button>
-  <drafts.Button sx={{mt: 2, size: 'large'}}>Search</drafts.Button>
+  <drafts.Button sx={{mt: 2}} size="large">
+    Search
+  </drafts.Button>
 </>
 ```
 
@@ -94,13 +96,13 @@ A separate component called `IconButton` is used if the action shows only an ico
 
 ```jsx live
 <>
-  <drafts.IconButton icon={SearchIcon} sx={{size: 'small'}}>
+  <drafts.IconButton icon={SearchIcon} size="small">
     Search
   </drafts.IconButton>
   <drafts.IconButton sx={{ml: 2}} icon={SearchIcon}>
     Search
   </drafts.IconButton>
-  <drafts.IconButton sx={{ml: 2, size: 'large'}} icon={SearchIcon}>
+  <drafts.IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
     Search
   </drafts.IconButton>
 </>
diff --git a/docs/content/drafts/IconButton.mdx b/docs/content/drafts/IconButton.mdx
index fe731b5d02a..2e6521dd05f 100644
--- a/docs/content/drafts/IconButton.mdx
+++ b/docs/content/drafts/IconButton.mdx
@@ -31,13 +31,13 @@ A separate component called `IconButton` is used if the action shows only an ico
 
 ```jsx live
 <>
-  <drafts.IconButton icon={SearchIcon} sx={{size: 'small'}}>
+  <drafts.IconButton icon={SearchIcon} size="small">
     Search
   </drafts.IconButton>
   <drafts.IconButton sx={{ml: 2}} icon={SearchIcon}>
     Search
   </drafts.IconButton>
-  <drafts.IconButton sx={{ml: 2, size: 'large'}} icon={SearchIcon}>
+  <drafts.IconButton sx={{ml: 2}} icon={SearchIcon} size="large">
     Search
   </drafts.IconButton>
 </>
diff --git a/docs/content/drafts/LinkButton.mdx b/docs/content/drafts/LinkButton.mdx
index 80f05853a6c..107ae00d225 100644
--- a/docs/content/drafts/LinkButton.mdx
+++ b/docs/content/drafts/LinkButton.mdx
@@ -39,7 +39,9 @@ The `LinkButton` can be considered an extension of `Button` component. It accept
 ```jsx live
 <Box>
   <drafts.LinkButton>Small link</drafts.LinkButton>
-  <drafts.LinkButton sx={{mt: 2, size: 'large'}}>Large link</drafts.LinkButton>
+  <drafts.LinkButton size="large" sx={{mt: 2}}>
+    Large link
+  </drafts.LinkButton>
   <drafts.LinkButton variant="invisible" sx={{mt: 2}}>
     Invisible link
   </drafts.LinkButton>