adjust resource name form spacing and help icon #3234
+69
−86
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
It was observed while reviewing the new create connection modal that the k8s name / description component didn't fit exactly the UX for connection types.
Two differences observed:
Form
and PFFormSection
provide specific spacing between elements of the form. This component was using a stack layout with a different gap.The change here replaces the stack layout with a
FormSection
. Since there is no title to this section, the margin is eliminated to allow for these form elements to fit into existing forms.The 2nd change is to use a popover and
OutlinedQuestionCircleIcon
icon. There's a lot of inconsistencies in our product today for using tooltips vs popovers andHelpIcon
vsOutlinedQuestionCircleIcon
in many of our forms. While both methods could be considered correct, it looks inconsistent within the connection form. TheK8sNameDescriptionField
component currently is not used in a form which has another?
icon therefore this change does not produce further inconsistency within a single form.Before:
Gap is 16px:
After:
Gap is 24px as prescribed by PF forms:
How Has This Been Tested?
From the project list view page, click to create a new project to open the modal.
Test Impact
N/A, visual change only
Request review criteria:
Self checklist (all need to be checked):
If you have UI changes:
After the PR is posted & before it merges:
main
cc @andrewballantyne @simrandhaliw