PWA-622: Update Venia's button #2496

davemacaulay · 2020-06-17T20:58:47Z

Description

Adjust Button styles to match the new design

Related Issue

https://jira.corp.magento.com/browse/PWA-622

Acceptance

Verify all buttons are updated throughout the app
Ensure there is no broken functionality with the styling change

Verification Stakeholders

@jimbo
@dhaecker
@soumya-ashok
@schensley

Specification

Verification Steps

Navigate around the app following all known user flows
Verify all buttons previously present are present and work
Verify all buttons are positioned and readable

Screenshots / Screen Captures (if appropriate)

Checklist

I have added tests to cover my changes, if necessary.
I have updated the documentation accordingly, if necessary.

- copy tokens to `venia-ui` - move index.css to `venia-ui` - update global vars and move to tokens - update custom property name references

@font-face

- update serif font fallback value - update @font-face weights in templates - add serif @font-face in templates

# Conflicts: # packages/venia-concept/template.html # packages/venia-ui/lib/components/Footer/footer.css # packages/venia-ui/templates/default-font-include.mst

- use absolute paths to import `venia-ui` in `venia-concept`

- update existing CSS custom properties to use the new values

- Initial styling for new button styles

- use functional color notation

- Fix various buttons throughout the app

- Create <LinkButton /> component

- Update hover state to new colors - Fix various buttons throughout site - Fix estimate shipping info inconsistencies

- Prettier

# Conflicts: # packages/venia-ui/lib/tokens.css

PWAStudioBot · 2020-06-17T21:10:52Z

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-622.

Generated by 🚫 dangerJS against 138623a

devops-pwa-codebuild · 2020-06-17T21:19:02Z

Performance Test Results

The following fails have been reported by WebpageTest. These numbers indicates a possible performance issue with the PR which requires further manual testing to validate.

https://pr-2496.pwa-venia.com : LH Performance Expected 0.85 Actual 0.51, LH Best Practices Expected 1 Actual 0.92, WPT Cache Expected 90 Actual 83.333333333333
https://pr-2496.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.35, LH Best Practices Expected 1 Actual 0.92
https://pr-2496.pwa-venia.com/valeria-two-layer-tank.html : LH Performance Expected 0.8 Actual 0.41, LH Accessibility Expected 0.9 Actual 0.89, LH Best Practices Expected 1 Actual 0.92, WPT Cache Expected 65 Actual 50

- Update unit test snapshots

sirugh · 2020-06-18T14:22:51Z

Just a quick glance, I noticed the following:

Filter/sort buttons on category page seem to have been missed:

Estimate Shipping on Cart page doesn't match other adjustment button style:

Checkout button on Cart page (and other buttons elsewhere) has a weird shadow thing:

Some icons are blue stroke and some are black stroke:

- Update filter and sort buttons - Make icons the same color in account area - Fix shipping estimate button

davemacaulay · 2020-06-18T15:11:50Z

@sirugh

Just a quick glance, I noticed the following:

Filter/sort buttons on category page seem to have been missed:

Good catch, spoke with Soumya and updated to black outline with smaller min width.

Estimate Shipping on Cart page doesn't match other adjustment button style:

Another great catch, fixed.

Checkout button on Cart page (and other buttons elsewhere) has a weird shadow thing:

This is intentional, this is the :focus state for buttons and will be displayed in some (notably Chrome) browsers when you click on a button.

Some icons are blue stroke and some are black stroke:

Didn't know account area was a thing, thanks for bringing it to my attention. Worked with Scott & Soumya and decided to turn the black icon blue.

- Prettier & update snapshots

- Add white background to header

- Fix checkout buttons

sirugh

Three times a charm!

dpatil-magento · 2020-06-25T22:31:07Z

@davemacaulay As discussed Shipping Info and Shipping Method Edit overlay buttons needs to be consistent in guest and Auth mode. Rest all looks good.

- Update auth shipping address edit buttons

sirugh · 2020-06-26T14:27:25Z

packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js

        disabled: isSaving,
-        priority: isUpdate ? 'high' : 'normal',


I doubt this was an accident originally. Does the style guide call for all proceed/submit buttons to be high priority?

Both 'Update' and 'Add' are considered primary actions in the address modal, I modified this logic to the Save and Continue button is the correct normal priority if the authenticated user doesn't have any saved addresses :)

- Update checkout auth button to be secondary style

sirugh

....Fourth?

- Update button treatments in mini cart

jimbo

So many buttons.

dpatil-magento · 2020-06-26T18:10:31Z

QA Approved.
Follow up ticket will handle -

Mobile View >> Filters >> Reset filter does not get disabled after first tap but clears filters (minor)
Mini cart Edit product - Cancel button UI and order of display is stale (missed to report/update)

anthoula and others added 16 commits June 9, 2020 15:31

PWA-621: Carry over design tokens from styleguide

39778f4

- copy tokens to `venia-ui` - move index.css to `venia-ui` - update global vars and move to tokens - update custom property name references

Merge branch 'develop' of github.com:magento/pwa-studio into PWA-621

18b1b8e

PWA-621: Carry over design tokens from styleguide

26832d0

- update serif font fallback value - update @font-face weights in templates - add serif @font-face in templates

Merge branch 'develop' of github.com:magento/pwa-studio into PWA-621

70e218a

Merge branch 'develop' of github.com:magento/pwa-studio into PWA-621

b572c09

# Conflicts: # packages/venia-concept/template.html # packages/venia-ui/lib/components/Footer/footer.css # packages/venia-ui/templates/default-font-include.mst

PWA-621: Carry over design tokens from styleguide

04f6e49

- use absolute paths to import `venia-ui` in `venia-concept`

PWA-621: Carry over design tokens from styleguide

1ec9180

- update existing CSS custom properties to use the new values

PWA-622: Update Venia's button to match the styleguide's button

fcc0ca1

- Initial styling for new button styles

PWA-621: Carry over design tokens from styleguide

c0bef2a

- use functional color notation

PWA-622: Update Venia's button to match the styleguide's button

feff900

- Fix various buttons throughout the app

Merge branch 'develop' of github.com:magento/pwa-studio into PWA-621

7baf474

PWA-622: Update Venia's button to match the styleguide's button

bced8a9

- Fix various buttons throughout the app

Merge branch 'develop' of github.com:magento/pwa-studio into PWA-621

71907b8

PWA-622: Update Venia's button to match the styleguide's button

adb825c

- Create <LinkButton /> component

PWA-622: Update Venia's button to match the styleguide's button

1f7ae7c

- Update hover state to new colors - Fix various buttons throughout site - Fix estimate shipping info inconsistencies

PWA-622: Update Venia's button to match the styleguide's button

90794c4

- Prettier

Merge branch 'PWA-621' into PWA-622

199670d

# Conflicts: # packages/venia-ui/lib/tokens.css

PWAStudioBot added pkg:venia-concept pkg:venia-styleguide pkg:venia-ui labels Jun 17, 2020

davemacaulay changed the base branch from develop to PWA-621 June 17, 2020 21:12

PWA-622: Update Venia's button to match the styleguide's button

10b3b28

- Update unit test snapshots

davemacaulay added the version: Minor This changeset includes functionality added in a backwards compatible manner. label Jun 18, 2020

PWA-622: Update Venia's button to match the styleguide's button

9da638d

- Update filter and sort buttons - Make icons the same color in account area - Fix shipping estimate button

PWA-622: Update Venia's button to match the styleguide's button

a5c01c3

- Prettier & update snapshots

PWA-622: Update Venia's button to match the styleguide's button

0e295a9

- Add white background to header

jimbo previously approved these changes Jun 24, 2020

View reviewed changes

sirugh previously approved these changes Jun 24, 2020

View reviewed changes

m2-community-project bot assigned sirugh Jun 24, 2020

m2-community-project bot added Progress: approved and removed Progress: changes requested labels Jun 24, 2020

PWA-622: Update Venia's button to match the styleguide's button

d95f194

- Fix checkout buttons

davemacaulay dismissed stale reviews from sirugh and jimbo via d95f194 June 24, 2020 21:36

PWA-622: Update Venia's button to match the styleguide's button

cf677aa

sirugh previously approved these changes Jun 25, 2020

View reviewed changes

jimbo previously approved these changes Jun 25, 2020

View reviewed changes

PWA-622: Update Venia's button to match the styleguide's button

8c6e821

- Update auth shipping address edit buttons

davemacaulay dismissed stale reviews from jimbo and sirugh via 8c6e821 June 26, 2020 14:22

sirugh reviewed Jun 26, 2020

View reviewed changes

PWA-622: Update Venia's button to match the styleguide's button

474e4ce

- Update checkout auth button to be secondary style

sirugh previously approved these changes Jun 26, 2020

View reviewed changes

PWA-622: Update Venia's button to match the styleguide's button

138623a

- Update button treatments in mini cart

davemacaulay dismissed sirugh’s stale review via 138623a June 26, 2020 15:56

jimbo approved these changes Jun 26, 2020

View reviewed changes

sirugh approved these changes Jun 26, 2020

View reviewed changes

dpatil-magento merged commit 79a6e8d into magento:develop Jun 26, 2020

m2-community-project bot removed the Progress: approved label Jun 26, 2020

revanth0212 mentioned this pull request Jun 26, 2020

Mini Cart V2 / Shopping Bag Footer section. #2511

Merged

1 task

dpatil-magento mentioned this pull request Jul 4, 2020

css selector updates magento/pwa-tests#42

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PWA-622: Update Venia's button #2496

PWA-622: Update Venia's button #2496

davemacaulay commented Jun 17, 2020

PWAStudioBot commented Jun 17, 2020 •

edited

Loading

devops-pwa-codebuild commented Jun 17, 2020 •

edited

Loading

sirugh commented Jun 18, 2020 •

edited

Loading

davemacaulay commented Jun 18, 2020 •

edited

Loading

sirugh left a comment

dpatil-magento commented Jun 25, 2020

sirugh Jun 26, 2020

davemacaulay Jun 26, 2020

sirugh left a comment

jimbo left a comment

dpatil-magento commented Jun 26, 2020

PWA-622: Update Venia's button #2496

PWA-622: Update Venia's button #2496

Conversation

davemacaulay commented Jun 17, 2020

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

PWAStudioBot commented Jun 17, 2020 • edited Loading

devops-pwa-codebuild commented Jun 17, 2020 • edited Loading

sirugh commented Jun 18, 2020 • edited Loading

davemacaulay commented Jun 18, 2020 • edited Loading

sirugh left a comment

Choose a reason for hiding this comment

dpatil-magento commented Jun 25, 2020

sirugh Jun 26, 2020

Choose a reason for hiding this comment

davemacaulay Jun 26, 2020

Choose a reason for hiding this comment

sirugh left a comment

Choose a reason for hiding this comment

jimbo left a comment

Choose a reason for hiding this comment

dpatil-magento commented Jun 26, 2020

PWAStudioBot commented Jun 17, 2020 •

edited

Loading

devops-pwa-codebuild commented Jun 17, 2020 •

edited

Loading

sirugh commented Jun 18, 2020 •

edited

Loading

davemacaulay commented Jun 18, 2020 •

edited

Loading