bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues Releases Wiki Activity

[CL-750][CL-751][CL-752] Fix nav item truncation, clickable area, and shield logo (#15522)

Browse Source
This commit is contained in:
Vicki League
2025-07-10 17:02:42 -04:00
committed by GitHub
parent bf50160a47
commit 2f1ab48c37
6 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,16 +17,16 @@
<ng-template #anchorAndButtonContent>
<div
[title]="text"
class="tw-truncate tw-gap-2 tw-items-center tw-font-bold"
class="tw-gap-2 tw-items-center tw-font-bold tw-h-full tw-content-center"
[ngClass]="{ 'tw-text-center': !open, 'tw-flex': open }"
>
<i
class="!tw-m-0 tw-w-4 bwi bwi-fw tw-text-alt2 {{ icon }}"
class="!tw-m-0 tw-w-4 tw-shrink-0 bwi bwi-fw tw-text-alt2 {{ icon }}"
[attr.aria-hidden]="open"
[attr.aria-label]="text"
></i>
@if (open) {
<span>{{ text }}</span>
<span class="tw-truncate">{{ text }}</span>
}
</div>
</ng-template>
@@ -36,7 +36,7 @@
<!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin$` -->
<!-- The following `class` field should match the `#isButton` class field below -->
<a
class="tw-w-full tw-px-3 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"
class="tw-size-full tw-px-3 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"
data-fvw
[routerLink]="route"
[relativeTo]="relativeTo"
@@ -56,7 +56,7 @@
<!-- Class field should match `#isAnchor` class field above -->
<button
type="button"
class="tw-w-full tw-px-3 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"
class="tw-size-full tw-px-3 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"
data-fvw
(click)="mainContentClicked.emit()"
>

13
libs/components/src/navigation/nav-item.stories.ts
View File

@@ -68,6 +68,13 @@ export const WithoutIcon: Story = {
},
};
export const WithLongText: Story = {
...Default,
args: {
text: "Hello World This Is a Cool Item",
},
};
export const WithoutRoute: Story = {
render: () => ({
template: `
@@ -80,7 +87,7 @@ export const WithChildButtons: Story = {
render: (args) => ({
props: args,
template: `
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection-shared">
<bit-nav-item text="Hello World Very Cool World" [route]="['']" icon="bwi-collection-shared">
<button
slot="end"
class="tw-ms-auto"
@@ -106,8 +113,8 @@ export const MultipleItemsWithDivider: Story = {
render: (args) => ({
props: args,
template: `
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
<bit-nav-item text="Hello World"></bit-nav-item>
<bit-nav-item text="Hello World Long Text Long"></bit-nav-item>
<bit-nav-divider></bit-nav-divider>
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>