bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 09:43:23 +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 C" icon="bwi-filter"></bit-nav-item>
</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>
`,
}),

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

@@ -2,16 +2,12 @@
@let open = sideNavService.open$ | async;
@if (open || icon()) {
<div
[ngStyle]="{
'padding-inline-start': navItemIndentationPadding(),
}"
[style.padding-inline-start]="navItemIndentationPadding()"
class="tw-relative tw-rounded-md tw-h-10"
[ngClass]="[
showActiveStyles
? 'tw-bg-background-alt4'
: 'tw-bg-background-alt3 hover:tw-bg-hover-contrast',
fvwStyles$ | async,
]"
[class.tw-bg-background-alt4]="showActiveStyles"
[class.tw-bg-background-alt3]="!showActiveStyles"
[class.hover:tw-bg-hover-contrast]="!showActiveStyles"
[class]="fvwStyles$ | async"
>
<div class="tw-relative tw-flex tw-items-center tw-h-full">
@if (open) {
@@ -26,13 +22,12 @@
<!-- Main content of `NavItem` -->
<ng-template #anchorAndButtonContent>
<div
[ngClass]="[
variant() === 'tree' || treeDepth() > 0 ? 'tw-py-0' : 'tw-py-2',
open ? 'tw-pe-4' : 'tw-text-center',
]"
[title]="text()"
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()) {
<i
@@ -53,7 +48,7 @@
<!-- The following `class` field should match the `#isButton` class field below -->
<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]"
[ngClass]="{ 'tw-ps-0': variant() === 'tree' || treeDepth() > 0 }"
[class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
data-fvw
[routerLink]="route()"
[relativeTo]="relativeTo()"
@@ -74,7 +69,7 @@
<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]"
[ngClass]="open ? 'tw-pe-3' : 'tw-pe-4'"
[class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
data-fvw
(click)="mainContentClicked.emit()"
>