[polaris.shopify.com] Add playroom prototype #7032

gwyneplaine · 2022-08-26T04:30:48Z

WHY are these changes introduced?

This PR is the core PR for the composite component tooling project.

WHAT is this pull request doing?

At a high level the changes include:

Adding a playroom integration to polaris.shopify.com
- On dev this spins up a separate dev server that the core next app redirects to on hitting the route /playroom
- In prod this can all be run statically, build builds assets to the public/playroom folder of the core polaris.shopify.com next app.
Added a /sandbox route for branding and guidance
Made changes to playroom src via patch-package to allow us to apply code transforms before playroom runs its own transforms via babel.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Run yarn workspace polaris.shopify.com dev on the root of the repo
Visit the sandbox route at localhost:3000/sandbox
Play with the editor

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

ghost · 2022-08-26T04:30:52Z

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

github-actions · 2022-08-26T04:35:48Z

size-limit report 📦

Path	Size
polaris-react-cjs	200.77 KB (+0.01% 🔺)
polaris-react-esm	128.94 KB (+0.01% 🔺)
polaris-react-esnext	183.06 KB (+0.01% 🔺)
polaris-react-css	40.61 KB (0%)

gwyneplaine · 2022-08-26T04:40:59Z

/snapit

gwyneplaine · 2022-09-13T06:20:56Z

/stageit

github-actions · 2022-09-13T06:21:12Z

🚀 754e5f9fb93df0074c5a0a36709e4671a45075e1 is now deploying to staging. View status.

gwyneplaine · 2022-09-13T06:25:36Z

/stageit

github-actions · 2022-09-13T06:25:49Z

🚀 754e5f9fb93df0074c5a0a36709e4671a45075e1 is now deploying to staging. View status.

gwyneplaine · 2022-09-14T05:26:43Z

/stageit

github-actions · 2022-09-14T05:26:57Z

🚀 5d9518329f5ea00be5d9e6a01c870593615d0029 is now deploying to staging. View status.

gwyneplaine · 2022-09-15T00:33:19Z

/stageit

github-actions · 2022-09-15T00:33:33Z

🚀 5d9518329f5ea00be5d9e6a01c870593615d0029 is now deploying to staging. View status.

gwyneplaine · 2022-09-16T06:05:52Z

/stageit

github-actions · 2022-09-16T06:06:04Z

🚀 1c6bff4c19fa1ff384e7fd454277335bf0f01018 is now deploying to staging. View status.

gwyneplaine · 2022-09-16T06:17:37Z

/stageit

github-actions · 2022-09-16T06:17:49Z

🚀 7c461ce4a0a5bcb4a1765c9355d779e7032f9d91 is now deploying to staging. View status.

jesstelford · 2022-09-16T06:29:30Z

/stageit

github-actions · 2022-09-16T06:29:43Z

🚀 54baebc23703ac60cf5434aeda5dc21dfba603b4 is now deploying to staging. View status.

gwyneplaine · 2022-09-20T05:54:12Z

/stageit

github-actions · 2022-09-20T05:54:25Z

🚀 18e3c342744dc846085af687e644cefd13a63a9e is now deploying to staging. View status.

gwyneplaine · 2022-09-26T07:40:48Z

/stageit

github-actions · 2022-09-26T07:41:03Z

🚀 813c3ff31e671f243395d6236497f2b06bbabb3d is now deploying to staging. View status.

…around

…alog.tsx Co-authored-by: Selene Hinkley <[email protected]>

…gjson

Design improvements to sandbox page

…he dialog

All feedback actions resolved or deferred to separate PRs

…page

@aaronccasanova

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#7373](#7373) [`56c82ee8d`](56c82ee) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add `getFunctionArgs` utility ### Patch Changes - Updated dependencies \[[`c3f427c17`](c3f427c)]: - @shopify/[email protected] ## @shopify/[email protected] ### Minor Changes - [#7364](#7364) [`e4b2c36d8`](e4b2c36) Thanks [@Bringer128](https://github.com/Bringer128)! - Deprecated Collapsible preventMeasuringOnChildrenUpdate. Fixed bug where Collapsible would get stuck in animating state when duration is 0. Add support for intentionally disabling the transition in Collapsible. ### Patch Changes - [#7363](#7363) [`8a6c323e2`](8a6c323) Thanks [@aveline](https://github.com/aveline)! - Added `id` prop to `Text` and `Box` - [#7348](#7348) [`ea2a45bbb`](ea2a45b) Thanks [@aveline](https://github.com/aveline)! - Added `setMediaWidth` breakpoints test utility - [#7388](#7388) [`5bc885765`](5bc8857) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed a re-render bug with Page Actions - Updated dependencies \[[`c3f427c17`](c3f427c)]: - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`56c82ee8d`](56c82ee)]: - @shopify/[email protected] ## @shopify/[email protected] ### Patch Changes - [#7385](#7385) [`c3f427c17`](c3f427c) Thanks [@laurkim](https://github.com/laurkim)! - Refactored exported alias and scale types in `breakpoints`, `depth`, `font`, `motion`, `shape`, `spacing`, and `zIndex`. ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`c3f427c17`](c3f427c)]: - @shopify/[email protected] ## [email protected] ### Minor Changes - [#7032](#7032) [`40ee692aa`](40ee692) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Added Playroom integration to Polaris docs site. ### Patch Changes - [#7032](#7032) [`40ee692aa`](40ee692) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Improved the design of the Sandbox feature. - [#7400](#7400) [`9f9fe1f99`](9f9fe1f) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed a scaling bug caused by content overflow Fixed a bug where examples that don't have any content wouldn't show up - Updated dependencies \[[`8a6c323e2`](8a6c323), [`e4b2c36d8`](e4b2c36), [`c3f427c17`](c3f427c), [`ea2a45bbb`](ea2a45b), [`5bc885765`](5bc8857)]: - @shopify/[email protected] - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`8a6c323e2`](8a6c323), [`e4b2c36d8`](e4b2c36), [`ea2a45bbb`](ea2a45b), [`5bc885765`](5bc8857)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

gwyneplaine force-pushed the prototype-composition-tooling branch 4 times, most recently from 13a69bd to 9cf90fc Compare August 26, 2022 05:33

Shopify deleted a comment from netlify bot Sep 13, 2022

gwyneplaine force-pushed the prototype-composition-tooling branch from 2eee76b to 5d95183 Compare September 14, 2022 05:26

gwyneplaine force-pushed the prototype-composition-tooling branch from d83d1a6 to 07775b0 Compare September 16, 2022 03:28

gwyneplaine force-pushed the prototype-composition-tooling branch 2 times, most recently from 6030387 to 813c3ff Compare September 26, 2022 07:40

gwyneplaine and others added 22 commits October 14, 2022 09:12

changeset

f3fcb3a

Update Sandbox 1-liner on homepage

0aa4f5d

Sandbox header has distinct title + header with link to help

8a826f2

Support passing a className prop to buttons on docs site

1948535

Support all css sizes for icons on docs site

82a4e7b

<StableButton> allows changing button text without the width jumping …

7228eac

…around

Restyle Sandbox header to be clearer

a9db423

Rework Sandbox help dialog for better flow and content

b39ff26

Show Sandbox onboarding for firsttime visitors

b91b7b5

Add a 320px breakpoint to Playroom Sandbox

2d0524f

Ask Typescript politely to stop being silly

91f01bc

Update polaris.shopify.com/src/components/SandboxHelpDialog/SandboxDi…

bac53ea

…alog.tsx Co-authored-by: Selene Hinkley <[email protected]>

remove unused styles

3b63e2b

minor updates to sandbox CTA to accommodate new website ux updates

2e5ea13

remove icons from .gitignore

788e756

remove unused spread argument, remove playroom specific scripts in pk…

714fda2

…gjson

[polaris.shopify.com] Improve design of sandbox (#7366)

aae80f7

Design improvements to sandbox page

Fix up some comments in the playroom config

be05091

Name a magic number & tweak some comments

b4703b8

fix inconsistent file naming

c5ce2a1

remove videoRef and initialFocus prop as this was breaking a11y for t…

fef8b2f

…he dialog

Resolve conflicting yarn.lock

db2c33f

gwyneplaine force-pushed the prototype-composition-tooling branch from c9a9ee3 to db2c33f Compare October 13, 2022 22:16

create SandboxContainer component, and replace markup in sandbox.tsx …

e4eb0b3

…page

gwyneplaine force-pushed the prototype-composition-tooling branch from fb24697 to e4eb0b3 Compare October 13, 2022 23:23

gwyneplaine merged commit 40ee692 into main Oct 14, 2022

gwyneplaine deleted the prototype-composition-tooling branch October 14, 2022 00:10

github-actions bot mentioned this pull request Oct 14, 2022

Version Packages #7382

Merged

[polaris.shopify.com] Add playroom prototype #7032

[polaris.shopify.com] Add playroom prototype #7032

Uh oh!

Conversation

gwyneplaine commented Aug 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

ghost commented Aug 26, 2022

Uh oh!

github-actions bot commented Aug 26, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

gwyneplaine commented Aug 26, 2022

Uh oh!

gwyneplaine commented Sep 13, 2022

Uh oh!

github-actions bot commented Sep 13, 2022

Uh oh!

gwyneplaine commented Sep 13, 2022

Uh oh!

github-actions bot commented Sep 13, 2022

Uh oh!

gwyneplaine commented Sep 14, 2022

Uh oh!

github-actions bot commented Sep 14, 2022

Uh oh!

gwyneplaine commented Sep 15, 2022

Uh oh!

github-actions bot commented Sep 15, 2022

Uh oh!

gwyneplaine commented Sep 16, 2022

Uh oh!

github-actions bot commented Sep 16, 2022

Uh oh!

gwyneplaine commented Sep 16, 2022

Uh oh!

github-actions bot commented Sep 16, 2022

Uh oh!

jesstelford commented Sep 16, 2022

Uh oh!

github-actions bot commented Sep 16, 2022

Uh oh!

gwyneplaine commented Sep 20, 2022

Uh oh!

github-actions bot commented Sep 20, 2022

Uh oh!

gwyneplaine commented Sep 26, 2022

Uh oh!

github-actions bot commented Sep 26, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

gwyneplaine commented Aug 26, 2022 •

edited

Loading

github-actions bot commented Aug 26, 2022 •

edited

Loading