Skip to content

feature/fwf-6183:Added error screens styles#1146

Open
fahad-aot wants to merge 1 commit intoAOT-Technologies:developfrom
fahad-aot:feature/fwf-6183-error-screen-styles
Open

feature/fwf-6183:Added error screens styles#1146
fahad-aot wants to merge 1 commit intoAOT-Technologies:developfrom
fahad-aot:feature/fwf-6183-error-screen-styles

Conversation

@fahad-aot
Copy link
Contributor

@fahad-aot fahad-aot commented Mar 19, 2026 •
edited by github-actions bot
Loading

User description

📝 Pull Request Summary

Description:
styles added for the error screens

Related Jira Ticket:
https://aottech.atlassian.net/browse/FWF-6183

Type of Change:

  • ✨ Feature
  • 🐞 Bug Fix
  • ♻️ Refactor
  • 🧹 Code Cleanup
  • 🧪 Test Addition / Update
  • 📦 Dependency Update
  • 📘 Documentation Update
  • 🚀 Deployment / Config / Security Updates

🧩 Microfrontends Affected

Please select all microfrontends or modules that are part of this change:

  • forms-flow-admin
  • forms-flow-components
  • forms-flow-integration
  • forms-flow-nav
  • forms-flow-review
  • forms-flow-service
  • forms-flow-submissions
  • forms-flow-theme
  • scripts
  • Others (please specify below)

Details (if Others selected):

🧠 Summary of Changes

🧪 Testing Details

Testing Performed:

Screenshots (if applicable):

✅ Checklist

  • Code builds successfully without lint or type errors
  • Unit tests added or updated
  • Integration or end-to-end tests validated
  • UI verified
  • Documentation updated (README / Confluence / UI Docs)
  • No sensitive information (keys, passwords, secrets) committed
  • I have updated the CHANGELOG with relevant details
  • I have given a clear and meaningful PR title and description
  • I have verified cross-repo dependencies (if any)
  • I have confirmed backward compatibility with previous releases
  • Verified changes across all selected microfrontends

👥 Reviewer Notes

PR Type

Enhancement

Description

  • Add AI builder error-state icons

  • Style URL error message layouts

  • Style API error message text

  • Add shared typography color tokens

Diagram Walkthrough

flowchart LR
  icons["New error-state SVG icons"]
  theme["AI form builder SCSS updates"]
  errorUI["Styled URL and API error screens"]

  icons -- "supports" --> errorUI
  theme -- "defines layout and typography" --> errorUI
Loading

File Walkthrough
Relevant files
Enhancement
index.tsx
Add reusable icons for error screens                                         

forms-flow-components/src/components/SvgIcons/index.tsx

  • Reformat SmallSearchIcon into multiline JSX
  • Add new AccessRestrictedIcon SVG component
  • Add new CautionIcon SVG component
  • Provide reusable icons for error states
 +60/-4   
_aiFormBuilder.scss
Add AI builder error screen styling                                           

forms-flow-theme/scss/v8-scss/_aiFormBuilder.scss

  • Add $font-weight-medium theme variable
  • Add $gray-darkest-90 text color token
  • Style __guide-panel-url-error container layout
  • Add URL and API error text styles
 +42/-5   

@fahad-aot fahad-aot requested review from a team as code owners March 19, 2026 09:27
@sonarqubecloud
Copy link

sonarqubecloud bot commented Mar 19, 2026

Quality Gate Passed Quality Gate passed

Issues
4 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
Copy link

github-actions bot commented Mar 19, 2026

PR Reviewer Guide 🔍

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

JSX SVG props

The new SVG components use dashed attribute names such as stroke-width, clip-path, and fill-opacity. In React/TSX these should usually be camelCased, otherwise the attributes may be ignored, trigger warnings, or fail type-checking depending on the setup.

 
    <circle
      cx="3.92045"
      cy="3.92045"
      r="3.59375"
      fill="#525254"
      stroke="#525254"
      stroke-width="0.653409"
    />
  </svg>
);

export const CautionIcon = ({ color, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    fill="none"
  >
    <g clip-path="url(#clip0_19032_2318)">
      <path
        d="M16 30C12.287 30 8.72601 28.525 6.1005 25.8995C3.475 23.274 2 19.713 2 16C2 12.287 3.475 8.72601 6.1005 6.1005C8.72601 3.475 12.287 2 16 2C19.713 2 23.274 3.475 25.8995 6.1005C28.525 8.72601 30 12.287 30 16C30 19.713 28.525 23.274 25.8995 25.8995C23.274 28.525 19.713 30 16 30ZM16 32C20.2435 32 24.3131 30.3143 27.3137 27.3137C30.3143 24.3131 32 20.2435 32 16C32 11.7565 30.3143 7.68687 27.3137 4.68629C24.3131 1.68571 20.2435 0 16 0C11.7565 0 7.68687 1.68571 4.68629 4.68629C1.68571 7.68687 0 11.7565 0 16C0 20.2435 1.68571 24.3131 4.68629 27.3137C7.68687 30.3143 11.7565 32 16 32Z"
        fill="#FF9100"
        fill-opacity="0.5"
      />
      <path
        d="M14.0039 22.0002C14.0039 21.7376 14.0556 21.4775 14.1561 21.2349C14.2567 20.9922 14.404 20.7717 14.5897 20.586C14.7754 20.4003 14.9959 20.253 15.2385 20.1525C15.4812 20.052 15.7413 20.0002 16.0039 20.0002C16.2666 20.0002 16.5266 20.052 16.7693 20.1525C17.0119 20.253 17.2324 20.4003 17.4181 20.586C17.6038 20.7717 17.7512 20.9922 17.8517 21.2349C17.9522 21.4775 18.0039 21.7376 18.0039 22.0002C18.0039 22.5307 17.7932 23.0394 17.4181 23.4144C17.043 23.7895 16.5343 24.0002 16.0039 24.0002C15.4735 24.0002 14.9648 23.7895 14.5897 23.4144C14.2146 23.0394 14.0039 22.5307 14.0039 22.0002ZM14.1999 9.99023C14.1733 9.73792 14.2 9.48282 14.2783 9.24149C14.3566 9.00016 14.4848 8.778 14.6545 8.58941C14.8243 8.40082 15.0318 8.25002 15.2635 8.1468C15.4953 8.04358 15.7462 7.99023 15.9999 7.99023C16.2536 7.99023 16.5045 8.04358 16.7363 8.1468C16.9681 8.25002 17.1755 8.40082 17.3453 8.58941C17.515 8.778 17.6432 9.00016 17.7215 9.24149C17.7998 9.48282 17.8265 9.73792 17.7999 9.99023L17.0999 17.0042C17.0764 17.2798 16.9503 17.5365 16.7466 17.7235C16.5429 17.9106 16.2765 18.0143 15.9999 18.0143C15.7234 18.0143 15.4569 17.9106 15.2532 17.7235C15.0495 17.5365 14.9234 17.2798 14.8999 17.0042L14.1999 9.99023Z"
        fill="#FF9100"
        fill-opacity="0.5"
      />
    </g>
    <defs>
      <clipPath id="clip0_19032_2318">
        <rect width="32" height="32" fill="white" />
Unused icon props

The newly added icon components accept color and ...props, but the rendered <svg> elements do not forward those props or use the color value. This can prevent consumers from applying className, accessibility attributes, handlers, sizing overrides, or theme-driven coloring.

 
export const AccessRestrictedIcon = ({ color, ...props }) => (
  <svg
    width="8"
    height="8"
    viewBox="0 0 8 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle
      cx="3.92045"
      cy="3.92045"
      r="3.59375"
      fill="#525254"
      stroke="#525254"
      stroke-width="0.653409"
    />
  </svg>
);

export const CautionIcon = ({ color, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="32"
    height="32"
    viewBox="0 0 32 32"
    fill="none"
  >
    <g clip-path="url(#clip0_19032_2318)">
      <path
        d="M16 30C12.287 30 8.72601 28.525 6.1005 25.8995C3.475 23.274 2 19.713 2 16C2 12.287 3.475 8.72601 6.1005 6.1005C8.72601 3.475 12.287 2 16 2C19.713 2 23.274 3.475 25.8995 6.1005C28.525 8.72601 30 12.287 30 16C30 19.713 28.525 23.274 25.8995 25.8995C23.274 28.525 19.713 30 16 30ZM16 32C20.2435 32 24.3131 30.3143 27.3137 27.3137C30.3143 24.3131 32 20.2435 32 16C32 11.7565 30.3143 7.68687 27.3137 4.68629C24.3131 1.68571 20.2435 0 16 0C11.7565 0 7.68687 1.68571 4.68629 4.68629C1.68571 7.68687 0 11.7565 0 16C0 20.2435 1.68571 24.3131 4.68629 27.3137C7.68687 30.3143 11.7565 32 16 32Z"
        fill="#FF9100"
        fill-opacity="0.5"
      />
      <path
        d="M14.0039 22.0002C14.0039 21.7376 14.0556 21.4775 14.1561 21.2349C14.2567 20.9922 14.404 20.7717 14.5897 20.586C14.7754 20.4003 14.9959 20.253 15.2385 20.1525C15.4812 20.052 15.7413 20.0002 16.0039 20.0002C16.2666 20.0002 16.5266 20.052 16.7693 20.1525C17.0119 20.253 17.2324 20.4003 17.4181 20.586C17.6038 20.7717 17.7512 20.9922 17.8517 21.2349C17.9522 21.4775 18.0039 21.7376 18.0039 22.0002C18.0039 22.5307 17.7932 23.0394 17.4181 23.4144C17.043 23.7895 16.5343 24.0002 16.0039 24.0002C15.4735 24.0002 14.9648 23.7895 14.5897 23.4144C14.2146 23.0394 14.0039 22.5307 14.0039 22.0002ZM14.1999 9.99023C14.1733 9.73792 14.2 9.48282 14.2783 9.24149C14.3566 9.00016 14.4848 8.778 14.6545 8.58941C14.8243 8.40082 15.0318 8.25002 15.2635 8.1468C15.4953 8.04358 15.7462 7.99023 15.9999 7.99023C16.2536 7.99023 16.5045 8.04358 16.7363 8.1468C16.9681 8.25002 17.1755 8.40082 17.3453 8.58941C17.515 8.778 17.6432 9.00016 17.7215 9.24149C17.7998 9.48282 17.8265 9.73792 17.7999 9.99023L17.0999 17.0042C17.0764 17.2798 16.9503 17.5365 16.7466 17.7235C16.5429 17.9106 16.2765 18.0143 15.9999 18.0143C15.7234 18.0143 15.4569 17.9106 15.2532 17.7235C15.0495 17.5365 14.9234 17.2798 14.8999 17.0042L14.1999 9.99023Z"
        fill="#FF9100"
        fill-opacity="0.5"
      />
    </g>
    <defs>
      <clipPath id="clip0_19032_2318">
        <rect width="32" height="32" fill="white" />
      </clipPath>
    </defs>
  </svg>
Hardcoded color

The new error text styles introduce a hardcoded RGBA color instead of using an existing theme token. This is worth validating against alternate themes and future design-token changes, since these messages may not stay visually consistent outside the default palette.

 
$font-weight-medium: var(--font-weight-medium);
$gray-darkest: var(--gray-darkest);
$gray-darkest-90: rgba(74, 74, 74, 0.9);
$border-radius: var(--border-radius);

@github-actions
Copy link

github-actions bot commented Mar 19, 2026

PR Code Suggestions ✨

Explore these optional code suggestions:

CategorySuggestion                                                                                                                                    Impact
Possible issue
Normalize JSX SVG attributes

Convert the SVG attributes to React's camelCase equivalents. clip-path and
fill-opacity are invalid JSX prop names, so the clipping and transparency can fail
when this icon renders.

forms-flow-components/src/components/SvgIcons/index.tsx [1835-1846]

-<g clip-path="url(#clip0_19032_2318)">
+<g clipPath="url(#clip0_19032_2318)">
   <path
     d="M16 30C12.287 30 8.72601 28.525 6.1005 25.8995C3.475 23.274 2 19.713 2 16C2 12.287 3.475 8.72601 6.1005 6.1005C8.72601 3.475 12.287 2 16 2C19.713 2 23.274 3.475 25.8995 6.1005C28.525 8.72601 30 12.287 30 16C30 19.713 28.525 23.274 25.8995 25.8995C23.274 28.525 19.713 30 16 30ZM16 32C20.2435 32 24.3131 30.3143 27.3137 27.3137C30.3143 24.3131 32 20.2435 32 16C32 11.7565 30.3143 7.68687 27.3137 4.68629C24.3131 1.68571 20.2435 0 16 0C11.7565 0 7.68687 1.68571 4.68629 4.68629C1.68571 7.68687 0 11.7565 0 16C0 20.2435 1.68571 24.3131 4.68629 27.3137C7.68687 30.3143 11.7565 32 16 32Z"
     fill="#FF9100"
-    fill-opacity="0.5"
+    fillOpacity="0.5"
   />
   <path
     d="M14.0039 22.0002C14.0039 21.7376 14.0556 21.4775 14.1561 21.2349C14.2567 20.9922 14.404 20.7717 14.5897 20.586C14.7754 20.4003 14.9959 20.253 15.2385 20.1525C15.4812 20.052 15.7413 20.0002 16.0039 20.0002C16.2666 20.0002 16.5266 20.052 16.7693 20.1525C17.0119 20.253 17.2324 20.4003 17.4181 20.586C17.6038 20.7717 17.7512 20.9922 17.8517 21.2349C17.9522 21.4775 18.0039 21.7376 18.0039 22.0002C18.0039 22.5307 17.7932 23.0394 17.4181 23.4144C17.043 23.7895 16.5343 24.0002 16.0039 24.0002C15.4735 24.0002 14.9648 23.7895 14.5897 23.4144C14.2146 23.0394 14.0039 22.5307 14.0039 22.0002ZM14.1999 9.99023C14.1733 9.73792 14.2 9.48282 14.2783 9.24149C14.3566 9.00016 14.4848 8.778 14.6545 8.58941C14.8243 8.40082 15.0318 8.25002 15.2635 8.1468C15.4953 8.04358 15.7462 7.99023 15.9999 7.99023C16.2536 7.99023 16.5045 8.04358 16.7363 8.1468C16.9681 8.25002 17.1755 8.40082 17.3453 8.58941C17.515 8.778 17.6432 9.00016 17.7215 9.24149C17.7998 9.48282 17.8265 9.73792 17.7999 9.99023L17.0999 17.0042C17.0764 17.2798 16.9503 17.5365 16.7466 17.7235C16.5429 17.9106 16.2765 18.0143 15.9999 18.0143C15.7234 18.0143 15.4569 17.9106 15.2532 17.7235C15.0495 17.5365 14.9234 17.2798 14.8999 17.0042L14.1999 9.99023Z"
     fill="#FF9100"
-    fill-opacity="0.5"
+    fillOpacity="0.5"
   />
 </g>
Suggestion importance[1-10]: 7

__

Why: This correctly identifies multiple JSX-incompatible SVG attributes in CautionIcon, including clip-path and fill-opacity, and the improved_code matches the intended fix. It can prevent invalid DOM property warnings and potential issues with clipping/transparency, so it has moderate impact.

Medium
Fix invalid SVG prop

Replace the kebab-case SVG prop with the JSX-safe camelCase form. Using stroke-width
in React can be ignored or trigger invalid DOM property warnings, which would leave
the icon stroke rendering incorrectly.

forms-flow-components/src/components/SvgIcons/index.tsx [1816-1823]

 <circle
   cx="3.92045"
   cy="3.92045"
   r="3.59375"
   fill="#525254"
   stroke="#525254"
-  stroke-width="0.653409"
+  strokeWidth="0.653409"
 />
Suggestion importance[1-10]: 6

__

Why: The suggestion is accurate: stroke-width should be strokeWidth in React JSX for the AccessRestrictedIcon SVG. This is a real rendering/console-warning issue, but it is limited in scope to a single icon prop.

Low

@Bonymol-aot
Copy link
Contributor

Bonymol-aot commented Mar 19, 2026 •
edited
Loading

Please resolve the issues from sonar cloud in new icons @fahad-aot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

Review effort 2/5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@fahad-aot @Bonymol-aot