Merge branch 'master' into add-missing-import-act-pop-story

CHANGELOG.md

@@ -1,3 +1,10 @@
+### [111.22.4](https://github.com/Sage/carbon/compare/v111.22.3...v111.22.4) (2023-01-06)
+
+
+### Bug Fixes
+
+* **progress-tracker:** add deprecation warnings for orientation and direction props ([db4d936](https://github.com/Sage/carbon/commit/db4d93635f88dbaa273174994491362ef4019df1))
+
 ### [111.22.3](https://github.com/Sage/carbon/compare/v111.22.2...v111.22.3) (2023-01-04)
 
 

cypress/support/accessibility/a11y-utils.js

@@ -58,6 +58,7 @@ export default (from, end) => {
       !prepareUrl[0].startsWith("verticaldivider") &&
       !prepareUrl[0].startsWith("button-bar") &&
       !prepareUrl[0].startsWith("batch-selection") &&
+      !prepareUrl[0].startsWith("badge") &&
       !prepareUrl[0].endsWith("test")
     ) {
       urlList.push([prepareUrl[0], prepareUrl[1]]);

package.json

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

scripts/check_rfcs/check_rfcs.spec.js

@@ -84,8 +84,12 @@ describe("checkRfcs script", () => {
 
   it("should not run the script when being run in CI", async () => {
     ci.isCI = true;
+    const OLD_ENV = process.env.NODE_ENV;
+    process.env.NODE_ENV = "NOT-TEST";
     await checkRfcs();
 
     expect(consoleLogMock).not.toHaveBeenCalled();
+
+    process.env.NODE_ENV = OLD_ENV;
   });
 });

src/components/badge/badge.test.js

@@ -85,4 +85,17 @@ context("Testing Badge component", () => {
         });
     });
   });
+
+  describe("Accessibility tests for Badge component", () => {
+    // FE-5596
+    it.skip("should pass accessibilty tests for Badge default story", () => {
+      CypressMountWithProviders(<BadgeComponent counter />);
+      cy.checkAccessibility();
+    });
+
+    it("should pass accessibility tests for click event", () => {
+      CypressMountWithProviders(<BadgeComponent onClick={() => {}} />);
+      cy.checkAccessibility();
+    });
+  });
 });

src/components/progress-tracker/progress-tracker.component.js

@@ -11,6 +11,9 @@ import {
   StyledValue,
 } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
+import Logger from "../../__internal__/utils/logger";
+
+let deprecatedWarningTriggered = false;
 
 const marginPropTypes = filterStyledSystemMarginProps(
   styledSystemPropTypes.space
@@ -29,29 +32,39 @@ const ProgressTracker = ({
   showDefaultLabels = false,
   currentProgressLabel,
   maxProgressLabel,
-  orientation = "horizontal",
-  direction = "up",
+  orientation,
+  direction,
   labelsPosition,
   ...rest
 }) => {
+  if (!deprecatedWarningTriggered && (orientation || direction)) {
+    deprecatedWarningTriggered = true;
+    Logger.deprecate(
+      "The `orientation` and `direction` props in `ProgressTracker` component are deprecated and will soon be removed."
+    );
+  }
+
+  const internalOrientation = orientation || "horizontal";
+  const internalDirection = direction || "up";
+
   const barRef = useRef();
   const [barLength, setBarLength] = useState(0);
-  const isVertical = orientation === "vertical";
+  const isVertical = internalOrientation === "vertical";
   const prefixLabels =
     (!isVertical && labelsPosition !== "bottom") ||
     (isVertical && labelsPosition === "left");
 
   const updateBarLength = useCallback(() => {
-    if (orientation === "horizontal") {
+    if (internalOrientation === "horizontal") {
       setBarLength(`${barRef.current.offsetWidth}px`);
     } else {
       setBarLength(`${barRef.current.offsetHeight}px`);
     }
-  }, [barRef, orientation]);
+  }, [barRef, internalOrientation]);
 
   useLayoutEffect(() => {
     updateBarLength();
-  }, [barRef, orientation, updateBarLength]);
+  }, [barRef, internalOrientation, updateBarLength]);
 
   useResizeObserver(barRef, () => {
     updateBarLength();
@@ -71,7 +84,7 @@ const ProgressTracker = ({
 
     return (
       <StyledValuesLabel position={labelsPosition} isVertical={isVertical}>
-        {isVertical && direction === "up" && (
+        {isVertical && internalDirection === "up" && (
           <>
             <StyledValue isMaxValue>
               {label(maxProgressLabel, "100%")}
@@ -81,7 +94,7 @@ const ProgressTracker = ({
             </StyledValue>
           </>
         )}
-        {(direction === "down" || !isVertical) && (
+        {(internalDirection === "down" || !isVertical) && (
           <>
             <StyledValue>
               {label(currentProgressLabel, `${progress}%`)}
@@ -117,7 +130,7 @@ const ProgressTracker = ({
     >
       {prefixLabels && renderValueLabels()}
       <StyledProgressBar
-        direction={isVertical ? direction : undefined}
+        direction={isVertical ? internalDirection : undefined}
         isVertical={isVertical}
         size={size}
         ref={barRef}

src/components/progress-tracker/progress-tracker.spec.js

@@ -14,11 +14,13 @@ import {
 } from "../../__spec_helper__/test-utils";
 import ProgressBar from "./progress-tracker.component";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
+import Logger from "../../__internal__/utils/logger";
 
 jest.mock("../../hooks/__internal__/useResizeObserver");
 
 describe("ProgressBar", () => {
   let wrapper;
+  let loggerSpy;
 
   const originalOffsetHeight = Object.getOwnPropertyDescriptor(
     HTMLElement.prototype,
@@ -29,6 +31,13 @@ describe("ProgressBar", () => {
     "offsetWidth"
   );
 
+  beforeEach(() => {
+    loggerSpy = jest.spyOn(Logger, "deprecate");
+  });
+  afterEach(() => {
+    loggerSpy.mockRestore();
+  });
+
   beforeAll(() => {
     Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
       configurable: true,
@@ -55,6 +64,23 @@ describe("ProgressBar", () => {
 
   testStyledSystemMargin((props) => <ProgressBar {...props} />);
 
+  describe("deprecation warning", () => {
+    it("should be called only once when the `orientation` or `direction` props are set", () => {
+      wrapper = mount(
+        <>
+          <ProgressBar direction="up" />
+          <ProgressBar orientation="vertical" />
+        </>
+      );
+
+      expect(loggerSpy).toHaveBeenCalledWith(
+        "The `orientation` and `direction` props in `ProgressTracker` component are deprecated and will soon be removed."
+      );
+
+      expect(loggerSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
   it("renders component as expected", () => {
     wrapper = mount(<ProgressBar />);
     const innerBar = wrapper.find(InnerBar);