[CL-59] [Bug] Link buttons have different height depending on html tag used (#3954)

* [CL-59] feat: add explicit relative line-height to button

* [EC-59] feat: fix using pseudo element workaround

* [EC-59] fix: inconsistent templates

* [CL-59] feat: add inline example

* [CL-59] fix: tweak horizontal padding

libs/components/src/link/link.directive.ts

@@ -6,49 +6,85 @@ const linkStyles: Record<LinkType, string[]> = {
   primary: [
     "!tw-text-primary-500",
     "hover:!tw-text-primary-500",
-    "focus-visible:tw-ring-primary-700",
+    "focus-visible:before:tw-ring-primary-700",
     "disabled:!tw-text-primary-500/60",
   ],
   secondary: [
     "!tw-text-main",
     "hover:!tw-text-main",
-    "focus-visible:tw-ring-primary-700",
+    "focus-visible:before:tw-ring-primary-700",
     "disabled:!tw-text-muted/60",
   ],
   contrast: [
     "!tw-text-contrast",
     "hover:!tw-text-contrast",
-    "focus-visible:tw-ring-text-contrast",
+    "focus-visible:before:tw-ring-text-contrast",
     "disabled:!tw-text-contrast/60",
   ],
 };
 
-@Directive({
-  selector: "button[bitLink], a[bitLink]",
-})
-export class LinkDirective {
-  @HostBinding("class") get classList() {
-    return [
-      "tw-font-semibold",
-      "tw-py-0.5",
-      "tw-px-0",
-      "tw-bg-transparent",
-      "tw-border-0",
-      "tw-border-none",
-      "tw-rounded",
-      "tw-transition",
-      "hover:tw-underline",
-      "hover:tw-decoration-1",
-      "focus-visible:tw-outline-none",
-      "focus-visible:tw-underline",
-      "focus-visible:tw-decoration-1",
-      "focus-visible:tw-ring-2",
-      "focus-visible:tw-z-10",
-      "disabled:tw-no-underline",
-      "disabled:tw-cursor-not-allowed",
-    ].concat(linkStyles[this.linkType] ?? []);
-  }
+const commonStyles = [
+  "tw-leading-none",
+  "tw-p-0",
+  "tw-font-semibold",
+  "tw-bg-transparent",
+  "tw-border-0",
+  "tw-border-none",
+  "tw-rounded",
+  "tw-transition",
+  "hover:tw-underline",
+  "hover:tw-decoration-1",
+  "disabled:tw-no-underline",
+  "disabled:tw-cursor-not-allowed",
+  "focus-visible:tw-outline-none",
+  "focus-visible:tw-underline",
+  "focus-visible:tw-decoration-1",
 
+  // Workaround for html button tag not being able to be set to `display: inline`
+  // and at the same time not being able to use `tw-ring-offset` because of box-shadow issue.
+  // https://github.com/w3c/csswg-drafts/issues/3226
+  // Add `tw-inline`, add `tw-py-0.5` and use regular `tw-ring` if issue is fixed.
+  //
+  // https://github.com/tailwindlabs/tailwindcss/issues/3595
+  // Remove `before:` and use regular `tw-ring` when browser no longer has bug, or better:
+  // switch to `outline` with `outline-offset` when Safari supports border radius on outline.
+  // Using `box-shadow` to create outlines is a hack and as such `outline` should be preferred.
+  "tw-relative",
+  "before:tw-content-['']",
+  "before:tw-block",
+  "before:tw-absolute",
+  "before:-tw-inset-x-[0.1em]",
+  "before:tw-rounded-md",
+  "before:tw-transition",
+  "before:tw-ring-2",
+  "focus-visible:before:tw-ring-text-contrast",
+  "focus-visible:tw-z-10",
+];
+
+@Directive()
+abstract class LinkDirective {
   @Input()
   linkType: LinkType = "primary";
 }
+
+@Directive({
+  selector: "a[bitLink]",
+})
+export class AnchorLinkDirective extends LinkDirective {
+  @HostBinding("class") get classList() {
+    return ["before:-tw-inset-y-[0.125rem]"]
+      .concat(commonStyles)
+      .concat(linkStyles[this.linkType] ?? []);
+  }
+}
+
+@Directive({
+  selector: "button[bitLink]",
+})
+export class ButtonLinkDirective extends LinkDirective {
+  @HostBinding("class") get classList() {
+    return ["before:-tw-inset-y-[0.25rem]"]
+      .concat(commonStyles)
+      .concat(linkStyles[this.linkType] ?? []);
+  }
+}

libs/components/src/link/link.module.ts

@@ -1,11 +1,11 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
-import { LinkDirective } from "./link.directive";
+import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
 
 @NgModule({
   imports: [CommonModule],
-  exports: [LinkDirective],
-  declarations: [LinkDirective],
+  exports: [AnchorLinkDirective, ButtonLinkDirective],
+  declarations: [AnchorLinkDirective, ButtonLinkDirective],
 })
 export class LinkModule {}

libs/components/src/link/link.stories.ts

@@ -1,10 +1,15 @@
-import { Meta, Story } from "@storybook/angular";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
-import { LinkDirective } from "./link.directive";
+import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
+import { LinkModule } from "./link.module";
 
 export default {
   title: "Component Library/Link",
-  component: LinkDirective,
+  decorators: [
+    moduleMetadata({
+      imports: [LinkModule],
+    }),
+  ],
   argTypes: {
     linkType: {
       options: ["primary", "secondary", "contrast"],
@@ -19,25 +24,33 @@ export default {
   },
 } as Meta;
 
-const ButtonTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
+const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) => ({
   props: args,
   template: `
   <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
-    <button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">Button</button>
-    <button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
-      <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
-      Add Icon Button
-    </button>
-    <button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
-      Chevron Icon Button
-      <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
-    </button>
-    <button bitLink [linkType]="linkType" class="tw-text-sm tw-block">Small Button</button>
+    <div class="tw-block tw-p-2">
+      <button bitLink [linkType]="linkType">Button</button>
+    </div>
+    <div class="tw-block tw-p-2">
+      <button bitLink [linkType]="linkType">
+        <i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
+        Add Icon Button
+      </button>
+    </div>
+    <div class="tw-block tw-p-2">
+      <button bitLink [linkType]="linkType">
+        Chevron Icon Button
+        <i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="tw-block tw-p-2">
+      <button bitLink [linkType]="linkType" class="tw-text-sm">Small Button</button>
+    </div>
   </div>
   `,
 });
 
-const AnchorTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
+const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) => ({
   props: args,
   template: `
   <div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
@@ -73,6 +86,20 @@ Anchors.args = {
   linkType: "primary",
 };
 
+const InlineTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <span class="tw-text-main">
+      On the internet pargraphs often contain <a bitLink href="#">inline links</a>, but few know that <button bitLink>buttons</button> can be used for similar purposes.
+    </span>
+  `,
+});
+
+export const Inline = InlineTemplate.bind({});
+Inline.args = {
+  linkType: "primary",
+};
+
 const DisabledTemplate: Story = (args) => ({
   props: args,
   template: `