add small button variant (#14326)

* adds small button size variant

* makes small icon button same size as small button

* testing small button for extension header

* remove extension changes

* update popout layout story

* revert change to small icon button padding

* add whitespace to see if error resolves

* default buttonType to primary

* default buttonType to secondary

* add comment around why nonNullButtonSize value exists

* add comment to  property about using the non null version

* Update apps/browser/src/platform/popup/layout/popup-layout.stories.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* updated input syntax when using static values

* remove nonNull value coersion

* allow changing of size input in Story

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -80,7 +80,7 @@ class VaultComponent {
 @Component({
   selector: "mock-add-button",
   template: `
-    <button bitButton buttonType="primary" type="button">
+    <button bitButton size="small" buttonType="primary" type="button">
       <i class="bwi bwi-plus-f" aria-hidden="true"></i>
       Add
     </button>

libs/components/src/button/button.component.ts

@@ -1,12 +1,10 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { NgClass } from "@angular/common";
-import { Input, HostBinding, Component, model, computed } from "@angular/core";
+import { Input, HostBinding, Component, model, computed, input } from "@angular/core";
 import { toObservable, toSignal } from "@angular/core/rxjs-interop";
 import { debounce, interval } from "rxjs";
 
-import { ButtonLikeAbstraction, ButtonType } from "../shared/button-like.abstraction";
+import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
 
 const focusRing = [
   "focus-visible:tw-ring-2",
@@ -15,6 +13,11 @@ const focusRing = [
   "focus-visible:tw-z-10",
 ];
 
+const buttonSizeStyles: Record<ButtonSize, string[]> = {
+  small: ["tw-py-1", "tw-px-3", "tw-text-sm"],
+  default: ["tw-py-1.5", "tw-px-3"],
+};
+
 const buttonStyles: Record<ButtonType, string[]> = {
   primary: [
     "tw-border-primary-600",
@@ -59,8 +62,6 @@ export class ButtonComponent implements ButtonLikeAbstraction {
   @HostBinding("class") get classList() {
     return [
       "tw-font-semibold",
-      "tw-py-1.5",
-      "tw-px-3",
       "tw-rounded-full",
       "tw-transition",
       "tw-border-2",
@@ -85,7 +86,8 @@ export class ButtonComponent implements ButtonLikeAbstraction {
               "disabled:hover:tw-no-underline",
             ]
           : [],
-      );
+      )
+      .concat(buttonSizeStyles[this.size() || "default"]);
   }
 
   protected disabledAttr = computed(() => {
@@ -105,7 +107,9 @@ export class ButtonComponent implements ButtonLikeAbstraction {
     return this.showLoadingStyle() || (this.disabledAttr() && this.loading() === false);
   });
 
-  @Input() buttonType: ButtonType;
+  @Input() buttonType: ButtonType = "secondary";
+
+  size = input<ButtonSize>("default");
 
   private _block = false;
 

libs/components/src/button/button.stories.ts

@@ -9,6 +9,13 @@ export default {
     buttonType: "primary",
     disabled: false,
     loading: false,
+    size: "default",
+  },
+  argTypes: {
+    size: {
+      options: ["small", "default"],
+      control: { type: "radio" },
+    },
   },
   parameters: {
     design: {
@@ -24,19 +31,19 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-    <div class="tw-flex tw-gap-4 tw-mb-6">
+    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Button</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover">Button:hover</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-active">Button:active</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
     </div>
-    <div class="tw-flex tw-gap-4">
+    <div class="tw-flex tw-gap-4 tw-items-center">
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block">Anchor</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover">Anchor:hover</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [block]="block" class="tw-test-active">Anchor:active</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
     </div>
     `,
   }),
@@ -59,6 +66,22 @@ export const Danger: Story = {
   },
 };
 
+export const Small: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'primary'" [size]="size" [block]="block">Primary small</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'secondary'" [size]="size" [block]="block">Secondary small</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="'danger'" [size]="size" [block]="block">Danger small</button>
+    </div>
+    `,
+  }),
+  args: {
+    size: "small",
+  },
+};
+
 export const Loading: Story = {
   render: (args) => ({
     props: args,

libs/components/src/shared/button-like.abstraction.ts

@@ -4,6 +4,8 @@ import { ModelSignal } from "@angular/core";
 // @ts-strict-ignore
 export type ButtonType = "primary" | "secondary" | "danger" | "unstyled";
 
+export type ButtonSize = "default" | "small";
+
 export abstract class ButtonLikeAbstraction {
   loading: ModelSignal<boolean>;
   disabled: ModelSignal<boolean>;