Chore: 1.0.6

Author: juzser

.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.20.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.20.0) - Migrated date: *Jul 12th, 2022*.
+**Follow Polaris React version:** [9.23.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.23.1) - Migrated date: *Aug 18th, 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.20.0](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.20.0) - Migrated date: *Jul 12th, 2022*.
+**Follow Polaris React version:** [9.23.1](https://github.com/Shopify/polaris/releases/tag/%40shopify%2Fpolaris%409.23.1) - Migrated date: *Aug 18th, 2022*.
 
 <br/>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "1.0.5",
-  "polaris_version": "9.20.0",
+  "version": "1.0.6",
+  "polaris_version": "9.23.1",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": "Ownego Team",
   "keywords": [
@@ -35,15 +35,16 @@
     "remove-trashes": "rimraf dist/index.html dist/favicon.ico dist/images"
   },
   "dependencies": {
-    "@shopify/polaris-icons": "^5.2.0",
+    "@shopify/polaris-icons": "^5.4.0",
+    "polaris": "https://github.com/juzser/polaris.git",
     "vite-svg-loader": "^3.1.2",
     "vue": "^3.2.31",
     "vue-router": "^3.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
     "@rushstack/eslint-patch": "^1.1.0",
-    "@shopify/polaris-tokens": "^5.5.0",
+    "@shopify/polaris-tokens": "^5.5.1",
     "@shopify/typescript-configs": "^5.1.0",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",
@@ -67,7 +68,6 @@
     "fs-extra": "^10.1.0",
     "hash-generator": "^0.1.0",
     "path": "^0.12.7",
-    "polaris": "https://github.com/juzser/polaris.git",
     "postcss": "^7",
     "postcss-modules": "^3",
     "prettier": "^2.5.1",

src/classes/DataTable.json

@@ -1 +1 @@
-{"DataTable":"Polaris-DataTable","condensed":"Polaris-DataTable--condensed","Navigation":"Polaris-DataTable__Navigation","IncreasedTableDensity":"Polaris-DataTable__IncreasedTableDensity","Pip":"Polaris-DataTable__Pip","Pip-visible":"Polaris-DataTable__Pip--visible","ScrollContainer":"Polaris-DataTable__ScrollContainer","Table":"Polaris-DataTable__Table","TableRow":"Polaris-DataTable__TableRow","Cell":"Polaris-DataTable__Cell","ZebraStripingOnData":"Polaris-DataTable__ZebraStripingOnData","RowCountIsEven":"Polaris-DataTable__RowCountIsEven","ShowTotalsInFooter":"Polaris-DataTable__ShowTotalsInFooter","Cell-firstColumn":"Polaris-DataTable__Cell--firstColumn","Cell-numeric":"Polaris-DataTable__Cell--numeric","Cell-truncated":"Polaris-DataTable__Cell--truncated","Cell-header":"Polaris-DataTable__Cell--header","Cell-sortable":"Polaris-DataTable__Cell--sortable","Heading-left":"Polaris-DataTable__Heading--left","Cell-verticalAlignTop":"Polaris-DataTable__Cell--verticalAlignTop","Cell-verticalAlignBottom":"Polaris-DataTable__Cell--verticalAlignBottom","Cell-verticalAlignMiddle":"Polaris-DataTable__Cell--verticalAlignMiddle","Cell-verticalAlignBaseline":"Polaris-DataTable__Cell--verticalAlignBaseline","hoverable":"Polaris-DataTable--hoverable","Cell-hovered":"Polaris-DataTable__Cell--hovered","Icon":"Polaris-DataTable__Icon","Heading":"Polaris-DataTable__Heading","StickyHeaderEnabled":"Polaris-DataTable__StickyHeaderEnabled","StickyTable":"Polaris-DataTable__StickyTable","Cell-sorted":"Polaris-DataTable__Cell--sorted","Cell-total":"Polaris-DataTable__Cell--total","ShowTotals":"Polaris-DataTable__ShowTotals","Cell-total-footer":"Polaris-DataTable--cellTotalFooter","Footer":"Polaris-DataTable__Footer","StickyTableHeader":"Polaris-DataTable__StickyTableHeader","StickyTableHeader-isSticky":"Polaris-DataTable__StickyTableHeader--isSticky","StickyTableColumnHeader-isScrolling":"Polaris-DataTable__StickyTableColumnHeader--isScrolling","StickyTableHeadingsRow":"Polaris-DataTable__StickyTableHeadingsRow","FixedFirstColumn":"Polaris-DataTable__FixedFirstColumn","separate":"Polaris-DataTable--separate","TooltipContent":"Polaris-DataTable__TooltipContent"}
+{"DataTable":"Polaris-DataTable","condensed":"Polaris-DataTable--condensed","Navigation":"Polaris-DataTable__Navigation","IncreasedTableDensity":"Polaris-DataTable__IncreasedTableDensity","Pip":"Polaris-DataTable__Pip","Pip-visible":"Polaris-DataTable__Pip--visible","ScrollContainer":"Polaris-DataTable__ScrollContainer","Table":"Polaris-DataTable__Table","TableRow":"Polaris-DataTable__TableRow","Cell":"Polaris-DataTable__Cell","ZebraStripingOnData":"Polaris-DataTable__ZebraStripingOnData","RowCountIsEven":"Polaris-DataTable__RowCountIsEven","ShowTotalsInFooter":"Polaris-DataTable__ShowTotalsInFooter","Cell-firstColumn":"Polaris-DataTable__Cell--firstColumn","Cell-numeric":"Polaris-DataTable__Cell--numeric","Cell-truncated":"Polaris-DataTable__Cell--truncated","Cell-header":"Polaris-DataTable__Cell--header","Cell-sortable":"Polaris-DataTable__Cell--sortable","Heading-left":"Polaris-DataTable__Heading--left","Cell-verticalAlignTop":"Polaris-DataTable__Cell--verticalAlignTop","Cell-verticalAlignBottom":"Polaris-DataTable__Cell--verticalAlignBottom","Cell-verticalAlignMiddle":"Polaris-DataTable__Cell--verticalAlignMiddle","Cell-verticalAlignBaseline":"Polaris-DataTable__Cell--verticalAlignBaseline","hoverable":"Polaris-DataTable--hoverable","Cell-hovered":"Polaris-DataTable__Cell--hovered","Icon":"Polaris-DataTable__Icon","Heading":"Polaris-DataTable__Heading","StickyHeaderEnabled":"Polaris-DataTable__StickyHeaderEnabled","StickyHeaderWrapper":"Polaris-DataTable__StickyHeaderWrapper","Cell-sorted":"Polaris-DataTable__Cell--sorted","Cell-total":"Polaris-DataTable__Cell--total","ShowTotals":"Polaris-DataTable__ShowTotals","Cell-total-footer":"Polaris-DataTable--cellTotalFooter","Footer":"Polaris-DataTable__Footer","StickyHeaderInner":"Polaris-DataTable__StickyHeaderInner","StickyHeaderInner-isSticky":"Polaris-DataTable__StickyHeaderInner--isSticky","StickyHeaderTable":"Polaris-DataTable__StickyHeaderTable","StickyTableColumnHeader-isScrolling":"Polaris-DataTable__StickyTableColumnHeader--isScrolling","StickyTableHeadingsRow":"Polaris-DataTable__StickyTableHeadingsRow","FixedFirstColumn":"Polaris-DataTable__FixedFirstColumn","separate":"Polaris-DataTable--separate","TooltipContent":"Polaris-DataTable__TooltipContent"}

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","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-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"}

src/classes/Link.json

@@ -1 +1 @@
-{"Link":"Polaris-Link","IconLockup":"Polaris-Link__IconLockup","IconLayout":"Polaris-Link__IconLayout","monochrome":"Polaris-Link--monochrome","removeUnderline":"Polaris-Link--removeUnderline"}
+{"Link":"Polaris-Link","monochrome":"Polaris-Link--monochrome","removeUnderline":"Polaris-Link--removeUnderline"}

src/classes/TruncatedText.json

@@ -0,0 +1 @@
+{"Truncate":"Polaris-TruncatedText__Truncate"}

src/components/ActionMenu/components/SecondaryAction/SecondaryAction.vue

@@ -3,15 +3,35 @@ span(
   :class="className",
   ref="secondaryActionsRef",
 )
-  Button(@click="$emit('click')", v-bind="props")
+  Tooltip(
+    v-if="helpText || hasSlot(slots.helpText)",
+    :content="helpText || ''",
+  )
+    template(
+      v-if="hasSlot(slots.helpText)",
+      #content,
+    )
+      slot(name="helpText")
+
+    Button(
+      v-bind="props",
+      @click="$emit('click')",
+    )
+      slot
+  Button(
+    v-else,
+    v-bind="props",
+    @click="$emit('click')",
+  )
     slot
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, useSlots } from 'vue';
 import { classNames } from 'polaris/polaris-react/src/utilities/css';
 import styles from '@/classes/ActionMenu-SecondaryAction.json';
-import { Button } from '@/components';
+import { Button, Tooltip } from '@/components';
+import { hasSlot } from '@/utilities/has-slot';
 import type { IconSource } from '@/utilities/type';
 import type { ConnectedDisclosure } from '@/components/Button/utils';
 
@@ -31,6 +51,7 @@ interface ButtonProps {
   ariaDescribedBy?: string;
   primary?: boolean;
   destructive?: boolean;
+  helpText?: string;
   size?: 'slim' | 'medium' | 'large';
   textAlign?: 'left' | 'right' | 'center';
   outline?: boolean;
@@ -52,6 +73,8 @@ const emits = defineEmits<{
 
 const secondaryActionsRef = ref<HTMLSpanElement | null>(null);
 
+const slots = useSlots();
+
 const className = computed(() => {
   return classNames(
     styles.SecondaryAction,

src/components/Banner/Banner.vue

@@ -69,7 +69,7 @@ div(
             UnstyledButton(
               v-else,
               :class="styles.SecondaryAction",
-              @click="secondaryAction.onAction",
+              @click="secondaryAction && secondaryAction.onAction",
             )
               span(:class="styles.Text") {{ secondaryAction.content }}
 </template>

src/components/Button/Button.vue

@@ -17,11 +17,12 @@ div(
       button(
         type="button",
         :class="connectedDisclosureClassName",
-        :disabled="connectedDisclosureData.disabled",
+        :aria-disabled="connectedDisclosureData.disabled",
+        :tabIndex="connectedDisclosureData.disabled ? -1 : undefined"
         :aria-label="connectedDisclosureData.disclosureLabel",
         :aria-describedby="ariaDescribedBy",
         :aria-checked="ariaChecked",
-        @click="toggleDisclosureActive",
+        @click="handleClick",
         @mouseup="handleMouseUpByBlurring",
       )
         span
@@ -57,6 +58,7 @@ import { classNames, variationName } from 'polaris/polaris-react/src/utilities/c
 import CaretDownMinor from '@icons/CaretDownMinor.svg';
 import { handleMouseUpByBlurring } from '@/utilities/focus';
 import { capitalize } from '@/utilities/capitalize';
+import { useDisableClick } from '@/utilities/use-disable-interaction';
 import type { IconSource } from '@/utilities/type';
 import styles from '@/classes/Button.json';
 import type { ConnectedDisclosure } from './utils';
@@ -282,6 +284,7 @@ const toggleDisclosureActive = () => {
   disclosureActive.value = !disclosureActive.value;
 };
 
+const handleClick = useDisableClick(connectedDisclosureData.value.disabled, toggleDisclosureActive);
 </script>
 
 <style lang="scss">