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

UI Kit UX improvements #1278

Merged
merged 13 commits into from
Feb 6, 2023
Merged

UI Kit UX improvements #1278

merged 13 commits into from
Feb 6, 2023

Conversation

matteodepalo
Copy link
Contributor

@matteodepalo matteodepalo commented Feb 3, 2023

WHY are these changes introduced?

We'd like to make some UX improvements to UI kit.

WHAT is this pull request doing?

This PR packs the following improvements:

  • Paths are now rendered with italics

Screenshot 2023-02-03 at 16 05 25

  • Added table example to kitchen sink and renamed banners sub-command to static

Screenshot 2023-02-03 at 16 05 45

  • renderConfirmationPrompts will now allow users to to submit answers just by pressing shortcuts, without also having to press enter.

How to test your changes?

  • Run shopify kitchen-sink static and see the new table
  • Run shopify app dev --reset and try to submit Create this project as a new app on Shopify? just by pressing y or n.

Measuring impact

How do we know this change was effective? Please choose one:

  • n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
  • Existing analytics will cater for this addition
  • PR includes analytics changes to measure impact

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've considered possible documentation changes
  • I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

@matteodepalo matteodepalo changed the title Ux improvements 2 UI Kit UX improvements Feb 3, 2023
@github-actions

This comment has been minimized.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 3, 2023

Benchmark report

The following table contains a summary of the startup time for all commands.

Status Command Baseline (avg) Current (avg) Diff
🟢 app build 956 ms 946.33 ms -1.01 %
🟢 app deploy 1158.33 ms 1168.33 ms 0.86 %
🟢 app dev 1152 ms 1158.67 ms 0.58 %
🟢 app env pull 1068.67 ms 1063 ms -0.53 %
🟢 app env show 1054.33 ms 1071.33 ms 1.61 %
🟢 app generate extension 1126 ms 1113.67 ms -1.1 %
🟢 app generate schema 1080.33 ms 1093.33 ms 1.2 %
🟢 app info 1057.33 ms 1059.33 ms 0.19 %
🟢 app scaffold extension 1122.33 ms 1119.33 ms -0.27 %
🟢 app update-url 1029.33 ms 1020.67 ms -0.84 %
🟢 theme check 907.33 ms 900.67 ms -0.73 %
🟢 theme delete 1011.67 ms 1007.33 ms -0.43 %
🟢 theme dev 1004 ms 1009 ms 0.5 %
🟢 theme help-old 890.67 ms 897.67 ms 0.79 %
🟢 theme info 942.67 ms 943.33 ms 0.07 %
🟢 theme init 914.67 ms 911.33 ms -0.36 %
🟢 theme language-server 890.67 ms 905 ms 1.61 %
🟢 theme list 1018.33 ms 1019.33 ms 0.1 %
🟢 theme open 1013.67 ms 1017 ms 0.33 %
🟢 theme package 948 ms 946 ms -0.21 %
🟢 theme publish 1021.67 ms 1019 ms -0.26 %
🟢 theme pull 1004.33 ms 1004.67 ms 0.03 %
🟢 theme push 1002.33 ms 1001.67 ms -0.07 %
🟢 theme serve 1015 ms 1010.67 ms -0.43 %
🟢 theme share 1006.67 ms 999.67 ms -0.7 %
🟢 webhook trigger 1009 ms 1009.67 ms 0.07 %

@matteodepalo
Copy link
Contributor Author

cc @MeredithCastile

@matteodepalo matteodepalo requested review from a team, amcaplan and gonzaloriestra and removed request for a team February 3, 2023 07:16
@github-actions
Copy link
Contributor

github-actions bot commented Feb 6, 2023

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements
71.84% (+0.01% 🔼)
3848/5356
🟡 Branches
69.39% (+0.13% 🔼)
1750/2522
🟡 Functions
70.19% (+0.02% 🔼)
1003/1429
🟡 Lines
73.08% (+0.01% 🔼)
3671/5023
Show new covered files 🐣
St.
File Statements Branches Functions Lines
🟢
... / static.ts
100% 100% 100% 100%
🔴
... / static.ts
0% 100% 0% 0%

Test suite run success

973 tests passing in 500 suites.

Report generated by 🧪jest coverage report action from a52e125

@@ -14,6 +14,7 @@ export interface SelectPromptProps<T> {
onSubmit: (value: T) => void
infoTable?: InfoTableProps['table']
defaultValue?: T
submitWithShortcuts?: boolean
Copy link
Contributor

Choose a reason for hiding this comment

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

Wouldn't it be a bit confusing if we have a flow where the first question requires you to hit enter after choosing an answer, but then the second time you don't have to?

What about submitting always without pressing enter?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Personally I'm ok with the recommendation, but for some reason we converged on having shortcuts only jump to the selection for longer lists. @MeredithCastile do you remember why?

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok, thanks. Let's move on and we can change it later.

@gonzaloriestra gonzaloriestra merged commit 95a4a88 into main Feb 6, 2023
@gonzaloriestra gonzaloriestra deleted the ux-improvements-2 branch February 6, 2023 10:39
@shopify-shipit shopify-shipit bot temporarily deployed to production February 6, 2023 15:28 Inactive
@shopify-shipit shopify-shipit bot temporarily deployed to nightly February 7, 2023 02:14 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants