Skip to content

Commit 48415fb

Browse files
yihuiliaoyihuiliao
committed
move props after the example
1 parent 9ae01f6 commit 48415fb

17 files changed

+164
-165
lines changed

‎packages/dev/s2-docs/pages/react-aria/FocusRing.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@ switching in from a different tab, we show the focus ring.
2929

3030
If CSS classes are not being used for styling, see [useFocusRing](useFocusRing.html) for a hooks version.
3131

32-
## Props
33-
34-
<PropTable links={docs.links} component={docs.exports.FocusRing} />
35-
3632
## Example
3733

3834
This example shows how to use `<FocusRing>` to apply a CSS class when keyboard focus is on a button.
@@ -46,3 +42,7 @@ import './FocusRingExample.css';
4642
<button className="button">Test</button>
4743
</FocusRing>
4844
```
45+
46+
## Props
47+
48+
<PropTable links={docs.links} component={docs.exports.FocusRing} />

‎packages/dev/s2-docs/pages/react-aria/FocusScope.mdx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,6 @@ in combination with a FocusScope to programmatically move focus within the scope
3434
arrow key navigation could be implemented by handling keyboard events and using a focus manager
3535
to move focus to the next and previous elements.
3636

37-
## Props
38-
39-
<PropTable links={docs.links} component={docs.exports.FocusScope} />
40-
41-
## FocusManager Interface
42-
43-
To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
44-
from a component within the FocusScope. A focus manager supports the following methods:
45-
46-
<ClassAPI links={docs.links} class={docs.exports.FocusManager} />
47-
4837
## Example
4938

5039
A basic example of a focus scope that contains focus within it is below. Clicking the "Open"
@@ -128,3 +117,14 @@ function ToolbarButton(props) {
128117
<ToolbarButton>Paste</ToolbarButton>
129118
</Toolbar>
130119
```
120+
121+
## Props
122+
123+
<PropTable links={docs.links} component={docs.exports.FocusScope} />
124+
125+
## FocusManager Interface
126+
127+
To get a focus manager, call the <TypeLink links={docs.links} type={docs.exports.useFocusManager} /> hook
128+
from a component within the FocusScope. A focus manager supports the following methods:
129+
130+
<ClassAPI links={docs.links} class={docs.exports.FocusManager} />

‎packages/dev/s2-docs/pages/react-aria/I18nProvider.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@ with a locale defined by your application (e.g. application setting). This shoul
2525
your entire application in the provider, which will be cause all child elements to receive the new locale
2626
information via [useLocale](useLocale.html).
2727

28-
## Props
29-
30-
<PropTable component={docs.exports.I18nProvider} links={docs.links} />
31-
3228
## Example
3329

3430
```tsx
@@ -38,3 +34,7 @@ import {I18nProvider} from '@react-aria/i18n';
3834
<YourApp />
3935
</I18nProvider>
4036
```
37+
38+
## Props
39+
40+
<PropTable component={docs.exports.I18nProvider} links={docs.links} />

‎packages/dev/s2-docs/pages/react-aria/PortalProvider.mdx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,6 @@ outside of any possible overflow or stacking contexts. We envision `UNSAFE_Porta
3232
elements into a single container at the root of the app or to control the order of children of the `body` element, but you may have use cases
3333
that need to do otherwise.
3434

35-
## Props
36-
37-
<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
38-
3935
## Example
4036

4137
The example below shows how you can use `UNSAFE_PortalProvider` to portal your Toasts to an arbitrary container. Note that
@@ -169,3 +165,8 @@ function MyOverlay(props) {
169165
return ReactDOM.createPortal(children, getContainer());
170166
}
171167
```
168+
169+
## Props
170+
171+
<PropTable links={docs.links} component={docs.exports.UNSAFE_PortalProvider} />
172+

‎packages/dev/s2-docs/pages/react-aria/useFilter.mdx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export const description = 'Implementing collections in React Aria';
1717

1818
# useFilter
1919

20+
## API
21+
22+
<FunctionAPI function={docs.exports.useFilter} links={docs.links} />
23+
2024
## Introduction
2125

2226
`useFilter` provides functions for filtering or searching based on substring matches. The builtin JavaScript
@@ -25,14 +29,6 @@ sensitive matching. `useFilter` provides options to allow ignoring case, diacrit
2529
which are implemented according to locale-specific rules. It automatically uses the current locale set by the application,
2630
either via the default browser language or via the [I18nProvider](I18nProvider.html).
2731

28-
## API
29-
30-
<FunctionAPI function={docs.exports.useFilter} links={docs.links} />
31-
32-
## Interface
33-
34-
<ClassAPI class={docs.exports.Filter} links={docs.links} />
35-
3632
## Example
3733

3834
The following example implements a filterable list using a `contains` matching strategy that ignores both case
@@ -79,3 +75,7 @@ function Example() {
7975
);
8076
}
8177
```
78+
79+
## Interface
80+
81+
<ClassAPI class={docs.exports.Filter} links={docs.links} />

‎packages/dev/s2-docs/pages/react-aria/useFocus.mdx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,6 @@ in CSS.
3232

3333
To handle focus events on descendants of an element, see [useFocusWithin](useFocusWithin.html).
3434

35-
## Usage
36-
37-
`useFocus` returns props that you should spread onto the target element:
38-
39-
<InterfaceType {...docs.exports.FocusResult} />
40-
41-
`useFocus` supports the following options and event handlers:
42-
43-
<InterfaceType {...docs.exports.FocusProps} />
44-
4535
## Example
4636

4737
This example shows a simple input element that handles focus events with `useFocus` and logs them to a list below.
@@ -83,3 +73,13 @@ function Example() {
8373
);
8474
}
8575
```
76+
77+
## Usage
78+
79+
`useFocus` returns props that you should spread onto the target element:
80+
81+
<InterfaceType {...docs.exports.FocusResult} />
82+
83+
`useFocus` supports the following options and event handlers:
84+
85+
<InterfaceType {...docs.exports.FocusProps} />

‎packages/dev/s2-docs/pages/react-aria/useFocusRing.mdx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,6 @@ and touch screen users.
3232

3333
If CSS classes are being used for styling, see the [FocusRing](FocusRing.html) component for a shortcut.
3434

35-
## Options
36-
37-
<InterfaceType {...docs.exports.AriaFocusRingProps} />
38-
39-
## Result
40-
41-
<InterfaceType {...docs.exports.FocusRingAria} />
42-
4335
## Example
4436

4537
This example shows how to use `useFocusRing` to adjust styling when keyboard focus is on a button.
@@ -76,3 +68,13 @@ function Example() {
7668
);
7769
}
7870
```
71+
72+
## Usage
73+
74+
`useFocusRing` returns props that you should spread onto the target element:
75+
76+
<InterfaceType {...docs.exports.FocusRingAria} />
77+
78+
`useFocusRing` supports the following options and event handlers:
79+
80+
<InterfaceType {...docs.exports.AriaFocusRingProps} />

‎packages/dev/s2-docs/pages/react-aria/useFocusVisible.mdx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,6 @@ in CSS.
3535
To determine whether a focus ring should be visible for an individual component rather than
3636
globally, see [useFocusRing](useFocusRing.html).
3737

38-
## Usage
39-
40-
`useFocusVisible` returns props that you should spread onto the target element:
41-
42-
<InterfaceType {...docs.exports.FocusVisibleResult} />
43-
44-
`useFocusVisible` supports the following options:
45-
46-
<InterfaceType {...docs.exports.FocusVisibleProps} />
47-
48-
4938
## Example
5039

5140
This example shows focus visible state and updates as you interact with the page. By default,
@@ -77,3 +66,13 @@ function Example() {
7766
);
7867
}
7968
```
69+
70+
## Usage
71+
72+
`useFocusVisible` returns props that you should spread onto the target element:
73+
74+
<InterfaceType {...docs.exports.FocusVisibleResult} />
75+
76+
`useFocusVisible` supports the following options:
77+
78+
<InterfaceType {...docs.exports.FocusVisibleProps} />

‎packages/dev/s2-docs/pages/react-aria/useFocusWithin.mdx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,16 +31,6 @@ in CSS.
3131

3232
To handle focus events on only the target element, and not descendants, see [useFocus](useFocus.html).
3333

34-
## Usage
35-
36-
`useFocusWithin` returns props that you should spread onto the target element:
37-
38-
<InterfaceType {...docs.exports.FocusWithinResult} />
39-
40-
`useFocusWithin` supports the following event handlers and options:
41-
42-
<InterfaceType {...docs.exports.FocusWithinProps} />
43-
4434
## Example
4535

4636
This example shows two text fields inside a div, which handles focus within events. It stores focus
@@ -100,3 +90,13 @@ function Example() {
10090
);
10191
}
10292
```
93+
94+
## Usage
95+
96+
`useFocusWithin` returns props that you should spread onto the target element:
97+
98+
<InterfaceType {...docs.exports.FocusWithinResult} />
99+
100+
`useFocusWithin` supports the following event handlers and options:
101+
102+
<InterfaceType {...docs.exports.FocusWithinProps} />

‎packages/dev/s2-docs/pages/react-aria/useHover.mdx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,6 @@ and device, `:hover` may never apply, or may apply continuously until the user t
3939
{/* TODO: uncomment once we transfer over the blogs to new docs */}
4040
{/* Read our [blog post](/blog/building-a-button-part-2.html) about the complexities of hover event handling to learn more. */}
4141

42-
## Usage
43-
44-
`useHover` returns props that you should spread onto the target element:
45-
46-
<InterfaceType {...docs.exports.HoverResult} />
47-
48-
`useHover` supports the following event handlers and options:
49-
50-
<InterfaceType {...docs.exports.HoverProps} />
51-
52-
Each of these handlers is fired with a `HoverEvent`, which exposes information about the target and the
53-
type of event that triggered the interaction.
54-
55-
<InterfaceType {...typesDocs.exports.HoverEvent} />
56-
5742
## Accessibility
5843

5944
Hover interactions should never be the only way to interact with an element because they are not
@@ -112,3 +97,18 @@ function Example() {
11297
);
11398
}
11499
```
100+
101+
## Usage
102+
103+
`useHover` returns props that you should spread onto the target element:
104+
105+
<InterfaceType {...docs.exports.HoverResult} />
106+
107+
`useHover` supports the following event handlers and options:
108+
109+
<InterfaceType {...docs.exports.HoverProps} />
110+
111+
Each of these handlers is fired with a `HoverEvent`, which exposes information about the target and the
112+
type of event that triggered the interaction.
113+
114+
<InterfaceType {...typesDocs.exports.HoverEvent} />

0 commit comments

Comments
 (0)