Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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 = {
render: (args) => ({
props: args,
template: `
template: /* HTML */ `
<bit-toggle-group [(selected)]="selected" aria-label="People list filter">
<bit-toggle value="all">
All <span bitBadge variant="info">3</span>
</bit-toggle>
<bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
<bit-toggle value="invited">
Invited
</bit-toggle>
<bit-toggle value="invited"> Invited </bit-toggle>
<bit-toggle value="accepted">
Accepted <span bitBadge variant="info">2</span>
</bit-toggle>
<bit-toggle value="accepted"> Accepted <span bitBadge variant="info">2</span> </bit-toggle>
<bit-toggle value="deactivated">
Deactivated
</bit-toggle>
<bit-toggle value="deactivated"> Deactivated </bit-toggle>
</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
"!tw-mb-0",
// Fix for badge being pushed slightly lower when inside a button.
// Inspired by bootstrap, which does the same.
"[&>[bitBadge]]:tw-relative",
"[&>[bitBadge]]:tw--top-px",
// Fix for badge being slightly off center vertically
"[&>[bitBadge]]:tw-mt-px",
];
}