@orangesk/orange-design-system 2.0.0-beta.27 → 2.0.0-beta.29

package/src/components/Forms/styles/config.scss

@@ -3,8 +3,9 @@
 @use "../../../styles/tokens/space";
 
 $default: (
-  background-color: color.$white,
-  border: 2px solid var(--color-surface-moderate),
+  background-color: var(--color-fill-primary),
+  border: 2px solid var(--color-border-strong),
+  color: var(--color-text-default),
 );
 
 $focus: (
@@ -15,12 +16,12 @@ $focus: (
 
 $disabled: (
   background-color: var(--color-surface-subtle),
-  border-color: var(--color-surface-moderate),
+  border-color: var(--color-border-strong),
   color: var(--color-text-secondary),
 );
 
 $disabled-checked: (
-  background-color: var(--color-surface-moderate),
+  background-color: var(--color-border-strong),
 );
 
 $readonly: (

package/src/components/Modal/Modal.static.ts

@@ -10,6 +10,8 @@ interface ModalConfig {
   root: string;
   /** Move modal into this element selector (must be unique in DOM) */
   modalsRoot: string;
+  /** Disable moving modal to #root-modals (for React controlled mode) */
+  disablePortal?: boolean;
 }
 
 const defaultConfig = (): ModalConfig => ({
@@ -111,7 +113,7 @@ export default class Modal {
   }
 
   init(): void {
-    if (this.config.modalsRoot) {
+    if (this.config.modalsRoot && !this.config.disablePortal) {
       Modal.moveToModalRoot(
         this.element,
         document.querySelector(this.config.modalsRoot),
@@ -180,11 +182,15 @@ export default class Modal {
     const scrollY = window.scrollY;
     document.body.setAttribute("data-lock-scrolltop", scrollY.toString());
 
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+
     // Lock body with position fixed and offset
     document.body.style.position = "fixed";
     document.body.style.top = `-${scrollY}px`;
     document.body.style.left = "0";
     document.body.style.right = "0";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
 
     // add modal class
     document.body.classList.add(actualClassName);
@@ -203,12 +209,17 @@ export default class Modal {
     document.body.style.top = "";
     document.body.style.left = "";
     document.body.style.right = "";
+    document.body.style.paddingRight = "";
 
     // remove modal class
     document.body.classList.remove(actualClassName);
 
-    // Restore scroll position
-    window.scrollTo(0, parseInt(scrollTop, 10));
+    // Restore scroll position instantly (ignore scroll-behavior: smooth)
+    window.scrollTo({
+      top: parseInt(scrollTop, 10),
+      left: 0,
+      behavior: "instant",
+    });
     Modal.isLocked = false;
   }
 }

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import cx from "classnames";
 
 import { useStatic } from "../../utils/hooks";
@@ -80,7 +80,16 @@ const Modal: React.FC<ModalProps> = ({
   disableFooterSpacing,
   ...other
 }) => {
-  const [modalRef, instance] = useStatic(ModalStatic);
+  // In React controlled mode (using isActive), we skip data-modal
+  // so vanilla JS won't initialize and move modal to #root-modals
+  // onHide alone works in uncontrolled mode - it's just a callback
+  const isReactControlled = isActive !== undefined;
+
+  const modalConfig = useMemo(
+    () => (isReactControlled ? { disablePortal: true } : {}),
+    [isReactControlled],
+  );
+  const [modalRef, instance] = useStatic(ModalStatic, modalConfig);
 
   useEffect(() => {
     if (!instance.current || !onHide) return;
@@ -128,7 +137,7 @@ const Modal: React.FC<ModalProps> = ({
   return (
     <div
       id={id}
-      data-modal
+      {...(!isReactControlled && { "data-modal": true })}
       className={CLASS_ROOT}
       ref={modalRef}
       role="dialog"

package/src/components/PromoBanner/PromoBanner.tsx

@@ -30,64 +30,66 @@ export const PromoBanner = ({
 }: PromoBannerProps) => {
   const classes = cx(CLASS_ROOT, className);
   return (
-    <Grid columnGapSize="large" className={classes}>
-      {variant === "reverse" && image && (
-        <GridCol
-          size={{ xs: 12, md: 6 }}
-          className={cx(
-            `${CLASS_ROOT}__image`,
-            "align-center align-md-left",
-            imageClassName,
-          )}
-        >
-          <Image
-            src={image}
-            alt="Obrázok"
-            className={cx("mb-none", { fullwidth: imageFullWidth })}
-          />
-        </GridCol>
-      )}
-
-      <GridCol
-        size={
-          variant === "vertical"
-            ? { xs: 12, sm: 10, md: 8, lg: 6 }
-            : { xs: 12, md: image ? 6 : 7 }
-        }
-        className={cx(
-          `${CLASS_ROOT}__item`,
-          {
-            "align-items-center align-center align-self-center":
-              variant === "vertical",
-          },
-          itemClassName,
+    <div className={classes}>
+      <Grid columnGapSize="large">
+        {variant === "reverse" && image && (
+          <GridCol
+            size={{ xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              "align-center align-md-left",
+              imageClassName,
+            )}
+          >
+            <Image
+              src={image}
+              alt="Obrázok"
+              className={cx("mb-none", { fullwidth: imageFullWidth })}
+            />
+          </GridCol>
         )}
-      >
-        {children}
-      </GridCol>
 
-      {image && variant !== "reverse" && (
         <GridCol
-          size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
+          size={
+            variant === "vertical"
+              ? { xs: 12, sm: 10, md: 8, lg: 6 }
+              : { xs: 12, md: image ? 6 : 7 }
+          }
           className={cx(
-            `${CLASS_ROOT}__image`,
+            `${CLASS_ROOT}__item`,
             {
-              [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
-              [`align-self-${alignImage}`]: alignImage,
-              "pt-none": alignImage === "top",
-              "pb-none": alignImage === "bottom",
-              "align-center": variant === "vertical",
+              "align-items-center align-center align-self-center":
+                variant === "vertical",
             },
-            imageClassName,
+            itemClassName,
           )}
         >
-          <Image
-            src={image}
-            alt="Obrázok"
-            className={cx("mb-none", { fullwidth: imageFullWidth })}
-          />
+          {children}
         </GridCol>
-      )}
-    </Grid>
+
+        {image && variant !== "reverse" && (
+          <GridCol
+            size={variant === "vertical" ? { xs: 12 } : { xs: 12, md: 6 }}
+            className={cx(
+              `${CLASS_ROOT}__image`,
+              {
+                [`${CLASS_ROOT}__image--bleed-right`]: bleedImage,
+                [`align-self-${alignImage}`]: alignImage,
+                "pt-none": alignImage === "top",
+                "pb-none": alignImage === "bottom",
+                "align-center": variant === "vertical",
+              },
+              imageClassName,
+            )}
+          >
+            <Image
+              src={image}
+              alt="Obrázok"
+              className={cx("mb-none", { fullwidth: imageFullWidth })}
+            />
+          </GridCol>
+        )}
+      </Grid>
+    </div>
   );
 };

package/src/components/PromoBanner/tests/PromoBanner.conformance.test.js

@@ -714,10 +714,12 @@ describe("PromoBanner Component Conformance Tests", () => {
         </PromoBanner>,
       );
 
-      const grid = container.querySelector(".grid");
+      const banner = container.querySelector(".promo-banner");
+      const grid = banner.querySelector(".grid");
       const gridCol = container.querySelector(".grid__col");
 
-      expect(grid).toHaveClass("grid", "promo-banner", "test-grid");
+      expect(banner).toHaveClass("promo-banner", "test-grid");
+      expect(grid).toHaveClass("grid");
       expect(gridCol).toHaveClass("grid__col");
     });
 

package/src/components/PromoBanner/tests/PromoBanner.unit.test.js

@@ -20,12 +20,16 @@ describe("PromoBanner", () => {
         render(<PromoBanner />);
         const banner = document.querySelector(".promo-banner");
         expect(banner).toHaveClass("promo-banner");
+        const grid = banner.querySelector(".grid");
+        expect(grid).toBeInTheDocument();
       });
 
       it("renders as Grid component", () => {
         const { container } = render(<PromoBanner />);
-        const grid = container.querySelector(".grid");
+        const banner = container.querySelector(".promo-banner");
+        const grid = banner.querySelector(".grid");
         expect(grid).toBeInTheDocument();
+        expect(grid).toHaveClass("grid");
       });
     });