Merge pull request #41 from PxTools/feature/PXWEB2-34-Button

PXWEB2-34 Added option for icon left and icon right. Added stories.
PxTools · Mar 5, 2024 · ffef6e8 · ffef6e8
2 parents a178eba + 0337ae5
commit ffef6e8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 24 deletions.
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss
@@ -7,6 +7,7 @@
   font-style: normal;
   font-weight: 500;
   line-height: 1.5rem; /* 150% */
+  border: none;
 
   &:disabled {
     cursor: not-allowed;
@@ -24,16 +25,7 @@
   color: var(--px-color-text-on-action);
   border-radius: var(--px-border-radius-full);
   background: var(--px-color-surface-action);
-
-  // Override browser default styles
-  border: none;
-  border-style: none;
-
-  &:hover {
-    border-radius: var(--px-border-radius-medium);
-  }
   &:active {
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -47,16 +39,14 @@
 
   color: var(--px-color-text-action);
   border-radius: var(--px-border-radius-full);
-  border: 1.5px solid var(--px-color-border-action);
+  box-shadow: 0 0 0 1.5px var(--px-color-border-action) inset;
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -68,19 +58,16 @@
 .tertiary {
   // Override browser defaults styles
   background-color: inherit;
-
   color: var(--px-color-text-action);
   border: none;
   border-radius: var(--px-border-radius-full);
 
   &:hover {
     color: var(--px-color-text-on-action-subtle);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-subtle-hover);
   }
   &:active {
     color: var(--px-color-text-on-action);
-    border-radius: var(--px-border-radius-medium);
     background: var(--px-color-surface-action-active);
   }
   &:disabled {
@@ -90,14 +77,21 @@
 }
 
 .small {
-  display: flex;
-  width: 2rem;
+  display: inline-flex;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   height: 2rem;
-  padding: 0.75rem;
+  padding: 0.375rem 0.75rem;
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
   flex-shrink: 0;
+  &:hover {
+    border-radius: var(--px-border-radius-small);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-small);
+  }
 }
 
 .medium {
@@ -107,8 +101,18 @@
   justify-content: center;
   align-items: center;
   gap: 0.5rem;
+  &:hover {
+    border-radius: var(--px-border-radius-medium);
+  }
+  &:active {
+    border-radius: var(--px-border-radius-medium);
+  }
 }
 
-.iconOnly {
+.iconOnlyMedium {
   padding: 0.75rem;
 }
+
+.iconOnlySmall {
+  padding: 0.75rem 0.25rem;
+}
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.stories.tsx
@@ -9,7 +9,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 function test() {
-  alert('test');
+  alert('Button clicked');
 }
 
 export const ButtonSettings: Story = {
@@ -127,6 +127,24 @@ export const Variants: StoryFn<typeof Button> = () => {
         onClick={test}
         aria-label={'Button with icon'}
       ></Button>
+      <br />
+      Primary icon left
+      <br />
+      <Button variant="primary" onClick={test} iconPosition="left" icon="Clock">
+        Button
+      </Button>
+      <br />
+      Primary icon right
+      <br />
+      <Button
+        variant="primary"
+        onClick={test}
+        icon="Clock"
+        iconPosition="right"
+      >
+        Button
+      </Button>
+      <br />
     </>
   );
 };
diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.tsx b/libs/pxweb2-ui/src/lib/components/Button/Button.tsx
@@ -8,25 +8,40 @@ export interface ButtonProps
   size?: 'small' | 'medium';
   variant: 'primary' | 'secondary' | 'tertiary';
   icon?: IconProps['iconName'];
+  iconPosition?: 'left' | 'right';
   children?: string;
 }
 
 export function Button({
   icon,
+  iconPosition = 'left',
   variant,
   size = 'medium',
   children,
   ...rest
 }: ButtonProps) {
   return (
     <button
-      className={cl(classes.button, classes[size], classes[variant], {
-        [classes.iconOnly]: !children && icon,
-      })}
+      className={cl(
+        classes.button,
+        classes[size],
+        classes[variant],
+        {
+          [classes.iconOnlyMedium]: !children && icon && size === 'medium',
+        },
+        {
+          [classes.iconOnlySmall]: !children && icon && size === 'small',
+        }
+      )}
       {...rest}
     >
-      {icon && <Icon iconName={icon}></Icon>}
+      {icon && iconPosition === 'left' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
       {children}
+      {icon && iconPosition === 'right' && (
+        <Icon iconName={icon} className=""></Icon>
+      )}
     </button>
   );
 }