FWF-5339[feature] - v8-global-alert #844

Ajay-aot · 2025-09-30T12:07:23Z

User description

Issue Tracking

JIRA: https://aottech.atlassian.net/browse/FWF-5339
Issue Type: BUG/ FEATURE

Changes

Global alert component added

#Recording
https://jam.dev/c/fc65e251-904f-467b-9dc3-d7f56e775ae3

PR Type

Enhancement

Description

Add reusable Alert React component
Introduce SCSS styling for alert variants
Export Alert via components index
Hook alert styles into global theme

Diagram Walkthrough

flowchart LR
  A["New Alert.tsx component"] -- "exported via" --> B["components/index.ts"]
  A -- "styled by" --> C["_alert.scss (variants, layout)"]
  C -- "included in" --> D["theme index.scss imports"]

File Walkthrough

Relevant files

Enhancement

Alert.tsx `New reusable React Alert component` forms-flow-components/src/components/CustomComponents/Alert.tsx Add new `Alert` functional component with props. Supports variants: passive, focus, error, warning. Conditional render via `isShowing`. Right-side custom content, a11y, data-test-ids.	+54/-0
index.ts `Export Alert from components index` forms-flow-components/src/components/index.ts Export new `Alert` component from index.	+3/-1
_alert.scss `Add SCSS styles for alert component` forms-flow-theme/scss/v8-scss/_alert.scss Add SCSS for `.custom-alert` layout and variants. Define variables, sizing, and typography mixin usage. Implement left/right sections and border color variants.	+61/-0

Configuration changes

index.scss `Include alert styles in theme index` forms-flow-theme/scss/index.scss Import new `v8-scss/alert` stylesheet.	+1/-0

github-actions · 2025-09-30T12:08:17Z

PR Reviewer Guide 🔍

(Review updated until commit `c8744f0`)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Lint/Formatting The new export line for `Alert` is missing a semicolon, which may fail linting or formatting checks and cause inconsistent diffs. export * from "./CustomComponents/FileUploadArea"; export * from "./CustomComponents/Alert" Accessibility Using aria-live="assertive" for all alerts can be disruptive; consider "polite" for non-critical variants or making it configurable based on `variant`. role="alert" aria-live="assertive" aria-atomic="true" data-testid={dataTestId} Naming Consistency The variables `$alert-error` and `$alert-warning` map to orange and red tokens respectively; verify the semantic mapping aligns with your design system to avoid confusion. $alert-passive: var(--gray-medium-dark); $alert-focus: var(--primary-dark); $alert-error: var(--orange-100); $alert-warning: var(--red-100);

github-actions · 2025-09-30T12:08:35Z

PR Code Suggestions ✨

Latest suggestions up to c8744f0
Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Adjust live region aggressiveness The `aria-live="assertive"` can be too aggressive and interrupt screen readers, especially for non-error alerts. Use `polite` for non-critical variants and reserve `assertive` for `error`/`warning` to improve accessibility. Compute `aria-live` based on `variant`. forms-flow-components/src/components/CustomComponents/Alert.tsx [23-32] <div - // Main alert container className={`custom-alert custom-alert-${variant} ${ isShowing ? "entering" : "leaving" }`} role="alert" - aria-live="assertive" + aria-live={variant === "error" \|\| variant === "warning" ? "assertive" : "polite"} aria-atomic="true" data-testid={dataTestId} > Suggestion importance[1-10]: 7 __ Why: Computing `aria-live` based on `variant` improves accessibility and matches the component's API, and the improved_code correctly reflects the change on the exact lines. Impact is moderate but meaningful, not critical.	Medium
General	Prevent alert content clipping Using a fixed `max-height` without overflow control can clip multi-line messages or dynamic right content. Enable `min-height` and allow content to wrap with `overflow:` `visible` and `align-items: flex-start` to prevent content from being cut off. forms-flow-theme/scss/v8-scss/_alert.scss [19-29] .custom-alert { width: 100%; - max-height: $alert-height; + min-height: $alert-height; padding: 1.063rem 1.375rem; display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; background-color: $alert-bg; border: 0.063rem solid $alert-passive; border-radius: 0.313rem; + overflow: visible; + gap: 0.75rem; +} Suggestion importance[1-10]: 6 __ Why: Replacing fixed `max-height` with `min-height` and adjusting layout avoids clipping for multi-line content; the change is accurate and improves robustness, though not a critical bug fix.	Low
General	Guard against empty alert text Rendering `message` directly risks layout/ARIA issues if it contains empty strings or non-string values. Normalize to a string and avoid rendering empty content to prevent an empty `role="alert"` node from firing. Guard and coerce the content before rendering. forms-flow-components/src/components/CustomComponents/Alert.tsx [39-40] -<span className="custom-alert-text">{message}</span> +{typeof message === "string" && message.trim().length > 0 ? ( + <span className="custom-alert-text">{message}</span> +) : null} Suggestion importance[1-10]: 5 __ Why: Guarding against empty text can prevent unnecessary alert announcements and minor layout issues; mapping aligns with the snippet. Impact is limited since `message` prop is typed as `string` and likely controlled.	Low

Previous suggestions

Suggestions up to commit b877448

Category	Suggestion	Impact
Possible issue	Prevent alert text clipping Setting max-height without overflow can clip content when messages wrap, making text unreadable. Allow wrapping and visible overflow or remove the height cap to prevent content from being hidden. forms-flow-theme/scss/v8-scss/_alert.scss [19-43] .custom-alert { width: 100%; - max-height: $alert-height; + /* Remove height cap to allow content / padding: 1.063rem 1.375rem; display: flex; justify-content: space-between; align-items: center; background-color: $alert-bg; border: 0.063rem solid $alert-passive; border-radius: 0.313rem; -... + &-text { @include font-style($font-size-15, $font-weight-medium, $alert-text-color); + / Ensure long text wraps */ + word-wrap: break-word; + overflow-wrap: anywhere; + white-space: normal; } +} Suggestion importance[1-10]: 8 __ Why: The component sets a max-height which can clip wrapped messages; removing the cap and ensuring text wraps prevents content loss, addressing a functional UI issue with clear, correct adjustments.	Medium
General	Remove redundant aria-label Avoid using aria-label on containers that already contain readable text; screen readers will announce both, causing verbosity. Let the text be announced naturally by removing the redundant aria-label. forms-flow-components/src/components/CustomComponents/Alert.tsx [34-40] <div className="custom-alert-left" data-testid={`${dataTestId}-left`} - aria-label="alert-message" > <span className="custom-alert-text">{message}</span> </div> Suggestion importance[1-10]: 7 __ Why: Removing an unnecessary aria-label on a container with visible text improves accessibility by avoiding duplicate announcements; change is accurate and low risk.	Medium
General	Remove unused state classes Remove the dynamic "entering/leaving" class since the component returns null when not showing and there is no corresponding CSS for these states. Keeping unused classes can confuse styling and accessibility. Simplify the className to only include the variant. forms-flow-components/src/components/CustomComponents/Alert.tsx [23-32] <div - // Main alert container - className={`custom-alert custom-alert-${variant} ${ - isShowing ? "entering" : "leaving" - }`} + className={`custom-alert custom-alert-${variant}`} role="alert" aria-live="assertive" aria-atomic="true" data-testid={dataTestId} > Suggestion importance[1-10]: 6 __ Why: The "entering/leaving" classes are unused in the SCSS and the component returns null when not showing, so simplifying the className reduces confusion; impact is moderate and the improved_code matches the intended change.	Low

…s-flow-ai-micro-front-ends into FWF-5339/v8-globel-alert

sonarqubecloud · 2025-09-30T12:13:01Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

github-actions · 2025-09-30T12:13:06Z

Persistent review updated to latest commit c8744f0

arun-s-aot · 2025-09-30T12:33:45Z

forms-flow-components/src/components/CustomComponents/Alert.tsx

+
+interface AlertProps {
+  message: string;
+  variant?: "passive" | "focus" | "error" | "warning";


@Ajay-aot

Can we add the variants to enum with key in Uppercase and value in lowercase itself. Ex : PASSIVE = passive

add it to a enum and export it from this file

This helps to import the types as well in the Alert used files , avoid mistakes with spelling and casing.

Ajay-aot added 3 commits September 29, 2025 19:23

FWF-5339[feature] - v8-globel-alert

59fd98a

data test ids and aria label added

fc32b17

px to rem

b877448

Ajay-aot requested review from a team as code owners September 30, 2025 12:07

github-actions bot added the Review effort 2/5 label Sep 30, 2025

Merge branch 'v8-develop' of https://github.com/AOT-Technologies/form…

c8744f0

…s-flow-ai-micro-front-ends into FWF-5339/v8-globel-alert

arun-s-aot reviewed Sep 30, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

FWF-5339[feature] - v8-global-alert #844

FWF-5339[feature] - v8-global-alert #844

Ajay-aot commented Sep 30, 2025 •

edited by github-actions bot

Loading

Uh oh!

github-actions bot commented Sep 30, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 30, 2025 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Sep 30, 2025

Uh oh!

github-actions bot commented Sep 30, 2025

Uh oh!

arun-s-aot Sep 30, 2025 •

edited

Loading

Uh oh!

Uh oh!

FWF-5339[feature] - v8-global-alert #844

Are you sure you want to change the base?

FWF-5339[feature] - v8-global-alert #844

Conversation

Ajay-aot commented Sep 30, 2025 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Issue Tracking

Changes

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

github-actions bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Reviewer Guide 🔍

(Review updated until commit c8744f0)

Uh oh!

github-actions bot commented Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Code Suggestions ✨

Previous suggestions

Uh oh!

sonarqubecloud bot commented Sep 30, 2025

Quality Gate passed

Uh oh!

github-actions bot commented Sep 30, 2025

Uh oh!

arun-s-aot Sep 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Ajay-aot commented Sep 30, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Sep 30, 2025 •

edited

Loading

(Review updated until commit `c8744f0`)

github-actions bot commented Sep 30, 2025 •

edited

Loading

arun-s-aot Sep 30, 2025 •

edited

Loading