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:
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
`,
|
||||
|
||||
@@ -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>
|
||||
`,
|
||||
}),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user