mirror of
https://github.com/bitwarden/browser.git
synced 2024-09-20 03:01:46 +02:00
[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
This commit is contained in:
parent
076e605f10
commit
156eabe774
@ -6,49 +6,85 @@ const linkStyles: Record<LinkType, string[]> = {
|
|||||||
primary: [
|
primary: [
|
||||||
"!tw-text-primary-500",
|
"!tw-text-primary-500",
|
||||||
"hover:!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",
|
"disabled:!tw-text-primary-500/60",
|
||||||
],
|
],
|
||||||
secondary: [
|
secondary: [
|
||||||
"!tw-text-main",
|
"!tw-text-main",
|
||||||
"hover:!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",
|
"disabled:!tw-text-muted/60",
|
||||||
],
|
],
|
||||||
contrast: [
|
contrast: [
|
||||||
"!tw-text-contrast",
|
"!tw-text-contrast",
|
||||||
"hover:!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",
|
"disabled:!tw-text-contrast/60",
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
@Directive({
|
const commonStyles = [
|
||||||
selector: "button[bitLink], a[bitLink]",
|
"tw-leading-none",
|
||||||
})
|
"tw-p-0",
|
||||||
export class LinkDirective {
|
"tw-font-semibold",
|
||||||
@HostBinding("class") get classList() {
|
"tw-bg-transparent",
|
||||||
return [
|
"tw-border-0",
|
||||||
"tw-font-semibold",
|
"tw-border-none",
|
||||||
"tw-py-0.5",
|
"tw-rounded",
|
||||||
"tw-px-0",
|
"tw-transition",
|
||||||
"tw-bg-transparent",
|
"hover:tw-underline",
|
||||||
"tw-border-0",
|
"hover:tw-decoration-1",
|
||||||
"tw-border-none",
|
"disabled:tw-no-underline",
|
||||||
"tw-rounded",
|
"disabled:tw-cursor-not-allowed",
|
||||||
"tw-transition",
|
"focus-visible:tw-outline-none",
|
||||||
"hover:tw-underline",
|
"focus-visible:tw-underline",
|
||||||
"hover:tw-decoration-1",
|
"focus-visible: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] ?? []);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// 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()
|
@Input()
|
||||||
linkType: LinkType = "primary";
|
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] ?? []);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import { CommonModule } from "@angular/common";
|
import { CommonModule } from "@angular/common";
|
||||||
import { NgModule } from "@angular/core";
|
import { NgModule } from "@angular/core";
|
||||||
|
|
||||||
import { LinkDirective } from "./link.directive";
|
import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [CommonModule],
|
imports: [CommonModule],
|
||||||
exports: [LinkDirective],
|
exports: [AnchorLinkDirective, ButtonLinkDirective],
|
||||||
declarations: [LinkDirective],
|
declarations: [AnchorLinkDirective, ButtonLinkDirective],
|
||||||
})
|
})
|
||||||
export class LinkModule {}
|
export class LinkModule {}
|
||||||
|
@ -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 {
|
export default {
|
||||||
title: "Component Library/Link",
|
title: "Component Library/Link",
|
||||||
component: LinkDirective,
|
decorators: [
|
||||||
|
moduleMetadata({
|
||||||
|
imports: [LinkModule],
|
||||||
|
}),
|
||||||
|
],
|
||||||
argTypes: {
|
argTypes: {
|
||||||
linkType: {
|
linkType: {
|
||||||
options: ["primary", "secondary", "contrast"],
|
options: ["primary", "secondary", "contrast"],
|
||||||
@ -19,25 +24,33 @@ export default {
|
|||||||
},
|
},
|
||||||
} as Meta;
|
} as Meta;
|
||||||
|
|
||||||
const ButtonTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
|
const ButtonTemplate: Story<ButtonLinkDirective> = (args: ButtonLinkDirective) => ({
|
||||||
props: args,
|
props: args,
|
||||||
template: `
|
template: `
|
||||||
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
|
<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>
|
<div class="tw-block tw-p-2">
|
||||||
<button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
|
<button bitLink [linkType]="linkType">Button</button>
|
||||||
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
|
</div>
|
||||||
Add Icon Button
|
<div class="tw-block tw-p-2">
|
||||||
</button>
|
<button bitLink [linkType]="linkType">
|
||||||
<button bitLink [linkType]="linkType" class="tw-mb-2 tw-block">
|
<i class="bwi bwi-fw bwi-plus-circle" aria-hidden="true"></i>
|
||||||
Chevron Icon Button
|
Add Icon Button
|
||||||
<i class="bwi bwi-fw bwi-sm bwi-angle-down" aria-hidden="true"></i>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
<button bitLink [linkType]="linkType" class="tw-text-sm tw-block">Small Button</button>
|
<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>
|
</div>
|
||||||
`,
|
`,
|
||||||
});
|
});
|
||||||
|
|
||||||
const AnchorTemplate: Story<LinkDirective> = (args: LinkDirective) => ({
|
const AnchorTemplate: Story<AnchorLinkDirective> = (args: AnchorLinkDirective) => ({
|
||||||
props: args,
|
props: args,
|
||||||
template: `
|
template: `
|
||||||
<div class="tw-p-2" [ngClass]="{ 'tw-bg-transparent': linkType != 'contrast', 'tw-bg-primary-500': linkType === 'contrast' }">
|
<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",
|
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) => ({
|
const DisabledTemplate: Story = (args) => ({
|
||||||
props: args,
|
props: args,
|
||||||
template: `
|
template: `
|
||||||
|
Loading…
Reference in New Issue
Block a user