[CL-54] Add support for button block without argument + submit button (#3498)

libs/components/src/button/button.directive.ts

@@ -59,13 +59,12 @@ export class ButtonDirective {
       "focus-visible:tw-ring-primary-700",
       "focus-visible:tw-z-10",
     ]
-      .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
+      .concat(
+        this.block == null || this.block === false ? ["tw-inline-block"] : ["tw-w-full", "tw-block"]
+      )
       .concat(buttonStyles[this.buttonType ?? "secondary"]);
   }
 
-  @Input()
-  buttonType: ButtonTypes = null;
-
-  @Input()
-  block = false;
+  @Input() buttonType: ButtonTypes = null;
+  @Input() block?: boolean;
 }

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

@@ -52,3 +52,21 @@ export const Disabled = DisabledTemplate.bind({});
 Disabled.args = {
   size: "small",
 };
+
+const BlockTemplate: Story<ButtonDirective> = (args: ButtonDirective) => ({
+  props: args,
+  template: `
+    <span class="tw-flex">
+      <button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
+      <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
+
+      <button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
+      <a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
+    </span>
+  `,
+});
+
+export const Block = BlockTemplate.bind({});
+Block.args = {
+  block: true,
+};

libs/components/src/submit-button/submit-button.component.html

@@ -1,4 +1,10 @@
-<button bitButton type="submit" [buttonType]="buttonType" [disabled]="loading || disabled">
+<button
+  bitButton
+  type="submit"
+  [block]="block"
+  [buttonType]="buttonType"
+  [disabled]="loading || disabled"
+>
   <span class="tw-relative">
     <span [ngClass]="{ 'tw-invisible': loading }">
       <ng-content></ng-content>

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

@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, HostBinding, Input } from "@angular/core";
 
 import { ButtonTypes } from "../button";
 
@@ -10,4 +10,10 @@ export class SubmitButtonComponent {
   @Input() buttonType: ButtonTypes = "primary";
   @Input() disabled = false;
   @Input() loading: boolean;
+
+  @Input() block?: boolean;
+
+  @HostBinding("class") get classList() {
+    return this.block == null || this.block === false ? [] : ["tw-w-full", "tw-block"];
+  }
 }

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

@@ -14,6 +14,7 @@ export default {
   args: {
     buttonType: "primary",
     loading: false,
+    block: false,
   },
   parameters: {
     design: {
@@ -25,7 +26,7 @@ export default {
 
 const Template: Story<SubmitButtonComponent> = (args: SubmitButtonComponent) => ({
   props: args,
-  template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled">
+  template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled" [block]="block">
     Submit
   </bit-submit-button>`,
 });