@atlaskit/progress-indicator 12.0.15 → 12.0.17
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 +14 -0
- package/dist/cjs/components/indicator.compiled.css +4 -4
- package/dist/cjs/components/indicator.js +2 -2
- package/dist/es2019/components/indicator.compiled.css +4 -4
- package/dist/es2019/components/indicator.js +2 -2
- package/dist/esm/components/indicator.compiled.css +4 -4
- package/dist/esm/components/indicator.js +2 -2
- package/dist/types/components/indicator.d.ts +1 -1
- package/dist/types-ts4.5/components/indicator.d.ts +1 -1
- package/package.json +9 -8
- package/progress-indicator.docs.tsx +47 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/progress-indicator
|
|
2
2
|
|
|
3
|
+
## 12.0.17
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e2085d35701ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e2085d35701ca) -
|
|
8
|
+
Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 12.0.16
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 12.0.15
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
|
|
4
4
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._12ji1r31{outline-color:currentColor}
|
|
5
5
|
._12y3idpf{outline-width:0}
|
|
6
|
-
._19bvze3t{padding-left:var(--ds-space-0,0)}
|
|
7
6
|
._1bsbg7kr{width:var(--ds-dots-size)}
|
|
8
7
|
._1cs8stnw:before{position:absolute}
|
|
9
8
|
._1kt9b3bt:before{content:""}
|
|
10
9
|
._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
|
|
10
|
+
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
11
11
|
._1qu2glyw{outline-style:none}
|
|
12
12
|
._4t3ig7kr{height:var(--ds-dots-size)}
|
|
13
13
|
._80omtlke{cursor:pointer}
|
|
14
|
-
.
|
|
14
|
+
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
15
|
+
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
|
|
15
16
|
._cfu11ule:before{display:block}
|
|
16
17
|
._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
|
|
17
18
|
._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
|
|
18
19
|
._kqswh2mm{position:relative}
|
|
19
|
-
.
|
|
20
|
-
._u5f3ze3t{padding-right:var(--ds-space-0,0)}
|
|
20
|
+
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
|
|
21
21
|
._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* indicator.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* indicator.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
|
|
4
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -24,7 +24,7 @@ var colorBorderMap = {
|
|
|
24
24
|
primary: "_19it1axi"
|
|
25
25
|
};
|
|
26
26
|
var buttonStyle = {
|
|
27
|
-
root: "_12ji1r31 _1qu2glyw _12y3idpf
|
|
27
|
+
root: "_12ji1r31 _1qu2glyw _12y3idpf _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _80omtlke"
|
|
28
28
|
};
|
|
29
29
|
var backgroundColor = function backgroundColor(isSelected) {
|
|
30
30
|
if (!isSelected) {
|
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
|
|
4
4
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._12ji1r31{outline-color:currentColor}
|
|
5
5
|
._12y3idpf{outline-width:0}
|
|
6
|
-
._19bvze3t{padding-left:var(--ds-space-0,0)}
|
|
7
6
|
._1bsbg7kr{width:var(--ds-dots-size)}
|
|
8
7
|
._1cs8stnw:before{position:absolute}
|
|
9
8
|
._1kt9b3bt:before{content:""}
|
|
10
9
|
._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
|
|
10
|
+
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
11
11
|
._1qu2glyw{outline-style:none}
|
|
12
12
|
._4t3ig7kr{height:var(--ds-dots-size)}
|
|
13
13
|
._80omtlke{cursor:pointer}
|
|
14
|
-
.
|
|
14
|
+
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
15
|
+
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
|
|
15
16
|
._cfu11ule:before{display:block}
|
|
16
17
|
._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
|
|
17
18
|
._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
|
|
18
19
|
._kqswh2mm{position:relative}
|
|
19
|
-
.
|
|
20
|
-
._u5f3ze3t{padding-right:var(--ds-space-0,0)}
|
|
20
|
+
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
|
|
21
21
|
._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* indicator.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* indicator.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./indicator.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -15,7 +15,7 @@ const colorBorderMap = {
|
|
|
15
15
|
primary: "_19it1axi"
|
|
16
16
|
};
|
|
17
17
|
const buttonStyle = {
|
|
18
|
-
root: "_12ji1r31 _1qu2glyw _12y3idpf
|
|
18
|
+
root: "_12ji1r31 _1qu2glyw _12y3idpf _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _80omtlke"
|
|
19
19
|
};
|
|
20
20
|
const backgroundColor = isSelected => {
|
|
21
21
|
if (!isSelected) {
|
|
@@ -3,19 +3,19 @@
|
|
|
3
3
|
._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
|
|
4
4
|
._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._12ji1r31{outline-color:currentColor}
|
|
5
5
|
._12y3idpf{outline-width:0}
|
|
6
|
-
._19bvze3t{padding-left:var(--ds-space-0,0)}
|
|
7
6
|
._1bsbg7kr{width:var(--ds-dots-size)}
|
|
8
7
|
._1cs8stnw:before{position:absolute}
|
|
9
8
|
._1kt9b3bt:before{content:""}
|
|
10
9
|
._1mp41th6:before{width:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
|
|
10
|
+
._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
|
|
11
11
|
._1qu2glyw{outline-style:none}
|
|
12
12
|
._4t3ig7kr{height:var(--ds-dots-size)}
|
|
13
13
|
._80omtlke{cursor:pointer}
|
|
14
|
-
.
|
|
14
|
+
._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
|
|
15
|
+
._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
|
|
15
16
|
._cfu11ule:before{display:block}
|
|
16
17
|
._iajm1yh4:before{inset-block-start:calc(var(--ds-dots-margin)*-1/2)}
|
|
17
18
|
._kfgt1th6:before{height:calc(var(--ds-dots-size) + var(--ds-dots-margin))}
|
|
18
19
|
._kqswh2mm{position:relative}
|
|
19
|
-
.
|
|
20
|
-
._u5f3ze3t{padding-right:var(--ds-space-0,0)}
|
|
20
|
+
._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
|
|
21
21
|
._z5wt1yh4:before{inset-inline-start:calc(var(--ds-dots-margin)*-1/2)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* indicator.tsx generated by @compiled/babel-plugin v0.
|
|
1
|
+
/* indicator.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
2
|
import "./indicator.compiled.css";
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import { ax, ix } from "@compiled/react/runtime";
|
|
@@ -15,7 +15,7 @@ var colorBorderMap = {
|
|
|
15
15
|
primary: "_19it1axi"
|
|
16
16
|
};
|
|
17
17
|
var buttonStyle = {
|
|
18
|
-
root: "_12ji1r31 _1qu2glyw _12y3idpf
|
|
18
|
+
root: "_12ji1r31 _1qu2glyw _12y3idpf _1q51ze3t _y4tize3t _85i5ze3t _bozgze3t _80omtlke"
|
|
19
19
|
};
|
|
20
20
|
var backgroundColor = function backgroundColor(isSelected) {
|
|
21
21
|
if (!isSelected) {
|
|
@@ -13,7 +13,7 @@ type CommonProps = {
|
|
|
13
13
|
*
|
|
14
14
|
* A presentational indicator with no interactivity
|
|
15
15
|
*/
|
|
16
|
-
export declare const PresentationalIndicator: ({ appearance, isSelected, testId }: CommonProps) => JSX.Element;
|
|
16
|
+
export declare const PresentationalIndicator: ({ appearance, isSelected, testId, }: CommonProps) => JSX.Element;
|
|
17
17
|
type ButtonIndicatorProps = {
|
|
18
18
|
panelId: string;
|
|
19
19
|
tabId: string;
|
|
@@ -13,7 +13,7 @@ type CommonProps = {
|
|
|
13
13
|
*
|
|
14
14
|
* A presentational indicator with no interactivity
|
|
15
15
|
*/
|
|
16
|
-
export declare const PresentationalIndicator: ({ appearance, isSelected, testId }: CommonProps) => JSX.Element;
|
|
16
|
+
export declare const PresentationalIndicator: ({ appearance, isSelected, testId, }: CommonProps) => JSX.Element;
|
|
17
17
|
type ButtonIndicatorProps = {
|
|
18
18
|
panelId: string;
|
|
19
19
|
tabId: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/progress-indicator",
|
|
3
|
-
"version": "12.0.
|
|
3
|
+
"version": "12.0.17",
|
|
4
4
|
"description": "A progress indicator shows the user where they are along the steps of a journey.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -24,13 +24,13 @@
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@atlaskit/analytics-next": "^11.
|
|
28
|
-
"@atlaskit/ds-lib": "^
|
|
29
|
-
"@atlaskit/primitives": "^18.
|
|
30
|
-
"@atlaskit/tokens": "^11.
|
|
27
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
28
|
+
"@atlaskit/ds-lib": "^6.0.0",
|
|
29
|
+
"@atlaskit/primitives": "^18.1.0",
|
|
30
|
+
"@atlaskit/tokens": "^11.4.0",
|
|
31
31
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
32
32
|
"@babel/runtime": "^7.0.0",
|
|
33
|
-
"@compiled/react": "^0.
|
|
33
|
+
"@compiled/react": "^0.20.0",
|
|
34
34
|
"bind-event-listener": "^3.0.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -40,12 +40,13 @@
|
|
|
40
40
|
"@af/accessibility-testing": "workspace:^",
|
|
41
41
|
"@af/integration-testing": "workspace:^",
|
|
42
42
|
"@af/visual-regression": "workspace:^",
|
|
43
|
-
"@atlaskit/button": "^23.
|
|
43
|
+
"@atlaskit/button": "^23.10.0",
|
|
44
44
|
"@atlaskit/css": "^0.19.0",
|
|
45
|
-
"@atlaskit/docs": "^11.
|
|
45
|
+
"@atlaskit/docs": "^11.7.0",
|
|
46
46
|
"@atlaskit/link": "^3.3.0",
|
|
47
47
|
"@atlaskit/section-message": "^8.12.0",
|
|
48
48
|
"@atlassian/ssr-tests": "workspace:^",
|
|
49
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
49
50
|
"@testing-library/react": "^16.3.0",
|
|
50
51
|
"@testing-library/user-event": "^14.4.3",
|
|
51
52
|
"@types/jscodeshift": "^0.11.0",
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'ProgressIndicator',
|
|
8
|
+
description: 'A component for displaying progress through steps or completion status.',
|
|
9
|
+
status: 'general-availability',
|
|
10
|
+
import: {
|
|
11
|
+
name: 'ProgressIndicator',
|
|
12
|
+
package: '@atlaskit/progress-indicator',
|
|
13
|
+
type: 'named',
|
|
14
|
+
packagePath: path.resolve(__dirname),
|
|
15
|
+
packageJson: require('./package.json'),
|
|
16
|
+
},
|
|
17
|
+
usageGuidelines: [
|
|
18
|
+
'Use for step-by-step processes',
|
|
19
|
+
'Provide clear progress indicators',
|
|
20
|
+
'Handle progress updates appropriately',
|
|
21
|
+
'Consider progress completion states',
|
|
22
|
+
],
|
|
23
|
+
contentGuidelines: [
|
|
24
|
+
'Use clear, descriptive step labels',
|
|
25
|
+
'Provide meaningful progress descriptions',
|
|
26
|
+
'Use appropriate progress terminology',
|
|
27
|
+
'Keep progress information concise',
|
|
28
|
+
],
|
|
29
|
+
accessibilityGuidelines: [
|
|
30
|
+
'Ensure progress is announced by screen readers',
|
|
31
|
+
'Use appropriate progress indicators',
|
|
32
|
+
'Provide clear progress context',
|
|
33
|
+
'Consider progress timing and updates',
|
|
34
|
+
],
|
|
35
|
+
examples: [
|
|
36
|
+
{
|
|
37
|
+
name: 'Progress Indicator',
|
|
38
|
+
description: 'Progress Indicator example',
|
|
39
|
+
source: path.resolve(__dirname, './examples/ai/progress-indicator.tsx'),
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
keywords: ['progress', 'indicator', 'steps', 'completion', 'status'],
|
|
43
|
+
categories: ['feedback'],
|
|
44
|
+
},
|
|
45
|
+
];
|
|
46
|
+
|
|
47
|
+
export default documentation;
|