Skip to content

Commit 554e668

Browse files
m-bertCopilotj-piasecki
authored
[docs] Add version badges (#3978)
## Description This PR, similarly to #3975, adds badges for versions for the features. ### Darkmode <img width="889" height="143" alt="image" src="https://github.com/user-attachments/assets/17822ae5-be76-4bf1-8139-2f728915e926" /> ### Lightmode <img width="881" height="135" alt="image" src="https://github.com/user-attachments/assets/28264368-583f-40e7-8914-95aa815680b6" /> ## Test plan Read docs 🤓 --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>
1 parent e566b99 commit 554e668

File tree

15 files changed

+228
-79
lines changed

15 files changed

+228
-79
lines changed

‎packages/docs-gesture-handler/docs/components/buttons.mdx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ sidebar_label: Buttons
77
import useBaseUrl from '@docusaurus/useBaseUrl';
88
import GifGallery from '@site/components/GifGallery';
99

10-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
10+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1111

1212
<GifGallery>
1313
<img src={useBaseUrl('gifs/samplebutton.gif')} width="280" />
@@ -39,19 +39,19 @@ exclusive?: boolean;
3939

4040
Defines if more than one button could be pressed simultaneously. By default set to `true`.
4141

42-
<HeaderWithBadge platforms={['android']}>
42+
<HeaderWithBadges platforms={['android']}>
4343
### rippleColor
44-
</HeaderWithBadge>
44+
</HeaderWithBadges>
4545

4646
```ts
4747
rippleColor?: number | ColorValue | null;
4848
```
4949

5050
Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
5151

52-
<HeaderWithBadge platforms={['android']}>
52+
<HeaderWithBadges platforms={['android']}>
5353
### rippleRadius
54-
</HeaderWithBadge>
54+
</HeaderWithBadges>
5555

5656

5757
```ts
@@ -60,29 +60,29 @@ rippleRadius?: number | null;
6060

6161
Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
6262

63-
<HeaderWithBadge platforms={['android']}>
63+
<HeaderWithBadges platforms={['android']}>
6464
### borderless
65-
</HeaderWithBadge>
65+
</HeaderWithBadges>
6666

6767
```ts
6868
borderless?: boolean;
6969
```
7070

7171
If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.
7272

73-
<HeaderWithBadge platforms={['android']}>
73+
<HeaderWithBadges platforms={['android']}>
7474
### foreground
75-
</HeaderWithBadge>
75+
</HeaderWithBadges>
7676

7777
```ts
7878
foreground?: boolean;
7979
```
8080

8181
Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.
8282

83-
<HeaderWithBadge platforms={['android']}>
83+
<HeaderWithBadges platforms={['android']}>
8484
### touchSoundDisabled
85-
</HeaderWithBadge>
85+
</HeaderWithBadges>
8686

8787
```ts
8888
touchSoundDisabled?: boolean;
@@ -140,9 +140,9 @@ underlayColor?: string;
140140

141141
Background color that will be dimmed when button is in active state.
142142

143-
<HeaderWithBadge platforms={['iOS']}>
143+
<HeaderWithBadges platforms={['iOS']}>
144144
### activeOpacity
145-
</HeaderWithBadge>
145+
</HeaderWithBadges>
146146

147147
```ts
148148
activeOpacity?: number;
@@ -154,9 +154,9 @@ Opacity applied to the underlay when button is in active state.
154154

155155
This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:
156156

157-
<HeaderWithBadge platforms={['iOS']}>
157+
<HeaderWithBadges platforms={['iOS']}>
158158
### activeOpacity
159-
</HeaderWithBadge>
159+
</HeaderWithBadges>
160160

161161
```ts
162162
activeOpacity?: number;

‎packages/docs-gesture-handler/docs/components/pressable.mdx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ sidebar_label: Pressable
77
import useBaseUrl from '@docusaurus/useBaseUrl';
88
import GifGallery from '@site/components/GifGallery';
99

10-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
10+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1111

1212
:::info
1313
This component is a drop-in replacement for the `Pressable` component.
@@ -89,39 +89,39 @@ cancelable?: null | boolean;
8989

9090
Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
9191

92-
<HeaderWithBadge platforms={['android', 'web']}>
92+
<HeaderWithBadges platforms={['android', 'web']}>
9393
### onHoverIn
94-
</HeaderWithBadge>
94+
</HeaderWithBadges>
9595

9696
```ts
9797
onHoverIn?: null | ((event: PressableEvent) => void);
9898
```
9999

100100
Called when pointer is hovering over the element.
101101

102-
<HeaderWithBadge platforms={['android', 'web']}>
102+
<HeaderWithBadges platforms={['android', 'web']}>
103103
### onHoverOut
104-
</HeaderWithBadge>
104+
</HeaderWithBadges>
105105

106106
```ts
107107
onHoverOut?: null | ((event: PressableEvent) => void);
108108
```
109109

110110
Called when pointer stops hovering over the element.
111111

112-
<HeaderWithBadge platforms={['web']}>
112+
<HeaderWithBadges platforms={['web']}>
113113
### delayHoverIn
114-
</HeaderWithBadge>
114+
</HeaderWithBadges>
115115

116116
```ts
117117
delayHoverIn?: number | null;
118118
```
119119

120120
Duration to wait after hover in before calling `onHoverIn`.
121121

122-
<HeaderWithBadge platforms={['web']}>
122+
<HeaderWithBadges platforms={['web']}>
123123
### delayHoverOut
124-
</HeaderWithBadge>
124+
</HeaderWithBadges>
125125

126126
```ts
127127
delayHoverOut?: number | null;
@@ -145,9 +145,9 @@ disabled?: null | boolean;
145145

146146
Whether the `Pressable` behavior is disabled.
147147

148-
<HeaderWithBadge platforms={['android', 'iOS']}>
148+
<HeaderWithBadges platforms={['android', 'iOS']}>
149149
### hitSlop
150-
</HeaderWithBadge>
150+
</HeaderWithBadges>
151151

152152
```ts
153153
hitSlop?: null | Insets | number;
@@ -157,9 +157,9 @@ Additional distance outside of the view in which a press is detected and [`onPre
157157

158158
The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
159159

160-
<HeaderWithBadge platforms={['android', 'iOS']}>
160+
<HeaderWithBadges platforms={['android', 'iOS']}>
161161
### pressRetentionOffset
162-
</HeaderWithBadge>
162+
</HeaderWithBadges>
163163

164164
```ts
165165
pressRetentionOffset?: null | Insets | number;
@@ -170,19 +170,19 @@ press before [`onPressOut`](#onpressout) is triggered.
170170

171171
The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
172172

173-
<HeaderWithBadge platforms={['android']}>
173+
<HeaderWithBadges platforms={['android']}>
174174
### android_disableSound
175-
</HeaderWithBadge>
175+
</HeaderWithBadges>
176176

177177
```ts
178178
android_disableSound?: null | boolean;
179179
```
180180

181181
If `true`, doesn't play system sound on touch.
182182

183-
<HeaderWithBadge platforms={['android']}>
183+
<HeaderWithBadges platforms={['android']}>
184184
### android_ripple
185-
</HeaderWithBadge>
185+
</HeaderWithBadges>
186186

187187
```ts
188188
android_ripple?: null | PressableAndroidRippleConfig;

‎packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ sidebar_label: Reanimated Drawer Layout
66

77
import useBaseUrl from '@docusaurus/useBaseUrl';
88

9-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
9+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1010

1111
:::info
1212
This component acts as a cross-platform replacement for React Native's [`DrawerLayoutAndroid`](http://reactnative.dev/docs/drawerlayoutandroid.html) component, written using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started). For detailed information on standard parameters, please refer to the [React Native documentation](http://reactnative.dev/docs/drawerlayoutandroid.html).
@@ -134,9 +134,9 @@ export enum DrawerState {
134134

135135
A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
136136

137-
<HeaderWithBadge platforms={['iOS']}>
137+
<HeaderWithBadges platforms={['iOS']}>
138138
### enableTrackpadTwoFingerGesture
139-
</HeaderWithBadge>
139+
</HeaderWithBadges>
140140

141141
```ts
142142
enableTrackpadTwoFingerGesture?: boolean;
@@ -153,9 +153,9 @@ children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);
153153

154154
Either a component rendered in the content view or a function. If `children` is a function, it receives an `openValue` parameter - [`SharedValue`](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) that indicates the progress of the drawer's opening or closing animation. This value equals `0` when the drawer is closed and `1` when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a [`ReactNode`](https://reactnative.dev/docs/react-node).
155155

156-
<HeaderWithBadge platforms={['android', 'web']}>
156+
<HeaderWithBadges platforms={['android', 'web']}>
157157
### mouseButton
158-
</HeaderWithBadge>
158+
</HeaderWithBadges>
159159

160160
<CollapsibleCode
161161
label="Show composed types definitions"
@@ -176,9 +176,9 @@ enum MouseButton {
176176

177177
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
178178

179-
<HeaderWithBadge platforms={['web']}>
179+
<HeaderWithBadges platforms={['web']}>
180180
### enableContextMenu
181-
</HeaderWithBadge>
181+
</HeaderWithBadges>
182182

183183
```ts
184184
enableContextMenu: boolean;

‎packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ sidebar_label: Reanimated Swipeable
77
import useBaseUrl from '@docusaurus/useBaseUrl';
88
import GifGallery from '@site/components/GifGallery'
99

10-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
10+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1111

1212
:::info
1313
This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
@@ -242,19 +242,19 @@ blocksExternalGesture?: AnyGesture | AnyGesture[];
242242

243243
Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)).
244244

245-
<HeaderWithBadge platforms={['iOS']}>
245+
<HeaderWithBadges platforms={['iOS']}>
246246
### enableTrackpadTwoFingerGesture
247-
</HeaderWithBadge>
247+
</HeaderWithBadges>
248248

249249
```ts
250250
enableTrackpadTwoFingerGesture?: boolean;
251251
```
252252

253253
Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with `enableTrackpadTwoFingerGesture` swiping with two fingers will also trigger the gesture.
254254

255-
<HeaderWithBadge platforms={['android', 'web']}>
255+
<HeaderWithBadges platforms={['android', 'web']}>
256256
### mouseButton
257-
</HeaderWithBadge>
257+
</HeaderWithBadges>
258258

259259
<CollapsibleCode
260260
label="Show composed types definitions"
@@ -275,9 +275,9 @@ enum MouseButton {
275275

276276
Allows users to choose which mouse button should handler respond to. Arguments can be combined using `|` operator, e.g. `mouseButton(MouseButton.LEFT | MouseButton.RIGHT)`. Default value is set to `MouseButton.LEFT`.
277277

278-
<HeaderWithBadge platforms={['web']}>
278+
<HeaderWithBadges platforms={['web']}>
279279
### enableContextMenu
280-
</HeaderWithBadge>
280+
</HeaderWithBadges>
281281

282282
```ts
283283
enableContextMenu: boolean;

‎packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ sidebar_position: 4
66
---
77

88
import CollapsibleCode from '@site/src/components/CollapsibleCode';
9-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
9+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1010

1111
## Gesture Detector
1212

@@ -190,29 +190,29 @@ gesture: SingleGesture | ComposedGesture;
190190

191191
A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition).
192192

193-
<HeaderWithBadge platforms={['web']}>
193+
<HeaderWithBadges platforms={['web']}>
194194
### userSelect
195-
</HeaderWithBadge>
195+
</HeaderWithBadges>
196196

197197
```ts
198198
userSelect: 'none' | 'auto' | 'text';
199199
```
200200

201201
This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.
202202

203-
<HeaderWithBadge platforms={['web']}>
203+
<HeaderWithBadges platforms={['web']}>
204204
### touchAction
205-
</HeaderWithBadge>
205+
</HeaderWithBadges>
206206

207207
```ts
208208
touchAction: TouchAction;
209209
```
210210

211211
This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.
212212

213-
<HeaderWithBadge platforms={['web']}>
213+
<HeaderWithBadges platforms={['web']}>
214214
### enableContextMenu
215-
</HeaderWithBadge>
215+
</HeaderWithBadges>
216216

217217
```ts
218218
enableContextMenu: boolean;

‎packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import CollapsibleCode from '@site/src/components/CollapsibleCode';
22

3-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
3+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
44

55
### enabled
66

@@ -69,9 +69,9 @@ testID: string;
6969

7070
Sets a `testID` property for gesture object, allowing for querying for it in tests.
7171

72-
<HeaderWithBadge platforms={['iOS']}>
72+
<HeaderWithBadges platforms={['iOS']}>
7373
### cancelsTouchesInView
74-
</HeaderWithBadge>
74+
</HeaderWithBadges>
7575

7676
```ts
7777
cancelsTouchesInView: boolean | SharedValue<boolean>;

‎packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
1212
import FlingGestureBasic from '@site/static/examples/FlingGestureBasic';
1313
import FlingGestureBasicSrc from '!!raw-loader!@site/static/examples/FlingGestureBasicSrc';
1414

15-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
15+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1616

1717
<div className={webContainer}>
1818
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
@@ -142,9 +142,9 @@ numberOfPointers: number | SharedValue<number>;
142142

143143
Determine exact number of points required to handle the fling gesture.
144144

145-
<HeaderWithBadge platforms={['android', 'web']}>
145+
<HeaderWithBadges platforms={['android', 'web']}>
146146
### mouseButton
147-
</HeaderWithBadge>
147+
</HeaderWithBadges>
148148

149149
<CollapsibleCode
150150
label="Show composed types definitions"

‎packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
1212
import HoverGestureBasic from '@site/static/examples/HoverGestureBasic';
1313
import HoverGestureBasicSrc from '!!raw-loader!@site/static/examples/HoverGestureBasic';
1414

15-
import HeaderWithBadge from '@site/src/components/HeaderWithBadge';
15+
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';
1616

1717
<div className={webContainer}>
1818
<div className={vanishOnMobile} style={{ display: 'flex', justifyContent: 'center', maxWidth: 360 }}>
@@ -93,9 +93,9 @@ const styles = StyleSheet.create({
9393

9494
<SharedValueInfo />
9595

96-
<HeaderWithBadge platforms={['iOS']}>
96+
<HeaderWithBadges platforms={['iOS']}>
9797
### effect
98-
</HeaderWithBadge>
98+
</HeaderWithBadges>
9999

100100
<CollapsibleCode
101101
label="Show composed types definitions"

0 commit comments

Comments
 (0)