@atlaskit/primitives - npm Package Compare versions

Comparing version 0.14.0 to 0.14.1

CHANGELOG.md

 # @atlaskit/primitives
 
+## 0.14.1
+
+### Patch Changes
+
+- [`d79b6172a93`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d79b6172a93) - Add documentation for responsive xcss.
+
 ## 0.14.0
@@ -4,0 +10,0 @@

dist/cjs/index.js

@@ -25,2 +25,14 @@ "use strict";
 });
+Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_media", {
+  enumerable: true,
+  get: function get() {
+    return _responsive.UNSAFE_media;
+  }
+});
 Object.defineProperty(exports, "xcss", {
@@ -35,2 +47,3 @@ enumerable: true,
 var _xcss = require("./xcss/xcss");
-var _stack = _interopRequireDefault(require("./components/stack"));
+var _stack = _interopRequireDefault(require("./components/stack"));
+var _responsive = require("./helpers/responsive");

dist/cjs/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"sideEffects": false
 }

dist/es2019/index.js

 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
-export { default as Stack } from './components/stack';
+export { default as Stack } from './components/stack';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './helpers/responsive';

dist/es2019/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"sideEffects": false
 }

dist/esm/index.js

 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
-export { default as Stack } from './components/stack';
+export { default as Stack } from './components/stack';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './helpers/responsive';

dist/esm/version.json

 {
 	"name": "@atlaskit/primitives",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"sideEffects": false
 }

dist/types-ts4.5/index.d.ts

@@ -5,1 +5,2 @@ export { default as Box, type BoxProps } from './components/box';
 export { default as Stack, type StackProps } from './components/stack';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './helpers/responsive';

dist/types/index.d.ts

@@ -5,1 +5,2 @@ export { default as Box, type BoxProps } from './components/box';
 export { default as Stack, type StackProps } from './components/stack';
+export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG, type Breakpoint, } from './helpers/responsive';

package.json

 {
   "name": "@atlaskit/primitives",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Primitives are token-backed low-level building blocks.",
@@ -135,3 +135,3 @@ "author": "Atlassian Pty Ltd",
     "@atlassian/codegen": "^0.1.0",
-    "@atlassian/gemini-visual-regression": "^0.0.33",
+    "@atlassian/gemini-visual-regression": "^0.0.34",
     "@testing-library/react": "^12.1.5",
@@ -138,0 +138,0 @@ "@testing-library/react-hooks": "^8.0.1",

report.api.md

@@ -300,3 +300,3 @@ <!-- API Report Version: 2.3 -->
 // @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
+export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -627,2 +627,69 @@ // @public (undocumented)
 // @public
+export const UNSAFE_BREAKPOINTS_CONFIG: {
+  readonly xxs: {
+    readonly gridItemGutter: 'var(--ds-space-200)';
+    readonly gridMargin: 'var(--ds-space-200)';
+    readonly min: '0rem';
+    readonly max: '29.99rem';
+  };
+  readonly xs: {
+    readonly gridItemGutter: 'var(--ds-space-200)';
+    readonly gridMargin: 'var(--ds-space-200)';
+    readonly min: '30rem';
+    readonly max: '47.99rem';
+  };
+  readonly sm: {
+    readonly gridItemGutter: 'var(--ds-space-200)';
+    readonly gridMargin: 'var(--ds-space-300)';
+    readonly min: '48rem';
+    readonly max: '63.99rem';
+  };
+  readonly md: {
+    readonly gridItemGutter: 'var(--ds-space-300)';
+    readonly gridMargin: 'var(--ds-space-400)';
+    readonly min: '64rem';
+    readonly max: '89.99rem';
+  };
+  readonly lg: {
+    readonly gridItemGutter: 'var(--ds-space-400)';
+    readonly gridMargin: 'var(--ds-space-400)';
+    readonly min: '90rem';
+    readonly max: '109.99rem';
+  };
+  readonly xl: {
+    readonly gridItemGutter: 'var(--ds-space-400)';
+    readonly gridMargin: 'var(--ds-space-500)';
+    readonly min: '110rem';
+    readonly max: null;
+  };
+};
+
+// @internal
+export const UNSAFE_media: {
+  above: {
+    readonly xxs: '@media all';
+    readonly xs: '@media (min-width: 30rem)';
+    readonly sm: '@media (min-width: 48rem)';
+    readonly md: '@media (min-width: 64rem)';
+    readonly lg: '@media (min-width: 90rem)';
+    readonly xl: '@media (min-width: 110rem)';
+  };
+  below: {
+    readonly xs: '@media not all and (min-width: 30rem)';
+    readonly sm: '@media not all and (min-width: 48rem)';
+    readonly md: '@media not all and (min-width: 64rem)';
+    readonly lg: '@media not all and (min-width: 90rem)';
+    readonly xl: '@media not all and (min-width: 110rem)';
+  };
+  only: {
+    readonly xxs: '@media (min-width: 0rem) and (max-width: 29.99rem)';
+    readonly xs: '@media (min-width: 30rem) and (max-width: 47.99rem)';
+    readonly sm: '@media (min-width: 48rem) and (max-width: 63.99rem)';
+    readonly md: '@media (min-width: 64rem) and (max-width: 89.99rem)';
+    readonly lg: '@media (min-width: 90rem) and (max-width: 109.99rem)';
+    readonly xl: '@media (min-width: 110rem)';
+  };
+};
+
+// @public
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
@@ -629,0 +696,0 @@ style: Primitive extends typeof Box

tmp/api-report-tmp.d.ts

@@ -262,3 +262,3 @@ ## API Report File for "@atlaskit/primitives"
 // @public
-type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
+export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
 
@@ -520,2 +520,69 @@ // @public (undocumented)
 // @public
+export const UNSAFE_BREAKPOINTS_CONFIG: {
+    readonly xxs: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-200)";
+        readonly min: "0rem";
+        readonly max: "29.99rem";
+    };
+    readonly xs: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-200)";
+        readonly min: "30rem";
+        readonly max: "47.99rem";
+    };
+    readonly sm: {
+        readonly gridItemGutter: "var(--ds-space-200)";
+        readonly gridMargin: "var(--ds-space-300)";
+        readonly min: "48rem";
+        readonly max: "63.99rem";
+    };
+    readonly md: {
+        readonly gridItemGutter: "var(--ds-space-300)";
+        readonly gridMargin: "var(--ds-space-400)";
+        readonly min: "64rem";
+        readonly max: "89.99rem";
+    };
+    readonly lg: {
+        readonly gridItemGutter: "var(--ds-space-400)";
+        readonly gridMargin: "var(--ds-space-400)";
+        readonly min: "90rem";
+        readonly max: "109.99rem";
+    };
+    readonly xl: {
+        readonly gridItemGutter: "var(--ds-space-400)";
+        readonly gridMargin: "var(--ds-space-500)";
+        readonly min: "110rem";
+        readonly max: null;
+    };
+};
+
+// @internal
+export const UNSAFE_media: {
+    above: {
+        readonly xxs: "@media all";
+        readonly xs: "@media (min-width: 30rem)";
+        readonly sm: "@media (min-width: 48rem)";
+        readonly md: "@media (min-width: 64rem)";
+        readonly lg: "@media (min-width: 90rem)";
+        readonly xl: "@media (min-width: 110rem)";
+    };
+    below: {
+        readonly xs: "@media not all and (min-width: 30rem)";
+        readonly sm: "@media not all and (min-width: 48rem)";
+        readonly md: "@media not all and (min-width: 64rem)";
+        readonly lg: "@media not all and (min-width: 90rem)";
+        readonly xl: "@media not all and (min-width: 110rem)";
+    };
+    only: {
+        readonly xxs: "@media (min-width: 0rem) and (max-width: 29.99rem)";
+        readonly xs: "@media (min-width: 30rem) and (max-width: 47.99rem)";
+        readonly sm: "@media (min-width: 48rem) and (max-width: 63.99rem)";
+        readonly md: "@media (min-width: 64rem) and (max-width: 89.99rem)";
+        readonly lg: "@media (min-width: 90rem) and (max-width: 109.99rem)";
+        readonly xl: "@media (min-width: 110rem)";
+    };
+};
+
+// @public
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[] : never): {
@@ -522,0 +589,0 @@ readonly [uniqueSymbol]: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => ReactElement<any, JSXElementConstructor<any>| string> | null) & FC<BoxProps<"div">> ? BoxStyles : Primitive extends MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId" | "xcss"> & RefAttributes<any>>> ? InlineStyles : never;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1728810

increased by0.44%

Lines of code

6445

increased by1.29%

No dependency changes