Merge branch 'master' into FE-7056

CHANGELOG.md

@@ -1,3 +1,31 @@
+### [146.6.1](https://github.com/Sage/carbon/compare/v146.6.0...v146.6.1) (2025-01-28)
+
+
+### Bug Fixes
+
+* **form:** ensure that additional margin-bottom is not applied to NumeralDate component ([648cad7](https://github.com/Sage/carbon/commit/648cad70be79b31426364c3581974eff603a6145)), closes [#7171](https://github.com/Sage/carbon/issues/7171)
+
+## [146.6.0](https://github.com/Sage/carbon/compare/v146.5.3...v146.6.0) (2025-01-28)
+
+
+### Features
+
+* **date:** fix focus loss when using navbar with keyboard ([151a710](https://github.com/Sage/carbon/commit/151a710c23aaf09f4a30fb6eb89ad15ebb0ffe5b)), closes [#7158](https://github.com/Sage/carbon/issues/7158)
+
+### [146.5.3](https://github.com/Sage/carbon/compare/v146.5.2...v146.5.3) (2025-01-27)
+
+
+### Bug Fixes
+
+* **tabs-header:** padding to be removed ([2598bab](https://github.com/Sage/carbon/commit/2598bab7d968f6b2e978a0f1055d64b1e7104426)), closes [#7145](https://github.com/Sage/carbon/issues/7145)
+
+### [146.5.2](https://github.com/Sage/carbon/compare/v146.5.1...v146.5.2) (2025-01-24)
+
+
+### Bug Fixes
+
+* **flex-tile-divider:** add aria-hidden attribute to hr element ([f198c2e](https://github.com/Sage/carbon/commit/f198c2e56737d1294c767b8c56981acc4c1f2938)), closes [#7173](https://github.com/Sage/carbon/issues/7173)
+
 ### [146.5.1](https://github.com/Sage/carbon/compare/v146.5.0...v146.5.1) (2025-01-24)
 
 

package.json

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

playwright/index.tsx

@@ -25,10 +25,7 @@ const mountedTheme = (theme: string) => {
 
 // Setup required providers on mounted component before running test. See https://playwright.dev/docs/test-components#hooks
 beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
-  const {
-    theme = "sage",
-    validationRedesignOptIn,
-  } = hooksConfig || {};
+  const { theme = "sage", validationRedesignOptIn } = hooksConfig || {};
   return (
     <CarbonProvider
       theme={mountedTheme(theme)}

src/components/date/__internal__/date-picker/date-picker.component.tsx

@@ -76,6 +76,8 @@ const popoverMiddleware = [
   }),
 ];
 
+const Nav = Navbar;
+
 export const DatePicker = ({
   inputElement,
   minDate,
@@ -259,16 +261,14 @@ export const DatePicker = ({
                 weekdaysShort,
               },
             }}
-            selected={focusedMonth}
+            selected={selectedDays}
             month={focusedMonth || /* istanbul ignore next */ new Date()}
             onDayClick={(d, _, e) => {
               const date = d as Date;
               handleDayClick(date, e);
             }}
             components={{
-              Nav: (props) => {
-                return <Navbar {...props} />;
-              },
+              Nav,
               Weekday: (props) => {
                 const fixedDays = {
                   Sunday: 0,

src/components/date/__internal__/date-picker/date-picker.test.tsx

@@ -454,3 +454,31 @@ test("should correctly translate the month caption for the given locale (zh-CN)"
   expect(monthCaption).toBeVisible();
   expect(monthCaption).toHaveTextContent("三月 2019");
 });
+
+test("navigation buttons should maintain focus between month changes when using the keyboard", async () => {
+  const user = userEvent.setup();
+  render(
+    <DatePickerWithInput
+      setOpen={() => {}}
+      open
+      selectedDays={new Date(2019, 3, 4)}
+    />,
+  );
+
+  const textbox = screen.getByRole("textbox");
+  const monthLabel = screen.getByText("April 2019");
+  const previousButton = screen.getByRole("button", { name: "Previous month" });
+  const nextButton = screen.getByRole("button", { name: "Next month" });
+
+  await user.click(textbox);
+  await user.tab();
+  expect(previousButton).toHaveFocus();
+  await user.keyboard("{enter}");
+  expect(monthLabel).toHaveTextContent("March 2019");
+  expect(previousButton).toHaveFocus();
+  await user.tab();
+  expect(nextButton).toHaveFocus();
+  await user.keyboard("{enter}");
+  expect(monthLabel).toHaveTextContent("April 2019");
+  expect(nextButton).toHaveFocus();
+});

src/components/date/date.pw.tsx

@@ -501,6 +501,7 @@ test.describe("Functionality tests", () => {
 
     await datePicker.press("Escape");
 
+    await dateInput.waitFor();
     await expect(dateInput).toBeFocused();
     await expect(datePicker).toBeHidden();
   });

src/components/form/form-test.stories.tsx

@@ -555,3 +555,51 @@ FullWidthWithLeftAndRight.parameters = {
   },
   themeProvider: { chromatic: { theme: "sage" }, viewports: [1200, 900, 320] },
 };
+
+export const DefaultWithNumeralDate: StoryType = ({ ...props }) => (
+  <Form
+    onSubmit={() => console.log("submit")}
+    leftSideButtons={
+      <Button onClick={() => console.log("cancel")}>Cancel</Button>
+    }
+    saveButton={
+      <Button buttonType="primary" type="submit">
+        Save
+      </Button>
+    }
+    {...props}
+  >
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+    <NumeralDate
+      defaultValue={{
+        dd: "01",
+        mm: "02",
+        yyyy: "2020",
+      }}
+      label="Numeral Date"
+    />
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+  </Form>
+);
+
+DefaultWithNumeralDate.storyName = "With NumeralDate";
+DefaultWithNumeralDate.parameters = {
+  themeProvider: {
+    chromatic: { theme: "sage" },
+  },
+  chromatic: {
+    disableSnapshot: false,
+  },
+};
+DefaultWithNumeralDate.decorators = [
+  (Story) => (
+    <div style={{ height: "100vh", width: "97vw" }}>
+      <Story />
+    </div>
+  ),
+];

src/components/form/form.style.ts

@@ -7,6 +7,7 @@ import baseTheme from "../../style/themes/base";
 import { FormButtonAlignment } from "./form.config";
 import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
+import { StyledNumeralDate } from "../numeral-date/numeral-date.style";
 
 interface StyledFormContentProps {
   stickyFooter?: boolean;
@@ -89,7 +90,10 @@ export const StyledForm = styled.form<StyledFormProps>`
     `}
 
   // field spacing is also applied to form field here so we need to override
-  ${StyledSearch} ${StyledFormField}, ${StyledTextarea} ${StyledFormField}, [data-component="time"] ${StyledFormField} {
+  ${StyledSearch} ${StyledFormField}, 
+  ${StyledTextarea} ${StyledFormField}, 
+  [data-component="time"] ${StyledFormField}, 
+  ${StyledNumeralDate} ${StyledFormField} {
     margin-bottom: var(--spacing000);
   }
 

src/components/tabs/__internal__/tabs-header/tabs-header.style.ts

@@ -166,7 +166,7 @@ const StyledNavigationButton = styled.button`
 
 const StyledContainer = styled.div<{ size: string }>`
   display: flex;
-  padding: 6px 24px 0px;
+  padding: 6px 4px 0px;
   margin: 0;
   overflow-x: hidden;
   ${({ size }) => css`
@@ -179,8 +179,8 @@ const StyledBottomBorder = styled.div`
   height: auto;
   border-bottom: 2px solid var(--colorsActionMinor100);
   bottom: 0;
-  left: 24px;
-  right: 24px;
+  left: 4px;
+  right: 4px;
   position: absolute;
 `;
 

src/components/tabs/tab/tab.style.ts

@@ -15,6 +15,12 @@ const StyledTab = styled.div<StyledTabProps>`
     css`
       display: block;
 
+      ${position === "top" &&
+      css`
+        margin-left: 4px;
+        margin-right: 4px;
+      `}
+
       ${position === "left" &&
       css`
         margin-left: -6px;

src/components/tabs/tabs.pw.tsx

@@ -159,7 +159,7 @@ test.describe("Tabs component", () => {
   (
     [
       [true, 1358],
-      [false, 380],
+      [false, 340],
     ] as [boolean, number][]
   ).forEach(([bool, width]) => {
     test(`should render Tabs with extendedLine prop set to ${bool}`, async ({

src/components/tile/flex-tile-divider/flex-tile-divider.component.tsx

@@ -12,7 +12,7 @@ export const FlexTileDivider = (): JSX.Element => {
       width="100vw"
       m="0px 0px -1px 0px"
     >
-      <Hr m={0} />
+      <Hr aria-hidden="true" m={0} />
     </Box>
   );
 };

src/components/tile/flex-tile-divider/flex-tile-divider.test.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import FlexTileDivider from "./flex-tile-divider.component";
+
+test("hr element has aria-hidden attribute set to true", () => {
+  render(<FlexTileDivider />);
+  expect(screen.getByTestId("hr")).toHaveAttribute("aria-hidden", "true");
+});