@atlaskit/spotlight 0.10.6 → 0.10.7
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 +8 -0
- package/constellation/index/usage.mdx +42 -40
- package/dist/cjs/ui/popover-content/index.js +1 -3
- package/dist/es2019/ui/popover-content/index.js +1 -3
- package/dist/esm/ui/popover-content/index.js +1 -3
- package/dist/types/index.d.ts +2 -2
- package/dist/types-ts4.5/index.d.ts +2 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -51,25 +51,26 @@ A tour is a series of spotlights that point to multiple areas of the UI. <br />
|
|
|
51
51
|
Tours should be used sparingly. Before designing a tour, assess if you can combine or eliminate
|
|
52
52
|
steps to keep the experience as lightweight as possible, as seen below.
|
|
53
53
|
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
<DoDont
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
>
|
|
71
|
-
|
|
72
|
-
</DoDont>
|
|
54
|
+
<DoDontGrid>
|
|
55
|
+
<DoDont
|
|
56
|
+
type="do"
|
|
57
|
+
image={{
|
|
58
|
+
url: tourUseDo,
|
|
59
|
+
alt: 'Example of a single-step spotlight with content that combines the example content of the multi-step tour next to it.',
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
Keep things lightweight. Aim for one step with active and concise messaging.
|
|
63
|
+
</DoDont>
|
|
64
|
+
<DoDont
|
|
65
|
+
type="dont"
|
|
66
|
+
image={{
|
|
67
|
+
url: tourUseDont,
|
|
68
|
+
alt: 'Example of a multi-step spotlight with content that that can be combined into a single step.',
|
|
69
|
+
}}
|
|
70
|
+
>
|
|
71
|
+
Avoid tours unless the steps are crucial. Consolidate information first.
|
|
72
|
+
</DoDont>
|
|
73
|
+
</DoDontGrid>
|
|
73
74
|
|
|
74
75
|
### Triggered spotlights
|
|
75
76
|
|
|
@@ -98,25 +99,26 @@ also activate UI.
|
|
|
98
99
|
|
|
99
100
|
## Principles of use
|
|
100
101
|
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<DoDont
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
>
|
|
118
|
-
|
|
119
|
-
</DoDont>
|
|
102
|
+
<DoDontGrid>
|
|
103
|
+
<DoDont
|
|
104
|
+
type="do"
|
|
105
|
+
image={{
|
|
106
|
+
url: principlesDo,
|
|
107
|
+
alt: 'Example of spotlight with content that explains what Rovo is.',
|
|
108
|
+
}}
|
|
109
|
+
>
|
|
110
|
+
Use spotlights to educate users or introduce them to something new.
|
|
111
|
+
</DoDont>
|
|
112
|
+
<DoDont
|
|
113
|
+
type="dont"
|
|
114
|
+
image={{
|
|
115
|
+
url: principlesDont,
|
|
116
|
+
alt: 'Example of a spotlight with content that promotes purchasing collections to get Rovo.',
|
|
117
|
+
}}
|
|
118
|
+
>
|
|
119
|
+
Use spotlights for upsells or other transactional messaging.
|
|
120
|
+
</DoDont>
|
|
121
|
+
</DoDontGrid>
|
|
120
122
|
|
|
121
123
|
## Anatomy and specifications
|
|
122
124
|
|
|
@@ -179,7 +181,7 @@ concise as possible, easy to scan, and only communicate essential information.
|
|
|
179
181
|
|
|
180
182
|
- 75 characters max
|
|
181
183
|
- Brief and direct
|
|
182
|
-
- Elaborate value
|
|
184
|
+
- Elaborate value
|
|
183
185
|
|
|
184
186
|
#### Primary CTA
|
|
185
187
|
|
|
@@ -190,7 +192,7 @@ concise as possible, easy to scan, and only communicate essential information.
|
|
|
190
192
|
- Let them know where they’re going next when navigating to another screen “Go to Jira”
|
|
191
193
|
- Be explicit when activating UI components “Chat with Rovo” opens the Rovo panel
|
|
192
194
|
- Use “Learn more” when navigating to more detailed information
|
|
193
|
-
- For tours: start with “Next” and conclude the flow with “Done”
|
|
195
|
+
- For tours: start with “Next” and conclude the flow with “Done”
|
|
194
196
|
|
|
195
197
|
#### Secondary CTA
|
|
196
198
|
|
|
@@ -155,9 +155,7 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(props) {
|
|
|
155
155
|
role: "dialog",
|
|
156
156
|
"data-testid": testId,
|
|
157
157
|
"aria-labelledby": heading.id,
|
|
158
|
-
ref: (0, _mergeRefs.default)([ref, localRef])
|
|
159
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
160
|
-
,
|
|
158
|
+
ref: (0, _mergeRefs.default)([ref, localRef]),
|
|
161
159
|
style: style,
|
|
162
160
|
className: (0, _runtime.ax)([styles.root])
|
|
163
161
|
}, children);
|
|
@@ -141,9 +141,7 @@ export const PopoverContent = props => {
|
|
|
141
141
|
role: "dialog",
|
|
142
142
|
"data-testid": testId,
|
|
143
143
|
"aria-labelledby": heading.id,
|
|
144
|
-
ref: mergeRefs([ref, localRef])
|
|
145
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
146
|
-
,
|
|
144
|
+
ref: mergeRefs([ref, localRef]),
|
|
147
145
|
style: style,
|
|
148
146
|
className: ax([styles.root])
|
|
149
147
|
}, children);
|
|
@@ -146,9 +146,7 @@ export var PopoverContent = function PopoverContent(props) {
|
|
|
146
146
|
role: "dialog",
|
|
147
147
|
"data-testid": testId,
|
|
148
148
|
"aria-labelledby": heading.id,
|
|
149
|
-
ref: mergeRefs([ref, localRef])
|
|
150
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
151
|
-
,
|
|
149
|
+
ref: mergeRefs([ref, localRef]),
|
|
152
150
|
style: style,
|
|
153
151
|
className: ax([styles.root])
|
|
154
152
|
}, children);
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6,9 +6,9 @@ export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';
|
|
|
6
6
|
export { SpotlightActions, type SpotlightActionsProps } from './ui/actions';
|
|
7
7
|
export { SpotlightStepCount, type SpotlightStepCountProps } from './ui/step-count';
|
|
8
8
|
export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/primary-action';
|
|
9
|
-
export { SpotlightPrimaryLink, type SpotlightPrimaryLinkProps
|
|
9
|
+
export { SpotlightPrimaryLink, type SpotlightPrimaryLinkProps } from './ui/primary-link';
|
|
10
10
|
export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
|
|
11
|
-
export { SpotlightSecondaryLink, type SpotlightSecondaryLinkProps
|
|
11
|
+
export { SpotlightSecondaryLink, type SpotlightSecondaryLinkProps } from './ui/secondary-link';
|
|
12
12
|
export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
|
|
13
13
|
export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
|
|
14
14
|
export { SpotlightShowMoreControl, type SpotlightShowMoreControlProps, } from './ui/show-more-control';
|
|
@@ -6,9 +6,9 @@ export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';
|
|
|
6
6
|
export { SpotlightActions, type SpotlightActionsProps } from './ui/actions';
|
|
7
7
|
export { SpotlightStepCount, type SpotlightStepCountProps } from './ui/step-count';
|
|
8
8
|
export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/primary-action';
|
|
9
|
-
export { SpotlightPrimaryLink, type SpotlightPrimaryLinkProps
|
|
9
|
+
export { SpotlightPrimaryLink, type SpotlightPrimaryLinkProps } from './ui/primary-link';
|
|
10
10
|
export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
|
|
11
|
-
export { SpotlightSecondaryLink, type SpotlightSecondaryLinkProps
|
|
11
|
+
export { SpotlightSecondaryLink, type SpotlightSecondaryLinkProps } from './ui/secondary-link';
|
|
12
12
|
export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
|
|
13
13
|
export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
|
|
14
14
|
export { SpotlightShowMoreControl, type SpotlightShowMoreControlProps, } from './ui/show-more-control';
|
package/package.json
CHANGED