Skip to content

Commit a39ac2f

Browse files
LFDanLusnowystinger
LFDanLu
and
snowystinger
authored
Move ContextualHelpTrigger docs to Menu (#5017)
* Move ContextualHelpTrigger docs to Menu * import Keyboard * forgot to save --------- Co-authored-by: Robert Snow <rsnow@adobe.com>
1 parent 4e51283 commit a39ac2f

File tree

2 files changed

+71
-70
lines changed

2 files changed

+71
-70
lines changed

‎packages/@react-spectrum/menu/docs/Menu.mdx

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ governing permissions and limitations under the License. */}
1010
import {Layout} from '@react-spectrum/docs';
1111
export default Layout;
1212

13+
import contextualHelpTriggerTypes from 'docs:@react-spectrum/menu/src/ContextualHelpTrigger.tsx';
1314
import docs from 'docs:@react-spectrum/menu';
14-
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
15+
import {HeaderInfo, PropTable, PageDescription, VersionBadge} from '@react-spectrum/docs';
1516
import packageData from '@react-spectrum/menu/package.json';
17+
import {Keyboard} from '@react-spectrum/text';
1618

1719
```jsx import
1820
import {ActionButton} from '@react-spectrum/button'
@@ -33,7 +35,7 @@ keywords: [menu trigger, dropdown, action menu]
3335

3436
<HeaderInfo
3537
packageData={packageData}
36-
componentNames={['Menu', 'MenuTrigger']}
38+
componentNames={['Menu', 'MenuTrigger', 'ContextualHelpTrigger']}
3739
sourceData={[
3840
{type: 'Spectrum', url: 'https://spectrum.adobe.com/page/menu/'}
3941
]}
@@ -287,10 +289,75 @@ import {Keyboard, Text} from '@react-spectrum/text';
287289
</MenuTrigger>
288290
```
289291

292+
## Unavailable Items <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
293+
294+
ContextualHelpTrigger disables a menu item's action and replaces it with a popover with information on why the item is unavailable and may link users to more information elsewhere.
295+
296+
The ContextualHelpTrigger accepts exactly
297+
two children: the `Item` which triggers opening of the Dialog and the Dialog itself. The trigger must be
298+
the first child passed into the ContextualHelpTrigger and should be an `Item`. Similar to
299+
ContextualHelp, the layout of the Dialog is very deliberate. See [ContextualHelp](ContextualHelp.html#content) for further explanation.
300+
301+
By default, a ContextualHelpTrigger's Dialog is opened by hovering, pressing the trigger element or activating
302+
it via the <Keyboard>Space</Keyboard>, <Keyboard>Enter</Keyboard>, or <Keyboard>Right Arrow</Keyboard> keys.
303+
Hovering another item or pressing the <Keyboard>Esc</Keyboard> key will close the Dialog and leave the Menu open.
304+
305+
Setting the `isUnavailable` prop on the ContextualHelpTrigger makes the menu item unavailable and enables the Dialog with contextual help, allowing for programmatic control.
306+
307+
Note that the Menu's `onAction` and `onSelectionChange`
308+
callbacks will not fire for items made unavailable by a ContextualHelpTrigger.
309+
310+
The example below illustrates how one would setup a Menu to use ContextualHelpTrigger.
311+
312+
```tsx example
313+
import {ContextualHelpTrigger} from '@react-spectrum/menu';
314+
import {Dialog} from '@react-spectrum/dialog';
315+
import {Heading} from '@react-spectrum/text';
316+
import {Content} from '@react-spectrum/view';
317+
318+
<MenuTrigger>
319+
<ActionButton>Edit</ActionButton>
320+
<Menu>
321+
<Item key="undo">Undo</Item>
322+
<Item key="redo">Redo</Item>
323+
<ContextualHelpTrigger isUnavailable>
324+
<Item key="cut">Cut</Item>
325+
<Dialog>
326+
<Heading>Cut</Heading>
327+
<Content>Please select text for 'Cut' to be enabled.</Content>
328+
</Dialog>
329+
</ContextualHelpTrigger>
330+
<ContextualHelpTrigger isUnavailable>
331+
<Item key="copy">Copy</Item>
332+
<Dialog>
333+
<Heading>Copy</Heading>
334+
<Content>Please select text for 'Copy' to be enabled.</Content>
335+
</Dialog>
336+
</ContextualHelpTrigger>
337+
<ContextualHelpTrigger>
338+
<Item key="paste">Paste</Item>
339+
<Dialog>
340+
<Heading>Paste</Heading>
341+
<Content>You have nothing to 'Paste'.</Content>
342+
</Dialog>
343+
</ContextualHelpTrigger>
344+
</Menu>
345+
</MenuTrigger>
346+
```
347+
290348
## Props
291349

350+
### Menu props
351+
292352
<PropTable component={docs.exports.Menu} links={docs.links} />
293353

354+
### ContextualHelpTrigger Props
355+
<PropTable component={{
356+
props: {
357+
properties: Object.fromEntries(Object.entries(docs.exports.SpectrumMenuDialogTriggerProps.properties))
358+
}
359+
}} links={contextualHelpTriggerTypes.links} />
360+
294361
## Visual Options
295362

296363
### Autofocus

‎packages/@react-spectrum/menu/docs/MenuTrigger.mdx

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,15 @@ governing permissions and limitations under the License. */}
1010
import {Layout} from '@react-spectrum/docs';
1111
export default Layout;
1212

13-
import contextualHelpTriggerTypes from 'docs:@react-spectrum/menu/src/ContextualHelpTrigger.tsx';
1413
import docs from 'docs:@react-spectrum/menu';
15-
import {HeaderInfo, PropTable, PageDescription, VersionBadge} from '@react-spectrum/docs';
14+
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
1615
import packageData from '@react-spectrum/menu/package.json';
1716
import {Keyboard} from '@react-spectrum/text';
1817

1918
```jsx import
2019
import {ActionButton} from '@react-spectrum/button'
2120
import {Item, Menu, MenuTrigger} from '@react-spectrum/menu';
2221
import {Flex} from '@react-spectrum/layout';
23-
2422
```
2523

2624
---
@@ -34,7 +32,7 @@ keywords: [menu, dropdown, action menu]
3432

3533
<HeaderInfo
3634
packageData={packageData}
37-
componentNames={['MenuTrigger', 'Menu', 'ContextualHelpTrigger']}
35+
componentNames={['MenuTrigger', 'Menu']}
3836
sourceData={[
3937
{type: 'Spectrum', url: 'https://spectrum.adobe.com/page/popover/'}
4038
]}
@@ -122,74 +120,10 @@ import {Text} from '@react-spectrum/text';
122120
</MenuTrigger>
123121
```
124122

125-
## Unavailable Items <VersionBadge version="alpha" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
126-
127-
ContextualHelpTrigger disables a menu item's action and replaces it with a popover with information on why the item is unavailable and may link users to more information elsewhere.
128-
129-
The ContextualHelpTrigger accepts exactly
130-
two children: the Item which triggers opening of the Dialog and the Dialog itself. The trigger must be
131-
the first child passed into the ContextualHelpTrigger and should be an Item. Similar to
132-
ContextualHelp, the layout of the Dialog is very deliberate. See [ContextualHelp](ContextualHelp.html#content) for further explanation.
133-
134-
By default, a ContextualHelpTrigger's Dialog is opened by hovering, pressing the trigger element or activating
135-
it via the <Keyboard>Space</Keyboard>, <Keyboard>Enter</Keyboard>, or <Keyboard>Right Arrow</Keyboard> keys.
136-
Hovering another item or pressing the <Keyboard>Esc</Keyboard> key will close the Dialog and leave the Menu open.
137-
138-
Setting the `isUnavailable` prop on the ContextualHelpTrigger makes a Menu Item unavailable and enables the Dialog with contextual help, allowing for programmatic control.
139-
140-
Note that the Menu's `onAction` and `onSelectionChange`
141-
callbacks will not fire for items made unavailable by a ContextualHelpTrigger.
142-
143-
The example below illustrates how one would setup a MenuTrigger to use ContextualHelpTrigger.
144-
145-
```tsx example
146-
import {ContextualHelpTrigger} from '@react-spectrum/menu';
147-
import {Dialog} from '@react-spectrum/dialog';
148-
import {Heading} from '@react-spectrum/text';
149-
import {Content} from '@react-spectrum/view';
150-
151-
<MenuTrigger>
152-
<ActionButton>Edit</ActionButton>
153-
<Menu>
154-
<Item key="undo">Undo</Item>
155-
<Item key="redo">Redo</Item>
156-
<ContextualHelpTrigger isUnavailable>
157-
<Item key="cut">Cut</Item>
158-
<Dialog>
159-
<Heading>Cut</Heading>
160-
<Content>Please select text for 'Cut' to be enabled.</Content>
161-
</Dialog>
162-
</ContextualHelpTrigger>
163-
<ContextualHelpTrigger isUnavailable>
164-
<Item key="copy">Copy</Item>
165-
<Dialog>
166-
<Heading>Copy</Heading>
167-
<Content>Please select text for 'Copy' to be enabled.</Content>
168-
</Dialog>
169-
</ContextualHelpTrigger>
170-
<ContextualHelpTrigger>
171-
<Item key="paste">Paste</Item>
172-
<Dialog>
173-
<Heading>Paste</Heading>
174-
<Content>You have nothing to 'Paste'.</Content>
175-
</Dialog>
176-
</ContextualHelpTrigger>
177-
</Menu>
178-
</MenuTrigger>
179-
```
180-
181123
## Props
182124

183-
### MenuTrigger props
184125
<PropTable component={docs.exports.MenuTrigger} links={docs.links} />
185126

186-
### ContextualHelpTrigger Props
187-
<PropTable component={{
188-
props: {
189-
properties: Object.fromEntries(Object.entries(docs.exports.SpectrumMenuDialogTriggerProps.properties))
190-
}
191-
}} links={contextualHelpTriggerTypes.links} />
192-
193127
## Visual options
194128

195129
### Align and direction

0 commit comments

Comments
 (0)