add summer editions 2023 feature flag to AppProvider FeaturesContext #9227

gwyneplaine · 2023-05-17T01:41:44Z

WHY are these changes introduced?

Feature flag needed for rollout.
Resolves https://github.com/Shopify/polaris-summer-editions/issues/33
Resolves https://github.com/Shopify/polaris-summer-editions/issues/32

WHAT is this pull request doing?

Add documented feature flag to AppProvider FeaturesContext.
Add explicit type (for better DX).
Add storybook story for QA
Add addon-panel widget to storybook for toggling feature flag for stories.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 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

gwyneplaine · 2023-05-17T04:09:55Z

polaris-react/src/utilities/features/types.ts

@@ -1,5 +1,6 @@
 export interface FeaturesConfig {
-  [key: string]: boolean;


explicit summer_editions boolean add to FeaturesConfig type for dx

gwyneplaine · 2023-05-17T04:10:33Z

polaris-react/tests/utilities/listbox.tsx

      return (
-        <PolarisTestProvider
-          i18n={translations}
-          features={{newDesignLanguage: true}}


not sure why this is still here since this was something we removed in v6 (afaik from the docs)

github-actions · 2023-05-17T04:14:47Z

size-limit report 📦

Path	Size
polaris-react-cjs	242.91 KB (+0.01% 🔺)
polaris-react-esm	157.21 KB (+0.01% 🔺)
polaris-react-esnext	219.68 KB (+0.01% 🔺)
polaris-react-css	47.45 KB (0%)

…rybook

gwyneplaine · 2023-05-17T04:54:25Z

Notably @alex-page it appears the useFeature hook is not presently exposed as an export of @shopify/polaris.
This is probably fine for 90% of our usecases for summer editions, but will mean any non polaris components that need access to the flag value won't be able to do so. If this is fine, we'll leave it. If its not fine, we can export it in this PR.

sophschneider · 2023-05-17T20:36:03Z

.changeset/khaki-eggs-shout.md

+'@shopify/polaris': patch
+---
+
+Add polaris_summer_editions_2023 feature flag to AppProvider context.


could we name this polarisSummerEditions2023 instead? if not eslint in Shopify/web gets mad (typescript-eslint/naming-convention)

Yes. The underscore approach is for the beta flag or feature flag.

polaris-react/src/utilities/features/types.ts

polaris-react/src/components/AppProvider/AppProvider.tsx

polaris-react/src/components/AppProvider/AppProvider.stories.tsx

polaris-react/.storybook/preview.js

sophschneider · 2023-05-17T22:01:15Z

@gwyneplaine It should be fine for consumers to control the feature flag via the AppProvider features prop, I don't think they would need the useFeature hook since they're the one providing the boolean!

Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

sophschneider

thanks for updating!

sophschneider · 2023-05-17T23:43:31Z

hmm I think the story is broken

gwyneplaine · 2023-05-18T01:37:37Z

hmm I think the story is broken

AppProvider story isn't wrapped in an AppProvider, which is why that global toggle doesn't work.
The point of that story is just a simple click test to make sure the feature flag is working 🎉

sophschneider · 2023-05-18T14:41:59Z

Thanks!!

sophschneider · 2023-05-18T14:58:13Z

hmm it doesnt work in any other story either. I think the features destructuring in the AppProvider is overriding everything

### WHY are these changes introduced? Fix `feature` -> `features` [typo](#9227) in the storybook AppProviderDecorator so the toggle works on all stories. Also removed the button toggle from the AppProvider summer editions story to avoid confusion between two toggle mechanisms ### How to 🎩 Toggle feature in control panel https://5d559397bae39100201eedc1-zlfuvdfzep.chromatic.com/?path=/story/all-components-appprovider--with-summer-editions-feature

…9227)  ### WHY are these changes introduced? Feature flag needed for rollout. Resolves Shopify/archive-polaris-backlog-2024#33 Resolves Shopify/archive-polaris-backlog-2024#32  ### WHAT is this pull request doing? * Add documented feature flag to AppProvider FeaturesContext. * Add explicit type (for better DX). * Add storybook story for QA * Add addon-panel widget to storybook for toggling feature flag for stories. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)  <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

### WHY are these changes introduced? Fix `feature` -> `features` [typo](#9227) in the storybook AppProviderDecorator so the toggle works on all stories. Also removed the button toggle from the AppProvider summer editions story to avoid confusion between two toggle mechanisms ### How to 🎩 Toggle feature in control panel https://5d559397bae39100201eedc1-zlfuvdfzep.chromatic.com/?path=/story/all-components-appprovider--with-summer-editions-feature

…9227)  ### WHY are these changes introduced? Feature flag needed for rollout. Resolves Shopify/archive-polaris-backlog-2024#33 Resolves Shopify/archive-polaris-backlog-2024#32  ### WHAT is this pull request doing? * Add documented feature flag to AppProvider FeaturesContext. * Add explicit type (for better DX). * Add storybook story for QA * Add addon-panel widget to storybook for toggling feature flag for stories. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)  <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

### WHY are these changes introduced? Fix `feature` -> `features` [typo](#9227) in the storybook AppProviderDecorator so the toggle works on all stories. Also removed the button toggle from the AppProvider summer editions story to avoid confusion between two toggle mechanisms ### How to 🎩 Toggle feature in control panel https://5d559397bae39100201eedc1-zlfuvdfzep.chromatic.com/?path=/story/all-components-appprovider--with-summer-editions-feature

…9227)  ### WHY are these changes introduced? Feature flag needed for rollout. Resolves Shopify/archive-polaris-backlog-2024#33 Resolves Shopify/archive-polaris-backlog-2024#32  ### WHAT is this pull request doing? * Add documented feature flag to AppProvider FeaturesContext. * Add explicit type (for better DX). * Add storybook story for QA * Add addon-panel widget to storybook for toggling feature flag for stories. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)  <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

### WHY are these changes introduced? Fix `feature` -> `features` [typo](#9227) in the storybook AppProviderDecorator so the toggle works on all stories. Also removed the button toggle from the AppProvider summer editions story to avoid confusion between two toggle mechanisms ### How to 🎩 Toggle feature in control panel https://5d559397bae39100201eedc1-zlfuvdfzep.chromatic.com/?path=/story/all-components-appprovider--with-summer-editions-feature

…9227)  ### WHY are these changes introduced? Feature flag needed for rollout. Resolves Shopify/archive-polaris-backlog-2024#33 Resolves Shopify/archive-polaris-backlog-2024#32  ### WHAT is this pull request doing? * Add documented feature flag to AppProvider FeaturesContext. * Add explicit type (for better DX). * Add storybook story for QA * Add addon-panel widget to storybook for toggling feature flag for stories. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)  <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

### WHY are these changes introduced? Fix `feature` -> `features` [typo](#9227) in the storybook AppProviderDecorator so the toggle works on all stories. Also removed the button toggle from the AppProvider summer editions story to avoid confusion between two toggle mechanisms ### How to 🎩 Toggle feature in control panel https://5d559397bae39100201eedc1-zlfuvdfzep.chromatic.com/?path=/story/all-components-appprovider--with-summer-editions-feature

…9227)  Feature flag needed for rollout. Resolves Shopify/archive-polaris-backlog-2024#33 Resolves Shopify/archive-polaris-backlog-2024#32  * Add documented feature flag to AppProvider FeaturesContext. * Add explicit type (for better DX). * Add storybook story for QA * Add addon-panel widget to storybook for toggling feature flag for stories. 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)  <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page} from '../src'; export function Playground() { return ( <Page title="Playground"> {/* Add the code you want to test in here */} </Page> ); } ``` </details> - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

gwyneplaine added 2 commits May 17, 2023 11:41

add summer editions 2023 feature flag to AppProvider FeaturesContext

3eb9de4

fix types and outdated props in test utilities

3ac261e

gwyneplaine commented May 17, 2023

View reviewed changes

gwyneplaine added 3 commits May 17, 2023 14:37

add toggle and GUI panel for summer editions 2023 feature flag in sto…

35ad2d9

…rybook

fix story oopsies

769d451

changeset

437f802

gwyneplaine requested a review from alex-page May 17, 2023 04:53

naming is hard

8f5fcab

jesstelford approved these changes May 17, 2023

View reviewed changes

fix lint error

ebce345

sophschneider reviewed May 17, 2023

View reviewed changes

gwyneplaine and others added 5 commits May 18, 2023 09:02

Update polaris-react/src/utilities/features/types.ts

6e43b47

Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

Update polaris-react/.storybook/preview.js

2c3a5a8

Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

Update polaris-react/.storybook/preview.js

31a7c6f

Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

Update polaris-react/src/components/AppProvider/AppProvider.stories.tsx

9bc7ae3

Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

Update polaris-react/src/components/AppProvider/AppProvider.tsx

fd6d7bd

Co-authored-by: Sophie Schneider <sophie.schneider@shopify.com>

gwyneplaine requested a review from sophschneider May 17, 2023 23:10

update polaris_summer_Editions_2023 flag to be pascal case

a337e0f

sophschneider approved these changes May 17, 2023

View reviewed changes

alex-page approved these changes May 18, 2023

View reviewed changes

gwyneplaine merged commit 5d50fd7 into v11.x.x May 18, 2023

gwyneplaine deleted the clee/app-provider-feature-flag branch May 18, 2023 01:39

sophschneider mentioned this pull request May 18, 2023

[v11.x.x] Fix Storybook AppProviderDecorator #9233

Merged

This was referenced May 25, 2023

cards se23 #9277

Merged

fix app provider stories #9278

Merged

fix test runner #9279

Closed

add experimental colors #9280

Merged

		@@ -1,5 +1,6 @@
		export interface FeaturesConfig {
		[key: string]: boolean;

add summer editions 2023 feature flag to AppProvider FeaturesContext #9227

add summer editions 2023 feature flag to AppProvider FeaturesContext #9227

Uh oh!

Conversation

gwyneplaine commented May 17, 2023 • 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!

gwyneplaine May 17, 2023

Choose a reason for hiding this comment

Uh oh!

gwyneplaine May 17, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

gwyneplaine commented May 17, 2023

Uh oh!

sophschneider May 17, 2023

Choose a reason for hiding this comment

Uh oh!

alex-page May 17, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sophschneider commented May 17, 2023

Uh oh!

sophschneider left a comment

Choose a reason for hiding this comment

Uh oh!

sophschneider commented May 17, 2023

Uh oh!

gwyneplaine commented May 18, 2023

Uh oh!

sophschneider commented May 18, 2023

Uh oh!

sophschneider commented May 18, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gwyneplaine commented May 17, 2023 •

edited

Loading

github-actions bot commented May 17, 2023 •

edited

Loading

alex-page May 17, 2023 •

edited

Loading