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

fix padding when nested. remove ng style and class (#17874)

Browse Source 
* fix padding when nested. remove ng style and class

* add expanded group to story to cover bug fix

* use class binding for async classes

* remove unnecessary x padding to improve truncation

* simplify padding logic

* fix padding end in closed state

* add back some padding in tree view

* add back padding to avoid weird spacing scenarios
This commit is contained in:
Bryan Cunningham
2025-12-10 09:28:36 -05:00
committed by GitHub
parent 892f5548d2
commit 44384d51c9
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
libs/components/src/navigation/nav-group.stories.ts
View File

@@ -84,6 +84,11 @@ export const Default: StoryObj<NavGroupComponent> = {
<bit-nav-item text="Child B"></bit-nav-item> <bit-nav-item text="Child B"></bit-nav-item>
<bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item> <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
</bit-nav-group> </bit-nav-group>
<bit-nav-group open="true" text="Lorem Ipsum (Button)" icon="bwi-filter">
<bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
<bit-nav-item text="Child B"></bit-nav-item>
<bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
</bit-nav-group>
</bit-side-nav> </bit-side-nav>
`, `,
}), }),

27
libs/components/src/navigation/nav-item.component.html
View File

@@ -2,16 +2,12 @@
@let open = sideNavService.open$ | async; @let open = sideNavService.open$ | async;
@if (open || icon()) { @if (open || icon()) {
<div <div
[ngStyle]="{ [style.padding-inline-start]="navItemIndentationPadding()"
'padding-inline-start': navItemIndentationPadding(),
}"
class="tw-relative tw-rounded-md tw-h-10" class="tw-relative tw-rounded-md tw-h-10"
[ngClass]="[ [class.tw-bg-background-alt4]="showActiveStyles"
showActiveStyles [class.tw-bg-background-alt3]="!showActiveStyles"
? 'tw-bg-background-alt4' [class.hover:tw-bg-hover-contrast]="!showActiveStyles"
: 'tw-bg-background-alt3 hover:tw-bg-hover-contrast', [class]="fvwStyles$ | async"
fvwStyles$ | async,
]"
> >
<div class="tw-relative tw-flex tw-items-center tw-h-full"> <div class="tw-relative tw-flex tw-items-center tw-h-full">
@if (open) { @if (open) {
@@ -26,13 +22,12 @@
<!-- Main content of `NavItem` --> <!-- Main content of `NavItem` -->
<ng-template #anchorAndButtonContent> <ng-template #anchorAndButtonContent>
<div <div
[ngClass]="[
variant() === 'tree' || treeDepth() > 0 ? 'tw-py-0' : 'tw-py-2',
open ? 'tw-pe-4' : 'tw-text-center',
]"
[title]="text()" [title]="text()"
class="tw-gap-2 tw-flex tw-items-center tw-font-medium tw-h-full" class="tw-gap-2 tw-flex tw-items-center tw-font-medium tw-h-full"
[ngClass]="{ 'tw-justify-center': !open }" [class.tw-py-0]="variant() === 'tree' || treeDepth() > 0"
[class.tw-py-2]="variant() !== 'tree' && treeDepth() === 0"
[class.tw-text-center]="!open"
[class.tw-justify-center]="!open"
> >
@if (icon()) { @if (icon()) {
<i <i
@@ -53,7 +48,7 @@
<!-- The following `class` field should match the `#isButton` class field below --> <!-- The following `class` field should match the `#isButton` class field below -->
<a <a
class="tw-size-full tw-px-4 tw-block tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&_i]:tw-leading-[1.5rem]" class="tw-size-full tw-px-4 tw-block tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&_i]:tw-leading-[1.5rem]"
[ngClass]="{ 'tw-ps-0': variant() === 'tree' || treeDepth() > 0 }" [class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
data-fvw data-fvw
[routerLink]="route()" [routerLink]="route()"
[relativeTo]="relativeTo()" [relativeTo]="relativeTo()"
@@ -74,7 +69,7 @@
<button <button
type="button" type="button"
class="tw-size-full tw-px-4 tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&_i]:tw-leading-[1.5rem]" class="tw-size-full tw-px-4 tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none [&_i]:tw-leading-[1.5rem]"
[ngClass]="open ? 'tw-pe-3' : 'tw-pe-4'" [class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
data-fvw data-fvw
(click)="mainContentClicked.emit()" (click)="mainContentClicked.emit()"
> >