Merge remote-tracking branch 'origin/master'

Author: juzser

src/components/Button/Button.vue

@@ -1,24 +1,25 @@
 <template lang="pug">
 div(
   v-if="connectedDisclosure",
-  :class="styles.ConnectedDisclosureWrapper"
+  :key="generateUpdateKey('connected')",
+  :class="styles.ConnectedDisclosureWrapper",
 )
   ButtonMarkup(
     v-bind="buttonMarkupProps",
     v-on="listeners",
   )
     slot
   Popover(
-    :active="disclosureActive",
     preferredAlignment="right",
+    :active="disclosureActive",
     @close="toggleDisclosureActive",
   )
     template(#activator)
       button(
         type="button",
         :class="connectedDisclosureClassName",
         :aria-disabled="connectedDisclosureData.disabled",
-        :tabIndex="connectedDisclosureData.disabled ? -1 : undefined"
+        :tabIndex="connectedDisclosureData.disabled ? -1 : undefined",
         :aria-label="connectedDisclosureData.disclosureLabel",
         :aria-describedby="ariaDescribedBy",
         :aria-checked="ariaChecked",
@@ -40,6 +41,7 @@ ButtonMarkup(
   v-else,
   v-bind="buttonMarkupProps",
   v-on="listeners",
+  :key="generateUpdateKey('markup')",
 )
   slot
 </template>
@@ -51,9 +53,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import {
-  computed, ref, useAttrs, useSlots,
-} from 'vue';
+import { computed, ref, useAttrs, useSlots } from 'vue';
 import { classNames, variationName } from '@/utilities/css';
 import CaretDownMinor from '@icons/CaretDownMinor.svg';
 import { handleMouseUpByBlurring } from '@/utilities/focus';
@@ -154,6 +154,8 @@ interface Props {
   dataPrimaryLink?: boolean;
 }
 
+const MAX_RANDOM_NUMBER = 99999;
+
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
   disclosure: undefined,
@@ -164,22 +166,25 @@ const props = withDefaults(defineProps<Props>(), {
 const slots = useSlots();
 const attrs = useAttrs();
 
+const hasChildren = !!slots.default;
+
+const disclosureActive = ref<boolean>(false);
+
 const listeners = computed(() => {
   const events = ['blur', 'click', 'focus', 'keydown', 'keypress', 'keyup', 'mouseover', 'touchstart', 'pointerdown'];
   const eventBindings: Record<string, unknown> = {};
+
   for (const event of events) {
     const eventName = `on${capitalize(event)}`;
+
     if (attrs[eventName]) {
       eventBindings[event] = attrs[eventName];
     }
   }
+
   return eventBindings;
 });
 
-const hasChildren = !!slots.default;
-
-const disclosureActive = ref<boolean>(false);
-
 const isDisabled = computed(() => props.disabled || props.loading);
 
 const className = computed(() => {
@@ -207,16 +212,16 @@ const className = computed(() => {
 });
 
 const connectedDisclosureClassName = computed(() => {
-  const textAlignVariantion = props.textAlign
+  const textAlignVariation = props.textAlign
     && variationName('textAlign', props.textAlign) as keyof typeof styles;
-  const sizeVariantion = props.size && variationName('size', props.size) as keyof typeof styles;
+  const sizeVariation = props.size && variationName('size', props.size) as keyof typeof styles;
 
   return classNames(
     styles.Button,
     props.primary && styles.primary,
     props.outline && styles.outline,
-    props.size !== 'medium' && sizeVariantion && styles[sizeVariantion],
-    textAlignVariantion && styles[textAlignVariantion],
+    props.size !== 'medium' && sizeVariation && styles[sizeVariation],
+    textAlignVariation && styles[textAlignVariation],
     props.destructive && styles.destructive,
     props.connectedDisclosure && props.connectedDisclosure.disabled && styles.disabled,
     styles.iconOnly,
@@ -226,9 +231,8 @@ const connectedDisclosureClassName = computed(() => {
 });
 
 const commonProps = computed(() => {
-  const {
-    id, accessibilityLabel, role, ariaDescribedBy,
-  } = props;
+  const { id, accessibilityLabel, role, ariaDescribedBy } = props;
+
   return {
     id,
     class: className.value,
@@ -241,20 +245,23 @@ const commonProps = computed(() => {
 
 const linkProps = computed(() => {
   const { url, external, download } = props;
+
   return { url, external, download };
 });
 
 const actionProps = computed(() => {
   const { submit, loading, pressed } = props;
+
   return {
-    submit, loading, pressed, disabled: isDisabled.value,
+    submit,
+    loading,
+    pressed,
+    disabled: isDisabled.value,
   };
 });
 
 const buttonMarkupProps = computed(() => {
-  const {
-    removeUnderline, disclosure, loading, icon,
-  } = props;
+  const { removeUnderline, disclosure, loading, icon } = props;
 
   return {
     commonProps: commonProps.value,
@@ -277,6 +284,7 @@ const connectedDisclosureData = computed(() => {
 
     return { disabled, disclosureLabel };
   }
+
   return {};
 });
 
@@ -285,6 +293,14 @@ const toggleDisclosureActive = () => {
 };
 
 const handleClick = useDisableClick(connectedDisclosureData.value.disabled, toggleDisclosureActive);
+
+const generateUpdateKey = (prefix?: string): string => {
+  return `${prefix}-${getRandomInt(MAX_RANDOM_NUMBER)}-${isDisabled.value}`;
+}
+
+function getRandomInt(max: number): number {
+  return Math.floor(Math.random() * max);
+}
 </script>
 
 <style lang="scss">

src/components/Button/ButtonFrom.vue

@@ -27,17 +27,19 @@ const props = withDefaults(defineProps<Props>(), {
   overrides: () => ({}),
 });
 
-const handleClick = () => {
-  if (props.action && props.action.onAction) {
-    props.action.onAction();
-  }
-};
-
 const bindProps = computed(() => {
   if (!props.action) {
     return {};
   }
+
   const { onAction, content, ...other } = props.action;
+
   return { ...other, ...props.overrides };
 });
+
+const handleClick = () => {
+  if (props.action && props.action.onAction) {
+    props.action.onAction();
+  }
+};
 </script>

src/components/Button/ButtonMarkup.vue

@@ -16,8 +16,8 @@ UnstyledButton(
       Icon(:source="loading ? 'placeholder': icon")
     span(
       v-if="children",
-      :class="childrenClass",
       :key="actionProps && actionProps.disabled ? 'text-disabled' : 'text'",
+      :class="childrenClass",
     )
       slot
     span(
@@ -68,12 +68,15 @@ const attrs = useAttrs();
 const listeners = computed(() => {
   const events = ['blur', 'click', 'focus', 'keydown', 'keypress', 'keyup', 'mouseover', 'touchstart', 'pointerdown'];
   const eventBindings: Record<string, unknown> = {};
+
   for (const event of events) {
     const eventName = `on${capitalize(event)}`;
+
     if (attrs[eventName]) {
       eventBindings[event] = attrs[eventName];
     }
   }
+
   return eventBindings;
 });
 

src/components/Link/Link.vue

@@ -35,7 +35,7 @@ import { classNames } from '@/utilities/css';
 import styles from '@/classes/Link.json';
 import { UnstyledLink } from '../UnstyledLink';
 
-const props = defineProps<{
+interface LinkProps {
   /** ID for the link */
   id?: string;
   /** The url to link to */
@@ -52,7 +52,9 @@ const props = defineProps<{
   accessibilityLabel?: string;
   /** Indicates whether or not the link is the primary navigation link when rendered inside of an `IndexTable.Row` */
   dataPrimaryLink?: boolean;
-}>();
+}
+
+const props = defineProps<LinkProps>();
 
 const BannerContext = inject('BannerContext', false);
 

src/components/Link/README.stories.mdx

@@ -42,7 +42,13 @@ import { Link } from '@/polaris-vue';
 export const Template = (args) => ({
   components: { Link },
   setup() { return { args }; },
-  template: `<Link v-bind="args">Fulfilling orders</Link>`,
+  template: `
+    <Link v-bind="args">Button</Link>
+    <br/>
+    <Link to="path">Router link</Link>
+    <br/>
+    <Link href="path">Normal link</Link>
+  `,
 });
 
 # Link
@@ -59,7 +65,9 @@ For actions that aren't related to navigation, use the [button component.](/docs
       docs: {
         source: {
           code: dedent`
-            <Link>Fulfilling orders</Link>
+            <Link>Button</Link>
+            <Link to="path">Router link</Link>
+            <Link href="path">Normal link</Link>
           `,
         },
       },

src/components/UnstyledLink/UnstyledLink.vue

@@ -1,8 +1,12 @@
 <template lang="pug">
-component(
-  :is="to ? 'router-link' : 'a'",
-  :href="url",
+router-link(
+  v-if="to",
   :to="to",
+)
+  slot
+a(
+  v-else,
+  :href="url",
   :target="to ? '_blank' : undefined",
   :rel="external ? 'noopener noreferrer' : undefined",
 )
@@ -17,5 +21,5 @@ interface Props {
   external?: boolean;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 </script>

src/main.ts

@@ -1,6 +1,19 @@
 import { createApp } from 'vue';
+import { createWebHistory, createRouter } from 'vue-router';
 import Demo from './Demo.vue';
 import PolarisVue from './polaris-vue';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-createApp(Demo as any).use(PolarisVue).mount('#app');
+// Define routes for development stage
+const routes = [
+  { path: '/', component: Demo },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+createApp(Demo)
+  .use(PolarisVue)
+  .use(router)
+  .mount('#app');