bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 08:43: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

57
libs/components/src/link/link.stories.ts
View File

@@ -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: `