Allow additional classes to be specified on the clean up button (#1737)

* Allow additional classes to be specified on the clean up button * Add 'fit' size to button * Add size property to CleanUpButton
trento-project · Aug 24, 2023 · 5a74ca7 · 5a74ca7
1 parent d31a8f3
commit 5a74ca7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 3 deletions.
diff --git a/assets/js/components/Button/Button.jsx b/assets/js/components/Button/Button.jsx
@@ -5,6 +5,8 @@ const getSizeClasses = (size) => {
   switch (size) {
     case 'small':
       return 'py-1 px-2 text-sm';
+    case 'fit':
+      return 'text-sm';
     default:
       return 'py-2 px-4 text-base';
   }

diff --git a/assets/js/components/Button/Button.stories.jsx b/assets/js/components/Button/Button.stories.jsx
@@ -5,6 +5,17 @@ import Button from '.';
 export default {
   title: 'Button',
   component: Button,
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'fit'],
+      description: 'Button size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'small' },
+      },
+    },
+  },
 };
 
 export function Default() {
@@ -27,6 +38,10 @@ export function Small() {
   return <Button size="small">Hello world!</Button>;
 }
 
+export function Fit() {
+  return <Button size="fit">Hello world!</Button>;
+}
+
 export function SmallSecondary() {
   return (
     <Button size="small" type="secondary">

diff --git a/assets/js/components/CleanUpButton/CleanUpButton.jsx b/assets/js/components/CleanUpButton/CleanUpButton.jsx
@@ -1,16 +1,22 @@
 import React from 'react';
 
 import { EOS_CLEANING_SERVICES } from 'eos-icons-react';
+import classNames from 'classnames';
 
 import Button from '@components/Button';
 import Spinner from '@components/Spinner';
 
-function CleanUpButton({ cleaning, onClick }) {
+function CleanUpButton({ className, size = 'small', cleaning, onClick }) {
+  const buttonClasses = classNames(
+    'inline-block mx-0.5 border-green-500 border w-fit',
+    className
+  );
+
   return (
     <Button
       type="primary-white"
-      className="inline-block mx-0.5 border-green-500 border w-fit"
-      size="small"
+      className={buttonClasses}
+      size={size}
       disabled={cleaning}
       onClick={() => onClick()}
     >

diff --git a/assets/js/components/CleanUpButton/CleanUpButton.stories.jsx b/assets/js/components/CleanUpButton/CleanUpButton.stories.jsx
@@ -13,6 +13,22 @@ export default {
       },
     },
     onClick: { action: 'Click button' },
+    className: {
+      control: 'text',
+      description: 'CSS classes',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    size: {
+      control: { type: 'radio' },
+      options: ['small', 'fit'],
+      description: 'Button size',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'small' },
+      },
+    },
   },
 };
 
@@ -26,3 +42,11 @@ export const Cleaning = {
     cleaning: true,
   },
 };
+
+export const NoOutline = {
+  args: {
+    ...Default.args,
+    className: 'border-none shadow-none',
+    size: 'fit',
+  },
+};
diff --git a/assets/js/components/HostsList.jsx b/assets/js/components/HostsList.jsx
@@ -193,6 +193,8 @@ function HostsList() {
           content && (
             <CleanUpButton
               cleaning={item.deregistering}
+              size="fit"
+              className="border-none shadow-none"
               onClick={() => {
                 openDeregistrationModal(item);
               }}