tide-design-system 2.4.4 → 2.4.6

package/src/components/TideModal.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-  import { nextTick, onMounted, ref, watch } from 'vue';
+  import { nextTick, onBeforeMount, onMounted, ref, watch } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import { BREAKPOINT } from '@/types/Breakpoint';
   import { ICON } from '@/types/Icon';
   import { PRIORITY } from '@/types/Priority';
   import { CSS } from '@/types/Styles';
-  import { setScrollLock } from '@/utilities/viewport';
+  import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';
 
   import type { Ref } from 'vue';
 
@@ -73,6 +73,10 @@
     }
   );
 
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+
   onMounted(() => {
     if (props.isOpen) {
       triggerNativeDialogOpen();
@@ -81,97 +85,99 @@
 </script>
 
 <template>
-  <dialog
-    :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
-    ref="modalDialog"
-    :style="{ '--modal-width': props.width }"
-    @click.self="handleBackdropClick"
-    @close.prevent
-    @keydown.escape="handleEscapeKeydown"
-  >
-    <div
-      :class="[
-        'tide-modal-body',
-        CSS.BG.SURFACE.DEFAULT,
-        CSS.BORDER.RADIUS.ONE,
-        CSS.DISPLAY.FLEX,
-        CSS.FLEX.DIRECTION.COLUMN,
-        CSS.OVERFLOW.XY.HIDDEN,
-        CSS.POSITION.ABSOLUTE,
-        CSS.POSITIONING.BOTTOM,
-        CSS.SHADOW.TOP,
-        CSS.WIDTH.FULL,
-        CSS.WIDTH.MAX_FULL,
-        CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
-      ]"
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <dialog
+      :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
+      ref="modalDialog"
+      :style="{ '--modal-width': props.width }"
+      @click.self="handleBackdropClick"
+      @close.prevent
+      @keydown.escape="handleEscapeKeydown"
     >
-      <header
+      <div
         :class="[
-          'tide-modal-header',
-          CSS.AXIS2.CENTER,
-          CSS.BORDER.BOTTOM.ONE,
-          CSS.BORDER.COLOR.LOW,
+          'tide-modal-body',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.BORDER.RADIUS.ONE,
           CSS.DISPLAY.FLEX,
-          CSS.GAP.HALF,
-          CSS.ISOLATION.ISOLATE,
-          CSS.PADDING.Y.ONE,
-          CSS.POSITION.RELATIVE,
-          CSS.Z_INDEX.ONE,
+          CSS.FLEX.DIRECTION.COLUMN,
+          CSS.OVERFLOW.XY.HIDDEN,
+          CSS.POSITION.ABSOLUTE,
+          CSS.POSITIONING.BOTTOM,
+          CSS.SHADOW.TOP,
+          CSS.WIDTH.FULL,
+          CSS.WIDTH.MAX_FULL,
+          CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
         ]"
       >
-        <TideButtonIcon
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="emit('back')"
-          title="Back"
-          v-if="isBackButton"
-        />
+        <header
+          :class="[
+            'tide-modal-header',
+            CSS.AXIS2.CENTER,
+            CSS.BORDER.BOTTOM.ONE,
+            CSS.BORDER.COLOR.LOW,
+            CSS.DISPLAY.FLEX,
+            CSS.GAP.HALF,
+            CSS.ISOLATION.ISOLATE,
+            CSS.PADDING.Y.ONE,
+            CSS.POSITION.RELATIVE,
+            CSS.Z_INDEX.ONE,
+          ]"
+        >
+          <TideButtonIcon
+            :icon="ICON.CHEVRON_LEFT"
+            :priority="PRIORITY.QUATERNARY"
+            @click="emit('back')"
+            title="Back"
+            v-if="isBackButton"
+          />
+
+          <div
+            :class="[CSS.FONT.ROLE.HEADLINE_2]"
+            v-text="title"
+          />
+
+          <TideButtonIcon
+            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
+            :icon="ICON.CLOSE"
+            :priority="PRIORITY.QUATERNARY"
+            @click="emit('close')"
+            v-if="isDismissible"
+          />
+        </header>
 
         <div
-          :class="[CSS.FONT.ROLE.HEADLINE_2]"
-          v-text="title"
-        />
-
-        <TideButtonIcon
-          :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
-          :icon="ICON.CLOSE"
-          :priority="PRIORITY.QUATERNARY"
-          @click="emit('close')"
-          v-if="isDismissible"
-        />
-      </header>
-
-      <div
-        :class="[
-          'tide-modal-content',
-          CSS.DISPLAY.GRID,
-          CSS.ISOLATION.ISOLATE,
-          CSS.OVERFLOW.X.HIDDEN,
-          CSS.OVERFLOW.Y.AUTO,
-          CSS.PADDING.Y.TWO,
-          CSS.WIDTH.FULL,
-        ]"
-        ref="modalContent"
-      >
-        <slot />
+          :class="[
+            'tide-modal-content',
+            CSS.DISPLAY.GRID,
+            CSS.ISOLATION.ISOLATE,
+            CSS.OVERFLOW.X.HIDDEN,
+            CSS.OVERFLOW.Y.AUTO,
+            CSS.PADDING.Y.TWO,
+            CSS.WIDTH.FULL,
+          ]"
+          ref="modalContent"
+        >
+          <slot />
+        </div>
+
+        <footer
+          :class="[
+            'tide-modal-footer',
+            CSS.AXIS1.END,
+            CSS.DISPLAY.FLEX,
+            CSS.GAP.TWO,
+            CSS.ISOLATION.ISOLATE,
+            CSS.PADDING.Y.ONE,
+            CSS.SHADOW.TOP,
+          ]"
+          v-if="$slots.footer"
+        >
+          <slot name="footer" />
+        </footer>
       </div>
-
-      <footer
-        :class="[
-          'tide-modal-footer',
-          CSS.AXIS1.END,
-          CSS.DISPLAY.FLEX,
-          CSS.GAP.TWO,
-          CSS.ISOLATION.ISOLATE,
-          CSS.PADDING.Y.ONE,
-          CSS.SHADOW.TOP,
-        ]"
-        v-if="$slots.footer"
-      >
-        <slot name="footer" />
-      </footer>
-    </div>
-  </dialog>
+    </dialog>
+  </Teleport>
 </template>
 
 <style scoped>

package/src/components/TideSwitch.vue

@@ -39,6 +39,7 @@
     :disabled="props.disabled"
     @click="handleClick"
     aria-label="Switch"
+    type="button"
   >
     <div
       :class="[

package/src/stories/TideAlert.stories.ts

@@ -14,6 +14,7 @@ import {
 
 type Args = InstanceType<typeof TideAlert>['$props'] & {
   handleClose: string;
+  handleCtaClick: string;
 };
 
 const render = (args: Args) => ({
@@ -33,16 +34,38 @@ const render = (args: Args) => ({
         alert('Please specify a valid handler in the "close" control.');
       }
     },
+    handleCtaClick: () => {
+      action('TideAlert "Action" CTA clicked')({});
+
+      try {
+        const callback = eval(args.handleCtaClick);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "ctaClick" control.');
+      }
+    },
   },
   setup: () => ({ args }),
-  template: `<TideAlert @close="handleClose" v-bind="args">{{ args.default }}</TideAlert>`,
+  template: `<TideAlert @close="handleClose" @click="handleCtaClick" v-bind="args">{{ args.default }}</TideAlert>`,
 });
 
 const ALERT = prependNoneAsUndefined(STANDARD_ALERT.ALERT);
 
 export default {
   argTypes: {
+    click: disabledArgType,
     close: disabledArgType,
+    ctaLabel: {
+      control: 'text',
+      description: 'Call To Action that renders as a TideLink; clicking emits a separate `click` event',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
     dataTrack,
     default: {
       control: 'text',
@@ -63,6 +86,17 @@ export default {
         type: { summary: '() => void' },
       },
     },
+    handleCtaClick: {
+      control: 'text',
+      description: 'JS code or function to execute on CTA click event',
+      isEmit: true,
+      name: 'click',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '() => void' },
+      },
+    },
     heading: {
       control: 'text',
       description: 'Heading text',
@@ -88,9 +122,11 @@ export default {
     },
   },
   args: {
+    ctaLabel: '',
     dataTrack: '',
     default: '',
     handleClose: 'doSomething',
+    handleCtaClick: 'doSomething',
     heading: 'Heading',
     isDismissible: undefined,
     isToast: undefined,

package/src/stories/TideButtonPagination.stories.ts

@@ -16,7 +16,7 @@ type Args = InstanceType<typeof TideButtonPagination>['$props'] & {
   click: string;
 };
 
-const ELEMENT_TEXT_AS_ICON = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_TEXT_AS_ICON);
+const ELEMENT_BROAD = prependNoneAsUndefined(STANDARD_ELEMENT.ELEMENT_BROAD);
 
 const render = (args: Args) => ({
   components: { TideButtonPagination },
@@ -44,7 +44,7 @@ export default {
   argTypes: {
     click: {
       ...click,
-      if: { arg: 'element', neq: ELEMENT_TEXT_AS_ICON.LINK },
+      if: { arg: 'element', neq: ELEMENT_BROAD.LINK },
     },
     dataTrack,
     disabled: {
@@ -52,11 +52,11 @@ export default {
       description: 'Indicates whether Pagination Button is associated with the displayed page',
       if: {
         arg: 'element',
-        eq: ELEMENT_TEXT_AS_ICON.BUTTON,
+        eq: ELEMENT_BROAD.BUTTON,
       },
     },
     element: {
-      ...formatArgType({ ELEMENT_TEXT_AS_ICON }),
+      ...formatArgType({ ELEMENT_BROAD }),
       description: 'HTML tag type',
       table: {
         defaultValue: { summary: 'BUTTON' },
@@ -64,7 +64,7 @@ export default {
     },
     href: {
       description: 'URL to open<br />(Link only)',
-      if: { arg: 'element', eq: ELEMENT_TEXT_AS_ICON.LINK },
+      if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
       table: {
         defaultValue: { summary: 'None' },
         type: { summary: 'string' },
@@ -73,7 +73,7 @@ export default {
     isNewTab: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether to target a new browser tab<br />(Link only)',
-      if: { arg: 'element', eq: ELEMENT_TEXT_AS_ICON.LINK },
+      if: { arg: 'element', eq: ELEMENT_BROAD.LINK },
     },
     label: {
       control: 'text',

package/src/stories/TideCarousel.stories.ts

@@ -163,7 +163,6 @@ export default {
         type: { summary: 'HTML' },
       },
     },
-    slideChange: disabledArgType,
     slidesAddedToView: disabledArgType,
     subtitle: {
       control: 'text',

package/src/stories/TideInputCheckbox.stories.ts

@@ -1,53 +1,72 @@
 import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
 
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
-import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
-
-import type { StoryContext } from '@storybook/vue3';
+import { argTypeBooleanUnrequired, dataTrack, disabledArgType, doSomething, parameters } from '@/utilities/storybook';
 
 type Args = InstanceType<typeof TideInputCheckbox>['$props'] & {
-  click: string;
+  handleValid: string;
+  vModel: string;
 };
 
-const render = (args: Args, context: StoryContext) => ({
+const render = (args: Args) => ({
   components: { TideInputCheckbox },
   methods: {
     doSomething,
-    handleClick: () => {
-      const input = context.canvasElement.querySelector('input');
-
-      action('TideInputCheckbox clicked')({});
-      context.updateArgs({ ...args, checked: !input?.checked === true, indeterminate: undefined });
+    handleValid: () => {
+      action('TideInputText valid was emitted')({});
 
       try {
-        const callback = eval(args.click);
+        const callback = eval(args.handleValid);
 
         if (callback) {
           callback();
         }
       } catch {
-        alert('Please specify a valid handler in the "click" control.');
+        alert('Please specify a valid handler in the "valid" control.');
       }
     },
   },
-  setup: () => ({ args }),
-  template: `<TideInputCheckbox @click="handleClick" v-bind="args" />`,
+  setup() {
+    const model = ref<boolean>(false);
+
+    return {
+      args: {
+        ...args,
+        inputId: undefined, // Do not allow empty ID attribute to break the demo.
+      },
+      model,
+    };
+  },
+  template: `<TideInputCheckbox @valid="handleValid" v-bind="args" v-model="model" />`,
 });
 
 export default {
   argTypes: {
-    checked: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether Checkbox is checked or unchecked',
-    },
-    click: {
-      ...click,
-    },
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether Checkbox state is interactable',
     },
+    error: {
+      control: 'text',
+      description: 'Overrides the default error message and valid state',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
+    handleValid: {
+      control: 'text',
+      description: 'JS code or function to execute on valid event',
+      isEmit: true,
+      name: 'valid',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '(isValid: boolean) => void' },
+      },
+    },
     indeterminate: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether Checkbox is indeterminate',
@@ -85,17 +104,33 @@ export default {
         type: { summary: 'number' },
       },
     },
+    required: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether input is required',
+    },
+    vModel: {
+      control: 'text',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref' },
+      },
+    },
+    valid: disabledArgType,
   },
   args: {
-    checked: undefined,
-    click: 'doSomething',
     dataTrack: '',
     disabled: undefined,
+    error: '',
+    handleValid: 'doSomething',
     indeterminate: undefined,
     inputId: '',
     label: 'Input label',
     name: '',
     number: '',
+    required: undefined,
+    vModel: '',
   },
   component: TideInputCheckbox,
   parameters,

package/src/stories/TideInputRadio.stories.ts

@@ -1,46 +1,38 @@
-import { action } from '@storybook/addon-actions';
+import { ref, watch } from 'vue';
 
 import TideInputRadio from '@/components/TideInputRadio.vue';
-import { argTypeBooleanUnrequired, click, dataTrack, doSomething, parameters } from '@/utilities/storybook';
+import { argTypeBooleanUnrequired, dataTrack, parameters } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
-type Args = InstanceType<typeof TideInputRadio>['$props'] & {
-  click: string;
-};
+type Args = InstanceType<typeof TideInputRadio>['$props'];
 
 const render = (args: Args, context: StoryContext) => ({
   components: { TideInputRadio },
-  methods: {
-    doSomething,
-    handleClick: () => {
-      const input = context.canvasElement.querySelector('input');
-
-      action('TideInputRadio changed')({});
-      context.updateArgs({ ...args, checked: !input?.checked });
-
-      try {
-        const callback = eval(args.click);
+  setup() {
+    const model = ref<string | undefined>(undefined);
 
-        if (callback) {
-          callback();
-        }
-      } catch {
-        alert('Please specify a valid handler in the "click" control.');
+    watch(
+      () => ({ ...args }),
+      (newArgs) => {
+        // Reset v-model when arg table is reset.
+        if (JSON.stringify(newArgs) === JSON.stringify(context.allArgs)) model.value = undefined;
       }
-    },
+    );
+
+    return {
+      args: {
+        ...args,
+        inputId: undefined,
+      },
+      model,
+    };
   },
-  setup: () => ({ args }),
-  template: `<TideInputRadio @click="handleClick" v-bind="args" />`,
+  template: `<TideInputRadio v-bind="args" v-model="model" />`,
 });
 
 export default {
   argTypes: {
-    checked: {
-      ...argTypeBooleanUnrequired,
-      description: 'Determines whether input is selected',
-    },
-    click,
     dataTrack,
     disabled: {
       ...argTypeBooleanUnrequired,
@@ -78,16 +70,33 @@ export default {
         type: { summary: 'number' },
       },
     },
+    vModel: {
+      control: 'text',
+      description: 'Data binding to Vue ref',
+      table: {
+        category: 'Native',
+        defaultValue: { summary: 'None' },
+        type: { summary: 'Ref' },
+      },
+    },
+    value: {
+      control: 'text',
+      description: 'Value attribute',
+      table: {
+        defaultValue: { summary: 'None' },
+        type: { summary: 'string' },
+      },
+    },
   },
   args: {
-    checked: undefined,
-    click: 'doSomething',
     dataTrack: '',
     disabled: undefined,
     inputId: '',
     label: 'Input label',
     name: '',
     number: '',
+    vModel: '',
+    value: '',
   },
   component: TideInputRadio,
   parameters,