@atlaskit/object 0.2.3 → 0.2.5
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 +12 -0
- package/constellation/index/examples.mdx +9 -9
- package/constellation/index/object-explorer.mdx +0 -1
- package/constellation/index/usage.mdx +20 -10
- package/constellation/object-tile/examples.mdx +10 -5
- package/constellation/object-tile/object-tile-explorer.mdx +0 -1
- package/constellation/object-tile/usage.mdx +27 -9
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -18,21 +18,21 @@ The default object has a medium size (16px) and a default label based on the obj
|
|
|
18
18
|
|
|
19
19
|
## Size
|
|
20
20
|
|
|
21
|
-
Objects can be set to two different sizes using the `size` prop: `small` (12px) or `medium` (16px).
|
|
21
|
+
Objects can be set to two different sizes using the `size` prop: `small` (12px) or `medium` (16px).
|
|
22
|
+
This defaults to `medium`.
|
|
22
23
|
|
|
23
|
-
If you need a larger size, use an [Object Tile](/components/object/object-tile/examples) instead –
|
|
24
|
+
If you need a larger size, use an [Object Tile](/components/object/object-tile/examples) instead –
|
|
25
|
+
which is available in 20px to 48px sizes.
|
|
24
26
|
|
|
25
|
-
<Example
|
|
26
|
-
Component={ObjectSizes}
|
|
27
|
-
packageName="@atlaskit/object"
|
|
28
|
-
hiddenSections={['iconography']}
|
|
29
|
-
/>
|
|
27
|
+
<Example Component={ObjectSizes} packageName="@atlaskit/object" hiddenSections={['iconography']} />
|
|
30
28
|
|
|
31
29
|
## Label
|
|
32
30
|
|
|
33
|
-
Use the `label` prop to provide accessible labelling for objects. Use descriptive labels for
|
|
31
|
+
Use the `label` prop to provide accessible labelling for objects. Use descriptive labels for
|
|
32
|
+
meaningful objects, or empty strings for decorative objects.
|
|
34
33
|
|
|
35
|
-
If not provided, the label will default to a human-readable version of the object type (for example,
|
|
34
|
+
If not provided, the label will default to a human-readable version of the object type (for example,
|
|
35
|
+
"Task" for a task object).
|
|
36
36
|
|
|
37
37
|
<Example
|
|
38
38
|
Component={ObjectLabelling}
|
|
@@ -12,20 +12,25 @@ import objectColorsDont from './images/do-donts/object-colors-dont.png';
|
|
|
12
12
|
import objectLargerDo from './images/do-donts/object-larger-do.png';
|
|
13
13
|
import objectLargerDont from './images/do-donts/object-larger-dont.png';
|
|
14
14
|
|
|
15
|
-
|
|
16
15
|
## Usage
|
|
17
16
|
|
|
18
17
|
<SectionMessage appearance="warning">
|
|
19
|
-
Objects are only offered in small (12px) and medium (16px). For larger representations, use
|
|
18
|
+
Objects are only offered in small (12px) and medium (16px). For larger representations, use{' '}
|
|
19
|
+
<a href="/components/object/object-tile/examples">Object tile</a>.
|
|
20
20
|
</SectionMessage>
|
|
21
21
|
|
|
22
|
-
An object is a representation of an Atlassian content type. They can be concepts such as a page in
|
|
22
|
+
An object is a representation of an Atlassian content type. They can be concepts such as a page in
|
|
23
|
+
Confluence, a work item in Jira or a pull request in Bitbucket.
|
|
23
24
|
|
|
24
|
-
Unlike the standard <a href="/components/icon/examples">Icon</a> component, an object is an icon
|
|
25
|
+
Unlike the standard <a href="/components/icon/examples">Icon</a> component, an object is an icon
|
|
26
|
+
that has an assigned color to help people identify the content type faster. This reduces cognitive
|
|
27
|
+
load for people across apps and platforms.
|
|
25
28
|
|
|
26
29
|
## Size
|
|
27
30
|
|
|
28
|
-
There are 2 size options for object, representing the width and height in pixels: 12px and 16px. For
|
|
31
|
+
There are 2 size options for object, representing the width and height in pixels: 12px and 16px. For
|
|
32
|
+
larger sizes and increased legibility and visual prominence, use
|
|
33
|
+
[Object tile](/components/object/object-tile/examples).
|
|
29
34
|
|
|
30
35
|
<Image src={objectSizeLight} srcDark={objectSizeDark} alt="Object size" />
|
|
31
36
|
|
|
@@ -33,7 +38,8 @@ There are 2 size options for object, representing the width and height in pixels
|
|
|
33
38
|
|
|
34
39
|
### Larger than 16px - use an Object tile
|
|
35
40
|
|
|
36
|
-
Do not scale objects. For use cases that require a larger object, use
|
|
41
|
+
Do not scale objects. For use cases that require a larger object, use
|
|
42
|
+
[Object tile](/components/object/object-tile/examples).
|
|
37
43
|
|
|
38
44
|
<DoDont
|
|
39
45
|
type="do"
|
|
@@ -56,7 +62,8 @@ Do not scale objects. For use cases that require a larger object, use <a href="/
|
|
|
56
62
|
|
|
57
63
|
### Don’t change object colors
|
|
58
64
|
|
|
59
|
-
Objects are assigned specific colors. For consistency across our apps, don’t change the color of the
|
|
65
|
+
Objects are assigned specific colors. For consistency across our apps, don’t change the color of the
|
|
66
|
+
object.
|
|
60
67
|
|
|
61
68
|
<DoDont
|
|
62
69
|
type="do"
|
|
@@ -79,14 +86,17 @@ Objects are assigned specific colors. For consistency across our apps, don’t c
|
|
|
79
86
|
|
|
80
87
|
## Contributing and adding new objects
|
|
81
88
|
|
|
82
|
-
Atlassian teams may request a new object for their apps. Please follow the
|
|
89
|
+
Atlassian teams may request a new object for their apps. Please follow the
|
|
90
|
+
[request process](https://go.atlassian.com/ads-request-object) (Atlassian employees only).
|
|
83
91
|
|
|
84
92
|
## Accessibility
|
|
85
93
|
|
|
86
|
-
Use objects in combination with a title and meta-information, such as author, creation date, or
|
|
94
|
+
Use objects in combination with a title and meta-information, such as author, creation date, or
|
|
95
|
+
sub-heading.
|
|
87
96
|
|
|
88
97
|
## Related
|
|
89
98
|
|
|
90
|
-
- For objects larger than 16px, use <a href="/components/object/object-tile/examples">Object
|
|
99
|
+
- For objects larger than 16px, use <a href="/components/object/object-tile/examples">Object
|
|
100
|
+
tile</a>
|
|
91
101
|
- <a href="/components/icon/examples">Icon</a>
|
|
92
102
|
- <a href="/components/icon/icon-tile/examples">Icon tile</a>
|
|
@@ -21,9 +21,11 @@ The default object tile has a medium size (32px) and a default label based on th
|
|
|
21
21
|
|
|
22
22
|
## Size
|
|
23
23
|
|
|
24
|
-
Object tiles can be set to five different sizes using the `size` prop, from `xsmall` (20px) to
|
|
24
|
+
Object tiles can be set to five different sizes using the `size` prop, from `xsmall` (20px) to
|
|
25
|
+
`xlarge` (48px). This defaults to `medium` (32px).
|
|
25
26
|
|
|
26
|
-
If you need a smaller size, use a standard [Object](/components/object/examples) instead – which is
|
|
27
|
+
If you need a smaller size, use a standard [Object](/components/object/examples) instead – which is
|
|
28
|
+
available in 12px or 16px sizes.
|
|
27
29
|
|
|
28
30
|
<Example
|
|
29
31
|
Component={ObjectTileSizes}
|
|
@@ -33,9 +35,11 @@ If you need a smaller size, use a standard [Object](/components/object/examples)
|
|
|
33
35
|
|
|
34
36
|
## Label
|
|
35
37
|
|
|
36
|
-
Use the `label` prop to provide accessible labelling for object tiles. Use descriptive labels for
|
|
38
|
+
Use the `label` prop to provide accessible labelling for object tiles. Use descriptive labels for
|
|
39
|
+
meaningful object tiles, or empty strings for decorative object tiles.
|
|
37
40
|
|
|
38
|
-
If not provided, the label will default to a human-readable version of the object type (for example,
|
|
41
|
+
If not provided, the label will default to a human-readable version of the object type (for example,
|
|
42
|
+
"Task" for a task object tile).
|
|
39
43
|
|
|
40
44
|
<Example
|
|
41
45
|
Component={ObjectTileLabelling}
|
|
@@ -45,7 +49,8 @@ If not provided, the label will default to a human-readable version of the objec
|
|
|
45
49
|
|
|
46
50
|
## Bold
|
|
47
51
|
|
|
48
|
-
Object tiles can be displayed with a bold appearance using the `isBold` prop. This changes the icon
|
|
52
|
+
Object tiles can be displayed with a bold appearance using the `isBold` prop. This changes the icon
|
|
53
|
+
color and adds a bold background color. This is disabled by default.
|
|
49
54
|
|
|
50
55
|
<Example
|
|
51
56
|
Component={ObjectTileBold}
|
|
@@ -17,29 +17,45 @@ import objectTileColorsDont from './images/do-donts/object-tile-colors-dont.png'
|
|
|
17
17
|
import objectTileSmallerDo from './images/do-donts/object-tile-smaller-do.png';
|
|
18
18
|
import objectTileSmallerDont from './images/do-donts/object-tile-smaller-dont.png';
|
|
19
19
|
|
|
20
|
-
|
|
21
20
|
## Usage
|
|
22
21
|
|
|
23
|
-
Object tile represents objects in a tile shape with properties inherited from the tile component.
|
|
22
|
+
Object tile represents objects in a tile shape with properties inherited from the tile component.
|
|
23
|
+
Use them to highlight [objects](/components/object/examples) in a layout, such as next to a group of
|
|
24
|
+
text. To represent standard icons in a tile, use
|
|
25
|
+
|
|
26
|
+
<a href="/components/icon/icon-tile/examples">Icon tile</a>.
|
|
24
27
|
|
|
25
28
|
## Anatomy
|
|
26
29
|
|
|
27
|
-
<Image
|
|
30
|
+
<Image
|
|
31
|
+
src={objectTileAnatomyLight}
|
|
32
|
+
srcDark={objectTileAnatomyDark}
|
|
33
|
+
alt="The anatomy of an Object tile"
|
|
34
|
+
/>
|
|
28
35
|
|
|
29
36
|
1. **Icon object:** Foreground icon represents Atlassian-specific content.
|
|
30
|
-
2. **Background:** The default appearance has a neutral background set to
|
|
37
|
+
2. **Background:** The default appearance has a neutral background set to
|
|
38
|
+
<inlineCode>color.background.neutral</inlineCode>. Bold tiles have an assigned background token
|
|
39
|
+
that cannot be changed.
|
|
31
40
|
|
|
32
41
|
## Size
|
|
33
42
|
|
|
34
|
-
There are currently 5 size options, representing the width and height in pixels: 20, 24, 32, 40, 48.
|
|
43
|
+
There are currently 5 size options, representing the width and height in pixels: 20, 24, 32, 40, 48.
|
|
44
|
+
To keep things easy to see, objects smaller than 20px must be shown without a tile container using
|
|
45
|
+
the [object](/components/object/examples) component.
|
|
35
46
|
|
|
36
|
-
<Image
|
|
47
|
+
<Image
|
|
48
|
+
src={objectTileSizeLight}
|
|
49
|
+
srcDark={objectTileSizeDark}
|
|
50
|
+
alt="All available object tile options"
|
|
51
|
+
/>
|
|
37
52
|
|
|
38
53
|
## Best practices
|
|
39
54
|
|
|
40
55
|
### Smaller than 20px - use an Object
|
|
41
56
|
|
|
42
|
-
For smaller representations such as in tables or smart links, use
|
|
57
|
+
For smaller representations such as in tables or smart links, use
|
|
58
|
+
[Object](/components/object/examples). Do not scale down object tile below 20px.
|
|
43
59
|
|
|
44
60
|
<DoDont
|
|
45
61
|
type="do"
|
|
@@ -62,7 +78,8 @@ For smaller representations such as in tables or smart links, use <a href="/comp
|
|
|
62
78
|
|
|
63
79
|
### Don’t change object tile colors
|
|
64
80
|
|
|
65
|
-
Object tiles are assigned specific colors. For consistency across our apps, don’t change their
|
|
81
|
+
Object tiles are assigned specific colors. For consistency across our apps, don’t change their
|
|
82
|
+
color.
|
|
66
83
|
|
|
67
84
|
<DoDont
|
|
68
85
|
type="do"
|
|
@@ -85,7 +102,8 @@ Object tiles are assigned specific colors. For consistency across our apps, don
|
|
|
85
102
|
|
|
86
103
|
## Accessibility
|
|
87
104
|
|
|
88
|
-
Use object tiles in combination with a title and meta-information, such as author, creation date, or
|
|
105
|
+
Use object tiles in combination with a title and meta-information, such as author, creation date, or
|
|
106
|
+
sub-heading.
|
|
89
107
|
|
|
90
108
|
## Related
|
|
91
109
|
|
package/package.json
CHANGED
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"@atlaskit/css": "^0.15.0",
|
|
29
29
|
"@atlaskit/icon": "^28.5.0",
|
|
30
30
|
"@atlaskit/icon-lab": "^5.10.0",
|
|
31
|
-
"@atlaskit/primitives": "^
|
|
31
|
+
"@atlaskit/primitives": "^16.0.0",
|
|
32
32
|
"@atlaskit/tile": "^0.2.0",
|
|
33
|
-
"@atlaskit/tokens": "^
|
|
33
|
+
"@atlaskit/tokens": "^7.0.0",
|
|
34
34
|
"@babel/runtime": "^7.0.0",
|
|
35
|
-
"@compiled/react": "^0.18.
|
|
35
|
+
"@compiled/react": "^0.18.6",
|
|
36
36
|
"tiny-invariant": "^1.2.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
}
|
|
92
92
|
},
|
|
93
93
|
"name": "@atlaskit/object",
|
|
94
|
-
"version": "0.2.
|
|
94
|
+
"version": "0.2.5",
|
|
95
95
|
"description": "An object is an icon that represents an Atlassian-specific content type.",
|
|
96
96
|
"author": "Atlassian Pty Ltd",
|
|
97
97
|
"license": "Apache-2.0",
|