bcgov / bcgov/lcfs

LCFS - Update internal and public comment experience

Open
#4,957 0 comments 0 reactions 0 assignees Claimed by @hamed-valiollahi View on GitHub
Fuel Codes Further Investigation Medium Spike
Dominant language
Python
Stars
6
Forks
6
Avg merge
2d 7h
Merged PRs (30d)
87

Description

**Description:**
Update the commenting feature on the IDIR side of the LCFS Portal to align with the approved design for internal and public comments.

The updated design will introduce colour-coded comment cards, visibility icons, and enhanced comment-entry controls so IDIR users can more easily distinguish between comments visible only to government users and comments visible to external applicants.

Public comments will use green styling with a globe icon and "Public" label. Internal comments will use blue styling with a lock icon and "Internal" label.

The comment entry section will be updated to replace the existing radio button selection with the new "Internal only" and "Public" toggle design and display contextual messaging describing who can view the selected comment type.

**Wireframe:** [Commenting enhancements](https://www.figma.com/proto/ttkK3jvn6uzzy37vqRhiXW/4957---Internal-and-Public-Comment-Experience-in-CI-application?node-id=57-86&t=BLoMfNw3ZdeDW5Wr-0&scaling=min-zoom&content-scaling=fixed&page-id=36%3A356)

**Purpose and benefit to user:**
As an IDIR user, I want public and internal comments to be clearly distinguished and explained so that I can confidently communicate with applicants while reducing the risk of posting information to the wrong audience.

**Acceptance Criteria:**

- [ ] Given I am an IDIR user viewing comments, When public comments are displayed, then the comments use the approved green styling, globe icon, and "Public" badge shown in the design.
- [ ] Given I am an IDIR user viewing comments, When internal comments are displayed, then the comments use the approved blue styling, lock icon, and "Internal" badge shown in the design.
- [ ] Given I am an IDIR user viewing comment history, When comments are displayed, then the author initials, timestamp, comment text, attachments, and Edit link continue to be displayed.
- [ ] Given I am an IDIR user creating a new comment, When the comment entry section is displayed, then I can select either "Internal only" or "Public" using the new toggle control.
- [ ] Given I select "Public", When the Public option is active, then the comment area displays messaging indicating the comment is visible to external parties and uses the approved public styling.
- [ ] Given I select "Internal only", When the Internal only option is active, then the comment area displays messaging indicating the comment is restricted to internal government users and uses the approved internal styling.
- [ ] Given I switch between comment types, When the selected option changes, then the iconography, colour treatment, and descriptive messaging update to match the selected visibility type.
- [ ] Given I am an IDIR user entering a comment, When formatting or attachment functionality is used, then existing editor functionality remains available.
- [ ] Given I am an IDIR user creating a new comment, When I select "Public", then the submit button displays "Add public comment" with the approved public icon and green styling.
- [ ] Given I am an IDIR user creating a new comment, When I select "Internal only", then the submit button displays "Add internal comment" with the approved internal icon and blue styling.
- [ ] Given I switch between comment types, When the selected visibility changes, then the comment placeholder text, visibility message, and submit button label update to match the selected comment type.

**Development Checklist:**
- [ ] Implement approved public comment styling including green border, globe icon, and Public badge.
- [ ] Implement approved internal comment styling including blue border, lock icon, and Internal badge.
- [ ] Replace the existing Internal/Public radio button controls with the new toggle design.
- [ ] Add contextual visibility messaging based on selected comment type.
- [ ] Preserve existing comment editing, attachment, and formatting functionality.
- [ ] Ensure colour is not the sole indicator of comment visibility status.
- [ ] Validate compliance with WCAG 2.2 accessibility requirements.
- [ ] Test keyboard navigation and selection behaviour.
- [ ] Test across supported browsers and devices to confirm consistent behaviour.
- [ ] Implement dynamic submit button labels that change between "Add public comment" and "Add internal comment" based on the selected comment type.
- [ ] Implement matching button icons and colour treatments for public and internal comment submission.
- [ ] Update comment editor placeholder text to reflect the selected comment visibility.

**Notes:**

- This change applies to the **IDIR user experience only**.
- Existing comment functionality remains unchanged; this work is a user interface and usability enhancement.
- Current state is displayed in the first screenshot provided by the user.
- Target state is displayed in the Figma design screenshot provided by the user.
- Internal comments are intended for government/internal users only.
- Public comments are intended to be visible to external applicants and internal users.

Contributor guide

Open the contributing guide

Research direction

No files or tests are named; start by locating the existing IDIR comment history and comment-entry UI, then compare it with the linked Figma design. Verify the public and internal states, accessibility behavior, preserved editor features, and dynamic labels, icons, styling, placeholders, and visibility messaging against the acceptance criteria.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.