Merge branch 'master' into icon_font_updates_060125

.eslintrc

@@ -217,6 +217,7 @@
         "playwright/no-commented-out-tests": "error",
         "playwright/no-focused-test": "error",
         "playwright/no-skipped-test": "warn",
+        "playwright/no-wait-for-timeout": "error",
         "no-return-await": "warn",
         "no-return-assign": "warn",
         "no-await-in-loop": "warn",
@@ -225,7 +226,8 @@
       "settings": {
         "playwright": {
           "messages": {
-            "noSkippedTest": "Test skipped. If unresolved, raise a JIRA ticket or GitHub issue, then reference it in a code comment above."
+            "noSkippedTest": "Test skipped. If unresolved, raise a JIRA ticket or GitHub issue, then reference it in a code comment above.",
+            "noWaitForTimeout": "Hardcoded timeouts make tests fragile and inefficient. Use Playwright’s built-in waits (e.g. `locator.waitFor()`) or auto-retrying assertions (e.g. `await expect(locator).toBeVisible()`) to wait for conditions like element visibility or text presence." 
           }
         }
       }

.github/workflows/playwright.yml

@@ -16,20 +16,23 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
     steps:
       - uses: actions/checkout@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: ">=20.9.0 20"
+
       - name: Cache central NPM modules
         uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
+      
       - name: Install dependencies
         run: |
           npm ci
@@ -42,7 +45,7 @@ jobs:
         run: npm run test:ct -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: Upload blob report to Artifacts
-        if: always()
+        if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
           name: blob-report-${{ matrix.shardIndex }}
@@ -51,7 +54,7 @@ jobs:
 
   merge-reports:
     name: "Merge reports from all shards"
-    if: always()
+    if: ${{ !cancelled() }}
     needs: [playwright-tests]
     runs-on: ubuntu-latest
     steps:

.prettierignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 package-lock.json
+.eslintrc

CHANGELOG.md

@@ -1,3 +1,17 @@
+### [146.3.1](https://github.com/Sage/carbon/compare/v146.3.0...v146.3.1) (2025-01-09)
+
+
+### Bug Fixes
+
+* **menu-item:** ensure list style is none in Safari ([94f10d0](https://github.com/Sage/carbon/commit/94f10d0b1ed81ddf9b5bae7ccf492672e073aa5f))
+
+## [146.3.0](https://github.com/Sage/carbon/compare/v146.2.1...v146.3.0) (2025-01-08)
+
+
+### Features
+
+* **labels:** updates alignment prop usage so it works regardless of the inline prop ([e9665c9](https://github.com/Sage/carbon/commit/e9665c9d6a6a84255e5e3ccc97c4414d9cf1d8d9))
+
 ### [146.2.1](https://github.com/Sage/carbon/compare/v146.2.0...v146.2.1) (2024-12-19)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "146.2.1",
+  "version": "146.3.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

playwright-ct.config.ts

@@ -8,31 +8,27 @@ const playwrightDir = resolve(__dirname, "./playwright");
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  /** Directory with the test files. */
   testDir: resolve(__dirname, "./src/components"),
-  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+
   snapshotDir: resolve(playwrightDir, "./__snapshots__"),
-  /* The output directory for files created during test execution */
+
   outputDir: resolve(playwrightDir, "./test-results"),
-  /* Maximum time one test can run for. */
+
   timeout: 30 * 1000,
-  /* Run tests in files in parallel */
+
   fullyParallel: true,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 8 : undefined,
-  // Limit the number of failures on CI to save resources
+
+  retries: 3,
+
   maxFailures: process.env.CI ? 10 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+
   reporter: process.env.CI
     ? "blob"
     : [["html", { outputFolder: resolve(playwrightDir, "./test-report") }]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+
   use: {
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "retain-on-failure",
-    /* Port to use for Playwright component endpoint. */
+
     ctPort: 3100,
     /* Custom config for internal bundler Playwright uses for component tests. See https://playwright.dev/docs/test-components#under-the-hood */
     ctViteConfig: {
@@ -45,7 +41,7 @@ export default defineConfig({
     },
   },
   testMatch: /.*\.pw\.tsx/,
-  /* Configure projects for major browsers */
+
   projects: [
     {
       name: "chromium",

playwright/index.tsx

@@ -6,25 +6,10 @@ import I18nProvider from "../src/components/i18n-provider/i18n-provider.componen
 import { noTheme, sageTheme } from "../src/style/themes";
 import enGB from "../src/locales/en-gb";
 import "../src/style/fonts.css";
-import * as dateLocales from "./support/date-fns-locales";
 
 export type HooksConfig = {
   validationRedesignOptIn?: boolean;
   theme?: string;
-  localeName?: keyof typeof dateLocales;
-};
-
-const computedLocale = (str: keyof typeof dateLocales) => {
-  return {
-    locale: () => str,
-    date: {
-      dateFnsLocale: () => dateLocales[str],
-      ariaLabels: {
-        previousMonthButton: () => "Previous month",
-        nextMonthButton: () => "Next month",
-      },
-    },
-  };
 };
 
 const mountedTheme = (theme: string) => {
@@ -42,7 +27,6 @@ const mountedTheme = (theme: string) => {
 beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
   const {
     theme = "sage",
-    localeName,
     validationRedesignOptIn,
   } = hooksConfig || {};
   return (
@@ -51,7 +35,7 @@ beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
       validationRedesignOptIn={validationRedesignOptIn}
     >
       <GlobalStyle />
-      <I18nProvider locale={localeName ? computedLocale(localeName) : enGB}>
+      <I18nProvider locale={enGB}>
         <App />
       </I18nProvider>
     </CarbonProvider>

playwright/support/helper.ts

@@ -3,9 +3,6 @@ import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/experimental-ct-react17";
 import { label, legendSpan } from "../components/index";
 
-const OPEN_MODAL = '[data-state="open"]';
-const CLOSED_MODAL = '[data-state="closed"]';
-
 /**
  * Retrieve a computed style for an element.
  * @param locator The Playwright locator to evaluate (see: https://playwright.dev/docs/locators)
@@ -120,58 +117,6 @@ export const checkGoldenOutline = async (
   );
 };
 
-export const checkElementIsInDOM = async (page: Page, locatorStr: string) => {
-  expect(await page.$$(locatorStr)).toHaveLength(1);
-};
-
-export const checkElementIsNotInDOM = async (
-  page: Page,
-  locatorStr: string,
-) => {
-  expect(await page.$$(locatorStr)).toHaveLength(0);
-};
-
-export const checkDialogIsInDOM = async (page: Page) => {
-  await checkElementIsInDOM(page, OPEN_MODAL);
-  await checkElementIsNotInDOM(page, CLOSED_MODAL);
-};
-
-export const checkDialogIsNotInDOM = async (page: Page) => {
-  await checkElementIsNotInDOM(page, OPEN_MODAL);
-  await checkElementIsInDOM(page, CLOSED_MODAL);
-};
-
-/**
- * Asserts if an element has event was calledOnce
- * @param callbackData an array with callback data
- * @param eventName {string} event name
- * @example await expectEventWasCalledOnce(messages, "onClick");
- */
-export const expectEventWasCalledOnce = async (
-  callbackData: string[],
-  eventName: string,
-) => {
-  const count = JSON.stringify(callbackData.length);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const callbackName = JSON.stringify(callbackData[0]._reactName);
-  expect(count).toBe("1");
-  expect(callbackName).toBe(`"${eventName}"`);
-};
-
-/**
- * Asserts that event was NOT called
- * @param callbackData an array with callback data
- * @example await expectEventWasNotCalled(messages);
- */
-export const expectEventWasNotCalled = async (callbackData: string[]) => {
-  const count = JSON.stringify(callbackData.length);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  expect(count).toBe("0");
-  expect(callbackData).toEqual([]);
-};
-
 /**
  * Creates a safe regExp and uses the .toHaveClass() assertion
  * As there is not a "contains" assertion for the .toHaveClass() assertion
@@ -193,17 +138,6 @@ export const containsClass = async (
   await expect(locatorFunc).toHaveClass(classNameRegEx);
 };
 
-/**
- * Uses the .toHaveFocus() assertion with a waitFor before to
- * ensure the locator is available, and enough time has passed for the focus to be set.
- * @param locatorFunc the locator you'd like to use
- * @example await toBeFocusedDelayed(exampleLocator(page));
- */
-export const toBeFocusedDelayed = async (locatorFunc: Locator) => {
-  await locatorFunc.waitFor({ timeout: 10000 });
-  await expect(locatorFunc).toBeFocused();
-};
-
 const positions = {
   first: 0,
   second: 1,

src/__internal__/form-field/form-field.component.tsx

@@ -78,9 +78,12 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
   isRequired?: boolean;
   /** Whether to show the validation icon */
   useValidationIcon?: boolean;
+  /** String value for max-width of `field-line` element */
+  maxWidth?: string;
 }
 
 const FormField = ({
+  maxWidth,
   children,
   "data-component": dataComponent,
   disabled,
@@ -181,7 +184,11 @@ const FormField = ({
 
   return (
     <FormFieldStyle {...tagComponent(dataComponent, rest)} {...marginProps}>
-      <FieldLineStyle data-role="field-line" inline={inlineLabel}>
+      <FieldLineStyle
+        data-role="field-line"
+        inline={inlineLabel}
+        maxWidth={maxWidth}
+      >
         {reverse && children}
 
         {label && (

src/__internal__/form-field/form-field.style.ts

@@ -18,10 +18,12 @@ FormFieldStyle.defaultProps = {
 
 export interface FieldLineStyleProps {
   inline?: boolean;
+  maxWidth?: string;
 }
 const FieldLineStyle = styled.div<FieldLineStyleProps>`
-  ${({ inline }) => css`
+  ${({ inline, maxWidth }) => css`
     display: ${inline ? "flex" : "block"};
+    ${maxWidth && `max-width: ${maxWidth};`}
   `}
 `;
 

src/__internal__/form-field/form-field.test.tsx

@@ -127,3 +127,11 @@ test("should render with `labelInline` when `adaptiveLabelBreakpoint` set and sc
 
   expect(screen.getByTestId("field-line")).toHaveStyle("display: flex");
 });
+
+test("should render with `maxWidth` when provided", () => {
+  render(<FormField id="mock-input" label="label" maxWidth="fit-content" />);
+
+  expect(screen.getByTestId("field-line")).toHaveStyle(
+    "max-width: fit-content",
+  );
+});

src/__internal__/label/label.component.tsx

@@ -62,7 +62,7 @@ const tooltipPosition = ({
 };
 
 export const Label = ({
-  align = "right",
+  align,
   as = "label",
   children,
   disabled,
@@ -101,6 +101,15 @@ export const Label = ({
     if (onGroupMouseLeave) onGroupMouseLeave();
   };
 
+  let alignment: StyledLabelContainerProps["align"];
+  if (inline && !align) {
+    alignment = "right";
+  } else if (!align) {
+    alignment = "left";
+  } else {
+    alignment = align;
+  }
+
   const icon = () => {
     const wrapperProps = {
       onFocus: () => setFocus(true),
@@ -150,7 +159,7 @@ export const Label = ({
   return (
     <StyledLabelContainer
       data-role="label-container"
-      align={align}
+      align={alignment}
       inline={inline}
       width={width}
       optional={optional}