@atlaskit/primitives 1.2.0 → 1.2.1
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 +6 -0
- package/constellation/box/examples.mdx +2 -2
- package/constellation/inline/usage.mdx +1 -0
- package/constellation/overview/index.mdx +1 -1
- package/constellation/responsive/usage.mdx +0 -7
- package/constellation/xcss/examples.mdx +8 -1
- package/package.json +4 -1
- package/dist/cjs/version.json +0 -5
- package/dist/es2019/version.json +0 -5
- package/dist/esm/version.json +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -21,7 +21,7 @@ import { CodeDocsHeader } from '@af/design-system-docs-ui';
|
|
|
21
21
|
## Basic
|
|
22
22
|
|
|
23
23
|
Box is a general-purpose container that allows for controlled use of design tokens. Use the given props to configure display behaviour and styling that aligns with the Atlassian Design System.
|
|
24
|
-
[To learn more about styling primitive components visit our xcss documentation.](/components/primitives/xcss/usage)
|
|
24
|
+
[To learn more about styling primitive components visit our `xcss` documentation.](/components/primitives/xcss/usage)
|
|
25
25
|
|
|
26
26
|
<Example Component={BoxBasic} packageName="@atlaskit/primitives/box" />
|
|
27
27
|
|
|
@@ -41,7 +41,7 @@ The nomenclature used by these props follows [logical properties](https://develo
|
|
|
41
41
|
|
|
42
42
|
## xcss
|
|
43
43
|
|
|
44
|
-
Box exposes an `xcss` prop. This prop accepts `xcss` function calls that contain a subset of permitted styles. When used with `Box`, xcss accepts most CSS properties, and when a token exists, the rule accepts that token as a value.
|
|
44
|
+
Box exposes an `xcss` prop. This prop accepts `xcss` function calls that contain a subset of permitted styles. When used with `Box`, `xcss` accepts most CSS properties, and when a token exists, the rule accepts that token as a value.
|
|
45
45
|
For more information on xcss, see the dedicated [xcss documentation](/components/primitives/xcss).
|
|
46
46
|
|
|
47
47
|
<Example Component={BoxXcss} packageName="@atlaskit/primitives/box" />
|
|
@@ -32,6 +32,7 @@ The various Inline props can then be used to customize the spacing and styling o
|
|
|
32
32
|
- `rowSpace`
|
|
33
33
|
- `separator`
|
|
34
34
|
|
|
35
|
+
## Related
|
|
35
36
|
- [Learn more about the Primitives](/components/primitives/overview)
|
|
36
37
|
- [Learn more about the Box primitive](/components/primitives/box/usage)
|
|
37
38
|
- [Learn more about the Stack primitive](/components/primitives/stack/usage)
|
|
@@ -76,4 +76,4 @@ The ESLint rule <a href="/components/eslint-plugin-design-system/usage#use-primi
|
|
|
76
76
|
- [Learn more about the Stack primitive](/components/primitives/stack/usage)
|
|
77
77
|
- [Learn more about the Grid primitive](/components/primitives/grid/examples)
|
|
78
78
|
- [Learn more about the Bleed primitive](/components/primitives/bleed/examples)
|
|
79
|
-
- [Learn more about the
|
|
79
|
+
- [Learn more about the Flex primitive](/components/primitives/flex/examples)
|
|
@@ -41,10 +41,3 @@ const customStyles = css({
|
|
|
41
41
|
[media.above.xl]: { marginBlock: token('space.150') },
|
|
42
42
|
});
|
|
43
43
|
```
|
|
44
|
-
|
|
45
|
-
### `media.below` usage
|
|
46
|
-
|
|
47
|
-
This is intentionally excluded at the moment as we're shipping our opinion that teams should design mobile-first.
|
|
48
|
-
We understand this will not scale and we're open to change, but we'd like to change this with feedback.
|
|
49
|
-
|
|
50
|
-
If we do add it back, we'd suggest codebases prefer a single approach (eg. `above` or `below`) and use that consistently. Mixing them results in confusion (though they can be safely used together and can result in better CSS performance when done correctly).
|
|
@@ -7,6 +7,7 @@ order: 1
|
|
|
7
7
|
import xcssBasic from '../../examples/constellation/xcss/basic';
|
|
8
8
|
import xcssInteractive from '../../examples/constellation/xcss/interactivity';
|
|
9
9
|
import xcssResponsive from '../../examples/constellation/xcss/responsiveness';
|
|
10
|
+
import xcssConditional from '../../examples/constellation/xcss/conditional-styles';
|
|
10
11
|
|
|
11
12
|
import { CodeDocsHeader } from '@af/design-system-docs-ui';
|
|
12
13
|
|
|
@@ -31,6 +32,12 @@ To enable interactivity, use familiar selectors like `:hover` and `:focus-visibl
|
|
|
31
32
|
|
|
32
33
|
## Responsiveness
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
`xcss` also accepts a subset of media queries at [predefined breakpoints](/components/primitives/responsive/breakpoints/examples).
|
|
35
36
|
|
|
36
37
|
<Example Component={xcssResponsive} packageName="@atlaskit/primitives/xcss" />
|
|
38
|
+
|
|
39
|
+
## Conditional styles
|
|
40
|
+
|
|
41
|
+
To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
|
|
42
|
+
|
|
43
|
+
<Example Component={xcssConditional} packageName="@atlaskit/primitives/xcss" />
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
"atlaskit:src": "src/index.tsx",
|
|
17
17
|
"atlassian": {
|
|
18
18
|
"team": "Design System Team",
|
|
19
|
+
"productPushConsumption": [
|
|
20
|
+
"jira"
|
|
21
|
+
],
|
|
19
22
|
"inPublicMirror": false,
|
|
20
23
|
"releaseModel": "continuous",
|
|
21
24
|
"website": {
|
package/dist/cjs/version.json
DELETED
package/dist/es2019/version.json
DELETED