From 57991904fb3b99cf847c7fb26106e6743d9cf421 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Wed, 14 Jun 2023 23:15:55 -0700
Subject: [PATCH] [EuiButtonIcon] Add Storybook playground

+ configure all playgrounds to sort props by required first, then alphabetical
---
 .storybook/preview.tsx                        |  1 +
 .../button_group/button_group.stories.tsx     |  1 -
 .../button_icon/button_icon.stories.tsx       | 40 +++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 src/components/button/button_icon/button_icon.stories.tsx

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 1054c043e289..d54403c31ff1 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -63,6 +63,7 @@ const preview: Preview = {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
     controls: {
+      sort: 'requiredFirst',
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
diff --git a/src/components/button/button_group/button_group.stories.tsx b/src/components/button/button_group/button_group.stories.tsx
index 10b8c6aa0b62..9e3c8cdd3cca 100644
--- a/src/components/button/button_group/button_group.stories.tsx
+++ b/src/components/button/button_group/button_group.stories.tsx
@@ -21,7 +21,6 @@ const meta: Meta<EuiButtonGroupProps> = {
   component: EuiButtonGroup,
   parameters: {
     controls: {
-      sort: 'requiredFirst',
       exclude: ['data-test-subj'],
     },
   },
diff --git a/src/components/button/button_icon/button_icon.stories.tsx b/src/components/button/button_icon/button_icon.stories.tsx
new file mode 100644
index 000000000000..8e60019d6d0a
--- /dev/null
+++ b/src/components/button/button_icon/button_icon.stories.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { icon } from '../../icon/assets/face_happy'; // TODO: Remove this once icons can be loaded by strings
+import { EuiButtonIcon, EuiButtonIconProps } from './button_icon';
+
+const meta: Meta<EuiButtonIconProps> = {
+  title: 'EuiButtonIcon',
+  component: EuiButtonIcon,
+  argTypes: {
+    iconType: {
+      // TODO: Storybook can't load icons dynamically
+      // Disable user `iconType` input/controls for now
+      control: 'function',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiButtonIconProps>;
+
+export const Playground: Story = {
+  args: {
+    iconType: icon, // TODO: Storybook can't load icons dynamically
+    color: 'primary',
+    display: 'empty',
+    size: 'xs',
+    iconSize: 'm',
+    isDisabled: false,
+    isLoading: false,
+    isSelected: false,
+  },
+};