fix(filter-pill, mode-island): NO-JIRA make next-only code SSR-safe after static rendering merge

Author: francisrupert

apps/dialtone-documentation/docs/components/filter-pill.md

@@ -436,7 +436,7 @@ The filter pill is built on `DtButton` and `DtPopover`/`DtDropdown`, inheriting
 <component-class-table component-name="filter-pill"></component-class-table>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, inject } from 'vue';
 
 const heroConversationTypes = ref([
   {name: 'All Conversations'},
@@ -514,5 +514,6 @@ function selectDropdownType (name, close) {
 function resetDropdownType () {
   dropdownTypes.value.forEach(f => { f.active = false; });
 }
-const sizes = Object.keys(window.DIALTONE_CONSTANTS.BUTTON_SIZE_MODIFIERS).filter(k => /^\d+$/.test(k));
+const dialtoneConstants = inject('dialtoneConstants', {});
+const sizes = Object.keys(dialtoneConstants.BUTTON_SIZE_MODIFIERS ?? {}).filter(k => /^\d+$/.test(k));
 </script>

packages/dialtone-vue/components/FilterPill/FilterPill.vue

@@ -206,6 +206,7 @@
 
 <script>
 import { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/Popover';
+import { HTML_ELEMENT_TYPE } from '@/common/constants';
 import { CONTENT_MODE_PROP } from '@/common/mode_constants';
 import { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, DtButton } from '@/components/Button';
 import { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';
@@ -324,7 +325,7 @@ export default {
      * @values body, parent, root, HTMLElement
      */
     popoverAppendTo: {
-      type: [HTMLElement, String],
+      type: [HTML_ELEMENT_TYPE, String],
       default: 'body',
       validator: appendTo => {
         return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||

packages/dialtone-vue/components/ModeIsland/Utils.js

@@ -8,28 +8,34 @@ export function getOppositeMode (currentMode) {
 }
 
 /**
- * Get the mode from the root HTML element
+ * Get the mode from the root HTML element.
+ * Returns the default during SSR, where no DOM exists.
  * @returns {string} The root mode or 'light' as default
  */
 export function getRootMode () {
+  if (typeof document === 'undefined') return 'light';
   const rootMode = document.documentElement.getAttribute('data-dt-mode');
   return rootMode || 'light';
 }
 
 /**
- * Get the contrast from the root HTML element
+ * Get the contrast from the root HTML element.
+ * Returns the default during SSR, where no DOM exists.
  * @returns {string} The root contrast or 'default' as default
  */
 export function getRootContrast () {
+  if (typeof document === 'undefined') return 'default';
   const rootContrast = document.documentElement.getAttribute('data-dt-contrast');
   return rootContrast || 'default';
 }
 
 /**
- * Get the material from the root HTML element
+ * Get the material from the root HTML element.
+ * Returns the default during SSR, where no DOM exists.
  * @returns {string} The root material or 'sandstone' as default
  */
 export function getRootMaterial () {
+  if (typeof document === 'undefined') return 'sandstone';
   const rootMaterial = document.documentElement.getAttribute('data-dt-material');
   return rootMaterial || 'sandstone';
 }