From df6e671dabb802d2e5fe48cc90c89d6751e986d7 Mon Sep 17 00:00:00 2001
From: Marek Mihok <marek.mihok@h2o.ai>
Date: Mon, 18 Sep 2023 11:14:18 +0200
Subject: [PATCH] chore: use primary button instead of styles change #2121

---
 ui/src/button.tsx              | 23 ++++-------------------
 website/widgets/form/button.md |  8 ++++++++
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/ui/src/button.tsx b/ui/src/button.tsx
index 86b5cb3f57..7112941c70 100644
--- a/ui/src/button.tsx
+++ b/ui/src/button.tsx
@@ -115,11 +115,6 @@ const
     center: 'center',
     between: 'space-between',
     around: 'space-around',
-  },
-  iconButtonPrimaryStyles = {
-    root: { color: cssVar('$white'), background: cssVar('$themePrimary') },
-    rootHovered: { color: cssVar('$white'), background: cssVar('$themeDarkAlt') },
-    rootPressed: { color: cssVar('$white'), background: cssVar('$themePrimary') }
   }
 
 const
@@ -177,21 +172,11 @@ const
       split: !!commands,
     }
     if (isIconOnly) {
-      return <Fluent.IconButton
-        {...btnProps}
-        data-test={name}
-        title={caption}
-        // Fluent does not support primary icon buttons so we need to override the styles.
-        styles={primary
-          ? {
-            ...styles,
-            ...iconButtonPrimaryStyles,
-            root: { ...(styles.root as any), ...iconButtonPrimaryStyles.root }
-          }
-          : undefined
-        }
-      />
+      return primary
+        ? <Fluent.PrimaryButton {...btnProps} data-test={name} title={caption} />
+        : <Fluent.IconButton {...btnProps} data-test={name} title={caption} />
     }
+
     return caption?.length
       ? primary
         ? <Fluent.CompoundButton {...btnProps} data-test={name} primary secondaryText={caption} />
diff --git a/website/widgets/form/button.md b/website/widgets/form/button.md
index 91f1dbe185..2ea0f1ce7a 100644
--- a/website/widgets/form/button.md
+++ b/website/widgets/form/button.md
@@ -63,6 +63,14 @@ q.page['form'] = ui.form_card(box='1 1 1 1', items=[
 ])
 ```
 
+You can also use the icon only button as a [primary button](#primary-button).
+
+```py
+q.page['form'] = ui.form_card(box='1 1 1 1', items=[
+    ui.button(name='button', icon='ChevronRight', caption='Tooltip on hover', primary=True)
+])
+```
+
 ## Button layout
 
 Buttons on their own can only be placed in a [form_card](/docs/api/ui#form_card), either vertically or horizontally.