Skip to content

Commit 814c33f

Browse files
xelaintxelaint
authored
feat(design): clean up sidebar header UI (#3453)
1 parent 0fda495 commit 814c33f

File tree

11 files changed

+105
-48
lines changed

11 files changed

+105
-48
lines changed

‎apps/daffio/src/app/core/nav/sidebar-body/component.scss

-4
This file was deleted.

‎apps/daffio/src/app/core/nav/sidebar-body/component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { DaffioNavLink } from '../link/type';
1919
@Component({
2020
selector: 'daffio-nav-links-sidebar-body',
2121
templateUrl: './component.html',
22-
styleUrls: ['./component.scss'],
2322
changeDetection: ChangeDetectionStrategy.OnPush,
2423
standalone: true,
2524
imports: [

‎apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.html

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1 @@
1-
<daff-sidebar-header>
2-
<button daff-icon-button color="theme-contrast" daffSidebarHeaderAction (click)="close()">
3-
<fa-icon [icon]="faTimes"></fa-icon>
4-
</button>
5-
</daff-sidebar-header>
1+
<daff-sidebar-header [dismissible]="true" (closeSidebar)="close()"></daff-sidebar-header>

‎apps/daffio/src/app/core/sidebar/components/sidebar-header/sidebar-header.component.ts

-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
ChangeDetectionStrategy,
33
Component,
44
} from '@angular/core';
5-
import { faTimes } from '@fortawesome/free-solid-svg-icons';
65

76
import { DaffioSidebarService } from '../../services/sidebar.service';
87

@@ -12,8 +11,6 @@ import { DaffioSidebarService } from '../../services/sidebar.service';
1211
changeDetection: ChangeDetectionStrategy.OnPush,
1312
})
1413
export class DaffioSidebarHeaderComponent {
15-
faTimes = faTimes;
16-
1714
constructor(
1815
private sidebarService: DaffioSidebarService,
1916
) {}

‎libs/design/sidebar/examples/src/basic-sidebar/basic-sidebar.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<daff-sidebar-viewport>
22
<daff-sidebar class="basic-sidebar">
3+
<daff-sidebar-header [dismissible]="true">
4+
Sidebar Title
5+
</daff-sidebar-header>
36
Sidebar content
47
</daff-sidebar>
58
<div class="basic-sidebar__content">

‎libs/design/sidebar/examples/src/over-and-under-sidebars/over-and-under-sidebars.component.html

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<daff-sidebar-viewport (backdropClicked)="closeSidebar()">
22
<daff-sidebar class="over-sidebar" [mode]="modeControl.value" [side]="sideControl.value" [open]="open" (escapePressed)="closeSidebar()">
3-
<daff-sidebar-header>
4-
<button daff-icon-button color="theme-contrast" daffSidebarHeaderAction (click)="closeSidebar()">
5-
<fa-icon [icon]="faTimes" size="sm"></fa-icon>
6-
</button>
3+
<daff-sidebar-header [dismissible]="true">
74
<div daffSidebarHeaderTitle>Title</div>
85
</daff-sidebar-header>
96
<div class="over-and-under-sidebars__sidebar-content">

‎libs/design/sidebar/src/sidebar-header/sidebar-header.component.html

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1-
<ng-content select="[daffSidebarHeaderAction]"></ng-content>
2-
<ng-content select="[daffSidebarHeaderTitle]"></ng-content>
3-
<ng-content></ng-content>
1+
<button class="daff-sidebar-header__close-icon" aria-label="Close Sidebar" *ngIf="dismissible" (click)="onCloseSidebar($event)">
2+
<fa-icon [icon]="faTimes" [fixedWidth]="true" size="lg"></fa-icon>
3+
</button>
4+
<div class="daff-sidebar-header__content">
5+
<ng-content></ng-content>
6+
</div>

‎libs/design/sidebar/src/sidebar-header/sidebar-header.component.scss

+31-22
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,57 @@
11
@use '../../../scss/typography' as t;
2+
@use '../../../scss/interactions';
23

34
.daff-sidebar-header {
45
display: flex;
56
align-items: center;
67
position: relative;
8+
padding: 0 1rem;
9+
min-height: 3rem;
10+
max-height: 3rem;
711
width: 100%;
812

9-
&__action {
13+
&__close-icon {
14+
@include interactions.clickable();
1015
position: absolute;
16+
appearance: none;
17+
background: none;
18+
border: none;
19+
color: currentColor;
20+
height: 3rem;
21+
margin: 0;
22+
min-height: 3rem;
23+
min-width: 3rem;
24+
padding: 0;
25+
width: 3rem;
26+
left: initial;
27+
right: 0;
28+
top: 0;
1129
}
1230

13-
&__title {
31+
&__title,
32+
&__content {
1433
@include t.text-truncate();
1534
font-size: 1rem;
1635
line-height: 1rem;
1736
font-weight: 500;
1837
}
1938

20-
&__action + &__title {
21-
margin: 0 0 0 29px;
39+
&__close-icon + &__content {
40+
margin: 0 1.75rem 0 0;
2241
}
2342
}
2443

2544
.daff-sidebar {
26-
.daff-sidebar-header {
27-
padding: 16px;
28-
29-
&__action {
30-
position: absolute;
31-
left: 0;
32-
right: initial;
33-
top: 0;
34-
}
35-
}
36-
3745
&.right {
3846
.daff-sidebar-header {
39-
&__action {
40-
left: initial;
41-
right: 0;
42-
}
43-
44-
&__title {
45-
margin: 0 29px 0 0;
47+
&__close-icon {
48+
left: 0;
49+
right: initial;
50+
51+
+ .daff-sidebar-header__title,
52+
+ .daff-sidebar-header__content {
53+
margin: 0 0 0 1.75rem;
54+
}
4655
}
4756
}
4857
}

‎libs/design/sidebar/src/sidebar-header/sidebar-header.component.spec.ts

+34-2
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@ import { By } from '@angular/platform-browser';
1212
import { DaffSidebarHeaderComponent } from './sidebar-header.component';
1313

1414
@Component({
15-
template: `<daff-sidebar-header>Header</daff-sidebar-header>`,
15+
template: `
16+
<daff-sidebar-header [dismissible]="dismissible" (closeSidebar)="closeSidebarFunction()">Header</daff-sidebar-header>`,
1617
standalone: true,
1718
imports: [
1819
DaffSidebarHeaderComponent,
1920
],
2021
})
21-
class WrapperComponent {}
22+
class WrapperComponent {
23+
dismissible: boolean;
24+
closeSidebarFunction = () => {};
25+
}
2226

2327
describe('@daffodil/design/sidebar | DaffSidebarHeaderComponent', () => {
2428
let wrapper: WrapperComponent;
@@ -53,4 +57,32 @@ describe('@daffodil/design/sidebar | DaffSidebarHeaderComponent', () => {
5357
'daff-sidebar-header': true,
5458
}));
5559
});
60+
61+
describe('when dismissible is set to true', () => {
62+
beforeEach(() => {
63+
wrapper.dismissible = true;
64+
fixture.detectChanges();
65+
});
66+
67+
it('should add a class of "dismissible" to the host element', () => {
68+
expect(de.classes['dismissible']).toBeTrue();
69+
});
70+
71+
it('should show the close icon button', () => {
72+
expect(fixture.debugElement.query(By.css('.daff-sidebar-header__close-icon'))).toBeTruthy();
73+
});
74+
});
75+
76+
describe('when the close icon button is clicked', () => {
77+
it('should emit closeNotification', () => {
78+
wrapper.dismissible = true;
79+
fixture.detectChanges();
80+
81+
spyOn(component.closeSidebar, 'emit');
82+
83+
fixture.debugElement.query(By.css('.daff-sidebar-header__close-icon')).nativeElement.click();
84+
85+
expect(component.closeSidebar.emit).toHaveBeenCalledWith();
86+
});
87+
});
5688
});

‎libs/design/sidebar/src/sidebar-header/sidebar-header.component.ts

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
import { NgIf } from '@angular/common';
12
import {
23
Component,
34
HostBinding,
45
ChangeDetectionStrategy,
56
ViewEncapsulation,
7+
Input,
8+
Output,
9+
EventEmitter,
610
} from '@angular/core';
11+
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
12+
import { faTimes } from '@fortawesome/free-solid-svg-icons';
713

814
@Component({
915
selector: 'daff-sidebar-header',
@@ -12,8 +18,25 @@ import {
1218
encapsulation: ViewEncapsulation.None,
1319
changeDetection: ChangeDetectionStrategy.OnPush,
1420
standalone: true,
15-
21+
imports: [
22+
FaIconComponent,
23+
NgIf,
24+
],
1625
})
1726
export class DaffSidebarHeaderComponent {
27+
faTimes = faTimes;
28+
1829
@HostBinding('class.daff-sidebar-header') class = true;
30+
31+
/** Whether or not a sidebar header displays the close icon */
32+
@Input() @HostBinding('class.dismissible') dismissible = false;
33+
34+
/**
35+
* Output event triggered when the close icon is clicked.
36+
*/
37+
@Output() closeSidebar: EventEmitter<void> = new EventEmitter();
38+
39+
onCloseSidebar(event: Event) {
40+
this.closeSidebar.emit();
41+
}
1942
}

‎libs/design/sidebar/src/sidebar/sidebar.component.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
@use '../helper/variables';
22
@use '../../../scss/layout';
33

4+
$default-sidebar-width: 15rem;
5+
46
// stylelint-disable selector-class-pattern
57
// stylelint-disable unit-no-unknown
68
:host {
79
display: flex;
810
flex-direction: column;
911
flex-shrink: 0;
1012
overflow-y: auto;
11-
width: 240px;
13+
width: $default-sidebar-width;
1214

1315
&.left {
14-
width: var(--daff-sidebar-left-width, 240px);
16+
width: var(--daff-sidebar-left-width, $default-sidebar-width);
1517
}
1618

1719
&.right {
18-
width: var(--daff-sidebar-right-width, 240px);
20+
width: var(--daff-sidebar-right-width, $default-sidebar-width);
1921
}
2022

2123
&.side-fixed {

0 commit comments

Comments
 (0)