@atlaskit/primitives 20.0.1 → 20.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,11 +1,40 @@
1
1
  # @atlaskit/primitives
2
2
 
3
+ ## 20.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`a02bbdc5849e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a02bbdc5849e2) -
8
+ Promote compiled Flex and Grid primitives to general availability.
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
14
+ ## 20.1.0
15
+
16
+ ### Minor Changes
17
+
18
+ - [`cd097a2111788`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd097a2111788) -
19
+ Republish packages depending on `@atlaskit/react-compiler-gating` so their published dependency
20
+ reference is updated to the renamed `@atlaskit/react-compiler-gating` scope.
21
+
22
+ The earlier rename of `@atlassian/react-compiler-gating` to `@atlaskit/react-compiler-gating` only
23
+ bumped the renamed package itself, so dependent packages were never republished and their
24
+ published versions still referenced the old `@atlassian/react-compiler-gating` name, which is not
25
+ available in the public npm registry. This minor bump republishes all affected packages with the
26
+ corrected dependency.
27
+
28
+ ### Patch Changes
29
+
30
+ - Updated dependencies
31
+
3
32
  ## 20.0.1
4
33
 
5
34
  ### Patch Changes
6
35
 
7
36
  - [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
8
- Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
37
+ Add @atlaskit/react-compiler-gating as a runtime dependency to enable React Compiler platform
9
38
  gating.
10
39
  - Updated dependencies
11
40
 
@@ -24,24 +24,24 @@ richly-configured `Inline` or `Stack`. Like Stack and Inline, `Flex` exclusively
24
24
  token-backed `gap` properties to ensure layouts using `Flex` match the Atlassian Design System
25
25
  spacing scale.
26
26
 
27
- <Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
27
+ <Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/compiled/flex" />
28
28
 
29
29
  ## Align items and justify content
30
30
 
31
31
  `Flex` applies the `alignItems` and `justifyContent` properties to align content along its cross and
32
32
  main axes respectively.
33
33
 
34
- <Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
34
+ <Example Component={FlexAlignItems} packageName="@atlaskit/primitives/compiled/flex" />
35
35
 
36
36
  ## Wrap
37
37
 
38
38
  Flex-prefixed properties in CSS do not have this prefix in the component API. For example,
39
39
  `flex-wrap` is instead applied as the `wrap` property.
40
40
 
41
- <Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />
41
+ <Example Component={FlexWrap} packageName="@atlaskit/primitives/compiled/flex" />
42
42
 
43
43
  ## Direction
44
44
 
45
45
  Flex direction is applied via the `direction` property.
46
46
 
47
- <Example Component={FlexDirection} packageName="@atlaskit/primitives/flex" />
47
+ <Example Component={FlexDirection} packageName="@atlaskit/primitives/compiled/flex" />
@@ -26,14 +26,14 @@ The `Grid` component is designed as a very basic mapping to the CSS Grid API. It
26
26
  alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or
27
27
  [Stack](/components/primitives/stack).
28
28
 
29
- <Example Component={GridBasic} packageName="@atlaskit/primitives/grid" />
29
+ <Example Component={GridBasic} packageName="@atlaskit/primitives/compiled/grid" />
30
30
 
31
31
  ## Gap properties
32
32
 
33
33
  Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid
34
34
  ergonomics and keep the whitespace of the grid harmonious with the spacing system.
35
35
 
36
- <Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
36
+ <Example Component={GridGap} packageName="@atlaskit/primitives/compiled/grid" />
37
37
 
38
38
  ## Template syntax
39
39
 
@@ -45,33 +45,33 @@ properties.
45
45
 
46
46
  Template columns enables grid to declare the way columns are applied in the template.
47
47
 
48
- <Example Component={GridTemplate} packageName="@atlaskit/primitives/grid" />
48
+ <Example Component={GridTemplate} packageName="@atlaskit/primitives/compiled/grid" />
49
49
 
50
50
  ### Template rows
51
51
 
52
52
  Template rows enables grid to declare the way row are applied in the template.
53
53
 
54
- <Example Component={GridTemplateRow} packageName="@atlaskit/primitives/grid" />
54
+ <Example Component={GridTemplateRow} packageName="@atlaskit/primitives/compiled/grid" />
55
55
 
56
56
  ### Template areas
57
57
 
58
58
  Template areas enables grid to declare the grid areas are applied in the template.
59
59
 
60
- <Example Component={GridTemplateArea} packageName="@atlaskit/primitives/grid" />
60
+ <Example Component={GridTemplateArea} packageName="@atlaskit/primitives/compiled/grid" />
61
61
 
62
62
  ## Autoflow syntax
63
63
 
64
64
  Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is
65
65
  instead applied via `autoFlow`.
66
66
 
67
- <Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
67
+ <Example Component={GridAutoFlow} packageName="@atlaskit/primitives/compiled/grid" />
68
68
 
69
69
  ## Responsive grid
70
70
 
71
71
  Here, we construct a grid layout that adapts from a single column to a four-column layout depending
72
72
  on the viewport size.
73
73
 
74
- <Example Component={ResponsiveGrid} packageName="@atlaskit/primitives/grid" />
74
+ <Example Component={ResponsiveGrid} packageName="@atlaskit/primitives/compiled/grid" />
75
75
 
76
76
  You may also be looking for:
77
77
 
@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
70
70
  action: 'clicked',
71
71
  componentName: componentName || 'Anchor',
72
72
  packageName: "@atlaskit/primitives",
73
- packageVersion: "20.0.0",
73
+ packageVersion: "20.1.0",
74
74
  analyticsData: analyticsContext,
75
75
  actionSubject: 'link'
76
76
  });
@@ -85,8 +85,8 @@ var styles = {
85
85
  *
86
86
  * @example
87
87
  * ```tsx
88
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
89
- * import { Flex, Box } from '@atlaskit/primitives'
88
+ * import { Box } from '@atlaskit/primitives/compiled'
89
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
90
90
  *
91
91
  * const Component = () => (
92
92
  * <Flex direction="column">
@@ -89,7 +89,8 @@ var gridAutoFlowMap = {
89
89
  *
90
90
  * @example
91
91
  * ```tsx
92
- * import { Grid, Box } from '@atlaskit/primitives'
92
+ * import { Box } from '@atlaskit/primitives/compiled'
93
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
93
94
  *
94
95
  * const Component = () => (
95
96
  * <Grid gap="space.100" gridColumns="1fr 1fr">
@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
61
61
  action: 'clicked',
62
62
  componentName: componentName || 'Pressable',
63
63
  packageName: "@atlaskit/primitives",
64
- packageVersion: "20.0.0",
64
+ packageVersion: "20.1.0",
65
65
  analyticsData: analyticsContext,
66
66
  actionSubject: 'button'
67
67
  });
@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
105
105
  action: 'clicked',
106
106
  componentName: componentName || 'Anchor',
107
107
  packageName: "@atlaskit/primitives",
108
- packageVersion: "20.0.0",
108
+ packageVersion: "20.1.0",
109
109
  analyticsData: analyticsContext,
110
110
  actionSubject: 'link'
111
111
  });
@@ -97,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
97
97
  action: 'clicked',
98
98
  componentName: componentName || 'Pressable',
99
99
  packageName: "@atlaskit/primitives",
100
- packageVersion: "20.0.0",
100
+ packageVersion: "20.1.0",
101
101
  analyticsData: analyticsContext,
102
102
  actionSubject: 'button'
103
103
  });
@@ -56,7 +56,7 @@ const AnchorNoRef = ({
56
56
  action: 'clicked',
57
57
  componentName: componentName || 'Anchor',
58
58
  packageName: "@atlaskit/primitives",
59
- packageVersion: "20.0.0",
59
+ packageVersion: "20.1.0",
60
60
  analyticsData: analyticsContext,
61
61
  actionSubject: 'link'
62
62
  });
@@ -74,8 +74,8 @@ const styles = {
74
74
  *
75
75
  * @example
76
76
  * ```tsx
77
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
78
- * import { Flex, Box } from '@atlaskit/primitives'
77
+ * import { Box } from '@atlaskit/primitives/compiled'
78
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
79
79
  *
80
80
  * const Component = () => (
81
81
  * <Flex direction="column">
@@ -81,7 +81,8 @@ const gridAutoFlowMap = {
81
81
  *
82
82
  * @example
83
83
  * ```tsx
84
- * import { Grid, Box } from '@atlaskit/primitives'
84
+ * import { Box } from '@atlaskit/primitives/compiled'
85
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
85
86
  *
86
87
  * const Component = () => (
87
88
  * <Grid gap="space.100" gridColumns="1fr 1fr">
@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
48
48
  action: 'clicked',
49
49
  componentName: componentName || 'Pressable',
50
50
  packageName: "@atlaskit/primitives",
51
- packageVersion: "20.0.0",
51
+ packageVersion: "20.1.0",
52
52
  analyticsData: analyticsContext,
53
53
  actionSubject: 'button'
54
54
  });
@@ -94,7 +94,7 @@ const AnchorNoRef = ({
94
94
  action: 'clicked',
95
95
  componentName: componentName || 'Anchor',
96
96
  packageName: "@atlaskit/primitives",
97
- packageVersion: "20.0.0",
97
+ packageVersion: "20.1.0",
98
98
  analyticsData: analyticsContext,
99
99
  actionSubject: 'link'
100
100
  });
@@ -86,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
86
86
  action: 'clicked',
87
87
  componentName: componentName || 'Pressable',
88
88
  packageName: "@atlaskit/primitives",
89
- packageVersion: "20.0.0",
89
+ packageVersion: "20.1.0",
90
90
  analyticsData: analyticsContext,
91
91
  actionSubject: 'button'
92
92
  });
@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
61
61
  action: 'clicked',
62
62
  componentName: componentName || 'Anchor',
63
63
  packageName: "@atlaskit/primitives",
64
- packageVersion: "20.0.0",
64
+ packageVersion: "20.1.0",
65
65
  analyticsData: analyticsContext,
66
66
  actionSubject: 'link'
67
67
  });
@@ -76,8 +76,8 @@ var styles = {
76
76
  *
77
77
  * @example
78
78
  * ```tsx
79
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
80
- * import { Flex, Box } from '@atlaskit/primitives'
79
+ * import { Box } from '@atlaskit/primitives/compiled'
80
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
81
81
  *
82
82
  * const Component = () => (
83
83
  * <Flex direction="column">
@@ -81,7 +81,8 @@ var gridAutoFlowMap = {
81
81
  *
82
82
  * @example
83
83
  * ```tsx
84
- * import { Grid, Box } from '@atlaskit/primitives'
84
+ * import { Box } from '@atlaskit/primitives/compiled'
85
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
85
86
  *
86
87
  * const Component = () => (
87
88
  * <Grid gap="space.100" gridColumns="1fr 1fr">
@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
52
52
  action: 'clicked',
53
53
  componentName: componentName || 'Pressable',
54
54
  packageName: "@atlaskit/primitives",
55
- packageVersion: "20.0.0",
55
+ packageVersion: "20.1.0",
56
56
  analyticsData: analyticsContext,
57
57
  actionSubject: 'button'
58
58
  });
@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
99
99
  action: 'clicked',
100
100
  componentName: componentName || 'Anchor',
101
101
  packageName: "@atlaskit/primitives",
102
- packageVersion: "20.0.0",
102
+ packageVersion: "20.1.0",
103
103
  analyticsData: analyticsContext,
104
104
  actionSubject: 'link'
105
105
  });
@@ -91,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
91
91
  action: 'clicked',
92
92
  componentName: componentName || 'Pressable',
93
93
  packageName: "@atlaskit/primitives",
94
- packageVersion: "20.0.0",
94
+ packageVersion: "20.1.0",
95
95
  analyticsData: analyticsContext,
96
96
  actionSubject: 'button'
97
97
  });
@@ -56,8 +56,8 @@ export type FlexProps<T extends ElementType = 'div'> = {
56
56
  *
57
57
  * @example
58
58
  * ```tsx
59
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
60
- * import { Flex, Box } from '@atlaskit/primitives'
59
+ * import { Box } from '@atlaskit/primitives/compiled'
60
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
61
61
  *
62
62
  * const Component = () => (
63
63
  * <Flex direction="column">
@@ -66,7 +66,8 @@ export type GridProps<T extends ElementType = 'div'> = {
66
66
  *
67
67
  * @example
68
68
  * ```tsx
69
- * import { Grid, Box } from '@atlaskit/primitives'
69
+ * import { Box } from '@atlaskit/primitives/compiled'
70
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
70
71
  *
71
72
  * const Component = () => (
72
73
  * <Grid gap="space.100" gridColumns="1fr 1fr">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "20.0.1",
3
+ "version": "20.2.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -20,7 +20,7 @@
20
20
  "react-compiler": {
21
21
  "enabled": true,
22
22
  "gating": {
23
- "source": "@atlassian/react-compiler-gating",
23
+ "source": "@atlaskit/react-compiler-gating",
24
24
  "importSpecifierName": "isReactCompilerActivePlatform"
25
25
  }
26
26
  },
@@ -60,19 +60,13 @@
60
60
  "title": "Flex",
61
61
  "folder": "flex",
62
62
  "slug": "primitives/flex",
63
- "id": "@atlaskit/primitives/flex",
64
- "status": {
65
- "type": "beta"
66
- }
63
+ "id": "@atlaskit/primitives/compiled/flex"
67
64
  },
68
65
  {
69
66
  "title": "Grid",
70
67
  "folder": "grid",
71
68
  "slug": "primitives/grid",
72
- "id": "@atlaskit/primitives/grid",
73
- "status": {
74
- "type": "beta"
75
- }
69
+ "id": "@atlaskit/primitives/compiled/grid"
76
70
  },
77
71
  {
78
72
  "title": "Bleed",
@@ -139,14 +133,14 @@
139
133
  "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
140
134
  },
141
135
  "dependencies": {
142
- "@atlaskit/analytics-next": "^12.0.0",
143
- "@atlaskit/app-provider": "^5.0.0",
136
+ "@atlaskit/analytics-next": "^12.1.0",
137
+ "@atlaskit/app-provider": "^5.1.0",
144
138
  "@atlaskit/css": "^1.0.0",
145
139
  "@atlaskit/ds-lib": "^8.0.0",
146
140
  "@atlaskit/interaction-context": "^4.0.0",
147
- "@atlaskit/tokens": "^15.0.0",
148
- "@atlaskit/visually-hidden": "^4.0.0",
149
- "@atlassian/react-compiler-gating": "^0.2.0",
141
+ "@atlaskit/react-compiler-gating": "^0.2.0",
142
+ "@atlaskit/tokens": "^15.2.0",
143
+ "@atlaskit/visually-hidden": "^4.1.0",
150
144
  "@babel/runtime": "^7.0.0",
151
145
  "@compiled/react": "^0.20.0",
152
146
  "@emotion/react": "^11.7.1",
@@ -162,27 +156,27 @@
162
156
  "@af/formatting": "workspace:^",
163
157
  "@af/integration-testing": "workspace:^",
164
158
  "@af/visual-regression": "workspace:^",
165
- "@atlaskit/avatar": "^26.0.0",
166
- "@atlaskit/button": "^24.1.0",
167
- "@atlaskit/checkbox": "^18.0.0",
168
- "@atlaskit/code": "^18.0.0",
159
+ "@atlaskit/avatar": "^26.1.0",
160
+ "@atlaskit/button": "^24.3.0",
161
+ "@atlaskit/checkbox": "^18.1.0",
162
+ "@atlaskit/code": "^18.2.0",
169
163
  "@atlaskit/docs": "^12.0.0",
170
- "@atlaskit/dropdown-menu": "^17.0.0",
171
- "@atlaskit/flag": "^18.0.0",
172
- "@atlaskit/form": "^16.0.0",
173
- "@atlaskit/heading": "^6.0.0",
174
- "@atlaskit/icon": "^36.0.0",
175
- "@atlaskit/image": "^4.0.0",
176
- "@atlaskit/link": "^4.0.0",
177
- "@atlaskit/logo": "^21.1.0",
178
- "@atlaskit/lozenge": "^14.0.0",
179
- "@atlaskit/motion": "^7.1.0",
180
- "@atlaskit/object": "^2.0.0",
181
- "@atlaskit/range": "^11.0.0",
182
- "@atlaskit/section-message": "^9.1.0",
183
- "@atlaskit/textfield": "^9.0.0",
184
- "@atlaskit/toggle": "^17.0.0",
185
- "@atlaskit/tooltip": "^23.0.0",
164
+ "@atlaskit/dropdown-menu": "^17.1.0",
165
+ "@atlaskit/flag": "^18.1.0",
166
+ "@atlaskit/form": "^16.1.0",
167
+ "@atlaskit/heading": "^6.1.0",
168
+ "@atlaskit/icon": "^36.1.0",
169
+ "@atlaskit/image": "^4.1.0",
170
+ "@atlaskit/link": "^4.1.0",
171
+ "@atlaskit/logo": "^21.2.0",
172
+ "@atlaskit/lozenge": "^14.1.0",
173
+ "@atlaskit/motion": "^7.2.0",
174
+ "@atlaskit/object": "^2.1.0",
175
+ "@atlaskit/range": "^11.1.0",
176
+ "@atlaskit/section-message": "^9.2.0",
177
+ "@atlaskit/textfield": "^9.1.0",
178
+ "@atlaskit/toggle": "^17.1.0",
179
+ "@atlaskit/tooltip": "^23.1.0",
186
180
  "@atlassian/analytics-bridge": "^0.8.0",
187
181
  "@atlassian/codegen": "^0.2.0",
188
182
  "@atlassian/ssr-tests": "workspace:^",
@@ -113,7 +113,7 @@ const documentation: StructuredContentSource = {
113
113
  {
114
114
  name: 'Flex',
115
115
  description: 'A primitive Flex component for flexbox layout with compiled styling support.',
116
- status: 'open-beta',
116
+ status: 'general-availability',
117
117
  import: {
118
118
  name: 'Flex',
119
119
  package: '@atlaskit/primitives/compiled',
@@ -193,7 +193,7 @@ const documentation: StructuredContentSource = {
193
193
  {
194
194
  name: 'Grid',
195
195
  description: 'A primitive Grid component for CSS Grid layout with compiled styling support.',
196
- status: 'open-beta',
196
+ status: 'general-availability',
197
197
  import: {
198
198
  name: 'Grid',
199
199
  package: '@atlaskit/primitives/compiled',