Migrate: 10.0.0 & fix minor bugs

Author: juzser

.postcssrc.js

@@ -10,7 +10,7 @@ module.exports = {
       generateScopedName: classConfig,
       getJSON: (cssFileName, json) => {
         /* Ignore generate common polaris tokens style file */
-        if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1 || cssFileName.indexOf('CustomProperties') !== -1) {
+        if (cssFileName.indexOf('@shopify/polaris-tokens') !== -1) {
           return;
         }
 

.storybook/stories/GetStarted.stories.mdx

@@ -24,7 +24,7 @@ import { Meta } from '@storybook/addon-docs';
 
 Polaris Vue by Ownego is a component library for [Vue 3](https://vuejs.org/) based on [Shopify Polaris style guide](https://polaris.shopify.com/). We try to keep the package light-weight and easy to use (mostly similar with original Polaris Library).
 
-**Follow Polaris React version:** [9.23.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.23.1) - Migrated date: *Aug 18th, 2022*.
+**Follow Polaris React version:** [10.0.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.0.0) - Migrated date: *Aug 27th, 2022*.
 
 <a href="https://github.com/ownego/polaris-vue"><img src="https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" alt="Github"/></a>
 

README.md

@@ -5,7 +5,7 @@ Polaris Vue by Ownego only supports **Vue 3.0+**.
 Polaris Vue based on [Shopify Polaris style guide](https://polaris.shopify.com/), built especially for Vue 3.
 We're trying to make it mostly close with Shopify style guide and get a better performance.
 
-**Follow Polaris React version:** [9.23.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.23.1) - Migrated date: *Aug 18th, 2022*.
+**Follow Polaris React version:** [10.0.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%4010.0.0) - Migrated date: *Aug 27th, 2022*.
 
 <br/>
 

build/namespaced-classname.js

@@ -11,7 +11,7 @@ const NESTED_COMPONENT_PATH_REGEX = /.*\/components\/(.*)\/components/;
 const scopedHashes = {};
 
 module.exports = function generateScopedName(name, filename, css) {
-  if (filename.includes('@shopify/polaris-tokens') || filename.includes('CustomProperties')) {
+  if (filename.includes('@shopify/polaris-tokens')) {
     return name;
   }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ownego/polaris-vue",
   "version": "1.0.0",
-  "polaris_version": "9.23.1",
+  "polaris_version": "10.0.0",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": {
     "name": "Ownego Team"
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@rushstack/eslint-patch": "^1.1.0",
-    "@shopify/polaris-tokens": "^5.5.1",
+    "@shopify/polaris-tokens": "^6.0.0",
     "@shopify/typescript-configs": "^5.1.0",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",

src/classes/IndexTable.json

@@ -1 +1 @@
-{"IndexTable":"Polaris-IndexTable","LoadingContainer-enter":"Polaris-IndexTable__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTable--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTable__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTable--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTable__LoadingPanel","LoadingPanelRow":"Polaris-IndexTable__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTable__LoadingPanelText","Table":"Polaris-IndexTable__Table","Table-scrolling":"Polaris-IndexTable__Table--scrolling","TableCell-first":"Polaris-IndexTable__TableCell--first","TableCell":"Polaris-IndexTable__TableCell","TableHeading-first":"Polaris-IndexTable__TableHeading--first","TableHeading-second":"Polaris-IndexTable__TableHeading--second","Table-unselectable":"Polaris-IndexTable__Table--unselectable","TableRow":"Polaris-IndexTable__TableRow","TableRow-unclickable":"Polaris-IndexTable__TableRow--unclickable","statusSuccess":"Polaris-IndexTable--statusSuccess","statusSubdued":"Polaris-IndexTable--statusSubdued","TableRow-hovered":"Polaris-IndexTable__TableRow--hovered","TableRow-selected":"Polaris-IndexTable__TableRow--selected","TableRow-subdued":"Polaris-IndexTable__TableRow--subdued","TableRow-disabled":"Polaris-IndexTable__TableRow--disabled","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","ColumnHeaderCheckboxWrapper":"Polaris-IndexTable__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTable__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTable__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTable__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTable--tableStickyScrolling","TableHeading-last":"Polaris-IndexTable__TableHeading--last","Table-sticky-last":"Polaris-IndexTable--tableStickyLast","StickyTable":"Polaris-IndexTable__StickyTable","StickyTableHeader":"Polaris-IndexTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTable__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTable__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTable__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTable__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTable__StickyTableHeading--second","unselectable":"Polaris-IndexTable--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTable--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTable__ScrollLeft","ScrollRight":"Polaris-IndexTable__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTable__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTable__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTable__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTable--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTable--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTable__ScrollBar","disableTextSelection":"Polaris-IndexTable--disableTextSelection","selectMode":"Polaris-IndexTable--selectMode","EmptySearchResultWrapper":"Polaris-IndexTable__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTable--condensedRow","CondensedList":"Polaris-IndexTable__CondensedList","HeaderWrapper":"Polaris-IndexTable__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTable__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTable__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTable__ScrollBarContent"}
+{"IndexTable":"Polaris-IndexTable","LoadingContainer-enter":"Polaris-IndexTable__LoadingContainer--enter","LoadingContainer-enter-active":"Polaris-IndexTable--loadingContainerEnterActive","LoadingContainer-exit":"Polaris-IndexTable__LoadingContainer--exit","LoadingContainer-exit-active":"Polaris-IndexTable--loadingContainerExitActive","LoadingPanel":"Polaris-IndexTable__LoadingPanel","LoadingPanelRow":"Polaris-IndexTable__LoadingPanelRow","LoadingPanelText":"Polaris-IndexTable__LoadingPanelText","Table":"Polaris-IndexTable__Table","Table-scrolling":"Polaris-IndexTable__Table--scrolling","TableCell-first":"Polaris-IndexTable__TableCell--first","TableCell":"Polaris-IndexTable__TableCell","TableHeading-first":"Polaris-IndexTable__TableHeading--first","TableHeading-second":"Polaris-IndexTable__TableHeading--second","Table-unselectable":"Polaris-IndexTable__Table--unselectable","TableRow":"Polaris-IndexTable__TableRow","TableRow-unclickable":"Polaris-IndexTable__TableRow--unclickable","statusSuccess":"Polaris-IndexTable--statusSuccess","statusSubdued":"Polaris-IndexTable--statusSubdued","TableRow-hovered":"Polaris-IndexTable__TableRow--hovered","TableRow-selected":"Polaris-IndexTable__TableRow--selected","TableRow-subdued":"Polaris-IndexTable__TableRow--subdued","TableRow-disabled":"Polaris-IndexTable__TableRow--disabled","TableHeading":"Polaris-IndexTable__TableHeading","TableHeading-sortable":"Polaris-IndexTable__TableHeading--sortable","TableHeading-flush":"Polaris-IndexTable__TableHeading--flush","TableHeadingSortButton":"Polaris-IndexTable__TableHeadingSortButton","TableHeadingSortIcon":"Polaris-IndexTable__TableHeadingSortIcon","TableHeadingSortIcon-visible":"Polaris-IndexTable__TableHeadingSortIcon--visible","ColumnHeaderCheckboxWrapper":"Polaris-IndexTable__ColumnHeaderCheckboxWrapper","FirstStickyHeaderElement":"Polaris-IndexTable__FirstStickyHeaderElement","TableHeading-unselectable":"Polaris-IndexTable__TableHeading--unselectable","TableCell-flush":"Polaris-IndexTable__TableCell--flush","Table-sticky-scrolling":"Polaris-IndexTable--tableStickyScrolling","TableHeading-last":"Polaris-IndexTable__TableHeading--last","Table-sticky-last":"Polaris-IndexTable--tableStickyLast","StickyTable":"Polaris-IndexTable__StickyTable","StickyTableHeader":"Polaris-IndexTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-IndexTable__StickyTableHeader--isSticky","StickyTableColumnHeader":"Polaris-IndexTable__StickyTableColumnHeader","StickyTableColumnHeader-isScrolling":"Polaris-IndexTable__StickyTableColumnHeader--isScrolling","StickyTableHeadings":"Polaris-IndexTable__StickyTableHeadings","StickyTableHeading-second":"Polaris-IndexTable__StickyTableHeading--second","unselectable":"Polaris-IndexTable--unselectable","StickyTableHeading-second-scrolling":"Polaris-IndexTable--stickyTableHeadingSecondScrolling","ScrollLeft":"Polaris-IndexTable__ScrollLeft","ScrollRight":"Polaris-IndexTable__ScrollRight","ScrollRight-onboarding":"Polaris-IndexTable__ScrollRight--onboarding","BulkActionsWrapper":"Polaris-IndexTable__BulkActionsWrapper","ScrollBarContainer":"Polaris-IndexTable__ScrollBarContainer","scrollBarContainerCondensed":"Polaris-IndexTable--scrollBarContainerCondensed","scrollBarContainerHidden":"Polaris-IndexTable--scrollBarContainerHidden","ScrollBar":"Polaris-IndexTable__ScrollBar","disableTextSelection":"Polaris-IndexTable--disableTextSelection","selectMode":"Polaris-IndexTable--selectMode","EmptySearchResultWrapper":"Polaris-IndexTable__EmptySearchResultWrapper","condensedRow":"Polaris-IndexTable--condensedRow","CondensedList":"Polaris-IndexTable__CondensedList","HeaderWrapper":"Polaris-IndexTable__HeaderWrapper","StickyTable-condensed":"Polaris-IndexTable__StickyTable--condensed","StickyTableHeader-condensed":"Polaris-IndexTable__StickyTableHeader--condensed","ScrollBarContent":"Polaris-IndexTable__ScrollBarContent"}

src/classes/InlineCode.json

@@ -0,0 +1 @@
+{"Code":"Polaris-InlineCode__Code"}

src/classes/Text.json

@@ -0,0 +1 @@
+{"root":"Polaris-Text--root","block":"Polaris-Text--block","truncate":"Polaris-Text--truncate","visuallyHidden":"Polaris-Text--visuallyHidden","start":"Polaris-Text--start","center":"Polaris-Text--center","end":"Polaris-Text--end","justify":"Polaris-Text--justify","success":"Polaris-Text--success","critical":"Polaris-Text--critical","warning":"Polaris-Text--warning","subdued":"Polaris-Text--subdued","regular":"Polaris-Text--regular","medium":"Polaris-Text--medium","semibold":"Polaris-Text--semibold","bold":"Polaris-Text--bold","headingXs":"Polaris-Text--headingXs","headingSm":"Polaris-Text--headingSm","headingMd":"Polaris-Text--headingMd","headingLg":"Polaris-Text--headingLg","headingXl":"Polaris-Text--headingXl","heading2xl":"Polaris-Text--heading2xl","heading3xl":"Polaris-Text--heading3xl","heading4xl":"Polaris-Text--heading4xl","bodySm":"Polaris-Text--bodySm","bodyMd":"Polaris-Text--bodyMd","bodyLg":"Polaris-Text--bodyLg"}

src/components/AppProvider/AppProvider.vue

@@ -1,31 +1,24 @@
 <template lang="pug">
-CustomProperties(:color-scheme="colorScheme")
+.polaris-app-provider
   EventListener(event="resize", :handler="handleResize")
   slot
   #PolarisPortalsContainer
+  component(is="style") {{ style }}
 </template>
 
 <script setup lang="ts">
-import { provide, ref, onMounted, watch } from 'vue';
+import { provide, ref, onMounted } from 'vue';
 import { debounce } from 'polaris/polaris-react/src/utilities/debounce';
 import { ScrollLockManager } from 'polaris/polaris-react/src/utilities/scroll-lock-manager/scroll-lock-manager';
 import { UniqueIdFactory, globalIdGeneratorFactory } from 'polaris/polaris-react/src/utilities/unique-id/unique-id-factory';
 import { navigationBarCollapsed } from '@/utilities/breakpoints';
 import { I18n } from '@/utilities/i18n';
 import lang from 'polaris/polaris-react/locales/en.json';
-import { EventListener, CustomProperties } from '@/components';
+import { EventListener } from '@/components';
 import { PortalManager } from '@/utilities/portal-manager';
 import { FocusManager } from '@/utilities/focus-manager';
 import { StickyManager } from '@/utilities/sticky-manager';
-import type { CustomPropertiesProps } from '../CustomProperties/utils';
-import { DEFAULT_COLOR_SCHEME } from '../CustomProperties/utils';
-
-const props = defineProps({
-  colorScheme: {
-    type: String as () => CustomPropertiesProps['colorScheme'],
-    default: DEFAULT_COLOR_SCHEME,
-  },
-});
+import style from '@shopify/polaris-tokens/css/styles.css?raw';
 
 const stickyManager = new StickyManager();
 
@@ -42,7 +35,6 @@ const isNavigationCollapsed = ref(navigationBarCollapsed().matches);
 const setBodyStyles = () => {
   // Inlining the following custom properties to maintain backward
   // compatibility with the legacy ThemeProvider implementation.
-  document.body.setAttribute('p-color-scheme', props.colorScheme || DEFAULT_COLOR_SCHEME);
   document.body.style.backgroundColor = 'var(--p-background)';
   document.body.style.color = 'var(--p-text)';
 };
@@ -57,15 +49,6 @@ const handleResize = debounce(
   {trailing: true, leading: true, maxWait: 40},
 );
 
-watch(
-  () => props.colorScheme,
-  (newColorScheme: CustomPropertiesProps['colorScheme'], oldColorScheme: CustomPropertiesProps['colorScheme']) => {
-    if (newColorScheme !== oldColorScheme) {
-      setBodyStyles();
-    }
-  },
-);
-
 onMounted(() => {
   if (document !== null) {
     setBodyStyles();

src/components/Autocomplete/Autocomplete.vue

@@ -171,6 +171,11 @@ const isShowEmptyState = computed(() => {
 });
 
 const updateSelection = (newSelection: string) => {
+  if (props.actionBefore && newSelection === props.actionBefore.content) {
+    props.actionBefore.onAction && props.actionBefore.onAction();
+    return;
+  }
+
   if (props.allowMultiple) {
     if (props.modelValue.includes(newSelection)) {
       emits('select', props.modelValue.filter((option) => option !== newSelection));