tide-design-system 2.1.6 → 2.1.8

package/src/components/TideModal.vue

@@ -1,187 +1,219 @@
 <script lang="ts" setup>
-  import { onMounted, ref, watch } from 'vue';
+  import { nextTick, onMounted, ref, watch } from 'vue';
 
-  import TideIcon from '@/components/TideIcon.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 type { Ref } from 'vue';
 
   type Props = {
+    isBackButton?: boolean;
+    isDismissible?: boolean;
     isOpen: boolean;
     title?: string;
     width?: string;
   };
 
-  const props = defineProps<Props>();
-
-  const emit = defineEmits(['close']);
-
-  const isOpen = ref(props.isOpen);
-  const savedScrollPosition = ref<number | null>(null); // TODO: replace body scroll lock with global structure?
-
-  const handleClose = () => {
-    isOpen.value = false;
+  const props = withDefaults(defineProps<Props>(), {
+    isBackButton: false,
+    isDismissible: true,
+    title: undefined,
+    width: undefined,
+  });
 
-    updateModalDisplay();
-    emit('close');
+  type Emits = {
+    (e: 'close'): void;
+    (e: 'back'): void;
   };
 
-  const updateModalDisplay = () => {
-    if (isOpen.value) {
-      savedScrollPosition.value = window.scrollY;
-      document.body.style.overflow = 'hidden';
-      savedScrollPosition.value && window.scrollTo(0, savedScrollPosition.value);
+  const emit = defineEmits<Emits>();
 
-      addOpenListeners();
-    } else {
-      document.body.style.overflow = '';
+  const modalContent: Ref<HTMLDivElement | undefined> = ref();
+  const modalDialog: Ref<HTMLDialogElement | undefined> = ref();
 
-      removeOpenListeners();
-    }
+  const triggerNativeDialogOpen = () => {
+    modalDialog.value?.showModal();
   };
 
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      event.stopPropagation();
-      handleClose();
-    }
-  };
-
-  const addOpenListeners = () => {
-    window.addEventListener('keydown', handleKeyDown);
+  const triggerNativeDialogClose = () => {
+    modalDialog.value?.close();
   };
 
-  const removeOpenListeners = () => {
-    window.removeEventListener('keydown', handleKeyDown);
+  const scrollContentToTop = () => {
+    nextTick(() => {
+      if (!modalContent.value) return;
+      modalContent.value.scrollTop = 0;
+    });
   };
 
-  onMounted(() => {
-    updateModalDisplay();
-  });
-
   watch(
     () => props.isOpen,
     (newValue) => {
-      isOpen.value = newValue;
-      updateModalDisplay();
+      if (!modalDialog.value) return;
+      if (newValue) {
+        triggerNativeDialogOpen();
+        scrollContentToTop();
+      } else {
+        triggerNativeDialogClose();
+      }
+      setScrollLock(newValue);
     }
   );
+
+  onMounted(() => {
+    if (props.isOpen) {
+      triggerNativeDialogOpen();
+    }
+  });
 </script>
 
 <template>
-  <Teleport to="body">
+  <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="emit('close')"
+    @close="emit('close')"
+  >
     <div
       :class="[
-        'tide-modal-wrapper',
-        CSS.POSITION.ABSOLUTE,
+        'tide-modal-body',
+        CSS.BG.SURFACE.DEFAULT,
+        CSS.BORDER.RADIUS.ONE,
         CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.POSITIONING.TOP,
-        CSS.POSITIONING.LEFT,
+        CSS.FLEX.DIRECTION.COLUMN,
+        CSS.OVERFLOW.XY.HIDDEN,
+        CSS.POSITION.ABSOLUTE,
+        CSS.POSITIONING.BOTTOM,
+        CSS.SHADOW.TOP,
         CSS.WIDTH.FULL,
-        CSS.HEIGHT.FULL,
-        props.isOpen ? 'active' : CSS.POINTER_EVENTS.OFF,
-        CSS.OVERFLOW.Y.HIDDEN,
+        CSS.WIDTH.MAX_FULL,
+        CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
       ]"
     >
-      <div
-        :class="['tide-modal-bg', CSS.POSITION.ABSOLUTE, CSS.WIDTH.FULL, CSS.HEIGHT.FULL]"
-        :style="{ '--tide-modal-width': props.width }"
-        @click.self="handleClose"
-      />
+      <header
+        :class="[
+          'tide-modal-header',
+          CSS.DISPLAY.FLEX,
+          CSS.AXIS2.CENTER,
+          CSS.GAP.HALF,
+          CSS.PADDING.Y.ONE,
+          CSS.BORDER.BOTTOM.ONE,
+          CSS.BORDER.COLOR.LOW,
+        ]"
+      >
+        <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="triggerNativeDialogClose"
+          v-if="isDismissible"
+        />
+      </header>
 
       <div
         :class="[
-          'tide-modal',
-          CSS.BG.SURFACE.DEFAULT,
-          CSS.FONT.COLOR.SURFACE.DEFAULT,
-          CSS.POSITION.ABSOLUTE,
-          CSS.DISPLAY.FLEX,
-          CSS.FLEX.DIRECTION.COLUMN,
-          CSS.BORDER.RADIUS.ONE,
-          CSS.OVERFLOW.XY.HIDDEN,
-          CSS.SHADOW.BOTTOM,
+          'tide-modal-content',
+          CSS.DISPLAY.GRID,
+          CSS.OVERFLOW.Y.AUTO,
+          CSS.OVERFLOW.X.HIDDEN,
+          CSS.WIDTH.FULL,
+          CSS.PADDING.Y.TWO,
         ]"
+        ref="modalContent"
       >
-        <header
-          :class="[
-            'tide-modal-header',
-            CSS.POSITION.RELATIVE,
-            CSS.DISPLAY.FLEX,
-            CSS.AXIS2.CENTER,
-            CSS.PADDING.Y.ONE,
-            CSS.PADDING.X.TWO,
-            CSS.BORDER.BOTTOM.ONE,
-            CSS.BORDER.COLOR.LOW,
-          ]"
-        >
-          <div
-            :class="[CSS.FLEX.GROW.ON, CSS.FONT.SIZE.TWENTY, CSS.FONT.WEIGHT.SEVEN_HUNDRED]"
-            v-if="title"
-          >
-            {{ title }}
-          </div>
-
-          <button
-            :class="[CSS.POSITION.ABSOLUTE, CSS.POSITIONING.RIGHT, CSS.MARGIN.RIGHT.TWO]"
-            @click="handleClose"
-            title="Close"
-          >
-            <TideIcon :icon="ICON.CLOSE" />
-          </button>
-        </header>
-
-        <div :class="['tide-modal-content', CSS.PADDING.FULL.TWO, CSS.OVERFLOW.Y.AUTO]">
-          <slot />
-        </div>
-
-        <template v-if="$slots.footer">
-          <footer
-            :class="[
-              'tide-bg-surface',
-              CSS.POSITION.STICKY,
-              CSS.POSITIONING.LEFT,
-              CSS.POSITIONING.BOTTOM,
-              CSS.DISPLAY.FLEX,
-              CSS.AXIS1.END,
-              CSS.GAP.ONE,
-              CSS.PADDING.X.TWO,
-              CSS.PADDING.Y.ONE,
-              CSS.SHADOW.TOP,
-            ]"
-          >
-            <slot name="footer" />
-          </footer>
-        </template>
+        <slot />
       </div>
+
+      <footer
+        :class="['tide-modal-footer', CSS.AXIS1.END, CSS.DISPLAY.FLEX, CSS.GAP.TWO, CSS.PADDING.Y.ONE, CSS.SHADOW.TOP]"
+        v-if="$slots.footer"
+      >
+        <slot name="footer" />
+      </footer>
     </div>
-  </Teleport>
+  </dialog>
 </template>
 
 <style scoped>
   .tide-modal {
-    width: var(--tide-modal-width);
-    max-width: calc(100% - 2rem);
-    max-height: calc(100% - 2rem);
-    box-shadow: 0px 10px 25px 0px rgba(18, 43, 58, 0.2);
-    transform: translateY(100vh);
-    transition: var(--tide-animate);
-    transition-property: transform;
+    --modal-padding-x: 20px;
+    max-width: unset;
+    max-height: unset;
+    place-items: center;
+    display: none;
+    transition: all var(--tide-animate) allow-discrete;
+    transform: translateY(100%);
   }
-
-  .tide-modal-bg {
+  .tide-modal:open {
+    display: grid;
+    transform: translateY(0%);
+  }
+  .tide-modal::backdrop {
+    background-color: transparent;
+    transition: all var(--tide-animate) allow-discrete;
     backdrop-filter: blur(0px);
-    background-color: rgba(255, 255, 255, 0);
-    transition: var(--tide-animate);
-    transition-property: backdrop-filter, background-color;
+  }
+  .tide-modal:open::backdrop {
+    background-color: var(--tide-transparent-400);
+    backdrop-filter: blur(4px);
+  }
+  @starting-style {
+    .tide-modal:open {
+      display: grid;
+      transform: translateY(100%);
+    }
+    .tide-modal:open::backdrop {
+      background-color: transparent;
+      backdrop-filter: blur(4px);
+    }
+  }
+  .tide-modal-body {
+    width: var(--modal-width, 576px);
+    max-height: calc(100% - var(--tide-spacing-2));
   }
 
-  .active .tide-modal {
-    transform: translateY(0);
+  .tide-modal-header,
+  .tide-modal-footer {
+    padding-inline: var(--modal-padding-x);
+  }
+  .tide-modal-content {
+    grid-template-columns: var(--modal-padding-x) 1fr var(--modal-padding-x);
+  }
+  :where(.tide-modal-content):deep(> :where(*)) {
+    grid-column: 2;
   }
 
-  .active .tide-modal-bg {
-    backdrop-filter: blur(8px);
-    background-color: var(--tide-transparent-400);
+  @media (max-width: 767px) {
+    .tide-modal-body {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  @media (min-width: 768px) {
+    .tide-modal {
+      --modal-padding-x: var(--tide-spacing-2);
+    }
+    .tide-modal-body {
+      max-height: 85%;
+      bottom: initial;
+    }
   }
 </style>

package/src/components/TidePopover.vue

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+  import { autoPlacement, autoUpdate, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue';
+  import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
+
+  import { CSS } from '@/types/Styles';
+  import { isClickOutside } from '@/utilities/event';
+  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';
+
+  import type { Ref } from 'vue';
+
+  type Props = {
+    anchorId: string;
+    offset?: number;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    offset: 16,
+  });
+
+  const anchor: Ref<HTMLElement | null> = ref(null);
+  const floating: Ref<HTMLElement | null> = ref(null);
+  const root: Ref<HTMLElement | null> = ref(null);
+  const isHovered = ref(false);
+  const isToggledOpen = ref(false);
+  const middleware = ref([autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })]);
+
+  const isShowPopover = computed(() => isHovered.value || isToggledOpen.value);
+
+  const { floatingStyles } = useFloating(anchor, floating, {
+    middleware,
+    strategy: 'fixed',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const handlePermanentOpenBodyClick = (e: MouseEvent) => {
+    if (!anchor.value || !floating.value) return;
+    if (isClickOutside(e, [anchor.value, floating.value])) {
+      e.stopImmediatePropagation();
+      isToggledOpen.value = false;
+    }
+  };
+
+  const handleAnchorElementMouseOver = () => {
+    isHovered.value = true;
+  };
+
+  const handleAnchorElementMouseLeave = () => {
+    isHovered.value = false;
+  };
+
+  const handleAnchorElementClick = () => {
+    isToggledOpen.value = true;
+  };
+
+  const addListenersToAnchorElement = () => {
+    if (!anchor.value) return null;
+    anchor.value.addEventListener('mouseover', handleAnchorElementMouseOver);
+    anchor.value.addEventListener('mouseleave', handleAnchorElementMouseLeave);
+    anchor.value.addEventListener('click', handleAnchorElementClick);
+  };
+
+  const removeListenersFromAnchorElement = () => {
+    if (!anchor.value) return null;
+    anchor.value.removeEventListener('mouseover', handleAnchorElementMouseOver);
+    anchor.value.removeEventListener('mouseleave', handleAnchorElementMouseLeave);
+    anchor.value.removeEventListener('click', handleAnchorElementClick);
+  };
+
+  const handlePermanentOpenBodyKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      isToggledOpen.value = false;
+    }
+  };
+
+  const addOpenListenersToRoot = () => {
+    if (!root.value) return;
+    root.value.addEventListener('click', handlePermanentOpenBodyClick, true);
+    root.value.addEventListener('keydown', handlePermanentOpenBodyKeydown);
+  };
+
+  const removeOpenListenersFromRoot = () => {
+    if (!root.value) return;
+    root.value.removeEventListener('click', handlePermanentOpenBodyClick, true);
+    root.value.removeEventListener('keydown', handlePermanentOpenBodyKeydown);
+  };
+
+  const updateAnchorElement = () => {
+    anchor.value = document.getElementById(props.anchorId);
+  };
+
+  watch(
+    () => isToggledOpen.value,
+    (newValue) => {
+      if (newValue) {
+        addOpenListenersToRoot();
+      } else {
+        removeOpenListenersFromRoot();
+      }
+    }
+  );
+
+  watch(
+    () => props.anchorId,
+    () => {
+      removeListenersFromAnchorElement();
+      updateAnchorElement();
+      addListenersToAnchorElement();
+    }
+  );
+
+  watchEffect(() => {
+    middleware.value = [autoPlacement(), offsetMiddleware({ mainAxis: props.offset }), shift({ padding: 16 })];
+  });
+
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
+
+  onMounted(() => {
+    updateAnchorElement();
+    root.value = document.documentElement;
+    addListenersToAnchorElement();
+  });
+
+  onUnmounted(() => {
+    removeListenersFromAnchorElement();
+  });
+</script>
+
+<template>
+  <Teleport :to="`#${TOP_LAYER_ID}`">
+    <Transition>
+      <div
+        :class="[
+          'tide-popover',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.BORDER.COLOR.LOW,
+          CSS.BORDER.FULL.ONE,
+          CSS.BORDER.RADIUS.HALF,
+          CSS.FONT.ROLE.BODY_2,
+          CSS.PADDING.FULL.ONE,
+          CSS.SHADOW.BOTTOM,
+        ]"
+        ref="floating"
+        :style="{ ...floatingStyles, maxWidth: `calc(100% - ${props.offset * 2}px)` }"
+        v-show="isShowPopover"
+      >
+        <slot />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity var(--tide-animate);
+  }
+  .v-enter-to,
+  .v-leave-from {
+    opacity: 1;
+  }
+</style>

package/src/stories/TideAccordionItem.stories.ts

@@ -43,6 +43,7 @@ export default {
       isEmit: true,
       name: 'toggle',
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(isExpanded: boolean) => void' },
       },

package/src/stories/TideButtonSegmented.stories.ts

@@ -68,6 +68,7 @@ export default {
     handleChange: {
       ...change,
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(tabIndex: number) => void' },
       },

package/src/stories/TideCard.stories.ts

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 
 import TideCard from '@/components/TideCard.vue';
-import { POSITION_CARD_ICON as STANDARD_POSITION_CARD_ICON, TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
+import { TYPE_CARD as STANDARD_TYPE_CARD } from '@/types/Card';
 import { ICON } from '@/types/Icon';
 import {
   argTypeBooleanUnrequired,
@@ -13,7 +13,6 @@ import {
 } from '@/utilities/storybook';
 
 const TYPE_CARD = prependNoneAsUndefined(STANDARD_TYPE_CARD);
-const POSITION_CARD_ICON = prependNoneAsUndefined(STANDARD_POSITION_CARD_ICON);
 const CARD_ICON = prependNoneAsUndefined(ICON);
 
 const render = (args: any) => ({
@@ -67,14 +66,6 @@ export default {
         type: { summary: 'Icon' },
       },
     },
-    iconPosition: {
-      ...formatArgType({ POSITION_CARD_ICON }),
-      description: 'Position of the icon relative to the content.',
-      table: {
-        defaultValue: { summary: 'LEFT' },
-        type: { summary: 'CardIconPosition' },
-      },
-    },
     selected: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether the Card is selected (for selectable cards).',
@@ -93,7 +84,6 @@ export default {
     description: '',
     heading: 'Demo',
     icon: CARD_ICON.None,
-    iconPosition: POSITION_CARD_ICON.None,
     selected: undefined,
     type: TYPE_CARD.None,
   },

package/src/stories/TideCarousel.stories.ts

@@ -75,6 +75,7 @@ export default {
     handleChange: {
       ...change,
       table: {
+        category: 'Events',
         defaultValue: { summary: 'None' },
         type: { summary: '(currentSlide: number) => void' },
       },

package/src/stories/TideIcon.stories.ts

@@ -3,7 +3,10 @@ import { ICON as STANDARD_ICON, ICON_REALM as STANDARD_ICON_REALM } from '@/type
 import * as STANDARD_SIZE from '@/types/Size';
 import { formatArgType, parameters, prependNoneAsUndefined } from '@/utilities/storybook';
 
-const ICON = prependNoneAsUndefined({ ...STANDARD_ICON, ...STANDARD_ICON_REALM.RV });
+const ICON = prependNoneAsUndefined({
+  ...STANDARD_ICON,
+  ...Object.assign({}, ...Object.values(STANDARD_ICON_REALM)),
+});
 const SIZE = prependNoneAsUndefined(STANDARD_SIZE.SIZE);
 
 export default {