@atlaskit/primitives 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 1.9.0
+
+### Minor Changes
+
+- [#42494](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42494) [`8cc2926465e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2926465e) - Removed the ability to use the `style` prop on primitives such as Inline, Stack, and Flex. This prop previously had no effect on these components and is now only allowed on Box.
+
 ## 1.8.0
 
 ### Minor Changes

package/dist/types/components/box.d.ts

@@ -2,12 +2,12 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { SVGElements } from './internal/types';
-import type { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, StyleProp } from './types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 type BaseBoxProps<T extends CustomElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

package/dist/types/components/types.d.ts

@@ -5,11 +5,6 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
-     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
-     */
-    style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
@@ -19,6 +14,13 @@ export type BasePrimitiveProps = {
      */
     role?: string;
 };
+export type StyleProp = {
+    /**
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: CSSProperties;
+};
 export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';

package/dist/types-ts4.5/components/box.d.ts

@@ -2,12 +2,12 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { SVGElements } from './internal/types';
-import type { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, StyleProp } from './types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 type BaseBoxProps<T extends CustomElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

package/dist/types-ts4.5/components/types.d.ts

@@ -5,11 +5,6 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
-     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
-     */
-    style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
@@ -19,6 +14,13 @@ export type BasePrimitiveProps = {
      */
     role?: string;
 };
+export type StyleProp = {
+    /**
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: CSSProperties;
+};
 export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';

package/extract-react-types/box-props.tsx

@@ -1,7 +1,7 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
 import React, { ElementType, ReactNode } from 'react';
 
-import { BasePrimitiveProps } from '../src/components/types';
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -84,5 +84,6 @@ export default function Box(
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<ElementType>['ref'];
-  } & BasePrimitiveProps,
+  } & BasePrimitiveProps &
+    StyleProp,
 ) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -313,7 +313,6 @@ type BaseBoxProps<T extends CustomElementType> = {
 // @public (undocumented)
 type BasePrimitiveProps = {
   testId?: string;
-  style?: CSSProperties;
   xcss?: Array<XCSS | false | undefined> | XCSS;
   role?: string;
 };
@@ -407,6 +406,7 @@ export type BoxProps<T extends CustomElementType> = Omit<
   'as' | 'className'
 > &
   BasePrimitiveProps &
+  StyleProp &
   BaseBoxProps<T>;
 
 // @public
@@ -974,6 +974,11 @@ export type StackProps<T extends ElementType = 'div'> = {
   ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type StyleProp = {
+  style?: CSSProperties;
+};
+
 // @public (undocumented)
 type SVGElements =
   | 'animate'

package/tmp/api-report-tmp.d.ts

@@ -297,7 +297,6 @@ type BaseBoxProps<T extends CustomElementType> = {
 // @public (undocumented)
 type BasePrimitiveProps = {
     testId?: string;
-    style?: CSSProperties;
     xcss?: Array<XCSS | false | undefined> | XCSS;
     role?: string;
 };
@@ -375,7 +374,7 @@ export const Box: BoxComponent;
 type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
 
 // @public (undocumented)
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
@@ -687,6 +686,11 @@ export type StackProps<T extends ElementType = 'div'> = {
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type StyleProp = {
+    style?: CSSProperties;
+};
+
 // @public (undocumented)
 type SVGElements = 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'svg' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';