Merge branch 'master' into playwright_decimal

CHANGELOG.md

@@ -1,3 +1,26 @@
+## [121.2.0](https://github.com/Sage/carbon/compare/v121.1.0...v121.2.0) (2023-10-17)
+
+
+### Features
+
+* **typography:** add support for span as a support variant ([e181c44](https://github.com/Sage/carbon/commit/e181c4452f0d315968abe40c124ea66d0014240a))
+* **typography:** add text-align prop ([553d854](https://github.com/Sage/carbon/commit/553d854b46ca06314de07bbf2eb9b5da6ca1dd1d))
+
+## [121.1.0](https://github.com/Sage/carbon/compare/v121.0.2...v121.1.0) (2023-10-17)
+
+
+### Features
+
+* **character-count:** increase font size to 14px and update styles to use relevant tokens ([3e690ad](https://github.com/Sage/carbon/commit/3e690ada80d5a59ba2192b194409c77c8022d490))
+* **text-editor:** add support for new validation designs ([91bb986](https://github.com/Sage/carbon/commit/91bb986f0714a6e1267ab558469578ee2b210554))
+
+### [121.0.2](https://github.com/Sage/carbon/compare/v121.0.1...v121.0.2) (2023-10-12)
+
+
+### Bug Fixes
+
+* **pager:** make top corners rounded ([7ea657a](https://github.com/Sage/carbon/commit/7ea657a283ff08ceb9801dfe5c45692f1ceee450))
+
 ### [121.0.1](https://github.com/Sage/carbon/compare/v121.0.0...v121.0.1) (2023-10-11)
 
 

cypress/components/pager/pager.cy.tsx

@@ -507,17 +507,10 @@ context("Test for Pager component", () => {
     );
   });
 
-  describe("when inside a form component", () => {
-    it("should have no bottom margin", () => {
-      CypressMountWithProviders(<PagerInForm />);
+  it("when used inside a Form, the current page input box should have no bottom margin", () => {
+    CypressMountWithProviders(<PagerInForm />);
 
-      currentPageWrapper().should("have.css", "margin-bottom", "0px");
-    });
-
-    it("should render with the expected border radius styling", () => {
-      CypressMountWithProviders(<PagerComponent />);
-      pager().should("have.css", "border-radius", "0px 0px 8px 8px");
-    });
+    currentPageWrapper().should("have.css", "margin-bottom", "0px");
   });
 
   describe("Accessibility tests for Pager component", () => {

cypress/components/text-editor/text-editor.cy.tsx

@@ -6,6 +6,8 @@ import {
   TextEditorCustomValidation,
 } from "../../../src/components/text-editor/text-editor-test.stories";
 
+import { WithNewValidation as TextEditorNewValidation } from "../../../src/components/text-editor/text-editor.stories";
+
 import {
   textEditorInput,
   textEditorCounter,
@@ -45,7 +47,7 @@ context("Test for TextEditor component", () => {
       CypressMountWithProviders(<TextEditorCustom />);
 
       textEditorInput().clear().type(textForInput);
-      textEditorCounter().should("have.text", 2982);
+      textEditorCounter().should("have.text", "2,982 characters left");
     });
 
     it.each(["bold", "italic"])(
@@ -200,7 +202,7 @@ context("Test for TextEditor component", () => {
 
       textEditorInput().clear().type(longText);
 
-      textEditorCounter().should("have.text", 0);
+      textEditorCounter().should("have.text", "0 characters left");
       innerText().should("have.text", longTextAssert);
     });
 
@@ -443,5 +445,11 @@ context("Test for TextEditor component", () => {
         cy.checkAccessibility();
       }
     );
+
+    it("should pass accessibility tests for TextEditor validation when opt in flag is set", () => {
+      CypressMountWithProviders(<TextEditorNewValidation />);
+
+      cy.checkAccessibility();
+    });
   });
 });

cypress/components/typography/typography.cy.tsx

@@ -21,6 +21,7 @@ const VARIANT_TYPES = [
   "segment-subheader",
   "segment-subheader-alt",
   "p",
+  "span",
   "small",
   "big",
   "sup",
@@ -74,6 +75,7 @@ const getSize = (variant: VariantTypes) => {
       return "13px";
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -106,6 +108,7 @@ const getLineHeight = (variant: VariantTypes) => {
     case "h5":
     case "segment-subheader-alt":
     case "p":
+    case "span":
     case "b":
     case "strong":
     case "em":
@@ -132,6 +135,7 @@ const getWeight = (variant: VariantTypes) => {
     case "h4":
     case "h5":
     case "p":
+    case "span":
     case "small":
     case "big":
     case "sub":
@@ -244,6 +248,24 @@ context("Tests for Typography component", () => {
       }
     );
 
+    it.each(VARIANT_TYPES as TypographyProps["variant"][])(
+      "should check text-align for %s variant prop for Typography component when set",
+      (variant) => {
+        CypressMountWithProviders(
+          <Typography variant={variant}>{testCypress}</Typography>
+        );
+
+        const variantElem = getAs(String(variant));
+        const textDecorationLine = getDecoration(String(variant));
+
+        cy.get(variantElem).should(
+          "have.css",
+          "text-decoration-line",
+          textDecorationLine
+        );
+      }
+    );
+
     it.each(["ol", "ul"])(
       "should check as prop set to %s for List component",
       (as) => {
@@ -278,6 +300,18 @@ context("Tests for Typography component", () => {
       }
     );
 
+    it.each([["left"], ["center"], ["right"], ["justify"]])(
+      "should adjust the text alignment when textAlign prop is set to %s",
+      (textAlignment) => {
+        CypressMountWithProviders(
+          <Typography variant="h1" textAlign={textAlignment}>
+            {testCypress}
+          </Typography>
+        );
+        cy.get("h1").and("have.css", "text-align", textAlignment);
+      }
+    );
+
     it("should display as visually hidden when screenReaderOnly prop is enabled", () => {
       CypressMountWithProviders(
         <Typography variant="h1" screenReaderOnly>

cypress/locators/text-editor/index.js

@@ -1,13 +1,12 @@
-import { LINK } from "../locators";
+import { CHARACTER_COUNT, LINK } from "../locators";
 import {
   TEXT_EDITOR_CONTAINER,
-  TEXT_EDITOR_COUNTER,
   TEXT_EDITOR_INPUT,
   TEXT_EDITOR_TOOLBAR,
 } from "./locators";
 
 // component preview locators
-export const textEditorCounter = () => cy.get(TEXT_EDITOR_COUNTER);
+export const textEditorCounter = () => cy.get(CHARACTER_COUNT);
 export const textEditorInput = () => cy.get(TEXT_EDITOR_INPUT);
 export const textEditorToolbar = (buttonType) =>
   cy

cypress/locators/text-editor/locators.js

@@ -1,5 +1,4 @@
 // component preview locators
-export const TEXT_EDITOR_COUNTER = '[data-component="text-editor-counter"]';
 export const TEXT_EDITOR_INPUT = '[role="textbox"]';
 export const TEXT_EDITOR_TOOLBAR = '[data-component="text-editor-toolbar"]';
 export const TEXT_EDITOR_CONTAINER = '[data-component="text-editor-container"]';

package.json

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