style: update piazza config form according to hifi design

[awais-ansari]

description

• Update piazza configuration form with paragon new form elements
• Use new floating form control element as input field
• Display incomplete error message on step 2 when validation fails

Before

After new hifi design

Figma design

[asadazam93]

@awais-ansari The text-color of the floating label is gray-500 on figma. I think the color is different here?
Also can you please add a screenshot of the figma design so that we can compare it?

[asadazam93]

@awais-ansari The figma design has no icon with the error message, I think you need to remove the icon with error message

[awais-ansari]

@awais-ansari The figma design has no icon with the error message, I think you need to remove the icon with error message

Form feedback component have hasIcon attribute for disable icon but it's not working. Current paragon version has different colour and style as compare to figma.

[asadazam93]

@awais-ansari The error message text-color does not seem to be red. Can we make it red?

[awais-ansari]

@awais-ansari The error message text-color does not seem to be red. Can we make it red?

I used text-brand-500 which is red shade as used in figma. Colours are little bit different for current paragon version. I checked netlify paragon version 14.7 have some colour as figma.

[asadazam93]

@awais-ansari The error message text-color does not seem to be red. Can we make it red?

I used text-brand-500 which is red shade as used in figma. Colours are little bit different for current paragon version. I checked netlify paragon version 14.7 have some colour as figma.

What is the default color of the error message?

[davidjoy]

I'd also like to question these error message replacements - if we want to use language about entering it instead of it being required, sure, but these feel like sentence fragments instead of a user-friendly message. That feels like a step backward in UX to me.

[awaisdar001]

Looks good, but just a question if you are planning to tackle feat:Settings Incomplete as well?

[awaisdar001]

This looks good to me for the most part.
I am confused upon the declaration & implementation of handleConfigError function. I am not sure if we can leave dependencies empty. Let me dig in a little.

[davidjoy]

I originally said this in Slack, but copying it here:

Just to back up for a second, you may want to consider just adding a redux action to set the validation error in the redux store, and then pull that value out in DiscussionsSettings so you can change the step’s text. It would avoid the tight coupling of passing around all these extra handlers. The form would publish the action, the top-level component would consume the state change to show it’s “Incomplete” message.

[davidjoy]

Would be good to add a test for updateValidationStatus, but I'm preemptively "Approving" assuming that gets in, as the rest looks good.