vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[CL-181] Fix toggle group badge alignment (#8167)

This commit is contained in:
Victoria League 2024-03-01 16:17:24 -05:00 committed by GitHub
parent 8af1a1528b
commit f95ff93a71
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
libs/components/src/toggle-group/toggle-group.stories.ts
View File

@ -30,23 +30,15 @@ type Story = StoryObj<ToggleGroupComponent>;
export const Default: Story = { export const Default: Story = {
render: (args) => ({ render: (args) => ({
props: args, props: args,
template: ` template: /* HTML */ `
<bit-toggle-group [(selected)]="selected" aria-label="People list filter"> <bit-toggle-group [(selected)]="selected" aria-label="People list filter">
<bit-toggle value="all"> <bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
All <span bitBadge variant="info">3</span>
</bit-toggle>
<bit-toggle value="invited"> <bit-toggle value="invited"> Invited </bit-toggle>
Invited
</bit-toggle>
<bit-toggle value="accepted"> <bit-toggle value="accepted"> Accepted <span bitBadge variant="info">2</span> </bit-toggle>
Accepted <span bitBadge variant="info">2</span>
</bit-toggle>
<bit-toggle value="deactivated"> <bit-toggle value="deactivated"> Deactivated </bit-toggle>
Deactivated
</bit-toggle>
</bit-toggle-group> </bit-toggle-group>
`, `,
}), }),

6
libs/components/src/toggle-group/toggle.component.ts
View File

@ -70,10 +70,8 @@ export class ToggleComponent<TValue> {
// Fix for bootstrap styles that add bottom margin // Fix for bootstrap styles that add bottom margin
"!tw-mb-0", "!tw-mb-0",
// Fix for badge being pushed slightly lower when inside a button. // Fix for badge being slightly off center vertically
// Inspired by bootstrap, which does the same. "[&>[bitBadge]]:tw-mt-px",
"[&>[bitBadge]]:tw-relative",
"[&>[bitBadge]]:tw--top-px",
]; ];
} }