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

Bug 1827609: Inline Create button with the Title #5080

Merged
merged 1 commit into from Apr 24, 2020

Conversation

bipuladh
Copy link
Contributor

@bipuladh bipuladh commented Apr 16, 2020

Screenshots:
Desktop Views:
Screenshot from 2020-04-17 00-03-45
Screenshot from 2020-04-17 00-03-21
Mobile Views:
Screenshot from 2020-04-17 00-03-50
Screenshot from 2020-04-17 00-03-28
Search Remains untouched
Screenshot from 2020-04-17 00-21-48

@openshift-ci-robot openshift-ci-robot added the component/core Related to console core functionality label Apr 16, 2020
@bipuladh
Copy link
Contributor Author

/assign @spadgett
cc @bmignano

@spadgett
Copy link
Member

cc @serenamarie125

@spadgett
Copy link
Member

/assign @rhamilto
for code review

frontend/public/components/utils/headings.tsx Outdated Show resolved Hide resolved
display: flex;
flex-direction: row;
}
@media (max-width: $screen-sm) {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
@media (max-width: $screen-sm) {
@media (max-width: $screen-xs-max) {

as that is 767px instead of 768px. Otherwise you'll get your bottom margin at 768px, too. And put this rule first not only for alpha but also for mobile-first.

Copy link
Member

Choose a reason for hiding this comment

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

In other words, move lines 32-34 to line 28.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@rhamilto we only want 30px margin when we don't have the button and title in the same line. We show them in the same line in size > $screen-xs (480px) so adding margin at size < $screen-xs-max (767px) leaves us with unnecessary margin in the range of 480px to 767px.
Which causes issues similar to this: #5080 (comment)

frontend/public/components/factory/list-page.jsx Outdated Show resolved Hide resolved
@bipuladh
Copy link
Contributor Author

@rhamilto I have updated the failing spec. It implies(updated spec) that a user of this component cannot have a create button without providing us with a title. If you think that should not be the behaviour please let me know and I will update it as required. Thanks,

@bipuladh bipuladh requested a review from rhamilto April 16, 2020 23:37
@serenamarie125
Copy link
Contributor

How does this look on a details page? I was initially right aligned in the same row as the breadcrumb, but would look nice following the resource name.

Just remembered we also have status badges following the resource name in some cases. Including a couple of images for reference in case you haven't seen these cases. FYI @beaumorley @christianvogt

Screen Shot 2020-04-16 at 11 07 52 PM

Screen Shot 2020-04-16 at 11 08 40 PM

@bipuladh
Copy link
Contributor Author

@serenamarie125 So it would look something like this.
Screenshot from 2020-04-17 16-25-17

@@ -24,6 +24,15 @@
padding-left: $grid-gutter-width;
padding-right: $grid-gutter-width;
}
&--row {
@media (max-width: $screen-sm-max) {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
@media (max-width: $screen-sm-max) {
@media (max-width: $screen-xs-max) {

Copy link
Member

Choose a reason for hiding this comment

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

Too much space with $screen-sm-max

Screen Shot 2020-04-17 at 9 34 36 AM

@bmignano
Copy link

@bipuladh Could you add a screenshot of what it would look like with both a status badge and a tech preview badge?

@rhamilto
Copy link
Member

I'm seeing the badge directly abut the title.
Screen Shot 2020-04-17 at 9 31 53 AM

@@ -105,6 +108,11 @@ $co-external-link-padding-right: 15px;
}
}

.co-m-pane__heading-badge {
margin-left: var(--pf-global--spacer--sm);
Copy link
Member

Choose a reason for hiding this comment

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

Nit: this declaration should come second (move to line 113) as we aim to keep declarations alphabetized by property.

@rhamilto
Copy link
Member

@bipuladh Could you add a screenshot of what it would look like with both a status badge and a tech preview badge?

Note we hide the status badge at < 768px.

localhost_9000_k8s_ns_andrew_tekton dev_v1alpha1_Pipeline_new-pipeline(iPhone X)
localhost_9000_k8s_ns_andrew_tekton dev_v1alpha1_Pipeline_new-pipeline(2  PFSM)
localhost_9000_k8s_ns_andrew_tekton dev_v1alpha1_Pipeline_new-pipeline(3  PFMD)

@bipuladh
Copy link
Contributor Author

@bmignano @serenamarie125
With badges:
Desktop View:
Screenshot from 2020-04-17 21-08-00
Mobile View:
Screenshot from 2020-04-17 21-08-45

@rhamilto
Copy link
Member

/lgtm

/hold for ux approval

@openshift-ci-robot openshift-ci-robot added do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. lgtm Indicates that a PR is ready to be merged. approved Indicates a PR has been approved by an approver from all required OWNERS files. labels Apr 17, 2020
@bmignano
Copy link

@serenamarie125 Would you prefer not making any changes to the details pages (i.e. leaving the tech preview badge above the actions dropdown):

Or moving the tech preview badge to be after the title as on list views (to the right of status badges)?

Curious what your thoughts are – with the first version the tech preview badge will appear in different places from detail views to list views but with the second version we have 2 badges after a page title.

Any other thoughts @openshift/team-ux-review

@rhamilto
Copy link
Member

Or moving the tech preview badge to be after the title as on list views (to the right of status badges)?

Given code freeze is today, I recommend this as a follow-on bug fix.

@bmignano
Copy link

Given code freeze is today, I recommend this as a follow-on bug fix.

Ah sounds good to me thanks @rhamilto @bipuladh

@bipuladh
Copy link
Contributor Author

/retest

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

4 similar comments
@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@openshift-bot
Copy link
Contributor

/retest

Please review the full test history for this PR and help us cut down flakes.

@bipuladh
Copy link
Contributor Author

/retest

@spadgett
Copy link
Member

/hold

This seems to be consistently failing on test "displays form editor for creating a new Prometheus instance"

@openshift-ci-robot openshift-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Apr 20, 2020
@openshift-ci-robot openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Apr 21, 2020
@bipuladh
Copy link
Contributor Author

bipuladh commented Apr 21, 2020

@spadgett fixed the issue. @rhamilto could you have a look at it one more time?

@spadgett
Copy link
Member

/hold cancel

@openshift-ci-robot openshift-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Apr 21, 2020
@rhamilto
Copy link
Member

/lgtm

note this needs a bugzilla now as we're past feature freeze.

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Apr 23, 2020
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: bipuladh, rhamilto, serenamarie125

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

@bipuladh bipuladh changed the title Inline Create button with the Title Bug 1827609: Inline Create button with the Title Apr 24, 2020
@openshift-ci-robot openshift-ci-robot added bugzilla/unspecified bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. labels Apr 24, 2020
@openshift-ci-robot
Copy link
Contributor

@bipuladh: This pull request references Bugzilla bug 1827609, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug
  • bug is open, matching expected state (open)
  • bug target release (4.5.0) matches configured target release for branch (4.5.0)
  • bug is in the state NEW, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1827609: Inline Create button with the Title

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@openshift-merge-robot openshift-merge-robot merged commit 9d82434 into openshift:master Apr 24, 2020
@openshift-ci-robot
Copy link
Contributor

@bipuladh: All pull requests linked via external trackers have merged: openshift/console#5080. Bugzilla bug 1827609 has been moved to the MODIFIED state.

In response to this:

Bug 1827609: Inline Create button with the Title

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@spadgett spadgett added this to the v4.5 milestone Apr 24, 2020
@andrewballantyne
Copy link
Contributor

andrewballantyne commented Apr 27, 2020

@bipuladh This appears to have caused
image

cc @spadgett @rhamilto

Looked around and didn't find an issue, so I logged BZ 1828591

@spadgett
Copy link
Member

@andrewballantyne we really, really want you to know it's dev preview :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. component/core Related to console core functionality lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

9 participants