@skyscanner/backpack-web 41.7.0-beta-v2 → 41.7.0-beta-v3

package/bpk-component-layout/src/BpkVessel.d.ts

@@ -2,22 +2,26 @@ import type { BpkVesselProps } from './types';
 /**
  * A "migration hatch" layout primitive designed to ease component migration.
  *
- * BpkVessel renders an HTML element (default: div) and only accepts
- * className and style props for legacy styling during migration.
+ * BpkVessel renders an HTML element (default: div) and accepts all standard
+ * HTML attributes for maximum migration flexibility.
  *
  * **When to use:**
  * - During component migration when you need to maintain existing className/style usage
+ * - When you need to pass testing attributes (data-testid) or accessibility props
  * - As a temporary solution while refactoring components
  *
  * **Important:**
  * - This is a temporary migration tool, not a permanent solution
- * - Only accepts: `as`, `className`, `style`, and `children` props
+ * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
+ * - Plan to migrate to BpkBox once legacy styling is removed
  *
  * @example
  * ```tsx
  * <BpkVessel
  *   className="legacy-class"
  *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
  * >
  *   Content
  * </BpkVessel>
@@ -25,12 +29,18 @@ import type { BpkVesselProps } from './types';
  * <BpkVessel
  *   as="section"
  *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
  * >
  *   Section Content
  * </BpkVessel>
  * ```
  *
- * @returns {JSX.Element} An HTML element with className and style applied.
+ * @todo Migration component - pending removal after component migration is complete.
+ *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
+ *
+ * @returns {JSX.Element} An HTML element with all props applied.
  */
-export declare const BpkVessel: ({ as: Element, children, className, style, }: BpkVesselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkVessel: ({ as: Element, children, ...restProps }: BpkVesselProps) => import("react/jsx-runtime").JSX.Element;
 export type { BpkVesselProps };

package/bpk-component-layout/src/BpkVessel.js

@@ -20,22 +20,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A "migration hatch" layout primitive designed to ease component migration.
  *
- * BpkVessel renders an HTML element (default: div) and only accepts
- * className and style props for legacy styling during migration.
+ * BpkVessel renders an HTML element (default: div) and accepts all standard
+ * HTML attributes for maximum migration flexibility.
  *
  * **When to use:**
  * - During component migration when you need to maintain existing className/style usage
+ * - When you need to pass testing attributes (data-testid) or accessibility props
  * - As a temporary solution while refactoring components
  *
  * **Important:**
  * - This is a temporary migration tool, not a permanent solution
- * - Only accepts: `as`, `className`, `style`, and `children` props
+ * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
+ * - Plan to migrate to BpkBox once legacy styling is removed
  *
  * @example
  * ```tsx
  * <BpkVessel
  *   className="legacy-class"
  *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
  * >
  *   Content
  * </BpkVessel>
@@ -43,24 +47,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * <BpkVessel
  *   as="section"
  *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
  * >
  *   Section Content
  * </BpkVessel>
  * ```
  *
- * @returns {JSX.Element} An HTML element with className and style applied.
+ * @todo Migration component - pending removal after component migration is complete.
+ *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
+ *
+ * @returns {JSX.Element} An HTML element with all props applied.
  */
 export const BpkVessel = ({
   as: Element = 'div',
   children,
-  className,
-  style
-}) =>
-/*#__PURE__*/
-// Allowed, Element is always a DOM element.
-// eslint-disable-next-line @skyscanner/rules/forbid-component-props
-_jsx(Element, {
-  className: className,
-  style: style,
+  ...restProps
+}) => /*#__PURE__*/_jsx(Element, {
+  ...restProps,
   children: children
 });

package/bpk-component-layout/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type StackOptionKeys from './BpkStack.constant';
 import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
@@ -111,13 +111,22 @@ export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'ma
  * Props for BpkVessel component.
  *
  * BpkVessel is a "migration hatch" that renders an HTML element
- * and only accepts className and style props.
+ * and accepts all standard HTML attributes for maximum migration flexibility.
+ *
+ * Accepts all React.HTMLAttributes including:
+ * - Styling: className, style
+ * - Testing: data-testid, data-cy, data-*
+ * - Accessibility: aria-*, role, tabIndex
+ * - Basic HTML: id, title, dir, lang, hidden, etc.
+ * - All standard DOM events: onClick, onChange, onFocus, etc.
  *
  * @example
  * ```tsx
  * <BpkVessel
  *   className="legacy-wrapper"
  *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
  * >
  *   Content
  * </BpkVessel>
@@ -125,6 +134,9 @@ export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'ma
  * <BpkVessel
  *   as="section"
  *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
  * >
  *   Section Content
  * </BpkVessel>
@@ -132,10 +144,7 @@ export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'ma
  */
 export type BpkVesselProps = {
     as?: VesselElement;
-    children?: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-};
+} & React.HTMLAttributes<HTMLElement>;
 /**
  * Component-specific props for BpkFlex
  * Includes all Flex props except those in BpkCommonLayoutProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.7.0-beta-v2",
+  "version": "41.7.0-beta-v3",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",