Skip to content

Commit d6ded07

Browse files
committed
Merge branch 'main' of github.com:adobe/react-spectrum
2 parents 54c2366 + 69c0940 commit d6ded07

File tree

4 files changed

+318
-4
lines changed

4 files changed

+318
-4
lines changed

packages/@react-spectrum/contextualhelp/docs/ContextualHelp.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ import {Flex} from '@react-spectrum/layout';
2525
---
2626
category: Overlays
2727
keywords: [popover, field, input]
28-
after_version: 3.0.0-alpha.1
2928
---
3029

3130
# ContextualHelp

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

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default Layout;
1313
import docs from 'docs:@react-spectrum/menu';
1414
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
1515
import packageData from '@react-spectrum/menu/package.json';
16+
import {Keyboard} from '@react-spectrum/text';
1617

1718
```jsx import
1819
import {ActionButton} from '@react-spectrum/button'
@@ -42,7 +43,7 @@ keywords: [menu, dropdown, action menu]
4243
```tsx example
4344
<MenuTrigger>
4445
<ActionButton>
45-
Edit
46+
Edit
4647
</ActionButton>
4748
<Menu>
4849
<Item>Cut</Item>
@@ -82,6 +83,43 @@ function Example() {
8283
}
8384
```
8485

86+
## Long press
87+
By default, a MenuTrigger's Menu is opened by pressing the trigger element or activating it via the <Keyboard>Space</Keyboard> or <Keyboard>Enter</Keyboard> keys. However, there may be cases in which your trigger element
88+
should perform a separate default action on press such as selection, and should only display the Menu when long pressed. This behavior can be changed by providing `"longPress"` to the `trigger` prop. With this prop, the Menu will only be opened upon
89+
pressing and holding the trigger element or by using the <Keyboard>Option</Keyboard> (<Keyboard>Alt</Keyboard> on Windows) + <Keyboard>Down Arrow</Keyboard>/<Keyboard>Up Arrow</Keyboard> keys while focusing the trigger element.
90+
91+
The example below illustrates how one would setup a MenuTrigger to have long press behavior.
92+
93+
```tsx example
94+
import CloneStamp from '@spectrum-icons/workflow/CloneStamp';
95+
import Crop from '@spectrum-icons/workflow/Crop';
96+
import CropRotate from '@spectrum-icons/workflow/CropRotate';
97+
import Slice from '@spectrum-icons/workflow/Slice';
98+
import {Text} from '@react-spectrum/text';
99+
100+
<MenuTrigger trigger="longPress">
101+
<ActionButton
102+
aria-label="Crop tool"
103+
onPress={() => alert('Cropping!')}>
104+
<Crop />
105+
</ActionButton>
106+
<Menu>
107+
<Item textValue="Crop Rotate">
108+
<CropRotate />
109+
<Text>Crop Rotate</Text>
110+
</Item>
111+
<Item textValue="Slice">
112+
<Slice />
113+
<Text>Slice</Text>
114+
</Item>
115+
<Item textValue="Clone stamp">
116+
<CloneStamp />
117+
<Text>Clone Stamp</Text>
118+
</Item>
119+
</Menu>
120+
</MenuTrigger>
121+
```
122+
85123
## Props
86124

87125
<PropTable component={docs.exports.MenuTrigger} links={docs.links} />

packages/@react-spectrum/provider/docs/Provider.mdx

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {Layout} from '@react-spectrum/docs';
22
export default Layout;
33

44
import docs from 'docs:@react-spectrum/provider';
5-
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
5+
import {HeaderInfo, PropTable, PageDescription, TypeLink} from '@react-spectrum/docs';
66
import packageData from '@react-spectrum/provider/package.json';
77

88
```jsx import
@@ -27,7 +27,7 @@ keywords: [theme, locale, application, colorstop]
2727

2828
<HeaderInfo
2929
packageData={packageData}
30-
componentNames={['Provider']} />
30+
componentNames={['Provider', 'useProvider']} />
3131

3232
## Example
3333

@@ -149,3 +149,24 @@ function Register() {
149149
## Props
150150

151151
<PropTable component={docs.exports.Provider} links={docs.links} />
152+
153+
## useProvider
154+
The <TypeLink links={docs.links} type={docs.exports.useProvider} /> hook can be used to access the various properties applied by the nearest parent Provider. This can be useful for adapting a custom component to the current color scheme or scale.
155+
156+
The example below uses the `colorScheme` returned from `useProvider` to display either a moon or sun icon depending on the current color scheme. Toggle the theme using the switcher in the top right corner of the page to see the icon change.
157+
158+
```tsx example
159+
import Light from '@spectrum-icons/workflow/Light';
160+
import Moon from '@spectrum-icons/workflow/Moon';
161+
import {useProvider} from '@react-spectrum/provider';
162+
163+
function Example() {
164+
let {colorScheme} = useProvider();
165+
166+
return colorScheme === 'dark'
167+
? <Moon aria-label="In dark theme" />
168+
: <Light aria-label="In light theme" />
169+
}
170+
171+
<Example />
172+
```
Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
{/* Copyright 2022 Adobe. All rights reserved.
2+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
3+
you may not use this file except in compliance with the License. You may obtain a copy
4+
of the License at http://www.apache.org/licenses/LICENSE-2.0
5+
Unless required by applicable law or agreed to in writing, software distributed under
6+
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
7+
OF ANY KIND, either express or implied. See the License for the specific language
8+
governing permissions and limitations under the License. */}
9+
10+
import {BlogPostLayout, Hero} from '@react-spectrum/docs';
11+
export default BlogPostLayout;
12+
13+
---
14+
description: We are back with a new year and a new component! The Contextual Help component has been added to React Spectrum thanks to @arumsey. This component is handy for showing users more information in forms and other views. We also have some new features including long press support for `MenuTrigger`, additional keyboard support in `Combobox` and `useMove`, and plenty of bug fixes.
15+
date: 2022-02-15
16+
---
17+
18+
# February 15, 2022 Release
19+
20+
We are back with a new year and a new component! The Contextual Help component has been added to React Spectrum thanks to [@arumsey](https://github.com/arumsey) 🥳 This component is handy for showing users more information in forms and other views. We also have some new features including long press support for `MenuTrigger`, additional keyboard support in `Combobox` and `useMove`, and plenty of bug fixes.
21+
22+
Thank you to all our contributors who helped us with this release!
23+
24+
25+
## New Component
26+
- Contextual Help
27+
- `@react-spectrum/contextualhelp` - [Docs](https://react-spectrum.adobe.com/react-spectrum/ContextualHelp.html)
28+
## New features
29+
- Add support for long press on `MenuTrigger` - [@lishichengyan](https://github.com/lishichengyan) - [PR](https://github.com/adobe/react-spectrum/pull/2678) - [Docs](https://react-spectrum.adobe.com/react-spectrum/MenuTrigger.html#long-press)
30+
- Add `useProvider` to @adobe/react-spectrum - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/2769) - [Docs](https://react-spectrum.adobe.com/react-spectrum/Provider.html#useprovider)
31+
- Support `onKeyDown` in `ComboBox` - [@sdjustin](https://github.com/sdjustin) - [PR](https://github.com/adobe/react-spectrum/pull/2674)
32+
- Add modifier keys to `useMove` - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/2794)
33+
- Add `maxHeight` to `useOverlayPosition` - [@sttwarrior](https://github.com/sttwarrior) - [PR](https://github.com/adobe/react-spectrum/pull/2673)
34+
- Add `defaultOpen` and `onOpenChange` to `ActionMenu` - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/2728)
35+
## Fixed
36+
- Update usage of `start` to use `flex-start` in CSS - [@msabramo](https://github.com/msabramo) - [PR](https://github.com/adobe/react-spectrum/pull/2695)
37+
- Fix loss of focus on `NumberField` on Android - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/2127)
38+
- Update `FocusScope` to restore focus correctly when children change - [@kherock](https://github.com/kherock) - [PR](https://github.com/adobe/react-spectrum/pull/2791)
39+
- Fix SSR error for TableView - [@solimant](https://github.com/solimant) - [PR](https://github.com/adobe/react-spectrum/pull/2754)
40+
- Improve aria labeling for `SearchWithin` - [@reidbarber](https://github.com/reidbarber) - [PR](https://github.com/adobe/react-spectrum/pull/2288)
41+
- Fix `setState` callback in `useControlledState` - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/2304)
42+
- Handle keyboard “select all” checkbox events in TableView when rows are empty - [@ilumin](https://github.com/ilumin) - [PR](https://github.com/adobe/react-spectrum/pull/2720)
43+
- Update `ActionGroup` to display borders correctly - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/2710)
44+
- Change Dialog heading to use `H2` - [@majornista](https://github.com/majornista) - [PR](https://github.com/adobe/react-spectrum/pull/2633)
45+
- Update type of `AsyncListLoadFunction` in `useAsyncList` - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/2683)
46+
- Fix keyboard form submission in `usePress` - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/904)
47+
- Fix falsey checks in `TableKeyboardDelegate` - [@LFDanLu](https://github.com/LFDanLu) - [PR](https://github.com/adobe/react-spectrum/pull/2846)
48+
## Docs
49+
- Add documentation for `ActionMenu` - [@ktabors](https://github.com/ktabors) - [PR](https://github.com/adobe/react-spectrum/pull/2227)
50+
- Update `locale` prop in SSR docs - [@snowystinger](https://github.com/snowystinger) - [PR](https://github.com/adobe/react-spectrum/pull/2833)
51+
- Update supported browsers - [@devongovett](https://github.com/devongovett) - [PR](https://github.com/adobe/react-spectrum/pull/2828)
52+
## Under construction
53+
54+
Pre-release versions of the following components have been released. Please feel free to try them out, and report any issues you encounter.
55+
56+
57+
- ColorSlider beta
58+
- [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/ColorSlider.html)
59+
- [React Aria](https://react-spectrum.adobe.com/react-aria/useColorSlider.html)
60+
- ColorWheel beta
61+
- [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/ColorWheel.html)
62+
- [React Aria](https://react-spectrum.adobe.com/react-aria/useColorWheel.html)
63+
- ColorField beta
64+
- [React Spectrum](https://react-spectrum.adobe.com/react-spectrum/ColorField.html)
65+
- [React Aria](https://react-spectrum.adobe.com/react-aria/useColorField.html)
66+
- SearchWithin alpha
67+
- Calendar alpha
68+
- DatePicker alpha
69+
- ListView alpha
70+
- CardView alpha
71+
- Card alpha
72+
- TagGroup alpha
73+
74+
75+
## Released packages
76+
```
77+
- @adobe/react-spectrum@3.16.0
78+
- @internationalized/date@3.0.0-alpha.2
79+
- @internationalized/message@3.0.4
80+
- @internationalized/number@3.0.4
81+
- @react-aria/accordion@3.0.0-alpha.3
82+
- @react-aria/actiongroup@3.2.2
83+
- @react-aria/aria-modal-polyfill@3.4.1
84+
- @react-aria/autocomplete@3.0.0-alpha.2
85+
- @react-aria/breadcrumbs@3.1.6
86+
- @react-aria/button@3.4.0
87+
- @react-aria/calendar@3.0.0-alpha.2
88+
- @react-aria/checkbox@3.3.0
89+
- @react-aria/color@3.0.0-beta.7
90+
- @react-aria/combobox@3.2.2
91+
- @react-aria/datepicker@3.0.0-alpha.3
92+
- @react-aria/dialog@3.1.5
93+
- @react-aria/dnd@3.0.0-alpha.4
94+
- @react-aria/focus@3.5.1
95+
- @react-aria/grid@3.2.1
96+
- @react-aria/i18n@3.3.5
97+
- @react-aria/interactions@3.8.0
98+
- @react-aria/label@3.2.2
99+
- @react-aria/link@3.2.1
100+
- @react-aria/listbox@3.4.1
101+
- @react-aria/live-announcer@3.0.2
102+
- @react-aria/menu@3.4.0
103+
- @react-aria/meter@3.1.4
104+
- @react-aria/numberfield@3.1.2
105+
- @react-aria/overlays@3.7.4
106+
- @react-aria/progress@3.1.4
107+
- @react-aria/radio@3.1.7
108+
- @react-aria/searchfield@3.2.3
109+
- @react-aria/select@3.6.1
110+
- @react-aria/selection@3.7.2
111+
- @react-aria/separator@3.1.4
112+
- @react-aria/slider@3.0.4
113+
- @react-aria/spinbutton@3.0.2
114+
- @react-aria/ssr@3.1.1
115+
- @react-aria/switch@3.1.4
116+
- @react-aria/table@3.2.1
117+
- @react-aria/tabs@3.1.1
118+
- @react-aria/tag@3.0.0-alpha.0
119+
- @react-aria/textfield@3.5.1
120+
- @react-aria/toggle@3.2.0
121+
- @react-aria/tooltip@3.1.4
122+
- @react-aria/utils@3.11.1
123+
- @react-aria/virtualizer@3.3.6
124+
- @react-aria/visually-hidden@3.2.4
125+
- @react-spectrum/accordion@3.0.0-alpha.4
126+
- @react-spectrum/actionbar@3.0.0-alpha.4
127+
- @react-spectrum/actiongroup@3.4.0
128+
- @react-spectrum/autocomplete@3.0.0-alpha.2
129+
- @react-spectrum/avatar@3.0.0-alpha.1
130+
- @react-spectrum/breadcrumbs@3.2.5
131+
- @react-spectrum/button@3.7.0
132+
- @react-spectrum/buttongroup@3.2.4
133+
- @react-spectrum/calendar@3.0.0-alpha.2
134+
- @react-spectrum/card@3.0.0-alpha.2
135+
- @react-spectrum/checkbox@3.3.0
136+
- @react-spectrum/color@3.0.0-beta.7
137+
- @react-spectrum/combobox@3.2.1
138+
- @react-spectrum/contextualhelp@3.0.0
139+
- @react-spectrum/datepicker@3.0.0-alpha.3
140+
- @react-spectrum/dialog@3.3.5
141+
- @react-spectrum/divider@3.2.0
142+
- @react-spectrum/form@3.2.5
143+
- @react-spectrum/icon@3.3.3
144+
- @react-spectrum/illustratedmessage@3.1.5
145+
- @react-spectrum/image@3.1.5
146+
- @react-spectrum/label@3.4.2
147+
- @react-spectrum/layout@3.2.2
148+
- @react-spectrum/link@3.2.1
149+
- @react-spectrum/list@3.0.0-alpha.6
150+
- @react-spectrum/listbox@3.5.4
151+
- @react-spectrum/menu@3.6.0
152+
- @react-spectrum/meter@3.1.4
153+
- @react-spectrum/numberfield@3.1.2
154+
- @react-spectrum/overlays@3.4.5
155+
- @react-spectrum/picker@3.5.1
156+
- @react-spectrum/progress@3.1.4
157+
- @react-spectrum/provider@3.3.0
158+
- @react-spectrum/radio@3.1.6
159+
- @react-spectrum/searchfield@3.2.2
160+
- @react-spectrum/searchwithin@3.0.0-alpha.2
161+
- @react-spectrum/slider@3.0.5
162+
- @react-spectrum/statuslight@3.2.3
163+
- @react-spectrum/switch@3.1.4
164+
- @react-spectrum/table@3.1.2
165+
- @react-spectrum/tabs@3.1.2
166+
- @react-spectrum/tag@3.0.0-alpha.0
167+
- @react-spectrum/text@3.1.4
168+
- @react-spectrum/textfield@3.3.1
169+
- @react-spectrum/theme-dark@3.2.4
170+
- @react-spectrum/theme-default@3.2.4
171+
- @react-spectrum/theme-light@3.1.4
172+
- @react-spectrum/tooltip@3.1.5
173+
- @react-spectrum/utils@3.6.4
174+
- @react-spectrum/view@3.1.4
175+
- @react-spectrum/well@3.1.4
176+
- @react-stately/calendar@3.0.0-alpha.2
177+
- @react-stately/checkbox@3.0.4
178+
- @react-stately/collections@3.3.5
179+
- @react-stately/color@3.0.0-beta.6
180+
- @react-stately/combobox@3.0.2
181+
- @react-stately/data@3.4.4
182+
- @react-stately/datepicker@3.0.0-alpha.2
183+
- @react-stately/dnd@3.0.0-alpha.3
184+
- @react-stately/grid@3.1.1
185+
- @react-stately/layout@3.4.3
186+
- @react-stately/list@3.4.2
187+
- @react-stately/menu@3.2.4
188+
- @react-stately/numberfield@3.0.3
189+
- @react-stately/overlays@3.1.4
190+
- @react-stately/radio@3.3.3
191+
- @react-stately/searchfield@3.1.4
192+
- @react-stately/select@3.1.4
193+
- @react-stately/selection@3.9.1
194+
- @react-stately/slider@3.0.4
195+
- @react-stately/table@3.1.1
196+
- @react-stately/tabs@3.0.2
197+
- @react-stately/toggle@3.2.4
198+
- @react-stately/tooltip@3.0.6
199+
- @react-stately/tree@3.2.1
200+
- @react-stately/utils@3.4.0
201+
- @react-stately/virtualizer@3.1.7-alpha.0
202+
- @react-types/accordion@3.0.0-alpha.2
203+
- @react-types/actionbar@3.0.0-alpha.2
204+
- @react-types/actiongroup@3.2.2
205+
- @react-types/autocomplete@3.0.0-alpha.1
206+
- @react-types/avatar@3.0.0-alpha.1
207+
- @react-types/breadcrumbs@3.2.2
208+
- @react-types/button@3.4.2
209+
- @react-types/buttongroup@3.1.3
210+
- @react-types/calendar@3.0.0-alpha.2
211+
- @react-types/card@3.0.0-alpha.2
212+
- @react-types/checkbox@3.2.4
213+
- @react-types/color@3.0.0-beta.4
214+
- @react-types/combobox@3.2.2
215+
- @react-types/contextualhelp@3.0.0
216+
- @react-types/datepicker@3.0.0-alpha.2
217+
- @react-types/dialog@3.3.2
218+
- @react-types/divider@3.1.3
219+
- @react-types/form@3.2.3
220+
- @react-types/grid@3.0.1
221+
- @react-types/illustratedmessage@3.1.3
222+
- @react-types/image@3.1.4
223+
- @react-types/label@3.5.1
224+
- @react-types/layout@3.2.1
225+
- @react-types/link@3.2.1
226+
- @react-types/listbox@3.2.2
227+
- @react-types/menu@3.5.0
228+
- @react-types/meter@3.1.3
229+
- @react-types/numberfield@3.1.1
230+
- @react-types/overlays@3.5.2
231+
- @react-types/progress@3.1.3
232+
- @react-types/provider@3.4.0
233+
- @react-types/radio@3.1.3
234+
- @react-types/searchfield@3.1.3
235+
- @react-types/searchwithin@3.0.0-alpha.1
236+
- @react-types/select@3.5.2
237+
- @react-types/shared@3.11.0
238+
- @react-types/slider@3.0.3
239+
- @react-types/statuslight@3.1.3
240+
- @react-types/switch@3.1.3
241+
- @react-types/table@3.1.1
242+
- @react-types/tabs@3.0.2
243+
- @react-types/tag@3.0.0-alpha.0
244+
- @react-types/text@3.1.4
245+
- @react-types/textfield@3.3.1
246+
- @react-types/tooltip@3.1.3
247+
- @react-types/view@3.1.3
248+
- @react-types/well@3.1.3
249+
- @spectrum-icons/color@3.3.2
250+
- @spectrum-icons/illustrations@3.2.3
251+
- @spectrum-icons/ui@3.2.2
252+
- @spectrum-icons/workflow@3.2.2
253+
- react-aria@3.13.0
254+
- react-stately@3.12.0
255+
```
256+

0 commit comments

Comments
 (0)