@atlaskit/tile 0.2.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tile
 
+## 1.0.0
+
+### Major Changes
+
+- [`951d5982db119`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/951d5982db119) -
+  Released for general availability
+
+## 0.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.1
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -10,40 +10,52 @@ import TileBorder from '../../examples/constellation/tile-border';
 import TileInset from '../../examples/constellation/tile-inset';
 import TileLabelling from '../../examples/constellation/tile-labelling';
 import TileThemed from '../../examples/constellation/tile-themed';
+import TileSkeletonExample from '../../examples/constellation/tile-skeleton';
 
 ## Default
 
-The default tile has a medium size, neutral background, and inset enabled – ready to accept any asset as content.
+The default tile has a medium size, neutral background, and inset enabled – ready to accept any
+asset as content.
 
 <Example Component={TileDefault} packageName="@atlaskit/tile" />
 
 ## Size
 
-Tiles can be set to six different sizes using the <inlineCode>size</inlineCode> prop, from <inlineCode>xxsmall</inlineCode> (16px) to <inlineCode>xlarge</inlineCode> (48px). This defaults to <inlineCode>medium</inlineCode> (32px).
+Tiles can be set to six different sizes using the <inlineCode>size</inlineCode> prop, from
+
+<inlineCode>xxsmall</inlineCode> (16px) to <inlineCode>xlarge</inlineCode> (48px). This defaults to
+<inlineCode>medium</inlineCode> (32px).
 
 <Example Component={TileSizes} packageName="@atlaskit/tile" />
 
 ## Background color
 
-Tiles support a variety of background colors using the <inlineCode>backgroundColor</inlineCode> prop, which can be set to <a href="/components/tokens/all-tokens">design tokens</a>. This defaults to <inlineCode>color.background.neutral</inlineCode>.
+Tiles support a variety of background colors using the <inlineCode>backgroundColor</inlineCode>
+prop, which can be set to <a href="/components/tokens/all-tokens">design tokens</a>. This defaults
+to <inlineCode>color.background.neutral</inlineCode>.
 
 <Example Component={TileBackgroundColor} packageName="@atlaskit/tile" />
 
 ### Static colors
 
-Alternatively, static <inlineCode>white</inlineCode> or <inlineCode>black</inlineCode> background colors are supported. These will not change with the color mode, unlike design tokens.
+Alternatively, static <inlineCode>white</inlineCode> or <inlineCode>black</inlineCode> background
+colors are supported. These will not change with the color mode, unlike design tokens.
 
 <Example Component={TileBackgroundColorStatic} packageName="@atlaskit/tile" />
 
 ## Border
 
-Tiles can display a border around the tile with the <inlineCode>hasBorder</inlineCode> prop. This is disabled by default.
+Tiles can display a border around the tile with the <inlineCode>hasBorder</inlineCode> prop. This is
+disabled by default.
 
 <Example Component={TileBorder} packageName="@atlaskit/tile" />
 
 ## Inset
 
-Tiles can be configured with or without internal inset (padding) using <inlineCode>isInset</inlineCode>. Disabling inset can be used for supplying assets with backgrounds, such as third-party logos.
+Tiles can be configured with or without internal inset (padding) using
+
+<inlineCode>isInset</inlineCode>. Disabling inset can be used for supplying assets with backgrounds,
+such as third-party logos.
 
 Inset is enabled by default to provide appropriate spacing for assets.
 
@@ -51,18 +63,34 @@ Inset is enabled by default to provide appropriate spacing for assets.
 
 ## Labelling
 
-Use the <inlineCode>label</inlineCode> prop to provide accessible labelling for tiles. Use descriptive labels for meaningful tiles, or empty strings for decorative tiles.
+Use the <inlineCode>label</inlineCode> prop to provide accessible labelling for tiles. Use
+descriptive labels for meaningful tiles, or empty strings for decorative tiles.
 
 <Example Component={TileLabelling} packageName="@atlaskit/tile" />
 
 ## Themed assets
 
-Tiles can swap assets between light and dark mode, by using existing theming capabilities within the design system.
+Tiles can swap assets between light and dark mode, by using existing theming capabilities within the
+design system.
 
 This may be useful if assets need more contrast in either light or dark mode.
 
-Alternatively, suitable SVG assets that use <inlineCode>currentColor</inlineCode> will inherit tile's <inlineCode>color</inlineCode>, which is already themed using the design token <inlineCode>color.text</inlineCode>.
+Alternatively, suitable SVG assets that use <inlineCode>currentColor</inlineCode> will inherit
+tile's <inlineCode>color</inlineCode>, which is already themed using the design token
+
+<inlineCode>color.text</inlineCode>.
 
 <Example Component={TileThemed} packageName="@atlaskit/tile" appearance="source-only" />
 
+## Loading skeleton
+
+A loading skeleton is provided called <inlineCode>TileSkeleton</inlineCode>. This can be used in
+conjunction with the [Skeleton component](/components/skeleton), which
+
+<inlineCode>TileSkeleton</inlineCode> utilizes internally – with added consistent sizing for tiles
+to prevent layout shift.
+
+This is useful for when you need to display a loading state for a tile, such as when fetching data
+or waiting for an API response.
 
+<Example Component={TileSkeletonExample} packageName="@atlaskit/tile/skeleton" />

package/constellation/index/overview.mdx

@@ -13,18 +13,25 @@ import iconTile from './images/icon-tile-thumbnail-light.png';
 
 ## Tile system
 
-The tile component sets the foundation of our tile system, setting a standard for size, space, and shape properties for all tile-shaped elements within Atlassian UI.
+The tile component sets the foundation of our tile system, setting a standard for size, space, and
+shape properties for all tile-shaped elements within Atlassian UI.
 
 So far, the properties of tile is inherited by the following components:
+
 - Icon tile
 - Object tile
 
-Makers should default to using these components, but in cases where a 'custom' tile is needed (for assets such as third-party logos or emojis), the tile component can be leveraged.
-
-Together, these components make a comprehensive system that brings flexibility and consistency to our apps.
+Makers should default to using these components, but in cases where a 'custom' tile is needed (for
+assets such as third-party logos or emojis), the tile component can be leveraged.
 
-<Image src={tileOverviewLight} srcDark={tileOverviewDark} alt="An overview of the components in the tile system" />
+Together, these components make a comprehensive system that brings flexibility and consistency to
+our apps.
 
+<Image
+	src={tileOverviewLight}
+	srcDark={tileOverviewDark}
+	alt="An overview of the components in the tile system"
+/>
 
 ## Tile components
 
@@ -36,18 +43,35 @@ Together, these components make a comprehensive system that brings flexibility a
 	</THead>
 	<TBody>
 		<Row key={1}>
-			<Cell width="18%"><a href="/components/tile/examples">Tile</a></Cell>
-			<Cell>A versatile, foundational container with baked-in sizing and radii properties for displaying elements in a tile shape. It is flexible and can be used as a container to add in any foreground element, background, or color as needed.</Cell>
+			<Cell width="18%">
+				<a href="/components/tile/examples">Tile</a>
+			</Cell>
+			<Cell>
+				A versatile, foundational container with baked-in sizing and radii properties for displaying
+				elements in a tile shape. It is flexible and can be used as a container to add in any
+				foreground element, background, or color as needed.
+			</Cell>
 			<Cell>Anything that's not an icon or object, such as emojis and third-party logos</Cell>
 		</Row>
 		<Row key={2}>
-			<Cell width="18%"><a href="/components/icon/icon-tile/examples">Icon tile</a></Cell>
-			<Cell>Allows icons to be scaled larger than 16px. It has pre-set options for color and size to ensure accessibility and readability, and to prominently highlight icons in a layout.</Cell>
+			<Cell width="18%">
+				<a href="/components/icon/icon-tile/examples">Icon tile</a>
+			</Cell>
+			<Cell>
+				Allows icons to be scaled larger than 16px. It has pre-set options for color and size to
+				ensure accessibility and readability, and to prominently highlight icons in a layout.
+			</Cell>
 			<Cell>Icons</Cell>
 		</Row>
 		<Row key={3}>
-			<Cell width="18%"><a href="/components/object/object-tile/examples">Object tile</a></Cell>
-			<Cell>Use instead of an icon tile to represent Atlassian-specific content icons, such as pages, live docs, whiteboard, or bugs. Each object tile has a specific color token that cannot be changed.</Cell>
+			<Cell width="18%">
+				<a href="/components/object/object-tile/examples">Object tile</a>
+			</Cell>
+			<Cell>
+				Use instead of an icon tile to represent Atlassian-specific content icons, such as pages,
+				live docs, whiteboard, or bugs. Each object tile has a specific color token that cannot be
+				changed.
+			</Cell>
 			<Cell>Objects</Cell>
 		</Row>
 	</TBody>
@@ -75,4 +99,3 @@ Together, these components make a comprehensive system that brings flexibility a
 		href="/components/icon/icon-tile/examples"
 	/>
 </RelatedCardGrid>
-

package/constellation/index/props.mdx

@@ -5,10 +5,15 @@ props:
   includeInternal: true
   exports:
     - default
+    - TileSkeleton
 ---
 
-import Tile from '@atlaskit/tile';
-
 ## Props
 
+### Tile props
+
 <TSMorphProps exportName="default" packageName="@atlaskit/tile" />
+
+### TileSkeleton props
+
+<TSMorphProps exportName="TileSkeleton" packageName="@atlaskit/tile" />

package/constellation/index/usage.mdx

@@ -5,7 +5,6 @@ order: 3
 import SectionMessage from '@atlaskit/section-message';
 import Image from '@atlaskit/image';
 
-
 import tileAnatomyLight from './images/tile-anatomy-light.png';
 import tileAnatomyDark from './images/tile-anatomy-dark.png';
 import tileReferenceDo from './images/do-donts/tile-reference-do.png';
@@ -16,12 +15,19 @@ import tileVariantDont from './images/do-donts/tile-variant-dont.png';
 ## Usage
 
 <SectionMessage appearance="warning">
-	Tile should only be used if existing components (e.g. <a href="/components/icon/icon-tile/examples">Icon tile</a>, <a href="/components/object/object-tile/examples">Object tile</a>, <a href="/components/avatar/examples#square">Square Avatars</a>) do not meet your needs.
+	Tile should only be used if existing components (e.g.{' '}
+	<a href="/components/icon/icon-tile/examples">Icon tile</a>,{' '}
+	<a href="/components/object/object-tile/examples">Object tile</a>,{' '}
+	<a href="/components/avatar/examples#square">Square Avatars</a>) do not meet your needs.
 </SectionMessage>
 
-Tile is a versatile, foundational container with baked in sizing and radii properties for displaying elements in a tile shape. It is unopinionated in its content and can be used to slot in any asset, background, color or foreground element as needed.
+Tile is a versatile, foundational container with baked in sizing and radii properties for displaying
+elements in a tile shape. It is unopinionated in its content and can be used to slot in any asset,
+background, color or foreground element as needed.
 
-Both <a href="/components/icon/icon-tile/examples">Icon tile</a> and <a href="/components/object/object-tile/examples">Object tile</a> inherit properties of tile ensuring a consistent and cohesive tile system across various applications.
+Both [Icon tile](/components/icon/icon-tile/examples) and
+[Object tile](/components/object/object-tile/examples) inherit properties of tile ensuring a
+consistent and cohesive tile system across various applications.
 
 Use tiles to slot in elements such as:
 
@@ -32,7 +38,9 @@ Use tiles to slot in elements such as:
 
 <Image src={tileAnatomyLight} srcDark={tileAnatomyDark} alt="Anatomy of a tile" />
 
-1. **Tile background**: By default, the inset variant has a neutral background set to <inlineCode>color.background.neutral</inlineCode>. This can be switched out with other background tokens, white, or black.
+1. **Tile background**: By default, the inset variant has a neutral background set to
+   <inlineCode>color.background.neutral</inlineCode>. This can be switched out with other background
+   tokens, white, or black.
 2. **Foreground element**: Place any element within the bounds of the slot.
 
 ## Best practices
@@ -63,7 +71,8 @@ Use tiles to slot in elements such as:
 
 ### 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.
+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"
@@ -86,5 +95,6 @@ Tiles support a range of sizes from 16px to 48px. As a general rule when selecti
 
 ## Related
 
-- For icons with colored backgrounds, use <a href="/components/icon/icon-tile/examples">Icon tile</a>
+- For icons with colored backgrounds, use <a href="/components/icon/icon-tile/examples">Icon
+  tile</a>
 - For objects in a tile, use <a href="/components/object/object-tile/examples">Object tile</a>

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Skeleton", {
+Object.defineProperty(exports, "TileSkeleton", {
   enumerable: true,
   get: function get() {
     return _skeleton.default;

package/dist/cjs/skeleton.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _skeleton = _interopRequireDefault(require("@atlaskit/skeleton"));
 var _tile = _interopRequireDefault(require("./tile"));
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
 function TileSkeleton(_ref) {

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
 export { default } from './tile';
-export { default as Skeleton } from './entry-point/skeleton';
+export { default as TileSkeleton } from './entry-point/skeleton';

package/dist/es2019/skeleton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import Skeleton from '@atlaskit/skeleton';
 import Tile from './tile';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
 export default function TileSkeleton({

package/dist/esm/index.js

@@ -1,2 +1,2 @@
 export { default } from './tile';
-export { default as Skeleton } from './entry-point/skeleton';
+export { default as TileSkeleton } from './entry-point/skeleton';

package/dist/esm/skeleton.js

@@ -2,9 +2,9 @@ import React from 'react';
 import Skeleton from '@atlaskit/skeleton';
 import Tile from './tile';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
 export default function TileSkeleton(_ref) {

package/dist/types/entry-point/skeleton.d.ts

@@ -1,2 +1,2 @@
 export { default } from '../skeleton';
-export { type SkeletonProps } from '../types';
+export { type TileSkeletonProps } from '../types';

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './tile';
 export { type TileProps } from './types';
-export { default as Skeleton, type SkeletonProps } from './entry-point/skeleton';
+export { default as TileSkeleton, type TileSkeletonProps } from './entry-point/skeleton';

package/dist/types/skeleton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SkeletonProps } from './types';
+import type { TileSkeletonProps } from './types';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
-export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: SkeletonProps): React.JSX.Element;
+export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: TileSkeletonProps): React.JSX.Element;

package/dist/types/types.d.ts

@@ -47,9 +47,9 @@ export type TileProps = {
      */
     testId?: string;
 };
-export type SkeletonProps = {
+export type TileSkeletonProps = {
     /**
-     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if `shimmeringEndColor` is also provided.
      */
     color?: string;
     /**

package/dist/types-ts4.5/entry-point/skeleton.d.ts

@@ -1,2 +1,2 @@
 export { default } from '../skeleton';
-export { type SkeletonProps } from '../types';
+export { type TileSkeletonProps } from '../types';

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

@@ -1,3 +1,3 @@
 export { default } from './tile';
 export { type TileProps } from './types';
-export { default as Skeleton, type SkeletonProps } from './entry-point/skeleton';
+export { default as TileSkeleton, type TileSkeletonProps } from './entry-point/skeleton';

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SkeletonProps } from './types';
+import type { TileSkeletonProps } from './types';
 /**
- * __Skeleton__
+ * __Tile Skeleton__
  *
- * A skeleton is the loading state for the tile component.
+ * A tile skeleton is the loading state for the tile component.
  *
  */
-export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: SkeletonProps): React.JSX.Element;
+export default function TileSkeleton({ color, isShimmering, shimmeringEndColor, size, testId, }: TileSkeletonProps): React.JSX.Element;

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

@@ -47,9 +47,9 @@ export type TileProps = {
      */
     testId?: string;
 };
-export type SkeletonProps = {
+export type TileSkeletonProps = {
     /**
-     * Overrides the default color of skeleton, and overrides the default shimmering start color if ShimmeringEndColor also provided.
+     * Overrides the default color of skeleton, and overrides the default shimmering start color if `shimmeringEndColor` is also provided.
      */
     color?: string;
     /**

package/package.json

@@ -26,9 +26,9 @@
 	"atlaskit:src": "src/index.tsx",
 	"dependencies": {
 		"@atlaskit/skeleton": "^2.1.0",
-		"@atlaskit/tokens": "^6.5.0",
+		"@atlaskit/tokens": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3"
+		"@compiled/react": "^0.18.6"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -80,7 +80,7 @@
 		}
 	},
 	"name": "@atlaskit/tile",
-	"version": "0.2.1",
+	"version": "1.0.0",
 	"description": "A tile is a rounded square that takes an asset and represents a noun.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",