Migrate all components to the new version with minor fixes

Author: juzser

src/components/AppProvider/AppProvider.vue

@@ -69,7 +69,13 @@ onMounted(() => {
         navigator.userAgent.includes('Version/16.2') ||
         navigator.userAgent.includes('Version/16.3'));
 
-    if (isSafari16) {
+    const isMobileApp16 =
+      navigator.userAgent.includes('Shopify Mobile/iOS') &&
+      (navigator.userAgent.includes('OS 16_1') ||
+        navigator.userAgent.includes('OS 16_2') ||
+        navigator.userAgent.includes('OS 16_3'));
+
+    if (isSafari16 || isMobileApp16) {
       document.documentElement.classList.add(
         'Polaris-Safari-16-Font-Optical-Sizing-Patch',
       );
@@ -126,6 +132,7 @@ function measureScrollbars() {
   document.body.removeChild(parentEl);
 }
 
+provide('themeName', themeName); // TODO: This should be reactive
 provide('theme', getTheme(themeName.value)); // TODO: This should be reactive
 provide('features', props.features ?? {});
 provide('i18n', new I18n(props.i18n));

src/components/BlockStack/types.ts

@@ -25,8 +25,6 @@ export interface BlockStackProps {
   inlineAlign?: InlineAlign;
   /** The spacing between children */
   gap?: Gap;
-  /** HTML id attribute */
-  id?: string;
   /** Reverse the render order of child items
    * @default false
    */

src/components/BulkActions/BulkActions.vue

@@ -22,7 +22,7 @@ div(
           @click="paginatedSelectAllAction.onAction",
         ) {{ paginatedSelectAllAction.content }}
 
-    div(:class="styles.BulkActionsPromotedActionsWrapper")
+    div(v-if="selectMode", :class="styles.BulkActionsPromotedActionsWrapper")
       InlineStack(gap="100", blockAlign="center")
         div(:class="styles.BulkActionsOuterLayout")
           //- measurerMarkup

src/components/BulkActions/components/BulkActionButton/BulkActionButton.vue

@@ -2,13 +2,14 @@
 div(:class="styles.BulkActionButton", ref="bulkActionButton")
   template(v-if="isActivatorForMoreActionsPopover")
     Tooltip(
-      preferred-position="above",
+      preferred-position="below",
       :content="content",
     )
       Button(
         :size="size",
         :external="external",
         :url="url",
+        :tone="destructive ? 'critical' : undefined",
         :disclosure="disclosure && showContentInButton",
         :accessibility-label="isActivatorForMoreActionsPopover ? content : accessibilityLabel",
         :disabled="disabled",
@@ -20,6 +21,7 @@ div(:class="styles.BulkActionButton", ref="bulkActionButton")
     :size="size",
     :external="external",
     :url="url",
+    :tone="destructive ? 'critical' : undefined",
     :disclosure="disclosure && showContentInButton",
     :accessibility-label="isActivatorForMoreActionsPopover ? content : accessibilityLabel",
     :disabled="disabled",
@@ -37,7 +39,7 @@ import {
   Tooltip,
 } from '@/components';
 import type { ButtonProps } from '@/components/Button/types';
-import type { DisableableAction } from '@/utilities/types';
+import type { DestructableAction, DisableableAction } from '@/utilities/types';
 import MenuHorizontalIcon from '@icons/MenuHorizontalIcon.svg';
 import styles from '@polaris/components/BulkActions/BulkActions.module.css';
 
@@ -48,7 +50,7 @@ export type BulkActionButtonProps = {
   handleMeasurement?(width: number): void;
   showContentInButton?: boolean;
   size?: Extract<ButtonProps['size'], 'micro' | 'medium'>;
-} & DisableableAction;
+} & DisableableAction & DestructableAction;
 
 const props = defineProps<BulkActionButtonProps>();
 const emits = defineEmits<{

src/components/BulkActions/types.ts

@@ -33,7 +33,7 @@ export type BulkActionsProps = {
   buttonSize?: Extract<ButtonProps['size'], 'micro' | 'medium'>;
   /** Label for the bulk actions */
   label?: string;
-  /** @deprecated List is in a selectable state. No longer needed due to removal of Transition */
+  /** List is in a selectable state. Will only render the bulk actions when `true` */
   selectMode?: boolean;
   /** @deprecated Used for forwarding the ref. Use `ref` prop instead */
   innerRef?: Ref<any>;

src/components/Button/Button.vue

@@ -17,7 +17,9 @@ UnstyledButton(
     Icon(v-else-if="icon", :source="loading ? 'placeholder' : icon")
   span(
     v-if="hasChildren",
-    :class="removeUnderline ? styles.removeUnderline : ''",
+    as="span",
+    :variant="size === 'large' || hasPlainText ? 'bodyMd' : 'bodySm'",
+    :fontWeight="textFontWeight",
     :key="disabled ? 'text-disabled' : 'text'"
   )
     slot
@@ -35,6 +37,7 @@ import { classNames, variationName } from '@/utilities/css';
 import type { VueNode } from '@/utilities/types';
 import useI18n from '@/use/useI18n';
 import { useHasSlot } from '@/use/useHasSlot';
+import { useBreakpoints } from '@/use/useBreakpoints';
 import type { ButtonProps } from './types';
 import { Spinner, Icon } from '@/components';
 import { UnstyledButton } from '../UnstyledButton';
@@ -56,6 +59,9 @@ const attrs = useAttrs();
 const i18n = useI18n();
 const { hasSlot } = useHasSlot();
 
+const breakpoints = useBreakpoints();
+const { mdUp } = breakpoints.value;
+
 const props = withDefaults(defineProps<ButtonProps>(), {
   size: 'medium',
   textAlign: 'center',
@@ -76,7 +82,18 @@ const listeners = computed(() => {
 
   return eventBindings;
 });
+const hasPlainText = computed(() => ['plain', 'monochromePlain'].includes(props.variant));
+const textFontWeight = computed(() => {
+  if (hasPlainText.value) {
+    return 'regular';
+  }
 
+  if (props.variant === 'primary') {
+    return mdUp ? 'medium' : 'semibold';
+  }
+
+  return 'medium';
+});
 const hasChildren = computed(() => hasSlot(slots.default));
 const isDisabled = computed(() => props.disabled || props.loading);
 const className = computed(() => classNames(

src/components/FooterHelp/FooterHelp.vue

@@ -1,16 +1,31 @@
 <template lang="pug">
-div(:class="styles.FooterHelp")
+div(:class="styles.FooterHelp", :style="style")
   div(:class="styles.Text")
     slot
 </template>
 
 <script setup lang="ts">
-import { type VNode } from 'vue';
+import { computed, type VNode } from 'vue';
 import { type VueNode } from '@/utilities/types';
 import styles from '@polaris/components/FooterHelp/FooterHelp.module.css';
 
+type FooterHelpProps = {
+  /** Horizontal alignment of the component
+   * @default 'center'
+  */
+  align?: 'start' | 'center' | 'end';
+}
+
+const props = withDefaults(defineProps<FooterHelpProps>(), {
+  align: 'center',
+});
+
 const slots = defineSlots<{
   /** The content to display inside the layout. */
   default?: (_?: VueNode) => VNode[];
 }>();
+
+const style = computed(() => ({
+  '--pc-footer-help-align': props.align,
+}));
 </script>

src/components/Icon/Icon.vue

@@ -11,6 +11,7 @@ span(:class="className")
     :class="styles.Svg",
     :focusable="false",
     :aria-hidden="true",
+    :viewBox="mdDown ? '1 1 18 18' : undefined",
   )
 
   div(
@@ -32,6 +33,7 @@ import { computed } from 'vue';
 import { classNames, variationName } from '@/utilities/css';
 import { Text } from '@/components';
 import type { IconSource } from '@/utilities/types';
+import { useBreakpoints } from '@/use/useBreakpoints';
 import type {
   Tone,
   Source,
@@ -49,6 +51,9 @@ export type IconProps = {
 
 const props = defineProps<IconProps>();
 
+const breakpoints = useBreakpoints();
+const { mdDown } = breakpoints.value;
+
 const sourceType = computed<Source>(() => {
   // Because of svgLoader so we need to check if the source is a function AND an object
   const functionTypes = ['function', 'object']

src/components/IndexTable/components/Row/Row.vue

@@ -96,6 +96,7 @@ const rowClassName = computed(() => classNames(
   props.disabled && styles['TableRow-disabled'],
   props.tone && styles[variationName('tone', props.tone)],
   !selectable.value &&
+    !currentInstance?.vnode.props?.onClick &&
     !primaryLinkElement.value &&
     styles['TableRow-unclickable'],
 ));
@@ -118,7 +119,10 @@ const handleInteraction = (event: MouseEvent | KeyboardEvent) => {
 };
 
 const handleRowClick = (event: MouseEvent) => {
-  if ((props.disabled || !selectable.value) && !primaryLinkElement.value) {
+  if ((props.disabled || !selectable.value)
+    && !currentInstance?.vnode.props?.onClick
+    && !primaryLinkElement.value
+  ) {
     return;
   }
 

src/components/Portal/Portal.vue

@@ -3,7 +3,10 @@ teleport(
   v-if="container",
   :to="PORTAL_CONTAINER_ID",
 )
-  div(:data-portal-id="portalId")
+  ThemeProvider(
+    :theme="isThemeNameLocal(themeName) ? themeName : themeNameDefault",
+    :data-portal-id="portalId",
+  )
     slot
 </template>
 
@@ -12,8 +15,12 @@ import {
   computed,
   onMounted,
 } from 'vue';
+import { themeNameDefault } from '@shopify/polaris-tokens';
 import useId from '@/use/useId';
 import usePortalsManager from '@/use/usePortalsManager';
+import { useThemeName } from '@/use/useTheme';
+import { ThemeProvider } from '@/components/ThemeProvider';
+import { isThemeNameLocal } from '@/components/ThemeProvider/utils';
 
 const PORTAL_CONTAINER_ID = '#PolarisPortalsContainer';
 
@@ -32,6 +39,7 @@ const emits = defineEmits<PortalEmits>();
 // This variable to make sure that Portal is within AppProvider
 const container = usePortalsManager();
 const uniqueId = useId();
+const themeName = useThemeName();
 
 const portalId =  computed(() => {
   return props.idPrefix