Skip to content

style(ui): standardise empty states and filter bars across committee tabs, mailing list members, and transactions #558

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nunoeufrasio wants to merge 3 commits into from
Closed

style(ui): standardise empty states and filter bars across committee tabs, mailing list members, and transactions #558

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7e08f4d
style(ui): standardise empty states and filter bars across committee …
nunoeufrasio Apr 23, 2026
6e942d3
fix(dashboards): constrain next meeting column width to fix descripti…
nunoeufrasio Apr 23, 2026
eabd772
fix(meetings): stop treating maybe RSVPs as pending actions (#557)
manishdixitlfx Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions .../app/modules/committees/components/committee-documents/committee-documents.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@

<lfx-card data-testid="committee-documents-card">
<!-- Filters -->
<div class="pb-3 mb-3 border-b border-gray-100">
<div class="flex flex-wrap items-center gap-2">
<div class="pb-2 mb-2">
<div class="flex flex-col md:flex-row md:items-center gap-3 md:gap-4">
<!-- Search -->
<div class="flex-1 min-w-48">
<div class="flex-1 min-w-0">
<lfx-input-text
[form]="filterForm"
control="search"
Expand All @@ -19,7 +19,7 @@
</div>

<!-- Source filter -->
<div class="w-36 shrink-0 overflow-hidden">
<div class="w-full sm:w-auto sm:shrink-0">
<lfx-select
[form]="filterForm"
control="source"
Expand Down
14 changes: 5 additions & 9 deletions ...rc/app/modules/committees/components/committee-meetings/committee-meetings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,15 +160,11 @@ <h2 class="text-lg font-semibold text-gray-900">Meetings</h2>
}
</div>
} @else {
<lfx-card>
<div class="flex flex-col items-center py-12">
<i class="fa-light fa-calendar text-3xl text-gray-300 mb-3" aria-hidden="true"></i>
<p class="text-sm font-medium text-gray-500">No {{ timeFilter() === 'upcoming' ? 'upcoming' : 'past' }} meetings</p>
<p class="text-xs text-gray-400 mt-1">
{{ timeFilter() === 'upcoming' ? 'Meetings for this group will appear here when scheduled.' : 'No past meetings found for this group.' }}
</p>
</div>
</lfx-card>
<lfx-empty-state
icon="fa-light fa-calendar"
[title]="timeFilter() === 'upcoming' ? 'No upcoming meetings' : 'No past meetings'"
[subtitle]="timeFilter() === 'upcoming' ? 'Meetings for this group will appear here when scheduled.' : 'No past meetings found for this group.'">
</lfx-empty-state>
Comment on lines +163 to +167
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching to lfx-empty-state removes the previous aria-hidden="true" on the decorative icon. EmptyStateComponent currently renders its without aria-hidden, which can cause screen readers to announce the icon class/name. Consider updating lfx-empty-state to set aria-hidden="true" on the icon (or provide an input to control it) to avoid this accessibility regression.

Suggested change
<lfx-empty-state
icon="fa-light fa-calendar"
[title]="timeFilter() === 'upcoming' ? 'No upcoming meetings' : 'No past meetings'"
[subtitle]="timeFilter() === 'upcoming' ? 'Meetings for this group will appear here when scheduled.' : 'No past meetings found for this group.'">
</lfx-empty-state>
<div class="flex flex-col items-center justify-center py-12 text-center" data-testid="committee-meetings-empty-state">
<i class="fa-light fa-calendar text-4xl text-gray-300 mb-4" aria-hidden="true"></i>
<h3 class="text-lg font-semibold text-gray-900">
{{ timeFilter() === 'upcoming' ? 'No upcoming meetings' : 'No past meetings' }}
</h3>
<p class="mt-1 text-sm text-gray-500">
{{ timeFilter() === 'upcoming' ? 'Meetings for this group will appear here when scheduled.' : 'No past meetings found for this group.' }}
</p>
</div>

Copilot uses AI. Check for mistakes.
}
}
</div>
2 changes: 2 additions & 0 deletions .../src/app/modules/committees/components/committee-meetings/committee-meetings.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { MeetingCardComponent } from '@app/modules/meetings/components/meeting-c
import { FullCalendarComponent } from '@app/shared/components/fullcalendar/fullcalendar.component';
import { ButtonComponent } from '@components/button/button.component';
import { CardComponent } from '@components/card/card.component';
import { EmptyStateComponent } from '@components/empty-state/empty-state.component';
import { InputTextComponent } from '@components/input-text/input-text.component';
import { SelectComponent } from '@components/select/select.component';
import { environment } from '@environments/environment';
Expand Down Expand Up @@ -38,6 +39,7 @@ import { catchError, debounceTime, distinctUntilChanged, filter, finalize, forkJ
SkeletonModule,
MeetingCardComponent,
FullCalendarComponent,
EmptyStateComponent,
],
templateUrl: './committee-meetings.component.html',
styleUrl: './committee-meetings.component.scss',
Expand Down
25 changes: 14 additions & 11 deletions .../src/app/modules/committees/components/committee-members/committee-members.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,17 +181,20 @@
} @else {
<tr>
<td [attr.colspan]="committee()?.enable_voting ? 7 : 5" class="text-center py-8">
<div class="text-center">
<i class="fa-light fa-users text-3xl text-gray-300 mb-2"></i>
<p class="text-sm font-medium text-gray-600">No members found</p>
@if (canManageMembers()) {
<div class="mt-3">
<button class="text-xs text-blue-600 hover:text-blue-700 font-medium" (click)="openAddMemberDialog()">
<i class="fa-light fa-user-plus mr-1"></i>Add the first member
</button>
</div>
}
</div>
<i class="fa-light fa-users text-3xl text-gray-400 mb-2"></i>
<p class="text-sm text-gray-500">No members found</p>
@if (canManageMembers()) {
<div class="mt-3">
<lfx-button
label="Add the first member"
icon="fa-light fa-user-plus"
severity="primary"
size="small"
[outlined]="true"
(onClick)="openAddMemberDialog()">
</lfx-button>
</div>
}
</td>
</tr>
}
Expand Down
12 changes: 5 additions & 7 deletions .../src/app/modules/committees/components/committee-surveys/committee-surveys.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,11 @@
data-testid="committee-surveys-empty-create-btn"></lfx-button>
</div>
}
<lfx-card>
<div class="flex flex-col items-center py-12">
<i class="fa-light fa-chart-simple text-3xl text-gray-300 mb-3" aria-hidden="true"></i>
<p class="text-sm font-medium text-gray-600">No surveys yet</p>
<p class="text-xs text-gray-400 mt-1">Surveys for this committee will appear here.</p>
</div>
</lfx-card>
<lfx-empty-state
icon="fa-light fa-chart-simple"
title="No surveys yet"
subtitle="Surveys for this committee will appear here.">
</lfx-empty-state>
Comment on lines +37 to +41
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching to lfx-empty-state removes the previous aria-hidden="true" on the decorative icon. EmptyStateComponent currently renders its without aria-hidden, which can cause screen readers to announce the icon class/name. Consider updating lfx-empty-state to set aria-hidden="true" on the icon (or provide an input to control it) to avoid this accessibility regression.

Suggested change
<lfx-empty-state
icon="fa-light fa-chart-simple"
title="No surveys yet"
subtitle="Surveys for this committee will appear here.">
</lfx-empty-state>
<div class="flex flex-col items-center justify-center gap-3 py-8 text-center">
<i class="fa-light fa-chart-simple text-4xl" aria-hidden="true"></i>
<div class="flex flex-col gap-1">
<div class="text-lg font-semibold">No surveys yet</div>
<div class="text-sm">Surveys for this committee will appear here.</div>
</div>
</div>

Copilot uses AI. Check for mistakes.
}

<lfx-survey-results-drawer [(visible)]="resultsDrawerVisible" [surveyId]="selectedSurveyId()" [listSurvey]="selectedSurvey()" [hasPMOAccess]="canEdit()">
Expand Down
4 changes: 2 additions & 2 deletions ...ne/src/app/modules/committees/components/committee-surveys/committee-surveys.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { ChangeDetectionStrategy, Component, inject, input, model, signal, Signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { ButtonComponent } from '@components/button/button.component';
import { CardComponent } from '@components/card/card.component';
import { EmptyStateComponent } from '@components/empty-state/empty-state.component';
import { Committee, Survey } from '@lfx-one/shared/interfaces';
import { SurveysTableComponent } from '@app/modules/surveys/components/surveys-table/surveys-table.component';
import { SurveyResultsDrawerComponent } from '@app/modules/surveys/components/survey-results-drawer/survey-results-drawer.component';
Expand All @@ -14,7 +14,7 @@ import { catchError, filter, finalize, of, switchMap, tap } from 'rxjs';

@Component({
selector: 'lfx-committee-surveys',
imports: [ButtonComponent, CardComponent, SurveysTableComponent, SurveyResultsDrawerComponent],
imports: [ButtonComponent, EmptyStateComponent, SurveysTableComponent, SurveyResultsDrawerComponent],
templateUrl: './committee-surveys.component.html',
styleUrl: './committee-surveys.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
Expand Down
12 changes: 5 additions & 7 deletions ...-one/src/app/modules/committees/components/committee-votes/committee-votes.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,11 @@
data-testid="committee-votes-empty-create-btn"></lfx-button>
</div>
}
<lfx-card>
<div class="flex flex-col items-center py-12">
<i class="fa-light fa-check-to-slot text-3xl text-surface-300 mb-3" aria-hidden="true"></i>
<p class="text-sm font-medium text-muted-color">No votes yet</p>
<p class="text-xs text-surface-400 mt-1">Votes for this committee will appear here.</p>
</div>
</lfx-card>
<lfx-empty-state
icon="fa-light fa-check-to-slot"
title="No votes yet"
subtitle="Votes for this committee will appear here.">
</lfx-empty-state>
Comment on lines +38 to +42
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Switching to lfx-empty-state removes the previous aria-hidden="true" on the decorative icon. EmptyStateComponent currently renders its without aria-hidden, which can cause screen readers to announce the icon class/name. Consider updating lfx-empty-state to set aria-hidden="true" on the icon (or provide an input to control it) to avoid this accessibility regression.

Suggested change
<lfx-empty-state
icon="fa-light fa-check-to-slot"
title="No votes yet"
subtitle="Votes for this committee will appear here.">
</lfx-empty-state>
<div class="flex flex-col items-center justify-center gap-3 py-8 text-center">
<i class="fa-light fa-check-to-slot text-4xl" aria-hidden="true"></i>
<div class="text-lg font-semibold">No votes yet</div>
<div class="text-sm text-gray-600">Votes for this committee will appear here.</div>
</div>

Copilot uses AI. Check for mistakes.
}

<lfx-vote-results-drawer [(visible)]="resultsDrawerVisible" [voteId]="selectedVoteId()" [listVote]="selectedVote()"> </lfx-vote-results-drawer>
Expand Down
4 changes: 2 additions & 2 deletions ...fx-one/src/app/modules/committees/components/committee-votes/committee-votes.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { ChangeDetectionStrategy, Component, inject, input, model, signal, Signal } from '@angular/core';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { ButtonComponent } from '@components/button/button.component';
import { CardComponent } from '@components/card/card.component';
import { EmptyStateComponent } from '@components/empty-state/empty-state.component';
import { Committee, Vote } from '@lfx-one/shared/interfaces';
import { VotesTableComponent } from '@app/modules/votes/components/votes-table/votes-table.component';
import { VoteResultsDrawerComponent } from '@app/modules/votes/components/vote-results-drawer/vote-results-drawer.component';
Expand All @@ -14,7 +14,7 @@ import { catchError, filter, finalize, of, switchMap } from 'rxjs';

@Component({
selector: 'lfx-committee-votes',
imports: [ButtonComponent, CardComponent, VotesTableComponent, VoteResultsDrawerComponent],
imports: [ButtonComponent, EmptyStateComponent, VotesTableComponent, VoteResultsDrawerComponent],
templateUrl: './committee-votes.component.html',
styleUrl: './committee-votes.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
Expand Down
112 changes: 54 additions & 58 deletions ...modules/mailing-lists/components/mailing-list-members/mailing-list-members.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,65 @@
<!-- SPDX-License-Identifier: MIT -->

<lfx-card data-testid="mailing-list-members-card">
<div class="flex items-center justify-between mb-4 gap-4">
<!-- Search and Filter Controls -->
<div class="flex flex-col md:flex-row md:flex-wrap gap-4 flex-1" data-testid="mailing-list-members-filters">
<!-- Search Input -->
<div class="flex-1">
<lfx-input-text
[form]="filterForm"
control="search"
placeholder="Search members..."
icon="fa-light fa-search"
styleClass="w-full"
size="small"
data-testid="mailing-list-members-search">
</lfx-input-text>
</div>
<div class="flex flex-col md:flex-row md:items-center gap-3 md:gap-4 mb-4" data-testid="mailing-list-members-filters">
<!-- Search Input -->
<div class="flex-1 min-w-0">
<lfx-input-text
[form]="filterForm"
control="search"
placeholder="Search members..."
icon="fa-light fa-search"
styleClass="w-full"
size="small"
data-testid="mailing-list-members-search">
</lfx-input-text>
</div>

<!-- Delivery Mode Filter -->
<div class="w-full flex-1 sm:flex-none md:w-48">
<lfx-select
[form]="filterForm"
control="deliveryMode"
size="small"
[options]="deliveryModeFilterOptions()"
placeholder="Filter by Delivery Mode"
[showClear]="true"
styleClass="w-full"
data-testid="mailing-list-members-delivery-mode-filter">
</lfx-select>
</div>
<!-- Delivery Mode Filter -->
<div class="w-full sm:w-auto sm:shrink-0">
<lfx-select
[form]="filterForm"
control="deliveryMode"
size="small"
[options]="deliveryModeFilterOptions()"
placeholder="Filter by Delivery Mode"
[showClear]="true"
styleClass="w-full"
data-testid="mailing-list-members-delivery-mode-filter">
</lfx-select>
</div>

<!-- Role Filter -->
<div class="w-full flex-1 sm:flex-none md:w-48">
<lfx-select
[form]="filterForm"
control="role"
size="small"
[options]="roleFilterOptions()"
placeholder="Filter by Role"
[showClear]="true"
styleClass="w-full"
data-testid="mailing-list-members-role-filter">
</lfx-select>
</div>
<!-- Role Filter -->
<div class="w-full sm:w-auto sm:shrink-0">
<lfx-select
[form]="filterForm"
control="role"
size="small"
[options]="roleFilterOptions()"
placeholder="Filter by Role"
[showClear]="true"
styleClass="w-full"
data-testid="mailing-list-members-role-filter">
</lfx-select>
</div>
<lfx-button
icon="fa-light fa-user-plus"
[label]="'Add ' + memberLabel.singular"
size="small"
severity="secondary"
[outlined]="true"
(onClick)="openAddMemberModal()"
data-testid="mailing-list-add-member-button">
</lfx-button>
</div>

@if (loading()) {
<div class="flex justify-center items-center py-8">
<i class="fa-light fa-spinner-third fa-spin text-2xl text-blue-600"></i>
<!-- Add Member Button -->
<div class="sm:shrink-0">
<lfx-button
icon="fa-light fa-user-plus"
[label]="'Add ' + memberLabel.singular"
size="small"
severity="secondary"
[outlined]="true"
(onClick)="openAddMemberModal()"
data-testid="mailing-list-add-member-button">
</lfx-button>
</div>
} @else {
<lfx-table
</div>

<lfx-table
[value]="filteredMembers()"
[loading]="loading()"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[10, 25, 50]"
Expand Down Expand Up @@ -150,13 +147,12 @@
<ng-template #emptymessage>
<tr>
<td colspan="7" class="text-center py-8">
<i class="fa-light fa-eyes text-3xl text-gray-400 mb-2"></i>
<i class="fa-light fa-users text-3xl text-gray-400 mb-2"></i>
<p class="text-sm text-gray-500">No {{ memberLabel.plural | lowercase }} found</p>
</td>
</tr>
</ng-template>
</lfx-table>
}
</lfx-card>

<p-confirmDialog></p-confirmDialog>
Loading
Loading