Move disk explanations to popovers #5939
Conversation
|
@suomiy @yaacov @matthewcarleton Please take a look. Thanks! |
| @@ -3,3 +3,7 @@ | |||
| padding-right: 30px; | |||
| margin-top: 20px; | |||
| } | |||
|
|
|||
| button#kubevirt-vm-details__file-systems--info-icon { | |||
There was a problem hiding this comment.
I'd remove this padding and just use the default spacing from PF. It's better accessibility with a larger touch area.
There was a problem hiding this comment.
If I remove the padding, there is no space between the icon and the header text.
There was a problem hiding this comment.
If you switch it to a plain modifier and drop the inline variant you should get the proper spacing.
| @@ -3,3 +3,7 @@ | |||
| padding-right: 30px; | |||
There was a problem hiding this comment.
can you use PF spacer variables here?
There was a problem hiding this comment.
We should be able to. I'll take a look at it.
| position="top" | ||
| bodyContent={<>{GUEST_AGENT_FILE_SYSTEMS_DESCRIPTION}</>} | ||
| > | ||
| <Button variant="link" id="kubevirt-vm-details__file-systems--info-icon" isInline> |
There was a problem hiding this comment.
is this ID needed?
There was a problem hiding this comment.
I needed it to override the PF settings that set the padding to 0px.
| @@ -0,0 +1,3 @@ | |||
| button#kubevirt-vm-details__disks--info-icon { | |||
There was a problem hiding this comment.
remove this one too :)
| position="top" | ||
| bodyContent={<>{VM_DISKS_DESCRIPTION}</>} | ||
| > | ||
| <Button variant="link" id="kubevirt-vm-details__disks--info-icon" isInline> |
There was a problem hiding this comment.
variant should be plain
| position="top" | ||
| bodyContent={<>{GUEST_AGENT_FILE_SYSTEMS_DESCRIPTION}</>} | ||
| > | ||
| <Button variant="link" id="kubevirt-vm-details__file-systems--info-icon" isInline> |
There was a problem hiding this comment.
does it need isInline?
| bodyContent={<>{GUEST_AGENT_FILE_SYSTEMS_DESCRIPTION}</>} | ||
| > | ||
| <Button variant="link" id="kubevirt-vm-details__file-systems--info-icon" isInline> | ||
| <BlueInfoCircleIcon /> |
There was a problem hiding this comment.
this should be a grey (?)
There was a problem hiding this comment.
I can change it. The only concern I have is that this came out of the console-shared package and there is no grey info icon that I can find there. The only place the blue one is used is for the guest agent missing message, but it doesn't appear that it was added for that purpose since it was there before that PR was created.
Do you know if we have a standard for the colors of these icons or somewhere else in console where they're used?
There was a problem hiding this comment.
I was looking at the Deployments>environment tab and I see the proper icon there.
pcbailey
force-pushed
the
move-disk-explanations-to-popovers
branch
from
96ac1d3
to
53fa28c
Compare
|
looks great! |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: pcbailey, suomiy 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 |
openshift-ci-robot
added
lgtm
|
/retest Please review the full test history for this PR and help us cut down flakes. |
2 similar comments
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
This PR moves the explanations for Disk and File Systems in the Disks tab to popovers to remove the visual clutter from the page.
Popover not activated:
Popover activated:
