@atlaskit/tile 0.2.1 → 0.2.2
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
|
@@ -13,37 +13,48 @@ import TileThemed from '../../examples/constellation/tile-themed';
|
|
|
13
13
|
|
|
14
14
|
## Default
|
|
15
15
|
|
|
16
|
-
The default tile has a medium size, neutral background, and inset enabled – ready to accept any
|
|
16
|
+
The default tile has a medium size, neutral background, and inset enabled – ready to accept any
|
|
17
|
+
asset as content.
|
|
17
18
|
|
|
18
19
|
<Example Component={TileDefault} packageName="@atlaskit/tile" />
|
|
19
20
|
|
|
20
21
|
## Size
|
|
21
22
|
|
|
22
|
-
Tiles can be set to six different sizes using the <inlineCode>size</inlineCode> prop, from
|
|
23
|
+
Tiles can be set to six different sizes using the <inlineCode>size</inlineCode> prop, from
|
|
24
|
+
|
|
25
|
+
<inlineCode>xxsmall</inlineCode> (16px) to <inlineCode>xlarge</inlineCode> (48px). This defaults to
|
|
26
|
+
<inlineCode>medium</inlineCode> (32px).
|
|
23
27
|
|
|
24
28
|
<Example Component={TileSizes} packageName="@atlaskit/tile" />
|
|
25
29
|
|
|
26
30
|
## Background color
|
|
27
31
|
|
|
28
|
-
Tiles support a variety of background colors using the <inlineCode>backgroundColor</inlineCode>
|
|
32
|
+
Tiles support a variety of background colors using the <inlineCode>backgroundColor</inlineCode>
|
|
33
|
+
prop, which can be set to <a href="/components/tokens/all-tokens">design tokens</a>. This defaults
|
|
34
|
+
to <inlineCode>color.background.neutral</inlineCode>.
|
|
29
35
|
|
|
30
36
|
<Example Component={TileBackgroundColor} packageName="@atlaskit/tile" />
|
|
31
37
|
|
|
32
38
|
### Static colors
|
|
33
39
|
|
|
34
|
-
Alternatively, static <inlineCode>white</inlineCode> or <inlineCode>black</inlineCode> background
|
|
40
|
+
Alternatively, static <inlineCode>white</inlineCode> or <inlineCode>black</inlineCode> background
|
|
41
|
+
colors are supported. These will not change with the color mode, unlike design tokens.
|
|
35
42
|
|
|
36
43
|
<Example Component={TileBackgroundColorStatic} packageName="@atlaskit/tile" />
|
|
37
44
|
|
|
38
45
|
## Border
|
|
39
46
|
|
|
40
|
-
Tiles can display a border around the tile with the <inlineCode>hasBorder</inlineCode> prop. This is
|
|
47
|
+
Tiles can display a border around the tile with the <inlineCode>hasBorder</inlineCode> prop. This is
|
|
48
|
+
disabled by default.
|
|
41
49
|
|
|
42
50
|
<Example Component={TileBorder} packageName="@atlaskit/tile" />
|
|
43
51
|
|
|
44
52
|
## Inset
|
|
45
53
|
|
|
46
|
-
Tiles can be configured with or without internal inset (padding) using
|
|
54
|
+
Tiles can be configured with or without internal inset (padding) using
|
|
55
|
+
|
|
56
|
+
<inlineCode>isInset</inlineCode>. Disabling inset can be used for supplying assets with backgrounds,
|
|
57
|
+
such as third-party logos.
|
|
47
58
|
|
|
48
59
|
Inset is enabled by default to provide appropriate spacing for assets.
|
|
49
60
|
|
|
@@ -51,18 +62,21 @@ Inset is enabled by default to provide appropriate spacing for assets.
|
|
|
51
62
|
|
|
52
63
|
## Labelling
|
|
53
64
|
|
|
54
|
-
Use the <inlineCode>label</inlineCode> prop to provide accessible labelling for tiles. Use
|
|
65
|
+
Use the <inlineCode>label</inlineCode> prop to provide accessible labelling for tiles. Use
|
|
66
|
+
descriptive labels for meaningful tiles, or empty strings for decorative tiles.
|
|
55
67
|
|
|
56
68
|
<Example Component={TileLabelling} packageName="@atlaskit/tile" />
|
|
57
69
|
|
|
58
70
|
## Themed assets
|
|
59
71
|
|
|
60
|
-
Tiles can swap assets between light and dark mode, by using existing theming capabilities within the
|
|
72
|
+
Tiles can swap assets between light and dark mode, by using existing theming capabilities within the
|
|
73
|
+
design system.
|
|
61
74
|
|
|
62
75
|
This may be useful if assets need more contrast in either light or dark mode.
|
|
63
76
|
|
|
64
|
-
Alternatively, suitable SVG assets that use <inlineCode>currentColor</inlineCode> will inherit
|
|
65
|
-
|
|
66
|
-
<Example Component={TileThemed} packageName="@atlaskit/tile" appearance="source-only" />
|
|
77
|
+
Alternatively, suitable SVG assets that use <inlineCode>currentColor</inlineCode> will inherit
|
|
78
|
+
tile's <inlineCode>color</inlineCode>, which is already themed using the design token
|
|
67
79
|
|
|
80
|
+
<inlineCode>color.text</inlineCode>.
|
|
68
81
|
|
|
82
|
+
<Example Component={TileThemed} packageName="@atlaskit/tile" appearance="source-only" />
|
|
@@ -13,18 +13,25 @@ import iconTile from './images/icon-tile-thumbnail-light.png';
|
|
|
13
13
|
|
|
14
14
|
## Tile system
|
|
15
15
|
|
|
16
|
-
The tile component sets the foundation of our tile system, setting a standard for size, space, and
|
|
16
|
+
The tile component sets the foundation of our tile system, setting a standard for size, space, and
|
|
17
|
+
shape properties for all tile-shaped elements within Atlassian UI.
|
|
17
18
|
|
|
18
19
|
So far, the properties of tile is inherited by the following components:
|
|
20
|
+
|
|
19
21
|
- Icon tile
|
|
20
22
|
- Object tile
|
|
21
23
|
|
|
22
|
-
Makers should default to using these components, but in cases where a 'custom' tile is needed (for
|
|
23
|
-
|
|
24
|
-
Together, these components make a comprehensive system that brings flexibility and consistency to our apps.
|
|
24
|
+
Makers should default to using these components, but in cases where a 'custom' tile is needed (for
|
|
25
|
+
assets such as third-party logos or emojis), the tile component can be leveraged.
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
Together, these components make a comprehensive system that brings flexibility and consistency to
|
|
28
|
+
our apps.
|
|
27
29
|
|
|
30
|
+
<Image
|
|
31
|
+
src={tileOverviewLight}
|
|
32
|
+
srcDark={tileOverviewDark}
|
|
33
|
+
alt="An overview of the components in the tile system"
|
|
34
|
+
/>
|
|
28
35
|
|
|
29
36
|
## Tile components
|
|
30
37
|
|
|
@@ -36,18 +43,35 @@ Together, these components make a comprehensive system that brings flexibility a
|
|
|
36
43
|
</THead>
|
|
37
44
|
<TBody>
|
|
38
45
|
<Row key={1}>
|
|
39
|
-
<Cell width="18%"
|
|
40
|
-
|
|
46
|
+
<Cell width="18%">
|
|
47
|
+
<a href="/components/tile/examples">Tile</a>
|
|
48
|
+
</Cell>
|
|
49
|
+
<Cell>
|
|
50
|
+
A versatile, foundational container with baked-in sizing and radii properties for displaying
|
|
51
|
+
elements in a tile shape. It is flexible and can be used as a container to add in any
|
|
52
|
+
foreground element, background, or color as needed.
|
|
53
|
+
</Cell>
|
|
41
54
|
<Cell>Anything that's not an icon or object, such as emojis and third-party logos</Cell>
|
|
42
55
|
</Row>
|
|
43
56
|
<Row key={2}>
|
|
44
|
-
<Cell width="18%"
|
|
45
|
-
|
|
57
|
+
<Cell width="18%">
|
|
58
|
+
<a href="/components/icon/icon-tile/examples">Icon tile</a>
|
|
59
|
+
</Cell>
|
|
60
|
+
<Cell>
|
|
61
|
+
Allows icons to be scaled larger than 16px. It has pre-set options for color and size to
|
|
62
|
+
ensure accessibility and readability, and to prominently highlight icons in a layout.
|
|
63
|
+
</Cell>
|
|
46
64
|
<Cell>Icons</Cell>
|
|
47
65
|
</Row>
|
|
48
66
|
<Row key={3}>
|
|
49
|
-
<Cell width="18%"
|
|
50
|
-
|
|
67
|
+
<Cell width="18%">
|
|
68
|
+
<a href="/components/object/object-tile/examples">Object tile</a>
|
|
69
|
+
</Cell>
|
|
70
|
+
<Cell>
|
|
71
|
+
Use instead of an icon tile to represent Atlassian-specific content icons, such as pages,
|
|
72
|
+
live docs, whiteboard, or bugs. Each object tile has a specific color token that cannot be
|
|
73
|
+
changed.
|
|
74
|
+
</Cell>
|
|
51
75
|
<Cell>Objects</Cell>
|
|
52
76
|
</Row>
|
|
53
77
|
</TBody>
|
|
@@ -75,4 +99,3 @@ Together, these components make a comprehensive system that brings flexibility a
|
|
|
75
99
|
href="/components/icon/icon-tile/examples"
|
|
76
100
|
/>
|
|
77
101
|
</RelatedCardGrid>
|
|
78
|
-
|
|
@@ -5,7 +5,6 @@ order: 3
|
|
|
5
5
|
import SectionMessage from '@atlaskit/section-message';
|
|
6
6
|
import Image from '@atlaskit/image';
|
|
7
7
|
|
|
8
|
-
|
|
9
8
|
import tileAnatomyLight from './images/tile-anatomy-light.png';
|
|
10
9
|
import tileAnatomyDark from './images/tile-anatomy-dark.png';
|
|
11
10
|
import tileReferenceDo from './images/do-donts/tile-reference-do.png';
|
|
@@ -16,12 +15,19 @@ import tileVariantDont from './images/do-donts/tile-variant-dont.png';
|
|
|
16
15
|
## Usage
|
|
17
16
|
|
|
18
17
|
<SectionMessage appearance="warning">
|
|
19
|
-
Tile should only be used if existing components (e.g.
|
|
18
|
+
Tile should only be used if existing components (e.g.{' '}
|
|
19
|
+
<a href="/components/icon/icon-tile/examples">Icon tile</a>,{' '}
|
|
20
|
+
<a href="/components/object/object-tile/examples">Object tile</a>,{' '}
|
|
21
|
+
<a href="/components/avatar/examples#square">Square Avatars</a>) do not meet your needs.
|
|
20
22
|
</SectionMessage>
|
|
21
23
|
|
|
22
|
-
Tile is a versatile, foundational container with baked in sizing and radii properties for displaying
|
|
24
|
+
Tile is a versatile, foundational container with baked in sizing and radii properties for displaying
|
|
25
|
+
elements in a tile shape. It is unopinionated in its content and can be used to slot in any asset,
|
|
26
|
+
background, color or foreground element as needed.
|
|
23
27
|
|
|
24
|
-
Both
|
|
28
|
+
Both [Icon tile](/components/icon/icon-tile/examples) and
|
|
29
|
+
[Object tile](/components/object/object-tile/examples) inherit properties of tile ensuring a
|
|
30
|
+
consistent and cohesive tile system across various applications.
|
|
25
31
|
|
|
26
32
|
Use tiles to slot in elements such as:
|
|
27
33
|
|
|
@@ -32,7 +38,9 @@ Use tiles to slot in elements such as:
|
|
|
32
38
|
|
|
33
39
|
<Image src={tileAnatomyLight} srcDark={tileAnatomyDark} alt="Anatomy of a tile" />
|
|
34
40
|
|
|
35
|
-
1. **Tile background**: By default, the inset variant has a neutral background set to
|
|
41
|
+
1. **Tile background**: By default, the inset variant has a neutral background set to
|
|
42
|
+
<inlineCode>color.background.neutral</inlineCode>. This can be switched out with other background
|
|
43
|
+
tokens, white, or black.
|
|
36
44
|
2. **Foreground element**: Place any element within the bounds of the slot.
|
|
37
45
|
|
|
38
46
|
## Best practices
|
|
@@ -63,7 +71,8 @@ Use tiles to slot in elements such as:
|
|
|
63
71
|
|
|
64
72
|
### Reference height of adjacent content for size
|
|
65
73
|
|
|
66
|
-
Tiles support a range of sizes from 16px to 48px. As a general rule when selecting size, reference
|
|
74
|
+
Tiles support a range of sizes from 16px to 48px. As a general rule when selecting size, reference
|
|
75
|
+
the size of the tile to the height of its adjacent content for visual balance.
|
|
67
76
|
|
|
68
77
|
<DoDont
|
|
69
78
|
type="do"
|
|
@@ -86,5 +95,6 @@ Tiles support a range of sizes from 16px to 48px. As a general rule when selecti
|
|
|
86
95
|
|
|
87
96
|
## Related
|
|
88
97
|
|
|
89
|
-
- For icons with colored backgrounds, use <a href="/components/icon/icon-tile/examples">Icon
|
|
98
|
+
- For icons with colored backgrounds, use <a href="/components/icon/icon-tile/examples">Icon
|
|
99
|
+
tile</a>
|
|
90
100
|
- For objects in a tile, use <a href="/components/object/object-tile/examples">Object tile</a>
|
package/package.json
CHANGED
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"atlaskit:src": "src/index.tsx",
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@atlaskit/skeleton": "^2.1.0",
|
|
29
|
-
"@atlaskit/tokens": "^
|
|
29
|
+
"@atlaskit/tokens": "^7.0.0",
|
|
30
30
|
"@babel/runtime": "^7.0.0",
|
|
31
|
-
"@compiled/react": "^0.18.
|
|
31
|
+
"@compiled/react": "^0.18.6"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": "^18.2.0"
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
}
|
|
81
81
|
},
|
|
82
82
|
"name": "@atlaskit/tile",
|
|
83
|
-
"version": "0.2.
|
|
83
|
+
"version": "0.2.2",
|
|
84
84
|
"description": "A tile is a rounded square that takes an asset and represents a noun.",
|
|
85
85
|
"author": "Atlassian Pty Ltd",
|
|
86
86
|
"license": "Apache-2.0",
|