@atlaskit/tile 1.0.4 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/tile
 
+## 1.0.6
+
+### Patch Changes
+
+- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
+  Enrol all Design System UI packages into the React Compiler with platform gating via
+  isReactCompilerActivePlatform.
+- Updated dependencies
+
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.0.4
 
 ### Patch Changes

package/constellation/index/usage.mdx

@@ -50,48 +50,52 @@ Use tiles to slot in elements such as:
 - Non-inset variant: suited for full bleed assets as it allows for an end-to-end fill
 - Inset variant: use for any other content
 
-<DoDont
-	type="do"
-	image={{
-		url: tileVariantDo,
-		alt: '',
-	}}
->
-	Use the same variant when tiles are listed or grouped.
-</DoDont>
-<DoDont
-	type="dont"
-	image={{
-		url: tileVariantDont,
-		alt: '',
-	}}
->
-	Avoid mixing inset and non-inset variables in a group.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: tileVariantDo,
+			alt: '',
+		}}
+	>
+		Use the same variant when tiles are listed or grouped.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: tileVariantDont,
+			alt: '',
+		}}
+	>
+		Avoid mixing inset and non-inset variables in a group.
+	</DoDont>
+</DoDontGrid>
 
 ### Reference height of adjacent content for size
 
 Tiles support a range of sizes from 16px to 48px. As a general rule when selecting size, reference
 the size of the tile to the height of its adjacent content for visual balance.
 
-<DoDont
-	type="do"
-	image={{
-		url: tileReferenceDo,
-		alt: '',
-	}}
->
-	Align tile sizing to closely match the height of its adjacent content.
-</DoDont>
-<DoDont
-	type="dont"
-	image={{
-		url: tileReferenceDont,
-		alt: '',
-	}}
->
-	Avoid selecting tile sizes smaller than the height of its adjacent content.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: tileReferenceDo,
+			alt: '',
+		}}
+	>
+		Align tile sizing to closely match the height of its adjacent content.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: tileReferenceDont,
+			alt: '',
+		}}
+	>
+		Avoid selecting tile sizes smaller than the height of its adjacent content.
+	</DoDont>
+</DoDontGrid>
 
 ## Related
 

package/dist/cjs/tile.js

@@ -1,4 +1,4 @@
-/* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.39.1 */
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 "use strict";
 

package/dist/es2019/tile.js

@@ -1,4 +1,4 @@
-/* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.39.1 */
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 import "./tile.compiled.css";
 import * as React from 'react';

package/dist/esm/tile.js

@@ -1,4 +1,4 @@
-/* tile.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* tile.tsx generated by @compiled/babel-plugin v0.39.1 */
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 import "./tile.compiled.css";
 import * as React from 'react';

package/package.json

@@ -1,5 +1,12 @@
 {
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "Tile",
@@ -26,9 +33,9 @@
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -36,8 +43,10 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/ssr": "workspace:^",
+		"@atlassian/react-compiler-gating": "workspace:^",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0"
 	},
@@ -79,7 +88,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "1.0.4",
+	"version": "1.0.6",
 	"description": "A tile is a rounded square that takes an asset and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",

package/tile.docs.tsx

@@ -0,0 +1,30 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Tile',
+		description:
+			'A tile is a versatile, foundational container with baked-in sizing and radii properties for displaying elements in a tile shape.',
+		status: 'general-availability',
+		import: {
+			name: 'Tile',
+			package: '@atlaskit/tile',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		examples: [
+			{
+				name: 'Basic',
+				description: 'Basic tile example',
+				source: path.resolve(__dirname, './examples/basic.tsx'),
+			},
+		],
+		keywords: ['tile', 'icon', 'container', 'avatar', 'asset', 'emoji', 'logo', 'shape'],
+		categories: ['images and icons', 'layout'],
+	},
+];
+
+export default documentation;