Merge remote-tracking branch 'origin/dev'

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ownego/polaris-vue",
-  "version": "1.0.2",
-  "polaris_version": "9.19.0",
+  "version": "1.0.3",
+  "polaris_version": "9.20.0",
   "description": "Shopify Polaris UI library for Vue 3",
   "author": "Ownego Team",
   "keywords": [
@@ -35,15 +35,15 @@
     "remove-trashes": "rimraf dist/index.html dist/favicon.ico dist/images"
   },
   "dependencies": {
-    "@shopify/polaris-icons": "^4.23.0",
+    "@shopify/polaris-icons": "^5.0.0",
     "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.4.0",
+    "@shopify/polaris-tokens": "^5.5.0",
     "@shopify/typescript-configs": "^5.1.0",
     "@storybook/addon-a11y": "^6.5.5",
     "@storybook/addon-actions": "^6.5.5",

src/components/AppProvider/AppProvider.vue

@@ -10,7 +10,7 @@ import { provide, ref, onMounted, watch } 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 'polaris/polaris-react/src/utilities/breakpoints';
+import { navigationBarCollapsed } from '@/utilities/breakpoints';
 import { I18n } from '@/utilities/i18n';
 import lang from 'polaris/polaris-react/locales/en.json';
 import { EventListener, CustomProperties } from '@/components';

src/components/Button/Button.vue

@@ -148,6 +148,8 @@ interface Props {
    * Disclosure button connected right of the button. Toggles a popover action list.
    */
   connectedDisclosure?: ConnectedDisclosure;
+  /** Indicates whether or not the button is the primary navigation link when rendered inside of an `IndexTable.Row` */
+  dataPrimaryLink?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -226,7 +228,12 @@ const commonProps = computed(() => {
     id, accessibilityLabel, role, ariaDescribedBy,
   } = props;
   return {
-    id, class: className.value, accessibilityLabel, role, ariaDescribedBy,
+    id,
+    class: className.value,
+    accessibilityLabel,
+    role,
+    ariaDescribedBy,
+    'data-primary-link': props.dataPrimaryLink,
   };
 });
 

src/components/Card/README.stories.mdx

@@ -33,8 +33,7 @@ export const TemplateSimple = (args) => ({
   components: { Card },
   setup() { return { args }; },
   template: `
-    <Card sectioned :actions="[{content: 'Add variant'}]">
-      <template #title>Variants</template>
+    <Card sectioned title="Variants" :actions="[{content: 'Add variant'}]">
       <p>Add variants if this product comes in multiple versions, like different sizes or colors.</p>
     </Card>
   `,
@@ -162,8 +161,7 @@ Cards are used to group similar concepts and tasks together to make Shopify easi
         source: {
           state: 'close',
           code: dedent`
-            <Card sectioned :actions="[{content: 'Add variant'}]">
-              <template #title>Variants</template>
+            <Card sectioned title="Variants" :actions="[{content: 'Add variant'}]">
               <p>Add variants if this product comes in multiple versions, like different sizes or colors.</p>
             </Card>`,
         },

src/components/Checkbox/Checkbox.vue

@@ -7,10 +7,12 @@ Choice(
   @mouseover="mouseOver = true",
   @mouseout="mouseOver = false",
 )
-  template(#label, v-if="slots.label")
-    slot(name="label")
-  template(#help-text, v-if="slots['help-text']")
-    slot(name="help-text")
+  template(#label, v-if="slots.label || label")
+    slot(v-if="slots.label", name="label")
+    template(v-else) {{ label }}
+  template(#help-text, v-if="slots['help-text'] || helpText")
+    slot(v-if="slots['help-text']", name="help-text")
+    template(v-else) {{ helpText }}
   span(:class="wrapperClassName")
     input(
       :id="uniqueId",
@@ -58,10 +60,14 @@ interface Props {
   ariaControls?: string;
   /** Indicates the ID of the element that describes the checkbox */
   ariaDescribedBy?: string;
+  /** Label for the checkbox. This will be overriden by `label` slot. */
+  label?: string;
   /** Visually hide the label */
   labelHidden?: boolean;
   /** Checkbox is selected. `indeterminate` shows a horizontal line in the checkbox */
   checked?: boolean | 'indeterminate';
+  /** Additional text to aide in use.This will be overriden by `help-text` slot. */
+  helpText?: string;
   /** Disable input */
   disabled?: boolean;
   /** ID for form input */

src/components/Checkbox/README.stories.mdx

@@ -49,6 +49,19 @@ import { Checkbox } from '@/polaris-vue';
         },
       },
     },
+    propLabel: {
+      name: 'label',
+      description: 'Label for the checkbox. This will be overriden by `label` slot.',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
     modelValue: {
       description: 'v-model is available for this component, string type should be used with multiple checkbox',
       control: {
@@ -116,15 +129,17 @@ export const Template = (args) => ({
   setup() { return { args }; },
   template: `
   <div>
+    <Checkbox label="Basic Label" helpText="Basic help text" v-model="checkboxValue"/>
     <Checkbox v-bind="args" v-model="isChecked">
-      <template #label>Checkbox label</template>
-      <template #help-text>Basic help text</template>
+      <template #label>Dynamic checkbox label</template>
+      <template #help-text>Dynamic help text</template>
     </Checkbox>
     <p style="margin-top: 30px">Checked: {{ isChecked }} </p>
   </div>`,
   data() {
     return {
       isChecked: false,
+      checkboxValue: false,
     };
   },
 });
@@ -133,9 +148,10 @@ Template.parameters = {
     source: {
       code: dedent`
         <div>
+          <Checkbox label="Basic Label" helpText="Basic help text" v-model="checkboxValue"/>
           <Checkbox v-model="isChecked">
-            <template #label>Checkbox label</template>
-            <template #help-text>Basic help text</template>
+            <template #label>Dynamic checkbox label</template>
+            <template #help-text>Dynamic help text</template>
           </Checkbox>
           <p>Checked: {{ isChecked }} </p>
         </div>

src/components/Choice/Choice.vue

@@ -9,14 +9,16 @@ div(v-if="error && typeof error !== 'boolean' || $slots['help-text']")
     span(:class="styles.Control")
       slot
     span(:class="styles.Label")
-      slot(name="label")
+      slot(v-if="$slots.label", name="label")
+      template(v-else-if="label") {{ label }}
   div(:class="styles.Descriptions")
     div(
-      v-if="$slots['help-text']",
+      v-if="$slots['help-text'] || helpText",
       :id="helpTextID(id)",
       :class="styles.HelpText",
     )
-      slot(name="help-text")
+      slot(v-if="$slots['help-text']", name="help-text")
+      template(v-else) {{ helpText }}
     InlineError(
       v-if="(error && typeof error !== 'boolean')",
       :fieldID="id",
@@ -32,7 +34,8 @@ label(
   span(:class="styles.Control")
     slot
   span(:class="styles.Label")
-    slot(name="label")
+    slot(v-if="$slots.label", name="label")
+    template(v-else-if="label") {{ label }}
 </template>
 
 <script setup lang="ts">
@@ -46,12 +49,16 @@ import { InlineError } from '../InlineError';
 interface Props {
   /** A unique identifier for the choice */
   id: string;
+  /**	Label for the choice */
+  label?: string;
   /** Whether the associated form control is disabled */
   disabled?: boolean;
   /** Display an error message */
   error?: Error;
   /** Visually hide the label */
   labelHidden?: boolean;
+  /** Additional text to aide in use */
+  helpText?: string;
 }
 
 const props = defineProps<Props>();

src/components/Combobox/components/TextField/TextField.vue

@@ -9,6 +9,10 @@ PolarisTextField(
   :ariaActiveDescendant="activeOptionId",
   :ariaControls="listboxId",
   :ariaExpanded="expanded",
+  :label="label",
+  :helpText="helpText",
+  :suffix="suffix",
+  :prefix="prefix",
   @focus="handleFocus",
   @blur="handleBlur",
   @change="handleChange",
@@ -70,6 +74,14 @@ interface TextFieldProps {
   placeholder?: string;
   /** Initial value for the input */
   modelValue?: string;
+  /** Text to display before value */
+  prefix?: string;
+  /** Text to display after value */
+  suffix?: string;
+  /** Additional hint text to display */
+  helpText?: string;
+  /** Label for the input */
+  label?: string;
   /** Adds an action to the label */
   labelAction?: LabelledProps['action'];
   /** Visually hide the label */