Fix: [IGL-118] Modal & Dialog header style (#661)

* Fix: [IGL-118] Modal & Dialog header style * Jest Updates * fix jest tests * tentative fix --------- Co-authored-by: Alexandre Asselin <[email protected]>
workleap · Jan 30, 2024 · 37822b2 · 37822b2
1 parent 81f2495
commit 37822b2
Show file tree

Hide file tree

Showing 12 changed files with 532 additions and 502 deletions.
diff --git a/.changeset/little-comics-boil.md b/.changeset/little-comics-boil.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/text-editor": patch
+---
+
+Fixed a badly written import in the TextEditor.
diff --git a/.changeset/shiny-lies-trade.md b/.changeset/shiny-lies-trade.md
@@ -0,0 +1,6 @@
+---
+"@igloo-ui/dialog": patch
+"@igloo-ui/modal": patch
+---
+
+Fixed the style of the modal and Dialog headers and the spacing of the close button.
diff --git a/jest.config.js b/jest.config.js
@@ -1,18 +1,21 @@
 module.exports = {
-  roots: ['<rootDir>/packages/'],
-  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
-  coverageDirectory: '<rootDir>/coverage/',
-  collectCoverageFrom: ['<rootDir>/packages/*/src/**/*.{js,jsx,ts,tsx}'],
-  testMatch: [
-    '**/__tests__/**/*.+(ts|tsx|js)',
-    '**/?(*.)+(spec|test).+(ts|tsx|js)',
-  ],
-  transform: {
-    '^.+\\.[t|j]sx?$': 'babel-jest',
-  },
-  moduleNameMapper: {
-    '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
-    '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.js',
-  },
-  transformIgnorePatterns: ['node_modules/(?!(@igloo-ui/*|@react-hook/*)/)'],
+    roots: ["<rootDir>/packages/"],
+    setupFilesAfterEnv: [
+        "@testing-library/jest-dom/extend-expect",
+        "<rootDir>/setupTests.js"
+    ],
+    coverageDirectory: "<rootDir>/coverage/",
+    collectCoverageFrom: ["<rootDir>/packages/*/src/**/*.{js,jsx,ts,tsx}"],
+    testMatch: [
+        "**/__tests__/**/*.+(ts|tsx|js)",
+        "**/?(*.)+(spec|test).+(ts|tsx|js)"
+    ],
+    moduleNameMapper: {
+        "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
+        "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
+    },
+    preset: "ts-jest/presets/js-with-babel",
+    transformIgnorePatterns: [
+        "node_modules/(?!(@igloo-ui/*|@react-hook/*|@hopper-ui/*)/)"
+    ]
 };
diff --git a/packages/Dialog/src/dialog.scss b/packages/Dialog/src/dialog.scss
@@ -11,17 +11,17 @@
         --ids-dialog-font-size: #{tokens.$font-size-4};
         --ids-dialog-max-width: calc(100% - #{tokens.$space-5});
         --ids-dialog-radius: #{tokens.$border-radius-sm};
-        --ids-dialog-header-direction: column-reverse;
         --ids-dialog-header-height: auto;
         --ids-dialog-header-font-size: #{tokens.$font-size-6};
-        --ids-dialog-header-padding: #{tokens.$space-3} #{tokens.$space-3} #{tokens.$space-2};
+        --ids-dialog-header-font-weight: #{tokens.$font-weight-medium};
+        --ids-dialog-header-padding: #{tokens.$space-6} #{tokens.$space-3} #{tokens.$space-2};
         --ids-dialog-content-padding: #{tokens.$space-2} #{tokens.$space-3} #{tokens.$space-3};
         --ids-dialog-sub-title-line-height: #{tokens.$line-height-xxxl};
         --ids-dialog-sub-title-color: #{tokens.$grey-600};
         --ids-dialog-sub-title-padding-top: 0;
-        --ids-dialog-close-margin: #{tokens.$space-0};
-        --ids-dialog-close-align: flex-end;
-        --ids-dialog-close-position: relative;
+        --ids-dialog-close-spacing-horizontal: #{tokens.$space-2};
+        --ids-dialog-close-spacing-vertical: #{tokens.$space-2};
+        --ids-dialog-close-position: absolute;
         --ids-dialog-close-padding-x: 0;
         --ids-dialog-buttons-margin: #{tokens.$space-5} -#{tokens.$space-0} -#{tokens.$space-2};
         --ids-dialog-button-margin: #{tokens.$space-2} #{tokens.$space-0};
@@ -34,19 +34,19 @@
         --ids-dialog-font-size: var(--hop-body-md-font-size);
         --ids-dialog-max-width: calc(100% - 2rem);
         --ids-dialog-radius: var(--hop-shape-rounded-md);
-        --ids-dialog-header-direction: column-reverse;
         --ids-dialog-header-height: auto;
         --ids-dialog-header-font-size: var(--hop-heading-md-font-size);
+        --ids-dialog-header-font-weight: var(--hop-heading-md-font-weight);
         --ids-dialog-header-line-height: var(--hop-heading-md-line-height);
-        --ids-dialog-header-padding: var(--hop-space-inset-md) var(--hop-space-inset-md) 0;
+        --ids-dialog-header-padding: calc(var(--hop-space-inset-md) + var(--hop-space-inset-xl)) var(--hop-space-inset-md) 0;
         --ids-dialog-content-padding: 0 var(--hop-space-inset-md) var(--hop-space-inset-md);
         --ids-dialog-sub-title-line-height: var(--hop-body-md-line-height);
         --ids-dialog-sub-title-color: var(--hop-neutral-text-weak);
         --ids-dialog-sub-title-padding-top: var(--hop-space-inset-md);
-        --ids-dialog-close-margin: 0;
-        --ids-dialog-close-align: flex-end;
-        --ids-dialog-close-position: relative;
-        --ids-dialog-close-padding-x: var(--hop-space-inset-xl);
+        --ids-dialog-close-spacing-horizontal: calc(var(--hop-space-inline-xs) + var(--hop-space-inline-sm));
+        --ids-dialog-close-spacing-vertical: calc(var(--hop-space-stack-xs) + var(--hop-space-stack-sm));
+        --ids-dialog-close-position: absolute;
+        --ids-dialog-close-padding-x: 0;
         --ids-dialog-buttons-margin: var(--hop-space-stack-xl) 0 calc(-1 * var(--hop-space-inset-sm));
         --ids-dialog-button-margin: var(--hop-space-stack-sm) 0;
         --ids-dialog-button-width: 2rem;
@@ -56,8 +56,10 @@
     @media (width >= #{tokens.$breakpoints-sm}) {
         :root {
             --ids-dialog-header-padding: #{tokens.$space-4} #{tokens.$space-4} #{tokens.$space-2};
-            --ids-dialog-close-margin: -#{tokens.$space-2} -#{tokens.$space-2} #{tokens.$space-0} #{tokens.$space-0};
-            --ids-dialog-close-position: relative;
+            --ids-dialog-close-spacing-horizontal: #{tokens.$space-3};
+            --ids-dialog-close-spacing-vertical: #{tokens.$space-3};
+            --ids-dialog-close-position: absolute;
+            --ids-dialog-close-padding-x: #{tokens.$space-5};
             --ids-dialog-content-padding: #{tokens.$space-0} #{tokens.$space-4} #{tokens.$space-4};
             --ids-dialog-buttons-margin: var(--hop-space-stack-lg) -#{tokens.$space-2} #{tokens.$space-0};
             --ids-dialog-button-margin: 0 #{tokens.$space-2};
@@ -68,8 +70,10 @@
 
         [data-brand="workleap"] {
             --ids-dialog-header-padding: var(--hop-space-inset-lg) var(--hop-space-inset-lg) 0;
-            --ids-dialog-close-margin: 0;
+            --ids-dialog-close-spacing-horizontal: calc(var(--hop-space-inline-xs) + var(--hop-space-inline-md));
+            --ids-dialog-close-spacing-vertical: calc(var(--hop-space-stack-xs) + var(--hop-space-stack-md));
             --ids-dialog-close-position: absolute;
+            --ids-dialog-close-padding-x: var(--hop-space-inset-xl);
             --ids-dialog-content-padding: 0 var(--hop-space-inset-lg) var(--hop-space-inset-lg);
             --ids-dialog-buttons-margin: var(--hop-space-stack-xl) calc(-1 * var(--hop-space-inset-sm)) 0;
             --ids-dialog-button-margin: 0 var(--hop-space-inset-sm);
@@ -95,7 +99,6 @@
         align-items: center;
         border: none;
         display: flex;
-        flex-direction: var(--ids-dialog-header-direction, initial);
         min-height: var(--ids-dialog-header-height);
         padding: var(--ids-dialog-header-padding);
         position: relative;
@@ -107,8 +110,8 @@
 
     .ids-dialog .ids-modal__title {
         font-size: var(--ids-dialog-header-font-size);
-        line-height: var(--ids-dialog-header-line-height);
         font-weight: var(--ids-dialog-header-font-weight);
+        line-height: var(--ids-dialog-header-line-height);
         text-align: center;
     }
 
@@ -120,8 +123,9 @@
 
     .ids-dialog .ids-modal__close {
         align-self: var(--ids-dialog-close-align, initial);
-        margin: var(--ids-dialog-close-margin);
         position: var(--ids-dialog-close-position);
+        right: var(--ids-dialog-close-spacing-horizontal);
+        top: var(--ids-dialog-close-spacing-vertical);
     }
 
     .ids-dialog .ids-modal__content {

diff --git a/packages/Modal/package.json b/packages/Modal/package.json
@@ -28,6 +28,7 @@
         "@igloo-ui/icon-button": "^1.2.0",
         "@igloo-ui/icons": "^1.12.2",
         "@igloo-ui/tokens": "^2.0.0",
+        "@hopper-ui/icons-react16": "1.1.1",
         "@hopper-ui/tokens": "^3.1.3",
         "@igloo-ui/carousel": "^0.3.0",
         "@types/react-dom": "18.0.11",

diff --git a/packages/Modal/src/Modal.tsx b/packages/Modal/src/Modal.tsx
@@ -15,8 +15,7 @@ import {
 } from "react-aria";
 
 import IconButton from "@igloo-ui/icon-button";
-import Close from "@igloo-ui/icons/dist/Close";
-import ChevronLeft from "@igloo-ui/icons/dist/ChevronLeft";
+import { AngleLeftIcon, DismissIcon } from "@hopper-ui/icons-react16";
 import Carousel from "@igloo-ui/carousel";
 
 import "./modal.scss";
@@ -192,15 +191,14 @@ const Modal: React.FunctionComponent<ModalProps> = (props: ModalProps) => {
                                 >
                                     {displayBackBtn ? (
                                         <IconButton
-                                            size="small"
                                             className="ids-modal__back"
                                             onClick={() => {
                                                 if (carousel && carousel.currentSlide) {
                                                     handleOnPageChange(carousel.currentSlide - 1);
                                                 }
                                             }}
                                             appearance={{ type: "ghost", variant: "secondary" }}
-                                            icon={<ChevronLeft size="medium" />}
+                                            icon={<AngleLeftIcon />}
                                         />
                                     ) : (
                                         <></>
@@ -209,12 +207,12 @@ const Modal: React.FunctionComponent<ModalProps> = (props: ModalProps) => {
                                     {title && <h5 className="ids-modal__title">{title}</h5>}
 
                                     <IconButton
-                                        size="small"
+                                        size="medium"
                                         className="ids-modal__close"
                                         onClick={onClose}
                                         appearance={{ type: "ghost", variant: "secondary" }}
                                         aria-label={closeBtnAriaLabel}
-                                        icon={<Close />}
+                                        icon={<DismissIcon />}
                                     />
                                 </div>
                                 <div className="ids-modal__content">