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

[Mobile] Center Confirmation Dialog Texts #7492

Merged
merged 10 commits into from
Mar 3, 2024

Conversation

rukmini-bose
Copy link
Contributor

@rukmini-bose rukmini-bose commented Feb 9, 2024

Closes #7347

Describe your changes:

  • Add code to classes that are used for only confirmation dialogs such that the text and buttons for such messages are centered, rather than floating to the top. This will improve overall mobile UX.

All Submissions:

  • Have you followed the guidelines in our Contributing document?
  • Have you checked to ensure there aren't other open Pull Requests for the same update/change?
  • Is this change backwards compatible? For example, developers won't need to change how they are calling the API or how they've extended core plugins such as Tables or Plots.

Author Checklist

  • Changes address original issue?
  • Tests included and/or updated with changes?
  • Has this been smoke tested?
  • Have you associated this PR with a type: label? Note: this is not necessarily the same as the original issue.
  • Have you associated a milestone with this PR? Note: leave blank if unsure.
  • Is this a breaking change to be called out in the release notes?
  • Testing instructions included in associated issue OR is this a dependency/testcase change?

Reviewer Checklist

  • Changes appear to address issue?
  • Reviewer has tested changes by following the provided instructions?
  • Changes appear not to be breaking changes?
  • Appropriate automated tests included?
  • Code style and in-line documentation are appropriate?

Copy link

codecov bot commented Feb 9, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 55.15%. Comparing base (e449fd0) to head (fe4be25).

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #7492      +/-   ##
==========================================
- Coverage   55.53%   55.15%   -0.39%     
==========================================
  Files         672      672              
  Lines       26962    26962              
  Branches     2620     2620              
==========================================
- Hits        14973    14870     -103     
- Misses      11271    11374     +103     
  Partials      718      718              
Flag Coverage Δ
e2e-full 23.32% <ø> (-18.18%) ⬇️
e2e-stable 59.33% <ø> (-0.24%) ⬇️
unit 48.44% <100.00%> (-0.08%) ⬇️
Files Coverage Δ
src/api/overlays/components/OverlayComponent.vue 75.00% <100.00%> (ø)

... and 14 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 e449fd0...fe4be25. Read the comment docs.

@ozyx
Copy link
Contributor

ozyx commented Feb 14, 2024

Is this visual change covered by any visual tests?

@rukmini-bose rukmini-bose force-pushed the confirmation-dialog-mobile branch from 7bc4d9f to 11990f0 Compare February 22, 2024 19:34
Copy link
Contributor

@charlesh88 charlesh88 left a comment

Choose a reason for hiding this comment

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

I'm finding the button centering is ending up with some unfortunate vertical alignments:
Screenshot 2024-02-22 at 2 51 41 PM

I think it'd be better to do a right-alignment, and more consistent with the desktop layout:

Screenshot 2024-02-22 at 2 53 13 PM

@unlikelyzero unlikelyzero requested a review from ozyx February 29, 2024 00:48
@@ -3,7 +3,6 @@

import { devices } from '@playwright/test';
const MAX_FAILURES = 5;
const NUM_WORKERS = 2;
Copy link
Collaborator

Choose a reason for hiding this comment

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

driveby: reduce test flakiness

Copy link
Contributor

Choose a reason for hiding this comment

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

nice. yeah 1 should be enough here

Copy link
Contributor

@ozyx ozyx left a comment

Choose a reason for hiding this comment

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

LGTM, just one small non blocking suggestion

@@ -57,3 +53,23 @@ test('Verify that user can search @mobile', async ({ page }) => {
await page.getByTitle('Collapse Browse Pane').click();
await expect(page.getByRole('main').getByText('Parent Display Layout')).toBeVisible();
});
test('Remove Object and confirmation dialog @mobile', async ({ page }) => {
await page.goto('./');
Copy link
Contributor

Choose a reason for hiding this comment

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

We can pull these page.goto('./'); out and into a test.beforeEach()

- Fixed an oversight that caused the top of form dialogs to
be scrolled out of view by default.
- Fixed approach to vertical centering for `-fit` type confirmation dialogs.
- Reduced size of confirmation dialog icons.
- Smoke tested in Chrome mobile emulator in a large variety of mobile
viewport sizes and orientations.
Copy link
Contributor

@charlesh88 charlesh88 left a comment

Choose a reason for hiding this comment

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

After finding some newly introduced issues, have pushed up new changes to address. With that, LGTM.

- Removes extra margin unintentionally added to `l-overlay-large`.
@charlesh88
Copy link
Contributor

Problem related to extra margin being introduced to view large/preview/properties dialogs should be fixed. Visual tests should now pass...

@unlikelyzero unlikelyzero enabled auto-merge (squash) March 3, 2024 16:09
@unlikelyzero unlikelyzero added the pr:e2e:couchdb npm run test:e2e:couchdb label Mar 3, 2024
@github-actions github-actions bot removed the pr:e2e:couchdb npm run test:e2e:couchdb label Mar 3, 2024
@unlikelyzero unlikelyzero merged commit 73eead6 into master Mar 3, 2024
22 of 25 checks passed
@unlikelyzero unlikelyzero deleted the confirmation-dialog-mobile branch March 3, 2024 16:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants