diff --git a/CHANGELOG.md b/CHANGELOG.md index c0b9eeefd2..39737a6cd1 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package-lock.json b/package-lock.json index b1382dcb5f..cb4bf06e31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "carbon-react", - "version": "146.5.1", + "version": "146.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "carbon-react", - "version": "146.5.1", + "version": "146.6.1", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index 87500cbf8d..1111738385 100644 --- a/package.json +++ b/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", diff --git a/playwright/index.tsx b/playwright/index.tsx index c3ddeef0ce..acc0c594c2 100644 --- a/playwright/index.tsx +++ b/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(async ({ App, hooksConfig }) => { - const { - theme = "sage", - validationRedesignOptIn, - } = hooksConfig || {}; + const { theme = "sage", validationRedesignOptIn } = hooksConfig || {}; return ( { const date = d as Date; handleDayClick(date, e); }} components={{ - Nav: (props) => { - return ; - }, + Nav, Weekday: (props) => { const fixedDays = { Sunday: 0, diff --git a/src/components/date/__internal__/date-picker/date-picker.test.tsx b/src/components/date/__internal__/date-picker/date-picker.test.tsx index 7d4d234987..498c69ad31 100644 --- a/src/components/date/__internal__/date-picker/date-picker.test.tsx +++ b/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( + {}} + 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(); +}); diff --git a/src/components/date/date.pw.tsx b/src/components/date/date.pw.tsx index cc714d9c97..1d732f3238 100644 --- a/src/components/date/date.pw.tsx +++ b/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(); }); diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx index 23b8251222..b1fb369755 100644 --- a/src/components/form/form-test.stories.tsx +++ b/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 }) => ( +
console.log("submit")} + leftSideButtons={ + + } + saveButton={ + + } + {...props} + > + + + + + + + + + +); + +DefaultWithNumeralDate.storyName = "With NumeralDate"; +DefaultWithNumeralDate.parameters = { + themeProvider: { + chromatic: { theme: "sage" }, + }, + chromatic: { + disableSnapshot: false, + }, +}; +DefaultWithNumeralDate.decorators = [ + (Story) => ( +
+ +
+ ), +]; diff --git a/src/components/form/form.style.ts b/src/components/form/form.style.ts index a0c084509c..70c080a844 100644 --- a/src/components/form/form.style.ts +++ b/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` `} // 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); } diff --git a/src/components/tabs/__internal__/tabs-header/tabs-header.style.ts b/src/components/tabs/__internal__/tabs-header/tabs-header.style.ts index a9eac1d8c6..bf33234768 100644 --- a/src/components/tabs/__internal__/tabs-header/tabs-header.style.ts +++ b/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; `; diff --git a/src/components/tabs/tab/tab.style.ts b/src/components/tabs/tab/tab.style.ts index 9e99bd701f..186080bedd 100644 --- a/src/components/tabs/tab/tab.style.ts +++ b/src/components/tabs/tab/tab.style.ts @@ -15,6 +15,12 @@ const StyledTab = styled.div` css` display: block; + ${position === "top" && + css` + margin-left: 4px; + margin-right: 4px; + `} + ${position === "left" && css` margin-left: -6px; diff --git a/src/components/tabs/tabs.pw.tsx b/src/components/tabs/tabs.pw.tsx index 13d03a6687..5db6bf5611 100644 --- a/src/components/tabs/tabs.pw.tsx +++ b/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 ({ diff --git a/src/components/tile/flex-tile-divider/flex-tile-divider.component.tsx b/src/components/tile/flex-tile-divider/flex-tile-divider.component.tsx index 7e3f6e1e20..95633d858a 100644 --- a/src/components/tile/flex-tile-divider/flex-tile-divider.component.tsx +++ b/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" > -
+ ); }; diff --git a/src/components/tile/flex-tile-divider/flex-tile-divider.test.tsx b/src/components/tile/flex-tile-divider/flex-tile-divider.test.tsx new file mode 100644 index 0000000000..3b21f8a47f --- /dev/null +++ b/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(); + expect(screen.getByTestId("hr")).toHaveAttribute("aria-hidden", "true"); +});