bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-13 14:53:33 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* [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:
Andreas Coroiu
2022-11-21 13:13:31 +01:00
committed by GitHub
parent 076e605f10
commit 156eabe774
3 changed files with 109 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
libs/components/src/link/link.directive.ts
View File

@@ -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] ?? []);
}
}