@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-1-20250709023540

package/src/Modal/ContextModal/ContextModal.module.scss

@@ -3,104 +3,106 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../GenericModal/GenericModal.module';
 
-.modal {
-  @extend %genericModal;
+@layer kz-components {
+  .modal {
+    @extend %genericModal;
 
-  min-width: 300px;
-  max-width: 840px;
+    min-width: 300px;
+    max-width: 840px;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    width: 90%;
-  }
+    @media (min-width: $layout-breakpoints-medium) {
+      width: 90%;
+    }
 
-  .animatingEnter & {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+    .animatingEnter & {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
-  }
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
 
-  .animatingLeave & {
-    animation-duration: $ca-duration-rapid;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-out;
+    .animatingLeave & {
+      animation-duration: $ca-duration-rapid;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-out;
 
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+    }
   }
-}
 
-.header {
-  color: $color-purple-800;
-  text-align: start;
+  .header {
+    color: $color-purple-800;
+    text-align: start;
 
-  &.padded {
-    padding: $spacing-md;
+    &.padded {
+      padding: $spacing-md;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      padding: $spacing-md $spacing-lg;
+      @media (min-width: $layout-breakpoints-medium) {
+        padding: $spacing-md $spacing-lg;
+      }
     }
   }
-}
 
-%footer {
-  white-space: initial;
+  %footer {
+    white-space: initial;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    white-space: nowrap;
+    @media (min-width: $layout-breakpoints-medium) {
+      white-space: nowrap;
+    }
   }
-}
-
-.footer {
-  @extend %footer;
-}
 
-.footerWithSecondaryAction {
-  @extend %footer;
+  .footer {
+    @extend %footer;
+  }
 
-  margin-inline-start: calc(-1 * #{$spacing-sm});
-}
+  .footerWithSecondaryAction {
+    @extend %footer;
 
-.emptyFooter {
-  height: $spacing-sm;
-}
+    margin-inline-start: calc(-1 * #{$spacing-sm});
+  }
 
-.portraitContentlayout {
-  padding: $spacing-md;
-  display: block;
-  box-sizing: content-box;
-
-  @media (min-width: $layout-breakpoints-medium) {
-    display: grid;
-    max-width: 800px;
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-    column-gap: $spacing-xl;
-    padding: $spacing-md $spacing-lg;
+  .emptyFooter {
+    height: $spacing-sm;
   }
-}
 
-.landscapeContentlayout {
-  display: flex;
-  padding: $spacing-md;
-  flex-direction: column;
+  .portraitContentlayout {
+    padding: $spacing-md;
+    display: block;
+    box-sizing: content-box;
 
-  @media (min-width: $layout-breakpoints-medium) {
-    padding: $spacing-md $spacing-lg;
+    @media (min-width: $layout-breakpoints-medium) {
+      display: grid;
+      max-width: 800px;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      column-gap: $spacing-xl;
+      padding: $spacing-md $spacing-lg;
+    }
   }
 
-  .image {
+  .landscapeContentlayout {
     display: flex;
+    padding: $spacing-md;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .content {
-    padding-inline-start: 0;
 
     @media (min-width: $layout-breakpoints-medium) {
-      max-width: 100%;
+      padding: $spacing-md $spacing-lg;
+    }
+
+    .image {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .content {
+      padding-inline-start: 0;
+
+      @media (min-width: $layout-breakpoints-medium) {
+        max-width: 100%;
+      }
     }
   }
 }

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -8,123 +8,127 @@
 @import '../../../styles/utils/border';
 @import '../../../styles/utils/animation';
 
-.defaultModalWidth {
-  min-width: 300px;
-  max-width: 600px;
-}
+@layer kz-components {
+  .defaultModalWidth {
+    min-width: 300px;
+    max-width: 600px;
+  }
 
-.backdropLayer {
-  position: fixed;
-  background-color: #000;
-  opacity: 50%;
-  z-index: $ca-z-index-modal-backdrop;
+  .backdropLayer {
+    position: fixed;
+    background-color: #000;
+    opacity: 50%;
+    z-index: $ca-z-index-modal-backdrop;
 
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-}
+    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+  }
 
-.scrollLayer {
-  position: fixed;
-  display: flex;
-  align-items: center;
-  z-index: $ca-z-index-modal;
-  overflow-y: auto;
+  .scrollLayer {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    z-index: $ca-z-index-modal;
+    overflow-y: auto;
 
-  @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
-}
-
-.modalLayer {
-  // use flexbox auto margins to horizontally and vertically centre the modal
-  // because in IE11, `align-items: center` and `justify-content: center` cause
-  // long modal content to become unreachable if they go off-screen
-  margin: auto;
-  padding: $ca-grid 0;
-  width: 100%;
-}
+    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
+  }
 
-%genericModal {
-  margin: auto;
-  background-color: $color-white;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  position: relative;
-  width: 90%;
-  -webkit-font-smoothing: antialiased;
-  color: $color-purple-800;
-
-  @include ca-media-tablet-and-up {
+  .modalLayer {
+    // use flexbox auto margins to horizontally and vertically centre the modal
+    // because in IE11, `align-items: center` and `justify-content: center` cause
+    // long modal content to become unreachable if they go off-screen
+    margin: auto;
+    padding: $ca-grid 0;
     width: 100%;
   }
 
-  // wrap the modal container with a focus ring when the title has focus
-  // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
-  &:has(:global([class*='modalLabel']):focus-visible) {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-300);
-    outline-offset: 2px;
+  %genericModal {
+    margin: auto;
+    background-color: $color-white;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-large-box-shadow;
+    position: relative;
+    width: 90%;
+    -webkit-font-smoothing: antialiased;
+    color: $color-purple-800;
+
+    @include ca-media-tablet-and-up {
+      width: 100%;
+    }
+
+    // wrap the modal container with a focus ring when the title has focus
+    // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
+    &:has(:global([class*='modalLabel']):focus-visible) {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-300);
+      outline-offset: 2px;
+    }
   }
-}
 
-.transitionLayer {
-  transition: opacity $ca-duration-fast ease-in-out;
-  opacity: 1;
+  .transitionLayer {
+    transition: opacity $ca-duration-fast ease-in-out;
+    opacity: 1;
+    position: relative;
+    z-index: $ca-z-index-modal;
 
-  .backdropLayer {
-    /*
+    .backdropLayer {
+      /*
       There's a weird bug in Chrome/Blink 102.x that animates the opacity
       all the way to 1 with 200ms ("rapid" token), but is fine with
       201ms, see Jira [KDS-523]
     */
-    @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
-  }
+      @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
+    }
 
-  [data-modal] {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+    [data-modal] {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
   }
-}
 
-// WAITING FOR TEXTFIELD
-.animatingEnter {
-  [data-modal] {
-    animation-duration: $ca-duration-fast;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-in;
+  // WAITING FOR TEXTFIELD
+  .animatingEnter {
+    [data-modal] {
+      animation-duration: $ca-duration-fast;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-in;
 
-    @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
+    }
   }
-}
 
-.animatingLeave {
-  transition-duration: $ca-duration-rapid;
-  opacity: 0;
+  .animatingLeave {
+    transition-duration: $ca-duration-rapid;
+    opacity: 0;
 
-  .backdropLayer {
-    @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
-  }
+    .backdropLayer {
+      @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
+    }
 
-  [data-modal] {
-    animation-duration: $ca-duration-rapid;
-    animation-fill-mode: forwards;
-    animation-timing-function: $ca-bounce-out;
+    [data-modal] {
+      animation-duration: $ca-duration-rapid;
+      animation-fill-mode: forwards;
+      animation-timing-function: $ca-bounce-out;
 
-    @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
+    }
   }
-}
 
-.unscrollable {
-  /* Tech debt - this !important existed before Stylelint rules */
-  overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
-}
+  .unscrollable {
+    /* Tech debt - this !important existed before Stylelint rules */
+    overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+  }
 
-.pseudoScrollbar {
-  /* Tech debt - this !important existed before Stylelint rules */
-  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
-}
+  .pseudoScrollbar {
+    /* Tech debt - this !important existed before Stylelint rules */
+    padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
+  }
 
-.hide {
-  opacity: 0%;
-  pointer-events: none;
+  .hide {
+    opacity: 0%;
+    pointer-events: none;
+  }
 }

package/src/Modal/GenericModal/GenericModal.tsx

@@ -58,6 +58,9 @@ export const GenericModal = ({
   }
 
   const focusOnAccessibleLabel = (): void => {
+    // Add SSR guard
+    if (typeof document === 'undefined') return
+
     // Check if focus already exists within the modal
     if (modalLayer?.contains(document.activeElement)) {
       return
@@ -69,6 +72,9 @@ export const GenericModal = ({
   }
 
   const a11yWarn = (): void => {
+    // Add SSR guard
+    if (typeof document === 'undefined') return
+
     // Ensure that consumers have provided an element that labels the modal
     // to meet ARIA accessibility guidelines.
     if (!document.getElementById(labelledByID)) {
@@ -80,6 +86,9 @@ export const GenericModal = ({
   }
 
   const preventBodyScroll = (): void => {
+    // Add SSR guard
+    if (typeof window === 'undefined' || typeof document === 'undefined') return
+
     const hasScrollbar = window.innerWidth > document.documentElement.clientWidth
     const scrollStyles = [styles.unscrollable]
 
@@ -111,12 +120,15 @@ export const GenericModal = ({
   const onBeforeEnterHandler = (): void => {
     preventBodyScroll()
 
-    if (onEscapeKeyup) {
+    if (onEscapeKeyup && typeof document !== 'undefined') {
       document.addEventListener('keyup', escapeKeyHandler)
     }
   }
 
   const cleanUpAfterClose = (): void => {
+    // Add SSR guard
+    if (typeof document === 'undefined') return
+
     document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
 
     if (onEscapeKeyup) {
@@ -133,6 +145,12 @@ export const GenericModal = ({
     cleanUpAfterClose()
     propsOnAfterLeave?.()
   }
+
+  // Don't render portal during SSR
+  if (typeof document === 'undefined') {
+    return <></>
+  }
+
   return createPortal(
     <Transition
       appear={true}

package/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx

@@ -21,7 +21,11 @@ export const TestBase: Story = {
 
     return (
       <>
-        <button type="button" className="border border-gray-500" onClick={() => setIsOpen(true)}>
+        <button
+          type="button"
+          className="border border-gray-500 relative z-10"
+          onClick={() => setIsOpen(true)}
+        >
           Open Modal
         </button>
         <GenericModal
@@ -30,6 +34,7 @@ export const TestBase: Story = {
           onOutsideModalClick={handleDismiss}
           onEscapeKeyup={handleDismiss}
           id="GenericModalTestId"
+          className="will-change-[opacity]"
         >
           <ModalHeader>
             <ModalAccessibleLabel>Test Modal</ModalAccessibleLabel>

package/src/Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.module.scss

@@ -1,3 +1,5 @@
-.modalDescription {
-  grid-column-start: 2;
+@layer kz-components {
+  .modalDescription {
+    grid-column-start: 2;
+  }
 }

package/src/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss

@@ -2,35 +2,37 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/layout';
 
-// TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-$ca-breakpoint-small-mobile: 375px;
+@layer kz-components {
+  // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
+  $ca-breakpoint-small-mobile: 375px;
 
-@mixin ca-media-small-mobile {
-  @media (max-width: #{$ca-breakpoint-small-mobile}) {
-    @content;
+  @mixin ca-media-small-mobile {
+    @media (max-width: #{$ca-breakpoint-small-mobile}) {
+      @content;
+    }
   }
-}
 
-.modalLabel {
-  // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
-  h2 {
-    @media (max-width: $layout-breakpoints-medium) {
-      font-size: 1.625rem;
-      line-height: 2rem;
-    }
+  .modalLabel {
+    // TODO - Remove below styles for Heading once responsive styling has been added to the Heading Component
+    h2 {
+      @media (max-width: $layout-breakpoints-medium) {
+        font-size: 1.625rem;
+        line-height: 2rem;
+      }
 
-    @include ca-media-small-mobile {
-      font-size: 1.5rem;
-      line-height: 1.875rem;
+      @include ca-media-small-mobile {
+        font-size: 1.5rem;
+        line-height: 1.875rem;
+      }
     }
-  }
 
-  &.prominent {
-    grid-column-start: 2;
-    text-align: start;
-  }
+    &.prominent {
+      grid-column-start: 2;
+      text-align: start;
+    }
 
-  &:focus {
-    outline: none;
+    &:focus {
+      outline: none;
+    }
   }
 }

package/src/Modal/GenericModal/subcomponents/ModalBody/ModalBody.module.scss

@@ -1,7 +1,9 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-.inputEdit {
-  background-color: $color-gray-200;
-  border-radius: $border-solid-border-radius;
+@layer kz-components {
+  .inputEdit {
+    background-color: $color-gray-200;
+    border-radius: $border-solid-border-radius;
+  }
 }