Merge branch 'master' into FE-6820

CHANGELOG.md

@@ -1,3 +1,104 @@
+## [147.4.0](https://github.com/Sage/carbon/compare/v147.3.1...v147.4.0) (2025-02-06)
+
+
+### Features
+
+* **search, menu-item:** prevent tab focus on clear button and hide from aria, esc clears search ([6cd605f](https://github.com/Sage/carbon/commit/6cd605f3d239e3a5dc24fb9aad2663efc82ee824)), closes [#7170](https://github.com/Sage/carbon/issues/7170)
+
+### [147.3.1](https://github.com/Sage/carbon/compare/v147.3.0...v147.3.1) (2025-02-05)
+
+
+### Bug Fixes
+
+* **action-popover:** aria label has default value despite visible text on open button ([8e623e4](https://github.com/Sage/carbon/commit/8e623e446054af23ecc298ea301822282382f5da)), closes [#7143](https://github.com/Sage/carbon/issues/7143)
+
+## [147.3.0](https://github.com/Sage/carbon/compare/v147.2.0...v147.3.0) (2025-02-04)
+
+
+### Features
+
+* **hr:** add height prop ([b93ab1c](https://github.com/Sage/carbon/commit/b93ab1c035abaf0e7e5a97592bed2ad75bbfd45d))
+
+## [147.2.0](https://github.com/Sage/carbon/compare/v147.1.0...v147.2.0) (2025-02-03)
+
+
+### Features
+
+* **portrait, profile:** allows custom colours to be set on the Portrait and Profile components ([9e20799](https://github.com/Sage/carbon/commit/9e2079973f20fe5671547ed78e599593ce9c2c77))
+
+## [147.1.0](https://github.com/Sage/carbon/compare/v147.0.1...v147.1.0) (2025-02-03)
+
+
+### Features
+
+* **numeral-date, time:** add support for labelAlign on non-inline labels ([241d744](https://github.com/Sage/carbon/commit/241d744b5460f36262cb25fe3500d03a207466e5))
+
+
+### Bug Fixes
+
+* **numeral-date:** ensure inlineLabel works as expected in Safari ([b13e5dc](https://github.com/Sage/carbon/commit/b13e5dc2d8fbbb08728f3f2fafe1aba2d1f2c866))
+
+### [147.0.1](https://github.com/Sage/carbon/compare/v147.0.0...v147.0.1) (2025-01-31)
+
+
+### Bug Fixes
+
+* **dialog:** ensure enableBackgroundUI is passed to Modal ([9605627](https://github.com/Sage/carbon/commit/9605627493bb4b413120fab091342f01a93378d3)), closes [#6023](https://github.com/Sage/carbon/issues/6023)
+
+## [147.0.0](https://github.com/Sage/carbon/compare/v146.6.1...v147.0.0) (2025-01-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* **classname prop:** - The `className` property has been removed from all components.
+- Accordion: scheme and buttonHeading
+- Box: tabIndex
+- ButtonToggle: grouped
+- Decimal: onKeyPress
+- Icon: 'extra-small' variant
+- Portrait: gravatar
+- SimpleColorPicker: isBlurBlocked
+- ListItem: variant (now inherits from parent List component)
+
+### Features
+
+* **classname prop:** remove className from public props ([1c4fad4](https://github.com/Sage/carbon/commit/1c4fad43ce7bb3ec520bfea146d92390e7473dc4))
+
+### [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)
+
+
+### Bug Fixes
+
+* **form:** ensure that additional margin-bottom is not applied to Time component ([98cdaae](https://github.com/Sage/carbon/commit/98cdaae86e47bd44d00a202cefe22cc53f31aa98)), closes [#7164](https://github.com/Sage/carbon/issues/7164)
+
 ## [146.5.0](https://github.com/Sage/carbon/compare/v146.4.7...v146.5.0) (2025-01-23)
 
 

docs/using-draft-js.mdx

@@ -14,8 +14,8 @@ import { Meta } from "@storybook/blocks";
 
 ## Installation
 
-The [TextEditor](https://carbon.sage.com/?path=/docs/text-editor--default) and
-[Note](https://carbon.sage.com/?path=/docs/note--default) components utilise the `Draft.js` framework to
+The [TextEditor](../?path=/docs/text-editor--docs) and
+[Note](../?path=/docs/note--docs) components utilise the `Draft.js` framework to
 support creating and rendering rich-text content. As such, the framework has been added as a peer-dependency and
 consuming projects are required to install it if they wish to use either component, this can be done as an
 [npm package](https://www.npmjs.com/package/draft-js).
@@ -56,7 +56,7 @@ The framework surfaces a range of static methods for initialising the state:
   the component with some existing `ContentState` and any `Decorators` and return a new `EditorState` object.
 - `EditorState.create(config: EditorStateCreationConfig)` - offers the same as `createWithContent` but enables
   initialising the `EditorState` from a config, affording you more fine grain control. For example, it is possible to
-  define an intitial `SelectionState` using this static method.
+  define an initial `SelectionState` using this static method.
 
 #### Other useful methods
 

docs/validations.mdx

@@ -24,7 +24,7 @@ These states can indicate whether the input is valid or not, and can also preven
 ### Validation redesign
 
 Carbon is in the process of implementing a new validation pattern to our input components. To opt into this new pattern, you can set the 
-`validationRedesignOptIn` flag to true in the [CarbonProvider](https://carbon.sage.com/?path=/docs/carbon-provider--docs).
+`validationRedesignOptIn` flag to true in the [CarbonProvider](../?path=/docs/carbon-provider--docs).
 
 Component props that are not supported if the opt-in flag is set to true are labelled as [Legacy] in their corresponding prop tables. 
 These props should not be used if the new validation pattern is being used.
@@ -98,7 +98,7 @@ Carbon provides a Form component which augments an HTML `<form>` element with:
 - footer - a container for rendering "Save", "Cancel" and other custom buttons; it can also be made sticky if wanted
 - validation summary - graphical indicator of errors and warnings
 
-For more information check [Form in Storybook](https://carbon.sage.com/?path=/docs/form)
+For more information check [Form in Storybook](../?path=/docs/form--docs)
 
 ## Formik overview
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "146.5.0",
+  "version": "147.4.0",
   "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/__internal__/fieldset/fieldset.component.tsx

@@ -6,6 +6,7 @@ import {
   StyledLegend,
   StyledLegendContent,
   StyledIconWrapper,
+  StyledLegendProps,
 } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
 import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
@@ -67,7 +68,7 @@ const Fieldset = ({
   children,
   inline = false,
   legendWidth,
-  legendAlign = "right",
+  legendAlign,
   legendSpacing = 2,
   error,
   warning,
@@ -127,6 +128,15 @@ const Fieldset = ({
     return null;
   };
 
+  let legendAlignment: StyledLegendProps["align"];
+  if (inline && !legendAlign) {
+    legendAlignment = "right";
+  } else if (!legendAlign) {
+    legendAlignment = "left";
+  } else {
+    legendAlignment = legendAlign;
+  }
+
   return (
     <InputGroupBehaviour blockGroupBehaviour={blockGroupBehaviour}>
       <StyledFieldset
@@ -143,7 +153,7 @@ const Fieldset = ({
                 onMouseLeave={onMouseLeave}
                 inline={inline}
                 width={legendWidth}
-                align={legendAlign}
+                align={legendAlignment}
                 rightPadding={legendSpacing}
                 {...legendMargin}
                 data-element="legend"

src/__internal__/fieldset/fieldset.style.ts

@@ -64,7 +64,7 @@ const StyledLegendContent = styled.span<StyledLegendContentProps>`
     `}
 `;
 
-type StyledLegendProps = {
+export type StyledLegendProps = {
   inline?: boolean;
   width?: number;
   align?: "left" | "right";
@@ -78,14 +78,26 @@ const StyledLegend = styled.legend<StyledLegendProps>`
   padding: 0;
   font-weight: var(--fontWeights500);
   color: var(--colorsUtilityYin090);
-  ${({ inline, width, align, rightPadding }) =>
+
+  ${({ align, inline }) =>
+    align &&
+    css`
+      text-align: ${align};
+      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
+
+      ${!inline &&
+      css`
+        width: -moz-available;
+      `}
+    `};
+
+  ${({ inline, width, rightPadding }) =>
     inline &&
     css`
       float: left;
       box-sizing: border-box;
       margin: 0;
       ${width && `width: ${width}%`};
-      justify-content: ${align === "right" ? "flex-end" : "flex-start"};
       padding-right: ${rightPadding === 1
         ? "var(--spacing100)"
         : "var(--spacing200)"};

src/__internal__/fieldset/fieldset.test.tsx

@@ -123,7 +123,7 @@ test("renders legend with provided `legendWidth` when `inline` is true", () => {
 });
 
 // coverage
-test("renders with expected styles when `inline` is true and `align` is 'left'", () => {
+test("renders with expected styles when `inline` is true and `legendAlign` is 'left'", () => {
   render(
     <Fieldset legend="Legend" inline legendAlign="left">
       <input />

src/__internal__/input-icon-toggle/input-icon-toggle.component.tsx

@@ -18,7 +18,6 @@ export interface InputIconToggleProps
   onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
   onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
   readOnly?: boolean;
-  tooltipId?: string;
   useValidationIcon?: boolean;
   /** Id of the validation icon */
   validationIconId?: string;
@@ -83,11 +82,12 @@ const InputIconToggle = ({
         onFocus={onFocus}
         onBlur={onBlur}
         onMouseDown={onMouseDown}
-        tabIndex={iconTabIndex}
         data-element="input-icon-toggle"
         disabled={disabled}
         readOnly={readOnly}
         data-role="input-icon-toggle"
+        aria-hidden="true"
+        tabIndex={-1}
       >
         <Icon disabled={disabled || readOnly} type={type} />
       </InputIconToggleStyle>

src/__internal__/label/label.component.tsx

@@ -34,7 +34,10 @@ export interface LabelProps
   useValidationIcon?: boolean;
   /** Id of the validation icon */
   validationIconId?: string;
-  /** Sets className for component */
+  /**
+   * @private
+   * @internal
+   * Sets className for component. INTERNAL USE ONLY. */
   className?: string;
   /** Sets aria-label for label element */
   "aria-label"?: string;

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

@@ -44,12 +44,6 @@ export default {
         type: "select",
       },
     },
-    scheme: {
-      options: ["white", "transparent"],
-      control: {
-        type: "select",
-      },
-    },
     variant: {
       options: ["standard", "subtle"],
       control: {