bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 22:44:11 +00:00
Code Issues Releases Wiki Activity

[CL-388] Update vertical nav colors for new palette (#11226)

Browse Source
This commit is contained in:
Victoria League
2024-09-27 14:52:38 -04:00
committed by GitHub
parent 066012227e
commit dd439010ef
3 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,9 +22,7 @@ export default {
title: "Component Library/Nav/Nav Group",
component: NavGroupComponent,
decorators: [
positionFixedWrapperDecorator(
(story) => `<bit-layout><bit-side-nav>${story}</bit-side-nav></bit-layout>`,
),
positionFixedWrapperDecorator((story) => `<bit-layout>${story}</bit-layout>`),
moduleMetadata({
imports: [
SharedModule,
@@ -73,17 +71,19 @@ export default {
export const Default: StoryObj<NavGroupComponent> = {
render: (args) => ({
props: args,
template: `
<bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
<bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
<bit-nav-item text="Child B" route="b"></bit-nav-item>
<bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
</bit-nav-group>
<bit-nav-group 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>
template: /*html*/ `
<bit-side-nav>
<bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
<bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
<bit-nav-item text="Child B" route="b"></bit-nav-item>
<bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
</bit-nav-group>
<bit-nav-group 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>
`,
}),
};
@@ -91,22 +91,44 @@ export const Default: StoryObj<NavGroupComponent> = {
export const Tree: StoryObj<NavGroupComponent> = {
render: (args) => ({
props: args,
template: `
<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-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-item text="Level 4 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
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-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-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>
<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-item text="Level 1 - no children" route="t10" icon="bwi-collection" 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-group>
</bit-side-nav>
`,
}),
};
export const Secondary: StoryObj<NavGroupComponent> = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-side-nav variant="secondary">
<bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
<bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
<bit-nav-item text="Child B" route="b"></bit-nav-item>
<bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
</bit-nav-group>
<bit-nav-group 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>
`,
}),
};

2
libs/components/src/navigation/side-nav.component.html
View File

@@ -15,7 +15,7 @@
"
[cdkTrapFocus]="data.isOverlay"
[attr.role]="data.isOverlay ? 'dialog' : null"
[attr.aria-modal]="data.isOverlay"
[attr.aria-modal]="data.isOverlay ? 'true' : null"
(keydown)="handleKeyDown($event)"
>
<ng-content></ng-content>

8
libs/components/src/tw-theme.css
View File

@@ -6,8 +6,8 @@
--color-background: 255 255 255;
--color-background-alt: 243 246 249;
--color-background-alt2: 23 92 219;
--color-background-alt3: 18 82 163;
--color-background-alt4: 13 60 119;
--color-background-alt3: 26 65 172;
--color-background-alt4: 2 15 102;
--color-primary-100: 219 229 246;
--color-primary-300: 121 161 233;
@@ -60,8 +60,8 @@
--color-background: 32 39 51;
--color-background-alt: 18 26 39;
--color-background-alt2: 47 52 61;
--color-background-alt3: 47 52 61;
--color-background-alt4: 16 18 21;
--color-background-alt3: 48 57 70;
--color-background-alt4: 18 26 39;
--color-primary-100: 2 15 102;
--color-primary-300: 26 65 172;