Merge branch 'master' into FE-6232

Sage · Oct 24, 2024 · 6a9c0a7 · 6a9c0a7
2 parents fb6762f + 7c0955e
commit 6a9c0a7
Show file tree

Hide file tree

Showing 63 changed files with 1,221 additions and 1,815 deletions.
diff --git a/.storybook/modes.ts b/.storybook/modes.ts
@@ -8,4 +8,19 @@ export const allModes = {
       width: 900,
     },
   },
+  xsm: {
+    viewport: "xsm",
+  },
+  sm: {
+    viewport: "sm",
+  },
+  md: {
+    viewport: "md",
+  },
+  lg: {
+    viewport: "lg",
+  },
+  xl: {
+    viewport: "xl",
+  },
 };
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -9,41 +9,11 @@ import isChromatic from "./isChromatic";
 import { Preview } from "@storybook/react";
 
 const customViewports = {
-  extraSmall: {
-    name: "Smart Phones",
-    styles: {
-      width: "320px",
-      height: "599px",
-    },
-  },
-  small: {
-    name: "Portrait Tablets",
-    styles: {
-      width: "600px",
-      height: "959px",
-    },
-  },
-  medium: {
-    name: "Landscape Tablets & Low-Res Laptops",
-    styles: {
-      width: "960px",
-      height: "1259px",
-    },
-  },
-  large: {
-    name: "High-Res Laptops & Monitors",
-    styles: {
-      width: "1260px",
-      height: "1920px",
-    },
-  },
-  extraLarge: {
-    name: "Ultra High-Res Monitors",
-    styles: {
-      width: "1921px",
-      height: "2500px",
-    },
-  },
+  xsm: { name: "Extra small", styles: { width: "320px", height: "900px" } },
+  sm: { name: "Small", styles: { width: "640px", height: "900px" } },
+  md: { name: "Medium", styles: { width: "768px", height: "900px" } },
+  lg: { name: "Large", styles: { width: "1024px", height: "900px" } },
+  xl: { name: "Extra large", styles: { width: "1280px", height: "900px" } },
 };
 
 const parameters = {

diff --git a/.storybook/utils/styled-system-props.ts b/.storybook/utils/styled-system-props.ts
@@ -992,9 +992,15 @@ const generateStyledSystemPositionProps = (defaults: StyledSystemDefaults) => {
   ];
 };
 
+const filterProps = (
+  props: Record<string, unknown>[],
+  excludes: string[] = []
+) => props.filter((prop) => !excludes.includes(Object.keys(prop)[0]));
+
 const generateStyledSystemProps = (
   props: StyledSystemProps,
-  defaults?: StyledSystemDefaults
+  defaults?: StyledSystemDefaults,
+  excludes?: string[]
 ): ArgTypes<StyledSystemProps> => {
   const {
     spacing,
@@ -1011,37 +1017,70 @@ const generateStyledSystemProps = (
   const result: Props = {};
 
   if (spacing) {
-    Object.assign(result, ...generateStyledSystemSpacingProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemSpacingProps(defaults || {}), excludes)
+    );
   }
   if (margin) {
-    Object.assign(result, ...generateStyledSystemMarginProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemMarginProps(defaults || {}), excludes)
+    );
   }
   if (padding) {
-    Object.assign(result, ...generateStyledSystemPaddingProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemPaddingProps(defaults || {}), excludes)
+    );
   }
   if (color) {
-    Object.assign(result, ...generateStyledSystemColorProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemColorProps(defaults || {}), excludes)
+    );
   }
   if (layout) {
-    Object.assign(result, ...generateStyledSystemLayoutProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemLayoutProps(defaults || {}), excludes)
+    );
   }
   if (width) {
-    Object.assign(result, ...generateStyledSystemWidthProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemWidthProps(defaults || {}), excludes)
+    );
   }
   if (flexBox) {
-    Object.assign(result, ...generateStyledSystemFlexBoxProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemFlexBoxProps(defaults || {}), excludes)
+    );
   }
   if (grid) {
-    Object.assign(result, ...generateStyledSystemGridProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(generateStyledSystemGridProps(defaults || {}), excludes)
+    );
   }
   if (background) {
     Object.assign(
       result,
-      ...generateStyledSystemBackgroundProps(defaults || {})
+      ...filterProps(
+        generateStyledSystemBackgroundProps(defaults || {}),
+        excludes
+      )
     );
   }
   if (position) {
-    Object.assign(result, ...generateStyledSystemPositionProps(defaults || {}));
+    Object.assign(
+      result,
+      ...filterProps(
+        generateStyledSystemPositionProps(defaults || {}),
+        excludes
+      )
+    );
   }
 
   return result;

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,27 @@
+### [144.0.1](https://github.com/Sage/carbon/compare/v144.0.0...v144.0.1) (2024-10-23)
+
+
+### Bug Fixes
+
+* **dialog:** ensure height never exceeds 90% of the viewport height ([619a651](https://github.com/Sage/carbon/commit/619a6516ac3b0ac05e55219e79df529b491a9031))
+* prevent sticky footer form content from overflowing in Carbon modal components ([cb77fb7](https://github.com/Sage/carbon/commit/cb77fb78f72d866458df49964c08f567b971a110)), closes [#6969](https://github.com/Sage/carbon/issues/6969)
+* resolve layout issues with sticky footer forms inside Carbon modal components ([0fe249d](https://github.com/Sage/carbon/commit/0fe249db3d2e598f73eaccd3388e6feea61c2c80))
+
+## [144.0.0](https://github.com/Sage/carbon/compare/v143.2.5...v144.0.0) (2024-10-21)
+
+
+### ⚠ BREAKING CHANGES
+
+* **menu, menu-item:** `Menu` no longer supports `height`, `minHeight`, `maxHeight`, `size`,
+`overflowY` and `display` props. `MenuItem` no longer supports `height`, `minHeight`,
+`maxHeight`, `size`, `verticalAlign`, `overflow`, `overflowY`, `overflowX` and
+`display` props.
+
+### Bug Fixes
+
+* **menu-item:** ensure that it does not render children when `submenu` is an empty string ([975d5c6](https://github.com/Sage/carbon/commit/975d5c659ab99193bb94a194c3b8de834a94c0b6)), closes [#7010](https://github.com/Sage/carbon/issues/7010)
+* **menu, menu-item:** ensure that menu-items all remain the same height if any wrap to new lines ([501337c](https://github.com/Sage/carbon/commit/501337c4651d5bdd4713e986c207e453bb6beb68)), closes [#6934](https://github.com/Sage/carbon/issues/6934) [#7000](https://github.com/Sage/carbon/issues/7000)
+
 ### [143.2.5](https://github.com/Sage/carbon/compare/v143.2.4...v143.2.5) (2024-10-18)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "143.2.5",
+  "version": "144.0.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

diff --git a/playwright/components/alert/index.ts b/playwright/components/alert/index.ts
@@ -27,15 +27,4 @@ const alertDialog = (page: Page) => {
   return page.locator(ALERT_DIALOG);
 };
 
-const alertChildren = (page: Page) => {
-  return page.locator('[data-component="alert"] div:nth-of-type(2) div');
-};
-
-export {
-  alert,
-  alertCrossIcon,
-  alertTitle,
-  alertSubtitle,
-  alertDialog,
-  alertChildren,
-};
+export { alert, alertCrossIcon, alertTitle, alertSubtitle, alertDialog };
diff --git a/playwright/components/select/index.ts b/playwright/components/select/index.ts
@@ -14,7 +14,6 @@ import {
   SELECT_LIST_SCROLLABLE_WRAPPER,
 } from "./locators";
 import { PILL_PREVIEW } from "../pill/locators";
-import { ALERT_DIALOG } from "../dialog/locators";
 import { getDataElementByValue } from "..";
 
 // component preview locators
@@ -102,8 +101,5 @@ export const filterableSelectAddElementButton = (page: Page) =>
 export const filterableSelectButtonIcon = (page: Page) =>
   filterableSelectAddElementButton(page).locator("span:nth-child(2)");
 
-export const filterableSelectAddNewButton = (page: Page) =>
-  page.locator(ALERT_DIALOG).locator("div:nth-child(3) > div > button");
-
 export const selectResetButton = (page: Page) =>
   page.locator(SELECT_RESET_BUTTON);
diff --git a/src/components/advanced-color-picker/advanced-color-picker.pw.tsx b/src/components/advanced-color-picker/advanced-color-picker.pw.tsx
@@ -396,25 +396,6 @@ test.describe(
       await elementToBlur.blur();
       expect(callbackCount).toBe(0);
     });
-
-    test("should call onBlur callback when a blur event is triggered", async ({
-      mount,
-      page,
-    }) => {
-      let callbackCount = 0;
-      await mount(
-        <AdvancedColorPickerCustom
-          onBlur={() => {
-            callbackCount += 1;
-          }}
-        />
-      );
-
-      const elementToFocus = simpleColorPickerInput(page, 7);
-      await elementToFocus.focus();
-      await page.locator("body").click({ position: { x: 0, y: 0 } });
-      expect(callbackCount).toBe(1);
-    });
   }
 );
 

diff --git a/src/components/advanced-color-picker/advanced-color-picker.style.ts b/src/components/advanced-color-picker/advanced-color-picker.style.ts
@@ -3,10 +3,7 @@ import { margin } from "styled-system";
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 import { StyledColorOptions } from "../simple-color-picker/simple-color-picker.style";
 import { StyledSimpleColor } from "../simple-color-picker/simple-color/simple-color.style";
-import {
-  StyledDialogContent,
-  StyledDialogInnerContent,
-} from "../dialog/dialog.style";
+import { StyledDialogContent } from "../dialog/dialog.style";
 import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
 import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";
@@ -59,10 +56,6 @@ const DialogStyle = styled(Dialog)`
     padding: var(--spacing200);
   }
 
-  ${StyledDialogInnerContent} {
-    padding: 0;
-  }
-
   ${StyledColorOptions} {
     max-width: 285px;
     ${StyledSimpleColor} {

diff --git a/src/components/alert/alert.pw.tsx b/src/components/alert/alert.pw.tsx
@@ -4,7 +4,6 @@ import {
   alertCrossIcon,
   alertTitle,
   alertSubtitle,
-  alertChildren,
   alertDialog,
 } from "../../../playwright/components/alert";
 import {
@@ -50,9 +49,7 @@ test.describe("should render Alert component", () => {
     test(`with ${text} as children`, async ({ mount, page }) => {
       await mount(<AlertComponent title="title">{text}</AlertComponent>);
 
-      const children = alertChildren(page);
-      const alertChildrenText = await children.textContent();
-      expect(alertChildrenText).toEqual(text);
+      await expect(page.getByText(text)).toBeVisible();
     });
   });
 

diff --git a/src/components/confirm/confirm.pw.tsx b/src/components/confirm/confirm.pw.tsx
@@ -14,6 +14,7 @@ import {
   assertCssValueIsApproximately,
   checkAccessibility,
   checkDialogIsInDOM,
+  getStyle,
   waitForAnimationEnd,
 } from "../../../playwright/support/helper";
 import { SIZE, CHARACTERS } from "../../../playwright/support/constants";
@@ -105,28 +106,30 @@ test.describe("should render Confirm component", () => {
     });
   });
 
-  heights.forEach(([heightnumber, heightstring]) => {
-    test(`should check Confirm height is ${heightstring}px`, async ({
+  ["0px", "100px", "500px"].forEach((height) => {
+    test(`height of Confirm dialog is ${height} when height prop is ${height}`, async ({
       mount,
       page,
     }) => {
-      await mount(<ConfirmComponent height={heightstring} />);
+      await page.setViewportSize({ width: 600, height: 1000 });
+      await mount(<ConfirmComponent height={height} />);
 
-      const viewportHeight = 768;
+      await expect(page.getByRole("alertdialog")).toHaveCSS("height", height);
+    });
+  });
 
-      let resultHeight: number;
-      if (heightnumber >= viewportHeight - 20) {
-        resultHeight = viewportHeight - 20;
-      } else {
-        resultHeight = heightnumber;
-      }
+  test("Confirm dialog's height does not exceed the height of the viewport", async ({
+    mount,
+    page,
+  }) => {
+    await page.setViewportSize({ width: 600, height: 1000 });
+    await mount(<ConfirmComponent height="1200px" />);
 
-      await assertCssValueIsApproximately(
-        page.getByRole("alertdialog"),
-        "height",
-        resultHeight
-      );
-    });
+    const actualDialogHeight = parseInt(
+      await getStyle(page.getByRole("alertdialog"), "height")
+    );
+
+    expect(actualDialogHeight).toBeLessThanOrEqual(1000);
   });
 
   ([