Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adjust resource name form spacing and help icon #3234

Merged
merged 1 commit into from
Sep 23, 2024

Conversation

christianvogt
Copy link
Contributor

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:

  • The spacing between form elements is 16px as oppose to 24px. PF Form and PF FormSection provide specific spacing between elements of the form. This component was using a stack layout with a different gap.
  • The help icon and tooltip vs popover differed from those in the connection type form for form field descriptions.

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 and HelpIcon vs OutlinedQuestionCircleIcon in many of our forms. While both methods could be considered correct, it looks inconsistent within the connection form. The K8sNameDescriptionField 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:
image
image
image
Gap is 16px:
image

After:
image
image
image
Gap is 24px as prescribed by PF forms:
image

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):

  • The developer has manually tested the changes and verified that the changes work
  • Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
  • The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

  • Included any necessary screenshots or gifs if it was a UI change.
  • Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

  • The developer has tested their solution on a cluster by using the image produced by the PR to main

cc @andrewballantyne @simrandhaliw

Copy link
Member

@andrewballantyne andrewballantyne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweet, I didn't even consider the usage without stack -- I mirrored what we had already done. Better to use the form spacing anyways 👍

@simrandhaliw
Copy link

Thank you for observing and fixing these inconsistencies! LGTM!

Copy link

codecov bot commented Sep 20, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 85.47%. Comparing base (4cec257) to head (25e0fbe).
Report is 11 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #3234      +/-   ##
==========================================
- Coverage   85.50%   85.47%   -0.03%     
==========================================
  Files        1280     1280              
  Lines       28190    28229      +39     
  Branches     7535     7558      +23     
==========================================
+ Hits        24103    24129      +26     
- Misses       4087     4100      +13     
Files with missing lines Coverage Δ
...8sNameDescriptionField/K8sNameDescriptionField.tsx 100.00% <100.00%> (ø)
.../k8s/K8sNameDescriptionField/ResourceNameField.tsx 100.00% <100.00%> (ø)
...src/concepts/k8s/ResourceNameDefinitionTooltip.tsx 100.00% <100.00%> (ø)

... and 12 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4cec257...25e0fbe. Read the comment docs.

@christianvogt christianvogt requested review from jeff-phillips-18 and emilys314 and removed request for manaswinidas and dpanshug September 20, 2024 20:16
@emilys314
Copy link
Contributor

/lgtm

Copy link
Contributor

openshift-ci bot commented Sep 23, 2024

[APPROVALNOTIFIER] This PR is APPROVED

Approval requirements bypassed by manually added approval.

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-merge-bot openshift-merge-bot bot merged commit 854cb3c into opendatahub-io:main Sep 23, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants