Fix; missing import & docs

Author: juzser

src/components/DataTable/README.stories.mdx

@@ -104,6 +104,14 @@ export const Template = (args) => ({
         { url: 'https://google.com', key: 'navy', content: 'Navy Merino Wool Blazer with khaki chinos and yellow belt'},
         '$445.00', 124518, 32, '$14,240.00',
       ],
+      [
+        { url: 'https://google.com', key: 'mauve', content: 'Mauve Cashmere Scarf'},
+        '$230.00', 124533, 83, '$19,090.00',
+      ],
+      [
+        { url: 'https://google.com', key: 'navy', content: 'Navy Merino Wool Blazer with khaki chinos and yellow belt'},
+        '$445.00', 124518, 32, '$14,240.00',
+      ],
     ];
     const sortedRows = ref(null);
     const rows = computed(() => {
@@ -156,7 +164,8 @@ Data tables are used to organize and display all information from a data set. Wh
 <Canvas>
   <Story
     name="Data table"
-    height="350px"
+    height="300px"
+    inline={false}
     args={{
       totalsName: { singular: 'Total net sales', plural: 'Total net sales' },
       columnContentTypes: [

src/components/DataTable/components/Cell/Cell.vue

@@ -59,12 +59,12 @@ template(v-else)
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 import { classNames, variationName } from 'polaris/polaris-react/src/utilities/css';
 import { headerCell } from 'polaris/polaris-react/src/components/shared';
 import SortAscendingMajor from '@icons/SortAscendingMajor.svg';
 import SortDescendingMajor from '@icons/SortDescendingMajor.svg';
-import { Icon, Tooltip } from '@/components';
+import { Icon, TruncatedText } from '@/components';
 import { UseI18n } from '@/use';
 import styles from '@/classes/DataTable.json';
 import type { SortDirection, VerticalAlign } from '../../types';

src/components/ResourceList/README.stories.mdx

@@ -415,10 +415,11 @@ export const Template = (args) => ({
         latestOrderUrl: 'orders/1457',
       },
     ];
+    const sortValue = ref('DATE_MODIFIED_DESC');
     const onSortChange = (value) => {
       sortValue.value = value;
     };
-    return { args, items, onSortChange };
+    return { args, items, sortValue, onSortChange };
   },
   template: `
     <Card>

src/components/TextField/TextField.vue

@@ -325,7 +325,7 @@ const verticalContentSlot = computed(() => slots.verticalContent?.());
 const height = ref<number>();
 const focus = ref<boolean>();
 const buttonPressTimer = ref<number>();
-const spinnerRef = ref<HTMLDivElement | null>(null);
+const spinnerRef = ref<InstanceType<typeof TextFieldSpinner> | null>(null);
 
 watch(
   () => props.focused,
@@ -639,7 +639,7 @@ function isSpinner(target: Element | EventTarget) {
   return (
     target instanceof Element &&
     spinnerRef.value &&
-    spinnerRef.value.contains(target)
+    spinnerRef.value.el?.contains(target)
   );
 }
 </script>

src/components/TextField/components/Spinner/Spinner.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 div(
+  ref="elRef",
   :aria-hidden="true",
   :class="styles.Spinner",
   @click="handleClick",
@@ -30,7 +31,8 @@ div(
 import CaretDownMinor from '@icons/CaretDownMinor.svg';
 import CaretUpMinor from '@icons/CaretUpMinor.svg';
 import styles from '@/classes/TextField.json';
-import { Icon } from '../../../Icon';
+import { Icon } from '@/components';
+import { ref } from 'vue';
 
 const emits = defineEmits<{
   (event: 'click', e: Event): void
@@ -39,11 +41,15 @@ const emits = defineEmits<{
   (event: 'mousedown'): void
 }>();
 
+const elRef = ref<HTMLDivElement | null>(null);
+
 const handleClick = (e: Event) => {
   emits('click', e);
 }
 
 const handleStep = (event: Event, step: number): void => {
   emits('change', step);
 };
+
+defineExpose({ el: elRef })
 </script>