1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00

[CL-333] Icon Refresh Feature Branch (#14298)

* [CL-571] Update icons to new fileset and metaphors (#14163)

* [CL-518] Convert icons docs to stories (#14299)

* [CL-574] Update inline autofill icons (#14379)

---------

Co-authored-by: William Martin <contact@willmartian.com>
This commit is contained in:
Vicki League
2025-05-07 17:07:14 -04:00
committed by GitHub
parent 74b6bb15e8
commit 8ecb32f30f
78 changed files with 1735 additions and 1582 deletions

View File

@@ -19,7 +19,7 @@ export abstract class NavBaseComponent {
@Input() ariaLabel: string;
/**
* Optional icon, e.g. `"bwi-collection"`
* Optional icon, e.g. `"bwi-collection-shared"`
*/
@Input() icon: string;

View File

@@ -117,20 +117,20 @@ export const Tree: StoryObj<NavGroupComponent> = {
props: args,
template: /*html*/ `
<bit-side-nav>
<bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
<bit-nav-group text="Level 1 - with children (empty)" route="t1" icon="bwi-collection" variant="tree"></bit-nav-group>
<bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection" variant="tree"></bit-nav-item>
<bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection" variant="tree" [open]="true">
<bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection" variant="tree" [open]="true">
<bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
<bit-nav-group text="Level 1 - with children (empty)" route="t1" icon="bwi-collection-shared" variant="tree"></bit-nav-group>
<bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
<bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection-shared" variant="tree" [open]="true">
<bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection-shared" variant="tree" [open]="true">
<bit-nav-item text="Level 3 - no children, no icon" route="t5" variant="tree"></bit-nav-item>
<bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection" variant="tree" [open]="true">
<bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">
<bit-nav-item text="Level 4 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
</bit-nav-group>
</bit-nav-group>
<bit-nav-group text="Level 2 - with children (empty)" route="t8" icon="bwi-collection" variant="tree" [open]="true"></bit-nav-group>
<bit-nav-item text="Level 2 - no children" route="t9" icon="bwi-collection" variant="tree"></bit-nav-item>
<bit-nav-group text="Level 2 - with children (empty)" route="t8" icon="bwi-collection-shared" variant="tree" [open]="true"></bit-nav-group>
<bit-nav-item text="Level 2 - no children" route="t9" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
</bit-nav-group>
<bit-nav-item text="Level 1 - no children" route="t10" icon="bwi-collection" variant="tree"></bit-nav-item>
<bit-nav-item text="Level 1 - no children" route="t10" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
</bit-nav-group>
</bit-side-nav>
`,

View File

@@ -71,7 +71,7 @@ export const WithoutIcon: Story = {
export const WithoutRoute: Story = {
render: () => ({
template: `
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Hello World" icon="bwi-collection-shared"></bit-nav-item>
`,
}),
};
@@ -80,7 +80,7 @@ export const WithChildButtons: Story = {
render: (args) => ({
props: args,
template: `
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection">
<bit-nav-item text="Hello World" [route]="['']" icon="bwi-collection-shared">
<button
slot="end"
class="tw-ml-auto"
@@ -106,11 +106,11 @@ export const MultipleItemsWithDivider: Story = {
render: (args) => ({
props: args,
template: `
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
<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-divider></bit-nav-divider>
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Hello World" icon="bwi-collection"></bit-nav-item>
<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>
`,
}),
};
@@ -119,9 +119,9 @@ export const ForceActiveStyles: Story = {
render: (args) => ({
props: args,
template: `
<bit-nav-item text="First Nav" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Active Nav" icon="bwi-collection" [forceActiveStyles]="true"></bit-nav-item>
<bit-nav-item text="Third Nav" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="First Nav" icon="bwi-collection-shared"></bit-nav-item>
<bit-nav-item text="Active Nav" icon="bwi-collection-shared" [forceActiveStyles]="true"></bit-nav-item>
<bit-nav-item text="Third Nav" icon="bwi-collection-shared"></bit-nav-item>
`,
}),
};