From 2598bab7d968f6b2e978a0f1055d64b1e7104426 Mon Sep 17 00:00:00 2001 From: Mihai Albu Date: Wed, 22 Jan 2025 09:29:37 +0000 Subject: [PATCH 1/8] fix(tabs-header): padding to be removed adjusted left and right padding from the tabs header fixes: #7145 --- .../tabs/__internal__/tabs-header/tabs-header.style.ts | 6 +++--- src/components/tabs/tab/tab.style.ts | 6 ++++++ src/components/tabs/tabs.pw.tsx | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) 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 ({ From f198c2e56737d1294c767b8c56981acc4c1f2938 Mon Sep 17 00:00:00 2001 From: "tom.davies" Date: Fri, 24 Jan 2025 11:23:05 +0000 Subject: [PATCH 2/8] fix(flex-tile-divider): add aria-hidden attribute to hr element fix #7173 --- .../flex-tile-divider/flex-tile-divider.component.tsx | 2 +- .../tile/flex-tile-divider/flex-tile-divider.test.tsx | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/components/tile/flex-tile-divider/flex-tile-divider.test.tsx 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"); +}); From 648cad70be79b31426364c3581974eff603a6145 Mon Sep 17 00:00:00 2001 From: Daniel Dipper Date: Thu, 23 Jan 2025 13:39:43 +0000 Subject: [PATCH 3/8] fix(form): ensure that additional margin-bottom is not applied to NumeralDate component This fix ensures that the NumeralDate component does not have margin-bottom styles applied twice when used inside a form. fixes #7171 --- src/components/form/form-test.stories.tsx | 48 +++++++++++++++++++++++ src/components/form/form.style.ts | 6 ++- 2 files changed, 53 insertions(+), 1 deletion(-) 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); } From 68c62216b52de93355774a1843a079b4709d9ce8 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Fri, 24 Jan 2025 16:16:05 +0000 Subject: [PATCH 4/8] chore(release): 146.5.2 ### [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) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c0b9eeefd2..55311832eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +### [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..3cde6be0dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "carbon-react", - "version": "146.5.1", + "version": "146.5.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "carbon-react", - "version": "146.5.1", + "version": "146.5.2", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index 87500cbf8d..6736d071fa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-react", - "version": "146.5.1", + "version": "146.5.2", "description": "A library of reusable React components for easily building user interfaces.", "files": [ "lib", From b655b63905f17e1e494161f6cac93c223635dcd1 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Mon, 27 Jan 2025 06:43:07 +0000 Subject: [PATCH 5/8] chore(release): 146.5.3 ### [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) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 55311832eb..0f11fee189 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +### [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) diff --git a/package-lock.json b/package-lock.json index 3cde6be0dd..3679c8d121 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "carbon-react", - "version": "146.5.2", + "version": "146.5.3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "carbon-react", - "version": "146.5.2", + "version": "146.5.3", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index 6736d071fa..1c5e2eea6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-react", - "version": "146.5.2", + "version": "146.5.3", "description": "A library of reusable React components for easily building user interfaces.", "files": [ "lib", From 151a710c23aaf09f4a30fb6eb89ad15ebb0ffe5b Mon Sep 17 00:00:00 2001 From: Damien Robson Date: Tue, 21 Jan 2025 09:22:24 +0000 Subject: [PATCH 6/8] feat(date): fix focus loss when using navbar with keyboard The Navbar of the date picker component no longer re-renders when the rest of the component updates fix #7158 --- playwright/index.tsx | 5 +--- .../date-picker/date-picker.component.tsx | 8 +++--- .../date-picker/date-picker.test.tsx | 28 +++++++++++++++++++ src/components/date/date.pw.tsx | 1 + 4 files changed, 34 insertions(+), 8 deletions(-) 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(); }); From 1eb9d2ce700509823ac9bffcfbd1e1b75ddba262 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 28 Jan 2025 09:45:49 +0000 Subject: [PATCH 7/8] chore(release): 146.6.0 ## [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) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f11fee189..da9c6d0521 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## [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) diff --git a/package-lock.json b/package-lock.json index 3679c8d121..5b27e54302 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "carbon-react", - "version": "146.5.3", + "version": "146.6.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "carbon-react", - "version": "146.5.3", + "version": "146.6.0", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index 1c5e2eea6b..ec1556c6c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-react", - "version": "146.5.3", + "version": "146.6.0", "description": "A library of reusable React components for easily building user interfaces.", "files": [ "lib", From 7d83bc53fd136b5e636dcbb7cbafb378bbf44001 Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Tue, 28 Jan 2025 13:31:17 +0000 Subject: [PATCH 8/8] chore(release): 146.6.1 ### [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) --- CHANGELOG.md | 7 +++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index da9c6d0521..39737a6cd1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +### [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) diff --git a/package-lock.json b/package-lock.json index 5b27e54302..cb4bf06e31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "carbon-react", - "version": "146.6.0", + "version": "146.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "carbon-react", - "version": "146.6.0", + "version": "146.6.1", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index ec1556c6c8..1111738385 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-react", - "version": "146.6.0", + "version": "146.6.1", "description": "A library of reusable React components for easily building user interfaces.", "files": [ "lib",